// explore

Components and blocks

Everything in the DesignPass registry. Use the sidebar scope to focus on components or blocks, or keep browsing the full shelf.

Components

controls

SpringAccordion, Disclosure list whose panels open and close on a real spring height integrator. Multiple panels stay open by default; dial springiness (0–1) for bounce, or pass stiffness / damping. Reduced-motion jumps instantly. Zero dependencies. Great for FAQs, pricing footnotes, and settings groups that should feel physical instead of CSS-eased.

NewFree

SpringSelect, Elevated select with a spring-opened menu that overshoots into place, a chevron that tips with the same spring, and a light jelly squish on the trigger. Optional in-menu search and a scrolling list for long option sets; leans magnetically toward the cursor via our Magnet component when enabled. Portaled so it escapes overflow clipping. Great for settings panels, country pickers, filter bars, and enums that outgrow a segmented toggle.

NewFree

JellyButton, A pill button that bounces up on hover, squishes like jelly when pressed, and wobbles back on release. Leans magnetically toward a nearby cursor via our Magnet component. Great for primary CTAs, onboarding actions, and playful consumer app controls.

NewFree

IsometricButton, A floating 3D prism button with a glowing underside and floor reflection. Hover drops it toward the floor with a spring bounce; click presses it down and leans it flat. Tune standAngle to lean it upright. Pure CSS 3D, no canvas. Great for game UIs, architecture and product configurators, and dashboards that share an isometric camera.

Free

IsometricField, A text input rendered as an isometric slab, the natural companion to IsometricButton, sharing its camera. Tune standAngle to lean it from flat on the floor to fully upright. The depth edge lights up on hover and focus; a short springy press scales the slab on click. Pure CSS 3D, no canvas. Great for isometric forms, game HUDs, and architecture or product tools that need inputs matching a 3D scene.

Free

SlideToggle, Segmented toggle for two or more options with a draggable, spring-loaded thumb that squashes with velocity and leans toward the hovered slot. Options can carry icons and per-option accents that tint the track; works labeled or bare, with arrow-key stepping. Zero dependencies. Great for pricing plan switchers, settings panels, theme pickers, and filter bars.

Free

SpringSlider, Channel-style slider with a pill thumb that rides a full-height track, chasing the pointer on a spring with velocity squash. The handle leans magnetically toward a nearby cursor via our Magnet component. Optional step ticks, corner rounding, an in-track label, and a value readout on the track's right edge. Great for volume and brightness controls, pricing configurators, and creative-tool side panels.

Free

separators

AntLine, Subtle marching-ants edge: a dashed or dotted stroke that crawls sideways between sections. Lighter than a filled shape, still alive. Honors reduced motion. Zero dependencies. Great for paper-like layouts, docs-style pages, and quiet breaks between text bands.

NewFree

Bow, Soft arc edge between sections. Defaults to a soft bulge (hill); invert for a concave dip. Height tweens between a start and scroll height based on where the seam sits in the viewport. Place on the upper section; fill matches the band below. Reduced-motion safe. Zero dependencies. Great under heroes and anywhere a hard seam feels too sharp.

NewFree

Ripple, Layered translucent wave ribbons stacked for depth, optionally drifting at staggered speeds and directions. Scroll collapse tightens the stack toward the seam as it moves through the viewport. Height caps at 256px. Fill matches the lower section. Responsive SVG. Zero dependencies. Great for premium heroes that need a richer tide than a single wave.

NewFree

TiltCut, Sharp diagonal cut between sections. Height tweens between a start and scroll height as the seam moves through the viewport. Tune the slope and mirror it; fill matches the lower band. Fluid across breakpoints. Zero dependencies. Great for editorial landings, portfolio breaks, and bold brand color changes.

Free

ZigZag, Geometric zigzag / sawtooth section edge. Set height and width (tooth width = height × width) so teeth keep a stable shape at any viewport width; dial tip rounding from sharp to soft. Fill matches the lower band. Zero dependencies. Great for playful consumer brands, ticket stubs, and graphic portfolio transitions.

Free

layout

