design-infraComponent catalog
Find components by type and feeling. Explore live examples, shortlist your options, and copy your picks to your agent.
Filter by feeling, motion, usage or library · 1 active
117 total results · 62 with visual previews · 55 on source sites
scroll — subtle♥ Free recreation of the Aceternity multi-level features block Owen loves — default pick for feature walkthroughs on landing pages.
enter · drag — subtle
state · loop — subtle
state · hover — mediumPlayful merges for FABs, tab pills, menus. Too much for enterprise UIs.
loop · state — subtleOur default agent-activity indicator; wrapped by @oc/agent-status. Canvas 2D, no WebGL. Also: thinking-orbs-native (RN) and SwiftUI.
scroll — mediumuseScroll + useTransform: progress bars and parallax tied to scroll position. Medium-intensity; keep it to one element per viewport. Free example (motion is MIT); copy and adapt the source from the example page.
loop — expressive
hover · cursor — expressiveA gradient pin that animates on hover, perfect for product links.
state — mediumA search-style input that expands with a gooey SVG filter and shared layout animation
hover — subtle
state — subtle
loop — expressiveA cool background effect with waves that move.
loop — expressiveCircular avatar with Paper Design Warp shader; motion-safe pulse, pauses off-screen and when reduced motion is preferred
loop · cursor — expressiveInteractive canvas-based fractal dot grid with mouse tracking and wave effects
loop · hover — mediumAnimated button/link with cosmic gradient border effect, renders as anchor or button
hover · press — mediumAnchor-based CTA with fixed SVG end caps, shared surface colors via CSS variables, and size and animation variants
Composable marketing card with optional link root, image slot, eyebrow/title/body, accent band, and footer CTA
state · hover — mediumCompact card with SVG silhouette, category and date, motion morph on hover, and optional link
press — medium
loop — subtleA component that creates a wave-like shimmer effect on text.
enter — mediumThe verification step of a custom Clerk flow. Submitting the email stacks a one-time-code card up over the sign-in card, with AnimatePresence popLayout dimming the card behind it.
enter — mediumA complete custom sign-in-or-up flow built with Motion, combining the conditional password field and the card-stack verification step. Wire the same UI to Clerk's useSignIn() and useSignUp() hooks.
scroll — mediumAn example of a scroll-linked animation using a specific element's scroll position using Motion for React's useScroll hook.
scroll — mediumA horizontal gallery that scrolls sideways as you scroll down. Uses sticky positioning with scroll-linked x translation.
scroll — mediumAn example of linking an animation to scroll using Motion for React's useScroll hook and smoothing it with useSpring.
drag — mediumAn example of linking SVG path length to a drag gesture using Motion for React's easy useTransform hook.
cursor · state — expressiveOrganic blob cursor that smoothly follows the pointer with inertia and elastic morphing.
state — medium
loop · cursor — expressiveVibrant color bends with smooth flowing animation.
cursor · hover — medium
loop · drag — mediumFlowing looping text path along a customizable curve with drag interaction.
cursor · loop — expressive
loop · cursor — expressiveTurns any SVG or PNG into a living lightning outline, with flowing strands, arcs that leap off the edges and a charge that follows the cursor.
loop · press — expressiveAn infinite image row that flows through invisible liquid glass at its edges, with four bend presets, five entrances, a speed squeeze and click to focus.
state — mediumLiquid flowing active indicator glides between menu items.
hover · press · cursor — mediumFolder that opens on hover or press: the flap tilts toward you, a paper edge rises, and its notes spring out from behind the flap into a floating cloud to pick from, then sink back when the folder closes.
state · hover — subtleSelect chip whose menu pops out of its own corner and whose single hover highlight glides between rows, remembering where you left it so re-entry slides from there instead of blinking in.
state — medium
loop · cursor — expressiveRaymarched sine waves rolling toward a soft, hazy horizon.
loop — expressive
loop · cursor — expressive
loop — expressiveDynamic laser light that flows onto a surface, customizable effect.
loop · state — subtleInline agent-status row: a 3x3 or 4x4 lattice whose cells brighten in a phase-offset wave beside a verb and a live stopwatch, resolving into a check or a cross when the task ends.
loop · cursor — expressiveAnimated line wave pattern with colorful warped distortion.
loop · cursor — expressiveLiquid metallic chrome shader with flowing reflective surface.
loop · cursor — expressiveInteractive liquid shader with flowing distortion and customizable colors.
hover · enter — medium
loop — expressiveLiquid metaball blobs that merge and separate with smooth implicit surface animation.
loop · cursor — expressiveA lit halftone surface of dots, lines, crosses or glyphs that moves like draped silk, rolling swells or ripples, with six presets, one-color theming and a cursor that sends ripples through it.
hover · state · loop — subtleStar rating you can try before you commit: sweeping the row lifts a trailing wave of stars up to the pointer while a tip hops along with the label; a click commits with a pop.
loop · state · cursor — expressive
loop — expressiveRaymarched plasma waves with dual-wave interference and OGL.
state — mediumChat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile charges to ink the moment there is something to send and morphs its arrow into a stop square while busy.
loop · cursor — expressive
loop · cursor — expressivePointer-driven water displacement that warps content and leaves a decaying wake.
loop — expressive
loop · cursor — expressiveA grid of soft glowing bars rippling like a slatted equalizer.
cursor · press · loop — expressiveLiquid splash burst at cursor with curling ripples and waves.
loop — mediumAnimated star / sparkle border orbiting content with twinkle pulses.