// 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
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.
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.
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.
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.
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.
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.
content
NowPlaying
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
footer
FooterGiant
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.
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.
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.
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.
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.
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.
36 blocks available · License terms