Animated React Card Components

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 ghost light idles across the glass when untouched.

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.

Palette-thief media carousel: each slide is downsampled to 32×32 and clustered (seeded k-means, k = 3) into its dominant colors, and the whole room behind the card eases to them as a drifting mesh of three blurred blobs. The outgoing card tilts back and slides away while the next one rises; caption and control ink auto-pick black or white by contrast. Arrows, dots, swipe, ←/→/Home/End, autoplay that pauses on hover, focus and offscreen, next/prev/goTo handle, seeded procedural plates. Reduced motion: crossfade with instant recolor.

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; a ghost light idles the tilt when untouched.

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 ghost aperture idles across the field when untouched.

Image card whose surface behaves like molten glass: a low-res viscous height field (heavy damping, ~1.5s relaxation) sinks a broad soft dent under the pointer, stretches an elongated pull on fast swipes, and blows stacking bubbles that swell for 400ms and pop into a relaxing ring. The image refracts through the slopes with one soft specular, faint caustics in the hollows and a thin chromatic split on steep slopes — slow and heavy, never watery. Idle ghost press, slump-flat intro, press/blow handle, seeded sea-glass plate. OGL, DPR-clamped, offscreen-paused, reduced-motion-safe.

Live 3D device mockup: a studio-lit beveled phone whose screen renders your real React children as DOM. Springs between present, landscape, exploded-stack and back poses (or scroll-scrubs via progress), drag to spin, rises in with a soft contact shadow. Offscreen-paused, reduced-motion-safe, CSS-frame fallback.

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 dimmed ghost spotlight wanders the card when untouched.

Image carousel that transitions through a spreading temper-color front: from the click point a noise-roughened edge creeps across the card like heat through steel, washing the outgoing picture in luminance-modulated straw, bronze, purple and blue oxide film before the next image cools in. Stacking clicks, autoplay, next/prev/goTo handle, scroll scrub, seeded procedural plates. Original OGL shader, DPR-clamped, offscreen-paused, reduced-motion crossfade.

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 ghost hand flicks it now and then when untouched.

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.