Reflective Card

Card with dynamic webcam reflection and glare effects that respond to cursor movement.

Default

The card mirrors your webcam through a metallic SVG filter. Allow camera access to see the reflection; without it the card falls back to its plain dark surface. Every prop is wired to the controls underneath.

SECURE ACCESS

ALEXANDER DOE

SENIOR DEVELOPER

ID NUMBER8901-2345-6789

Customize

Blur Strength12px

Metalness1

Roughness0.75

Warp Strength20

Warp Scale1

Glass Distortion30

Shininess5

Grayscale0.15

API Reference

ReflectiveCard

Prop	Type	Default	Description
`blurStrength`	`number`	`12`	The intensity of the blur effect (0-20px).
`metalness`	`number`	`1`	The opacity of the metallic sheen (0-1).
`roughness`	`number`	`0.4`	The opacity of the noise texture (0-1).
`displacementStrength`	`number`	`20`	Strength of the displacement (how much it warps).
`noiseScale`	`number`	`1`	Scale of the noise texture (size of the ripples).
`specularConstant`	`number`	`1.2`	Specular constant for the lighting (shininess).
`grayscale`	`number`	`1`	Grayscale intensity (0-1).
`glassDistortion`	`number`	`0`	Strength of the glass edge distortion.
`color`	`string`	`white`	The base text color.
`overlayColor`	`string`	`rgba(255, 255, 255, 0.1)`	The color of the overlay tint.

Accessibility

Keyboard shortcuts and ARIA behavior.

The component asks the browser for camera access on mount. If the request is denied or no camera exists, the video stays empty and the card still renders.
The video is muted and decorative; the card text is regular content.
The camera stream is stopped when the component unmounts.

Rating Resizable