SocialIcons, Circled social icon row with official Simple Icons marks for X, GitHub, LinkedIn, YouTube, Instagram, Discord, Bluesky, Threads, Facebook, TikTok, Mastodon, Reddit, Twitch, Dribbble, Behance, Product Hunt, Medium, Slack, Telegram, RSS, Figma, and npm. Pass label + href; icon is inferred from the label when omitted. Colors follow currentColor and --tpl-chrome* borders. Great in footers and dark chrome rails that need a compact social strip.

NewFree

PersonAvatar, Portrait atom with presence. Soft-square or circle crop, optional offset outer stroke (gap between photo and ring), soft lift shadow, and online/busy/away status in the upper or lower right. Pass a URL or children for an optimized image wrapper. The face piece under profile cards, chips, and testimonial lenses.

NewFree

PersonByline, Name plus optional secondary line (handle, role, company) and optional meta, with optional leading PersonAvatar and trailing action. Inline (tweet-style) or stacked (list / tile). Light, inherit, or template ink tones. Great for people rows, profile cards, and quote attributions.

NewFree

LiveCopyright, © YEAR Owner line that reads the live calendar year at render time. Hard-coded footers go stale every January; LiveCopyright never does, so you skip the yearly copyright edit. Optional trailing suffix (e.g. All rights reserved). Great as the default legal line in footer blocks and page shells.

Free

Marquee, Infinite strip for any children: logos, chips, tweets, or plain text. Horizontal (left/right) or vertical (up/down), soft fades on both edges, seamless loop via duplicated tracks, and hover that eases speed toward pause, slow, or fast. `align` tops, centers, or bottoms variable-height items (use `start` for tweets). Stack several marquees for multi-row or multi-column walls. Zero dependencies. Great for social-proof logo rails, vertical testimonial columns, and quote carousels.

Free

ProfileChip, Tiny PersonAvatar plus name pill for bylines and collaborator rows. Soft light fill and shadow, sm/md density, optional avatar. Composes PersonAvatar. Great for article authors and project credits.

Free

ScrollCurl, A scrollable container where content rolls away at the bottom edge, like parchment curling back into a scroll. Below a configurable pivot height, items wrap around a cylinder, tilting back in 3D, sinking, and fading out. Zero dependencies. Great for magazine archives, story collections, reading lists, and long editorial feeds.

Free

effects

LiquidGlass, Apple-style liquid glass pane that physically refracts whatever renders behind it. Chromatic aberration, magnification, frost, saturation, and brightness are tunable, with a specular rim and top bloom. Pulls magnetically toward a nearby cursor via our Magnet component and squishes like jelly on press. Refracts on the compositor where supported; falls back to WebGL elsewhere. Great for SaaS heroes, product marketing overlays, and glassmorphism panels.

NewFree

Magnet, Spring-physics magnetic hover that pulls its contents toward the cursor with 3D tilt and a light glare that tracks the pointer. Attraction radius and travel scale with the element's size and aspect ratio, so wide cards lean farther left/right and tall ones farther up/down. Zero dependencies. Great for product cards, primary CTAs, and nav items that should lean toward the pointer.

NewFree

text

DesignerHover, Inline text that sprouts Figma-style selection chrome on hover: a rounded stroke box, a live width readout in pixels, and a letter-spacing pulse. Tunable accent color. Zero dependencies. Great for portfolio headlines, design-tool landings, and any line that should feel like a selected artboard.

NewFree

EngineerHover, Inline text that swaps for a themed terminal on hover, typing through a short build, test, and lint sequence before revealing the punchline. Built-in looks for macOS, Claude, Cursor, Windows, Ubuntu, and phosphor CRT, with per-color overrides. Zero dependencies. Great for developer-tool landings, personal sites, and engineer-facing product heroes.

NewFree

ArcRibbon, An infinite text ribbon that rides a bowed arc, cruising at a steady pace or scrubbing under drag and releasing with momentum. Hover eases the speed toward pause, slow, or fast. The path rebuilds from the container width. Zero dependencies. Great for fashion and editorial marquees, announcement bars, and portfolio tickers.

NewFree

AsciiText, Headline text rendered as a field of ASCII glyphs on a tilted plane that follows the cursor, sways when idle, and ripples with a liquid wave while a sweeping sheen grades each cell. Inverted color punches through a pixel-block underlay, with optional prismatic fringe and slow hue drift. Zero dependencies. Great for developer-tool landings, cyberpunk terminals, hackathons, and retro-tech marketing.

