Components and blocks

Node editor canvas with wires you drag between ports. Near a matching port the wire wakes up, crackling like lightning, streaming pulses, or swinging like a rope, then snaps on magnetically and sends a spark racing around the node's edge. Tug an input to unplug, hover a wire to cut it, and nodes lift and tilt as you drag. Zero dependencies. Great for AI pipeline builders, automation flows, shader editors, and product demos.

Linear gradient editor: a live ramp with an optional in-track label (black or white from ramp lightness under the label center), line-shaped color stops that grow on hover and lean slightly via Magnet, a small triangle tick above blank-track hover to click-add, swatch color, optional hex or position, and +/- to add or remove. Drag keeps tracking outside the track. Exports stops plus a CSS gradient helper. Great for theme panels, loader washes, CTA sweeps, and settings UIs that were stuck with separate color fields.

Two stacked icons that cross-fade when a boolean flips: the idle glyph shrinks out and the active glyph springs up. Same motion language as a copy-to-check confirm. Zero dependencies. Great for like toggles, copy confirmation, mute switches, and other binary icon states.

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.

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.

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.

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.

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.

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.

Channel-style slider with a pill thumb that rides a full-height track, chasing the pointer on a spring with velocity squash. Optional thumbWidthHover and thumbHeightHover spring the handle from a thin rest size to a larger hover/drag size across the whole control (height can grow past the track) without shifting travel. By default drag commits stay off React until release; pass `live` to fire onChange while dragging (playgrounds). followValue={false} plus setVisualValue paints playheads without re-renders. 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.

Subtle marching-ants edge: a dashed or dotted stroke that crawls sideways between sections. Optional curve bows the line into a soft arc. 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.

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.

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.

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.

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.

A 3D fan of tiles that bloom from the center: small and far in the middle, large and yawed toward the viewer at the edges. Screen overlap is the look; outer tiles sit forward so rotated planes occlude instead of slicing. Radiate or loop motion, drag scrub with momentum. Pure CSS 3D, zero dependencies. Great for creative heroes, portfolio showcases, and product galleries that need motion with depth.

Images that ride a defined sine curve: the path is fixed in the stage (amplitude, wavelength, phase), and each frame samples Y from its current X as it cruises. Stable left-to-right stacking, overlap with a negative gap, soft edge fades, and reduced-motion safety. Pass any cover nodes (img, next/image, avatars, product stills). Zero dependencies. Great for team bands, product rails, speaker walls, and media strips that should feel more alive than a flat grid.

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.

© 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.

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.

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.

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.

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.

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.

Icon circle fused to a label pill with a gooey metaball neck and a sharp frosted silhouette. Backdrop blur plus contrast lift whatever sits behind the glass. On hover the icon springs away; on press the chip scales down. Flip iconSide for left or right, and tune blur, contrast, and opacity. Zero dependencies. Great for feature menus, pricing perk rows, and glassy nav chips over photos or gradients.

Iridescent vinyl-style platter with programmatic grooves, film grain, a thin outer stroke, and a static ring of dots lit by a circular chase that fades behind the head. Drag it like a DJ: scrub while held, then ease back to cruise; release velocity can reverse the platter while the chase keeps its direction. Three colors build the radial wash. Drop in a center image via src or children. Optional tonearm, ground shadow, and Noise grain. Depends on Noise. Great for music players, artist pages, and portfolio pieces that need a tactile now-playing moment.

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.

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.

Headline text that stretches like cloth under the cursor, dragging into a soft wave and springing back with chromatic color fringes that bloom along the pull. Ember, Glacier, and Noir looks ship ready. Pure WebGL, zero dependencies. Great for kinetic brand wordmarks, festival heroes, music landing titles, and interactive product names.

Stacked signup CTA: a bold label with a circular corner-arrow mark beneath it. On hover a multi-stop gradient soft-sweeps left-to-right across the glyphs, leading in from the rest ink so the edge blends instead of cutting, while the whole unit springs up a notch; the icon flips to an accent fill. Tunable wash colors, scale, and spring. Zero dependencies. Great for footer signups, pricing closers, and dark marketing bands that need a soft lift without a heavy button.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Light rays from a corner: two irregular beams shimmer and drift from an off-frame lamp, with optional bloom at the entry. Six presets: Dawn, Harbor, Ember, Aurora, Studio, and Signal. Tune fan, reach, brightness, and bloom. Pure WebGL, zero dependencies. Great for product launch heroes, music stages, and immersive full-bleed canvases.

Film-grain overlay: tiled SVG fractal noise with opacity, blend mode, grain size, contrast, and optional slow drift. Three presets: Film, Fine, and Coarse. Sit it absolutely over a stage. Pure CSS/SVG, zero dependencies. Great for dark music stages, cinematic heroes, and textured UI shells.

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.

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.

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.

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.

A dotted wireframe cube with beads on every corner and along every edge, a bright crest touring the edges, and depth-faded back beads so the far side stays ghosted. Grab and drag to spin; on release it eases into base speed in the fling direction and keeps spinning that way. Toggle interaction off for a plain auto-yaw. Tunable bead size and density. Canvas 2D only. Zero dependencies. Great for 3D tool waits, voxel or grid products, and cube-shaped status marks without a solid mesh.

A top-down dotted globe with a scan meridian that snaps a column of beads to full brightness, then fades them behind the head. Beads soft-fade across the silhouette instead of popping at the limb. Grab and drag to spin; on release it eases into base speed in the fling direction and keeps spinning that way. Toggle interaction off for a plain auto-yaw. Tunable bead size and band density. Canvas 2D only. Zero dependencies. Great for search and scan waits, map or globe products, and agent UIs that are looking something up.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.