DesignPass.dev

// blocks

Composed sections, ready to drop in

Multi-file page sections built from DesignPass components. Install one block and the registry pulls its dependencies.

hero

HeroSlides

NewFree

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.

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.

profiles

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.

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.

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.

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.

content

NowPlaying

NewFree

A compact now-playing stage: cover art blooms into a blurred, slowly spinning wash behind an iridescent VinylPlayer with tonearm and rim chase. Scrub a springy seek that thickens on hover, heart the track, and skip through a short playlist. Visual only, no audio. Depends on VinylPlayer, SpringSlider, JellyButton, IconSwap, and Magnet. Great for artist pages, album launches, and portfolio music demos.

HingePages

NewFree

Vectr-style page transition: an empty cover plane hinged at the top-right swings shut with rotate(-90deg) → 0, then the incoming page’s title and body cascade in with perspective(1000px) rotateY(60deg) rotateX(35deg). Duration is tunable. Zero dependencies. Great for Industries / Mission style multi-page marketing beats.

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.

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.

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.

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.

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.

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.

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.

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.

pricing

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.

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.

PricingDuo

NewFree

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.

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.

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.

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.

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.

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.

nav

NavBrand

NewFree

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.

NavCompact

NewFree

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.

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.

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.

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.

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.

footer

Footer with a giant brand word cut off above a center-bright glare line. The wordmark band is transparent so the page backdrop shows through; only the link slab paints --tpl-chrome. Wordmark + radial wash auto-pick additive blend when --tpl-chrome-ink is light (plus-lighter) and stay normal for dark ink on light paper. Soft radial wash, postal address, SocialIcons, LiveCopyright, and five link columns. Great for dark SaaS landings that want a cinematic close without a status chip.

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.

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.

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.

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.

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.

36 blocks available · License terms

// updates

Know when new components drop

A short email when something new lands in the library. No noise, unsubscribe anytime.