Free

BlurText, Words or characters drift in out of focus and sharpen into place, with a midpoint half-blur that sells an optical focus pull. Direction, blur radius, and stagger are tunable. Web Animations API, zero dependencies. Great for photography portfolios, luxury brand reveals, and lens-style copy entrances.

Free

CircularText, Text arranged around a spinning ring. Tunable ring diameter and letter size; hover eases the spin toward pause, slow, or fast, with an optional grow on hover. Zero dependencies. Great for badges, seals, vinyl and music branding, and stamp-like CTAs.

Free

ClarityText, A paragraph that clarifies when scrolled into view: words or letters rise from soft blur and low opacity, briefly pick up an accent tint, then settle into the host color while each unit unwinds from a gentle tilt. Plays at a fixed speed once in view, so fast scrolling never rushes the reveal. Zero dependencies. Great for architecture narratives, long-form case studies, editorial essays, and real-estate story sections.

Free

CycleText, Phrases that rotate in place with a staggered character or word swap, easing line width between phrases so surrounding layout breathes instead of snapping. Auto-advance can pause on hover; next, previous, jumpTo, and reset via ref. Zero dependencies. Great for rotating value props, hero taglines, and feature highlight lines on landing pages.

Free

FuzzyText, Text that vibrates with scanline fuzz, buzzing harder near the pointer and spiking into glitch peaks on demand. Tunable band height, spatial coherence, and RGB channel separation. Zero dependencies. Great for music and festival sites, glitch or VHS aesthetics, thriller marketing, and experimental art pages.

Free

ScrambleField, A paragraph that starts scrambled and decrypts under the cursor, or flip the mode to scramble clear text instead. Optional autoRevealDelay settles reveal-mode copy to readable text after a pause (left-to-right cascade). Cell widths stay frozen so the line never jitters as glyphs swap. Zero dependencies. Great for online escape rooms, cipher puzzles, spy or ARG experiences, and security-product demos.

Free

ShinyText, Text with a light band that sweeps across the glyphs, clipped to the text itself. Loop forever or play once, then retrigger on hover and/or click while idle. Sweep speed, rest, band angle, width, and colors are tunable. Web Animations API, zero dependencies. Great for premium product names, luxury ecommerce headlines, and award or launch titles.

Free

Shuffle, Characters riffle through random glyphs and lock into place one by one, left to right, without the line jittering as they settle. Replays on hover. Zero dependencies. Great for decrypt-style reveals, crypto and security product moments, puzzle games, and data dashboards.

Free

SlideText, Text that splits into characters or words and drifts in from a chosen side when scrolled into view, landing with a springy overshoot in a staggered wave. Drift direction, distance, and stagger origin are tunable. Web Animations API, zero dependencies. Great for landing-section entrances, portfolio case studies, and marketing headlines.

Free

SpectralText, Scroll-triggered entrance where characters or words rise into place from a soft blur, starting squashed and faintly tinted before settling into the host text color in a slow cascade. Web Animations API, zero dependencies. Great for Halloween landings, mystery and thriller storytelling, memorial pages, and atmospheric brand headlines.

Free

SwellText, Variable-font text where each glyph swells toward the cursor, ramping weight and width with proximity and relaxing on a trailing ease. Defaults to the freely-licensed Roboto Flex from Google Fonts; the line auto-fits its container. Zero dependencies. Great for typography-forward portfolios, editorial headlines, and interactive brand wordmarks.

Free

Tally, A number that counts into view on a spring, formatted with locale-aware grouping, decimals, and optional prefix or suffix. Replays on hover. Zero dependencies. Great for stats sections, fundraising counters, impact reports, and metrics dashboards.

Free

TextType, A typewriter that types, holds, deletes, and cycles through sentences. Keystroke timing is humanized with jitter and punctuation pauses, each character can pop up then settle on entry, and the caret only blinks while idle. Zero dependencies. Great for AI and chat demos, personal sites, onboarding copy, and terminal-style storytelling.

Free

backgrounds

