Cards
Animated React Card Components
Pointer-tracking tilt, spotlight sheens, animated borders, and layered reveal cards for React. Each is a self-contained TypeScript file styled with Tailwind, ready to copy-paste or install through the CLI. All of them respect prefers-reduced-motion and forward className so they drop straight into your layout.
A glass-refraction surface card: backdrop-blurred glass with a multi-layer bevel edge, a slow glacial-cyan caustic drifting along the top rim, and a refracted offset highlight that slides with a subtle perspective tilt on hover. Pure CSS with eased custom-property transitions; static caustics and no tilt under reduced motion.
A list or grid of dark-glass cards that morph into a centered overlay via a genuine shared-element FLIP — media, title, and action travel continuously, radii stay unsheared, the frame overshoots ~1% and settles, and body copy fades up only after it lands. Full dialog semantics with focus trap, Escape, and outside-click; reduced motion swaps instantly.
A matte label stuck to a dark surface that physically peels — hover lifts and curls a corner back to reveal a lit paper-grey underside with a cyan specular rim and a growing drop shadow, while grabbing deepens the peel, leans the sticker, and drags it with weight before it settles home. Faint adhesive glue-string filaments stretch and snap as it lifts; the peel origin is a 360° knob. Coarse pointers and reduced motion get a static half-peeled frame with drag disabled.
A pixel-dissolve card: on hover or click the surface divides into a grid of cells that dissolve away — each flashes white, shrinks and drifts up as a bright particle, with the odd seeded soft-white spark — then the second face condenses back from neutral smoke. Keyboard-operable, instant crossfade under reduced motion.
A pointer-tracked 3D tilt card with spring-damped rotation and a hard-edged white-silver glare streak that sweeps the surface like light across brushed metal. Tilt disables on touch and under reduced motion, leaving a static subtle glare.
An animated conic-gradient border — a white-hot filament head trailing a cool silver-blue tail that desaturates and fades to a faint slate trace. Pure CSS @property animation, zero JS, zero dependencies.
A scramble-reveal card: churning angular neutral glyphs on near-black, with a soft-edged diamond aperture that follows the cursor and resolves glyphs at its center to bright white. A static title sits on top regardless of hover, and keyboard focus opens the aperture dead-center.
A responsive bento layout primitive — IngotGrid and IngotCell compose column/row spans into magazine-style tiles with beveled borders that brighten on hover while sibling cells dim.
A cursor-following radial spotlight card — a soft white glow that breathes gently and brightens the nearest border edge as it passes. Pure CSS, works with arbitrary children.
A physics ID badge on a lanyard: a verlet-simulated strap hangs from above, the charcoal card sways with gravity and an ambient breeze, and you can grab, drag, and fling it — it swings and settles with real momentum. Hand-rolled rope physics, offscreen-paused, reduced-motion-safe.
A draggable, throwable rail of media cards with momentum and detent snapping (transform-only) where off-center cards rest in a quiet duotone and the centered one blooms to full contrast. Clicking a card performs a genuine shared-element expand — media and title travel into a centered detail overlay with unbroken radii, then body copy fades up. Focus-trapped dialog with Escape, outside-click, and arrow-key rail nav; reduced motion snaps instantly.
An electric turbulence border — the card's perimeter is a living arc: an SVG rounded-rect stroke deformed by animated procedural turbulence so it writhes, crackles on seeded reseeds, and periodically misfires and re-strikes, under a soft violet corona. Hover ramps the displacement. Throttled rAF that pauses offscreen; static softly-glowing border under reduced motion.