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
448 total results · 121 with visual previews · 327 on source sites
scroll — subtle♥ Free recreation of the Aceternity multi-level features block Owen loves — default pick for feature walkthroughs on landing pages.
Centered marketing hero with an original static CSS light treatment using the active theme tokens. No animation or proprietary code.
Writes DESIGN.md to the project root + theme tokens + fonts. Read design-systems/linear-dark/DESIGN.md first.
state — mediumCompound modal with motion. For app dialogs prefer shadcn Dialog (accessible, themed).
state · press — mediumPhoto + quote testimonials with stacked image transition. Good single-testimonial spotlight.
press · state — mediumApple-style card carousel that expands into a detail view.
loop — subtleSoft aurora wash for AI/consumer heroes (pairs with soft-glass). Uses its own CSS vars — tune colours to your primary.
loop — subtleSubtle animated SVG beams behind a hero. Looks best on near-black backgrounds; keep copy short on top.
hover — subtleSimple bento layout. Colours are hard-coded neutral-200/white/black — prefer @oc/feature-bento for theme-aware tiles, or swap classes to bg-card/border.
Syntax-highlighted block with tabs (react-syntax-highlighter).
scroll — expressiveProduct screenshot that tilts into place on scroll — classic SaaS hero follow-up.
loop — subtleQuiet dotted grid with glow; good behind dashboards/empty states where beams would be too loud.
enter — mediumGibberish → text reveal. Technical/dev-tool and brutalist brands.
drag · hover · state — subtleDrag-and-drop upload with grid background and micro-interactions.
loop — mediumRotating keyword in a headline ("Build ___ faster"). Keep to 3–5 words.
hover · cursor — mediummacOS-style dock nav. Great for portfolios/side projects; overkill for SaaS nav. Needs @tabler/icons-react.
cursor · hover — subtleCursor-style border glow that follows the pointer. Works on any card.
hover · loop — mediumGradient border that sweeps on hover — for a single standout CTA button.
loop · hover — mediumMarquee of testimonial/logo cards. Pause-on-hover is built in.
scroll — expressiveFey-style laptop reveal. Heavy; one per page max.
state · loop — mediumFull-screen step loader for long operations (generation, onboarding).
loop — subtleAnimated gradient + noise texture. Works for editorial/brutalist when toned down.
loop · state · press — mediumHero search/prompt input with cycling placeholders and vanish-on-submit. Great for AI products.
scroll — mediumNavbar that shrinks into a pill on scroll — the standard 'modern landing page' nav.
hover · state — subtle
loop — mediumBest 'premium dark' hero backdrop. Hard-codes a blue hsla gradient — pass gradientFirst/Second/Third or use @oc/hero-spotlight, which tints it from --primary.
press · state — subtleButton with loading → success states built in.
scroll — mediumSticky visual + scrolling text sections for feature walkthroughs.
enter — subtle
enter — subtleWord-by-word fade-in for one hero line or an AI answer. Don't use on long paragraphs.
scroll — medium
scroll — subtleScroll-linked beam down the left of long content (changelogs, docs, case studies).
enter — medium
hover · cursor — medium
loop — expressive
loop — expressiveA 3D Marquee effect with grid, good for showcasing testimonials and hero sections
hover · cursor — expressiveA gradient pin that animates on hover, perfect for product links.
hover · enter · cursor — subtleA cool tooltip that reveals on hover, follows mouse pointer
enter — expressive
loop — expressive
hover — mediumA full width background box container that highlights on hover
loop — mediumAn animated gradient that sits at the background of a card, button or anything.
loop · cursor — mediumA smooth and elegant background gradient animation that changes the gradient position over time.
loop — medium
press — mediumA grid of cells that ripple when clicked.
loop · enter · state — expressiveA dot background that expands on hover, as seen on Clerk's website
loop — expressiveAnimated text component with colorful curved lines rendered on canvas, clipped to the text shape.
hover — mediumHover over the cards and the effect slides to the currently hovered card.
hover · cursor — expressiveA card component with a spotlight effect revealing a radial gradient background
loop — mediumCards stack on top of each other after some interval. Perfect for showing testimonials.
enter — medium
cursor · press — medium
loop · hover · cursor — expressiveAn interactive image with responsive color separation, displacement, and tilt.
loop — expressiveSoft procedural clouds that drift across the sky. Tune speed, count, and colors with props.
loop · enter — mediumA text component with various colours, filter and scale effects.
hover · cursor — expressiveA perspective, 3D, Tilt card as seen on Perplexity Comet's website.
drag — medium
loop — mediumA container that flips through words, animating the width.