HexRise, Quiet SVG honeycomb: an edge-sharing hex lattice with a soft wash and sparse cells that gently pulse. Hover lights the cell under the cursor with a soft fill lift. Tune size, gap, corner roundness, stroke, fill, orientation, dash pattern, and pulse density. Pure SVG/CSS, zero dependencies. Great for product heroes, docs shells, dashboard atmospheres, and tech landing pages.

NewFree

SoftPatterns, Quiet atmosphere field: a soft radial wash over dots, grid, or ruled lines, with separate spacing and weight controls. Three presets: Blueprint, Linear, and Claude. Pure CSS, zero dependencies. Great for portfolio heroes, editorial landings, docs shells, and AI-tool marketing pages.

NewFree

NovaSweep, Conformal star-warp background: parallel light streaks pour through a Möbius-warped corridor and coil into whorls, like an aurora seen edge-on. Optional cursor bending and prismatic color separation. Pure WebGL, zero dependencies. Great for space and sci-fi landings, music visuals, and immersive full-bleed heroes.

NewFree

Silk, Full-screen WebGL veil with an organic dark pattern that morphs, pans, and warps under your controls. Hue shift, zoom, morph, warp, and scanline tweaks are all tunable. Pure WebGL, zero dependencies. Great for fashion lookbooks, nightlife landing pages, and dark portfolio heroes.

Free

loaders

ImagineLoader, A field of tiny dots that fills an image frame while something is being imagined or generated. Spacing and absolute size are tunable; a color crest travels by pattern while an optional position field (ripple, swell, drift, vortex) nudges dots off-grid. Cursor interaction grows nearby dots toward the pointer with a tunable radius. Zero dependencies. Great for AI image waits, media upload slots, and async thumbnail progress.

NewFree

BallLoader, A glossy 3D ball bouncing in place with cartoon squash and stretch, flattening on landing and stretching on the leap. Perks up on hover, squishes flat on press, and springs on release (longer hold, higher jump). Toggle interaction off for a plain loader. Zero dependencies. Great for sports apps, kids and consumer products, and playful game waits.

NewFree

CubeLoader, A softly rounded 3D cube tumbling corner over corner. Perks up on hover, squishes on press, and leaps on release (longer hold, higher jump). Toggle interaction off for a plain loader. Zero dependencies. Great for games, playful wait states, and 3D product sites.

NewFree

ChaosLoader, A swarm of particles orbiting a shared center while the whole cloud slowly rotates, each dot sliding along its spoke and shrinking with depth. Zero dependencies. Great for generative tools, creative software waits, and experimental brand moments.

Free

CometLoader, A ring that spins like a comet, with a bright head and dim tail painted along the arc. Web Animations API, zero dependencies. Great for premium wait states, space-themed apps, and loading moments that need a sleek spinner.

Free

DonutLoader, A 3D donut standing upright on its edge like a wheel, spinning edge-on to face-on with cartoon squash and stretch. Perks up on hover, squishes on press, and springs on release (longer hold, higher jump). Tunable tube thickness; toggle interaction off for a plain loader. Zero dependencies. Great for food and cafe apps, playful consumer brands, and lighthearted wait states.

Free

GyroLoader, Three nested rings spinning on orthogonal axes like a gyroscope gimbal around a pulsing core, genuinely passing in front of and behind each other in 3D. Zero dependencies. Great for engineering tools, navigation and mapping waits, and precision-instrument aesthetics.

Free

HelixLoader, Two ribbons of dots weaving through each other like a strand of DNA, swinging and shrinking with depth as they pass. Zero dependencies. Great for biotech product waits, health and science apps, and research dashboard loaders.

Free

PulseLoader, Twelve rays on a dial with a crest that travels around the ring, each ray stretching and brightening as the wave passes. Zero dependencies. Great for monitoring dashboards, radar-style status waits, and ops or analytics UIs.

Free

SquircleLoader, A squircle outline traced by a sliding gradient dash, like a comet racing around a superellipse rim. Web Animations API, zero dependencies. Great for modern consumer apps, iOS-inspired product UIs, and polished in-app wait states.

Free

TriLoader, A Reuleaux triangle (constant-width curve) traced by a sliding gradient dash around its perimeter. Web Animations API, zero dependencies. Great for design-forward marketing sites, geometric brand waits, and loading moments that need a distinctive spinner.

