Modus UI

Mirror Plate

Web (React)

A member pass whose surface mirrors the webcam through a metallic glass filter.

The plate is tinted from the theme background, with a serif name and mono meta lines.

Modus pass

Ada Moreno

Studio member

Member no.

MD-0427-1188

Modus / Mirror Plate

Installation

CLI

npx @modus-ui/cli add mirror-plate

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/mirror-plate.tsx.
  3. Paste the code.

Usage

tsx
import { MirrorPlate } from "@/components/ui/mirror-plate";

export default function Example() {
  return <MirrorPlate />;
}

Props

PropTypeDefaultDescription
blurStrengthnumber12The strength of the blur effect.
colorstring"hsl(var(--foreground))"Text color overlay.
metalnessnumber1The metallic effect intensity.
roughnessnumber0.4The roughness of the reflection.
overlayColorstring"hsl(var(--background) / 0.35)"Background overlay color.
displacementStrengthnumber20How much the glass distorts the background.
noiseScalenumber1The scale of the noise filter.
specularConstantnumber1.2The shininess of the reflection.
grayscalenumber1Grayscale strength of the webcam feed.
glassDistortionnumber0The glass displacement effect.
classNamestring--

Comments

  • No comments yet.