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
207 total results · 162 with visual previews · 45 on source sites
loop — medium
loop · state — subtleInline or avatar-size agent activity indicator: libraries.dev thinking-orbs + shimmering verb + detail line.
Centered marketing hero with an original static CSS light treatment using the active theme tokens. No animation or proprietary code.
loop · state — subtleStarter page → app/chat/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 4 @oc blocks. Preview: /templates/template-ai-chat.
state — mediumCompound modal with motion. For app dialogs prefer shadcn Dialog (accessible, themed).
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.
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.
scroll — mediumSticky visual + scrolling text sections for feature walkthroughs.
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
loop — mediumUse on ONE live element per screen. Wrapped by @oc/beam-card. theme prop defaults to dark — set theme='light' on light surfaces.
loop · state — expressive
loop · cursor — expressive
state · loop — medium
loop — mediumSVG beams flowing between refs — the 'integrations' diagram (your app in the middle, tools around it). Default gradient is orange→purple: set gradientStartColor/StopColor to var(--primary).
loop — subtleLight travelling around a card's border; subtle way to highlight one pricing tier or the hero screenshot. colorFrom/colorTo default orange/purple — pass var(--primary). Parent needs `relative overflow-hidden rounded-*`.
cursor · hover — subtleSpotlight-follows-cursor card (bg-background surface). Gradient defaults are purple/pink hex and it imports next-themes — pass gradientFrom/To from the theme; drop next-themes if you don't use it.
loop — expressive
loop — expressive
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
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 · enter — mediumA text component with various colours, filter and scale effects.