Free

Blocks

hero

HeroSlides, Full-bleed photo hero that pages a scene deck with thick edge chevrons and bottom dots. Each scene carries its own eyebrow, headline, and up to two JellyButtons; the backdrop wipes in quickly, and hovering a control warms the next photo before you click. Optional soft scroll parallax. Great for automotive launches, product story first viewports, and campaign landings that need more than one still.

NewFree

FeatureReveal, Feature strip with a soft magnetic lean on graphic tiles (image + title + plus). Place the plus under the title or on the image top-right. Hover inverts the plus. Click fades the tile; halfway through, a blurred full-screen scrim appears and a larger card slides up (X top-right with hover invert, JellyButton Back, whole card scrolls; click scrim to dismiss). One column on phones, two from sm, three from lg. Great under HeroSlides or as the second beat of a launch page.

NewFree

profiles

ProfileCompact, Dense list-row profile card wrapping PersonByline (avatar, copy, optional action). Filled white card or flat list row. No decorative border. Pass JellyButton or any control into `action`. Great for follower lists and invite panels.

NewFree

ProfileDetail, Expanded person panel: portrait, name, role / handle, optional quote and bio, plus slots for a close control and footer actions. No filled card chrome by default. PeopleReveal nests this inside its portal.

NewFree

ProfileTile, Portrait profile card with a flush cover photo or a circle portrait. Tune aspect (`1/1`, `4/5`, `3/4`, `3/2`, `16/9`, or any CSS ratio), show/hide role and footer, optional trailing control. Surface is white fill + shadow (no decorative border). A single-person block meant to nest inside people grids. Great alone in a gallery or as the tile unit inside PeopleReveal.

NewFree

ProfileTweet, Social post card built from PersonAvatar and PersonByline. Layout `row` keeps the classic avatar-left tweet; `stack` puts the photo on top with copy underneath. Toggle avatar, name, handle, timestamp, and body. A single-card block meant to nest inside Marquee and other rails. Great for social-proof marquees and launch-page quote strips.

Free

content

PeopleReveal, Team section that nests ProfileTile cards in a magnet grid. Click fades a tile; halfway through, a blurred scrim opens and a ProfileDetail card slides up with quote and bio. Same reveal choreography as FeatureReveal, tuned for humans. One column on phones, two from sm, three from lg. Great for about pages and speaker directories that should feel alive.

NewFree

QuoteLens, Testimonial lens section built from PersonAvatar faces and a PersonByline attribution. Hover focuses one quote into the stage while the others dim; click pins the selection. The active face gets a magnetic lean. Great for social proof under a hero without a wall of quote cards.

NewFree

FaqSpring, FAQ band with a TextType headline and SpringAccordion panels that open on a real spring. Great before the closing CTA on product and pricing pages.

NewFree

CtaStage, Closing CTA stage: SlideText headline over a pluggable atmosphere wash (SoftPatterns by default) and a JellyButton. Centered stack with room to breathe; the headline drifts up when the section scrolls in. Tunable headline, subcopy, and click handler. Great as the last beat before the footer on marketing pages.

Free

HowItWorks, Numbered three-step strip with a ClarityText headline that clarifies into place. One column on phones, three from lg. Great for install → customize → ship narratives on product and template landings.

Free

LogoCloud, Social-proof strip with a Shuffle headline and a fading Marquee of text logos. Ships without image assets so Claude can rename the marks instantly. Great under a hero when you need trust before the feature pitch.

Free

ProjectGrid, Portfolio project grid with a SwellText headline, Magnet cards, optional meta labels, and optional links. One column on phones, three from lg. Great for founder sites and case-study indexes.

Free

StatsTally, Metrics band where each figure counts in via Tally under a SpectralText headline. Great for social proof numbers, install counts, and zero-deps claims on SaaS landings.

Free

pricing

PricingCards, Three-up pricing strip with a ShinyText headline, optional SlideToggle for monthly/annual billing (annual default when shown), Magnet lean on each plan card, and JellyButton CTAs. Highlight a featured plan. Great for free/pro/team ladders on product launches.

NewFree

