Vibeset

Metal credential

A credential (a licence, a pass, an ID) that looks like brushed steel: its surface reflects a light that moves with where you put the pointer, with the brushing streaks running across it. The metal is a stack of background layers, with no extra elements: brushing, wide reflection, spot sheen and base. The card does not tilt or move (the holographic card does that): what is animated is the light, with CSS variables registered with @property, and that is what makes it feel heavy and not a sticker. The text is dark on a metal that stays light along its whole path, so it never crosses the minimum contrast mid-movement. And it does not use the camera or ask for any permission.

And the React Bits original: Reflective Card

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Reflective Card, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For an access pass or credential in a product demo. With your own video as the reflection, not the camera.

Watch out for

The webcam option asks the browser for camera permission: on a site that promises not to track anyone, only as an explicit demo, off by default. It is 39.9 KB and brings two icon packages.

Accessibility

It respects the system reduced-motion setting. It has no keyboard support: it is a piece to look at, not to operate.