The DesignPass component library

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.

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.

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.

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.