# ONONC
> ONONC is an original, motion-first React component library for Next.js 16 (App Router, React 19, TypeScript, Tailwind CSS v4, Framer Motion, lucide-react). It is a copy-paste library: every component ships its real source, which you paste directly into your project — there is no package to install.

Notes for coding agents:
- Components are grouped into four categories: Backgrounds (ambient animated canvases), Text (typographic animations), Components (interactive UI primitives), and Blocks (composed page sections).
- Copy a component's source from its page on the site, or grab every source at once from https://dev.ononc.com/llms-full.txt.
- Or install any component with the shadcn CLI — `npx shadcn@latest add https://dev.ononc.com/r/<id>.json` — which bundles the component plus every internal file it imports (@/lib, sibling components) at your project's aliases. Each item is served at /r/<id>.json.
- Stack: React 19 + Next.js 16, TypeScript, Tailwind CSS v4 (CSS-first @theme tokens in src/app/globals.css — there is no tailwind.config), Framer Motion for interactive motion, lucide-react for icons.
- Shared helpers live in src/lib/utils.ts (cn, clamp, mapRange, seededRandom, prefersReducedMotion); canvas components use the lifecycle hook in src/lib/use-canvas.ts. The shadcn install bundles these automatically; when copying by hand, copy them too.
- Styling: components use ONONC's Tailwind v4 design tokens and keyframes from src/app/globals.css (@theme — e.g. surface/brand/muted colors, aurora/shimmer/marquee animations). The registry brings the .tsx files only, so copy those tokens into your globals.css for exact styling.
- All motion degrades under prefers-reduced-motion; canvas backgrounds pause when off-screen and when the tab is hidden.

