Vibeset

Holographic card

There is no animation loop. The pointer writes two numbers (its position inside the card, from 0 to 1) into CSS variables, and everything else is a CSS sum over them: the tilt, the holographic sheen, the parallax. Smoothing comes from a transition, not a requestAnimationFrame. The tilt is split across both axes with the same sum, position minus a half times the maximum angle, so it is flat at the centre and reaches exactly the limit at a corner. When the pointer leaves it settles more slowly than it followed. The sheen is decoration (aria-hidden, no events) and underneath it is all normal HTML: the action is a real link or button.

And the React Bits original: Profile Card

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

When to use it

For introducing a person or a team on a portfolio site. With one or a few cards: it is eye-catching and not free.

Watch out for

It brings two icon packages just to draw an envelope: @hugeicons/core-free-icons is about 80 MB installed (it ships per icon, but the install is what it is). Swap the icon for one you already have.

Accessibility

It respects the system reduced-motion setting and carries alt texts. On iOS it asks for the orientation sensor permission, as it should.