PricingCompare, Plan cards plus a full feature comparison matrix underneath. Cards convert; the table closes power-user and procurement objections. Annual default and Most popular highlight on the target tier. Great on dedicated pricing pages.

NewFree

PricingDuo, Two-plan pricing (Starter vs Pro) that cuts choice paralysis. Best value badge on the target tier, annual default with savings, JellyButton CTAs. Great early-stage or SMB funnels where three columns dilute clicks.

NewFree

PricingEnterprise, Three self-serve tiers plus an Enterprise column with a visible price floor and Talk to sales CTA. Avoids the Contact-sales black hole while keeping Most popular and annual defaults on self-serve. Great for B2B ladders that end in procurement.

Free

PricingPopular, Highest-leverage SaaS pricing layout from conversion research: three tiers, Most popular badge and contrast on the middle plan, annual billing defaulted with a concrete savings callout, per-month figures even on annual, and proof under the featured CTA. Great when you want plan mix steered to the revenue tier.

Free

PricingRows, Horizontal plan rows instead of a card grid: name, price, features, and CTA on one rail. Keeps Most popular contrast and annual default. Great for denser desktop pricing that still scans on phones.

Free

PricingSeats, Seat configurator with a SpringSlider for headcount, live monthly total, annual default, and included-feature list. Expansion revenue pattern for per-seat SaaS. Great when price scales with roster size.

Free

PricingTable, Dense grouped feature matrix as the primary pricing UI, with sticky plan headers, Recommended column emphasis, and CTAs in the header. Great when buyers need to justify a tier internally before checkout.

Free

nav

NavBrand, Founder and personal-brand header: wordmark emphasis, text links, no filled CTA. Sticky by default. Quieter than a SaaS marketing bar. Great for portfolio and indie founder sites.

NewFree

NavCompact, Waitlist and launch header: logo and one JellyButton CTA only. Sticky by default. No link clutter in the first viewport. Great above a single-job capture hero.

NewFree

NavFloating, Floating pill nav centered over the hero. Sticky by default via `fixed` so the pill stays while scrolling; set `sticky={false}` for absolute overlay that scrolls away. Mobile menu and JellyButton CTA. Pad the hero under it. Great for motion showcase landings.

NewFree

NavInstall, Docs and install header: logo, SpringSelect version picker, sparse Docs/API/Changelog links, and an install JellyButton CTA. Sticky by default. Great above open-source and commercial developer tool landings.

Free

NavMarketing, Stripe-style marketing header: logo, centered links, text secondary action, and one filled JellyButton CTA. Sticky by default for long SaaS landings. Great above ProductLaunch-style pages.

Free

NavMinimal, Linear and Vercel-inspired sparse header: logo, a short link row, and one JellyButton CTA. Sticky by default (`sticky` prop). Mobile collapses links behind a menu while keeping the CTA reachable. Great for focused product and docs-adjacent pages.

Free

footer

FooterGiant, Footer with a giant brand word cut off above a center-bright glare line, soft radial wash, postal address, SocialIcons, LiveCopyright under the icons, and five link columns. Colors follow --tpl-chrome*. Great for dark SaaS landings that want a cinematic close without a status chip.

NewFree

FooterBrand, Anthropic-inspired brand footer with a large statement, sparse links, and a quiet LiveCopyright line that tracks the calendar year. More presence than a link dump, less density than a sitemap. Great for mission-led and research-led product pages.

NewFree

FooterCompact, Single-bar footer for short pages: brand, a few links, and a LiveCopyright line that tracks the calendar year on one responsive row. Great under waitlist and launch templates that should not grow a full sitemap.

NewFree

FooterDev, Vercel-style developer footer that leads with Docs, API, Changelog, Templates, and Status, then company links, a SocialIcons row, and a LiveCopyright line that tracks the calendar year. Great for tools built for Claude and Kickbacks users.

Free

FooterSocial, Centered founder footer: brand, tagline, social icon row, and a LiveCopyright line that tracks the calendar year. Great for portfolio and personal brand templates where social is the next action.

Free

FooterSplit, Two-pane footer with brand story on the left, two to four link columns on the right, optional email subscribe (`subscribe`), legal links, and LiveCopyright under the brand. Great when you want narrative plus navigation in one footer.

Free

87 items available · License terms