## Docs
- [Home](https://dev.ononc.com/): Landing page and category overview.
- [Introduction](https://dev.ononc.com/introduction): What ONONC is and how to use the site.
- [For AI agents](https://dev.ononc.com/ai-agents): How coding agents consume ONONC.
- [Full source dump](https://dev.ononc.com/llms-full.txt): Every component's full source inlined in one file.

## Backgrounds
Ambient, animated canvases to sit behind your content. GPU-friendly and they pause when off-screen.

- [Flow Field](https://dev.ononc.com/backgrounds/flow-field): Particles drift along an invisible flow field, leaving glowing trails. — source: src/components/backgrounds/flow-field.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/flow-field.json [canvas, flow field, interactive]
- [Aurora Ribbons](https://dev.ononc.com/backgrounds/aurora-ribbons): Luminous ribbons of light weave and drift like the aurora. — source: src/components/backgrounds/aurora-ribbons.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/aurora-ribbons.json [canvas, ambient]
- [Vortex](https://dev.ononc.com/backgrounds/vortex): Particles swirl around a drifting center that follows your cursor. — source: src/components/backgrounds/vortex.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/vortex.json [canvas, interactive]
- [Grid Beams](https://dev.ononc.com/backgrounds/grid-beams): Pulses of light race along the lines of a faint grid. — source: src/components/backgrounds/grid-beams.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/grid-beams.json [canvas, grid]
- [Topographic Lines](https://dev.ononc.com/backgrounds/topographic-lines): Contour lines that morph like a living topographic map. — source: src/components/backgrounds/topographic-lines.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/topographic-lines.json [canvas]
- [Embers](https://dev.ononc.com/backgrounds/embers): Warm embers rise and flicker out into the dark. — source: src/components/backgrounds/embers.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/embers.json [canvas]
- [Warp Stars](https://dev.ononc.com/backgrounds/warp-stars): Stars streaking outward from the center like hyperspace. — source: src/components/backgrounds/warp-stars.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/warp-stars.json [canvas]
- [Wave Interference](https://dev.ononc.com/backgrounds/wave-interference): A dot field rippling from orbiting wave sources. — source: src/components/backgrounds/wave-interference.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/wave-interference.json [canvas]
- [Bokeh](https://dev.ononc.com/backgrounds/bokeh): Soft, out-of-focus orbs of colored light drifting by. — source: src/components/backgrounds/bokeh.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bokeh.json [canvas, ambient]
- [Fireflies](https://dev.ononc.com/backgrounds/fireflies): Glowing dots that wander and blink in the dark. — source: src/components/backgrounds/fireflies.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/fireflies.json [canvas]
- [Hex Grid](https://dev.ononc.com/backgrounds/hex-grid): A honeycomb grid that lights up near the cursor. — source: src/components/backgrounds/hex-grid.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hex-grid.json [canvas, interactive]
- [Snowfall](https://dev.ononc.com/backgrounds/snowfall): Depth-layered snow drifting gently downward. — source: src/components/backgrounds/snowfall.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/snowfall.json [canvas]
- [Metaballs](https://dev.ononc.com/backgrounds/metaballs): Soft blobs of color drift and merge like a lava lamp. — source: src/components/backgrounds/metaballs.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/metaballs.json [canvas, ambient]
- [Orbiting Dots](https://dev.ononc.com/backgrounds/orbiting-dots): Concentric rings of dots orbiting a glowing core. — source: src/components/backgrounds/orbiting-dots.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/orbiting-dots.json [canvas]
- [DNA Helix](https://dev.ononc.com/backgrounds/dna-helix): A rotating double helix of paired strands and rungs. — source: src/components/backgrounds/dna-helix.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/dna-helix.json [canvas]
- [Radar Sweep](https://dev.ononc.com/backgrounds/radar-sweep): A rotating sweep lighting up blips over concentric rings. — source: src/components/backgrounds/radar-sweep.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/radar-sweep.json [canvas]
- [Halftone](https://dev.ononc.com/backgrounds/halftone): A halftone dot grid swelling with a moving wave. — source: src/components/backgrounds/halftone.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/halftone.json [canvas]
- [Rain](https://dev.ononc.com/backgrounds/rain): Angled rain streaks falling with a sense of depth. — source: src/components/backgrounds/rain.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/rain.json [canvas]
- [Spiral Galaxy](https://dev.ononc.com/backgrounds/spiral-galaxy): Spiral arms of stars rotating around a glowing core. — source: src/components/backgrounds/spiral-galaxy.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/spiral-galaxy.json [canvas]
- [Neon Tunnel](https://dev.ononc.com/backgrounds/neon-tunnel): Concentric neon frames zooming outward like a tunnel. — source: src/components/backgrounds/neon-tunnel.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/neon-tunnel.json [canvas]
- [Lightning](https://dev.ononc.com/backgrounds/lightning): Branching bolts strike and fade with an electric glow. — source: src/components/backgrounds/lightning.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/lightning.json [canvas]
- [Cells](https://dev.ononc.com/backgrounds/cells): Glowing Voronoi cell edges shifting as their seeds drift. — source: src/components/backgrounds/cells.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/cells.json [canvas]
- [Equalizer](https://dev.ononc.com/backgrounds/equalizer): Sine-driven bars rising and falling like a visualizer. — source: src/components/backgrounds/equalizer.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/equalizer.json [canvas]
- [Smoke](https://dev.ononc.com/backgrounds/smoke): Soft fog drifting upward and slowly dissipating. — source: src/components/backgrounds/smoke.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/smoke.json [canvas, ambient]
- [Mesh Wave](https://dev.ononc.com/backgrounds/mesh-wave): A tilted wireframe surface undulating in 3D. — source: src/components/backgrounds/mesh-wave.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/mesh-wave.json [canvas, 3D]
- [Caustics](https://dev.ononc.com/backgrounds/caustics): Rippling webs of light, like sun through water. — source: src/components/backgrounds/caustics.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/caustics.json [canvas]
- [Magnetic Field](https://dev.ononc.com/backgrounds/magnetic-field): Dipole field lines streaming between two orbiting poles. — source: src/components/backgrounds/magnetic-field.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/magnetic-field.json [canvas]
- [Triangles](https://dev.ononc.com/backgrounds/triangles): A low-poly mesh shimmering with a moving wave. — source: src/components/backgrounds/triangles.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/triangles.json [canvas]
- [Sparkles](https://dev.ononc.com/backgrounds/sparkles): Twinkling points with a soft cross-flare glint. — source: src/components/backgrounds/sparkles.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/sparkles.json [canvas]
- [Confetti](https://dev.ononc.com/backgrounds/confetti): Colorful confetti fluttering down. — source: src/components/backgrounds/confetti.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/confetti.json [canvas]
- [Kaleidoscope](https://dev.ononc.com/backgrounds/kaleidoscope): Orbiting petals mirrored into shifting radial symmetry. — source: src/components/backgrounds/kaleidoscope.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/kaleidoscope.json [canvas]
- [Tron Trails](https://dev.ononc.com/backgrounds/tron-trails): Heads race a grid, turning at right angles, leaving light trails. — source: src/components/backgrounds/tron-trails.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/tron-trails.json [canvas]
- [God Rays](https://dev.ononc.com/backgrounds/god-rays): Volumetric light shafts shimmering from a drifting source. — source: src/components/backgrounds/god-rays.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/god-rays.json [canvas]
- [Oscilloscope](https://dev.ononc.com/backgrounds/oscilloscope): Glowing waveform lines sweeping across a scope grid. — source: src/components/backgrounds/oscilloscope.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/oscilloscope.json [canvas]
- [Pinwheel](https://dev.ononc.com/backgrounds/pinwheel): Rotating conic color sectors like a spinning pinwheel. — source: src/components/backgrounds/pinwheel.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pinwheel.json [canvas]
- [Bubbles](https://dev.ononc.com/backgrounds/bubbles): Wobbling bubbles drifting up with a glassy highlight. — source: src/components/backgrounds/bubbles.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bubbles.json [canvas]
- [Plexus](https://dev.ononc.com/backgrounds/plexus): A rotating 3D node network connected by depth-faded lines. — source: src/components/backgrounds/plexus.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/plexus.json [canvas, 3D]
- [Liquid Blob](https://dev.ononc.com/backgrounds/liquid-blob): Organic blobs morphing and merging like liquid. — source: src/components/backgrounds/liquid-blob.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/liquid-blob.json [canvas, ambient]
- [Perlin Clouds](https://dev.ononc.com/backgrounds/perlin-clouds): Soft fractal clouds drifting and dissolving. — source: src/components/backgrounds/perlin-clouds.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/perlin-clouds.json [canvas, ambient]
- [Ink Drops](https://dev.ononc.com/backgrounds/ink-drops): Ink blots blooming and fading on staggered timers. — source: src/components/backgrounds/ink-drops.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/ink-drops.json [canvas]
- [Data Stream](https://dev.ononc.com/backgrounds/data-stream): Lanes of bright dashes streaming downward. — source: src/components/backgrounds/data-stream.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/data-stream.json [canvas]
- [Scanlines](https://dev.ononc.com/backgrounds/scanlines): CRT scanlines with drifting chromatic glitch bands. — source: src/components/backgrounds/scanlines.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/scanlines.json [canvas]
- [Boids](https://dev.ononc.com/backgrounds/boids): A flocking swarm steering by separation, alignment, and cohesion. — source: src/components/backgrounds/boids.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/boids.json [canvas]
- [Fireworks](https://dev.ononc.com/backgrounds/fireworks): Rockets burst into showers of falling sparks. — source: src/components/backgrounds/fireworks.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/fireworks.json [canvas]
- [Comets](https://dev.ononc.com/backgrounds/comets): Comets arc across the sky with glowing curved tails. — source: src/components/backgrounds/comets.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/comets.json [canvas]
- [Aurora Curtains](https://dev.ononc.com/backgrounds/aurora-curtains): Vertical curtains of light shimmering like the aurora. — source: src/components/backgrounds/aurora-curtains.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/aurora-curtains.json [canvas, ambient]
- [Cloth Flag](https://dev.ononc.com/backgrounds/cloth-flag): A flag-like mesh rippling and self-shading in the wind. — source: src/components/backgrounds/cloth-flag.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/cloth-flag.json [canvas, 3D]
- [Voronoi Fill](https://dev.ononc.com/backgrounds/voronoi-fill): Filled Voronoi regions drifting like stained glass. — source: src/components/backgrounds/voronoi-fill.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/voronoi-fill.json [canvas]
- [Aurora](https://dev.ononc.com/backgrounds/aurora-background): Soft gradient halos that drift like the northern lights. — source: src/components/backgrounds/aurora-background.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/aurora-background.json [CSS, ambient]
- [Gradient Mesh](https://dev.ononc.com/backgrounds): A panning multi-point color mesh finished with fine grain. — source: src/components/backgrounds/gradient-mesh.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/gradient-mesh.json [CSS, grain]
- [Particle Field](https://dev.ononc.com/backgrounds/particle-field): Drifting particles that link to neighbors and the cursor. — source: src/components/backgrounds/particle-field.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/particle-field.json [canvas, interactive]
- [Dot Matrix](https://dev.ononc.com/backgrounds/dot-matrix): A grid of dots that swell and brighten near the pointer. — source: src/components/backgrounds/dot-matrix.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/dot-matrix.json [canvas, interactive]
- [Starfield](https://dev.ononc.com/backgrounds/starfield): Twinkling stars drifting with subtle cursor parallax. — source: src/components/backgrounds/starfield.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/starfield.json [canvas, parallax]
- [Waves](https://dev.ononc.com/backgrounds/waves): Layered sine waves scrolling across the lower edge. — source: src/components/backgrounds/waves.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/waves.json [canvas]
- [Meteors](https://dev.ononc.com/backgrounds/meteors): Glowing meteors streaking diagonally on staggered timers. — source: src/components/backgrounds/meteors.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/meteors.json [CSS]
- [Plasma](https://dev.ononc.com/backgrounds): Vivid blurred color fields panning while the hue rotates. — source: src/components/backgrounds/plasma.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/plasma.json [CSS]
- [Flow Grid](https://dev.ononc.com/backgrounds/flow-grid): A tilted perspective grid scrolling toward the horizon. — source: src/components/backgrounds/flow-grid.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/flow-grid.json [CSS, 3D]
- [Light Beams](https://dev.ononc.com/backgrounds/light-beams): Vertical shafts of light, each breathing on its own cadence. — source: src/components/backgrounds/light-beams.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/light-beams.json [CSS]
- [Pulse Rings](https://dev.ononc.com/backgrounds/pulse-rings): Concentric rings expanding outward like sonar. — source: src/components/backgrounds/pulse-rings.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pulse-rings.json [CSS]
- [Flowing Lines](https://dev.ononc.com/backgrounds/flowing-lines): Silk-like lines waving with layered motion and cursor pull. — source: src/components/backgrounds/flowing-lines.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/flowing-lines.json [canvas, interactive]
- [Spotlight Cursor](https://dev.ononc.com/backgrounds/spotlight-cursor): A hidden dot grid revealed only inside a cursor spotlight. — source: src/components/backgrounds/spotlight-cursor.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/spotlight-cursor.json [pointer, mask]
- [Matrix Rain](https://dev.ononc.com/backgrounds/matrix-rain): Columns of glyphs falling with glowing fading trails. — source: src/components/backgrounds/matrix-rain.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/matrix-rain.json [canvas]

## Text Animations
Typographic effects that draw the eye — reveals, gradients, decoding, and counters. All stay screen-reader friendly.

- [Gradient Text](https://dev.ononc.com/text/gradient-text): A living gradient that pans across the letters. — source: src/components/text/gradient-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/gradient-text.json [CSS]
- [Shiny Text](https://dev.ononc.com/text/shiny-text): A glare that sweeps across muted text on a loop. — source: src/components/text/shiny-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/shiny-text.json [CSS]
- [Split Reveal](https://dev.ononc.com/text/split-reveal): Words slide up from behind a mask, staggered, on view. — source: src/components/text/split-reveal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/split-reveal.json [motion, scroll]
- [Blur In](https://dev.ononc.com/text/blur-in-text): Words resolve from a soft blur as they fade in. — source: src/components/text/blur-in-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/blur-in-text.json [motion, scroll]
- [Typewriter](https://dev.ononc.com/text/typewriter): Types and deletes through a rotating list of phrases. — source: src/components/text/typewriter.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/typewriter.json [loop]
- [Rotating Text](https://dev.ononc.com/text/rotating-text): Swaps through words in a vertical slot. — source: src/components/text/rotating-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/rotating-text.json [motion, loop]
- [Scramble Text](https://dev.ononc.com/text/scramble-text): Glyphs flicker and lock into the final string. — source: src/components/text/scramble-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/scramble-text.json [hover]
- [Glitch Text](https://dev.ononc.com/text/glitch-text): Two color channels jitter and clip for a CRT glitch. — source: src/components/text/glitch-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/glitch-text.json [CSS]
- [Wavy Text](https://dev.ononc.com/text/wavy-text): Each letter rides a continuous sine wave. — source: src/components/text/wavy-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/wavy-text.json [CSS]
- [Highlight Text](https://dev.ononc.com/text/highlight-text): A marker stroke sweeps in behind the text on view. — source: src/components/text/highlight-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/highlight-text.json [motion, scroll]
- [Count Up](https://dev.ononc.com/text/count-up): Eases a number to its target the first time it's seen. — source: src/components/text/count-up.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/count-up.json [motion, scroll]
- [Number Ticker](https://dev.ononc.com/text/number-ticker): Odometer digits that roll to the target on view. — source: src/components/text/number-ticker.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/number-ticker.json [motion, scroll]
- [Scroll Reveal](https://dev.ononc.com/text/scroll-reveal): Words light up one by one as the line scrolls through view. — source: src/components/text/scroll-reveal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/scroll-reveal.json [motion, scroll]
- [Flip Text](https://dev.ononc.com/text/flip-text): Each character flips up into place on view. — source: src/components/text/flip-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/flip-text.json [motion, 3D]
- [Gradient Underline](https://dev.ononc.com/text/gradient-underline): A gradient underline that grows in on hover and focus. — source: src/components/text/gradient-underline.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/gradient-underline.json [CSS, link]
- [Letters Pull-Up](https://dev.ononc.com/text/letters-pull-up): Each letter springs up and fades in, staggered, on view. — source: src/components/text/letters-pull-up.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/letters-pull-up.json [motion, scroll]
- [Text Reveal](https://dev.ononc.com/text/text-reveal): A clip-path mask wipes the text into view. — source: src/components/text/text-reveal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/text-reveal.json [motion, scroll]
- [Decrypt Text](https://dev.ononc.com/text/decrypt-text): Characters resolve out of random glyphs in scattered order. — source: src/components/text/decrypt-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/decrypt-text.json [motion, scroll]
- [Line Reveal](https://dev.ononc.com/text/line-reveal): Each line slides up from behind a mask, in sequence. — source: src/components/text/line-reveal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/line-reveal.json [motion, scroll]
- [Tracking In](https://dev.ononc.com/text/tracking-in): Letter-spacing expands out of a blur as the text fades in. — source: src/components/text/tracking-in.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/tracking-in.json [motion, scroll]
- [Focus Text](https://dev.ononc.com/text/focus-text): Focus rolls across the words, blurring all but the active one. — source: src/components/text/focus-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/focus-text.json [motion, loop]
- [Text Pressure](https://dev.ononc.com/text/text-pressure): Letters swell and thicken toward the cursor. — source: src/components/text/text-pressure.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/text-pressure.json [pointer]
- [Underline Draw](https://dev.ononc.com/text/underline-draw): A hand-drawn gradient underline draws in beneath the text. — source: src/components/text/underline-draw.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/underline-draw.json [motion, scroll]
- [Neon Text](https://dev.ononc.com/text/neon-text): Glowing sign text with a subtle flicker and deep blur halo. — source: src/components/text/neon-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/neon-text.json [CSS]
- [Holographic Text](https://dev.ononc.com/text/holographic-text): Iridescent text whose colors shift through the spectrum continuously. — source: src/components/text/holographic-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/holographic-text.json [CSS]
- [Shadow Text](https://dev.ononc.com/text/shadow-text): Multi-layered colored shadows that pulse and create dimensional depth. — source: src/components/text/shadow-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/shadow-text.json [CSS]
- [Breathing Text](https://dev.ononc.com/text/breathing-text): Text gently expands and contracts like a breathing rhythm. — source: src/components/text/breathing-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/breathing-text.json [CSS]
- [Ghost Text](https://dev.ononc.com/text/ghost-text): Ethereal text that fades in and out like an apparition, with a subtle drift. — source: src/components/text/ghost-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/ghost-text.json [CSS]
- [Glow Pulse Text](https://dev.ononc.com/text/glow-pulse-text): Expanding glow rings pulse outward from the text like a heartbeat. — source: src/components/text/glow-pulse-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/glow-pulse-text.json [CSS]
- [Ticker Text](https://dev.ononc.com/text/ticker-text): News-ticker style scrolling text that loops seamlessly. — source: src/components/text/ticker-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/ticker-text.json [CSS]
- [Striped Text](https://dev.ononc.com/text/striped-text): Animated diagonal stripes flow through the letters. — source: src/components/text/striped-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/striped-text.json [CSS]
- [Staggered Fade](https://dev.ononc.com/text/staggered-fade): Each character fades, slides, and rotates into place one by one. — source: src/components/text/staggered-fade.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/staggered-fade.json [motion, scroll]
- [Rising Text](https://dev.ononc.com/text/rising-text): Each character rises up from below with a spring settle. — source: src/components/text/rising-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/rising-text.json [motion, scroll]
- [Kinetic Reveal](https://dev.ononc.com/text/kinetic-reveal): Words burst in with scale, rotation, and blur in a springy sequence. — source: src/components/text/kinetic-reveal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/kinetic-reveal.json [motion, scroll]
- [Fire Text](https://dev.ononc.com/text/fire-text): Letters flicker with flame-like scale, opacity, and blur in a continuous loop. — source: src/components/text/fire-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/fire-text.json [motion, loop]
- [Clip-Draw Text](https://dev.ononc.com/text/clip-draw-text): SVG stroke outline draws in character-by-character, then fills. — source: src/components/text/clip-draw-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/clip-draw-text.json [motion, SVG]
- [Morphing Text](https://dev.ononc.com/text/morphing-text): Each word scales down while the next scales up in a smooth morph. — source: src/components/text/morphing-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/morphing-text.json [motion, loop]
- [Split Flap](https://dev.ononc.com/text/split-flap): Retro split-flap display. Each word flips down like a departure board. — source: src/components/text/split-flap.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/split-flap.json [motion, loop]
- [Scatter Text](https://dev.ononc.com/text/scatter-text): Characters fly apart and reassemble on hover like scattered cards. — source: src/components/text/scatter-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/scatter-text.json [motion, hover]
- [Perspective Text](https://dev.ononc.com/text/perspective-text): Text tilts in 3D towards the mouse with a parallax glow. — source: src/components/text/perspective-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/perspective-text.json [pointer]
- [Elastic Text](https://dev.ononc.com/text/elastic-text): Letters stretch toward the pointer like a rubber band. — source: src/components/text/elastic-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/elastic-text.json [pointer]
- [Ripple Text](https://dev.ononc.com/text/ripple-text): Letters undulate away from the cursor like ripples on water. — source: src/components/text/ripple-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/ripple-text.json [pointer]
- [Twinkle Text](https://dev.ononc.com/text/twinkle-text): Each character twinkles with staggered random delays like starlight. — source: src/components/text/twinkle-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/twinkle-text.json [CSS]
- [Pulse Wave Text](https://dev.ononc.com/text/pulse-wave-text): A brightness wave sweeps left to right through the text in a loop. — source: src/components/text/pulse-wave-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pulse-wave-text.json [CSS]
- [Color Cycle Text](https://dev.ononc.com/text/color-cycle-text): Each character independently cycles through the brand palette. — source: src/components/text/color-cycle-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/color-cycle-text.json [CSS]
- [Flicker In Text](https://dev.ononc.com/text/flicker-in-text): Rapid stroboscopic on/off flicker before text stabilizes, like dying neon. — source: src/components/text/flicker-in-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/flicker-in-text.json [CSS]
- [Revolve Text](https://dev.ononc.com/text/revolve-text): Each character does a 360 spin on its own axis, staggered on view. — source: src/components/text/revolve-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/revolve-text.json [motion, 3D]
- [Gravity Text](https://dev.ononc.com/text/gravity-text): Letters drop in from above with heavy bounce physics and wobble settle. — source: src/components/text/gravity-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/gravity-text.json [motion, scroll]
- [Zoom Blur Text](https://dev.ononc.com/text/zoom-blur-text): Characters zoom in from a huge distant scale with extreme motion blur. — source: src/components/text/zoom-blur-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/zoom-blur-text.json [motion, scroll]
- [Warp In Text](https://dev.ononc.com/text/warp-in-text): Characters warp in from a compressed, skewed state with an energetic snap. — source: src/components/text/warp-in-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/warp-in-text.json [motion, scroll]
- [Expand Text](https://dev.ononc.com/text/expand-text): Text expands from compressed letter-spacing into natural breathing room. — source: src/components/text/expand-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/expand-text.json [motion, scroll]
- [Dual Tone Text](https://dev.ononc.com/text/dual-tone-text): Two text layers slide apart vertically as you scroll. — source: src/components/text/dual-tone-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/dual-tone-text.json [motion, scroll]
- [Swap Cascade](https://dev.ononc.com/text/swap-cascade): Random glyphs cascade left to right, locking into the target text. — source: src/components/text/swap-cascade.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/swap-cascade.json [motion, loop]
- [Digi-Clock Text](https://dev.ononc.com/text/digi-clock-text): Characters flip through glyphs like a digital clock, then resolve. — source: src/components/text/digi-clock-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/digi-clock-text.json [motion]
- [Shake Text](https://dev.ononc.com/text/shake-text): Text vibrates with random micro-displacements on pointer move. — source: src/components/text/shake-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/shake-text.json [pointer]
- [Shatter Text](https://dev.ononc.com/text/shatter-text): Characters shatter outward and reform on hover, like breaking glass. — source: src/components/text/shatter-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/shatter-text.json [motion, hover]
- [Magnetic Text](https://dev.ononc.com/text/magnetic-text): Each letter is pulled toward the cursor like iron filings to a magnet. — source: src/components/text/magnetic-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/magnetic-text.json [pointer]
- [Split Color Text](https://dev.ononc.com/text/split-color-text): Text is split horizontally at the cursor: top half in one color, bottom in another. — source: src/components/text/split-color-text.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/split-color-text.json [pointer]

## Components
Interactive building blocks — cards, buttons, disclosure, tabs, toasts and more. Keyboard and reduced-motion aware.

- [Magnetic Button](https://dev.ononc.com/ui): Springs toward the cursor, then snaps back on leave. — source: src/components/ui/magnetic-button.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/magnetic-button.json [motion, hover]
- [Shimmer Button](https://dev.ononc.com/ui): A band of light orbits the border continuously. — source: src/components/ui/shimmer-button.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/shimmer-button.json [CSS]
- [Ripple Button](https://dev.ononc.com/ui): Emits a ripple from the exact press point. — source: src/components/ui/ripple-button.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/ripple-button.json [pointer]
- [Tilt Card](https://dev.ononc.com/ui): Tilts in 3D toward the pointer with a tracking glare. — source: src/components/ui/tilt-card.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/tilt-card.json [motion, 3D]
- [Spotlight Card](https://dev.ononc.com/ui): A radial glow follows the cursor across the surface. — source: src/components/ui/spotlight-card.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/spotlight-card.json [pointer]
- [Dock](https://dev.ononc.com/ui): macOS-style icons that magnify by cursor proximity. — source: src/components/ui/dock.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/dock.json [motion]
- [Marquee](https://dev.ononc.com/ui): A seamless infinite scroller that pauses on hover. — source: src/components/ui/marquee.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/marquee.json [CSS, loop]
- [Carousel](https://dev.ononc.com/ui): Looping slides with arrows, dots, and arrow-key support. — source: src/components/ui/carousel.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/carousel.json [a11y, keyboard]
- [Accordion](https://dev.ononc.com/ui): Accessible disclosure list with smooth height transitions. — source: src/components/ui/accordion.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/accordion.json [a11y, disclosure]
- [Tabs](https://dev.ononc.com/ui): Accessible tablist with a sliding underline indicator. — source: src/components/ui/tabs.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/tabs.json [a11y, keyboard]
- [Tooltip](https://dev.ononc.com/ui): Shows on hover and keyboard focus, linked via aria. — source: src/components/ui/tooltip.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/tooltip.json [a11y, hover]
- [Switch](https://dev.ononc.com/ui/switch): Accessible toggle with a spring thumb. — source: src/components/ui/switch.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/switch.json [a11y, form]
- [Segmented Control](https://dev.ononc.com/ui/segmented-control): Single-select with a pill that slides to the choice. — source: src/components/ui/segmented-control.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/segmented-control.json [a11y, motion]
- [Modal](https://dev.ononc.com/ui): Portaled dialog with focus management and Escape to close. — source: src/components/ui/modal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/modal.json [a11y, portal]
- [Toast](https://dev.ononc.com/ui): Imperative toasts via a tiny store and a Toaster. — source: src/components/ui/toast.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/toast.json [store, aria-live]
- [Command Palette](https://dev.ononc.com/ui): ⌘K launcher with live filtering and full keyboard nav. — source: src/components/ui/command-palette.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/command-palette.json [a11y, keyboard, portal]
- [Dropdown Menu](https://dev.ononc.com/ui): Menu button with roving focus, Escape, and outside-click. — source: src/components/ui/dropdown-menu.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/dropdown-menu.json [a11y, keyboard]
- [Popover](https://dev.ononc.com/ui): Floating panel of arbitrary content with focus return. — source: src/components/ui/popover.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/popover.json [a11y, overlay]
- [Drawer](https://dev.ononc.com/ui): Slide-in side panel with focus management and Escape. — source: src/components/ui/drawer.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/drawer.json [a11y, portal]
- [OTP Input](https://dev.ononc.com/ui): Segmented code entry with auto-advance and paste. — source: src/components/ui/otp-input.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/otp-input.json [form, keyboard]
- [Slider](https://dev.ononc.com/ui/slider): Range input with pointer drag and keyboard control. — source: src/components/ui/slider.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/slider.json [a11y, form]
- [Rating](https://dev.ononc.com/ui/rating): Star rating with hover preview and arrow-key adjust. — source: src/components/ui/rating.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/rating.json [a11y, form]
- [Stepper](https://dev.ononc.com/ui): Multi-step progress with completed and active states. — source: src/components/ui/stepper.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/stepper.json [progress]
- [Progress Ring](https://dev.ononc.com/ui/progress-ring): Radial dial that eases to its value on view. — source: src/components/ui/progress-ring.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/progress-ring.json [motion, scroll]
- [Scroll Progress](https://dev.ononc.com/ui): Gradient bar tied to scroll position (window or container). — source: src/components/ui/scroll-progress.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/scroll-progress.json [motion, scroll]
- [Image Compare](https://dev.ononc.com/ui): Before/after wipe with a draggable, keyboardable handle. — source: src/components/ui/image-compare.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/image-compare.json [pointer, keyboard]
- [Avatar Stack](https://dev.ononc.com/ui): Overlapping avatars with an overflow +N chip. — source: src/components/ui/avatar-stack.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/avatar-stack.json [layout]
- [Breadcrumbs](https://dev.ononc.com/ui): Accessible trail with chevrons and aria-current. — source: src/components/ui/breadcrumbs.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/breadcrumbs.json [a11y, nav]
- [Skeleton](https://dev.ononc.com/ui): Shimmering placeholders for loading states. — source: src/components/ui/skeleton.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/skeleton.json [loading]
- [Combobox](https://dev.ononc.com/ui): Accessible autocomplete with live filtering and keyboard nav. — source: src/components/ui/combobox.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/combobox.json [a11y, keyboard]
- [Toggle Group](https://dev.ononc.com/ui): Single or multiple selection of toggle buttons. — source: src/components/ui/toggle-group.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/toggle-group.json [a11y, form]
- [Tag Input](https://dev.ononc.com/ui): Add chips with Enter, remove with × or Backspace. — source: src/components/ui/tag-input.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/tag-input.json [form, keyboard]
- [Pagination](https://dev.ononc.com/ui): Numbered pages with prev/next and ellipsis collapsing. — source: src/components/ui/pagination.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pagination.json [a11y, nav]
- [Progress Bar](https://dev.ononc.com/ui/progress-bar): Linear meter that fills to its value on view. — source: src/components/ui/progress-bar.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/progress-bar.json [motion, scroll]
- [File Dropzone](https://dev.ononc.com/ui): Drag-and-drop file picker with a list (front-end only). — source: src/components/ui/file-dropzone.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/file-dropzone.json [form, pointer]
- [Checkbox](https://dev.ononc.com/ui): Tri-state checkbox with an indeterminate option and labels. — source: src/components/ui/checkbox.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/checkbox.json [a11y, form]
- [Radio Group](https://dev.ononc.com/ui): Single-select with roving focus and arrow-key navigation. — source: src/components/ui/radio-group.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/radio-group.json [a11y, form]
- [Select](https://dev.ononc.com/ui): Listbox-style picker with type-ahead and full keyboard nav. — source: src/components/ui/select.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/select.json [a11y, keyboard]
- [Number Input](https://dev.ononc.com/ui/number-input): Numeric stepper with clamp, step, and keyboard control. — source: src/components/ui/number-input.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/number-input.json [a11y, form]
- [Textarea](https://dev.ononc.com/ui): Auto-resizing multiline field with an optional counter. — source: src/components/ui/textarea.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/textarea.json [form]
- [Badge](https://dev.ononc.com/ui/badge): Compact status label in solid, soft, and outline variants. — source: src/components/ui/badge.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/badge.json [display]
- [Alert](https://dev.ononc.com/ui/alert): Semantic callouts for info, success, warning, and errors. — source: src/components/ui/alert.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/alert.json [feedback, a11y]
- [Spinner](https://dev.ononc.com/ui/spinner): Accessible loading indicator in three sizes. — source: src/components/ui/spinner.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/spinner.json [feedback, loading]
- [Hover Card](https://dev.ononc.com/ui): Rich preview revealed on hover or keyboard focus, with delay. — source: src/components/ui/hover-card.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hover-card.json [overlay, hover]
- [Context Menu](https://dev.ononc.com/ui): Right-click menu at the pointer with keyboard navigation. — source: src/components/ui/context-menu.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/context-menu.json [a11y, pointer, portal]
- [Date Picker](https://dev.ononc.com/ui): Calendar popover with WAI-ARIA grid keyboard navigation. — source: src/components/ui/date-picker.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/date-picker.json [a11y, keyboard]
- [Stat Card](https://dev.ononc.com/ui/stat-card): KPI tile with a trend delta and an animated sparkline. — source: src/components/ui/stat-card.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/stat-card.json [display, motion]
- [Resizable](https://dev.ononc.com/ui): Split panels with a draggable, keyboard-resizable divider. — source: src/components/ui/resizable.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/resizable.json [pointer, a11y]
- [Tree View](https://dev.ononc.com/ui): Expandable hierarchy with roving focus and arrow-key nav. — source: src/components/ui/tree-view.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/tree-view.json [a11y, keyboard]
- [Toolbar](https://dev.ononc.com/ui): Grouped controls with roving focus and aria-pressed toggles. — source: src/components/ui/toolbar.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/toolbar.json [a11y, keyboard]
- [Menubar](https://dev.ononc.com/ui): Application menu bar with arrow-key navigation between menus. — source: src/components/ui/menubar.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/menubar.json [a11y, keyboard]
- [Data Table](https://dev.ononc.com/ui): Sortable columns with aria-sort and optional row selection. — source: src/components/ui/data-table.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/data-table.json [a11y, data]
- [Color Picker](https://dev.ononc.com/ui): HSV picker with a hue slider, hex input, and swatches. — source: src/components/ui/color-picker.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/color-picker.json [pointer, form]
- [Calendar](https://dev.ononc.com/ui): Inline month grid for single or range selection (range shown). — source: src/components/ui/calendar.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/calendar.json [a11y, keyboard]
- [Kbd](https://dev.ononc.com/ui/kbd): Keyboard key caps for documenting shortcuts. — source: src/components/ui/kbd.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/kbd.json [display]
- [Card](https://dev.ononc.com/ui): Composable content surface with header, content, and footer. — source: src/components/ui/card.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/card.json [layout, display]
- [Avatar](https://dev.ononc.com/ui/avatar): User image with initials fallback and an optional status dot. — source: src/components/ui/avatar.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/avatar.json [display]
- [Separator](https://dev.ononc.com/ui/separator): Thin divider, horizontal or vertical, with an optional label. — source: src/components/ui/separator.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/separator.json [layout]
- [Collapsible](https://dev.ononc.com/ui): A single show/hide disclosure with an animated height. — source: src/components/ui/collapsible.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/collapsible.json [a11y, disclosure]
- [Scroll Area](https://dev.ononc.com/ui): A bounded scroll container with a custom, themed scrollbar. — source: src/components/ui/scroll-area.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/scroll-area.json [pointer, layout]
- [Empty State](https://dev.ononc.com/ui): A centered placeholder for empty content with an action. — source: src/components/ui/empty-state.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/empty-state.json [display, feedback]
- [Multi-Select](https://dev.ononc.com/ui): Searchable multi-select with removable chips and keyboard nav. — source: src/components/ui/multi-select.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/multi-select.json [a11y, form]
- [Time Picker](https://dev.ononc.com/ui): Pick an hour, minute, and AM/PM with spinbutton segments. — source: src/components/ui/time-picker.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/time-picker.json [a11y, form]
- [Chroma Card](https://dev.ononc.com/ui/chroma-card): 3D tilt card with a hue-shifting holographic sheen and chromatic fringing. — source: src/components/ui/chroma-card.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/chroma-card.json [motion, hover, 3D]
- [Device Mockup](https://dev.ononc.com/ui/device-mockup): CSS-only phone, tablet and browser frames for screenshots. — source: src/components/ui/device-mockup.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/device-mockup.json [display, CSS]
- [Infinite Gallery](https://dev.ononc.com/ui/infinite-gallery): A drag-and-throw tile wall that wraps forever and drifts while idle. — source: src/components/ui/infinite-gallery.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/infinite-gallery.json [motion, drag, canvas-free]
- [Smooth Cursor](https://dev.ononc.com/ui/smooth-cursor): Scoped dot-and-ring cursor that eases behind the pointer and grows over targets. — source: src/components/ui/smooth-cursor.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/smooth-cursor.json [motion, pointer]
- [Preloader](https://dev.ononc.com/ui/preloader): Page-load curtain that counts up, holds a beat, then reveals the page. — source: src/components/ui/preloader.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/preloader.json [motion, loading]
- [Globe](https://dev.ononc.com/ui/globe): Dotted canvas globe with comet connection arcs — drag to spin. — source: src/components/ui/globe.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/globe.json [canvas, drag, 3D]
- [Swipe Deck](https://dev.ononc.com/ui/swipe-cards): A draggable card deck you fling left or right, with keyboard and button controls. — source: src/components/ui/swipe-cards.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/swipe-cards.json [motion, drag, a11y]

## Section Blocks
Composed, drop-in page sections built from the primitives above — from navbar to footer.

- [Navbar](https://dev.ononc.com/blocks): Responsive navigation that collapses to a mobile menu. — source: src/components/blocks/navbar-block.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-block.json [composed, responsive]
- [Mega Menu Navbar](https://dev.ononc.com/blocks): SaaS-grade bar with rich, categorized mega-menu dropdowns and a featured card. — source: src/components/blocks/navbar-mega-menu.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-mega-menu.json [composed, a11y]
- [Floating Navbar](https://dev.ononc.com/blocks): Centered glass island with a highlight that slides between links. — source: src/components/blocks/navbar-floating.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-floating.json [composed, motion]
- [Split Navbar](https://dev.ononc.com/blocks): Editorial header with a centered wordmark, split links, and animated underlines. — source: src/components/blocks/navbar-split.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-split.json [composed, responsive]
- [App Navbar](https://dev.ononc.com/blocks): Product top bar with workspace switcher, search, notifications, and avatar menu. — source: src/components/blocks/navbar-app.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-app.json [composed, a11y]
- [Drawer Navbar](https://dev.ononc.com/blocks): Minimal bar that opens a premium slide-in navigation drawer with focus management. — source: src/components/blocks/navbar-drawer.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-drawer.json [composed, motion]
- [Sticky Navbar](https://dev.ononc.com/blocks): Header that condenses on scroll with a glass backdrop and a progress line. — source: src/components/blocks/navbar-sticky.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-sticky.json [composed, scroll]
- [Command Navbar](https://dev.ononc.com/blocks): Search opens an inline command palette with full keyboard navigation. — source: src/components/blocks/navbar-command.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-command.json [composed, a11y]
- [Sidebar Navbar](https://dev.ononc.com/blocks): Collapsible vertical rail with a sliding active indicator and a user chip. — source: src/components/blocks/navbar-sidebar.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-sidebar.json [composed, a11y]
- [Announcement Navbar](https://dev.ononc.com/blocks): Two-tier header with a dismissible gradient announcement strip above the nav. — source: src/components/blocks/navbar-announce.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-announce.json [composed, motion]
- [Commerce Navbar](https://dev.ononc.com/blocks): Storefront header with search, account, and a cart badge with a mini-cart popover. — source: src/components/blocks/navbar-commerce.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-commerce.json [composed, a11y]
- [Auto-hide Navbar](https://dev.ononc.com/blocks): Sticky header that hides on scroll-down and reveals on scroll-up. — source: src/components/blocks/navbar-autohide.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-autohide.json [composed, scroll]
- [Segmented Navbar](https://dev.ononc.com/blocks): Primary navigation as a segmented control with a sliding active pill. — source: src/components/blocks/navbar-segmented.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-segmented.json [composed, motion]
- [Docs Navbar](https://dev.ononc.com/blocks): Documentation header with a version switcher, search, theme toggle, and star count. — source: src/components/blocks/navbar-docs.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-docs.json [composed, a11y]
- [Bottom Tab Bar](https://dev.ononc.com/blocks): Mobile app-style bottom navigation with a sliding indicator and a center action. — source: src/components/blocks/navbar-bottom.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-bottom.json [composed, motion]
- [Scrollspy Navbar](https://dev.ononc.com/blocks): One-page section nav whose active link tracks the in-view section as you scroll. — source: src/components/blocks/navbar-scrollspy.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-scrollspy.json [composed, scroll]
- [Multi-level Navbar](https://dev.ononc.com/blocks): Drill-down menu with nested submenus that slide between levels with a back trail. — source: src/components/blocks/navbar-multilevel.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-multilevel.json [composed, a11y]
- [Dashboard Navbar](https://dev.ononc.com/blocks): Breadcrumb trail and main bar above a secondary tab row with a sliding underline. — source: src/components/blocks/navbar-dashboard.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-dashboard.json [composed, motion]
- [Locale Navbar](https://dev.ononc.com/blocks): Marketing bar with accessible language and currency switchers. — source: src/components/blocks/navbar-locale.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/navbar-locale.json [composed, a11y]
- [Hero](https://dev.ononc.com/blocks): Animated marketing hero over an aurora field. — source: src/components/blocks/hero-block.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-block.json [composed, motion]
- [Hero Split](https://dev.ononc.com/blocks): Asymmetric product hero with a tilting app-window mock, live chart, and floating stats. — source: src/components/blocks/hero-split.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-split.json [composed, motion, pointer]
- [Hero Spotlight](https://dev.ononc.com/blocks): Centered hero with a pointer-tracked spotlight over a dot grid and a trusted-by marquee. — source: src/components/blocks/hero-spotlight.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-spotlight.json [composed, pointer, motion]
- [Hero Glow](https://dev.ononc.com/blocks): Centered hero with a drifting conic glow and an app screenshot fading into the page. — source: src/components/blocks/hero-glow.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-glow.json [composed, motion]
- [Hero Editorial](https://dev.ononc.com/blocks): Typography-forward, left-aligned hero with hairline meta rows and a word-by-word reveal. — source: src/components/blocks/hero-editorial.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-editorial.json [composed, motion, a11y]
- [Hero Terminal](https://dev.ononc.com/blocks): Developer hero with a self-typing terminal window and a copy-to-clipboard install command. — source: src/components/blocks/hero-terminal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-terminal.json [composed, motion, a11y]
- [Hero Waitlist](https://dev.ononc.com/blocks): Launch hero over light beams with an accessible email capture (front-end only) and social proof. — source: src/components/blocks/hero-waitlist.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-waitlist.json [composed, form, a11y]
- [Hero Stats](https://dev.ononc.com/blocks): Credibility-forward hero with a band of headline metrics that count up on view. — source: src/components/blocks/hero-stats.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-stats.json [composed, scroll, motion]
- [Hero Rotating](https://dev.ononc.com/blocks): Clean centered hero whose headline swaps a key word on a loop over drifting orbs. — source: src/components/blocks/hero-rotating.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-rotating.json [composed, motion]
- [Hero Video](https://dev.ononc.com/blocks): Cinematic hero with a 16:9 media card and an accessible play/pause control (front-end only). — source: src/components/blocks/hero-video.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-video.json [composed, motion, a11y]
- [Hero App](https://dev.ononc.com/blocks): Mobile-app landing hero with a tilting phone mock, store buttons, and a star rating. — source: src/components/blocks/hero-app.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-app.json [composed, motion, pointer]
- [Hero Marquee](https://dev.ononc.com/blocks): Centered hero floating over rows of huge ghost-text wordmarks scrolling in opposing directions. — source: src/components/blocks/hero-marquee.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-marquee.json [composed, loop, motion]
- [Hero Showcase](https://dev.ononc.com/blocks): Split hero with a stacked screen deck that auto-cycles through product views, with dot controls. — source: src/components/blocks/hero-showcase.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-showcase.json [composed, motion, a11y]
- [Hero Countdown](https://dev.ononc.com/blocks): Launch hero with a hydration-safe live countdown ticking to a target date. — source: src/components/blocks/hero-countdown.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-countdown.json [composed, motion]
- [Hero AI](https://dev.ononc.com/blocks): AI-product hero with a prompt composer, suggestion chips, and a simulated reply (front-end only). — source: src/components/blocks/hero-ai.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-ai.json [composed, form, a11y]
- [Hero Search](https://dev.ononc.com/blocks): Search-led landing hero with a prominent field and popular query chips (front-end only). — source: src/components/blocks/hero-search.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-search.json [composed, form, a11y]
- [Hero Image](https://dev.ononc.com/blocks): Full-bleed gradient-scene hero with a legibility scrim and overlay copy; server-renderable. — source: src/components/blocks/hero-image.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/hero-image.json [composed, layout]
- [Logo Cloud](https://dev.ononc.com/blocks): A quiet marquee of customer wordmarks. — source: src/components/blocks/logo-cloud.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/logo-cloud.json [composed, loop]
- [Bento Grid](https://dev.ononc.com/blocks): Editorial asymmetric grid of spotlight feature cards. — source: src/components/blocks/bento-grid.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-grid.json [layout, pointer]
- [Bento Showcase](https://dev.ononc.com/blocks): Flagship product bento with bespoke per-cell visuals — an orbiting hero, a live bar chart, an avatar stack, and metrics. — source: src/components/blocks/bento-showcase.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-showcase.json [layout, motion]
- [Bento Stats](https://dev.ononc.com/blocks): Analytics bento: counting metrics, a drawn sparkline, a radial goal dial, and animated traffic-source bars. — source: src/components/blocks/bento-stats.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-stats.json [layout, scroll]
- [Bento Gallery](https://dev.ononc.com/blocks): Editorial media wall of CSS mesh-gradient tiles with hover-zoom and a caption that resolves on hover or focus. — source: src/components/blocks/bento-gallery.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-gallery.json [layout, pointer]
- [Bento Interactive](https://dev.ononc.com/blocks): Interaction showcase: a conic gradient border, cursor spotlight, 3D tilt, magnetic CTA, and copy-to-clipboard. — source: src/components/blocks/bento-interactive.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-interactive.json [motion, pointer]
- [Bento Features](https://dev.ononc.com/blocks): Feature-storytelling bento with bespoke mocks — an automation pipeline, a ⌘K palette, live cursors, and theming. — source: src/components/blocks/bento-features.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-features.json [layout, motion]
- [Bento Product](https://dev.ononc.com/blocks): Product-UI preview: an app-window mock with a drawn chart, a mini kanban board, an activity feed, and a KPI. — source: src/components/blocks/bento-product.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-product.json [layout, motion]
- [Bento Minimal](https://dev.ononc.com/blocks): A quiet, editorial bento with oversized ghost numerals and a single accent — server-safe, pure-CSS hover. — source: src/components/blocks/bento-minimal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-minimal.json [layout]
- [Bento Creative](https://dev.ononc.com/blocks): Portfolio/agency bento: an intro, gradient project tiles with role and year, a skills cloud, and a contact CTA. — source: src/components/blocks/bento-creative.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-creative.json [layout, pointer]
- [Bento Social Proof](https://dev.ononc.com/blocks): Social-proof bento: a featured testimonial, supporting quotes, an aggregate rating, logos, and headline stats. — source: src/components/blocks/bento-social.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-social.json [layout, motion]
- [Bento Developer](https://dev.ononc.com/blocks): Developer/API bento: a copyable code editor, REST endpoints, SDK languages, a latency readout, and webhooks. — source: src/components/blocks/bento-dev.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-dev.json [layout, motion]
- [Bento Profile](https://dev.ononc.com/blocks): A link-in-bio personal bento: an identity card, outbound link tiles, a now-playing equalizer, and a booking CTA. — source: src/components/blocks/bento-profile.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-profile.json [layout, motion]
- [Bento Blog](https://dev.ononc.com/blocks): Editorial content bento: a featured cover story, post cards, a topics cloud, a newsletter CTA, and an archive. — source: src/components/blocks/bento-blog.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-blog.json [layout]
- [Bento Contact](https://dev.ononc.com/blocks): Contact bento: channel tiles, office hours, an abstract CSS map with a pulsing pin, and an email CTA. — source: src/components/blocks/bento-contact.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/bento-contact.json [layout]
- [Feature Grid](https://dev.ononc.com/blocks): Titled three-column grid of capabilities. — source: src/components/blocks/feature-grid.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-grid.json [layout]
- [Feature Cards](https://dev.ononc.com/blocks): Elevated capability cards with a gradient hover ring and staggered scroll reveal. — source: src/components/blocks/feature-cards.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-cards.json [layout, motion]
- [Feature Spotlight](https://dev.ononc.com/blocks): Alternating feature rows pairing copy and a checklist with branded mock visuals. — source: src/components/blocks/feature-spotlight.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-spotlight.json [layout, motion]
- [Feature Tabs](https://dev.ononc.com/blocks): Interactive tabbed feature tour with autoplay, progress, and full keyboard navigation. — source: src/components/blocks/feature-tabs.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-tabs.json [composed, a11y]
- [Feature Sticky Split](https://dev.ononc.com/blocks): A sticky intro and CTA beside a scroll-revealed list of features. — source: src/components/blocks/feature-sticky.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-sticky.json [layout, motion]
- [Feature Highlights](https://dev.ononc.com/blocks): Understated hairline-divider grid of capabilities — server-safe, pure CSS hover. — source: src/components/blocks/feature-minimal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-minimal.json [layout]
- [Feature Media Cards](https://dev.ononc.com/blocks): Feature cards each topped with a branded mock visual and a staggered scroll reveal. — source: src/components/blocks/feature-media.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-media.json [layout, motion]
- [Feature Carousel](https://dev.ononc.com/blocks): Accessible scroll-snap pager of feature cards with bound-aware prev/next controls. — source: src/components/blocks/feature-carousel.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-carousel.json [pointer, a11y]
- [Feature Marquee](https://dev.ononc.com/blocks): Two opposing rows of capability pills that drift on a loop and pause on hover. — source: src/components/blocks/feature-marquee.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-marquee.json [composed, loop]
- [Feature Accordion](https://dev.ononc.com/blocks): Icon-led disclosure accordion that expands one capability at a time, inline. — source: src/components/blocks/feature-accordion.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-accordion.json [composed, a11y]
- [Feature Panels](https://dev.ononc.com/blocks): Interactive panels that expand on hover, focus, or tap to reveal each feature. — source: src/components/blocks/feature-panels.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-panels.json [pointer, a11y]
- [Feature Checklist](https://dev.ononc.com/blocks): Server-safe 'everything included' section of grouped checkmark columns. — source: src/components/blocks/feature-checklist.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/feature-checklist.json [layout]
- [Steps](https://dev.ononc.com/blocks): Numbered how-it-works sequence with a connector line. — source: src/components/blocks/steps-block.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-block.json [layout]
- [Steps Horizontal](https://dev.ononc.com/blocks): Refined horizontal flow with gradient-ringed icon nodes and a connector. — source: src/components/blocks/steps-horizontal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-horizontal.json [layout, responsive]
- [Steps Vertical](https://dev.ononc.com/blocks): Vertical sequence joined by a gradient rail with icon nodes. — source: src/components/blocks/steps-vertical.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-vertical.json [layout]
- [Steps Cards](https://dev.ononc.com/blocks): Numbered cards with ghost numerals and chevron connectors that lift on hover. — source: src/components/blocks/steps-cards.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-cards.json [layout, pointer]
- [Steps Alternating](https://dev.ononc.com/blocks): Center-rail timeline whose cards zigzag left and right on desktop. — source: src/components/blocks/steps-alternating.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-alternating.json [layout]
- [Steps Progress](https://dev.ononc.com/blocks): Vertical timeline whose gradient rail fills and nodes light up on scroll. — source: src/components/blocks/steps-progress.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-progress.json [motion, scroll]
- [Steps Interactive](https://dev.ononc.com/blocks): Keyboard-accessible tablist walkthrough driving an animated detail panel. — source: src/components/blocks/steps-interactive.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-interactive.json [a11y, motion]
- [Steps Sticky](https://dev.ononc.com/blocks): Scroll-linked walkthrough: a sticky index tracks the step you're reading. — source: src/components/blocks/steps-sticky.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-sticky.json [motion, scroll]
- [Steps Accordion](https://dev.ononc.com/blocks): Expandable steps with a proper disclosure pattern; one open at a time. — source: src/components/blocks/steps-accordion.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-accordion.json [a11y, composed]
- [Steps Carousel](https://dev.ononc.com/blocks): Guided one-at-a-time walkthrough with a progress bar, counter, and arrow keys. — source: src/components/blocks/steps-carousel.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-carousel.json [a11y, composed]
- [Steps Editorial](https://dev.ononc.com/blocks): Typography-forward sequence with oversized gradient numerals and hairline rules. — source: src/components/blocks/steps-editorial.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-editorial.json [layout]
- [Steps Rings](https://dev.ononc.com/blocks): Circular progress rings that sweep from empty to full as they scroll into view. — source: src/components/blocks/steps-rings.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-rings.json [motion, scroll]
- [Steps Roadmap](https://dev.ononc.com/blocks): Horizontal roadmap with milestone nodes and cards alternating above and below the axis. — source: src/components/blocks/steps-roadmap.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-roadmap.json [layout, responsive]
- [Steps Checklist](https://dev.ononc.com/blocks): Interactive getting-started checklist with toggleable items and a live progress meter. — source: src/components/blocks/steps-checklist.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-checklist.json [a11y, form]
- [Steps Grid](https://dev.ononc.com/blocks): Two-column matrix of steps with gradient numerals and hairline dividers. — source: src/components/blocks/steps-grid.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-grid.json [layout]
- [Steps Wizard](https://dev.ononc.com/blocks): Guided Back/Continue flow with a numbered stepper and completion checks. — source: src/components/blocks/steps-wizard.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-wizard.json [a11y, composed]
- [Steps Flow](https://dev.ononc.com/blocks): Compact process diagram of arrow-connected chips resolving into an outcome. — source: src/components/blocks/steps-flow.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-flow.json [layout, responsive]
- [Steps Code](https://dev.ononc.com/blocks): Developer quickstart pairing each step with a copyable terminal snippet. — source: src/components/blocks/steps-code.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-code.json [composed, form]
- [Steps Tabs](https://dev.ononc.com/blocks): Horizontal tablist of steps with a sliding indicator and content panels. — source: src/components/blocks/steps-tabs.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/steps-tabs.json [a11y, motion]
- [Stats Band](https://dev.ononc.com/blocks): Headline metrics that count up on view. — source: src/components/blocks/stats-band.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/stats-band.json [composed, scroll]
- [Pricing](https://dev.ononc.com/blocks): Three comparable tiers with a highlighted plan. — source: src/components/blocks/pricing.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing.json [layout]
- [Pricing — Billing Toggle](https://dev.ononc.com/blocks): Three tiers with a Monthly/Annual switch; prices tween between periods. — source: src/components/blocks/pricing-toggle.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-toggle.json [composed, motion]
- [Pricing — Usage Calculator](https://dev.ononc.com/blocks): Pay-as-you-grow calculator: drag the slider to price your team by seats. — source: src/components/blocks/pricing-slider.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-slider.json [composed, a11y]
- [Pricing — Spotlight](https://dev.ononc.com/blocks): A single conversion-focused plan with a gradient glow and trust signals. — source: src/components/blocks/pricing-spotlight.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-spotlight.json [composed, motion]
- [Pricing — Compact Rows](https://dev.ononc.com/blocks): Horizontally stacked plan rows with inline feature chips for dense pages. — source: src/components/blocks/pricing-rows.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-rows.json [layout]
- [Pricing — Plan Selector](https://dev.ononc.com/blocks): An accessible radiogroup of selectable plans with a live summary and CTA. — source: src/components/blocks/pricing-selector.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-selector.json [composed, a11y]
- [Pricing — Feature Matrix](https://dev.ononc.com/blocks): Full comparison matrix with per-plan prices, grouped features, and CTAs. — source: src/components/blocks/pricing-table.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-table.json [layout, a11y]
- [Pricing — Audience Tabs](https://dev.ononc.com/blocks): Switch the whole plan set by audience behind an accessible tablist. — source: src/components/blocks/pricing-tabs.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-tabs.json [composed, a11y]
- [Pricing — Build Your Plan](https://dev.ononc.com/blocks): A base plan plus toggleable add-ons with a live, animated running total. — source: src/components/blocks/pricing-addons.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-addons.json [composed, motion]
- [Pricing — Free vs Pro](https://dev.ononc.com/blocks): A focused two-plan layout contrasting a free tier with a highlighted Pro. — source: src/components/blocks/pricing-duo.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-duo.json [layout]
- [Pricing — Credit Packs](https://dev.ononc.com/blocks): One-time credit packs with bonus credits and an effective per-credit price. — source: src/components/blocks/pricing-credits.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-credits.json [layout]
- [Pricing — Currency Switcher](https://dev.ononc.com/blocks): Three tiers with a currency switcher that converts and tweens prices. — source: src/components/blocks/pricing-currency.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-currency.json [composed, motion]
- [Pricing — Enterprise Band](https://dev.ononc.com/blocks): Self-serve tiers above a full-width Enterprise contact band with a gradient wash. — source: src/components/blocks/pricing-enterprise.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-enterprise.json [layout]
- [Pricing — Minimal](https://dev.ononc.com/blocks): Understated hairline-divider pricing with no boxed cards and text-link CTAs. — source: src/components/blocks/pricing-minimal.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-minimal.json [layout]
- [Pricing — Metered Usage](https://dev.ononc.com/blocks): A transparent metered rate schedule: a base fee plus per-unit tier tables. — source: src/components/blocks/pricing-metered.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-metered.json [layout]
- [Pricing — Highlight Podium](https://dev.ononc.com/blocks): An asymmetric 3-up with an enlarged, gradient-highlighted recommended plan. — source: src/components/blocks/pricing-highlight.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-highlight.json [layout]
- [Pricing — Tiers & FAQ](https://dev.ononc.com/blocks): Compact tiers above an integrated Pricing FAQ built on the Accordion. — source: src/components/blocks/pricing-faq.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-faq.json [composed, a11y]
- [Pricing — Editorial Split](https://dev.ononc.com/blocks): A two-column split: value-prop copy beside a single highlighted price card. — source: src/components/blocks/pricing-split.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-split.json [layout]
- [Pricing — Free Trial Band](https://dev.ononc.com/blocks): A conversion-focused trial band with benefit chips, a CTA, and the post-trial price. — source: src/components/blocks/pricing-trial.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-trial.json [composed]
- [Pricing — Pay What You Want](https://dev.ononc.com/blocks): Preset amount chips plus a custom amount input that drive the CTA. — source: src/components/blocks/pricing-flexible.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-flexible.json [composed, a11y]
- [Pricing — Tier Slider](https://dev.ononc.com/blocks): A slider that snaps across named tiers with a swapping, animated detail panel. — source: src/components/blocks/pricing-tier-slider.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-tier-slider.json [composed, motion]
- [Pricing — Compare & Toggle](https://dev.ononc.com/blocks): A comparison matrix with a Monthly/Annual switch that tweens the header prices. — source: src/components/blocks/pricing-compare-toggle.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-compare-toggle.json [composed, motion]
- [Pricing — Annual Savings](https://dev.ononc.com/blocks): Annual cards with the monthly price struck through and a 'Save $X/yr' badge. — source: src/components/blocks/pricing-savings.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-savings.json [layout]
- [Pricing — Promo Code](https://dev.ononc.com/blocks): Cards plus a promo-code field that discounts every plan with an animated drop. — source: src/components/blocks/pricing-promo.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-promo.json [composed, a11y]
- [Pricing — One-Time License](https://dev.ononc.com/blocks): Perpetual one-time license tiers by seat scope, with a year of updates included. — source: src/components/blocks/pricing-onetime.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-onetime.json [layout]
- [Pricing — Bundle & Save](https://dev.ononc.com/blocks): Individual items combined into a discounted bundle with a 'Save $X' callout. — source: src/components/blocks/pricing-bundle.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/pricing-bundle.json [layout]
- [Testimonials](https://dev.ononc.com/blocks): Opposing marquee rows of quote cards. — source: src/components/blocks/testimonials.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/testimonials.json [composed, loop]
- [FAQ](https://dev.ononc.com/blocks): Frequently-asked questions built on the Accordion. — source: src/components/blocks/faq-block.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/faq-block.json [composed, a11y]
- [Newsletter](https://dev.ononc.com/blocks): Subscribe form with validation (front-end only). — source: src/components/blocks/newsletter-block.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/newsletter-block.json [composed, form]
- [Comparison Table](https://dev.ononc.com/blocks): Feature matrix comparing plans with a highlighted column. — source: src/components/blocks/comparison-table.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/comparison-table.json [layout]
- [Timeline](https://dev.ononc.com/blocks): A vertical rail-and-node timeline of milestones. — source: src/components/blocks/timeline.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/timeline.json [layout]
- [Banner](https://dev.ononc.com/blocks): Dismissible announcement bar with a CTA. — source: src/components/blocks/banner-block.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/banner-block.json [composed]
- [Team Grid](https://dev.ononc.com/blocks): Responsive grid of team member cards with avatars. — source: src/components/blocks/team-grid.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/team-grid.json [layout]
- [CTA Section](https://dev.ononc.com/blocks): Closing call-to-action over an animated mesh. — source: src/components/blocks/cta-section.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/cta-section.json [composed]
- [Footer](https://dev.ononc.com/blocks): Footer with brand, real navigation links, and an optional socials row. — source: src/components/blocks/footer-block.tsx — install: npx shadcn@latest add https://dev.ononc.com/r/footer-block.json [layout]