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

> This file inlines the full source of all 308 components. Each fenced block is the exact contents of the file at the given path.

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

### Flow Field
Particles drift along an invisible flow field, leaving glowing trails.
URL: https://dev.ononc.com/backgrounds/flow-field
Path: src/components/backgrounds/flow-field.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface FlowFieldProps extends HTMLAttributes<HTMLDivElement> {
  /** Approx. particles per 100k px² (capped). */
  density?: number;
  /** Trail colors as "r,g,b" (cycled per particle). */
  colors?: string[];
  children?: ReactNode;
}

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  life: number;
  color: string;
}

interface State {
  ps: Particle[];
  pointer: { x: number; y: number; inside: boolean };
}

export function FlowField({
  className,
  density = 6,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: FlowFieldProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const count = Math.max(
        80,
        Math.min(460, Math.round(((width * height) / 100000) * density * 10)),
      );
      const spawn = (): Particle => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: 0,
        vy: 0,
        life: 60 + Math.random() * 240,
        color: colors[Math.floor(Math.random() * colors.length)],
      });
      return {
        ps: Array.from({ length: count }, spawn),
        pointer: { x: 0, y: 0, inside: false },
      };
    },
    draw: ({ ctx, width, height }, state, t) => {
      // Fade prior frame for silky trails (instead of clearing).
      ctx.fillStyle = "rgba(6,7,13,0.07)";
      ctx.fillRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      ctx.lineWidth = 1.1;

      const { ps, pointer } = state;
      for (const p of ps) {
        // Flow angle from layered sine "noise".
        const angle =
          (Math.sin(p.x * 0.0022 + t * 0.25) +
            Math.sin(p.y * 0.0027 - t * 0.2) +
            Math.sin((p.x + p.y) * 0.0016 + t * 0.12)) *
          Math.PI;
        p.vx += Math.cos(angle) * 0.08;
        p.vy += Math.sin(angle) * 0.08;

        if (pointer.inside) {
          const dx = p.x - pointer.x;
          const dy = p.y - pointer.y;
          const d2 = dx * dx + dy * dy;
          if (d2 < 160 * 160 && d2 > 1) {
            const f = 22 / d2;
            p.vx += dx * f;
            p.vy += dy * f;
          }
        }

        p.vx *= 0.93;
        p.vy *= 0.93;
        const nx = p.x + p.vx;
        const ny = p.y + p.vy;

        ctx.strokeStyle = `rgba(${p.color},0.5)`;
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(nx, ny);
        ctx.stroke();

        p.x = nx;
        p.y = ny;
        p.life -= 1;
        if (
          p.life <= 0 ||
          p.x < -20 ||
          p.x > width + 20 ||
          p.y < -20 ||
          p.y > height + 20
        ) {
          p.x = Math.random() * width;
          p.y = Math.random() * height;
          p.vx = 0;
          p.vy = 0;
          p.life = 60 + Math.random() * 240;
        }
      }
      ctx.globalCompositeOperation = "source-over";
    },
    onPointer: (state, x, y, inside) => {
      state.pointer.x = x;
      state.pointer.y = y;
      state.pointer.inside = inside;
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Aurora Ribbons
Luminous ribbons of light weave and drift like the aurora.
URL: https://dev.ononc.com/backgrounds/aurora-ribbons
Path: src/components/backgrounds/aurora-ribbons.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface AuroraRibbonsProps extends HTMLAttributes<HTMLDivElement> {
  /** Ribbon colors as "r,g,b" (back to front). */
  colors?: string[];
  children?: ReactNode;
}

interface Ribbon {
  color: string;
  yBase: number;
  amp: number;
  amp2: number;
  len: number;
  len2: number;
  speed: number;
  phase: number;
  thickness: number;
}

interface State {
  ribbons: Ribbon[];
}

export function AuroraRibbons({
  className,
  colors = ["139,92,246", "34,211,238", "244,114,182", "79,70,229"],
  children,
  ...props
}: AuroraRibbonsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const ribbons: Ribbon[] = colors.map((color, i) => ({
        color,
        yBase: height * (0.32 + i * 0.13),
        amp: 28 + i * 10,
        amp2: 12 + i * 6,
        len: width * (0.5 + i * 0.12),
        len2: width * (0.18 + i * 0.05),
        speed: 0.12 + i * 0.05,
        phase: i * 1.7,
        thickness: 60 + i * 18,
      }));
      return { ribbons };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";

      for (const r of state.ribbons) {
        const top: [number, number][] = [];
        const bottom: [number, number][] = [];
        for (let x = 0; x <= width; x += 12) {
          const wobble =
            Math.sin(x / r.len + t * r.speed + r.phase) * r.amp +
            Math.sin(x / r.len2 - t * r.speed * 1.7 + r.phase) * r.amp2;
          const y = r.yBase + wobble;
          const thick =
            r.thickness * (0.6 + 0.4 * Math.sin(x / (r.len * 0.7) + t * 0.3));
          top.push([x, y - thick / 2]);
          bottom.push([x, y + thick / 2]);
        }

        ctx.beginPath();
        ctx.moveTo(top[0][0], top[0][1]);
        for (const [x, y] of top) ctx.lineTo(x, y);
        for (let i = bottom.length - 1; i >= 0; i--)
          ctx.lineTo(bottom[i][0], bottom[i][1]);
        ctx.closePath();

        const grad = ctx.createLinearGradient(0, 0, width, 0);
        grad.addColorStop(0, `rgba(${r.color},0)`);
        grad.addColorStop(0.5, `rgba(${r.color},0.22)`);
        grad.addColorStop(1, `rgba(${r.color},0)`);
        ctx.fillStyle = grad;
        ctx.fill();
      }

      ctx.globalCompositeOperation = "source-over";
      // Vignette to seat the ribbons.
      const vg = ctx.createRadialGradient(
        width / 2,
        height / 2,
        0,
        width / 2,
        height / 2,
        Math.max(width, height) * 0.7,
      );
      vg.addColorStop(0, "rgba(6,7,13,0)");
      vg.addColorStop(1, "rgba(6,7,13,0.55)");
      ctx.fillStyle = vg;
      ctx.fillRect(0, 0, width, height);
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Vortex
Particles swirl around a drifting center that follows your cursor.
URL: https://dev.ononc.com/backgrounds/vortex
Path: src/components/backgrounds/vortex.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface VortexProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of orbiting particles. */
  count?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  color: string;
}

interface State {
  ps: Particle[];
  pointer: { x: number; y: number; inside: boolean };
}

export function Vortex({
  className,
  count = 240,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: VortexProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const ps: Particle[] = Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: 0,
        vy: 0,
        color: colors[Math.floor(Math.random() * colors.length)],
      }));
      return { ps, pointer: { x: 0, y: 0, inside: false } };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.fillStyle = "rgba(6,7,13,0.09)";
      ctx.fillRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      ctx.lineWidth = 1.1;

      const cx = state.pointer.inside
        ? state.pointer.x
        : width / 2 + Math.sin(t * 0.2) * width * 0.12;
      const cy = state.pointer.inside
        ? state.pointer.y
        : height / 2 + Math.cos(t * 0.24) * height * 0.12;
      const maxR = Math.hypot(width, height) * 0.6;

      for (const p of state.ps) {
        const dx = p.x - cx;
        const dy = p.y - cy;
        const r = Math.hypot(dx, dy) || 0.001;
        // Tangential (swirl) + gentle radial correction toward a mid band.
        const tx = -dy / r;
        const ty = dx / r;
        const swirl = 1.7;
        p.vx += tx * swirl * 0.12;
        p.vy += ty * swirl * 0.12;
        const pull = (r - height * 0.32) * 0.0006;
        p.vx -= (dx / r) * pull * 40;
        p.vy -= (dy / r) * pull * 40;
        p.vx *= 0.95;
        p.vy *= 0.95;

        const nx = p.x + p.vx;
        const ny = p.y + p.vy;
        ctx.strokeStyle = `rgba(${p.color},0.55)`;
        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(nx, ny);
        ctx.stroke();
        p.x = nx;
        p.y = ny;

        if (r > maxR) {
          const a = Math.random() * Math.PI * 2;
          const rr = height * (0.2 + Math.random() * 0.25);
          p.x = cx + Math.cos(a) * rr;
          p.y = cy + Math.sin(a) * rr;
          p.vx = 0;
          p.vy = 0;
        }
      }
      ctx.globalCompositeOperation = "source-over";
    },
    onPointer: (state, x, y, inside) => {
      state.pointer.x = x;
      state.pointer.y = y;
      state.pointer.inside = inside;
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Grid Beams
Pulses of light race along the lines of a faint grid.
URL: https://dev.ononc.com/backgrounds/grid-beams
Path: src/components/backgrounds/grid-beams.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface GridBeamsProps extends HTMLAttributes<HTMLDivElement> {
  /** Grid cell size in pixels. */
  size?: number;
  /** Beam colors as "r,g,b". */
  colors?: string[];
  children?: ReactNode;
}

interface Beam {
  axis: "h" | "v";
  coord: number;
  pos: number;
  len: number;
  speed: number;
  color: string;
}

interface State {
  beams: Beam[];
  size: number;
}

export function GridBeams({
  className,
  size = 46,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: GridBeamsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const cols = Math.max(1, Math.floor(width / size));
      const rows = Math.max(1, Math.floor(height / size));
      const beamCount = Math.min(26, Math.max(8, Math.round((cols + rows) / 3)));
      const make = (): Beam => {
        const axis = Math.random() > 0.5 ? "h" : "v";
        const coord =
          axis === "h"
            ? Math.floor(Math.random() * (rows + 1)) * size
            : Math.floor(Math.random() * (cols + 1)) * size;
        const length = axis === "h" ? width : height;
        return {
          axis,
          coord,
          pos: Math.random() * length,
          len: 70 + Math.random() * 150,
          speed: 90 + Math.random() * 160,
          color: colors[Math.floor(Math.random() * colors.length)],
        };
      };
      return { beams: Array.from({ length: beamCount }, make), size };
    },
    draw: ({ ctx, width, height }, state, _t, dt) => {
      ctx.clearRect(0, 0, width, height);

      // Faint grid.
      ctx.strokeStyle = "rgba(255,255,255,0.045)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (let x = 0; x <= width; x += state.size) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
      }
      for (let y = 0; y <= height; y += state.size) {
        ctx.moveTo(0, y);
        ctx.lineTo(width, y);
      }
      ctx.stroke();

      // Travelling beams.
      ctx.globalCompositeOperation = "lighter";
      ctx.lineWidth = 2;
      for (const b of state.beams) {
        const length = b.axis === "h" ? width : height;
        b.pos += b.speed * dt;
        if (b.pos - b.len > length) b.pos = -b.len + Math.random() * 40;

        const headX = b.axis === "h" ? b.pos : b.coord;
        const headY = b.axis === "h" ? b.coord : b.pos;
        const tailX = b.axis === "h" ? b.pos - b.len : b.coord;
        const tailY = b.axis === "h" ? b.coord : b.pos - b.len;

        const grad = ctx.createLinearGradient(tailX, tailY, headX, headY);
        grad.addColorStop(0, `rgba(${b.color},0)`);
        grad.addColorStop(1, `rgba(${b.color},0.85)`);
        ctx.strokeStyle = grad;
        ctx.beginPath();
        ctx.moveTo(tailX, tailY);
        ctx.lineTo(headX, headY);
        ctx.stroke();

        ctx.fillStyle = `rgba(${b.color},0.95)`;
        ctx.beginPath();
        ctx.arc(headX, headY, 2.2, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Topographic Lines
Contour lines that morph like a living topographic map.
URL: https://dev.ononc.com/backgrounds/topographic-lines
Path: src/components/backgrounds/topographic-lines.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface TopographicLinesProps extends HTMLAttributes<HTMLDivElement> {
  /** Vertical gap between contour lines in pixels. */
  gap?: number;
  /** Line color as "r,g,b". */
  color?: string;
  /** Accent color (every 5th line) as "r,g,b". */
  accent?: string;
  children?: ReactNode;
}

interface State {
  gap: number;
}

export function TopographicLines({
  className,
  gap = 26,
  color = "150,160,255",
  accent = "94,234,255",
  children,
  ...props
}: TopographicLinesProps) {
  const ref = useCanvas<State>({
    init: () => ({ gap }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.lineWidth = 1.2;

      const lines = Math.ceil(height / state.gap) + 2;
      for (let i = 0; i < lines; i++) {
        const baseY = i * state.gap;
        ctx.beginPath();
        for (let x = 0; x <= width; x += 8) {
          const f =
            Math.sin(x * 0.006 + baseY * 0.01 + t * 0.3) * 18 +
            Math.sin(x * 0.003 - baseY * 0.014 - t * 0.22) * 14 +
            Math.sin(x * 0.011 + baseY * 0.006 + t * 0.15) * 6;
          const y = baseY + f;
          if (x === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        const isAccent = i % 5 === 0;
        ctx.strokeStyle = isAccent
          ? `rgba(${accent},0.32)`
          : `rgba(${color},0.16)`;
        ctx.stroke();
      }

      // Soft vignette for depth.
      const vg = ctx.createRadialGradient(
        width / 2,
        height / 2,
        0,
        width / 2,
        height / 2,
        Math.max(width, height) * 0.7,
      );
      vg.addColorStop(0, "rgba(6,7,13,0)");
      vg.addColorStop(1, "rgba(6,7,13,0.6)");
      ctx.fillStyle = vg;
      ctx.fillRect(0, 0, width, height);
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Embers
Warm embers rise and flicker out into the dark.
URL: https://dev.ononc.com/backgrounds/embers
Path: src/components/backgrounds/embers.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface EmbersProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of embers. */
  count?: number;
  /** Ember colors as "r,g,b" (warm by default). */
  colors?: string[];
  children?: ReactNode;
}

interface Ember {
  x: number;
  y: number;
  vy: number;
  drift: number;
  r: number;
  seed: number;
  life: number;
  maxLife: number;
  color: string;
}

interface State {
  embers: Ember[];
}

export function Embers({
  className,
  count = 90,
  colors = ["255,176,84", "255,138,76", "255,214,140"],
  children,
  ...props
}: EmbersProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const make = (seeded: boolean): Ember => ({
        x: Math.random() * width,
        y: seeded ? Math.random() * height : height + Math.random() * 40,
        vy: 0.3 + Math.random() * 0.9,
        drift: (Math.random() - 0.5) * 0.4,
        r: 1 + Math.random() * 2.4,
        seed: Math.random() * 1000,
        life: seeded ? Math.random() * 200 : 0,
        maxLife: 200 + Math.random() * 220,
        color: colors[Math.floor(Math.random() * colors.length)],
      });
      return { embers: Array.from({ length: count }, () => make(true)) };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.fillStyle = "rgba(6,7,13,0.18)";
      ctx.fillRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";

      for (const e of state.embers) {
        e.y -= e.vy;
        e.x += e.drift + Math.sin(t * 1.5 + e.seed) * 0.4;
        e.life += 1;

        const lifeT = e.life / e.maxLife;
        const flicker = 0.65 + 0.35 * Math.sin(t * 9 + e.seed);
        const alpha = Math.sin(Math.min(1, lifeT) * Math.PI) * flicker;

        if (alpha > 0.01) {
          const glow = ctx.createRadialGradient(e.x, e.y, 0, e.x, e.y, e.r * 4);
          glow.addColorStop(0, `rgba(${e.color},${alpha})`);
          glow.addColorStop(1, `rgba(${e.color},0)`);
          ctx.fillStyle = glow;
          ctx.beginPath();
          ctx.arc(e.x, e.y, e.r * 4, 0, Math.PI * 2);
          ctx.fill();
        }

        if (e.life >= e.maxLife || e.y < -10) {
          e.x = Math.random() * width;
          e.y = height + Math.random() * 30;
          e.life = 0;
          e.vy = 0.3 + Math.random() * 0.9;
          e.r = 1 + Math.random() * 2.4;
          e.color = colors[Math.floor(Math.random() * colors.length)];
        }
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Warp Stars
Stars streaking outward from the center like hyperspace.
URL: https://dev.ononc.com/backgrounds/warp-stars
Path: src/components/backgrounds/warp-stars.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface WarpStarsProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  color?: string;
  children?: ReactNode;
}

interface Star {
  angle: number;
  r: number;
  speed: number;
}

interface State {
  stars: Star[];
}

export function WarpStars({
  className,
  count = 150,
  color = "200,214,255",
  children,
  ...props
}: WarpStarsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const maxR = Math.hypot(width, height) / 2;
      const stars: Star[] = Array.from({ length: count }, () => ({
        angle: Math.random() * Math.PI * 2,
        r: Math.random() * maxR,
        speed: 0.6 + Math.random() * 1.6,
      }));
      return { stars };
    },
    draw: ({ ctx, width, height }, state) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;
      const maxR = Math.hypot(width, height) / 2;
      ctx.globalCompositeOperation = "lighter";

      for (const s of state.stars) {
        const oldR = s.r;
        s.r += s.speed * (s.r * 0.02 + 0.6);
        const cos = Math.cos(s.angle);
        const sin = Math.sin(s.angle);
        const alpha = Math.min(1, s.r / (maxR * 0.55));
        ctx.strokeStyle = `rgba(${color},${alpha * 0.9})`;
        ctx.lineWidth = Math.min(2.6, 0.4 + alpha * 2.4);
        ctx.beginPath();
        ctx.moveTo(cx + cos * oldR, cy + sin * oldR);
        ctx.lineTo(cx + cos * s.r, cy + sin * s.r);
        ctx.stroke();

        if (s.r > maxR) {
          s.r = Math.random() * 24;
          s.angle = Math.random() * Math.PI * 2;
          s.speed = 0.6 + Math.random() * 1.6;
        }
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Wave Interference
A dot field rippling from orbiting wave sources.
URL: https://dev.ononc.com/backgrounds/wave-interference
Path: src/components/backgrounds/wave-interference.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface WaveInterferenceProps extends HTMLAttributes<HTMLDivElement> {
  /** Dot grid spacing in pixels. */
  gap?: number;
  /** Dot color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface State {
  gap: number;
}

export function WaveInterference({
  className,
  gap = 18,
  color = "120,180,255",
  children,
  ...props
}: WaveInterferenceProps) {
  const ref = useCanvas<State>({
    init: () => ({ gap }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const g = state.gap;

      // Three slowly orbiting wave sources.
      const sources = [
        [width * (0.5 + 0.34 * Math.sin(t * 0.3)), height * (0.5 + 0.34 * Math.cos(t * 0.26))],
        [width * (0.5 + 0.32 * Math.sin(t * 0.22 + 2)), height * (0.5 + 0.3 * Math.cos(t * 0.34 + 1))],
        [width * (0.5 + 0.3 * Math.cos(t * 0.28 + 4)), height * (0.5 + 0.33 * Math.sin(t * 0.24 + 3))],
      ] as const;

      for (let y = g / 2; y < height; y += g) {
        for (let x = g / 2; x < width; x += g) {
          let v = 0;
          for (const [sx, sy] of sources) {
            v += Math.sin(Math.hypot(x - sx, y - sy) * 0.045 - t * 2.2);
          }
          const b = (v / sources.length + 1) / 2; // 0..1
          const r = 0.6 + b * b * 2.6;
          ctx.fillStyle = `rgba(${color},${0.08 + b * b * 0.6})`;
          ctx.beginPath();
          ctx.arc(x, y, r, 0, Math.PI * 2);
          ctx.fill();
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Bokeh
Soft, out-of-focus orbs of colored light drifting by.
URL: https://dev.ononc.com/backgrounds/bokeh
Path: src/components/backgrounds/bokeh.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface BokehProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Orb {
  x: number;
  y: number;
  r: number;
  vx: number;
  vy: number;
  alpha: number;
  color: string;
}

interface State {
  orbs: Orb[];
}

export function Bokeh({
  className,
  count = 22,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: BokehProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const orbs: Orb[] = Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        r: 16 + Math.random() * 64,
        vx: (Math.random() - 0.5) * 0.25,
        vy: (Math.random() - 0.5) * 0.25,
        alpha: 0.06 + Math.random() * 0.12,
        color: colors[Math.floor(Math.random() * colors.length)],
      }));
      return { orbs };
    },
    draw: ({ ctx, width, height }, state) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      for (const o of state.orbs) {
        o.x += o.vx;
        o.y += o.vy;
        if (o.x < -o.r) o.x = width + o.r;
        if (o.x > width + o.r) o.x = -o.r;
        if (o.y < -o.r) o.y = height + o.r;
        if (o.y > height + o.r) o.y = -o.r;

        const glow = ctx.createRadialGradient(o.x, o.y, 0, o.x, o.y, o.r);
        glow.addColorStop(0, `rgba(${o.color},${o.alpha})`);
        glow.addColorStop(0.7, `rgba(${o.color},${o.alpha * 0.5})`);
        glow.addColorStop(1, `rgba(${o.color},0)`);
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(o.x, o.y, o.r, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Fireflies
Glowing dots that wander and blink in the dark.
URL: https://dev.ononc.com/backgrounds/fireflies
Path: src/components/backgrounds/fireflies.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface FirefliesProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Fly {
  x: number;
  y: number;
  vx: number;
  vy: number;
  r: number;
  phase: number;
  color: string;
}

interface State {
  flies: Fly[];
}

export function Fireflies({
  className,
  count = 48,
  colors = ["190,255,150", "255,224,130", "150,234,255"],
  children,
  ...props
}: FirefliesProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const flies: Fly[] = Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: (Math.random() - 0.5) * 0.4,
        vy: (Math.random() - 0.5) * 0.4,
        r: 1 + Math.random() * 1.8,
        phase: Math.random() * Math.PI * 2,
        color: colors[Math.floor(Math.random() * colors.length)],
      }));
      return { flies };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      for (const f of state.flies) {
        f.vx += (Math.random() - 0.5) * 0.06;
        f.vy += (Math.random() - 0.5) * 0.06;
        f.vx = Math.max(-0.7, Math.min(0.7, f.vx));
        f.vy = Math.max(-0.7, Math.min(0.7, f.vy));
        f.x += f.vx;
        f.y += f.vy;
        if (f.x < 0) f.x = width;
        if (f.x > width) f.x = 0;
        if (f.y < 0) f.y = height;
        if (f.y > height) f.y = 0;

        const blink = 0.25 + 0.75 * (0.5 + 0.5 * Math.sin(t * 2.2 + f.phase));
        const glow = ctx.createRadialGradient(f.x, f.y, 0, f.x, f.y, f.r * 6);
        glow.addColorStop(0, `rgba(${f.color},${blink})`);
        glow.addColorStop(1, `rgba(${f.color},0)`);
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(f.x, f.y, f.r * 6, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Hex Grid
A honeycomb grid that lights up near the cursor.
URL: https://dev.ononc.com/backgrounds/hex-grid
Path: src/components/backgrounds/hex-grid.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface HexGridProps extends HTMLAttributes<HTMLDivElement> {
  /** Hexagon radius in pixels. */
  size?: number;
  /** Cell color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface Cell {
  x: number;
  y: number;
}
interface State {
  cells: Cell[];
  size: number;
  pointer: { x: number; y: number; inside: boolean };
}

export function HexGrid({
  className,
  size = 26,
  color = "139,124,255",
  children,
  ...props
}: HexGridProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const cells: Cell[] = [];
      const hw = Math.sqrt(3) * size;
      const vs = 1.5 * size;
      const rows = Math.ceil(height / vs) + 1;
      const cols = Math.ceil(width / hw) + 1;
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          cells.push({ x: c * hw + (r % 2) * (hw / 2), y: r * vs });
        }
      }
      return { cells, size, pointer: { x: 0, y: 0, inside: false } };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.lineWidth = 1;
      const s = state.size;

      for (const cell of state.cells) {
        // Ambient ring wave from the center + optional cursor highlight.
        const dwave = Math.hypot(cell.x - width / 2, cell.y - height / 2);
        let alpha = 0.05 + 0.06 * (0.5 + 0.5 * Math.sin(dwave * 0.02 - t * 1.6));
        if (state.pointer.inside) {
          const d = Math.hypot(cell.x - state.pointer.x, cell.y - state.pointer.y);
          if (d < 160) alpha += (1 - d / 160) * 0.6;
        }

        ctx.strokeStyle = `rgba(${color},${alpha})`;
        ctx.beginPath();
        for (let i = 0; i < 6; i++) {
          const a = (Math.PI / 180) * (60 * i - 90);
          const px = cell.x + s * Math.cos(a);
          const py = cell.y + s * Math.sin(a);
          if (i === 0) ctx.moveTo(px, py);
          else ctx.lineTo(px, py);
        }
        ctx.closePath();
        ctx.stroke();
      }
    },
    onPointer: (state, x, y, inside) => {
      state.pointer.x = x;
      state.pointer.y = y;
      state.pointer.inside = inside;
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Snowfall
Depth-layered snow drifting gently downward.
URL: https://dev.ononc.com/backgrounds/snowfall
Path: src/components/backgrounds/snowfall.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface SnowfallProps extends HTMLAttributes<HTMLDivElement> {
  /** Approx. flakes per 100k px² (capped). */
  density?: number;
  children?: ReactNode;
}

interface Flake {
  x: number;
  y: number;
  r: number;
  vy: number;
  sway: number;
  phase: number;
}

interface State {
  flakes: Flake[];
}

export function Snowfall({
  className,
  density = 9,
  children,
  ...props
}: SnowfallProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const count = Math.max(
        30,
        Math.min(220, Math.round(((width * height) / 100000) * density)),
      );
      const flakes: Flake[] = Array.from({ length: count }, () => {
        const r = 0.8 + Math.random() * 2.8;
        return {
          x: Math.random() * width,
          y: Math.random() * height,
          r,
          vy: 0.3 + r * 0.35,
          sway: 0.3 + Math.random() * 0.9,
          phase: Math.random() * Math.PI * 2,
        };
      });
      return { flakes };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      for (const f of state.flakes) {
        f.y += f.vy;
        f.x += Math.sin(t * 0.8 + f.phase) * f.sway;
        if (f.y > height + 4) {
          f.y = -4;
          f.x = Math.random() * width;
        }
        ctx.fillStyle = `rgba(235,240,255,${0.35 + f.r * 0.14})`;
        ctx.beginPath();
        ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
        ctx.fill();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Metaballs
Soft blobs of color drift and merge like a lava lamp.
URL: https://dev.ononc.com/backgrounds/metaballs
Path: src/components/backgrounds/metaballs.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface MetaballsProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Ball {
  x: number;
  y: number;
  vx: number;
  vy: number;
  r: number;
  color: string;
}

interface State {
  balls: Ball[];
}

export function Metaballs({
  className,
  count = 8,
  colors = ["139,92,246", "34,211,238", "244,114,182"],
  children,
  ...props
}: MetaballsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const balls: Ball[] = Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: (Math.random() - 0.5) * 0.9,
        vy: (Math.random() - 0.5) * 0.9,
        r: 60 + Math.random() * 90,
        color: colors[Math.floor(Math.random() * colors.length)],
      }));
      return { balls };
    },
    draw: ({ ctx, width, height }, state) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      for (const b of state.balls) {
        b.x += b.vx;
        b.y += b.vy;
        if (b.x < -b.r * 0.5 || b.x > width + b.r * 0.5) b.vx *= -1;
        if (b.y < -b.r * 0.5 || b.y > height + b.r * 0.5) b.vy *= -1;

        const glow = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.r);
        glow.addColorStop(0, `rgba(${b.color},0.5)`);
        glow.addColorStop(0.5, `rgba(${b.color},0.18)`);
        glow.addColorStop(1, `rgba(${b.color},0)`);
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full blur-[6px]" />
      {children}
    </div>
  );
}
```

### Orbiting Dots
Concentric rings of dots orbiting a glowing core.
URL: https://dev.ononc.com/backgrounds/orbiting-dots
Path: src/components/backgrounds/orbiting-dots.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface OrbitingDotsProps extends HTMLAttributes<HTMLDivElement> {
  colors?: string[];
  children?: ReactNode;
}

interface Ring {
  radius: number;
  count: number;
  speed: number;
  phase: number;
  color: string;
  dotR: number;
}

interface State {
  rings: Ring[];
}

export function OrbitingDots({
  className,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: OrbitingDotsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const maxR = Math.min(width, height) * 0.44;
      const ringCount = 6;
      const rings: Ring[] = Array.from({ length: ringCount }, (_, i) => {
        const radius = maxR * ((i + 1) / ringCount);
        return {
          radius,
          count: 4 + i * 3,
          speed: (0.15 + i * 0.05) * (i % 2 === 0 ? 1 : -1),
          phase: i * 0.7,
          color: colors[i % colors.length],
          dotR: 2.6 - i * 0.18,
        };
      });
      return { rings };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;

      // Center glow.
      const core = ctx.createRadialGradient(cx, cy, 0, cx, cy, 26);
      core.addColorStop(0, "rgba(196,181,253,0.9)");
      core.addColorStop(1, "rgba(196,181,253,0)");
      ctx.fillStyle = core;
      ctx.beginPath();
      ctx.arc(cx, cy, 26, 0, Math.PI * 2);
      ctx.fill();

      for (const ring of state.rings) {
        ctx.strokeStyle = `rgba(${ring.color},0.1)`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(cx, cy, ring.radius, 0, Math.PI * 2);
        ctx.stroke();

        for (let i = 0; i < ring.count; i++) {
          const a = ring.phase + t * ring.speed + (i * Math.PI * 2) / ring.count;
          const x = cx + Math.cos(a) * ring.radius;
          const y = cy + Math.sin(a) * ring.radius;
          ctx.fillStyle = `rgba(${ring.color},0.85)`;
          ctx.beginPath();
          ctx.arc(x, y, Math.max(1, ring.dotR), 0, Math.PI * 2);
          ctx.fill();
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### DNA Helix
A rotating double helix of paired strands and rungs.
URL: https://dev.ononc.com/backgrounds/dna-helix
Path: src/components/backgrounds/dna-helix.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface DnaHelixProps extends HTMLAttributes<HTMLDivElement> {
  /** The two strand colors as "r,g,b". */
  colors?: [string, string];
  children?: ReactNode;
}

interface State {
  empty: true;
}

export function DnaHelix({
  className,
  colors = ["139,124,255", "94,234,255"],
  children,
  ...props
}: DnaHelixProps) {
  const ref = useCanvas<State>({
    init: () => ({ empty: true }),
    draw: ({ ctx, width, height }, _state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cy = height / 2;
      const amp = height * 0.3;
      const freq = 0.016;
      const speed = 1.3;
      const [c1, c2] = colors;
      const step = 22;

      for (let x = 0; x <= width; x += step) {
        const ph = x * freq + t * speed;
        const y1 = cy + Math.sin(ph) * amp;
        const y2 = cy + Math.sin(ph + Math.PI) * amp;
        const depth1 = (Math.cos(ph) + 1) / 2; // 0 (back) .. 1 (front)
        const depth2 = 1 - depth1;

        // Rung connecting the strands.
        ctx.strokeStyle = `rgba(180,190,220,${0.06 + Math.min(depth1, depth2) * 0.18})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(x, y1);
        ctx.lineTo(x, y2);
        ctx.stroke();

        // Strand nodes (front drawn larger / brighter).
        ctx.fillStyle = `rgba(${c1},${0.35 + depth1 * 0.6})`;
        ctx.beginPath();
        ctx.arc(x, y1, 1.5 + depth1 * 3.5, 0, Math.PI * 2);
        ctx.fill();

        ctx.fillStyle = `rgba(${c2},${0.35 + depth2 * 0.6})`;
        ctx.beginPath();
        ctx.arc(x, y2, 1.5 + depth2 * 3.5, 0, Math.PI * 2);
        ctx.fill();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Radar Sweep
A rotating sweep lighting up blips over concentric rings.
URL: https://dev.ononc.com/backgrounds/radar-sweep
Path: src/components/backgrounds/radar-sweep.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface RadarSweepProps extends HTMLAttributes<HTMLDivElement> {
  /** Sweep color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface Blip {
  angle: number;
  dist: number;
}
interface State {
  blips: Blip[];
}

const TAU = Math.PI * 2;

export function RadarSweep({
  className,
  color = "94,234,255",
  children,
  ...props
}: RadarSweepProps) {
  const ref = useCanvas<State>({
    init: () => ({
      blips: Array.from({ length: 7 }, () => ({
        angle: Math.random() * TAU,
        dist: 0.25 + Math.random() * 0.7,
      })),
    }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;
      const maxR = Math.min(width, height) * 0.48;

      // Concentric rings + crosshair.
      ctx.strokeStyle = `rgba(${color},0.16)`;
      ctx.lineWidth = 1;
      for (let i = 1; i <= 4; i++) {
        ctx.beginPath();
        ctx.arc(cx, cy, (maxR * i) / 4, 0, TAU);
        ctx.stroke();
      }
      ctx.beginPath();
      ctx.moveTo(cx - maxR, cy);
      ctx.lineTo(cx + maxR, cy);
      ctx.moveTo(cx, cy - maxR);
      ctx.lineTo(cx, cy + maxR);
      ctx.stroke();

      const sweep = (t * 0.9) % TAU;

      // Fading trailing wedge.
      const steps = 16;
      for (let k = 0; k < steps; k++) {
        const a = sweep - k * 0.055;
        ctx.fillStyle = `rgba(${color},${(1 - k / steps) * 0.12})`;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, maxR, a - 0.06, a);
        ctx.closePath();
        ctx.fill();
      }
      // Leading edge.
      ctx.strokeStyle = `rgba(${color},0.7)`;
      ctx.lineWidth = 1.5;
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.lineTo(cx + Math.cos(sweep) * maxR, cy + Math.sin(sweep) * maxR);
      ctx.stroke();

      // Blips light up as the sweep passes.
      for (const b of state.blips) {
        const diff = (sweep - b.angle + TAU) % TAU;
        const bright = Math.max(0, 1 - diff / 0.9);
        if (bright <= 0.02) continue;
        const x = cx + Math.cos(b.angle) * maxR * b.dist;
        const y = cy + Math.sin(b.angle) * maxR * b.dist;
        ctx.fillStyle = `rgba(${color},${bright})`;
        ctx.beginPath();
        ctx.arc(x, y, 2 + bright * 2.5, 0, TAU);
        ctx.fill();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Halftone
A halftone dot grid swelling with a moving wave.
URL: https://dev.ononc.com/backgrounds/halftone
Path: src/components/backgrounds/halftone.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface HalftoneProps extends HTMLAttributes<HTMLDivElement> {
  /** Dot grid spacing in pixels. */
  gap?: number;
  /** Dot color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface State {
  gap: number;
}

export function Halftone({
  className,
  gap = 16,
  color = "150,160,255",
  children,
  ...props
}: HalftoneProps) {
  const ref = useCanvas<State>({
    init: () => ({ gap }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const g = state.gap;
      const maxR = g * 0.5;
      for (let y = g / 2; y < height; y += g) {
        for (let x = g / 2; x < width; x += g) {
          const wave =
            0.5 +
            0.5 *
              Math.sin(x * 0.02 + y * 0.014 - t * 1.8) *
              Math.cos(y * 0.02 - t * 0.6);
          const r = wave * maxR;
          if (r < 0.3) continue;
          ctx.fillStyle = `rgba(${color},${0.18 + wave * 0.5})`;
          ctx.beginPath();
          ctx.arc(x, y, r, 0, Math.PI * 2);
          ctx.fill();
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Rain
Angled rain streaks falling with a sense of depth.
URL: https://dev.ononc.com/backgrounds/rain
Path: src/components/backgrounds/rain.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface RainProps extends HTMLAttributes<HTMLDivElement> {
  /** Approx. drops per 100k px² (capped). */
  density?: number;
  /** Streak color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface Drop {
  x: number;
  y: number;
  len: number;
  vy: number;
  alpha: number;
}

interface State {
  drops: Drop[];
}

const SLANT = 0.18;

export function Rain({
  className,
  density = 14,
  color = "150,180,255",
  children,
  ...props
}: RainProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const count = Math.max(
        40,
        Math.min(320, Math.round(((width * height) / 100000) * density)),
      );
      const make = (): Drop => {
        const depth = Math.random();
        return {
          x: Math.random() * (width + 80) - 40,
          y: Math.random() * height,
          len: 8 + depth * 18,
          vy: 7 + depth * 11,
          alpha: 0.1 + depth * 0.35,
        };
      };
      return { drops: Array.from({ length: count }, make) };
    },
    draw: ({ ctx, width, height }, state) => {
      ctx.clearRect(0, 0, width, height);
      ctx.lineCap = "round";
      for (const d of state.drops) {
        d.y += d.vy;
        d.x += d.vy * SLANT;
        if (d.y > height + d.len) {
          d.y = -d.len;
          d.x = Math.random() * (width + 80) - 40;
        }
        ctx.strokeStyle = `rgba(${color},${d.alpha})`;
        ctx.lineWidth = d.len > 18 ? 1.6 : 1;
        ctx.beginPath();
        ctx.moveTo(d.x, d.y);
        ctx.lineTo(d.x - d.len * SLANT, d.y - d.len);
        ctx.stroke();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Spiral Galaxy
Spiral arms of stars rotating around a glowing core.
URL: https://dev.ononc.com/backgrounds/spiral-galaxy
Path: src/components/backgrounds/spiral-galaxy.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface SpiralGalaxyProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of star dots. */
  count?: number;
  /** Number of spiral arms. */
  arms?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Star {
  r: number;
  baseAngle: number;
  size: number;
  color: string;
}

interface State {
  stars: Star[];
}

export function SpiralGalaxy({
  className,
  count = 420,
  arms = 3,
  colors = ["196,181,253", "94,234,255", "244,114,182"],
  children,
  ...props
}: SpiralGalaxyProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const maxR = Math.min(width, height) * 0.48;
      const turns = 2.4;
      const stars: Star[] = Array.from({ length: count }, (_, j) => {
        const f = j / count;
        const arm = j % arms;
        return {
          r: f * maxR + (Math.random() - 0.5) * 10,
          baseAngle:
            f * turns * Math.PI * 2 +
            arm * ((Math.PI * 2) / arms) +
            (Math.random() - 0.5) * 0.35,
          size: 0.5 + (1 - f) * 1.9,
          color: colors[arm % colors.length],
        };
      });
      return { stars };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;
      const maxR = Math.min(width, height) * 0.48;
      ctx.globalCompositeOperation = "lighter";

      // Glowing core.
      const core = ctx.createRadialGradient(cx, cy, 0, cx, cy, maxR * 0.4);
      core.addColorStop(0, "rgba(220,210,255,0.5)");
      core.addColorStop(1, "rgba(220,210,255,0)");
      ctx.fillStyle = core;
      ctx.beginPath();
      ctx.arc(cx, cy, maxR * 0.4, 0, Math.PI * 2);
      ctx.fill();

      for (const s of state.stars) {
        // Inner stars rotate faster (differential rotation).
        const angle = s.baseAngle + t * (0.32 - (s.r / maxR) * 0.2);
        const x = cx + Math.cos(angle) * s.r;
        const y = cy + Math.sin(angle) * s.r;
        const alpha = 0.25 + (1 - s.r / maxR) * 0.7;
        ctx.fillStyle = `rgba(${s.color},${alpha})`;
        ctx.beginPath();
        ctx.arc(x, y, s.size, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Neon Tunnel
Concentric neon frames zooming outward like a tunnel.
URL: https://dev.ononc.com/backgrounds/neon-tunnel
Path: src/components/backgrounds/neon-tunnel.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface NeonTunnelProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of concentric layers. */
  layers?: number;
  /** Inner and outer colors as [r,g,b] triples. */
  from?: [number, number, number];
  to?: [number, number, number];
  children?: ReactNode;
}

interface State {
  layers: number;
}

export function NeonTunnel({
  className,
  layers = 16,
  from = [139, 124, 255],
  to = [94, 234, 255],
  children,
  ...props
}: NeonTunnelProps) {
  const ref = useCanvas<State>({
    init: () => ({ layers }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;
      const maxR = Math.hypot(width, height) / 2;
      ctx.globalCompositeOperation = "lighter";

      for (let k = 0; k < state.layers; k++) {
        const progress = (t * 0.22 + k / state.layers) % 1;
        const r = progress * maxR;
        const fadeIn = Math.min(1, progress * 5);
        const fadeOut = 1 - progress;
        const alpha = fadeIn * fadeOut * 0.7;
        if (alpha <= 0.01) continue;

        const cr = Math.round(from[0] + (to[0] - from[0]) * progress);
        const cg = Math.round(from[1] + (to[1] - from[1]) * progress);
        const cb = Math.round(from[2] + (to[2] - from[2]) * progress);

        ctx.save();
        ctx.translate(cx, cy);
        ctx.rotate(progress * 0.8 + t * 0.05);
        ctx.strokeStyle = `rgba(${cr},${cg},${cb},${alpha})`;
        ctx.lineWidth = 1 + progress * 2;
        ctx.strokeRect(-r, -r, r * 2, r * 2);
        ctx.restore();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Lightning
Branching bolts strike and fade with an electric glow.
URL: https://dev.ononc.com/backgrounds/lightning
Path: src/components/backgrounds/lightning.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface LightningProps extends HTMLAttributes<HTMLDivElement> {
  /** Bolt glow color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

type Point = [number, number];

interface Bolt {
  segs: Point[][];
  life: number;
  max: number;
}

interface State {
  bolts: Bolt[];
  timer: number;
}

function jaggedLine(x1: number, y1: number, x2: number, y2: number): Point[] {
  let pts: Point[] = [
    [x1, y1],
    [x2, y2],
  ];
  let disp = Math.hypot(x2 - x1, y2 - y1) * 0.16;
  for (let i = 0; i < 6; i++) {
    const next: Point[] = [];
    for (let j = 0; j < pts.length - 1; j++) {
      const [ax, ay] = pts[j];
      const [bx, by] = pts[j + 1];
      next.push([ax, ay]);
      const dx = bx - ax;
      const dy = by - ay;
      const len = Math.hypot(dx, dy) || 1;
      const off = (Math.random() - 0.5) * disp;
      next.push([(ax + bx) / 2 + (-dy / len) * off, (ay + by) / 2 + (dx / len) * off]);
    }
    next.push(pts[pts.length - 1]);
    pts = next;
    disp *= 0.52;
  }
  return pts;
}

function makeBolt(w: number, h: number): Point[][] {
  const x1 = Math.random() * w;
  const main = jaggedLine(x1, -10, x1 + (Math.random() - 0.5) * w * 0.4, h + 10);
  const segs = [main];
  const branches = 1 + Math.floor(Math.random() * 2);
  for (let i = 0; i < branches; i++) {
    const p = main[Math.floor(main.length * (0.25 + Math.random() * 0.5))];
    if (!p) continue;
    segs.push(
      jaggedLine(
        p[0],
        p[1],
        p[0] + (Math.random() - 0.5) * w * 0.3,
        Math.min(h, p[1] + Math.random() * h * 0.35),
      ),
    );
  }
  return segs;
}

export function Lightning({
  className,
  color = "150,170,255",
  children,
  ...props
}: LightningProps) {
  const ref = useCanvas<State>({
    init: () => ({ bolts: [], timer: 0.4 }),
    draw: ({ ctx, width, height }, state, _t, dt) => {
      ctx.clearRect(0, 0, width, height);

      state.timer -= dt;
      if (state.timer <= 0) {
        state.bolts.push({ segs: makeBolt(width, height), life: 0.45, max: 0.45 });
        state.timer = 0.5 + Math.random() * 1.7;
      }

      ctx.globalCompositeOperation = "lighter";
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      for (const bolt of state.bolts) {
        bolt.life -= dt;
        const a = Math.max(0, bolt.life / bolt.max) * (0.55 + Math.random() * 0.45);
        for (const seg of bolt.segs) {
          ctx.beginPath();
          ctx.moveTo(seg[0][0], seg[0][1]);
          for (let i = 1; i < seg.length; i++) ctx.lineTo(seg[i][0], seg[i][1]);
          ctx.strokeStyle = `rgba(${color},${a * 0.18})`;
          ctx.lineWidth = 7;
          ctx.stroke();
          ctx.strokeStyle = `rgba(235,240,255,${a})`;
          ctx.lineWidth = 1.6;
          ctx.stroke();
        }
      }
      ctx.globalCompositeOperation = "source-over";
      state.bolts = state.bolts.filter((b) => b.life > 0);
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Cells
Glowing Voronoi cell edges shifting as their seeds drift.
URL: https://dev.ononc.com/backgrounds/cells
Path: src/components/backgrounds/cells.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface CellsProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of Voronoi seeds. */
  seeds?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Seed {
  x: number;
  y: number;
  vx: number;
  vy: number;
  color: string;
}

interface State {
  seeds: Seed[];
}

export function Cells({
  className,
  seeds = 11,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: CellsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => ({
      seeds: Array.from({ length: seeds }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: (Math.random() - 0.5) * 0.5,
        vy: (Math.random() - 0.5) * 0.5,
        color: colors[Math.floor(Math.random() * colors.length)],
      })),
    }),
    draw: ({ ctx, width, height }, state) => {
      ctx.clearRect(0, 0, width, height);
      for (const s of state.seeds) {
        s.x += s.vx;
        s.y += s.vy;
        if (s.x < 0 || s.x > width) s.vx *= -1;
        if (s.y < 0 || s.y > height) s.vy *= -1;
      }

      const step = 8;
      const edge = 9;
      for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
          let m1 = Infinity;
          let m2 = Infinity;
          let nearest = state.seeds[0];
          for (const s of state.seeds) {
            const dx = x - s.x;
            const dy = y - s.y;
            const d = dx * dx + dy * dy;
            if (d < m1) {
              m2 = m1;
              m1 = d;
              nearest = s;
            } else if (d < m2) {
              m2 = d;
            }
          }
          const border = Math.sqrt(m2) - Math.sqrt(m1);
          if (border < edge) {
            const a = (1 - border / edge) * 0.7;
            ctx.fillStyle = `rgba(${nearest.color},${a})`;
            ctx.fillRect(x, y, step - 1, step - 1);
          }
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Equalizer
Sine-driven bars rising and falling like a visualizer.
URL: https://dev.ononc.com/backgrounds/equalizer
Path: src/components/backgrounds/equalizer.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface EqualizerProps extends HTMLAttributes<HTMLDivElement> {
  /** Approximate bar width (incl. gap) in pixels. */
  barWidth?: number;
  /** Top and bottom gradient colors as "r,g,b". */
  colors?: [string, string];
  children?: ReactNode;
}

interface Bar {
  phase: number;
  freq: number;
}

interface State {
  bars: Bar[];
}

export function Equalizer({
  className,
  barWidth = 16,
  colors = ["94,234,255", "139,92,246"],
  children,
  ...props
}: EqualizerProps) {
  const ref = useCanvas<State>({
    init: ({ width }) => {
      const count = Math.max(6, Math.floor(width / barWidth));
      const bars: Bar[] = Array.from({ length: count }, () => ({
        phase: Math.random() * Math.PI * 2,
        freq: 0.8 + Math.random() * 1.8,
      }));
      return { bars };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const count = state.bars.length;
      const bw = width / count;
      const grad = ctx.createLinearGradient(0, 0, 0, height);
      grad.addColorStop(0, `rgba(${colors[0]},0.9)`);
      grad.addColorStop(1, `rgba(${colors[1]},0.25)`);
      ctx.fillStyle = grad;

      for (let i = 0; i < count; i++) {
        const b = state.bars[i];
        const v =
          (0.5 + 0.5 * Math.sin(t * b.freq + b.phase)) *
          (0.55 + 0.45 * Math.sin(t * 0.5 + i * 0.3));
        const bh = (0.12 + 0.8 * v) * height;
        const x = i * bw + bw * 0.18;
        const w = bw * 0.64;
        const y = height - bh;
        const r = Math.min(w / 2, 4);
        ctx.beginPath();
        ctx.moveTo(x, height);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, height);
        ctx.closePath();
        ctx.fill();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Smoke
Soft fog drifting upward and slowly dissipating.
URL: https://dev.ononc.com/backgrounds/smoke
Path: src/components/backgrounds/smoke.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface SmokeProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  /** Fog color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface Puff {
  x: number;
  y: number;
  r: number;
  vx: number;
  vy: number;
  phase: number;
  alpha: number;
}

interface State {
  puffs: Puff[];
}

export function Smoke({
  className,
  count = 16,
  color = "150,160,190",
  children,
  ...props
}: SmokeProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const puffs: Puff[] = Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        r: 70 + Math.random() * 120,
        vx: (Math.random() - 0.5) * 0.25,
        vy: -(0.15 + Math.random() * 0.4),
        phase: Math.random() * Math.PI * 2,
        alpha: 0.03 + Math.random() * 0.06,
      }));
      return { puffs };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      for (const p of state.puffs) {
        p.x += p.vx + Math.sin(t * 0.3 + p.phase) * 0.3;
        p.y += p.vy;
        if (p.y < -p.r) {
          p.y = height + p.r;
          p.x = Math.random() * width;
        }
        const r = p.r * (0.9 + 0.1 * Math.sin(t * 0.5 + p.phase));
        const glow = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, r);
        glow.addColorStop(0, `rgba(${color},${p.alpha})`);
        glow.addColorStop(1, `rgba(${color},0)`);
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Mesh Wave
A tilted wireframe surface undulating in 3D.
URL: https://dev.ononc.com/backgrounds/mesh-wave
Path: src/components/backgrounds/mesh-wave.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface MeshWaveProps extends HTMLAttributes<HTMLDivElement> {
  /** Grid columns / rows. */
  cols?: number;
  rows?: number;
  /** Line color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface State {
  cols: number;
  rows: number;
}

export function MeshWave({
  className,
  cols = 26,
  rows = 18,
  color = "139,124,255",
  children,
  ...props
}: MeshWaveProps) {
  const ref = useCanvas<State>({
    init: () => ({ cols, rows }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const { cols: C, rows: R } = state;
      const tilt = 1.05;
      const cosT = Math.cos(tilt);
      const sinT = Math.sin(tilt);
      const cx = width / 2;
      const cy = height * 0.46;
      const spread = Math.min(width, height) * 1.5;
      const fov = 3;

      // Project a grid point (gx,gy in [-1,1]) to screen.
      const project = (gx: number, gy: number) => {
        const z =
          Math.sin(gx * 3 + t) * 0.18 + Math.sin(gy * 3.4 - t * 0.8) * 0.18;
        const ry = gy * cosT - z * sinT;
        const rz = gy * sinT + z * cosT;
        const scale = fov / (fov + rz);
        return {
          x: cx + gx * scale * spread,
          y: cy + ry * scale * spread,
          z: rz,
        };
      };

      for (let r = 0; r < R; r++) {
        for (let c = 0; c < C; c++) {
          const gx = (c / (C - 1)) * 2 - 1;
          const gy = (r / (R - 1)) * 2 - 1;
          const p = project(gx, gy);
          const alpha = Math.max(0.05, 0.5 - p.z * 0.4);
          ctx.strokeStyle = `rgba(${color},${alpha})`;
          ctx.lineWidth = 1;
          if (c < C - 1) {
            const pr = project(((c + 1) / (C - 1)) * 2 - 1, gy);
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(pr.x, pr.y);
            ctx.stroke();
          }
          if (r < R - 1) {
            const pd = project(gx, ((r + 1) / (R - 1)) * 2 - 1);
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(pd.x, pd.y);
            ctx.stroke();
          }
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Caustics
Rippling webs of light, like sun through water.
URL: https://dev.ononc.com/backgrounds/caustics
Path: src/components/backgrounds/caustics.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface CausticsProps extends HTMLAttributes<HTMLDivElement> {
  /** Grid step in pixels (smaller = finer, heavier). */
  step?: number;
  /** Light color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface State {
  step: number;
}

export function Caustics({
  className,
  step = 7,
  color = "120,200,255",
  children,
  ...props
}: CausticsProps) {
  const ref = useCanvas<State>({
    init: () => ({ step }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const s = state.step;
      const cx = width / 2;
      const cy = height / 2;
      ctx.globalCompositeOperation = "lighter";
      for (let y = 0; y < height; y += s) {
        for (let x = 0; x < width; x += s) {
          const v =
            Math.sin(x * 0.03 + t) +
            Math.sin(y * 0.03 - t * 0.8) +
            Math.sin((x + y) * 0.02 + t * 0.5) +
            Math.sin(Math.hypot(x - cx, y - cy) * 0.04 - t * 1.2);
          const n = (v + 4) / 8; // 0..1
          const b = n * n * n * n; // sharpen into veins
          if (b < 0.02) continue;
          ctx.fillStyle = `rgba(${color},${Math.min(0.8, b)})`;
          ctx.fillRect(x, y, s, s);
        }
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Magnetic Field
Dipole field lines streaming between two orbiting poles.
URL: https://dev.ononc.com/backgrounds/magnetic-field
Path: src/components/backgrounds/magnetic-field.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface MagneticFieldProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of field lines traced from the + pole. */
  lines?: number;
  /** Field-line color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface State {
  lines: number;
}

export function MagneticField({
  className,
  lines = 18,
  color = "139,160,255",
  children,
  ...props
}: MagneticFieldProps) {
  const ref = useCanvas<State>({
    init: () => ({ lines }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const sep = Math.min(width, height) * 0.22;
      const poles = [
        { x: width / 2 + Math.cos(t * 0.3) * sep, y: height / 2 + Math.sin(t * 0.3) * sep, q: 1 },
        { x: width / 2 - Math.cos(t * 0.3) * sep, y: height / 2 - Math.sin(t * 0.3) * sep, q: -1 },
      ];

      const field = (px: number, py: number) => {
        let fx = 0;
        let fy = 0;
        for (const p of poles) {
          const dx = px - p.x;
          const dy = py - p.y;
          const r2 = dx * dx + dy * dy + 1;
          const inv = p.q / (r2 * Math.sqrt(r2));
          fx += dx * inv;
          fy += dy * inv;
        }
        return [fx, fy] as const;
      };

      ctx.lineWidth = 1.2;
      const plus = poles[0];
      const minus = poles[1];
      for (let i = 0; i < state.lines; i++) {
        const a = (i / state.lines) * Math.PI * 2;
        let x = plus.x + Math.cos(a) * 16;
        let y = plus.y + Math.sin(a) * 16;
        ctx.beginPath();
        ctx.moveTo(x, y);
        for (let step = 0; step < 200; step++) {
          const [fx, fy] = field(x, y);
          const mag = Math.hypot(fx, fy) || 1;
          x += (fx / mag) * 4;
          y += (fy / mag) * 4;
          ctx.lineTo(x, y);
          if (Math.hypot(x - minus.x, y - minus.y) < 14) break;
          if (x < -20 || x > width + 20 || y < -20 || y > height + 20) break;
        }
        ctx.strokeStyle = `rgba(${color},0.3)`;
        ctx.stroke();
      }

      // Pole glows.
      for (const p of poles) {
        const c = p.q > 0 ? "120,200,255" : "244,114,182";
        const g = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, 24);
        g.addColorStop(0, `rgba(${c},0.9)`);
        g.addColorStop(1, `rgba(${c},0)`);
        ctx.fillStyle = g;
        ctx.beginPath();
        ctx.arc(p.x, p.y, 24, 0, Math.PI * 2);
        ctx.fill();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Triangles
A low-poly mesh shimmering with a moving wave.
URL: https://dev.ononc.com/backgrounds/triangles
Path: src/components/backgrounds/triangles.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface TrianglesProps extends HTMLAttributes<HTMLDivElement> {
  /** Cell size in pixels. */
  size?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Tri {
  pts: [number, number][];
  cx: number;
  cy: number;
  color: string;
}

interface State {
  tris: Tri[];
}

export function Triangles({
  className,
  size = 64,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: TrianglesProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const cols = Math.ceil(width / size) + 1;
      const rows = Math.ceil(height / size) + 1;
      const jit = size * 0.32;
      const verts: [number, number][][] = [];
      for (let r = 0; r < rows; r++) {
        verts[r] = [];
        for (let c = 0; c < cols; c++) {
          verts[r][c] = [
            c * size + (Math.random() - 0.5) * jit,
            r * size + (Math.random() - 0.5) * jit,
          ];
        }
      }
      const tris: Tri[] = [];
      const push = (a: [number, number], b: [number, number], c: [number, number]) => {
        tris.push({
          pts: [a, b, c],
          cx: (a[0] + b[0] + c[0]) / 3,
          cy: (a[1] + b[1] + c[1]) / 3,
          color: colors[Math.floor(Math.random() * colors.length)],
        });
      };
      for (let r = 0; r < rows - 1; r++) {
        for (let c = 0; c < cols - 1; c++) {
          push(verts[r][c], verts[r][c + 1], verts[r + 1][c]);
          push(verts[r][c + 1], verts[r + 1][c + 1], verts[r + 1][c]);
        }
      }
      return { tris };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      for (const tri of state.tris) {
        const b =
          (Math.sin(tri.cx * 0.01 + t) +
            Math.sin(tri.cy * 0.012 - t * 0.8) +
            Math.sin((tri.cx + tri.cy) * 0.008 + t * 0.5)) /
            3;
        const n = b * 0.5 + 0.5;
        ctx.fillStyle = `rgba(${tri.color},${0.04 + n * 0.26})`;
        ctx.beginPath();
        ctx.moveTo(tri.pts[0][0], tri.pts[0][1]);
        ctx.lineTo(tri.pts[1][0], tri.pts[1][1]);
        ctx.lineTo(tri.pts[2][0], tri.pts[2][1]);
        ctx.closePath();
        ctx.fill();
        ctx.strokeStyle = `rgba(${tri.color},0.07)`;
        ctx.lineWidth = 1;
        ctx.stroke();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Sparkles
Twinkling points with a soft cross-flare glint.
URL: https://dev.ononc.com/backgrounds/sparkles
Path: src/components/backgrounds/sparkles.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface SparklesProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Sparkle {
  x: number;
  y: number;
  size: number;
  phase: number;
  speed: number;
  color: string;
}

interface State {
  sparkles: Sparkle[];
}

export function Sparkles({
  className,
  count = 70,
  colors = ["255,255,255", "196,181,253", "150,234,255"],
  children,
  ...props
}: SparklesProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => ({
      sparkles: Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        size: 1.4 + Math.random() * 2.6,
        phase: Math.random() * Math.PI * 2,
        speed: 1 + Math.random() * 2.2,
        color: colors[Math.floor(Math.random() * colors.length)],
      })),
    }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      for (const s of state.sparkles) {
        const tw = Math.sin(t * s.speed + s.phase);
        if (tw <= 0) continue;
        const a = tw;
        const len = s.size * (3 + tw * 3);

        // Center glow.
        const glow = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, s.size * 2);
        glow.addColorStop(0, `rgba(${s.color},${a})`);
        glow.addColorStop(1, `rgba(${s.color},0)`);
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(s.x, s.y, s.size * 2, 0, Math.PI * 2);
        ctx.fill();

        // Cross flare.
        ctx.lineWidth = 1;
        const gh = ctx.createLinearGradient(s.x - len, s.y, s.x + len, s.y);
        gh.addColorStop(0, `rgba(${s.color},0)`);
        gh.addColorStop(0.5, `rgba(${s.color},${a})`);
        gh.addColorStop(1, `rgba(${s.color},0)`);
        ctx.strokeStyle = gh;
        ctx.beginPath();
        ctx.moveTo(s.x - len, s.y);
        ctx.lineTo(s.x + len, s.y);
        ctx.stroke();

        const gv = ctx.createLinearGradient(s.x, s.y - len, s.x, s.y + len);
        gv.addColorStop(0, `rgba(${s.color},0)`);
        gv.addColorStop(0.5, `rgba(${s.color},${a})`);
        gv.addColorStop(1, `rgba(${s.color},0)`);
        ctx.strokeStyle = gv;
        ctx.beginPath();
        ctx.moveTo(s.x, s.y - len);
        ctx.lineTo(s.x, s.y + len);
        ctx.stroke();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Confetti
Colorful confetti fluttering down.
URL: https://dev.ononc.com/backgrounds/confetti
Path: src/components/backgrounds/confetti.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface ConfettiProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Piece {
  x: number;
  y: number;
  vy: number;
  vx: number;
  rot: number;
  vrot: number;
  w: number;
  h: number;
  seed: number;
  color: string;
}

interface State {
  pieces: Piece[];
}

export function Confetti({
  className,
  count = 130,
  colors = ["139,124,255", "94,234,255", "244,114,182", "250,204,21", "52,211,153"],
  children,
  ...props
}: ConfettiProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const make = (): Piece => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vy: 1 + Math.random() * 2.4,
        vx: (Math.random() - 0.5) * 0.6,
        rot: Math.random() * Math.PI,
        vrot: (Math.random() - 0.5) * 0.18,
        w: 4 + Math.random() * 5,
        h: 7 + Math.random() * 7,
        seed: Math.random() * 1000,
        color: colors[Math.floor(Math.random() * colors.length)],
      });
      return { pieces: Array.from({ length: count }, make) };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      for (const p of state.pieces) {
        p.y += p.vy;
        p.x += p.vx + Math.sin(t * 2 + p.seed) * 0.7;
        p.rot += p.vrot;
        if (p.y > height + 14) {
          p.y = -14;
          p.x = Math.random() * width;
        }
        // Flip width by rotation for a fluttering look.
        const sw = p.w * Math.abs(Math.cos(p.rot));
        ctx.save();
        ctx.translate(p.x, p.y);
        ctx.rotate(p.rot);
        ctx.fillStyle = `rgba(${p.color},0.92)`;
        ctx.fillRect(-sw / 2, -p.h / 2, Math.max(1, sw), p.h);
        ctx.restore();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Kaleidoscope
Orbiting petals mirrored into shifting radial symmetry.
URL: https://dev.ononc.com/backgrounds/kaleidoscope
Path: src/components/backgrounds/kaleidoscope.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface KaleidoscopeProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of mirrored segments. */
  segments?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Petal {
  baseDist: number;
  baseAng: number;
  r: number;
  s1: number;
  s2: number;
  color: string;
}

interface State {
  petals: Petal[];
}

export function Kaleidoscope({
  className,
  segments = 10,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: KaleidoscopeProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const maxR = Math.min(width, height) * 0.5;
      const petals: Petal[] = Array.from({ length: 5 }, () => ({
        baseDist: maxR * (0.2 + Math.random() * 0.7),
        baseAng: Math.random() * (Math.PI / segments),
        r: 10 + Math.random() * 26,
        s1: 0.4 + Math.random() * 0.9,
        s2: 0.3 + Math.random() * 0.8,
        color: colors[Math.floor(Math.random() * colors.length)],
      }));
      return { petals };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;
      const wedge = (Math.PI * 2) / segments;
      ctx.globalCompositeOperation = "lighter";

      for (let seg = 0; seg < segments; seg++) {
        for (const mirror of [1, -1]) {
          ctx.save();
          ctx.translate(cx, cy);
          ctx.rotate(seg * wedge);
          ctx.scale(1, mirror);
          for (const p of state.petals) {
            const ang = p.baseAng + Math.sin(t * p.s1) * 0.18;
            const dist = p.baseDist + Math.sin(t * p.s2) * 24;
            const x = Math.cos(ang) * dist;
            const y = Math.sin(ang) * dist;
            const glow = ctx.createRadialGradient(x, y, 0, x, y, p.r);
            glow.addColorStop(0, `rgba(${p.color},0.5)`);
            glow.addColorStop(1, `rgba(${p.color},0)`);
            ctx.fillStyle = glow;
            ctx.beginPath();
            ctx.arc(x, y, p.r, 0, Math.PI * 2);
            ctx.fill();
          }
          ctx.restore();
        }
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Tron Trails
Heads race a grid, turning at right angles, leaving light trails.
URL: https://dev.ononc.com/backgrounds/tron-trails
Path: src/components/backgrounds/tron-trails.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface TronTrailsProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of moving heads. */
  heads?: number;
  /** Grid cell size in pixels. */
  cell?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Head {
  x: number;
  y: number;
  dir: number;
  since: number;
  color: string;
}

interface State {
  heads: Head[];
  cell: number;
}

const DIRS = [
  [1, 0],
  [0, 1],
  [-1, 0],
  [0, -1],
];

export function TronTrails({
  className,
  heads = 7,
  cell = 22,
  colors = ["94,234,255", "139,124,255", "244,114,182"],
  children,
  ...props
}: TronTrailsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const make = (): Head => ({
        x: Math.floor((Math.random() * width) / cell) * cell,
        y: Math.floor((Math.random() * height) / cell) * cell,
        dir: Math.floor(Math.random() * 4),
        since: 0,
        color: colors[Math.floor(Math.random() * colors.length)],
      });
      return { heads: Array.from({ length: heads }, make), cell };
    },
    draw: ({ ctx, width, height }, state, _t, dt) => {
      // Fade prior frame so trails linger then die.
      ctx.fillStyle = "rgba(6,7,13,0.06)";
      ctx.fillRect(0, 0, width, height);

      const speed = 90;
      const move = Math.min(state.cell, speed * dt);
      ctx.globalCompositeOperation = "lighter";
      for (const h of state.heads) {
        const [dx, dy] = DIRS[h.dir];
        h.x += dx * move;
        h.y += dy * move;
        h.since += move;

        if (h.since >= state.cell) {
          h.since = 0;
          h.x = Math.round(h.x / state.cell) * state.cell;
          h.y = Math.round(h.y / state.cell) * state.cell;
          if (Math.random() < 0.4) {
            h.dir = (h.dir + (Math.random() < 0.5 ? 1 : 3)) % 4;
          }
        }

        if (h.x < -4) h.x = width;
        if (h.x > width + 4) h.x = 0;
        if (h.y < -4) h.y = height;
        if (h.y > height + 4) h.y = 0;

        ctx.fillStyle = `rgba(${h.color},0.9)`;
        ctx.fillRect(h.x - 1.5, h.y - 1.5, 3, 3);
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### God Rays
Volumetric light shafts shimmering from a drifting source.
URL: https://dev.ononc.com/backgrounds/god-rays
Path: src/components/backgrounds/god-rays.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface GodRaysProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of light shafts. */
  rays?: number;
  /** Ray color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface State {
  rays: number;
}

export function GodRays({
  className,
  rays = 26,
  color = "150,200,255",
  children,
  ...props
}: GodRaysProps) {
  const ref = useCanvas<State>({
    init: () => ({ rays }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const sx = width * (0.5 + 0.32 * Math.sin(t * 0.15));
      const sy = height * 0.18;
      const maxLen = Math.hypot(width, height) * 1.1;
      ctx.globalCompositeOperation = "lighter";

      const half = (Math.PI * 2) / state.rays / 2.4;
      for (let k = 0; k < state.rays; k++) {
        const a = t * 0.05 + (k * (Math.PI * 2)) / state.rays;
        const intensity = 0.5 + 0.5 * Math.sin(t * 1.4 + k * 1.3);
        const ex = sx + Math.cos(a) * maxLen;
        const ey = sy + Math.sin(a) * maxLen;
        const grad = ctx.createLinearGradient(sx, sy, ex, ey);
        grad.addColorStop(0, `rgba(${color},${0.12 * intensity})`);
        grad.addColorStop(1, `rgba(${color},0)`);
        ctx.fillStyle = grad;
        ctx.beginPath();
        ctx.moveTo(sx, sy);
        ctx.lineTo(sx + Math.cos(a - half) * maxLen, sy + Math.sin(a - half) * maxLen);
        ctx.lineTo(sx + Math.cos(a + half) * maxLen, sy + Math.sin(a + half) * maxLen);
        ctx.closePath();
        ctx.fill();
      }

      const glow = ctx.createRadialGradient(sx, sy, 0, sx, sy, 90);
      glow.addColorStop(0, `rgba(${color},0.5)`);
      glow.addColorStop(1, `rgba(${color},0)`);
      ctx.fillStyle = glow;
      ctx.beginPath();
      ctx.arc(sx, sy, 90, 0, Math.PI * 2);
      ctx.fill();
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Oscilloscope
Glowing waveform lines sweeping across a scope grid.
URL: https://dev.ononc.com/backgrounds/oscilloscope
Path: src/components/backgrounds/oscilloscope.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface OscilloscopeProps extends HTMLAttributes<HTMLDivElement> {
  /** Waveform colors as "r,g,b" (one line each). */
  colors?: string[];
  children?: ReactNode;
}

interface State {
  empty: true;
}

export function Oscilloscope({
  className,
  colors = ["94,234,255", "139,124,255"],
  children,
  ...props
}: OscilloscopeProps) {
  const ref = useCanvas<State>({
    init: () => ({ empty: true }),
    draw: ({ ctx, width, height }, _state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cy = height / 2;

      // Faint scope grid.
      ctx.strokeStyle = "rgba(120,200,255,0.07)";
      ctx.lineWidth = 1;
      ctx.beginPath();
      for (let x = 0; x <= width; x += 32) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, height);
      }
      for (let y = 0; y <= height; y += 32) {
        ctx.moveTo(0, y);
        ctx.lineTo(width, y);
      }
      ctx.stroke();

      ctx.globalCompositeOperation = "lighter";
      ctx.lineCap = "round";
      colors.forEach((color, idx) => {
        const amp = height * (0.26 - idx * 0.07);
        const speed = 2 + idx * 1.3;
        const draw = (lw: number, alpha: number) => {
          ctx.strokeStyle = `rgba(${color},${alpha})`;
          ctx.lineWidth = lw;
          ctx.beginPath();
          for (let x = 0; x <= width; x += 4) {
            const y =
              cy +
              (Math.sin(x * 0.02 + t * speed) * 0.6 +
                Math.sin(x * 0.05 - t * (speed + 1)) * 0.3 +
                Math.sin(x * 0.011 + t) * 0.2) *
                amp +
              idx * 18;
            if (x === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
          }
          ctx.stroke();
        };
        draw(6, 0.12);
        draw(1.6, 0.9);
      });
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Pinwheel
Rotating conic color sectors like a spinning pinwheel.
URL: https://dev.ononc.com/backgrounds/pinwheel
Path: src/components/backgrounds/pinwheel.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface PinwheelProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of sectors (blades). */
  sectors?: number;
  colors?: string[];
  children?: ReactNode;
}

interface State {
  sectors: number;
}

export function Pinwheel({
  className,
  sectors = 14,
  colors = ["139,92,246", "34,211,238", "244,114,182", "79,70,229"],
  children,
  ...props
}: PinwheelProps) {
  const ref = useCanvas<State>({
    init: () => ({ sectors }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;
      const maxR = Math.hypot(width, height);
      const step = (Math.PI * 2) / state.sectors;
      const rot = t * 0.3;

      for (let k = 0; k < state.sectors; k++) {
        const a0 = rot + k * step;
        const color = colors[k % colors.length];
        const alpha = k % 2 === 0 ? 0.3 : 0.12;
        ctx.fillStyle = `rgba(${color},${alpha})`;
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, maxR, a0, a0 + step);
        ctx.closePath();
        ctx.fill();
      }

      // Edge vignette + center glow.
      const vg = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(width, height) * 0.6);
      vg.addColorStop(0, "rgba(6,7,13,0.1)");
      vg.addColorStop(0.55, "rgba(6,7,13,0)");
      vg.addColorStop(1, "rgba(6,7,13,0.65)");
      ctx.fillStyle = vg;
      ctx.fillRect(0, 0, width, height);

      const core = ctx.createRadialGradient(cx, cy, 0, cx, cy, 60);
      core.addColorStop(0, "rgba(255,255,255,0.18)");
      core.addColorStop(1, "rgba(255,255,255,0)");
      ctx.fillStyle = core;
      ctx.beginPath();
      ctx.arc(cx, cy, 60, 0, Math.PI * 2);
      ctx.fill();
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Bubbles
Wobbling bubbles drifting up with a glassy highlight.
URL: https://dev.ononc.com/backgrounds/bubbles
Path: src/components/backgrounds/bubbles.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface BubblesProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  /** Bubble color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface Bubble {
  x: number;
  y: number;
  r: number;
  vy: number;
  wob: number;
  phase: number;
}

interface State {
  bubbles: Bubble[];
}

export function Bubbles({
  className,
  count = 28,
  color = "150,220,255",
  children,
  ...props
}: BubblesProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const make = (seeded: boolean): Bubble => {
        const r = 6 + Math.random() * 26;
        return {
          x: Math.random() * width,
          y: seeded ? Math.random() * height : height + r + Math.random() * 40,
          r,
          vy: 0.4 + (30 - r) * 0.03 + Math.random() * 0.5,
          wob: 0.4 + Math.random() * 1.1,
          phase: Math.random() * Math.PI * 2,
        };
      };
      return { bubbles: Array.from({ length: count }, () => make(true)) };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      for (const b of state.bubbles) {
        b.y -= b.vy;
        b.x += Math.sin(t * 1.2 + b.phase) * b.wob;
        if (b.y < -b.r - 4) {
          b.y = height + b.r + 4;
          b.x = Math.random() * width;
        }

        const fill = ctx.createRadialGradient(
          b.x - b.r * 0.3,
          b.y - b.r * 0.3,
          0,
          b.x,
          b.y,
          b.r,
        );
        fill.addColorStop(0, `rgba(${color},0.10)`);
        fill.addColorStop(1, `rgba(${color},0.02)`);
        ctx.fillStyle = fill;
        ctx.beginPath();
        ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
        ctx.fill();

        ctx.strokeStyle = `rgba(${color},0.45)`;
        ctx.lineWidth = 1;
        ctx.stroke();

        // Specular highlight.
        ctx.strokeStyle = "rgba(255,255,255,0.5)";
        ctx.lineWidth = 1.4;
        ctx.beginPath();
        ctx.arc(b.x - b.r * 0.35, b.y - b.r * 0.35, b.r * 0.28, Math.PI * 1.1, Math.PI * 1.7);
        ctx.stroke();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Plexus
A rotating 3D node network connected by depth-faded lines.
URL: https://dev.ononc.com/backgrounds/plexus
Path: src/components/backgrounds/plexus.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface PlexusProps extends HTMLAttributes<HTMLDivElement> {
  /** Approx. nodes per 100k px² (capped). */
  density?: number;
  /** Node + line color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface Node {
  x: number;
  y: number;
  z: number;
  vx: number;
  vy: number;
  vz: number;
}

interface State {
  nodes: Node[];
}

export function Plexus({
  className,
  density = 5,
  color = "139,160,255",
  children,
  ...props
}: PlexusProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const count = Math.max(
        24,
        Math.min(80, Math.round(((width * height) / 100000) * density * 6)),
      );
      const rnd = () => Math.random() * 2 - 1;
      const nodes: Node[] = Array.from({ length: count }, () => ({
        x: rnd(),
        y: rnd(),
        z: rnd(),
        vx: rnd() * 0.0016,
        vy: rnd() * 0.0016,
        vz: rnd() * 0.0016,
      }));
      return { nodes };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;
      const spread = Math.min(width, height) * 0.62;
      const fov = 2.4;
      const cosA = Math.cos(t * 0.08);
      const sinA = Math.sin(t * 0.08);

      const proj = state.nodes.map((n) => {
        n.x += n.vx;
        n.y += n.vy;
        n.z += n.vz;
        if (n.x < -1 || n.x > 1) n.vx *= -1;
        if (n.y < -1 || n.y > 1) n.vy *= -1;
        if (n.z < -1 || n.z > 1) n.vz *= -1;
        const xr = n.x * cosA - n.z * sinA;
        const zr = n.x * sinA + n.z * cosA;
        const scale = fov / (fov + zr);
        return {
          sx: cx + xr * scale * spread,
          sy: cy + n.y * scale * spread,
          scale,
          depth: (zr + 1) / 2,
        };
      });

      const thresh = 0.62;
      ctx.lineWidth = 1;
      for (let i = 0; i < state.nodes.length; i++) {
        for (let j = i + 1; j < state.nodes.length; j++) {
          const a = state.nodes[i];
          const b = state.nodes[j];
          const dx = a.x - b.x;
          const dy = a.y - b.y;
          const dz = a.z - b.z;
          const d = Math.sqrt(dx * dx + dy * dy + dz * dz);
          if (d < thresh) {
            const alpha = (1 - d / thresh) * 0.4 * ((proj[i].depth + proj[j].depth) / 2 + 0.3);
            ctx.strokeStyle = `rgba(${color},${alpha})`;
            ctx.beginPath();
            ctx.moveTo(proj[i].sx, proj[i].sy);
            ctx.lineTo(proj[j].sx, proj[j].sy);
            ctx.stroke();
          }
        }
      }

      for (const p of proj) {
        ctx.fillStyle = `rgba(${color},${0.4 + p.depth * 0.55})`;
        ctx.beginPath();
        ctx.arc(p.sx, p.sy, 1 + p.scale * 1.6, 0, Math.PI * 2);
        ctx.fill();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Liquid Blob
Organic blobs morphing and merging like liquid.
URL: https://dev.ononc.com/backgrounds/liquid-blob
Path: src/components/backgrounds/liquid-blob.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface LiquidBlobProps extends HTMLAttributes<HTMLDivElement> {
  /** The two blob colors as "r,g,b". */
  colors?: [string, string];
  children?: ReactNode;
}

interface State {
  empty: true;
}

export function LiquidBlob({
  className,
  colors = ["139,92,246", "34,211,238"],
  children,
  ...props
}: LiquidBlobProps) {
  const ref = useCanvas<State>({
    init: () => ({ empty: true }),
    draw: ({ ctx, width, height }, _state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      const base = Math.min(width, height) * 0.3;

      const blob = (
        cx: number,
        cy: number,
        baseR: number,
        phase: number,
        color: string,
      ) => {
        ctx.beginPath();
        for (let a = 0; a <= Math.PI * 2 + 0.001; a += 0.12) {
          const r =
            baseR *
            (1 +
              0.18 * Math.sin(a * 3 + t + phase) +
              0.12 * Math.sin(a * 5 - t * 1.3 + phase) +
              0.07 * Math.sin(a * 7 + t * 0.7 + phase));
          const x = cx + Math.cos(a) * r;
          const y = cy + Math.sin(a) * r;
          if (a === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        ctx.closePath();
        const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, baseR * 1.3);
        grad.addColorStop(0, `rgba(${color},0.5)`);
        grad.addColorStop(1, `rgba(${color},0.04)`);
        ctx.fillStyle = grad;
        ctx.fill();
      };

      blob(
        width / 2 + Math.sin(t * 0.4) * width * 0.08,
        height / 2 + Math.cos(t * 0.5) * height * 0.08,
        base * 1.05,
        2.5,
        colors[1],
      );
      blob(
        width / 2 - Math.sin(t * 0.35) * width * 0.06,
        height / 2 - Math.cos(t * 0.45) * height * 0.06,
        base,
        0,
        colors[0],
      );
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full blur-[14px]" />
      {children}
    </div>
  );
}
```

### Perlin Clouds
Soft fractal clouds drifting and dissolving.
URL: https://dev.ononc.com/backgrounds/perlin-clouds
Path: src/components/backgrounds/perlin-clouds.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface PerlinCloudsProps extends HTMLAttributes<HTMLDivElement> {
  /** Grid step in pixels. */
  step?: number;
  /** Cloud color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface State {
  step: number;
}

export function PerlinClouds({
  className,
  step = 10,
  color = "150,170,220",
  children,
  ...props
}: PerlinCloudsProps) {
  const ref = useCanvas<State>({
    init: () => ({ step }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const s = state.step;
      for (let y = 0; y < height; y += s) {
        for (let x = 0; x < width; x += s) {
          // Fractal sum of sine octaves ~ value noise.
          let n =
            0.5 * (0.5 + 0.5 * Math.sin(x * 0.006 + y * 0.004 + t * 0.2));
          n += 0.25 * (0.5 + 0.5 * Math.sin(x * 0.013 - y * 0.009 - t * 0.3 + 1.3));
          n += 0.15 * (0.5 + 0.5 * Math.sin(x * 0.027 + y * 0.021 + t * 0.15 + 2.1));
          n += 0.1 * (0.5 + 0.5 * Math.sin((x + y) * 0.04 - t * 0.4));
          const b = Math.pow(n, 1.7);
          if (b < 0.04) continue;
          ctx.fillStyle = `rgba(${color},${b * 0.5})`;
          ctx.fillRect(x, y, s, s);
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full blur-[6px]" />
      {children}
    </div>
  );
}
```

### Ink Drops
Ink blots blooming and fading on staggered timers.
URL: https://dev.ononc.com/backgrounds/ink-drops
Path: src/components/backgrounds/ink-drops.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface InkDropsProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Drop {
  x: number;
  y: number;
  maxR: number;
  life: number;
  max: number;
  delay: number;
  color: string;
}

interface State {
  drops: Drop[];
}

export function InkDrops({
  className,
  count = 14,
  colors = ["139,124,255", "94,234,255", "244,114,182"],
  children,
  ...props
}: InkDropsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const make = (): Drop => ({
        x: Math.random() * width,
        y: Math.random() * height,
        maxR: 50 + Math.random() * 120,
        life: 0,
        max: 2.5 + Math.random() * 3,
        delay: Math.random() * 4,
        color: colors[Math.floor(Math.random() * colors.length)],
      });
      return { drops: Array.from({ length: count }, make) };
    },
    draw: ({ ctx, width, height }, state, _t, dt) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";

      for (const d of state.drops) {
        if (d.delay > 0) {
          d.delay -= dt;
          continue;
        }
        d.life += dt;
        const p = d.life / d.max;
        if (p >= 1) {
          d.x = Math.random() * width;
          d.y = Math.random() * height;
          d.maxR = 50 + Math.random() * 120;
          d.life = 0;
          d.max = 2.5 + Math.random() * 3;
          d.delay = Math.random() * 1.5;
          d.color = colors[Math.floor(Math.random() * colors.length)];
          continue;
        }
        const r = d.maxR * (1 - (1 - p) * (1 - p));
        const alpha = Math.sin(p * Math.PI) * 0.45;
        const glow = ctx.createRadialGradient(d.x, d.y, 0, d.x, d.y, r);
        glow.addColorStop(0, `rgba(${d.color},${alpha})`);
        glow.addColorStop(0.6, `rgba(${d.color},${alpha * 0.4})`);
        glow.addColorStop(1, `rgba(${d.color},0)`);
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(d.x, d.y, r, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Data Stream
Lanes of bright dashes streaming downward.
URL: https://dev.ononc.com/backgrounds/data-stream
Path: src/components/backgrounds/data-stream.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface DataStreamProps extends HTMLAttributes<HTMLDivElement> {
  /** Lane spacing in pixels. */
  gap?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Lane {
  x: number;
  speed: number;
  offset: number;
  tail: number;
  color: string;
}

interface State {
  lanes: Lane[];
}

export function DataStream({
  className,
  gap = 18,
  colors = ["94,234,255", "139,124,255", "120,255,180"],
  children,
  ...props
}: DataStreamProps) {
  const ref = useCanvas<State>({
    init: ({ width }) => {
      const cols = Math.ceil(width / gap);
      const lanes: Lane[] = Array.from({ length: cols }, (_, i) => ({
        x: i * gap + gap / 2,
        speed: 60 + Math.random() * 220,
        offset: Math.random() * 1000,
        tail: 6 + Math.floor(Math.random() * 12),
        color: colors[Math.floor(Math.random() * colors.length)],
      }));
      return { lanes };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      const dash = 9;
      const span = height + 200;

      for (const lane of state.lanes) {
        const head = ((t * lane.speed + lane.offset) % span) - 100;
        for (let k = 0; k < lane.tail; k++) {
          const y = head - k * dash;
          if (y < -dash || y > height) continue;
          const alpha = (1 - k / lane.tail) * 0.85;
          ctx.fillStyle = `rgba(${lane.color},${alpha})`;
          ctx.fillRect(lane.x - 1, y, 2, dash - 3);
        }
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Scanlines
CRT scanlines with drifting chromatic glitch bands.
URL: https://dev.ononc.com/backgrounds/scanlines
Path: src/components/backgrounds/scanlines.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface ScanlinesProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of glitch bands. */
  bands?: number;
  children?: ReactNode;
}

interface Band {
  y: number;
  h: number;
  speed: number;
  amp: number;
  seed: number;
  color: string;
}

interface State {
  bands: Band[];
}

export function Scanlines({
  className,
  bands = 5,
  children,
  ...props
}: ScanlinesProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const palette = ["94,234,255", "244,114,182", "139,124,255"];
      return {
        bands: Array.from({ length: bands }, () => ({
          y: Math.random() * height,
          h: 6 + Math.random() * 30,
          speed: 4 + Math.random() * 16,
          amp: 6 + Math.random() * (width * 0.04),
          seed: Math.random() * 100,
          color: palette[Math.floor(Math.random() * palette.length)],
        })),
      };
    },
    draw: ({ ctx, width, height }, state, t, dt) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";

      // Chromatic glitch bands drifting downward with horizontal jitter.
      for (const b of state.bands) {
        b.y += b.speed * dt * 6;
        if (b.y > height + b.h) b.y = -b.h;
        const jump = Math.sin(t * 13 + b.seed) > 0.93 ? b.amp * 2 : 0;
        const ox = Math.sin(t * 2 + b.seed) * b.amp + jump;
        ctx.fillStyle = `rgba(${b.color},0.12)`;
        ctx.fillRect(ox, b.y, width, b.h);
        ctx.fillStyle = `rgba(${b.color},0.08)`;
        ctx.fillRect(-ox * 0.6, b.y, width, b.h);
      }

      ctx.globalCompositeOperation = "source-over";
      // Scrolling scanlines.
      const off = (t * 30) % 4;
      ctx.fillStyle = "rgba(200,220,255,0.035)";
      for (let y = off; y < height; y += 4) {
        ctx.fillRect(0, y, width, 1);
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Boids
A flocking swarm steering by separation, alignment, and cohesion.
URL: https://dev.ononc.com/backgrounds/boids
Path: src/components/backgrounds/boids.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface BoidsProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  color?: string;
  children?: ReactNode;
}

interface Boid {
  x: number;
  y: number;
  vx: number;
  vy: number;
}

interface State {
  boids: Boid[];
}

export function Boids({
  className,
  count = 60,
  color = "150,180,255",
  children,
  ...props
}: BoidsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const boids: Boid[] = Array.from({ length: count }, () => {
        const a = Math.random() * Math.PI * 2;
        const sp = 60 + Math.random() * 40;
        return {
          x: Math.random() * width,
          y: Math.random() * height,
          vx: Math.cos(a) * sp,
          vy: Math.sin(a) * sp,
        };
      });
      return { boids };
    },
    draw: ({ ctx, width, height }, state, _t, dt) => {
      ctx.clearRect(0, 0, width, height);
      const boids = state.boids;
      const R = 56;
      const sepR = 24;
      const maxSpeed = 110;
      const minSpeed = 50;

      for (const b of boids) {
        let ax = 0;
        let ay = 0;
        let cx = 0;
        let cy = 0;
        let sx = 0;
        let sy = 0;
        let n = 0;
        for (const o of boids) {
          if (o === b) continue;
          const dx = o.x - b.x;
          const dy = o.y - b.y;
          const d2 = dx * dx + dy * dy;
          if (d2 < R * R) {
            ax += o.vx;
            ay += o.vy;
            cx += o.x;
            cy += o.y;
            n++;
            if (d2 < sepR * sepR && d2 > 0.01) {
              sx -= dx / d2;
              sy -= dy / d2;
            }
          }
        }
        if (n > 0) {
          b.vx += (ax / n - b.vx) * 0.04;
          b.vy += (ay / n - b.vy) * 0.04;
          b.vx += (cx / n - b.x) * 0.0008;
          b.vy += (cy / n - b.y) * 0.0008;
        }
        b.vx += sx * 600;
        b.vy += sy * 600;

        const sp = Math.hypot(b.vx, b.vy) || 1;
        const clamped = Math.max(minSpeed, Math.min(maxSpeed, sp));
        b.vx = (b.vx / sp) * clamped;
        b.vy = (b.vy / sp) * clamped;

        b.x += b.vx * dt;
        b.y += b.vy * dt;
        if (b.x < 0) b.x += width;
        if (b.x > width) b.x -= width;
        if (b.y < 0) b.y += height;
        if (b.y > height) b.y -= height;

        const ang = Math.atan2(b.vy, b.vx);
        ctx.save();
        ctx.translate(b.x, b.y);
        ctx.rotate(ang);
        ctx.fillStyle = `rgba(${color},0.8)`;
        ctx.beginPath();
        ctx.moveTo(6, 0);
        ctx.lineTo(-4, 3);
        ctx.lineTo(-4, -3);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Fireworks
Rockets burst into showers of falling sparks.
URL: https://dev.ononc.com/backgrounds/fireworks
Path: src/components/backgrounds/fireworks.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface FireworksProps extends HTMLAttributes<HTMLDivElement> {
  colors?: string[];
  children?: ReactNode;
}

interface Spark {
  x: number;
  y: number;
  vx: number;
  vy: number;
  life: number;
  max: number;
  color: string;
}

interface Rocket {
  x: number;
  y: number;
  vy: number;
  burstY: number;
  color: string;
}

interface State {
  rockets: Rocket[];
  sparks: Spark[];
  timer: number;
}

export function Fireworks({
  className,
  colors = ["139,124,255", "94,234,255", "244,114,182", "250,204,21", "120,255,180"],
  children,
  ...props
}: FireworksProps) {
  const ref = useCanvas<State>({
    init: () => ({ rockets: [], sparks: [], timer: 0.3 }),
    draw: ({ ctx, width, height }, state, _t, dt) => {
      ctx.fillStyle = "rgba(6,7,13,0.2)";
      ctx.fillRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";

      state.timer -= dt;
      if (state.timer <= 0) {
        state.rockets.push({
          x: width * (0.15 + Math.random() * 0.7),
          y: height,
          vy: -(height * 0.55 + Math.random() * height * 0.2),
          burstY: height * (0.12 + Math.random() * 0.4),
          color: colors[Math.floor(Math.random() * colors.length)],
        });
        state.timer = 0.5 + Math.random() * 1.1;
      }

      for (const r of state.rockets) {
        r.y += r.vy * dt;
        ctx.fillStyle = `rgba(${r.color},0.9)`;
        ctx.beginPath();
        ctx.arc(r.x, r.y, 2, 0, Math.PI * 2);
        ctx.fill();
        if (r.y <= r.burstY) {
          const n = 44 + Math.floor(Math.random() * 28);
          for (let i = 0; i < n; i++) {
            const a = (i / n) * Math.PI * 2;
            const sp = 50 + Math.random() * 150;
            state.sparks.push({
              x: r.x,
              y: r.y,
              vx: Math.cos(a) * sp,
              vy: Math.sin(a) * sp,
              life: 1 + Math.random() * 0.8,
              max: 1.8,
              color: r.color,
            });
          }
        }
      }
      state.rockets = state.rockets.filter((r) => r.y > r.burstY);

      for (const s of state.sparks) {
        s.vy += 80 * dt;
        s.vx *= 0.985;
        s.x += s.vx * dt;
        s.y += s.vy * dt;
        s.life -= dt;
        const a = Math.max(0, s.life / s.max);
        ctx.fillStyle = `rgba(${s.color},${a})`;
        ctx.beginPath();
        ctx.arc(s.x, s.y, 1.8, 0, Math.PI * 2);
        ctx.fill();
      }
      state.sparks = state.sparks.filter((s) => s.life > 0);
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Comets
Comets arc across the sky with glowing curved tails.
URL: https://dev.ononc.com/backgrounds/comets
Path: src/components/backgrounds/comets.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface CometsProps extends HTMLAttributes<HTMLDivElement> {
  count?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Comet {
  x: number;
  y: number;
  vx: number;
  vy: number;
  hist: [number, number][];
  color: string;
}

interface State {
  comets: Comet[];
}

export function Comets({
  className,
  count = 4,
  colors = ["196,181,253", "94,234,255", "244,114,182"],
  children,
  ...props
}: CometsProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const spawn = (): Comet => {
        const fromLeft = Math.random() > 0.5;
        const speed = 120 + Math.random() * 120;
        const ang = (fromLeft ? 0.2 : Math.PI - 0.2) + (Math.random() - 0.5) * 0.5;
        return {
          x: fromLeft ? -40 : width + 40,
          y: Math.random() * height * 0.6,
          vx: Math.cos(ang) * speed,
          vy: Math.sin(ang) * speed,
          hist: [],
          color: colors[Math.floor(Math.random() * colors.length)],
        };
      };
      return { comets: Array.from({ length: count }, spawn) };
    },
    draw: ({ ctx, width, height }, state, _t, dt) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";
      ctx.lineCap = "round";

      for (const c of state.comets) {
        // Gentle curve: rotate velocity slightly.
        const cosr = Math.cos(0.6 * dt);
        const sinr = Math.sin(0.6 * dt);
        const nvx = c.vx * cosr - c.vy * sinr;
        const nvy = c.vx * sinr + c.vy * cosr;
        c.vx = nvx;
        c.vy = nvy;
        c.x += c.vx * dt;
        c.y += c.vy * dt;
        c.hist.push([c.x, c.y]);
        if (c.hist.length > 28) c.hist.shift();

        for (let i = 1; i < c.hist.length; i++) {
          const a = i / c.hist.length;
          ctx.strokeStyle = `rgba(${c.color},${a * 0.7})`;
          ctx.lineWidth = a * 3;
          ctx.beginPath();
          ctx.moveTo(c.hist[i - 1][0], c.hist[i - 1][1]);
          ctx.lineTo(c.hist[i][0], c.hist[i][1]);
          ctx.stroke();
        }
        const glow = ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, 8);
        glow.addColorStop(0, `rgba(${c.color},1)`);
        glow.addColorStop(1, `rgba(${c.color},0)`);
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(c.x, c.y, 8, 0, Math.PI * 2);
        ctx.fill();

        if (c.x < -60 || c.x > width + 60 || c.y < -60 || c.y > height + 60) {
          const fromLeft = Math.random() > 0.5;
          const speed = 120 + Math.random() * 120;
          const ang = (fromLeft ? 0.2 : Math.PI - 0.2) + (Math.random() - 0.5) * 0.5;
          c.x = fromLeft ? -40 : width + 40;
          c.y = Math.random() * height * 0.6;
          c.vx = Math.cos(ang) * speed;
          c.vy = Math.sin(ang) * speed;
          c.hist = [];
        }
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Aurora Curtains
Vertical curtains of light shimmering like the aurora.
URL: https://dev.ononc.com/backgrounds/aurora-curtains
Path: src/components/backgrounds/aurora-curtains.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface AuroraCurtainsProps extends HTMLAttributes<HTMLDivElement> {
  colors?: string[];
  children?: ReactNode;
}

interface Curtain {
  xBase: number;
  width: number;
  amp: number;
  speed: number;
  phase: number;
  color: string;
}

interface State {
  curtains: Curtain[];
}

export function AuroraCurtains({
  className,
  colors = ["139,92,246", "34,211,238", "120,255,180", "244,114,182"],
  children,
  ...props
}: AuroraCurtainsProps) {
  const ref = useCanvas<State>({
    init: ({ width }) => {
      const curtains: Curtain[] = Array.from({ length: 6 }, (_, i) => ({
        xBase: (width * (i + 0.5)) / 6,
        width: 40 + Math.random() * 70,
        amp: 20 + Math.random() * 50,
        speed: 0.4 + Math.random() * 0.7,
        phase: i * 1.3,
        color: colors[i % colors.length],
      }));
      return { curtains };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.globalCompositeOperation = "lighter";

      for (const c of state.curtains) {
        const leftX = (y: number) =>
          c.xBase + Math.sin(y * 0.011 + t * c.speed + c.phase) * c.amp;
        ctx.beginPath();
        ctx.moveTo(leftX(0), 0);
        for (let y = 0; y <= height; y += 16) ctx.lineTo(leftX(y), y);
        for (let y = height; y >= 0; y -= 16) ctx.lineTo(leftX(y) + c.width, y);
        ctx.closePath();

        const grad = ctx.createLinearGradient(0, 0, 0, height);
        grad.addColorStop(0, `rgba(${c.color},0)`);
        grad.addColorStop(0.4, `rgba(${c.color},0.22)`);
        grad.addColorStop(0.75, `rgba(${c.color},0.12)`);
        grad.addColorStop(1, `rgba(${c.color},0)`);
        ctx.fillStyle = grad;
        ctx.fill();
      }
      ctx.globalCompositeOperation = "source-over";
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Cloth Flag
A flag-like mesh rippling and self-shading in the wind.
URL: https://dev.ononc.com/backgrounds/cloth-flag
Path: src/components/backgrounds/cloth-flag.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface ClothFlagProps extends HTMLAttributes<HTMLDivElement> {
  cols?: number;
  rows?: number;
  /** Left and right edge colors as [r,g,b]. */
  from?: [number, number, number];
  to?: [number, number, number];
  children?: ReactNode;
}

interface State {
  cols: number;
  rows: number;
}

export function ClothFlag({
  className,
  cols = 22,
  rows = 15,
  from = [139, 92, 246],
  to = [34, 211, 238],
  children,
  ...props
}: ClothFlagProps) {
  const ref = useCanvas<State>({
    init: () => ({ cols, rows }),
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const { cols: C, rows: R } = state;

      const pt = (c: number, r: number) => {
        const gx = c / (C - 1);
        const gy = r / (R - 1);
        const wave =
          (Math.sin(gx * 6 - t * 2.5) + Math.sin(gy * 4 + t * 1.3) * 0.5) * gx;
        return {
          x: gx * width + Math.sin(gy * 5 + t * 2) * gx * width * 0.02,
          y: gy * height + wave * height * 0.09,
          z: wave,
        };
      };

      for (let r = 0; r < R - 1; r++) {
        for (let c = 0; c < C - 1; c++) {
          const tl = pt(c, r);
          const tr = pt(c + 1, r);
          const br = pt(c + 1, r + 1);
          const bl = pt(c, r + 1);
          const gx = c / (C - 1);
          const shade = 0.45 + 0.55 * ((tl.z + br.z) / 2 + 0.5);
          const cr = Math.round((from[0] + (to[0] - from[0]) * gx) * shade);
          const cg = Math.round((from[1] + (to[1] - from[1]) * gx) * shade);
          const cb = Math.round((from[2] + (to[2] - from[2]) * gx) * shade);
          ctx.fillStyle = `rgb(${cr},${cg},${cb})`;
          ctx.beginPath();
          ctx.moveTo(tl.x, tl.y);
          ctx.lineTo(tr.x, tr.y);
          ctx.lineTo(br.x, br.y);
          ctx.lineTo(bl.x, bl.y);
          ctx.closePath();
          ctx.fill();
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Voronoi Fill
Filled Voronoi regions drifting like stained glass.
URL: https://dev.ononc.com/backgrounds/voronoi-fill
Path: src/components/backgrounds/voronoi-fill.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface VoronoiFillProps extends HTMLAttributes<HTMLDivElement> {
  seeds?: number;
  /** Grid step in pixels. */
  step?: number;
  colors?: string[];
  children?: ReactNode;
}

interface Seed {
  x: number;
  y: number;
  vx: number;
  vy: number;
  color: string;
}

interface State {
  seeds: Seed[];
  step: number;
}

export function VoronoiFill({
  className,
  seeds = 13,
  step = 9,
  colors = ["139,92,246", "34,211,238", "244,114,182", "79,70,229", "120,255,180"],
  children,
  ...props
}: VoronoiFillProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => ({
      step,
      seeds: Array.from({ length: seeds }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: (Math.random() - 0.5) * 0.4,
        vy: (Math.random() - 0.5) * 0.4,
        color: colors[Math.floor(Math.random() * colors.length)],
      })),
    }),
    draw: ({ ctx, width, height }, state) => {
      ctx.clearRect(0, 0, width, height);
      for (const s of state.seeds) {
        s.x += s.vx;
        s.y += s.vy;
        if (s.x < 0 || s.x > width) s.vx *= -1;
        if (s.y < 0 || s.y > height) s.vy *= -1;
      }
      const st = state.step;
      for (let y = 0; y < height; y += st) {
        for (let x = 0; x < width; x += st) {
          let m1 = Infinity;
          let m2 = Infinity;
          let color = state.seeds[0].color;
          for (const s of state.seeds) {
            const dx = x - s.x;
            const dy = y - s.y;
            const d = dx * dx + dy * dy;
            if (d < m1) {
              m2 = m1;
              m1 = d;
              color = s.color;
            } else if (d < m2) {
              m2 = d;
            }
          }
          const border = Math.sqrt(m2) - Math.sqrt(m1);
          const edge = border < 6 ? border / 6 : 1;
          ctx.fillStyle = `rgba(${color},${0.45 * edge + 0.05})`;
          ctx.fillRect(x, y, st, st);
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Aurora
Soft gradient halos that drift like the northern lights.
URL: https://dev.ononc.com/backgrounds/aurora-background
Path: src/components/backgrounds/aurora-background.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface AuroraBackgroundProps extends HTMLAttributes<HTMLDivElement> {
  /** Override the three aurora colors (CSS color strings). */
  colors?: [string, string, string];
  /** Strength of the blur halo in pixels. */
  blur?: number;
  children?: ReactNode;
}

/**
 * AuroraBackground — soft, slowly drifting gradient halos behind content.
 * Pure CSS (GPU-friendly), honors prefers-reduced-motion via the global rule.
 */
export function AuroraBackground({
  className,
  colors = ["var(--brand)", "var(--brand-2)", "var(--brand-3)"],
  blur = 80,
  children,
  ...props
}: AuroraBackgroundProps) {
  const [a, b, c] = colors;
  return (
    <div
      className={cn(
        "relative isolate overflow-hidden bg-background",
        className,
      )}
      {...props}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10"
        style={{ filter: `blur(${blur}px)` } as CSSProperties}
      >
        <span
          className="animate-aurora absolute -top-1/3 left-[-10%] h-[60%] w-[55%] rounded-full opacity-60 mix-blend-screen"
          style={{ background: a, animationDelay: "-2s" }}
        />
        <span
          className="animate-aurora absolute top-[10%] right-[-12%] h-[65%] w-[50%] rounded-full opacity-55 mix-blend-screen"
          style={{ background: b, animationDelay: "-8s", animationDuration: "20s" }}
        />
        <span
          className="animate-aurora absolute bottom-[-25%] left-[20%] h-[60%] w-[60%] rounded-full opacity-45 mix-blend-screen"
          style={{ background: c, animationDelay: "-5s", animationDuration: "24s" }}
        />
      </div>
      {/* Top vignette + grain for depth. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10"
        style={{
          background:
            "radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(6,7,13,0.85) 100%)",
        }}
      />
      {children}
    </div>
  );
}
```

### Gradient Mesh
A panning multi-point color mesh finished with fine grain.
URL: https://dev.ononc.com/backgrounds
Path: src/components/backgrounds/gradient-mesh.tsx

```tsx
import type { HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface GradientMeshProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
}

/**
 * GradientMesh — a layered radial-gradient mesh that slowly pans, finished
 * with a faint SVG grain so large color fields don't band. Pure CSS.
 */
export function GradientMesh({
  className,
  children,
  ...props
}: GradientMeshProps) {
  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <div
        aria-hidden
        className="animate-gradient pointer-events-none absolute inset-0 -z-10"
        style={{
          backgroundImage: [
            "radial-gradient(40% 55% at 18% 22%, color-mix(in oklab, var(--brand) 70%, transparent), transparent 70%)",
            "radial-gradient(45% 50% at 82% 18%, color-mix(in oklab, var(--brand-2) 60%, transparent), transparent 70%)",
            "radial-gradient(50% 60% at 70% 88%, color-mix(in oklab, var(--brand-3) 55%, transparent), transparent 72%)",
            "radial-gradient(45% 55% at 25% 85%, color-mix(in oklab, #4f46e5 60%, transparent), transparent 72%)",
          ].join(","),
          backgroundSize: "200% 200%",
          opacity: 0.7,
        }}
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.04] mix-blend-overlay"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
        }}
      />
      {children}
    </div>
  );
}
```

### Particle Field
Drifting particles that link to neighbors and the cursor.
URL: https://dev.ononc.com/backgrounds/particle-field
Path: src/components/backgrounds/particle-field.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface ParticleFieldProps extends HTMLAttributes<HTMLDivElement> {
  /** Approx. particles per 100k px². Higher = denser. */
  density?: number;
  /** Max distance (px) at which particles link. */
  linkDistance?: number;
  /** Particle + link color. */
  color?: string;
  children?: ReactNode;
}

interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  r: number;
}

interface State {
  ps: Particle[];
  pointer: { x: number; y: number; inside: boolean };
}

export function ParticleField({
  className,
  density = 9,
  linkDistance = 130,
  color = "139,160,255",
  children,
  ...props
}: ParticleFieldProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const target = Math.round((width * height) / 100000 * density);
      const count = Math.max(16, Math.min(120, target));
      const ps: Particle[] = Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        vx: (Math.random() - 0.5) * 0.35,
        vy: (Math.random() - 0.5) * 0.35,
        r: Math.random() * 1.6 + 0.7,
      }));
      return { ps, pointer: { x: -9999, y: -9999, inside: false } };
    },
    draw: ({ ctx, width, height }, state) => {
      ctx.clearRect(0, 0, width, height);
      const { ps, pointer } = state;

      for (const p of ps) {
        p.x += p.vx;
        p.y += p.vy;
        if (p.x < -10) p.x = width + 10;
        if (p.x > width + 10) p.x = -10;
        if (p.y < -10) p.y = height + 10;
        if (p.y > height + 10) p.y = -10;

        if (pointer.inside) {
          const dx = pointer.x - p.x;
          const dy = pointer.y - p.y;
          const d2 = dx * dx + dy * dy;
          if (d2 < 150 * 150 && d2 > 0.01) {
            const f = 0.02 / Math.sqrt(d2);
            p.vx += dx * f;
            p.vy += dy * f;
          }
        }
        // gentle damping keeps drift bounded
        p.vx *= 0.992;
        p.vy *= 0.992;
      }

      // links between nearby particles
      for (let i = 0; i < ps.length; i++) {
        for (let j = i + 1; j < ps.length; j++) {
          const a = ps[i];
          const b = ps[j];
          const dx = a.x - b.x;
          const dy = a.y - b.y;
          const dist = Math.hypot(dx, dy);
          if (dist < linkDistance) {
            const alpha = (1 - dist / linkDistance) * 0.5;
            ctx.strokeStyle = `rgba(${color},${alpha})`;
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(a.x, a.y);
            ctx.lineTo(b.x, b.y);
            ctx.stroke();
          }
        }
      }

      // links to the cursor
      if (pointer.inside) {
        for (const p of ps) {
          const dist = Math.hypot(pointer.x - p.x, pointer.y - p.y);
          if (dist < linkDistance * 1.4) {
            const alpha = (1 - dist / (linkDistance * 1.4)) * 0.6;
            ctx.strokeStyle = `rgba(${color},${alpha})`;
            ctx.lineWidth = 1;
            ctx.beginPath();
            ctx.moveTo(pointer.x, pointer.y);
            ctx.lineTo(p.x, p.y);
            ctx.stroke();
          }
        }
      }

      for (const p of ps) {
        ctx.fillStyle = `rgba(${color},0.9)`;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
      }
    },
    onPointer: (state, x, y, inside) => {
      state.pointer.x = x;
      state.pointer.y = y;
      state.pointer.inside = inside;
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Dot Matrix
A grid of dots that swell and brighten near the pointer.
URL: https://dev.ononc.com/backgrounds/dot-matrix
Path: src/components/backgrounds/dot-matrix.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface DotMatrixProps extends HTMLAttributes<HTMLDivElement> {
  /** Spacing between dots in pixels. */
  gap?: number;
  /** Base dot radius in pixels. */
  dotRadius?: number;
  /** Influence radius of the cursor in pixels. */
  reach?: number;
  /** Dot color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface Dot {
  x: number;
  y: number;
}
interface State {
  dots: Dot[];
  pointer: { x: number; y: number; inside: boolean };
  glow: number; // eased pointer presence 0..1
}

export function DotMatrix({
  className,
  gap = 28,
  dotRadius = 1.3,
  reach = 130,
  color = "150,170,255",
  children,
  ...props
}: DotMatrixProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const dots: Dot[] = [];
      const cols = Math.ceil(width / gap);
      const rows = Math.ceil(height / gap);
      const offX = (width - (cols - 1) * gap) / 2;
      const offY = (height - (rows - 1) * gap) / 2;
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          dots.push({ x: offX + c * gap, y: offY + r * gap });
        }
      }
      return { dots, pointer: { x: -9999, y: -9999, inside: false }, glow: 0 };
    },
    draw: ({ ctx, width, height }, state, _t, dt) => {
      ctx.clearRect(0, 0, width, height);
      const { dots, pointer } = state;
      const targetGlow = pointer.inside ? 1 : 0;
      state.glow += (targetGlow - state.glow) * Math.min(1, dt * 6 || 0.2);

      for (const d of dots) {
        let intensity = 0.18;
        let radius = dotRadius;
        if (state.glow > 0.01) {
          const dist = Math.hypot(pointer.x - d.x, pointer.y - d.y);
          if (dist < reach) {
            const f = (1 - dist / reach) * state.glow;
            intensity = 0.18 + f * 0.82;
            radius = dotRadius + f * 2.4;
          }
        }
        ctx.fillStyle = `rgba(${color},${intensity})`;
        ctx.beginPath();
        ctx.arc(d.x, d.y, radius, 0, Math.PI * 2);
        ctx.fill();
      }
    },
    onPointer: (state, x, y, inside) => {
      state.pointer.x = x;
      state.pointer.y = y;
      state.pointer.inside = inside;
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Starfield
Twinkling stars drifting with subtle cursor parallax.
URL: https://dev.ononc.com/backgrounds/starfield
Path: src/components/backgrounds/starfield.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface StarfieldProps extends HTMLAttributes<HTMLDivElement> {
  /** Approx. stars per 100k px². */
  density?: number;
  /** Star color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface Star {
  x: number;
  y: number;
  z: number; // 0..1 depth → size + speed + twinkle rate
  phase: number;
}

interface State {
  stars: Star[];
  pointer: { x: number; y: number; inside: boolean };
}

export function Starfield({
  className,
  density = 14,
  color = "210,220,255",
  children,
  ...props
}: StarfieldProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const count = Math.max(
        24,
        Math.min(220, Math.round(((width * height) / 100000) * density)),
      );
      const stars: Star[] = Array.from({ length: count }, () => ({
        x: Math.random() * width,
        y: Math.random() * height,
        z: Math.random(),
        phase: Math.random() * Math.PI * 2,
      }));
      return { stars, pointer: { x: 0, y: 0, inside: false } };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      const px = state.pointer.inside
        ? (state.pointer.x / width - 0.5) * 2
        : 0;
      const py = state.pointer.inside
        ? (state.pointer.y / height - 0.5) * 2
        : 0;

      for (const s of state.stars) {
        s.y += (0.05 + s.z * 0.35) * 0.6;
        if (s.y > height + 2) {
          s.y = -2;
          s.x = Math.random() * width;
        }
        const twinkle = 0.5 + 0.5 * Math.sin(t * (1 + s.z * 2) + s.phase);
        const size = 0.4 + s.z * 1.6;
        const offX = px * s.z * 14;
        const offY = py * s.z * 14;
        ctx.fillStyle = `rgba(${color},${0.25 + twinkle * 0.7 * s.z})`;
        ctx.beginPath();
        ctx.arc(s.x + offX, s.y + offY, size, 0, Math.PI * 2);
        ctx.fill();
      }
    },
    onPointer: (state, x, y, inside) => {
      state.pointer.x = x;
      state.pointer.y = y;
      state.pointer.inside = inside;
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Waves
Layered sine waves scrolling across the lower edge.
URL: https://dev.ononc.com/backgrounds/waves
Path: src/components/backgrounds/waves.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface WavesProps extends HTMLAttributes<HTMLDivElement> {
  /** Wave layer colors as "r,g,b" strings (back to front). */
  colors?: string[];
  children?: ReactNode;
}

interface Layer {
  color: string;
  amplitude: number;
  wavelength: number;
  speed: number;
  yBase: number;
  phase: number;
}

interface State {
  layers: Layer[];
}

export function Waves({
  className,
  colors = ["139,92,246", "34,211,238", "251,113,133"],
  children,
  ...props
}: WavesProps) {
  const ref = useCanvas<State>({
    init: ({ height }) => {
      const layers: Layer[] = colors.map((color, i) => ({
        color,
        amplitude: 16 + i * 10,
        wavelength: 260 + i * 90,
        speed: 0.6 - i * 0.12,
        yBase: height * (0.62 + i * 0.13),
        phase: i * 1.3,
      }));
      return { layers };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      for (const layer of state.layers) {
        ctx.beginPath();
        ctx.moveTo(0, height);
        for (let x = 0; x <= width; x += 8) {
          const y =
            layer.yBase +
            Math.sin(
              x / layer.wavelength + t * layer.speed + layer.phase,
            ) *
              layer.amplitude;
          ctx.lineTo(x, y);
        }
        ctx.lineTo(width, height);
        ctx.closePath();
        const grad = ctx.createLinearGradient(0, layer.yBase - 60, 0, height);
        grad.addColorStop(0, `rgba(${layer.color},0.30)`);
        grad.addColorStop(1, `rgba(${layer.color},0.02)`);
        ctx.fillStyle = grad;
        ctx.fill();
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Meteors
Glowing meteors streaking diagonally on staggered timers.
URL: https://dev.ononc.com/backgrounds/meteors
Path: src/components/backgrounds/meteors.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn, seededRandom } from "@/lib/utils";

export interface MeteorsProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of meteors. */
  count?: number;
  children?: ReactNode;
}

/**
 * Meteors — streaks that fall diagonally across the field with glowing tails,
 * each on its own delay and duration. Deterministic layout for SSR safety.
 */
export function Meteors({
  className,
  count = 14,
  children,
  ...props
}: MeteorsProps) {
  const meteors = Array.from({ length: count }, (_, i) => {
    const r = seededRandom(i + 3);
    const r2 = seededRandom(i + 71);
    return {
      left: `${r * 100}%`,
      top: `${r2 * 40}%`,
      delay: `${(r * 8).toFixed(2)}s`,
      duration: `${(3 + r2 * 4).toFixed(2)}s`,
      length: `${40 + r * 60}px`,
    };
  });

  return (
    <div
      className={cn(
        "relative isolate overflow-hidden bg-background",
        className,
      )}
      {...props}
    >
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        {meteors.map((m, i) => (
          <span
            key={i}
            className="absolute h-0.5 rounded-full"
            style={
              {
                left: m.left,
                top: m.top,
                width: m.length,
                background:
                  "linear-gradient(90deg, #fff, color-mix(in oklab, var(--brand) 60%, transparent) 40%, transparent)",
                animation: `meteor ${m.duration} linear ${m.delay} infinite`,
                ["--meteor-x" as string]: "-700px",
                ["--meteor-y" as string]: "700px",
                ["--meteor-angle" as string]: "215deg",
                boxShadow: "0 0 6px 1px color-mix(in oklab, var(--brand-ink) 50%, transparent)",
              } as CSSProperties
            }
          />
        ))}
      </div>
      {children}
    </div>
  );
}
```

### Plasma
Vivid blurred color fields panning while the hue rotates.
URL: https://dev.ononc.com/backgrounds
Path: src/components/backgrounds/plasma.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface PlasmaProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
}

/**
 * Plasma — vivid blurred color fields that pan while their hue slowly rotates,
 * giving a living, lava-lamp feel. Pure CSS.
 */
export function Plasma({ className, children, ...props }: PlasmaProps) {
  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10"
        style={{ animation: "hue 14s linear infinite" }}
      >
        <div
          className="animate-gradient absolute inset-[-20%] opacity-80 blur-2xl"
          style={
            {
              backgroundImage: [
                "radial-gradient(35% 45% at 20% 30%, #8b5cf6, transparent 60%)",
                "radial-gradient(40% 45% at 80% 25%, #22d3ee, transparent 60%)",
                "radial-gradient(45% 50% at 65% 80%, #fb7185, transparent 60%)",
                "radial-gradient(40% 45% at 25% 75%, #4f46e5, transparent 60%)",
              ].join(","),
              backgroundSize: "180% 180%",
            } as CSSProperties
          }
        />
      </div>
      {children}
    </div>
  );
}
```

### Flow Grid
A tilted perspective grid scrolling toward the horizon.
URL: https://dev.ononc.com/backgrounds/flow-grid
Path: src/components/backgrounds/flow-grid.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface FlowGridProps extends HTMLAttributes<HTMLDivElement> {
  /** Grid cell size in pixels. */
  size?: number;
  /** Line color (CSS color string). */
  lineColor?: string;
  children?: ReactNode;
}

/**
 * FlowGrid — a tilted perspective grid that scrolls toward the horizon,
 * faded with a radial mask. Pure CSS; the pan honors reduced-motion globally.
 */
export function FlowGrid({
  className,
  size = 44,
  lineColor = "rgba(139,92,246,0.35)",
  children,
  ...props
}: FlowGridProps) {
  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      style={{ ["--grid-size" as string]: `${size}px` }}
      {...props}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 overflow-hidden [perspective:520px]"
      >
        <div
          className="animate-grid-pan absolute inset-[-60%_-20%_-10%] [transform:rotateX(62deg)]"
          style={
            {
              backgroundImage: `linear-gradient(to right, ${lineColor} 1px, transparent 1px), linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)`,
              backgroundSize: `${size}px ${size}px`,
              maskImage:
                "radial-gradient(60% 60% at 50% 35%, #000 30%, transparent 80%)",
              WebkitMaskImage:
                "radial-gradient(60% 60% at 50% 35%, #000 30%, transparent 80%)",
            } as CSSProperties
          }
        />
      </div>
      {/* Horizon glow */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-1/3 -z-10 h-40 opacity-70 blur-2xl"
        style={{
          background:
            "radial-gradient(50% 100% at 50% 50%, color-mix(in oklab, var(--brand-2) 45%, transparent), transparent 70%)",
        }}
      />
      {children}
    </div>
  );
}
```

### Light Beams
Vertical shafts of light, each breathing on its own cadence.
URL: https://dev.ononc.com/backgrounds/light-beams
Path: src/components/backgrounds/light-beams.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn, seededRandom } from "@/lib/utils";

export interface LightBeamsProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of beams. */
  count?: number;
  children?: ReactNode;
}

/**
 * LightBeams — soft vertical shafts of light raining from the top edge, each
 * breathing on its own cadence. Deterministic layout (seeded) so SSR matches.
 */
export function LightBeams({
  className,
  count = 9,
  children,
  ...props
}: LightBeamsProps) {
  const beams = Array.from({ length: count }, (_, i) => {
    const r = seededRandom(i + 1);
    const r2 = seededRandom(i + 99);
    return {
      left: `${(i / count) * 100 + r * 6}%`,
      width: `${1 + r2 * 2.5}px`,
      delay: `${-(r * 6).toFixed(2)}s`,
      duration: `${4 + r2 * 4}s`,
      opacity: 0.25 + r * 0.45,
      hue: i % 3,
    };
  });
  const palette = ["var(--brand-ink)", "var(--brand-2)", "var(--brand-3)"];

  return (
    <div
      className={cn(
        "relative isolate overflow-hidden bg-background",
        className,
      )}
      {...props}
    >
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div
          className="absolute inset-x-0 -top-1/4 h-1/2"
          style={{
            background:
              "radial-gradient(60% 100% at 50% 0%, color-mix(in oklab, var(--brand) 35%, transparent), transparent 70%)",
          }}
        />
        {beams.map((b, i) => (
          <span
            key={i}
            className="animate-pulse absolute top-0 h-full origin-top"
            style={
              {
                left: b.left,
                width: b.width,
                opacity: b.opacity,
                animationDelay: b.delay,
                animationDuration: b.duration,
                background: `linear-gradient(to bottom, ${palette[b.hue]}, transparent 80%)`,
                filter: "blur(0.5px)",
              } as CSSProperties
            }
          />
        ))}
      </div>
      {children}
    </div>
  );
}
```

### Pulse Rings
Concentric rings expanding outward like sonar.
URL: https://dev.ononc.com/backgrounds/pulse-rings
Path: src/components/backgrounds/pulse-rings.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface PulseRingsProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of concentric rings in flight. */
  rings?: number;
  children?: ReactNode;
}

/**
 * PulseRings — concentric rings that expand and fade outward like sonar.
 * Pure CSS via the global `pulse-ring` keyframe; staggered by delay.
 */
export function PulseRings({
  className,
  rings = 5,
  children,
  ...props
}: PulseRingsProps) {
  const items = Array.from({ length: rings });
  const period = 2.8;
  return (
    <div
      className={cn(
        "relative isolate grid place-items-center overflow-hidden bg-background",
        className,
      )}
      {...props}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute left-1/2 top-1/2 -z-10 -translate-x-1/2 -translate-y-1/2"
      >
        {items.map((_, i) => (
          <span
            key={i}
            className="animate-pulse-ring absolute left-1/2 top-1/2 h-48 w-48 -translate-x-1/2 -translate-y-1/2 rounded-full border"
            style={
              {
                borderColor: "color-mix(in oklab, var(--brand) 55%, transparent)",
                animationDelay: `${-(i * period) / rings}s`,
                boxShadow:
                  "0 0 40px color-mix(in oklab, var(--brand) 30%, transparent) inset",
              } as CSSProperties
            }
          />
        ))}
        <span
          className="block h-3 w-3 rounded-full"
          style={{
            background: "var(--brand-ink)",
            boxShadow: "0 0 24px 6px color-mix(in oklab, var(--brand) 60%, transparent)",
          }}
        />
      </div>
      {children}
    </div>
  );
}
```

### Flowing Lines
Silk-like lines waving with layered motion and cursor pull.
URL: https://dev.ononc.com/backgrounds/flowing-lines
Path: src/components/backgrounds/flowing-lines.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface FlowingLinesProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of flowing lines. */
  lines?: number;
  /** Line colors as "r,g,b" (cycled). */
  colors?: string[];
  children?: ReactNode;
}

interface Line {
  offset: number;
  amplitude: number;
  wavelength: number;
  speed: number;
  color: string;
  phase: number;
}

interface State {
  lines: Line[];
  pointer: { y: number; inside: boolean };
}

export function FlowingLines({
  className,
  lines = 18,
  colors = ["139,92,246", "34,211,238", "251,113,133"],
  children,
  ...props
}: FlowingLinesProps) {
  const ref = useCanvas<State>({
    init: ({ height }) => {
      const arr: Line[] = Array.from({ length: lines }, (_, i) => {
        const f = i / Math.max(1, lines - 1);
        return {
          offset: height * (0.12 + f * 0.76),
          amplitude: 14 + (i % 5) * 7,
          wavelength: 300 + (i % 4) * 110,
          speed: 0.25 + (i % 3) * 0.12,
          color: colors[i % colors.length],
          phase: i * 0.6,
        };
      });
      return { lines: arr, pointer: { y: 0, inside: false } };
    },
    draw: ({ ctx, width, height }, state, t) => {
      ctx.clearRect(0, 0, width, height);
      ctx.lineWidth = 1.5;
      for (const line of state.lines) {
        const boost =
          state.pointer.inside
            ? Math.max(0, 1 - Math.abs(state.pointer.y - line.offset) / 120) * 26
            : 0;
        ctx.beginPath();
        for (let x = 0; x <= width; x += 6) {
          const y =
            line.offset +
            Math.sin(x / line.wavelength + t * line.speed + line.phase) *
              (line.amplitude + boost) +
            Math.sin(x / (line.wavelength * 0.4) + t * line.speed * 1.6) * 4;
          if (x === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        ctx.strokeStyle = `rgba(${line.color},0.32)`;
        ctx.stroke();
      }
    },
    onPointer: (state, _x, y, inside) => {
      state.pointer.y = y;
      state.pointer.inside = inside;
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

### Spotlight Cursor
A hidden dot grid revealed only inside a cursor spotlight.
URL: https://dev.ononc.com/backgrounds/spotlight-cursor
Path: src/components/backgrounds/spotlight-cursor.tsx

```tsx
"use client";

import type { CSSProperties, HTMLAttributes, PointerEvent, ReactNode } from "react";
import { useRef } from "react";
import { cn } from "@/lib/utils";

export interface SpotlightCursorProps extends HTMLAttributes<HTMLDivElement> {
  /** Spotlight radius in pixels. */
  radius?: number;
  children?: ReactNode;
}

/**
 * SpotlightCursor — a hidden dot grid that's only revealed inside a soft
 * spotlight tracking the cursor, via a CSS mask updated through variables
 * (no re-renders).
 */
export function SpotlightCursor({
  className,
  radius = 180,
  children,
  ...props
}: SpotlightCursorProps) {
  const ref = useRef<HTMLDivElement>(null);

  const handleMove = (e: PointerEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--sx", `${e.clientX - rect.left}px`);
    el.style.setProperty("--sy", `${e.clientY - rect.top}px`);
  };

  const mask = `radial-gradient(${radius}px circle at var(--sx, 50%) var(--sy, 50%), #000 0%, transparent 72%)`;

  return (
    <div
      ref={ref}
      onPointerMove={handleMove}
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <div
        aria-hidden
        className="absolute inset-0 -z-10"
        style={
          {
            backgroundImage:
              "radial-gradient(circle, color-mix(in oklab, var(--brand-ink) 70%, transparent) 1.2px, transparent 1.2px)",
            backgroundSize: "22px 22px",
            maskImage: mask,
            WebkitMaskImage: mask,
          } as CSSProperties
        }
      />
      {children}
    </div>
  );
}
```

### Matrix Rain
Columns of glyphs falling with glowing fading trails.
URL: https://dev.ononc.com/backgrounds/matrix-rain
Path: src/components/backgrounds/matrix-rain.tsx

```tsx
"use client";

import type { HTMLAttributes, ReactNode } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { cn } from "@/lib/utils";

export interface MatrixRainProps extends HTMLAttributes<HTMLDivElement> {
  /** Font size (px) — also the column width. */
  fontSize?: number;
  /** Glyph color as "r,g,b". */
  color?: string;
  children?: ReactNode;
}

interface State {
  drops: number[];
  acc: number;
}

const GLYPHS = "アイウエオカキクケコサシスセソタチツテトナニヌネ0123456789ABCDEF<>{}/*+-";

export function MatrixRain({
  className,
  fontSize = 14,
  color = "34,211,238",
  children,
  ...props
}: MatrixRainProps) {
  const ref = useCanvas<State>({
    init: ({ width, height }) => {
      const cols = Math.ceil(width / fontSize);
      const drops = Array.from({ length: cols }, () =>
        Math.floor((Math.random() * height) / fontSize),
      );
      return { drops, acc: 0 };
    },
    draw: ({ ctx, width, height }, state, _t, dt) => {
      // Fade the previous frame to leave glowing trails.
      ctx.fillStyle = "rgba(6, 7, 13, 0.1)";
      ctx.fillRect(0, 0, width, height);

      state.acc += dt;
      const step = state.acc >= 0.05;
      if (step) state.acc = 0;

      ctx.font = `${fontSize}px ui-monospace, monospace`;
      for (let i = 0; i < state.drops.length; i++) {
        const x = i * fontSize;
        const y = state.drops[i] * fontSize;
        const glyph = GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
        // Bright head, dimmer tail.
        ctx.fillStyle = `rgba(${color},0.9)`;
        ctx.fillText(glyph, x, y);

        if (step) {
          if (y > height && Math.random() > 0.975) state.drops[i] = 0;
          else state.drops[i] += 1;
        }
      }
    },
  });

  return (
    <div
      className={cn("relative isolate overflow-hidden bg-background", className)}
      {...props}
    >
      <canvas ref={ref} className="absolute inset-0 -z-10 h-full w-full" />
      {children}
    </div>
  );
}
```

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

### Gradient Text
A living gradient that pans across the letters.
URL: https://dev.ononc.com/text/gradient-text
Path: src/components/text/gradient-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface GradientTextProps extends HTMLAttributes<HTMLSpanElement> {
  /** Gradient stops, left to right (CSS color strings). */
  colors?: string[];
  /** Animation duration in seconds. */
  speed?: number;
  children: ReactNode;
}

/**
 * GradientText — a multi-stop gradient clipped to the text that pans
 * horizontally. Pure CSS; freezes under prefers-reduced-motion.
 */
export function GradientText({
  className,
  colors = ["var(--brand-ink)", "var(--brand-2)", "var(--brand-3)", "var(--brand-ink)"],
  speed = 8,
  children,
  ...props
}: GradientTextProps) {
  return (
    <span
      className={cn(
        "animate-gradient bg-clip-text text-transparent",
        className,
      )}
      style={
        {
          backgroundImage: `linear-gradient(100deg, ${colors.join(", ")})`,
          backgroundSize: "200% auto",
          animationDuration: `${speed}s`,
        } as CSSProperties
      }
      {...props}
    >
      {children}
    </span>
  );
}
```

### Shiny Text
A glare that sweeps across muted text on a loop.
URL: https://dev.ononc.com/text/shiny-text
Path: src/components/text/shiny-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ShinyTextProps extends HTMLAttributes<HTMLSpanElement> {
  /** Sweep duration in seconds. */
  speed?: number;
  children: ReactNode;
}

/**
 * ShinyText — muted text with a bright glare that sweeps across on a loop.
 * Pure CSS via the global `shimmer` keyframe.
 */
export function ShinyText({
  className,
  speed = 3,
  children,
  ...props
}: ShinyTextProps) {
  return (
    <span
      className={cn(
        "animate-shimmer bg-clip-text text-transparent",
        className,
      )}
      style={
        {
          backgroundImage:
            "linear-gradient(110deg, var(--muted) 35%, #ffffff 50%, var(--muted) 65%)",
          backgroundSize: "200% 100%",
          animationDuration: `${speed}s`,
        } as CSSProperties
      }
      {...props}
    >
      {children}
    </span>
  );
}
```

### Split Reveal
Words slide up from behind a mask, staggered, on view.
URL: https://dev.ononc.com/text/split-reveal
Path: src/components/text/split-reveal.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface SplitRevealProps {
  /** The text to reveal. */
  text: string;
  className?: string;
  /** Split granularity. */
  by?: "word" | "char";
  /** Seconds between each token. */
  stagger?: number;
  /** Delay before the first token (seconds). */
  delay?: number;
  /** Replay every time it scrolls into view (default: once). */
  repeat?: boolean;
}

/**
 * SplitReveal — each word or character slides up from behind a mask, staggered,
 * when the element scrolls into view. The full string stays screen-readable.
 */
export function SplitReveal({
  text,
  className,
  by = "word",
  stagger = by === "word" ? 0.08 : 0.028,
  delay = 0,
  repeat = false,
}: SplitRevealProps) {
  const tokens = by === "word" ? text.split(" ") : Array.from(text);

  const container: Variants = {
    hidden: {},
    show: {
      transition: { staggerChildren: stagger, delayChildren: delay },
    },
  };
  const item: Variants = {
    hidden: { y: "115%" },
    show: {
      y: 0,
      transition: { type: "spring", stiffness: 240, damping: 24 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.3 }}
      aria-label={text}
      className={cn("inline", className)}
    >
      {tokens.map((tok, i) => {
        if (by === "char" && tok === " ") {
          return <span key={i}>{"\u00A0"}</span>;
        }
        return (
          <Fragment key={i}>
            <span
              aria-hidden
              className="inline-block overflow-hidden align-bottom"
              style={{ paddingBottom: "0.12em", marginBottom: "-0.12em" }}
            >
              <motion.span variants={item} className="inline-block">
                {tok}
              </motion.span>
            </span>
            {by === "word" && i < tokens.length - 1 ? " " : null}
          </Fragment>
        );
      })}
    </motion.span>
  );
}
```

### Blur In
Words resolve from a soft blur as they fade in.
URL: https://dev.ononc.com/text/blur-in-text
Path: src/components/text/blur-in-text.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface BlurInTextProps {
  text: string;
  className?: string;
  /** Seconds between each word. */
  stagger?: number;
  /** Delay before the first word (seconds). */
  delay?: number;
  repeat?: boolean;
}

/**
 * BlurInText — words resolve from a soft blur while fading and rising, one
 * after another, when scrolled into view. Stays screen-readable via aria-label.
 */
export function BlurInText({
  text,
  className,
  stagger = 0.09,
  delay = 0,
  repeat = false,
}: BlurInTextProps) {
  const words = text.split(" ");
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { opacity: 0, y: 12, filter: "blur(10px)" },
    show: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: 0.5, ease: "easeOut" },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.4 }}
      aria-label={text}
      className={cn("inline", className)}
    >
      {words.map((word, i) => (
        <Fragment key={i}>
          <motion.span variants={item} aria-hidden className="inline-block">
            {word}
          </motion.span>
          {i < words.length - 1 ? " " : null}
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Typewriter
Types and deletes through a rotating list of phrases.
URL: https://dev.ononc.com/text/typewriter
Path: src/components/text/typewriter.tsx

```tsx
"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface TypewriterProps {
  /** Phrases to cycle through. */
  words: string[];
  typingSpeed?: number;
  deletingSpeed?: number;
  /** Pause (ms) once a word is fully typed. */
  pauseTime?: number;
  className?: string;
  cursorClassName?: string;
  /** Loop back to the first word (default true). */
  loop?: boolean;
}

type Phase = "typing" | "deleting";

/**
 * Typewriter — types each phrase out, pauses, deletes, and advances to the
 * next, with a hard-blinking caret. Stops on the last word when loop=false.
 */
export function Typewriter({
  words,
  typingSpeed = 70,
  deletingSpeed = 38,
  pauseTime = 1400,
  className,
  cursorClassName,
  loop = true,
}: TypewriterProps) {
  const [display, setDisplay] = useState("");
  const [wordIndex, setWordIndex] = useState(0);
  const [phase, setPhase] = useState<Phase>("typing");

  useEffect(() => {
    if (words.length === 0) return;
    const current = words[wordIndex % words.length] ?? "";
    const atLastWord = wordIndex === words.length - 1;
    let timeout: ReturnType<typeof setTimeout>;

    if (phase === "typing") {
      if (display.length < current.length) {
        timeout = setTimeout(
          () => setDisplay(current.slice(0, display.length + 1)),
          typingSpeed,
        );
      } else if (loop || !atLastWord) {
        timeout = setTimeout(() => setPhase("deleting"), pauseTime);
      }
    } else if (display.length > 0) {
      timeout = setTimeout(
        () => setDisplay(current.slice(0, display.length - 1)),
        deletingSpeed,
      );
    } else {
      timeout = setTimeout(() => {
        setWordIndex((i) => (i + 1) % words.length);
        setPhase("typing");
      }, 400);
    }

    return () => clearTimeout(timeout);
  }, [display, phase, wordIndex, words, typingSpeed, deletingSpeed, pauseTime, loop]);

  if (words.length === 0) return null;

  return (
    <span className={cn("inline-flex items-baseline", className)} aria-live="polite">
      <span>{display}</span>
      <span
        aria-hidden
        className={cn(
          "animate-blink ml-0.5 inline-block w-[0.08em] self-stretch bg-current",
          cursorClassName,
        )}
      />
    </span>
  );
}
```

### Rotating Text
Swaps through words in a vertical slot.
URL: https://dev.ononc.com/text/rotating-text
Path: src/components/text/rotating-text.tsx

```tsx
"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface RotatingTextProps {
  words: string[];
  className?: string;
  /** Milliseconds each word is shown. */
  interval?: number;
}

/**
 * RotatingText — swaps through a list of words, each sliding up out of a slot
 * as the next slides in. The current word is announced politely.
 */
export function RotatingText({
  words,
  className,
  interval = 2200,
}: RotatingTextProps) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (words.length <= 1 || prefersReducedMotion()) return;
    const id = setInterval(
      () => setIndex((i) => (i + 1) % words.length),
      interval,
    );
    return () => clearInterval(id);
  }, [words.length, interval]);

  return (
    <span
      className={cn("relative inline-flex overflow-hidden align-bottom", className)}
      aria-live="polite"
    >
      <AnimatePresence mode="wait" initial={false}>
        <motion.span
          key={index}
          initial={{ y: "100%", opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: "-100%", opacity: 0 }}
          transition={{ type: "spring", stiffness: 320, damping: 30 }}
          className="inline-block whitespace-nowrap"
        >
          {words[index]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}
```

### Scramble Text
Glyphs flicker and lock into the final string.
URL: https://dev.ononc.com/text/scramble-text
Path: src/components/text/scramble-text.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { useInView } from "motion/react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface ScrambleTextProps {
  /** Target text to decode to. */
  text: string;
  className?: string;
  /** Glyph pool used while scrambling. */
  glyphs?: string;
  /** Milliseconds per animation step. */
  speed?: number;
  /** Frames each character stays scrambled before locking. */
  framesPerChar?: number;
  /** What starts the effect. */
  trigger?: "view" | "hover" | "mount";
}

const DEFAULT_GLYPHS = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789@#%&*<>/\\[]{}=+-?";

/**
 * ScrambleText — characters flicker through random glyphs and lock in
 * left-to-right. Screen readers get the final text via aria-label.
 */
export function ScrambleText({
  text,
  className,
  glyphs = DEFAULT_GLYPHS,
  speed = 28,
  framesPerChar = 2,
  trigger = "view",
}: ScrambleTextProps) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.4 });
  const [output, setOutput] = useState(text);
  const timer = useRef<ReturnType<typeof setInterval> | null>(null);

  const run = () => {
    if (prefersReducedMotion()) return;
    if (timer.current) clearInterval(timer.current);
    let frame = 0;
    const total = text.length * framesPerChar;
    timer.current = setInterval(() => {
      frame += 1;
      const revealed = frame / framesPerChar;
      let out = "";
      for (let i = 0; i < text.length; i++) {
        const ch = text[i];
        if (ch === " ") out += " ";
        else if (i < revealed) out += ch;
        else out += glyphs[Math.floor(Math.random() * glyphs.length)];
      }
      setOutput(out);
      if (frame >= total) {
        setOutput(text);
        if (timer.current) clearInterval(timer.current);
      }
    }, speed);
  };

  useEffect(() => {
    if (trigger === "mount") run();
    else if (trigger === "view" && inView) run();
    return () => {
      if (timer.current) clearInterval(timer.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inView, trigger]);

  return (
    <span
      ref={ref}
      className={cn("tabular-nums", className)}
      aria-label={text}
      onMouseEnter={trigger === "hover" ? run : undefined}
    >
      <span aria-hidden>{output}</span>
    </span>
  );
}
```

### Glitch Text
Two color channels jitter and clip for a CRT glitch.
URL: https://dev.ononc.com/text/glitch-text
Path: src/components/text/glitch-text.tsx

```tsx
import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface GlitchTextProps {
  text: string;
  className?: string;
}

/**
 * GlitchText — two offset color channels (cyan / rose) jitter and clip over the
 * base text for a CRT-glitch effect. Pure CSS; settles under reduced-motion.
 */
export function GlitchText({ text, className }: GlitchTextProps) {
  return (
    <span
      className={cn("relative inline-block font-semibold", className)}
      aria-label={text}
    >
      <span aria-hidden className="relative">
        {text}
      </span>
      <span
        aria-hidden
        className="absolute inset-0"
        style={
          {
            color: "var(--brand-2)",
            animation: "glitch-a 2.4s steps(2, jump-none) infinite",
            textShadow: "1px 0 var(--brand-2)",
          } as CSSProperties
        }
      >
        {text}
      </span>
      <span
        aria-hidden
        className="absolute inset-0"
        style={
          {
            color: "var(--brand-3)",
            animation: "glitch-b 3.1s steps(2, jump-none) infinite",
            textShadow: "-1px 0 var(--brand-3)",
          } as CSSProperties
        }
      >
        {text}
      </span>
    </span>
  );
}
```

### Wavy Text
Each letter rides a continuous sine wave.
URL: https://dev.ononc.com/text/wavy-text
Path: src/components/text/wavy-text.tsx

```tsx
import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface WavyTextProps {
  text: string;
  className?: string;
  /** Seconds for one full bob cycle. */
  duration?: number;
  /** Seconds of delay added per letter. */
  stagger?: number;
}

/**
 * WavyText — each letter rides a sine wave, offset by position, for a gentle
 * continuous ripple. Pure CSS; freezes under reduced-motion. Screen readers
 * get the whole word via aria-label.
 */
export function WavyText({
  text,
  className,
  duration = 1.8,
  stagger = 0.06,
}: WavyTextProps) {
  return (
    <span className={cn("inline-flex", className)} aria-label={text}>
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          aria-hidden
          className="inline-block"
          style={
            {
              animation: `wave ${duration}s ease-in-out ${i * stagger}s infinite`,
              whiteSpace: "pre",
            } as CSSProperties
          }
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
    </span>
  );
}
```

### Highlight Text
A marker stroke sweeps in behind the text on view.
URL: https://dev.ononc.com/text/highlight-text
Path: src/components/text/highlight-text.tsx

```tsx
"use client";

import type { ReactNode } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface HighlightTextProps {
  children: ReactNode;
  className?: string;
  /** Marker color (CSS color). */
  color?: string;
  /** Delay before the sweep (seconds). */
  delay?: number;
}

/**
 * HighlightText — a marker stroke sweeps in behind the text from the left the
 * first time it scrolls into view.
 */
export function HighlightText({
  children,
  className,
  color = "color-mix(in oklab, var(--brand) 45%, transparent)",
  delay = 0,
}: HighlightTextProps) {
  return (
    <span className={cn("relative inline-block", className)}>
      <motion.span
        aria-hidden
        className="absolute inset-x-[-0.12em] bottom-[0.04em] -z-10 h-[0.72em] origin-left rounded-[0.2em]"
        style={{ background: color }}
        initial={{ scaleX: 0 }}
        whileInView={{ scaleX: 1 }}
        viewport={{ once: true, amount: 0.6 }}
        transition={{ duration: 0.55, ease: "easeOut", delay }}
      />
      <span className="relative">{children}</span>
    </span>
  );
}
```

### Count Up
Eases a number to its target the first time it's seen.
URL: https://dev.ononc.com/text/count-up
Path: src/components/text/count-up.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { useInView } from "motion/react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface CountUpProps {
  /** Target value. */
  to: number;
  /** Starting value. */
  from?: number;
  /** Tween duration in seconds. */
  duration?: number;
  /** Decimal places. */
  decimals?: number;
  prefix?: string;
  suffix?: string;
  /** Group thousands with commas. */
  separator?: boolean;
  className?: string;
}

/**
 * CountUp — eases a number from `from` to `to` the first time it scrolls into
 * view (easeOutCubic). Jumps straight to the value under reduced-motion.
 */
export function CountUp({
  to,
  from = 0,
  duration = 1.6,
  decimals = 0,
  prefix = "",
  suffix = "",
  separator = true,
  className,
}: CountUpProps) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.5 });
  const [value, setValue] = useState(from);
  const raf = useRef(0);

  useEffect(() => {
    if (!inView) return;
    const seconds = prefersReducedMotion() ? 0 : duration;
    const start = performance.now();
    const tick = (now: number) => {
      const elapsed = (now - start) / 1000;
      const p = seconds <= 0 ? 1 : Math.min(1, elapsed / seconds);
      const eased = 1 - Math.pow(1 - p, 3);
      setValue(from + (to - from) * eased);
      if (p < 1) raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [inView, to, from, duration]);

  const formatted = (() => {
    const fixed = value.toFixed(decimals);
    if (!separator) return fixed;
    const [int, dec] = fixed.split(".");
    const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return dec ? `${grouped}.${dec}` : grouped;
  })();

  return (
    <span ref={ref} className={cn("tabular-nums", className)}>
      {prefix}
      {formatted}
      {suffix}
    </span>
  );
}
```

### Number Ticker
Odometer digits that roll to the target on view.
URL: https://dev.ononc.com/text/number-ticker
Path: src/components/text/number-ticker.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { useInView } from "motion/react";
import { cn, prefersReducedMotion } from "@/lib/utils";

function Digit({ digit }: { digit: number }) {
  return (
    <span className="relative inline-block h-[1em] w-[0.62em] overflow-hidden">
      <span
        className="absolute inset-x-0 top-0 flex flex-col transition-transform duration-700 ease-out"
        style={{ transform: `translateY(-${digit}em)` }}
      >
        {Array.from({ length: 10 }, (_, n) => (
          <span key={n} className="flex h-[1em] items-center justify-center leading-none">
            {n}
          </span>
        ))}
      </span>
    </span>
  );
}

export interface NumberTickerProps {
  value: number;
  prefix?: string;
  suffix?: string;
  className?: string;
}

/**
 * NumberTicker — an odometer. Each digit column rolls to its target when the
 * element scrolls into view. Exposed value is announced via aria-label.
 */
export function NumberTicker({ value, prefix = "", suffix = "", className }: NumberTickerProps) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.6 });
  const [display, setDisplay] = useState(0);

  useEffect(() => {
    if (!inView) return;
    const duration = prefersReducedMotion() ? 0 : 1300;
    const start = performance.now();
    let raf = 0;
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setDisplay(Math.round(value * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, value]);

  const formatted = display.toLocaleString("en-US");

  return (
    <span
      ref={ref}
      aria-label={`${prefix}${value.toLocaleString("en-US")}${suffix}`}
      className={cn("inline-flex items-center tabular-nums", className)}
    >
      <span aria-hidden className="inline-flex items-center">
        {prefix}
        {formatted.split("").map((char, i) =>
          /\d/.test(char) ? (
            <Digit key={i} digit={Number(char)} />
          ) : (
            <span key={i}>{char}</span>
          ),
        )}
        {suffix}
      </span>
    </span>
  );
}
```

### Scroll Reveal
Words light up one by one as the line scrolls through view.
URL: https://dev.ononc.com/text/scroll-reveal
Path: src/components/text/scroll-reveal.tsx

```tsx
"use client";

import { useRef } from "react";
import {
  motion,
  type MotionValue,
  useReducedMotion,
  useScroll,
  useTransform,
} from "motion/react";
import { cn } from "@/lib/utils";

function Word({
  children,
  progress,
  range,
  reduce,
}: {
  children: string;
  progress: MotionValue<number>;
  range: [number, number];
  reduce: boolean;
}) {
  const opacity = useTransform(progress, range, reduce ? [1, 1] : [0.15, 1]);
  return (
    <motion.span aria-hidden style={{ opacity }} className="inline-block">
      {children}&nbsp;
    </motion.span>
  );
}

export interface ScrollRevealProps {
  text: string;
  className?: string;
}

/**
 * ScrollReveal — a paragraph whose words light up one by one, tied to how far
 * the element has scrolled through the viewport. The text stays readable via
 * aria-label.
 */
export function ScrollReveal({ text, className }: ScrollRevealProps) {
  const ref = useRef<HTMLParagraphElement>(null);
  const reduce = useReducedMotion() ?? false;
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start 0.85", "end 0.45"],
  });
  const words = text.split(" ");

  return (
    <p
      ref={ref}
      aria-label={text}
      className={cn("flex flex-wrap text-2xl font-medium sm:text-3xl", className)}
    >
      {words.map((word, i) => (
        <Word
          key={i}
          progress={scrollYProgress}
          range={[i / words.length, (i + 1) / words.length]}
          reduce={reduce}
        >
          {word}
        </Word>
      ))}
    </p>
  );
}
```

### Flip Text
Each character flips up into place on view.
URL: https://dev.ononc.com/text/flip-text
Path: src/components/text/flip-text.tsx

```tsx
"use client";

import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface FlipTextProps {
  text: string;
  className?: string;
  /** Seconds between each character. */
  stagger?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * FlipText — each character flips up from a -90° tilt into place, staggered,
 * when it scrolls into view. The full string stays screen-readable.
 */
export function FlipText({
  text,
  className,
  stagger = 0.04,
  delay = 0,
  repeat = false,
}: FlipTextProps) {
  const chars = Array.from(text);
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { rotateX: -110, y: 16, opacity: 0 },
    show: {
      rotateX: 0,
      y: 0,
      opacity: 1,
      transition: { type: "spring", stiffness: 200, damping: 18, mass: 0.9 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.4 }}
      aria-label={text}
      className={cn("inline-flex [perspective:600px]", className)}
    >
      {chars.map((char, i) => (
        <motion.span
          key={i}
          variants={item}
          aria-hidden
          className="inline-block origin-bottom [transform-style:preserve-3d]"
          style={{ whiteSpace: "pre" }}
        >
          {char === " " ? "\u00A0" : char}
        </motion.span>
      ))}
    </motion.span>
  );
}
```

### Gradient Underline
A gradient underline that grows in on hover and focus.
URL: https://dev.ononc.com/text/gradient-underline
Path: src/components/text/gradient-underline.tsx

```tsx
import type { AnchorHTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface GradientUnderlineProps
  extends AnchorHTMLAttributes<HTMLAnchorElement> {
  children: ReactNode;
}

/**
 * GradientUnderline — a link with a gradient underline that grows in from the
 * left on hover and keyboard focus. Pure CSS via an animated background-size.
 */
export function GradientUnderline({
  className,
  children,
  ...props
}: GradientUnderlineProps) {
  return (
    <a
      className={cn(
        "relative inline-block font-medium text-foreground no-underline",
        "bg-[linear-gradient(90deg,var(--brand),var(--brand-2))] bg-[length:0%_2px] bg-[position:0_100%] bg-no-repeat",
        "transition-[background-size] duration-300 ease-out hover:bg-[length:100%_2px] focus-visible:bg-[length:100%_2px]",
        className,
      )}
      {...props}
    >
      {children}
    </a>
  );
}
```

### Letters Pull-Up
Each letter springs up and fades in, staggered, on view.
URL: https://dev.ononc.com/text/letters-pull-up
Path: src/components/text/letters-pull-up.tsx

```tsx
"use client";

import { motion, useReducedMotion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface LettersPullUpProps {
  text: string;
  className?: string;
  /** Seconds between each letter. */
  stagger?: number;
  delay?: number;
  /** Replay every time it scrolls into view (default: once). */
  repeat?: boolean;
}

/**
 * LettersPullUp — each letter fades and rises into place, staggered, when the
 * element scrolls into view. The full string stays screen-readable via
 * aria-label; under reduced motion the letters appear in place.
 */
export function LettersPullUp({
  text,
  className,
  stagger = 0.04,
  delay = 0,
  repeat = false,
}: LettersPullUpProps) {
  const reduce = useReducedMotion();
  const chars = Array.from(text);

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { y: "0.45em", opacity: 0 },
    show: {
      y: 0,
      opacity: 1,
      transition: { type: "spring", stiffness: 320, damping: 26 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial={reduce ? "show" : "hidden"}
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.4 }}
      aria-label={text}
      className={cn("inline-block", className)}
    >
      {chars.map((char, i) => (
        <motion.span
          key={i}
          variants={item}
          aria-hidden
          className="inline-block"
          style={{ whiteSpace: "pre" }}
        >
          {char === " " ? "\u00A0" : char}
        </motion.span>
      ))}
    </motion.span>
  );
}
```

### Text Reveal
A clip-path mask wipes the text into view.
URL: https://dev.ononc.com/text/text-reveal
Path: src/components/text/text-reveal.tsx

```tsx
"use client";

import { type ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface TextRevealProps {
  children: ReactNode;
  className?: string;
  /** Direction the wipe travels from. */
  direction?: "left" | "right" | "up" | "down";
  delay?: number;
  duration?: number;
  repeat?: boolean;
}

const FROM: Record<NonNullable<TextRevealProps["direction"]>, string> = {
  left: "inset(0 100% 0 0)",
  right: "inset(0 0 0 100%)",
  up: "inset(100% 0 0 0)",
  down: "inset(0 0 100% 0)",
};

/**
 * TextReveal — the text is wiped into view behind a sliding clip-path mask.
 * The text is real (no per-character spans), so it stays fully accessible;
 * under reduced motion it simply appears.
 */
export function TextReveal({
  children,
  className,
  direction = "left",
  delay = 0,
  duration = 0.8,
  repeat = false,
}: TextRevealProps) {
  const reduce = useReducedMotion();
  const shown = "inset(0 0 0 0)";

  return (
    <motion.span
      initial={{ clipPath: reduce ? shown : FROM[direction] }}
      whileInView={{ clipPath: shown }}
      viewport={{ once: !repeat, amount: 0.5 }}
      transition={{
        duration: reduce ? 0 : duration,
        delay: reduce ? 0 : delay,
        ease: [0.22, 1, 0.36, 1],
      }}
      className={cn("inline-block", className)}
    >
      {children}
    </motion.span>
  );
}
```

### Decrypt Text
Characters resolve out of random glyphs in scattered order.
URL: https://dev.ononc.com/text/decrypt-text
Path: src/components/text/decrypt-text.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { useInView } from "motion/react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface DecryptTextProps {
  text: string;
  className?: string;
  /** Glyph pool shown while a character is still encrypted. */
  glyphs?: string;
  /** Milliseconds per reveal step. */
  speed?: number;
  /** Reveal left-to-right instead of in a scattered order. */
  sequential?: boolean;
  /** What starts the effect. */
  trigger?: "view" | "hover" | "mount";
}

const DEFAULT_GLYPHS =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!<>-_\\/[]{}=+*^?#";

function shuffle(arr: number[]) {
  const a = [...arr];
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

/**
 * DecryptText — characters resolve out of random glyphs in a scattered order
 * (or left-to-right when sequential), like a decrypting cipher. The final text
 * is exposed via aria-label and the animated output is aria-hidden; reduced
 * motion shows the text immediately.
 */
export function DecryptText({
  text,
  className,
  glyphs = DEFAULT_GLYPHS,
  speed = 45,
  sequential = false,
  trigger = "view",
}: DecryptTextProps) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.4 });
  const [output, setOutput] = useState(text);
  const timer = useRef<ReturnType<typeof setInterval> | null>(null);

  const run = () => {
    if (prefersReducedMotion()) return;
    if (timer.current) clearInterval(timer.current);
    const indices = Array.from(text)
      .map((_, i) => i)
      .filter((i) => text[i] !== " ");
    const order = sequential ? indices : shuffle(indices);
    const revealed = new Set<number>();
    let step = 0;
    timer.current = setInterval(() => {
      if (step < order.length) {
        revealed.add(order[step]);
        step += 1;
      }
      let out = "";
      for (let i = 0; i < text.length; i++) {
        if (text[i] === " ") out += " ";
        else if (revealed.has(i)) out += text[i];
        else out += glyphs[Math.floor(Math.random() * glyphs.length)];
      }
      setOutput(out);
      if (step >= order.length) {
        setOutput(text);
        if (timer.current) clearInterval(timer.current);
      }
    }, speed);
  };

  useEffect(() => {
    if (trigger === "mount") run();
    else if (trigger === "view" && inView) run();
    return () => {
      if (timer.current) clearInterval(timer.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inView, trigger]);

  return (
    <span
      ref={ref}
      aria-label={text}
      onMouseEnter={trigger === "hover" ? run : undefined}
      className={cn("tabular-nums", className)}
    >
      <span aria-hidden>{output}</span>
    </span>
  );
}
```

### Line Reveal
Each line slides up from behind a mask, in sequence.
URL: https://dev.ononc.com/text/line-reveal
Path: src/components/text/line-reveal.tsx

```tsx
"use client";

import { motion, useReducedMotion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface LineRevealProps {
  /** Each string is one line, revealed in sequence. */
  lines: string[];
  className?: string;
  /** Seconds between each line. */
  stagger?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * LineReveal — each line slides up from behind its own mask, staggered, when the
 * element scrolls into view. Ideal for multi-line headings. The full text is
 * exposed via aria-label; reduced motion shows the lines in place.
 */
export function LineReveal({
  lines,
  className,
  stagger = 0.12,
  delay = 0,
  repeat = false,
}: LineRevealProps) {
  const reduce = useReducedMotion();

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { y: "110%" },
    show: {
      y: 0,
      transition: { type: "spring", stiffness: 200, damping: 26 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial={reduce ? "show" : "hidden"}
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.4 }}
      aria-label={lines.join(" ")}
      className={cn("flex flex-col", className)}
    >
      {lines.map((line, i) => (
        <span
          key={i}
          aria-hidden
          className="overflow-hidden"
          style={{ paddingBottom: "0.12em", marginBottom: "-0.12em" }}
        >
          <motion.span variants={item} className="inline-block">
            {line}
          </motion.span>
        </span>
      ))}
    </motion.span>
  );
}
```

### Tracking In
Letter-spacing expands out of a blur as the text fades in.
URL: https://dev.ononc.com/text/tracking-in
Path: src/components/text/tracking-in.tsx

```tsx
"use client";

import { type ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface TrackingInProps {
  children: ReactNode;
  className?: string;
  delay?: number;
  duration?: number;
  repeat?: boolean;
}

/**
 * TrackingIn — the text expands from tight, blurred letter-spacing into place as
 * it fades in (the classic "tracking-in" title effect), on view. The text is
 * real and fully accessible; reduced motion shows it settled.
 */
export function TrackingIn({
  children,
  className,
  delay = 0,
  duration = 0.9,
  repeat = false,
}: TrackingInProps) {
  const reduce = useReducedMotion();

  return (
    <motion.span
      initial={
        reduce
          ? { opacity: 1, letterSpacing: "0em", filter: "blur(0px)" }
          : { opacity: 0, letterSpacing: "-0.5em", filter: "blur(8px)" }
      }
      whileInView={{ opacity: 1, letterSpacing: "0em", filter: "blur(0px)" }}
      viewport={{ once: !repeat, amount: 0.5 }}
      transition={{
        duration: reduce ? 0 : duration,
        delay: reduce ? 0 : delay,
        ease: [0.22, 1, 0.36, 1],
      }}
      className={cn("inline-block", className)}
    >
      {children}
    </motion.span>
  );
}
```

### Focus Text
Focus rolls across the words, blurring all but the active one.
URL: https://dev.ononc.com/text/focus-text
Path: src/components/text/focus-text.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { useInView, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface FocusTextProps {
  words: string[];
  className?: string;
  /** Milliseconds each word stays in focus. */
  interval?: number;
}

/**
 * FocusText — the words read as a phrase while focus rolls across them: the
 * active word is sharp, the rest are dimmed and blurred. Loops while in view and
 * pauses off-screen. Under reduced motion every word stays sharp. The full
 * phrase is exposed via aria-label.
 */
export function FocusText({ words, className, interval = 1500 }: FocusTextProps) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref);
  const reduce = useReducedMotion();
  const [active, setActive] = useState(0);

  useEffect(() => {
    if (reduce || !inView || words.length < 2) return;
    const id = setInterval(
      () => setActive((a) => (a + 1) % words.length),
      interval,
    );
    return () => clearInterval(id);
  }, [inView, reduce, words.length, interval]);

  return (
    <span
      ref={ref}
      aria-label={words.join(" ")}
      className={cn("inline-flex flex-wrap justify-center gap-x-[0.28em]", className)}
    >
      {words.map((word, i) => {
        const dim = !reduce && i !== active;
        return (
          <span
            key={i}
            aria-hidden
            className={cn(
              "transition-[filter,opacity,color] duration-500",
              dim
                ? "text-muted opacity-50 blur-[3px]"
                : "text-foreground opacity-100 blur-0",
            )}
          >
            {word}
          </span>
        );
      })}
    </span>
  );
}
```

### Text Pressure
Letters swell and thicken toward the cursor.
URL: https://dev.ononc.com/text/text-pressure
Path: src/components/text/text-pressure.tsx

```tsx
"use client";

import { type PointerEvent, useEffect, useRef } from "react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface TextPressureProps {
  text: string;
  className?: string;
  /** Pixel radius of influence around the pointer. */
  radius?: number;
  /** Maximum extra scale applied to the closest letter. */
  maxScale?: number;
}

/**
 * TextPressure — letters swell and thicken toward the pointer, like a pressure
 * field. Pointer-driven (no animation loop); style is written directly to the
 * DOM in a rAF. The full string is exposed via aria-label, and reduced-motion
 * users get a static, unreactive label.
 */
export function TextPressure({
  text,
  className,
  radius = 130,
  maxScale = 0.6,
}: TextPressureProps) {
  const charRefs = useRef<(HTMLSpanElement | null)[]>([]);
  const raf = useRef(0);

  useEffect(() => () => cancelAnimationFrame(raf.current), []);

  const apply = (clientX: number, clientY: number) => {
    charRefs.current.forEach((el) => {
      if (!el) return;
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dist = Math.hypot(clientX - cx, clientY - cy);
      const t = Math.max(0, 1 - dist / radius);
      el.style.transform = `scale(${1 + t * maxScale})`;
      el.style.fontWeight = String(400 + Math.round(t * 500));
    });
  };

  const onPointerMove = (e: PointerEvent<HTMLSpanElement>) => {
    if (prefersReducedMotion()) return;
    const { clientX, clientY } = e;
    cancelAnimationFrame(raf.current);
    raf.current = requestAnimationFrame(() => apply(clientX, clientY));
  };

  const reset = () => {
    cancelAnimationFrame(raf.current);
    charRefs.current.forEach((el) => {
      if (el) {
        el.style.transform = "";
        el.style.fontWeight = "";
      }
    });
  };

  return (
    <span
      aria-label={text}
      onPointerMove={onPointerMove}
      onPointerLeave={reset}
      className={cn("inline-flex cursor-default select-none", className)}
    >
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          ref={(el) => {
            charRefs.current[i] = el;
          }}
          aria-hidden
          className="inline-block origin-center transition-transform duration-150 will-change-transform"
          style={{ whiteSpace: "pre" }}
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
    </span>
  );
}
```

### Underline Draw
A hand-drawn gradient underline draws in beneath the text.
URL: https://dev.ononc.com/text/underline-draw
Path: src/components/text/underline-draw.tsx

```tsx
"use client";

import { type ReactNode, useId } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface UnderlineDrawProps {
  children: ReactNode;
  className?: string;
  delay?: number;
  duration?: number;
  repeat?: boolean;
}

/**
 * UnderlineDraw — a hand-drawn gradient underline that draws itself beneath the
 * text when it scrolls into view. The underline is decorative (aria-hidden); the
 * text stays real and accessible. Reduced motion shows the finished stroke.
 */
export function UnderlineDraw({
  children,
  className,
  delay = 0.1,
  duration = 0.7,
  repeat = false,
}: UnderlineDrawProps) {
  const id = useId();
  const reduce = useReducedMotion();

  return (
    <span className={cn("relative inline-block", className)}>
      {children}
      <svg
        aria-hidden
        viewBox="0 0 300 14"
        preserveAspectRatio="none"
        className="absolute -bottom-[0.18em] left-0 h-[0.34em] w-full overflow-visible"
      >
        <defs>
          <linearGradient id={`${id}-stroke`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="var(--brand)" />
            <stop offset="100%" stopColor="var(--brand-3)" />
          </linearGradient>
        </defs>
        <motion.path
          d="M3 9 C 70 3, 120 13, 180 7 S 270 3, 297 8"
          fill="none"
          stroke={`url(#${id}-stroke)`}
          strokeWidth={4}
          strokeLinecap="round"
          initial={{ pathLength: reduce ? 1 : 0 }}
          whileInView={{ pathLength: 1 }}
          viewport={{ once: !repeat, amount: 0.6 }}
          transition={{
            duration: reduce ? 0 : duration,
            delay: reduce ? 0 : delay,
            ease: "easeInOut",
          }}
        />
      </svg>
    </span>
  );
}
```

### Neon Text
Glowing sign text with a subtle flicker and deep blur halo.
URL: https://dev.ononc.com/text/neon-text
Path: src/components/text/neon-text.tsx

```tsx
import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface NeonTextProps {
  text: string;
  className?: string;
  /** Glow color (default: brand-2/cyan). */
  color?: string;
  /** Flicker intensity 0-1. 0 = steady. */
  flicker?: number;
}

/**
 * NeonText — glowing sign text with an optional subtle flicker. Two overlay
 * layers create depth: a wide blurred glow behind crisp text. Pure CSS;
 * freezes under reduced-motion. Screen readers get the raw text.
 */
export function NeonText({
  text,
  className,
  color = "var(--brand-2)",
  flicker = 0.3,
}: NeonTextProps) {
  return (
    <span className={cn("relative inline-block select-none", className)} aria-label={text}>
      {/* Wide blur glow behind */}
      <span
        aria-hidden
        className="absolute inset-0 select-none"
        style={
          {
            color,
            textShadow: `0 0 18px ${color}, 0 0 42px ${color}, 0 0 80px ${color}`,
            filter: "blur(4px)",
            opacity: 0.65,
            animation:
              flicker > 0
                ? `neon-flicker ${(3 - flicker * 2.4).toFixed(2)}s ease-in-out infinite alternate`
                : "none",
          } as CSSProperties
        }
      >
        {text}
      </span>
      {/* Sharp text layer */}
      <span
        aria-hidden
        className="relative select-none"
        style={
          {
            color: "#ffffff",
            textShadow: `0 0 7px ${color}, 0 0 14px ${color}`,
          } as CSSProperties
        }
      >
        {text}
      </span>
    </span>
  );
}
```

### Holographic Text
Iridescent text whose colors shift through the spectrum continuously.
URL: https://dev.ononc.com/text/holographic-text
Path: src/components/text/holographic-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface HolographicTextProps extends HTMLAttributes<HTMLSpanElement> {
  /** Speed of the hue rotation in seconds. */
  speed?: number;
  children: ReactNode;
}

/**
 * HolographicText — iridescent text whose colors continuously shift through
 * the spectrum, with a subtle shimmer overlay. Pure CSS clip + hue-rotate.
 * Freezes under reduced-motion.
 */
export function HolographicText({
  className,
  speed = 3.5,
  children,
  ...props
}: HolographicTextProps) {
  return (
    <span
      className={cn("inline-block select-none", className)}
      style={
        {
          backgroundImage:
            "linear-gradient(110deg, var(--brand-3), var(--brand), var(--brand-2), var(--brand-3), var(--brand))",
          backgroundSize: "300% 100%",
          backgroundClip: "text",
          WebkitBackgroundClip: "text",
          color: "transparent",
          WebkitTextFillColor: "transparent",
          animation: `holographic ${speed}s linear infinite`,
          filter: "saturate(1.3) brightness(1.1)",
        } as CSSProperties
      }
      {...props}
    >
      <style>{`
        @keyframes holographic {
          0% { background-position: 0% 50%; filter: hue-rotate(0deg) saturate(1.3) brightness(1.1); }
          25% { filter: hue-rotate(90deg) saturate(1.5) brightness(1.2); }
          50% { background-position: 200% 50%; filter: hue-rotate(180deg) saturate(1.3) brightness(1.1); }
          75% { filter: hue-rotate(270deg) saturate(1.5) brightness(1.2); }
          100% { background-position: 0% 50%; filter: hue-rotate(360deg) saturate(1.3) brightness(1.1); }
        }
      `}</style>
      {children}
    </span>
  );
}
```

### Shadow Text
Multi-layered colored shadows that pulse and create dimensional depth.
URL: https://dev.ononc.com/text/shadow-text
Path: src/components/text/shadow-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ShadowTextProps extends HTMLAttributes<HTMLSpanElement> {
  /** Glow color for the layered shadows (default: brand). */
  color?: string;
  children: ReactNode;
}

/**
 * ShadowText — multi-layered colored text-shadows that shift and pulse,
 * creating a dimensional glow around the text. Pure CSS; freezes under
 * reduced-motion. Stays readable via the crisp foreground layer.
 */
export function ShadowText({
  className,
  color = "var(--brand)",
  children,
  ...props
}: ShadowTextProps) {
  return (
    <span
      className={cn("inline-block select-none", className)}
      style={
        {
          color: "#ffffff",
          textShadow: [
            `0 0 10px ${color}`,
            `0 0 28px ${color}`,
            `0 0 52px ${color}`,
            `4px 0 20px var(--brand-2, #22d3ee)`,
            `-4px 0 20px var(--brand-3, #fb7185)`,
          ].join(", "),
          animation: "shadow-pulse 2.8s ease-in-out infinite alternate",
        } as CSSProperties
      }
      {...props}
    >
      <style>{`
        @keyframes shadow-pulse {
          0% {
            text-shadow:
              0 0 8px ${color},
              0 0 22px ${color},
              0 0 44px ${color},
              4px 0 16px var(--brand-2, #22d3ee),
              -4px 0 16px var(--brand-3, #fb7185);
          }
          50% {
            text-shadow:
              0 0 14px ${color},
              0 0 36px ${color},
              0 0 64px ${color},
              6px 0 28px var(--brand-2, #22d3ee),
              -6px 0 28px var(--brand-3, #fb7185);
          }
          100% {
            text-shadow:
              0 0 8px ${color},
              0 0 22px ${color},
              0 0 44px ${color},
              4px 0 16px var(--brand-2, #22d3ee),
              -4px 0 16px var(--brand-3, #fb7185);
          }
        }
      `}</style>
      {children}
    </span>
  );
}
```

### Breathing Text
Text gently expands and contracts like a breathing rhythm.
URL: https://dev.ononc.com/text/breathing-text
Path: src/components/text/breathing-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface BreathingTextProps extends HTMLAttributes<HTMLSpanElement> {
  /** Seconds for one full breath cycle. */
  duration?: number;
  /** Maximum scale factor (e.g. 1.06). */
  scale?: number;
  children: ReactNode;
}

/**
 * BreathingText — text gently expands and contracts like a breathing rhythm.
 * Uses the global `float` keyframe with a scale-only variant. Pure CSS;
 * settles under reduced-motion. Stays fully readable.
 */
export function BreathingText({
  className,
  duration = 4,
  scale = 1.04,
  children,
  ...props
}: BreathingTextProps) {
  return (
    <span
      className={cn("inline-block", className)}
      style={
        {
          animationName: "breathing",
          animationDuration: `${duration}s`,
          animationTimingFunction: "ease-in-out",
          animationIterationCount: "infinite",
          "--breathing-scale": scale,
        } as CSSProperties
      }
      {...props}
    >
      <style>{`
        @keyframes breathing {
          0%, 100% { transform: scale(1); opacity: 0.85; }
          50% { transform: scale(var(--breathing-scale, 1.04)); opacity: 1; }
        }
      `}</style>
      {children}
    </span>
  );
}
```

### Ghost Text
Ethereal text that fades in and out like an apparition, with a subtle drift.
URL: https://dev.ononc.com/text/ghost-text
Path: src/components/text/ghost-text.tsx

```tsx
import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface GhostTextProps {
  text: string;
  className?: string;
  /** Seconds for one apparition cycle. */
  duration?: number;
}

/**
 * GhostText — ethereal text that continuously fades in and out like an
 * apparition, with a subtle vertical drift. Pure CSS; freezes under
 * reduced-motion. Accessible via aria-label.
 */
export function GhostText({
  text,
  className,
  duration = 3.4,
}: GhostTextProps) {
  return (
    <span className={cn("inline-block select-none", className)} aria-label={text}>
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          aria-hidden
          className="inline-block"
          style={
            {
              animation: `ghost-appear ${duration}s ease-in-out ${i * 0.08}s infinite`,
              whiteSpace: "pre",
            } as CSSProperties
          }
        >
          {char === " " ? "\u00A0" : char}
          <style>{`
            @keyframes ghost-appear {
              0%, 100% { opacity: 0.12; transform: translateY(3px); }
              45% { opacity: 0.9; transform: translateY(-2px); }
              55% { opacity: 0.95; transform: translateY(-2px); }
            }
          `}</style>
        </span>
      ))}
    </span>
  );
}
```

### Glow Pulse Text
Expanding glow rings pulse outward from the text like a heartbeat.
URL: https://dev.ononc.com/text/glow-pulse-text
Path: src/components/text/glow-pulse-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface GlowPulseTextProps extends HTMLAttributes<HTMLSpanElement> {
  /** Glow color (default: brand). */
  color?: string;
  /** Seconds for one pulse cycle. */
  duration?: number;
  children: ReactNode;
}

/**
 * GlowPulseText — text with an expanding/contracting glow halo like a
 * heartbeat. Two rings pulse outward alternating, creating depth. Pure CSS;
 * freezes under reduced-motion.
 */
export function GlowPulseText({
  className,
  color = "var(--brand)",
  duration = 2.2,
  children,
  ...props
}: GlowPulseTextProps) {
  return (
    <span
      className={cn("relative inline-block select-none", className)}
      {...props}
    >
      {/* Outer pulse ring */}
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 select-none"
        style={
          {
            color: "transparent",
            WebkitTextStroke: `1px ${color}`,
            textStroke: `1px ${color}`,
            animation: `glow-ring-a ${duration}s ease-out infinite`,
          } as CSSProperties
        }
      >
        {children}
      </span>
      {/* Inner pulse ring — offset timing */}
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 select-none"
        style={
          {
            color: "transparent",
            WebkitTextStroke: `2px ${color}`,
            textStroke: `2px ${color}`,
            animation: `glow-ring-b ${duration}s ease-out ${duration / 2}s infinite`,
          } as CSSProperties
        }
      >
        {children}
      </span>
      <span className="relative">{children}</span>
      <style>{`
        @keyframes glow-ring-a {
          0% { opacity: 0.7; transform: scale(0.96); }
          100% { opacity: 0; transform: scale(1.08); }
        }
        @keyframes glow-ring-b {
          0% { opacity: 0.5; transform: scale(0.94); }
          100% { opacity: 0; transform: scale(1.06); }
        }
      `}</style>
    </span>
  );
}
```

### Ticker Text
News-ticker style scrolling text that loops seamlessly.
URL: https://dev.ononc.com/text/ticker-text
Path: src/components/text/ticker-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface TickerTextProps extends HTMLAttributes<HTMLDivElement> {
  /** Seconds for one full scroll cycle. */
  speed?: number;
  /** Direction of scroll. */
  direction?: "left" | "right";
  /** Pause on hover (default true). */
  pauseOnHover?: boolean;
  children: ReactNode;
}

/**
 * TickerText — a news-ticker style scrolling text. Content is duplicated so
 * the loop is seamless. Pure CSS marquee; freezes under reduced-motion.
 */
export function TickerText({
  className,
  speed = 16,
  direction = "left",
  pauseOnHover = true,
  children,
  ...props
}: TickerTextProps) {
  return (
    <div
      className={cn(
        "overflow-hidden whitespace-nowrap",
        pauseOnHover && "[&:hover_>_span]:[animation-play-state:paused]",
        className,
      )}
      {...props}
    >
      <span
        className="inline-block"
        style={
          {
            animation: `ticker-scroll ${speed}s linear infinite`,
            animationDirection: direction === "right" ? "reverse" : "normal",
          } as CSSProperties
        }
      >
        <style>{`
          @keyframes ticker-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
          }
        `}</style>
        {children}
        {/* Duplicate for seamless loop */}
        <span aria-hidden className="mx-8">
          {children}
        </span>
      </span>
    </div>
  );
}
```

### Striped Text
Animated diagonal stripes flow through the letters.
URL: https://dev.ononc.com/text/striped-text
Path: src/components/text/striped-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface StripedTextProps extends HTMLAttributes<HTMLSpanElement> {
  /** Colors to stripe through (default: brand spectrum). */
  colors?: string[];
  /** Stripe angle in degrees. */
  angle?: number;
  /** Seconds for one full cycle. */
  speed?: number;
  children: ReactNode;
}

/**
 * StripedText — animated diagonal stripes flow through the text via
 * background-clip. Pure CSS; freezes under reduced-motion.
 */
export function StripedText({
  className,
  colors = ["var(--brand)", "var(--brand-2)", "var(--brand-3)", "var(--brand-ink)"],
  angle = 45,
  speed = 4,
  children,
  ...props
}: StripedTextProps) {
  const stops = colors
    .flatMap((c, i, arr) => {
      const start = (i / arr.length) * 100;
      const end = ((i + 1) / arr.length) * 100;
      return [`${c} ${start}%`, `${c} ${end}%`];
    })
    .join(", ");

  return (
    <span
      className={cn("inline-block select-none", className)}
      style={
        {
          backgroundImage: `repeating-linear-gradient(${angle}deg, ${stops})`,
          backgroundSize: "200% 200%",
          backgroundClip: "text",
          WebkitBackgroundClip: "text",
          color: "transparent",
          WebkitTextFillColor: "transparent",
          animation: `stripe-march ${speed}s linear infinite`,
        } as CSSProperties
      }
      {...props}
    >
      <style>{`
        @keyframes stripe-march {
          0% { background-position: 0% 0%; }
          100% { background-position: 100% 100%; }
        }
      `}</style>
      {children}
    </span>
  );
}
```

### Staggered Fade
Each character fades, slides, and rotates into place one by one.
URL: https://dev.ononc.com/text/staggered-fade
Path: src/components/text/staggered-fade.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface StaggeredFadeProps {
  text: string;
  className?: string;
  /** Seconds between each character entry. */
  stagger?: number;
  /** Initial rotation in degrees. */
  rotate?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * StaggeredFade — each character fades in, slides up, and rotates into
 * place one by one on view. Accessible via aria-label.
 */
export function StaggeredFade({
  text,
  className,
  stagger = 0.04,
  rotate = 12,
  delay = 0,
  repeat = false,
}: StaggeredFadeProps) {
  const chars = Array.from(text);
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { opacity: 0, y: 18, rotate: rotate },
    show: {
      opacity: 1,
      y: 0,
      rotate: 0,
      transition: { type: "spring", stiffness: 180, damping: 18 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.3 }}
      aria-label={text}
      className={cn("inline-flex", className)}
    >
      {chars.map((char, i) => (
        <Fragment key={i}>
          <motion.span
            variants={item}
            aria-hidden
            className="inline-block"
            style={{ whiteSpace: "pre" }}
          >
            {char === " " ? "\u00A0" : char}
          </motion.span>
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Rising Text
Each character rises up from below with a spring settle.
URL: https://dev.ononc.com/text/rising-text
Path: src/components/text/rising-text.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface RisingTextProps {
  text: string;
  className?: string;
  /** Seconds between each character. */
  stagger?: number;
  /** Vertical rise distance in px. */
  rise?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * RisingText — each character rises up from below, fades in, and scales
 * slightly larger before settling. Staggered on scroll into view. Accessible
 * via aria-label.
 */
export function RisingText({
  text,
  className,
  stagger = 0.03,
  rise = 32,
  delay = 0,
  repeat = false,
}: RisingTextProps) {
  const chars = Array.from(text);
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { opacity: 0, y: rise, scale: 0.7 },
    show: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: { type: "spring", stiffness: 300, damping: 24 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.3 }}
      aria-label={text}
      className={cn("inline-flex", className)}
    >
      {chars.map((char, i) => (
        <Fragment key={i}>
          <motion.span
            variants={item}
            aria-hidden
            className="inline-block"
            style={{ whiteSpace: "pre" }}
          >
            {char === " " ? "\u00A0" : char}
          </motion.span>
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Kinetic Reveal
Words burst in with scale, rotation, and blur in a springy sequence.
URL: https://dev.ononc.com/text/kinetic-reveal
Path: src/components/text/kinetic-reveal.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface KineticRevealProps {
  text: string;
  className?: string;
  /** Seconds between each word. */
  stagger?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * KineticReveal — each word bursts in with scale, rotation, and a blur that
 * resolves, staggered on scroll into view. Energetic entry suited for hero
 * headlines. Accessible via aria-label.
 */
export function KineticReveal({
  text,
  className,
  stagger = 0.1,
  delay = 0,
  repeat = false,
}: KineticRevealProps) {
  const words = text.split(" ");
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: {
      opacity: 0,
      scale: 0.3,
      rotate: -8,
      filter: "blur(12px)",
    },
    show: {
      opacity: 1,
      scale: 1,
      rotate: 0,
      filter: "blur(0px)",
      transition: {
        type: "spring",
        stiffness: 200,
        damping: 16,
        mass: 0.8,
      },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.4 }}
      aria-label={text}
      className={cn("inline-flex flex-wrap gap-x-[0.25em]", className)}
    >
      {words.map((word, i) => (
        <Fragment key={i}>
          <motion.span variants={item} aria-hidden className="inline-block">
            {word}
          </motion.span>
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Fire Text
Letters flicker with flame-like scale, opacity, and blur in a continuous loop.
URL: https://dev.ononc.com/text/fire-text
Path: src/components/text/fire-text.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface FireTextProps {
  text: string;
  className?: string;
  /** Seconds for one full flicker cycle per letter. */
  duration?: number;
}

/**
 * FireText — letters flicker with flame-like scale, opacity, color, and blur
 * shifts, each offset slightly. Uses motion variants inside a container that
 * animates continuously. Accessible via aria-label.
 */
export function FireText({
  text,
  className,
  duration = 1.6,
}: FireTextProps) {
  const chars = Array.from(text);

  const container: Variants = {
    animate: {
      transition: {
        staggerChildren: 0.07,
        repeat: Infinity,
        repeatType: "loop",
      },
    },
  };

  const flame = (i: number): Variants => ({
    animate: {
      scale: [1, 1.06, 0.96, 1.04, 0.98, 1],
      opacity: [0.85, 1, 0.8, 1, 0.88, 0.85],
      filter: [
        "blur(0px)",
        "blur(0.6px)",
        "blur(0px)",
        "blur(0.4px)",
        "blur(0px)",
        "blur(0px)",
      ],
      transition: {
        duration,
        delay: i * 0.02,
        ease: "easeInOut",
        repeat: Infinity,
        repeatType: "loop",
      },
    },
  });

  return (
    <motion.span
      variants={container}
      animate="animate"
      aria-label={text}
      className={cn(
        "inline-flex select-none",
        "[&_span]:[text-shadow:0_0_10px_var(--brand-3),0_0_24px_var(--brand-3),0_0_40px_rgba(225,29,98,0.5)]",
        className,
      )}
      style={
        {
          color: "#ffcc80",
        } as CSSProperties
      }
    >
      {chars.map((char, i) => (
        <Fragment key={i}>
          <motion.span
            variants={flame(i)}
            aria-hidden
            className="inline-block"
            style={{ whiteSpace: "pre", textShadow: "0 0 12px var(--brand-3)" }}
          >
            {char === " " ? "\u00A0" : char}
          </motion.span>
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Clip-Draw Text
SVG stroke outline draws in character-by-character, then fills.
URL: https://dev.ononc.com/text/clip-draw-text
Path: src/components/text/clip-draw-text.tsx

```tsx
"use client";

import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface ClipDrawTextProps {
  text: string;
  className?: string;
  /** Stroke color. */
  color?: string;
  /** Seconds between each character. */
  stagger?: number;
  delay?: number;
}

/**
 * ClipDrawText — each character's outline is drawn stroke-by-stroke using
 * SVG text with stroke-dasharray animation. On scroll, the outline "draws in"
 * and fills. Accessible via aria-label on the wrapper.
 */
export function ClipDrawText({
  text,
  className,
  color = "var(--brand)",
  stagger = 0.06,
  delay = 0,
}: ClipDrawTextProps) {
  const fill: Variants = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { delay: stagger * text.length * 0.35 + delay, duration: 0.4 },
    },
  };

  return (
    <motion.span
      className={cn("relative inline-flex", className)}
      aria-label={text}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.5 }}
    >
      <svg
        aria-hidden
        className="absolute inset-0 h-full w-full overflow-visible"
        width="100%"
        height="100%"
      >
        <defs>
          <linearGradient id="clip-draw-grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor={color} />
            <stop offset="100%" stopColor="var(--brand-2)" />
          </linearGradient>
        </defs>
        <text
          x="0"
          y="0.8em"
          className="fill-transparent"
          stroke="url(#clip-draw-grad)"
          strokeWidth="1.5"
          strokeDasharray="200 300"
          strokeLinecap="round"
          strokeLinejoin="round"
          fontSize="inherit"
          fontWeight="inherit"
          fontFamily="inherit"
          letterSpacing="inherit"
        >
          <animate
            attributeName="stroke-dashoffset"
            from="200"
            to="0"
            dur={`${stagger * text.length * 0.5 + 0.8}s`}
            begin={`${delay}s`}
            fill="freeze"
          />
          {text}
        </text>
      </svg>
      {/* Fill that appears after stroke completes */}
      <motion.span
        variants={fill}
        aria-hidden
        className="relative"
        style={
          {
            backgroundImage: `linear-gradient(100deg, ${color}, var(--brand-2))`,
            backgroundClip: "text",
            WebkitBackgroundClip: "text",
            color: "transparent",
            WebkitTextFillColor: "transparent",
          } as React.CSSProperties
        }
      >
        {text}
      </motion.span>
    </motion.span>
  );
}
```

### Morphing Text
Each word scales down while the next scales up in a smooth morph.
URL: https://dev.ononc.com/text/morphing-text
Path: src/components/text/morphing-text.tsx

```tsx
"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface MorphingTextProps {
  /** Words to cycle through. */
  words: string[];
  /** Display time per word in ms. */
  interval?: number;
  className?: string;
}

/**
 * MorphingText — each word scales down and fades out while the next scales
 * up and fades in, creating a smooth morph transition. Resets at end of list.
 */
export function MorphingText({
  words,
  interval = 2600,
  className,
}: MorphingTextProps) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (words.length <= 1) return;
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % words.length);
    }, interval);
    return () => clearInterval(timer);
  }, [words, interval]);

  if (words.length === 0) return null;

  return (
    <span className={cn("relative inline-flex items-center justify-center", className)}>
      <AnimatePresence mode="popLayout">
        <motion.span
          key={words[index]}
          initial={{ opacity: 0, scale: 0.7, filter: "blur(6px)" }}
          animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
          exit={{ opacity: 0, scale: 1.3, filter: "blur(6px)" }}
          transition={{ duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] }}
          className="inline-block"
        >
          {words[index]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}
```

### Split Flap
Retro split-flap display. Each word flips down like a departure board.
URL: https://dev.ononc.com/text/split-flap
Path: src/components/text/split-flap.tsx

```tsx
"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface SplitFlapProps {
  /** Words to cycle through, split-flap style. */
  words: string[];
  /** Display time per word in ms. */
  interval?: number;
  className?: string;
}

/**
 * SplitFlap — old-school split-flap display. Each word flips down (top half
 * fades while bottom half scales in), one after another. Accessible via
 * aria-live.
 */
export function SplitFlap({
  words,
  interval = 2800,
  className,
}: SplitFlapProps) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (words.length <= 1) return;
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % words.length);
    }, interval);
    return () => clearInterval(timer);
  }, [words, interval]);

  if (words.length === 0) return null;

  return (
    <span
      className={cn("relative inline-flex items-center justify-center overflow-hidden", className)}
      aria-live="polite"
    >
      <AnimatePresence mode="popLayout">
        <motion.span
          key={words[index]}
          initial={{ rotateX: -90, opacity: 0, y: -10 }}
          animate={{ rotateX: 0, opacity: 1, y: 0 }}
          exit={{ rotateX: 90, opacity: 0, y: 10 }}
          transition={{ duration: 0.45, ease: [0.45, 0, 0.55, 1] }}
          className="inline-block"
          style={{ transformOrigin: "bottom center" }}
        >
          {words[index]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}
```

### Scatter Text
Characters fly apart and reassemble on hover like scattered cards.
URL: https://dev.ononc.com/text/scatter-text
Path: src/components/text/scatter-text.tsx

```tsx
"use client";

import { Fragment, useEffect, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface ScatterTextProps {
  text: string;
  className?: string;
  /** Trigger: "hover" or "inView" (default: hover). */
  trigger?: "hover" | "inView";
  /** If trigger=inView, whether to repeat. */
  repeat?: boolean;
}

/**
 * ScatterText — on hover, characters fly apart with random offsets and blur,
 * then reassemble when the cursor leaves. On trigger=inView, scatters once
 * on scroll then settles. Accessible via aria-label.
 */
export function ScatterText({
  text,
  className,
  trigger = "hover",
  repeat = false,
}: ScatterTextProps) {
  const chars = Array.from(text);
  const [scattered, setScattered] = useState(false);

  // Seed per character for deterministic random offsets.
  const seededRandom = (seed: number) => {
    let t = seed + 0x6d2b79f5;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };

  return (
    <motion.span
      aria-label={text}
      className={cn("inline-flex", className)}
      onMouseEnter={() => trigger === "hover" && setScattered(true)}
      onMouseLeave={() => trigger === "hover" && setScattered(false)}
      {...(trigger === "inView"
        ? {
            onViewportEnter: () => {
              setScattered(true);
              setTimeout(() => setScattered(false), 800);
            },
          }
        : {})}
    >
      <AnimatePresence>
        {chars.map((char, i) => {
          const r1 = seededRandom(i * 7 + 1);
          const r2 = seededRandom(i * 13 + 3);
          const dx = (r1 - 0.5) * 80;
          const dy = (r2 - 0.5) * 60 - 10;
          const rot = (r1 - 0.5) * 90;

          return (
            <Fragment key={i}>
              <motion.span
                aria-hidden
                className="inline-block"
                style={{ whiteSpace: "pre" }}
                animate={
                  scattered
                    ? {
                        x: dx,
                        y: dy,
                        rotate: rot,
                        scale: 0.8 + r1 * 0.4,
                        opacity: 0.5,
                        filter: "blur(4px)",
                      }
                    : {
                        x: 0,
                        y: 0,
                        rotate: 0,
                        scale: 1,
                        opacity: 1,
                        filter: "blur(0px)",
                      }
                }
                transition={{
                  type: "spring",
                  stiffness: 120,
                  damping: 14,
                  mass: 0.6,
                }}
              >
                {char === " " ? "\u00A0" : char}
              </motion.span>
            </Fragment>
          );
        })}
      </AnimatePresence>
    </motion.span>
  );
}
```

### Perspective Text
Text tilts in 3D towards the mouse with a parallax glow.
URL: https://dev.ononc.com/text/perspective-text
Path: src/components/text/perspective-text.tsx

```tsx
"use client";

import { type PointerEvent, useCallback, useRef } from "react";
import { cn } from "@/lib/utils";

export interface PerspectiveTextProps {
  text: string;
  className?: string;
  /** Maximum tilt in degrees. */
  tilt?: number;
}

/**
 * PerspectiveText — text tilts in 3D toward the mouse pointer with
 * a subtle parallax glow. Pointer-driven via CSS transform on a rAF.
 * Reduced-motion users see static text.
 */
export function PerspectiveText({
  text,
  className,
  tilt = 16,
}: PerspectiveTextProps) {
  const rootRef = useRef<HTMLSpanElement>(null);
  const raf = useRef(0);

  const onPointerMove = useCallback(
    (e: PointerEvent<HTMLSpanElement>) => {
      const el = rootRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const x = (e.clientX - rect.left) / rect.width - 0.5;
      const y = (e.clientY - rect.top) / rect.height - 0.5;

      cancelAnimationFrame(raf.current);
      raf.current = requestAnimationFrame(() => {
        el.style.transform = `perspective(600px) rotateY(${x * tilt}deg) rotateX(${-y * tilt}deg)`;
        el.style.textShadow = [
          `${x * 12}px ${-y * 12}px 18px rgba(139, 92, 246, 0.3)`,
          `${-x * 8}px ${y * 8}px 14px rgba(8, 145, 178, 0.25)`,
        ].join(", ");
      });
    },
    [tilt],
  );

  const reset = useCallback(() => {
    cancelAnimationFrame(raf.current);
    const el = rootRef.current;
    if (el) {
      el.style.transform = "perspective(600px) rotateY(0deg) rotateX(0deg)";
      el.style.textShadow = "";
    }
  }, []);

  return (
    <span
      ref={rootRef}
      aria-label={text}
      onPointerMove={onPointerMove}
      onPointerLeave={reset}
      className={cn(
        "inline-flex cursor-default select-none transition-transform duration-200 ease-out will-change-transform",
        className,
      )}
      style={{ transformStyle: "preserve-3d" }}
    >
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          aria-hidden
          className="inline-block"
          style={{ whiteSpace: "pre", transform: "translateZ(0)" }}
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
    </span>
  );
}
```

### Elastic Text
Letters stretch toward the pointer like a rubber band.
URL: https://dev.ononc.com/text/elastic-text
Path: src/components/text/elastic-text.tsx

```tsx
"use client";

import { type PointerEvent, useCallback, useRef } from "react";
import { cn } from "@/lib/utils";

export interface ElasticTextProps {
  text: string;
  className?: string;
  /** Radius of elastic influence around the pointer (px). */
  radius?: number;
  /** Maximum extra scale applied to letters near the cursor. */
  maxScale?: number;
}

/**
 * ElasticText — letters stretch toward the pointer like rubber, with a
 * gravity-like falloff. Pointer-driven on a rAF; reduced-motion users
 * see static text. Screen readers get the raw text via aria-label.
 */
export function ElasticText({
  text,
  className,
  radius = 120,
  maxScale = 0.5,
}: ElasticTextProps) {
  const charRefs = useRef<(HTMLSpanElement | null)[]>([]);
  const raf = useRef(0);

  const onPointerMove = useCallback(
    (e: PointerEvent<HTMLSpanElement>) => {
      const { clientX, clientY } = e;
      cancelAnimationFrame(raf.current);
      raf.current = requestAnimationFrame(() => {
        charRefs.current.forEach((el) => {
          if (!el) return;
          const r = el.getBoundingClientRect();
          const cx = r.left + r.width / 2;
          const cy = r.top + r.height / 2;
          const dx = clientX - cx;
          const dist = Math.hypot(dx, clientY - cy);
          const t = Math.max(0, 1 - dist / radius);
          const scaleX = 1 + t * maxScale;
          const scaleY = 1 - t * maxScale * 0.4;
          el.style.transform = `scale(${scaleX}, ${scaleY})`;
        });
      });
    },
    [radius, maxScale],
  );

  const reset = useCallback(() => {
    cancelAnimationFrame(raf.current);
    charRefs.current.forEach((el) => {
      if (el) el.style.transform = "";
    });
  }, []);

  return (
    <span
      aria-label={text}
      onPointerMove={onPointerMove}
      onPointerLeave={reset}
      className={cn("inline-flex cursor-default select-none", className)}
    >
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          ref={(el) => {
            charRefs.current[i] = el;
          }}
          aria-hidden
          className="inline-block origin-center"
          style={{ whiteSpace: "pre", transition: "transform 0.2s ease-out" }}
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
    </span>
  );
}
```

### Ripple Text
Letters undulate away from the cursor like ripples on water.
URL: https://dev.ononc.com/text/ripple-text
Path: src/components/text/ripple-text.tsx

```tsx
"use client";

import { type PointerEvent, useCallback, useEffect, useRef } from "react";
import { cn } from "@/lib/utils";

export interface RippleTextProps {
  text: string;
  className?: string;
  /** Radius of the ripple wave in px. */
  radius?: number;
  /** Maximum vertical displacement of letters. */
  amplitude?: number;
}

/**
 * RippleText — letters undulate away from the cursor like a ripple on water.
 * Pointer-driven on a rAF; reduced-motion users see static text. Accessible
 * via aria-label.
 */
export function RippleText({
  text,
  className,
  radius = 100,
  amplitude = 14,
}: RippleTextProps) {
  const charRefs = useRef<(HTMLSpanElement | null)[]>([]);
  const raf = useRef(0);

  const onPointerMove = useCallback(
    (e: PointerEvent<HTMLSpanElement>) => {
      const { clientX, clientY } = e;
      cancelAnimationFrame(raf.current);
      raf.current = requestAnimationFrame(() => {
        charRefs.current.forEach((el) => {
          if (!el) return;
          const r = el.getBoundingClientRect();
          const cx = r.left + r.width / 2;
          const cy = r.top + r.height / 2;
          const dist = Math.hypot(clientX - cx, clientY - cy);
          const t = Math.max(0, 1 - dist / radius);
          // Ripple: sine wave over distance
          const wave = Math.sin(t * Math.PI * 3) * t * amplitude;
          el.style.transform = `translateY(${wave}px)`;
        });
      });
    },
    [radius, amplitude],
  );

  const reset = useCallback(() => {
    cancelAnimationFrame(raf.current);
    charRefs.current.forEach((el) => {
      if (el) el.style.transform = "";
    });
  }, []);

  return (
    <span
      aria-label={text}
      onPointerMove={onPointerMove}
      onPointerLeave={reset}
      className={cn("inline-flex cursor-default select-none", className)}
    >
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          ref={(el) => {
            charRefs.current[i] = el;
          }}
          aria-hidden
          className="inline-block origin-center"
          style={{ whiteSpace: "pre", transition: "transform 0.15s ease-out" }}
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
    </span>
  );
}
```

### Twinkle Text
Each character twinkles with staggered random delays like starlight.
URL: https://dev.ononc.com/text/twinkle-text
Path: src/components/text/twinkle-text.tsx

```tsx
import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface TwinkleTextProps {
  text: string;
  className?: string;
  /** Base duration per character in seconds. */
  duration?: number;
}

/**
 * TwinkleText — each character twinkles with staggered random delays like
 * starlight. Pure CSS; freezes under reduced-motion. Accessible via aria-label.
 */
export function TwinkleText({
  text,
  className,
  duration = 2.2,
}: TwinkleTextProps) {
  const mulberry32 = (seed: number) => {
    let t = seed + 0x6d2b79f5;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };

  return (
    <span className={cn("inline-flex", className)} aria-label={text}>
      {Array.from(text).map((char, i) => {
        const delay = (mulberry32(i * 31 + 7) * duration).toFixed(2);
        const dur = (duration * 0.6 + mulberry32(i * 17 + 3) * duration * 0.8).toFixed(2);
        return (
          <span
            key={i}
            aria-hidden
            className="inline-block"
            style={
              {
                animation: `twinkle ${dur}s ${delay}s ease-in-out infinite`,
                whiteSpace: "pre",
              } as CSSProperties
            }
          >
            {char === " " ? "\u00A0" : char}
          </span>
        );
      })}
      <style>{`
        @keyframes twinkle {
          0%, 100% { opacity: 0.2; }
          30% { opacity: 1; }
          50% { opacity: 0.3; }
          70% { opacity: 0.9; }
        }
      `}</style>
    </span>
  );
}
```

### Pulse Wave Text
A brightness wave sweeps left to right through the text in a loop.
URL: https://dev.ononc.com/text/pulse-wave-text
Path: src/components/text/pulse-wave-text.tsx

```tsx
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface PulseWaveTextProps extends HTMLAttributes<HTMLSpanElement> {
  /** Glow color. */
  color?: string;
  /** Seconds for one full wave cycle. */
  duration?: number;
  children: ReactNode;
}

/**
 * PulseWaveText — a brightness/glow wave sweeps left-to-right through the
 * text in a continuous loop. Uses a gradient mask animated over the text
 * background. Pure CSS; freezes under reduced-motion.
 */
export function PulseWaveText({
  className,
  color = "var(--brand-2)",
  duration = 3,
  children,
  ...props
}: PulseWaveTextProps) {
  return (
    <span
      className={cn("inline-block select-none", className)}
      style={
        {
          backgroundImage: `linear-gradient(90deg, currentColor 0%, currentColor 35%, ${color} 50%, currentColor 65%, currentColor 100%)`,
          backgroundSize: "300% 100%",
          backgroundClip: "text",
          WebkitBackgroundClip: "text",
          color: "transparent",
          WebkitTextFillColor: "transparent",
          animation: `pulse-wave ${duration}s linear infinite`,
        } as CSSProperties
      }
      {...props}
    >
      <style>{`
        @keyframes pulse-wave {
          0% { background-position: 100% 0; }
          100% { background-position: -200% 0; }
        }
      `}</style>
      {children}
    </span>
  );
}
```

### Color Cycle Text
Each character independently cycles through the brand palette.
URL: https://dev.ononc.com/text/color-cycle-text
Path: src/components/text/color-cycle-text.tsx

```tsx
import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface ColorCycleTextProps {
  text: string;
  className?: string;
  /** Seconds for one full cycle per character. */
  duration?: number;
}

/**
 * ColorCycleText — each character independently cycles through the brand
 * palette, staggered so a rainbow wave travels through the text. Pure CSS
 * with per-character keyframes; freezes under reduced-motion. Accessible
 * via aria-label.
 */
export function ColorCycleText({
  text,
  className,
  duration = 4,
}: ColorCycleTextProps) {
  const PALETTE = [
    "var(--brand)",       // violet
    "var(--brand-2)",     // cyan
    "var(--brand-3)",     // rose
    "var(--brand-ink)",   // deep violet
  ];

  return (
    <span className={cn("inline-flex", className)} aria-label={text}>
      <style>{`
        @keyframes cc-a {
          0%, 100% { color: var(--brand); }
          25% { color: var(--brand-2); }
          50% { color: var(--brand-3); }
          75% { color: var(--brand-ink); }
        }
        @keyframes cc-b {
          0%, 100% { color: var(--brand-2); }
          25% { color: var(--brand-3); }
          50% { color: var(--brand-ink); }
          75% { color: var(--brand); }
        }
        @keyframes cc-c {
          0%, 100% { color: var(--brand-3); }
          25% { color: var(--brand-ink); }
          50% { color: var(--brand); }
          75% { color: var(--brand-2); }
        }
        @keyframes cc-d {
          0%, 100% { color: var(--brand-ink); }
          25% { color: var(--brand); }
          50% { color: var(--brand-2); }
          75% { color: var(--brand-3); }
        }
      `}</style>
      {Array.from(text).map((char, i) => {
        const keyframes = ["cc-a", "cc-b", "cc-c", "cc-d"][i % 4];
        return (
          <span
            key={i}
            aria-hidden
            className="inline-block"
            style={
              {
                animation: `${keyframes} ${duration}s ${i * 0.1}s ease-in-out infinite`,
                whiteSpace: "pre",
              } as CSSProperties
            }
          >
            {char === " " ? "\u00A0" : char}
          </span>
        );
      })}
    </span>
  );
}
```

### Flicker In Text
Rapid stroboscopic on/off flicker before text stabilizes, like dying neon.
URL: https://dev.ononc.com/text/flicker-in-text
Path: src/components/text/flicker-in-text.tsx

```tsx
import type { CSSProperties } from "react";
import { cn } from "@/lib/utils";

export interface FlickerInTextProps {
  text: string;
  className?: string;
}

/**
 * FlickerInText — text rapidly strobes on/off (like a dying fluorescent)
 * before stabilizing permanently. Pure CSS animation that runs once;
 * accessible via aria-label.
 */
export function FlickerInText({ text, className }: FlickerInTextProps) {
  return (
    <span className={cn("inline-flex", className)} aria-label={text}>
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          aria-hidden
          className="inline-block"
          style={
            {
              animation: `flicker-in 2.3s ${i * 0.06}s steps(1) forwards`,
              whiteSpace: "pre",
              opacity: 0,
            } as CSSProperties
          }
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
      <style>{`
        @keyframes flicker-in {
          0%   { opacity: 0; }
          4%   { opacity: 1; }
          6%   { opacity: 0.1; }
          10%  { opacity: 1; }
          12%  { opacity: 0; }
          16%  { opacity: 0.6; }
          18%  { opacity: 0; }
          22%  { opacity: 1; }
          24%  { opacity: 0.2; }
          26%  { opacity: 1; }
          50%  { opacity: 0.8; }
          52%  { opacity: 0.3; }
          54%  { opacity: 1; }
          70%  { opacity: 0.9; }
          72%  { opacity: 1; }
          100% { opacity: 1; }
        }
      `}</style>
    </span>
  );
}
```

### Revolve Text
Each character does a 360 spin on its own axis, staggered on view.
URL: https://dev.ononc.com/text/revolve-text
Path: src/components/text/revolve-text.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface RevolveTextProps {
  text: string;
  className?: string;
  /** Seconds between each character. */
  stagger?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * RevolveText — each character does a full 360° rotateY spin into place,
 * staggered on scroll into view. The 3D perspective gives a coin-flip feel.
 * Accessible via aria-label.
 */
export function RevolveText({
  text,
  className,
  stagger = 0.05,
  delay = 0,
  repeat = false,
}: RevolveTextProps) {
  const chars = Array.from(text);
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { rotateY: 180, opacity: 0, scale: 0.4 },
    show: {
      rotateY: 360,
      opacity: 1,
      scale: 1,
      transition: { type: "spring", stiffness: 160, damping: 16, mass: 0.6 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.3 }}
      aria-label={text}
      className={cn("inline-flex [perspective:800px]", className)}
    >
      {chars.map((char, i) => (
        <Fragment key={i}>
          <motion.span
            variants={item}
            aria-hidden
            className="inline-block [transform-style:preserve-3d]"
            style={{ whiteSpace: "pre" }}
          >
            {char === " " ? "\u00A0" : char}
          </motion.span>
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Gravity Text
Letters drop in from above with heavy bounce physics and wobble settle.
URL: https://dev.ononc.com/text/gravity-text
Path: src/components/text/gravity-text.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface GravityTextProps {
  text: string;
  className?: string;
  /** Seconds between each character. */
  stagger?: number;
  /** Drop height in px. */
  drop?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * GravityText — each character drops in from above with a heavy bounce,
 * settling with a secondary wobble. The physics feel (low damping, high mass)
 * differs from RisingText which uses a lighter spring. Accessible via
 * aria-label.
 */
export function GravityText({
  text,
  className,
  stagger = 0.04,
  drop = 60,
  delay = 0,
  repeat = false,
}: GravityTextProps) {
  const chars = Array.from(text);
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { y: -drop, opacity: 0 },
    show: {
      y: 0,
      opacity: 1,
      transition: { type: "spring", stiffness: 120, damping: 8, mass: 1.4 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.3 }}
      aria-label={text}
      className={cn("inline-flex", className)}
    >
      {chars.map((char, i) => (
        <Fragment key={i}>
          <motion.span
            variants={item}
            aria-hidden
            className="inline-block"
            style={{ whiteSpace: "pre" }}
          >
            {char === " " ? "\u00A0" : char}
          </motion.span>
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Zoom Blur Text
Characters zoom in from a huge distant scale with extreme motion blur.
URL: https://dev.ononc.com/text/zoom-blur-text
Path: src/components/text/zoom-blur-text.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface ZoomBlurTextProps {
  text: string;
  className?: string;
  /** Seconds between each character. */
  stagger?: number;
  /** Starting scale. */
  fromScale?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * ZoomBlurText — each character zooms in from a huge distant scale with
 * extreme motion blur, then snaps into place. Dramatic entry suited for
 * hero impact moments. Accessible via aria-label.
 */
export function ZoomBlurText({
  text,
  className,
  stagger = 0.05,
  fromScale = 4,
  delay = 0,
  repeat = false,
}: ZoomBlurTextProps) {
  const chars = Array.from(text);
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { scale: fromScale, opacity: 0, filter: "blur(20px)" },
    show: {
      scale: 1,
      opacity: 1,
      filter: "blur(0px)",
      transition: { type: "spring", stiffness: 240, damping: 22, mass: 0.7 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.3 }}
      aria-label={text}
      className={cn("inline-flex", className)}
    >
      {chars.map((char, i) => (
        <Fragment key={i}>
          <motion.span
            variants={item}
            aria-hidden
            className="inline-block"
            style={{ whiteSpace: "pre" }}
          >
            {char === " " ? "\u00A0" : char}
          </motion.span>
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Warp In Text
Characters warp in from a compressed, skewed state with an energetic snap.
URL: https://dev.ononc.com/text/warp-in-text
Path: src/components/text/warp-in-text.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface WarpInTextProps {
  text: string;
  className?: string;
  /** Seconds between each character. */
  stagger?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * WarpInText — each character warps in from a compressed, skewed, and
 * blurred state, stretching into place with an energetic snap. Differs
 * from ZoomBlur by using skewX and scaleX compression instead of uniform
 * scale. Accessible via aria-label.
 */
export function WarpInText({
  text,
  className,
  stagger = 0.04,
  delay = 0,
  repeat = false,
}: WarpInTextProps) {
  const chars = Array.from(text);
  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: stagger, delayChildren: delay } },
  };
  const item: Variants = {
    hidden: { scaleX: 0.1, skewX: -20, opacity: 0, filter: "blur(6px)" },
    show: {
      scaleX: 1,
      skewX: 0,
      opacity: 1,
      filter: "blur(0px)",
      transition: { type: "spring", stiffness: 280, damping: 20, mass: 0.5 },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.3 }}
      aria-label={text}
      className={cn("inline-flex", className)}
    >
      {chars.map((char, i) => (
        <Fragment key={i}>
          <motion.span
            variants={item}
            aria-hidden
            className="inline-block origin-left"
            style={{ whiteSpace: "pre" }}
          >
            {char === " " ? "\u00A0" : char}
          </motion.span>
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Expand Text
Text expands from compressed letter-spacing into natural breathing room.
URL: https://dev.ononc.com/text/expand-text
Path: src/components/text/expand-text.tsx

```tsx
"use client";

import { Fragment } from "react";
import { motion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface ExpandTextProps {
  text: string;
  className?: string;
  /** Seconds between each word. */
  stagger?: number;
  delay?: number;
  repeat?: boolean;
}

/**
 * ExpandText — text expands from heavily compressed letter-spacing into
 * natural breathing room, staggered word by word. The kerning opens up
 * like an accordion. Accessible via aria-label.
 */
export function ExpandText({
  text,
  className,
  stagger = 0.12,
  delay = 0,
  repeat = false,
}: ExpandTextProps) {
  const words = text.split(" ");
  const container: Variants = {
    hidden: { letterSpacing: "-0.15em", opacity: 0 },
    show: {
      letterSpacing: "normal",
      opacity: 1,
      transition: {
        staggerChildren: stagger,
        delayChildren: delay,
        letterSpacing: { duration: 1.2, ease: [0.32, 0.72, 0, 1] },
        opacity: { duration: 0.4 },
      },
    },
  };
  const item: Variants = {
    hidden: { opacity: 0, scale: 0.92 },
    show: {
      opacity: 1,
      scale: 1,
      transition: { duration: 0.6, ease: [0.25, 1, 0.5, 1] },
    },
  };

  return (
    <motion.span
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: !repeat, amount: 0.3 }}
      aria-label={text}
      className={cn("inline-flex flex-wrap", className)}
    >
      {words.map((word, i) => (
        <Fragment key={i}>
          <motion.span
            variants={item}
            aria-hidden
            className="inline-block whitespace-nowrap"
          >
            {word}
          </motion.span>
          {i < words.length - 1 ? "\u00A0" : null}
        </Fragment>
      ))}
    </motion.span>
  );
}
```

### Dual Tone Text
Two text layers slide apart vertically as you scroll.
URL: https://dev.ononc.com/text/dual-tone-text
Path: src/components/text/dual-tone-text.tsx

```tsx
"use client";

import { useRef } from "react";
import { motion, useScroll, useTransform } from "motion/react";
import { cn } from "@/lib/utils";

export interface DualToneTextProps {
  topText: string;
  bottomText: string;
  className?: string;
}

/**
 * DualToneText — two text layers slide apart vertically as the user scrolls,
 * revealing a split-color effect. The top layer moves up while the bottom
 * moves down. Accessible via separate aria labels on each layer.
 */
export function DualToneText({
  topText,
  bottomText,
  className,
}: DualToneTextProps) {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });
  const topY = useTransform(scrollYProgress, [0, 0.5], ["0%", "-32%"]);
  const bottomY = useTransform(scrollYProgress, [0, 0.5], ["0%", "32%"]);
  const topOpacity = useTransform(scrollYProgress, [0, 0.5, 0.7], [1, 1, 0.3]);
  const bottomOpacity = useTransform(scrollYProgress, [0, 0.5, 0.7], [1, 1, 0.3]);

  return (
    <div
      ref={ref}
      className={cn("relative text-center", className)}
    >
      <motion.span
        aria-label={topText}
        className="block text-brand-ink"
        style={{ y: topY, opacity: topOpacity }}
      >
        {topText}
      </motion.span>
      <motion.span
        aria-label={bottomText}
        className="block text-brand-2"
        style={{ y: bottomY, opacity: bottomOpacity }}
      >
        {bottomText}
      </motion.span>
    </div>
  );
}
```

### Swap Cascade
Random glyphs cascade left to right, locking into the target text.
URL: https://dev.ononc.com/text/swap-cascade
Path: src/components/text/swap-cascade.tsx

```tsx
"use client";

import { useEffect, useMemo, useState } from "react";
import { cn } from "@/lib/utils";

export interface SwapCascadeProps {
  text: string;
  className?: string;
}

const GLYPHS =
  "abcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=[]{}|;:,.<>?";

/**
 * SwapCascade — each character rapidly swaps between random glyphs in a
 * cascading wave from left to right, finally settling into the target string
 * one by one. Runs once on mount. Accessible via aria-label.
 */
export function SwapCascade({ text, className }: SwapCascadeProps) {
  return <SwapCascadeText key={text} text={text} className={className} />;
}

function SwapCascadeText({ text, className }: SwapCascadeProps) {
  const chars = useMemo(() => Array.from(text), [text]);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const total = chars.length;
    const duration = 1200 + total * 80;
    const start = performance.now();
    let frameId = 0;

    const tick = () => {
      const elapsed = performance.now() - start;
      const p = Math.min(elapsed / duration, 1);
      setProgress(p);
      if (p < 1) {
        frameId = requestAnimationFrame(tick);
      }
    };
    frameId = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frameId);
  }, [chars.length]);

  const getGlyph = (i: number, p: number) => {
    const revealPoint = (i / chars.length) * 1.0;
    if (p > revealPoint) return chars[i];
    const seed = Math.floor(i * 17 + p * 300);
    return GLYPHS[seed % GLYPHS.length];
  };

  return (
    <span aria-label={text} className={cn("inline-flex font-mono", className)}>
      {chars.map((char, i) => {
        const display = char === " " ? "\u00A0" : getGlyph(i, progress);
        const revealed = progress > (i / chars.length) * 1.0;
        return (
          <span
            key={i}
            aria-hidden
            className={cn(
              "inline-block",
              revealed ? "text-brand-ink" : "text-muted-2",
            )}
            style={{ whiteSpace: "pre" }}
          >
            {display}
          </span>
        );
      })}
    </span>
  );
}
```

### Digi-Clock Text
Characters flip through glyphs like a digital clock, then resolve.
URL: https://dev.ononc.com/text/digi-clock-text
Path: src/components/text/digi-clock-text.tsx

```tsx
"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface DigiClockTextProps {
  text: string;
  className?: string;
  /** Seconds before the scramble resolves. */
  duration?: number;
}

/**
 * DigiClockText — characters rapidly flip through random alphanumeric
 * glyphs like a digital clock or old airport board, finally resolving
 * into the target text. Runs once on mount. Accessible via aria-label.
 */
export function DigiClockText({
  text,
  className,
  duration = 2,
}: DigiClockTextProps) {
  const chars = Array.from(text);
  const [frame, setFrame] = useState(0);

  const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  useEffect(() => {
    const start = performance.now();
    let id: number;

    const tick = () => {
      const elapsed = performance.now() - start;
      const p = Math.min(elapsed / (duration * 1000), 1);
      setFrame(Math.floor(p * 40));
      if (p < 1) {
        id = requestAnimationFrame(tick);
      }
    };
    id = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(id);
  }, [text, duration]);

  const getChar = (i: number, f: number) => {
    const pGlobal = f / 40;
    const reveal = (i / chars.length) * 1.0;
    if (pGlobal > reveal) return chars[i];
    const seed = i * 31 + f * 7;
    return GLYPHS[seed % GLYPHS.length];
  };

  return (
    <span
      aria-label={text}
      className={cn("inline-flex font-mono tabular-nums", className)}
    >
      {chars.map((char, i) => {
        if (char === " ") {
          return (
            <span key={i} aria-hidden className="inline-block" style={{ whiteSpace: "pre" }}>
              {"\u00A0"}
            </span>
          );
        }
        const display = getChar(i, frame);
        const stable = (frame / 40) > (i / chars.length) * 1.0;
        return (
          <span
            key={i}
            aria-hidden
            className={cn("inline-block", stable && "text-brand-ink")}
            style={{ whiteSpace: "pre" }}
          >
            {display}
          </span>
        );
      })}
    </span>
  );
}
```

### Shake Text
Text vibrates with random micro-displacements on pointer move.
URL: https://dev.ononc.com/text/shake-text
Path: src/components/text/shake-text.tsx

```tsx
"use client";

import { type PointerEvent, useCallback, useRef, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ShakeTextProps {
  text: string;
  className?: string;
  /** Shake intensity in px. */
  intensity?: number;
}

/**
 * ShakeText — text vibrates with random micro-displacements on pointer move,
 * settling instantly when the pointer leaves. No animation loop; direct DOM
 * rAF writes. Reduced-motion users get static text. Accessible via aria-label.
 */
export function ShakeText({
  text,
  className,
  intensity = 2.5,
}: ShakeTextProps) {
  const rootRef = useRef<HTMLSpanElement>(null);
  const raf = useRef(0);

  const mulberry32 = (seed: number) => {
    let t = seed + 0x6d2b79f5;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };

  const onPointerMove = useCallback(
    (e: PointerEvent<HTMLSpanElement>) => {
      const el = rootRef.current;
      if (!el) return;
      cancelAnimationFrame(raf.current);
      const seed = Math.floor(e.timeStamp / 40);
      raf.current = requestAnimationFrame(() => {
        const dx = (mulberry32(seed) - 0.5) * intensity * 2;
        const dy = (mulberry32(seed + 100) - 0.5) * intensity * 2;
        el.style.transform = `translate(${dx}px, ${dy}px)`;
      });
    },
    [intensity],
  );

  const reset = useCallback(() => {
    cancelAnimationFrame(raf.current);
    const el = rootRef.current;
    if (el) el.style.transform = "";
  }, []);

  return (
    <span
      ref={rootRef}
      aria-label={text}
      onPointerMove={onPointerMove}
      onPointerLeave={reset}
      className={cn("inline-flex cursor-default select-none", className)}
    >
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          aria-hidden
          className="inline-block"
          style={{ whiteSpace: "pre" }}
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
    </span>
  );
}
```

### Shatter Text
Characters shatter outward and reform on hover, like breaking glass.
URL: https://dev.ononc.com/text/shatter-text
Path: src/components/text/shatter-text.tsx

```tsx
"use client";

import { Fragment, useCallback, useRef, useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface ShatterTextProps {
  text: string;
  className?: string;
  /** Trigger: "hover" (default) or "click". */
  trigger?: "hover" | "click";
}

/**
 * ShatterText — on trigger, each character flies outward in a random
 * direction with blur, then reassembles. Feels like glass shattering and
 * reforming. Accessible via aria-label.
 */
export function ShatterText({
  text,
  className,
  trigger = "hover",
}: ShatterTextProps) {
  const [active, setActive] = useState(false);
  const chars = Array.from(text);

  const mulberry32 = (seed: number) => {
    let t = seed + 0x6d2b79f5;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };

  const enter = useCallback(() => setActive(true), []);
  const leave = useCallback(() => setActive(false), []);

  const events =
    trigger === "hover"
      ? { onMouseEnter: enter, onMouseLeave: leave }
      : { onClick: () => setActive((p) => !p) };

  return (
    <span
      aria-label={text}
      className={cn("inline-flex cursor-default select-none", className)}
      {...events}
    >
      {chars.map((char, i) => {
        const r1 = mulberry32(i * 19 + 5);
        const r2 = mulberry32(i * 23 + 11);
        const angle = r1 * Math.PI * 2;
        const dist = 30 + r2 * 50;
        const dx = Math.cos(angle) * dist;
        const dy = Math.sin(angle) * dist;
        const rot = (r1 - 0.5) * 180;

        return (
          <Fragment key={i}>
            <motion.span
              aria-hidden
              className="inline-block"
              style={{ whiteSpace: "pre" }}
              animate={
                active
                  ? { x: dx, y: dy, rotate: rot, scale: 0.7, opacity: 0.3, filter: "blur(3px)" }
                  : { x: 0, y: 0, rotate: 0, scale: 1, opacity: 1, filter: "blur(0px)" }
              }
              transition={{ type: "spring", stiffness: 140, damping: 12, mass: 0.5 }}
            >
              {char === " " ? "\u00A0" : char}
            </motion.span>
          </Fragment>
        );
      })}
    </span>
  );
}
```

### Magnetic Text
Each letter is pulled toward the cursor like iron filings to a magnet.
URL: https://dev.ononc.com/text/magnetic-text
Path: src/components/text/magnetic-text.tsx

```tsx
"use client";

import { type PointerEvent, useCallback, useRef } from "react";
import { cn } from "@/lib/utils";

export interface MagneticTextProps {
  text: string;
  className?: string;
  /** Maximum pixel displacement toward the cursor. */
  pull?: number;
  /** Radius of magnetic influence. */
  radius?: number;
}

/**
 * MagneticText — each letter is pulled toward the cursor like iron filings
 * toward a magnet, then springs back on leave. Pointer-driven rAF; freezes
 * under reduced-motion. Accessible via aria-label.
 */
export function MagneticText({
  text,
  className,
  pull = 14,
  radius = 150,
}: MagneticTextProps) {
  const charRefs = useRef<(HTMLSpanElement | null)[]>([]);
  const raf = useRef(0);

  const onPointerMove = useCallback(
    (e: PointerEvent<HTMLSpanElement>) => {
      const { clientX, clientY } = e;
      cancelAnimationFrame(raf.current);
      raf.current = requestAnimationFrame(() => {
        charRefs.current.forEach((el) => {
          if (!el) return;
          const r = el.getBoundingClientRect();
          const cx = r.left + r.width / 2;
          const cy = r.top + r.height / 2;
          const dx = clientX - cx;
          const dy = clientY - cy;
          const dist = Math.hypot(dx, dy);
          const t = Math.max(0, 1 - dist / radius);
          const smoothT = t * t;
          el.style.transform = `translate(${dx * smoothT * (pull / radius) * 3}px, ${dy * smoothT * (pull / radius) * 3}px)`;
        });
      });
    },
    [pull, radius],
  );

  const reset = useCallback(() => {
    cancelAnimationFrame(raf.current);
    charRefs.current.forEach((el) => {
      if (el) el.style.transform = "";
    });
  }, []);

  return (
    <span
      aria-label={text}
      onPointerMove={onPointerMove}
      onPointerLeave={reset}
      className={cn("inline-flex cursor-default select-none", className)}
    >
      {Array.from(text).map((char, i) => (
        <span
          key={i}
          ref={(el) => { charRefs.current[i] = el; }}
          aria-hidden
          className="inline-block transition-transform duration-300 ease-out"
          style={{ whiteSpace: "pre" }}
        >
          {char === " " ? "\u00A0" : char}
        </span>
      ))}
    </span>
  );
}
```

### Split Color Text
Text is split horizontally at the cursor: top half in one color, bottom in another.
URL: https://dev.ononc.com/text/split-color-text
Path: src/components/text/split-color-text.tsx

```tsx
"use client";

import { type PointerEvent, useCallback, useRef } from "react";
import { cn } from "@/lib/utils";

export interface SplitColorTextProps {
  text: string;
  className?: string;
}

/**
 * SplitColorText — text is split horizontally at the cursor position:
 * the top half renders in one brand color, the bottom in another. The
 * split line follows the pointer vertically. Pure CSS clip-path driven
 * by rAF; freezes under reduced-motion. Accessible via aria-label.
 */
export function SplitColorText({
  text,
  className,
}: SplitColorTextProps) {
  const rootRef = useRef<HTMLDivElement>(null);
  const splitRef = useRef<HTMLSpanElement>(null);
  const raf = useRef(0);

  const onPointerMove = useCallback((e: PointerEvent<HTMLDivElement>) => {
    const root = rootRef.current;
    const split = splitRef.current;
    if (!root || !split) return;
    const rect = root.getBoundingClientRect();
    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
    cancelAnimationFrame(raf.current);
    raf.current = requestAnimationFrame(() => {
      split.style.clipPath = `inset(${(y * 100).toFixed(1)}% 0 0 0)`;
    });
  }, []);

  const reset = useCallback(() => {
    cancelAnimationFrame(raf.current);
    const split = splitRef.current;
    if (split) split.style.clipPath = "inset(50% 0 0 0)";
  }, []);

  return (
    <div
      ref={rootRef}
      aria-label={text}
      onPointerMove={onPointerMove}
      onPointerLeave={reset}
      className={cn(
        "relative inline-flex cursor-default select-none",
        className,
      )}
    >
      {/* Top layer: brand-ink */}
      <span aria-hidden className="text-brand-ink">
        {text}
      </span>
      {/* Bottom layer: brand-2, clipped */}
      <span
        ref={splitRef}
        aria-hidden
        className="absolute inset-0 text-brand-2"
        style={{ clipPath: "inset(50% 0 0 0)" }}
      >
        {text}
      </span>
    </div>
  );
}
```

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

### Magnetic Button
Springs toward the cursor, then snaps back on leave.
URL: https://dev.ononc.com/ui
Path: src/components/ui/magnetic-button.tsx

```tsx
"use client";

import type { PointerEvent, ReactNode } from "react";
import { useRef } from "react";
import { motion, useMotionValue, useSpring } from "motion/react";
import { cn } from "@/lib/utils";

export interface MagneticButtonProps {
  children: ReactNode;
  className?: string;
  /** Fraction of the cursor offset the button follows (0–1). */
  strength?: number;
  onClick?: () => void;
  type?: "button" | "submit" | "reset";
  "aria-label"?: string;
}

/**
 * MagneticButton — the button is gently pulled toward the pointer while it
 * hovers, snapping back with a spring on leave. The transform lives on a
 * wrapper so all native button semantics stay intact.
 */
export function MagneticButton({
  children,
  className,
  strength = 0.4,
  onClick,
  type = "button",
  ...aria
}: MagneticButtonProps) {
  const ref = useRef<HTMLButtonElement>(null);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const spring = { stiffness: 220, damping: 14, mass: 0.3 };
  const sx = useSpring(x, spring);
  const sy = useSpring(y, spring);

  const handleMove = (e: PointerEvent<HTMLSpanElement>) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    x.set((e.clientX - (rect.left + rect.width / 2)) * strength);
    y.set((e.clientY - (rect.top + rect.height / 2)) * strength);
  };
  const reset = () => {
    x.set(0);
    y.set(0);
  };

  return (
    <motion.span
      style={{ x: sx, y: sy }}
      onPointerMove={handleMove}
      onPointerLeave={reset}
      className="inline-block"
    >
      <button
        ref={ref}
        type={type}
        onClick={onClick}
        className={cn(
          "inline-flex items-center justify-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90",
          className,
        )}
        {...aria}
      >
        {children}
      </button>
    </motion.span>
  );
}
```

### Shimmer Button
A band of light orbits the border continuously.
URL: https://dev.ononc.com/ui
Path: src/components/ui/shimmer-button.tsx

```tsx
import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ShimmerButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
}

/**
 * ShimmerButton — a pill button ringed by a slowly rotating conic gradient,
 * so a band of light continuously orbits the border. Pure CSS animation.
 */
export function ShimmerButton({
  className,
  children,
  ...props
}: ShimmerButtonProps) {
  return (
    <button
      className={cn(
        "group relative inline-flex overflow-hidden rounded-full p-[1.5px] focus:outline-none",
        className,
      )}
      {...props}
    >
      <span
        aria-hidden
        className="animate-spin-slow absolute inset-[-250%]"
        style={{
          background:
            "conic-gradient(from 0deg, transparent 0deg 80deg, var(--brand-2) 110deg, var(--brand) 150deg, var(--brand-3) 190deg, transparent 230deg 360deg)",
        }}
      />
      <span className="relative inline-flex items-center gap-2 rounded-full bg-surface px-6 py-3 text-sm font-semibold text-foreground backdrop-blur-sm transition-colors group-hover:bg-surface/80">
        {children}
      </span>
    </button>
  );
}
```

### Ripple Button
Emits a ripple from the exact press point.
URL: https://dev.ononc.com/ui
Path: src/components/ui/ripple-button.tsx

```tsx
"use client";

import {
  type ButtonHTMLAttributes,
  type PointerEvent,
  type ReactNode,
  useState,
} from "react";
import { cn } from "@/lib/utils";

interface Ripple {
  id: number;
  x: number;
  y: number;
  size: number;
}

export interface RippleButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
}

/**
 * RippleButton — emits a circular ripple from the exact press point on each
 * pointer-down, cleaning each ripple up when its animation ends.
 */
export function RippleButton({
  className,
  children,
  onPointerDown,
  ...props
}: RippleButtonProps) {
  const [ripples, setRipples] = useState<Ripple[]>([]);

  const handlePointerDown = (e: PointerEvent<HTMLButtonElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height);
    setRipples((prev) => [
      ...prev,
      {
        id: Date.now() + Math.random(),
        x: e.clientX - rect.left - size / 2,
        y: e.clientY - rect.top - size / 2,
        size,
      },
    ]);
    onPointerDown?.(e);
  };

  const remove = (id: number) =>
    setRipples((prev) => prev.filter((r) => r.id !== id));

  return (
    <button
      onPointerDown={handlePointerDown}
      className={cn(
        "relative overflow-hidden rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white",
        className,
      )}
      {...props}
    >
      {ripples.map((r) => (
        <span
          key={r.id}
          aria-hidden
          onAnimationEnd={() => remove(r.id)}
          className="pointer-events-none absolute rounded-full bg-white/40"
          style={{
            left: r.x,
            top: r.y,
            width: r.size,
            height: r.size,
            animation: "ripple 0.6s ease-out",
          }}
        />
      ))}
      <span className="relative">{children}</span>
    </button>
  );
}
```

### Tilt Card
Tilts in 3D toward the pointer with a tracking glare.
URL: https://dev.ononc.com/ui
Path: src/components/ui/tilt-card.tsx

```tsx
"use client";

import type { PointerEvent, ReactNode } from "react";
import { useRef } from "react";
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useSpring,
  useTransform,
} from "motion/react";
import { cn } from "@/lib/utils";

export interface TiltCardProps {
  children: ReactNode;
  className?: string;
  /** Max tilt in degrees. */
  max?: number;
  /** Show the moving glare highlight. */
  glare?: boolean;
}

/**
 * TiltCard — tilts in 3D toward the pointer with a spring, and casts a soft
 * glare that tracks the cursor. Flattens smoothly on leave.
 */
export function TiltCard({
  children,
  className,
  max = 12,
  glare = true,
}: TiltCardProps) {
  const ref = useRef<HTMLDivElement>(null);
  const px = useMotionValue(0.5);
  const py = useMotionValue(0.5);
  const spring = { stiffness: 220, damping: 18, mass: 0.4 };
  const rotateX = useSpring(useTransform(py, [0, 1], [max, -max]), spring);
  const rotateY = useSpring(useTransform(px, [0, 1], [-max, max]), spring);
  const glareX = useTransform(px, [0, 1], ["0%", "100%"]);
  const glareY = useTransform(py, [0, 1], ["0%", "100%"]);
  const glareBg = useMotionTemplate`radial-gradient(180px circle at ${glareX} ${glareY}, rgba(255,255,255,0.22), transparent 60%)`;

  const handleMove = (e: PointerEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    px.set((e.clientX - rect.left) / rect.width);
    py.set((e.clientY - rect.top) / rect.height);
  };
  const reset = () => {
    px.set(0.5);
    py.set(0.5);
  };

  return (
    <div className="[perspective:1000px]">
      <motion.div
        ref={ref}
        onPointerMove={handleMove}
        onPointerLeave={reset}
        style={{ rotateX, rotateY, transformStyle: "preserve-3d" }}
        className={cn("relative rounded-2xl", className)}
      >
        {children}
        {glare && (
          <motion.div
            aria-hidden
            className="pointer-events-none absolute inset-0 rounded-[inherit]"
            style={{ background: glareBg }}
          />
        )}
      </motion.div>
    </div>
  );
}
```

### Spotlight Card
A radial glow follows the cursor across the surface.
URL: https://dev.ononc.com/ui
Path: src/components/ui/spotlight-card.tsx

```tsx
"use client";

import type { HTMLAttributes, PointerEvent, ReactNode } from "react";
import { useRef } from "react";
import { cn } from "@/lib/utils";

export interface SpotlightCardProps extends HTMLAttributes<HTMLDivElement> {
  /** Spotlight color (CSS color). */
  color?: string;
  /** Spotlight radius in pixels. */
  radius?: number;
  children: ReactNode;
}

/**
 * SpotlightCard — a soft radial glow follows the cursor across the surface.
 * Position is written to CSS variables on pointer move, so it never re-renders.
 */
export function SpotlightCard({
  className,
  color = "var(--brand)",
  radius = 280,
  children,
  ...props
}: SpotlightCardProps) {
  const ref = useRef<HTMLDivElement>(null);

  const handleMove = (e: PointerEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--spot-x", `${e.clientX - rect.left}px`);
    el.style.setProperty("--spot-y", `${e.clientY - rect.top}px`);
  };

  return (
    <div
      ref={ref}
      onPointerMove={handleMove}
      className={cn(
        "group relative overflow-hidden rounded-2xl border border-border bg-surface p-6",
        className,
      )}
      {...props}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{
          background: `radial-gradient(${radius}px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in oklab, ${color} 22%, transparent), transparent 70%)`,
        }}
      />
      <div className="relative">{children}</div>
    </div>
  );
}
```

### Dock
macOS-style icons that magnify by cursor proximity.
URL: https://dev.ononc.com/ui
Path: src/components/ui/dock.tsx

```tsx
"use client";

import type { ReactNode } from "react";
import { useRef } from "react";
import {
  motion,
  useMotionValue,
  useSpring,
  useTransform,
  type MotionValue,
} from "motion/react";
import { cn } from "@/lib/utils";

export interface DockItem {
  icon: ReactNode;
  label: string;
  onClick?: () => void;
}

export interface DockProps {
  items: DockItem[];
  className?: string;
  /** Resting icon size (px). */
  baseSize?: number;
  /** Peak icon size at the cursor (px). */
  magnify?: number;
  /** Distance (px) over which magnification falls off. */
  range?: number;
}

function DockButton({
  mouseX,
  item,
  baseSize,
  magnify,
  range,
}: {
  mouseX: MotionValue<number>;
  item: DockItem;
  baseSize: number;
  magnify: number;
  range: number;
}) {
  const ref = useRef<HTMLButtonElement>(null);
  const distance = useTransform(mouseX, (val) => {
    const rect = ref.current?.getBoundingClientRect();
    const center = rect ? rect.x + rect.width / 2 : 0;
    return val - center;
  });
  const sizeTarget = useTransform(
    distance,
    [-range, 0, range],
    [baseSize, magnify, baseSize],
  );
  const size = useSpring(sizeTarget, {
    stiffness: 320,
    damping: 22,
    mass: 0.2,
  });

  return (
    <motion.button
      ref={ref}
      style={{ width: size, height: size }}
      onClick={item.onClick}
      aria-label={item.label}
      className="group/item relative grid aspect-square shrink-0 place-items-center rounded-2xl border border-border bg-surface text-foreground/80 transition-colors hover:text-foreground"
    >
      <span className="grid h-1/2 w-1/2 place-items-center">{item.icon}</span>
      <span className="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 scale-90 rounded-md border border-border bg-background px-2 py-1 text-xs whitespace-nowrap opacity-0 transition-all group-hover/item:scale-100 group-hover/item:opacity-100">
        {item.label}
      </span>
    </motion.button>
  );
}

/**
 * Dock — a row of icon buttons that magnify based on cursor proximity, like
 * the macOS dock. Each item is a real button with an accessible label.
 */
export function Dock({
  items,
  className,
  baseSize = 48,
  magnify = 80,
  range = 140,
}: DockProps) {
  const mouseX = useMotionValue(Infinity);
  return (
    <div
      onPointerMove={(e) => mouseX.set(e.clientX)}
      onPointerLeave={() => mouseX.set(Infinity)}
      className={cn(
        "mx-auto flex items-end gap-3 rounded-3xl border border-border bg-surface/60 px-4 pb-3 pt-2 backdrop-blur-xl",
        className,
      )}
    >
      {items.map((item, i) => (
        <DockButton
          key={i}
          mouseX={mouseX}
          item={item}
          baseSize={baseSize}
          magnify={magnify}
          range={range}
        />
      ))}
    </div>
  );
}
```

### Marquee
A seamless infinite scroller that pauses on hover.
URL: https://dev.ononc.com/ui
Path: src/components/ui/marquee.tsx

```tsx
"use client";

import type { CSSProperties, ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface MarqueeProps {
  children: ReactNode;
  className?: string;
  /** Seconds for one full loop. */
  duration?: number;
  /** Scroll direction. */
  reverse?: boolean;
  /** Pause while hovered. */
  pauseOnHover?: boolean;
  /** Gap between items (CSS length). */
  gap?: string;
  /** Fade the edges into the background. */
  fade?: boolean;
}

/**
 * Marquee — an endlessly scrolling row. Two identical groups, each carrying a
 * trailing gap and animated a full width, give a seamless loop with no hitch.
 */
export function Marquee({
  children,
  className,
  duration = 28,
  reverse = false,
  pauseOnHover = true,
  gap = "1.5rem",
  fade = true,
}: MarqueeProps) {
  const groupClass = cn(
    "animate-marquee flex min-w-full shrink-0 items-center justify-around",
    pauseOnHover && "group-hover:[animation-play-state:paused]",
    reverse && "[animation-direction:reverse]",
  );
  const styleVars = {
    gap,
    paddingInlineEnd: gap,
    "--marquee-duration": `${duration}s`,
  } as CSSProperties;

  return (
    <div
      className={cn(
        "group relative flex w-full overflow-hidden",
        fade &&
          "[mask-image:linear-gradient(to_right,transparent,#000_12%,#000_88%,transparent)]",
        className,
      )}
    >
      <div className={groupClass} style={styleVars}>
        {children}
      </div>
      <div className={groupClass} style={styleVars} aria-hidden>
        {children}
      </div>
    </div>
  );
}
```

### Carousel
Looping slides with arrows, dots, and arrow-key support.
URL: https://dev.ononc.com/ui
Path: src/components/ui/carousel.tsx

```tsx
"use client";

import type { KeyboardEvent, ReactNode } from "react";
import { useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CarouselProps {
  slides: ReactNode[];
  className?: string;
  /** Accessible label for the carousel region. */
  label?: string;
}

/**
 * Carousel — a track of full-width slides with prev/next controls, dot
 * indicators, looping, and arrow-key navigation. Built on ARIA carousel roles.
 */
export function Carousel({
  slides,
  className,
  label = "Gallery",
}: CarouselProps) {
  const [index, setIndex] = useState(0);
  const count = slides.length;
  const go = (i: number) => setIndex(((i % count) + count) % count);

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key === "ArrowRight") {
      e.preventDefault();
      go(index + 1);
    } else if (e.key === "ArrowLeft") {
      e.preventDefault();
      go(index - 1);
    }
  };

  if (count === 0) return null;

  return (
    <div
      role="region"
      aria-roledescription="carousel"
      aria-label={label}
      tabIndex={0}
      onKeyDown={onKeyDown}
      className={cn(
        "relative overflow-hidden rounded-2xl border border-border bg-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-brand",
        className,
      )}
    >
      <div
        className="flex transition-transform duration-500 ease-out"
        style={{ transform: `translateX(-${index * 100}%)` }}
      >
        {slides.map((slide, i) => (
          <div
            key={i}
            role="group"
            aria-roledescription="slide"
            aria-label={`${i + 1} of ${count}`}
            aria-hidden={i !== index}
            className="min-w-full"
          >
            {slide}
          </div>
        ))}
      </div>

      <button
        type="button"
        onClick={() => go(index - 1)}
        aria-label="Previous slide"
        className="absolute left-3 top-1/2 grid size-9 -translate-y-1/2 place-items-center rounded-full border border-border bg-background/70 text-foreground backdrop-blur transition-colors hover:bg-background"
      >
        <ChevronLeft className="size-5" />
      </button>
      <button
        type="button"
        onClick={() => go(index + 1)}
        aria-label="Next slide"
        className="absolute right-3 top-1/2 grid size-9 -translate-y-1/2 place-items-center rounded-full border border-border bg-background/70 text-foreground backdrop-blur transition-colors hover:bg-background"
      >
        <ChevronRight className="size-5" />
      </button>

      <div className="absolute inset-x-0 bottom-3 flex justify-center gap-2">
        {slides.map((_, i) => (
          <button
            key={i}
            type="button"
            onClick={() => go(i)}
            aria-label={`Go to slide ${i + 1}`}
            aria-current={i === index}
            className={cn(
              "h-2 rounded-full transition-all",
              i === index ? "w-6 bg-brand" : "w-2 bg-white/30 hover:bg-white/50",
            )}
          />
        ))}
      </div>
    </div>
  );
}
```

### Accordion
Accessible disclosure list with smooth height transitions.
URL: https://dev.ononc.com/ui
Path: src/components/ui/accordion.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AccordionItem {
  title: string;
  content: ReactNode;
}

export interface AccordionProps {
  items: AccordionItem[];
  className?: string;
  /** Allow multiple panels open at once. */
  multiple?: boolean;
  /** Index open by default. */
  defaultIndex?: number | null;
}

/**
 * Accordion — accessible disclosure list. Each header is a button wired with
 * aria-expanded/aria-controls; panels expand via a grid-rows height transition.
 */
export function Accordion({
  items,
  className,
  multiple = false,
  defaultIndex = null,
}: AccordionProps) {
  const baseId = useId();
  const [open, setOpen] = useState<Set<number>>(
    () => new Set(defaultIndex != null ? [defaultIndex] : []),
  );

  const toggle = (i: number) =>
    setOpen((prev) => {
      const next = new Set(multiple ? prev : []);
      if (prev.has(i)) next.delete(i);
      else next.add(i);
      return next;
    });

  return (
    <div className={cn("divide-y divide-border rounded-2xl border border-border bg-surface", className)}>
      {items.map((item, i) => {
        const isOpen = open.has(i);
        const headerId = `${baseId}-h-${i}`;
        const panelId = `${baseId}-p-${i}`;
        return (
          <div key={i}>
            <h3>
              <button
                id={headerId}
                type="button"
                aria-expanded={isOpen}
                aria-controls={panelId}
                onClick={() => toggle(i)}
                className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left text-sm font-medium transition-colors hover:text-foreground"
              >
                {item.title}
                <ChevronDown
                  className={cn(
                    "size-4 shrink-0 text-muted transition-transform duration-300",
                    isOpen && "rotate-180 text-brand-ink",
                  )}
                />
              </button>
            </h3>
            <div
              id={panelId}
              role="region"
              aria-labelledby={headerId}
              inert={!isOpen}
              className="grid transition-[grid-template-rows] duration-300 ease-out"
              style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
            >
              <div className="overflow-hidden">
                <div className="px-5 pb-4 text-sm text-muted">{item.content}</div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}
```

### Tabs
Accessible tablist with a sliding underline indicator.
URL: https://dev.ononc.com/ui
Path: src/components/ui/tabs.tsx

```tsx
"use client";

import { type KeyboardEvent, type ReactNode, useId, useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface TabItem {
  label: string;
  content: ReactNode;
}

export interface TabsProps {
  items: TabItem[];
  className?: string;
  defaultIndex?: number;
}

/**
 * Tabs — an accessible tablist (roles, arrow-key roving focus) with a sliding
 * underline indicator shared across tabs via motion's layoutId.
 */
export function Tabs({ items, className, defaultIndex = 0 }: TabsProps) {
  const baseId = useId();
  const [active, setActive] = useState(defaultIndex);

  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
      e.preventDefault();
      const dir = e.key === "ArrowRight" ? 1 : -1;
      const next = (active + dir + items.length) % items.length;
      setActive(next);
      document.getElementById(`${baseId}-tab-${next}`)?.focus();
    }
  };

  return (
    <div className={cn("w-full", className)}>
      <div role="tablist" aria-label="Tabs" className="flex gap-1 border-b border-border">
        {items.map((item, i) => {
          const selected = i === active;
          return (
            <button
              key={i}
              id={`${baseId}-tab-${i}`}
              role="tab"
              type="button"
              aria-selected={selected}
              aria-controls={`${baseId}-panel-${i}`}
              tabIndex={selected ? 0 : -1}
              onClick={() => setActive(i)}
              onKeyDown={onKeyDown}
              className={cn(
                "relative px-4 py-2.5 text-sm font-medium transition-colors",
                selected ? "text-foreground" : "text-muted hover:text-foreground",
              )}
            >
              {item.label}
              {selected && (
                <motion.span
                  layoutId={`${baseId}-indicator`}
                  className="absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-brand"
                  transition={{ type: "spring", stiffness: 380, damping: 30 }}
                />
              )}
            </button>
          );
        })}
      </div>
      {items.map((item, i) => (
        <div
          key={i}
          id={`${baseId}-panel-${i}`}
          role="tabpanel"
          aria-labelledby={`${baseId}-tab-${i}`}
          hidden={i !== active}
          className="pt-4 text-sm text-muted"
        >
          {item.content}
        </div>
      ))}
    </div>
  );
}
```

### Tooltip
Shows on hover and keyboard focus, linked via aria.
URL: https://dev.ononc.com/ui
Path: src/components/ui/tooltip.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

type Side = "top" | "bottom" | "left" | "right";

export interface TooltipProps {
  /** Tooltip text. */
  label: string;
  children: ReactNode;
  side?: Side;
  className?: string;
}

const SIDE_STYLES: Record<Side, string> = {
  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
  bottom: "top-full left-1/2 mt-2 -translate-x-1/2",
  left: "right-full top-1/2 mr-2 -translate-y-1/2",
  right: "left-full top-1/2 ml-2 -translate-y-1/2",
};

/**
 * Tooltip — shows a label on hover and on keyboard focus, linked to the trigger
 * via aria-describedby and exposed with role="tooltip".
 */
export function Tooltip({ label, children, side = "top", className }: TooltipProps) {
  const id = useId();
  const [open, setOpen] = useState(false);

  return (
    <span
      className="relative inline-flex"
      onPointerEnter={() => setOpen(true)}
      onPointerLeave={() => setOpen(false)}
      onFocusCapture={() => setOpen(true)}
      onBlurCapture={() => setOpen(false)}
      onKeyDown={(e) => {
        if (e.key === "Escape") setOpen(false);
      }}
    >
      <span aria-describedby={open ? id : undefined}>{children}</span>
      <AnimatePresence>
        {open && (
          <motion.span
            id={id}
            role="tooltip"
            initial={{ opacity: 0, scale: 0.94 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.94 }}
            transition={{ duration: 0.14 }}
            className={cn(
              "pointer-events-none absolute z-50 whitespace-nowrap rounded-lg border border-border bg-background px-2.5 py-1.5 text-xs text-foreground shadow-lg",
              SIDE_STYLES[side],
              className,
            )}
          >
            {label}
          </motion.span>
        )}
      </AnimatePresence>
    </span>
  );
}
```

### Switch
Accessible toggle with a spring thumb.
URL: https://dev.ononc.com/ui/switch
Path: src/components/ui/switch.tsx

```tsx
"use client";

import { useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface SwitchProps {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
  label?: string;
  className?: string;
}

/**
 * Switch — an accessible toggle (role="switch", aria-checked). Works controlled
 * or uncontrolled; the thumb slides with a spring.
 */
export function Switch({
  checked,
  defaultChecked = false,
  onCheckedChange,
  disabled = false,
  label,
  className,
}: SwitchProps) {
  const [internal, setInternal] = useState(defaultChecked);
  const isControlled = checked !== undefined;
  const on = isControlled ? checked : internal;

  const toggle = () => {
    if (disabled) return;
    const next = !on;
    if (!isControlled) setInternal(next);
    onCheckedChange?.(next);
  };

  return (
    <button
      type="button"
      role="switch"
      aria-checked={on}
      aria-label={label}
      disabled={disabled}
      onClick={toggle}
      className={cn(
        "inline-flex h-6 w-11 items-center rounded-full border border-border p-0.5 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
        on ? "bg-brand" : "bg-surface",
        className,
      )}
    >
      <motion.span
        layout
        transition={{ type: "spring", stiffness: 500, damping: 32 }}
        className={cn(
          "size-4 rounded-full bg-white shadow-sm",
          on ? "ml-auto" : "ml-0",
        )}
      />
    </button>
  );
}
```

### Segmented Control
Single-select with a pill that slides to the choice.
URL: https://dev.ononc.com/ui/segmented-control
Path: src/components/ui/segmented-control.tsx

```tsx
"use client";

import { type KeyboardEvent, useId, useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface SegmentedControlProps {
  options: string[];
  defaultValue?: string;
  value?: string;
  onValueChange?: (value: string) => void;
  className?: string;
  "aria-label"?: string;
  "aria-labelledby"?: string;
}

/**
 * SegmentedControl — single-select control with a pill that slides to the
 * active option (motion layoutId). Exposed as a radiogroup with arrow keys.
 */
export function SegmentedControl({
  options,
  defaultValue,
  value,
  onValueChange,
  className,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledby,
}: SegmentedControlProps) {
  const baseId = useId();
  const [internal, setInternal] = useState(defaultValue ?? options[0]);
  const selected = value ?? internal;

  const select = (option: string) => {
    if (value === undefined) setInternal(option);
    onValueChange?.(option);
  };

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
    e.preventDefault();
    const idx = options.indexOf(selected);
    const dir = e.key === "ArrowRight" ? 1 : -1;
    const nextIndex = (idx + dir + options.length) % options.length;
    select(options[nextIndex]);
    document.getElementById(`${baseId}-${nextIndex}`)?.focus();
  };

  return (
    <div
      role="radiogroup"
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledby}
      onKeyDown={onKeyDown}
      className={cn(
        "inline-flex gap-1 rounded-full border border-border bg-surface p-1",
        className,
      )}
    >
      {options.map((option, i) => {
        const isSelected = option === selected;
        return (
          <button
            key={option}
            id={`${baseId}-${i}`}
            role="radio"
            type="button"
            aria-checked={isSelected}
            tabIndex={isSelected ? 0 : -1}
            onClick={() => select(option)}
            className="relative rounded-full px-4 py-1.5 text-sm font-medium transition-colors"
          >
            {isSelected && (
              <motion.span
                layoutId={`${baseId}-pill`}
                transition={{ type: "spring", stiffness: 420, damping: 34 }}
                className="absolute inset-0 -z-10 rounded-full bg-brand"
              />
            )}
            <span className={isSelected ? "text-white" : "text-muted"}>
              {option}
            </span>
          </button>
        );
      })}
    </div>
  );
}
```

### Modal
Portaled dialog with focus management and Escape to close.
URL: https://dev.ononc.com/ui
Path: src/components/ui/modal.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import { AnimatePresence, motion } from "motion/react";
import { X } from "lucide-react";
import { useHydrated } from "@/lib/use-hydrated";
import { cn } from "@/lib/utils";

export interface ModalProps {
  open: boolean;
  onClose: () => void;
  title?: string;
  children: ReactNode;
  className?: string;
}

/**
 * Modal — an accessible dialog rendered in a portal. Closes on Escape and
 * backdrop click, locks body scroll, focuses the panel on open, and restores
 * focus to the trigger on close.
 */
export function Modal({ open, onClose, title, children, className }: ModalProps) {
  const mounted = useHydrated();
  const panelRef = useRef<HTMLDivElement>(null);
  const lastFocused = useRef<HTMLElement | null>(null);
  const onCloseRef = useRef(onClose);
  useEffect(() => {
    onCloseRef.current = onClose;
  });

  useEffect(() => {
    if (!open) return;
    lastFocused.current = document.activeElement as HTMLElement | null;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onCloseRef.current();
    };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const id = requestAnimationFrame(() => panelRef.current?.focus());
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
      cancelAnimationFrame(id);
      lastFocused.current?.focus?.();
    };
  }, [open]);

  if (!mounted) return null;

  return createPortal(
    <AnimatePresence>
      {open && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
          />
          <motion.div
            ref={panelRef}
            role="dialog"
            aria-modal="true"
            aria-label={title}
            tabIndex={-1}
            initial={{ opacity: 0, scale: 0.96, y: 12 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.96, y: 12 }}
            transition={{ type: "spring", stiffness: 280, damping: 26 }}
            className={cn(
              "relative w-full max-w-md rounded-2xl border border-border bg-surface p-6 shadow-2xl focus:outline-none",
              className,
            )}
          >
            {title && (
              <h2 className="mb-2 pr-8 text-lg font-semibold">{title}</h2>
            )}
            <button
              type="button"
              onClick={onClose}
              aria-label="Close dialog"
              className="absolute right-4 top-4 grid size-8 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              <X className="size-4" />
            </button>
            <div className="text-sm text-muted">{children}</div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>,
    document.body,
  );
}
```

### Toast
Imperative toasts via a tiny store and a Toaster.
URL: https://dev.ononc.com/ui
Path: src/components/ui/toast.tsx

```tsx
"use client";

import { useSyncExternalStore } from "react";
import { AnimatePresence, motion } from "motion/react";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export type ToastVariant = "default" | "success" | "error" | "info";

interface ToastItem {
  id: number;
  message: string;
  variant: ToastVariant;
}

const ACCENT: Record<ToastVariant, string> = {
  default: "var(--brand)",
  success: "#34d399",
  error: "var(--brand-3)",
  info: "var(--brand-2)",
};

let counter = 0;
let store: ToastItem[] = [];
const listeners = new Set<() => void>();

function emit() {
  for (const listener of listeners) listener();
}

function subscribe(listener: () => void) {
  listeners.add(listener);
  return () => {
    listeners.delete(listener);
  };
}

function getSnapshot() {
  return store;
}

function dismiss(id: number) {
  store = store.filter((t) => t.id !== id);
  emit();
}

/** Push a toast onto the stack. Auto-dismisses after `duration` ms. */
export function toast(
  message: string,
  opts?: { variant?: ToastVariant; duration?: number },
) {
  const id = ++counter;
  store = [...store, { id, message, variant: opts?.variant ?? "default" }];
  emit();
  setTimeout(() => dismiss(id), opts?.duration ?? 3500);
  return id;
}

/** Mount once near the root to render queued toasts. */
export function Toaster({ className }: { className?: string }) {
  const items = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);

  return (
    <div
      aria-live="polite"
      aria-atomic="false"
      className={cn(
        "pointer-events-none fixed bottom-4 right-4 z-[120] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2",
        className,
      )}
    >
      <AnimatePresence initial={false}>
        {items.map((item) => (
          <motion.div
            key={item.id}
            layout
            initial={{ opacity: 0, y: 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, x: 40, scale: 0.9 }}
            transition={{ type: "spring", stiffness: 320, damping: 30 }}
            className="pointer-events-auto flex items-start gap-3 overflow-hidden rounded-xl border border-border bg-surface p-3 shadow-lg"
          >
            <span
              aria-hidden
              className="mt-1 size-2 shrink-0 rounded-full"
              style={{ background: ACCENT[item.variant] }}
            />
            <p className="flex-1 text-sm text-foreground">{item.message}</p>
            <button
              type="button"
              onClick={() => dismiss(item.id)}
              aria-label="Dismiss notification"
              className="grid size-6 shrink-0 place-items-center rounded-md text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              <X className="size-3.5" />
            </button>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}
```

### Command Palette
⌘K launcher with live filtering and full keyboard nav.
URL: https://dev.ononc.com/ui
Path: src/components/ui/command-palette.tsx

```tsx
"use client";

import {
  type ReactNode,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { createPortal } from "react-dom";
import { AnimatePresence, motion } from "motion/react";
import { Search } from "lucide-react";
import { useHydrated } from "@/lib/use-hydrated";
import { cn } from "@/lib/utils";

export interface CommandItem {
  id: string;
  label: string;
  group?: string;
  shortcut?: string;
  icon?: ReactNode;
  onSelect?: () => void;
}

export interface CommandPaletteProps {
  open: boolean;
  onClose: () => void;
  items: CommandItem[];
  placeholder?: string;
}

/**
 * CommandPalette — a ⌘K-style launcher. Filters items as you type, moves the
 * active row with ↑/↓, runs it with Enter, and closes on Escape. The active
 * option is tracked with aria-activedescendant for assistive tech.
 */
export function CommandPalette({
  open,
  onClose,
  items,
  placeholder = "Type a command or search…",
}: CommandPaletteProps) {
  const mounted = useHydrated();
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLDivElement>(null);
  const lastFocused = useRef<HTMLElement | null>(null);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return items;
    return items.filter((i) => i.label.toLowerCase().includes(q));
  }, [items, query]);

  useEffect(() => {
    if (!open) return;
    lastFocused.current = document.activeElement as HTMLElement | null;
    const id = requestAnimationFrame(() => {
      setQuery("");
      setActive(0);
      inputRef.current?.focus();
    });
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      cancelAnimationFrame(id);
      document.body.style.overflow = prevOverflow;
      lastFocused.current?.focus?.();
    };
  }, [open]);

  const run = (item: CommandItem | undefined) => {
    if (!item) return;
    item.onSelect?.();
    onClose();
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Escape") {
      e.preventDefault();
      onClose();
    } else if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive((a) => Math.min(a + 1, filtered.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((a) => Math.max(a - 1, 0));
    } else if (e.key === "Enter") {
      e.preventDefault();
      run(filtered[active]);
    }
  };

  useEffect(() => {
    listRef.current
      ?.querySelector('[data-active="true"]')
      ?.scrollIntoView({ block: "nearest" });
  }, [active]);

  if (!mounted) return null;

  return createPortal(
    <AnimatePresence>
      {open && (
        <div className="fixed inset-0 z-[110] flex items-start justify-center p-4 pt-[12vh]">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
          />
          <motion.div
            role="dialog"
            aria-modal="true"
            aria-label="Command palette"
            initial={{ opacity: 0, scale: 0.97, y: -8 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.97, y: -8 }}
            transition={{ type: "spring", stiffness: 320, damping: 28 }}
            onKeyDown={onKeyDown}
            className="relative w-full max-w-lg overflow-hidden rounded-2xl border border-border bg-surface shadow-2xl"
          >
            <div className="flex items-center gap-3 border-b border-border px-4">
              <Search className="size-4 shrink-0 text-muted" />
              <input
                ref={inputRef}
                value={query}
                onChange={(e) => {
                  setQuery(e.target.value);
                  setActive(0);
                }}
                placeholder={placeholder}
                role="combobox"
                aria-expanded
                aria-controls="command-list"
                aria-activedescendant={
                  filtered[active] ? `command-${filtered[active].id}` : undefined
                }
                className="w-full bg-transparent py-3.5 text-sm outline-none placeholder:text-muted-2"
              />
              <kbd className="hidden rounded border border-border px-1.5 py-0.5 text-[10px] text-muted sm:block">
                ESC
              </kbd>
            </div>
            <div
              id="command-list"
              ref={listRef}
              role="listbox"
              className="max-h-72 overflow-auto p-2"
            >
              {filtered.length === 0 ? (
                <p className="px-3 py-6 text-center text-sm text-muted">
                  No results for “{query}”.
                </p>
              ) : (
                filtered.map((item, i) => (
                  <button
                    key={item.id}
                    id={`command-${item.id}`}
                    role="option"
                    aria-selected={i === active}
                    data-active={i === active}
                    onClick={() => run(item)}
                    onMouseMove={() => setActive(i)}
                    className={cn(
                      "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm",
                      i === active
                        ? "bg-brand/15 text-foreground"
                        : "text-muted",
                    )}
                  >
                    {item.icon && (
                      <span className="grid size-5 shrink-0 place-items-center text-brand-ink">
                        {item.icon}
                      </span>
                    )}
                    <span className="flex-1">{item.label}</span>
                    {item.shortcut && (
                      <kbd className="rounded border border-border px-1.5 py-0.5 text-[10px] text-muted">
                        {item.shortcut}
                      </kbd>
                    )}
                  </button>
                ))
              )}
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>,
    document.body,
  );
}
```

### Dropdown Menu
Menu button with roving focus, Escape, and outside-click.
URL: https://dev.ononc.com/ui
Path: src/components/ui/dropdown-menu.tsx

```tsx
"use client";

import {
  type ReactNode,
  useEffect,
  useRef,
  useState,
} from "react";
import { AnimatePresence, motion } from "motion/react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface MenuItem {
  label: string;
  icon?: ReactNode;
  onSelect?: () => void;
  danger?: boolean;
}

export interface DropdownMenuProps {
  label: string;
  items: MenuItem[];
  className?: string;
}

/**
 * DropdownMenu — an accessible menu button. Opens with click/Enter, moves focus
 * with ↑/↓ (Home/End), selects with Enter, and closes on Escape or outside
 * click — returning focus to the trigger.
 */
export function DropdownMenu({ label, items, className }: DropdownMenuProps) {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);

  useEffect(() => {
    if (!open) return;
    const onClick = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onClick);
    return () => document.removeEventListener("pointerdown", onClick);
  }, [open]);

  useEffect(() => {
    if (open) itemRefs.current[active]?.focus();
  }, [open, active]);

  const close = (returnFocus = true) => {
    setOpen(false);
    if (returnFocus) triggerRef.current?.focus();
  };

  const onMenuKey = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setActive((a) => (a + 1) % items.length);
        break;
      case "ArrowUp":
        e.preventDefault();
        setActive((a) => (a - 1 + items.length) % items.length);
        break;
      case "Home":
        e.preventDefault();
        setActive(0);
        break;
      case "End":
        e.preventDefault();
        setActive(items.length - 1);
        break;
      case "Escape":
        e.preventDefault();
        close();
        break;
    }
  };

  return (
    <div ref={rootRef} className={cn("relative inline-block", className)}>
      <button
        ref={triggerRef}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        onClick={() => {
          setActive(0);
          setOpen((o) => !o);
        }}
        className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium transition-colors hover:bg-background"
      >
        {label}
        <ChevronDown
          className={cn("size-4 transition-transform", open && "rotate-180")}
        />
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            role="menu"
            aria-label={label}
            initial={{ opacity: 0, y: -6, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.97 }}
            transition={{ duration: 0.14 }}
            onKeyDown={onMenuKey}
            className="absolute left-0 z-50 mt-2 min-w-48 overflow-hidden rounded-xl border border-border bg-surface p-1.5 shadow-xl"
          >
            {items.map((item, i) => (
              <button
                key={item.label}
                ref={(el) => {
                  itemRefs.current[i] = el;
                }}
                role="menuitem"
                tabIndex={i === active ? 0 : -1}
                onClick={() => {
                  item.onSelect?.();
                  close();
                }}
                onMouseMove={() => setActive(i)}
                className={cn(
                  "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm outline-none",
                  i === active && "bg-brand/15",
                  item.danger ? "text-brand-3" : "text-foreground",
                )}
              >
                {item.icon && <span className="size-4 shrink-0">{item.icon}</span>}
                {item.label}
              </button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
```

### Popover
Floating panel of arbitrary content with focus return.
URL: https://dev.ononc.com/ui
Path: src/components/ui/popover.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface PopoverProps {
  label: ReactNode;
  children: ReactNode;
  className?: string;
  panelClassName?: string;
}

/**
 * Popover — a trigger that reveals a floating panel of arbitrary content.
 * Closes on Escape and outside click, returning focus to the trigger.
 */
export function Popover({ label, children, className, panelClassName }: PopoverProps) {
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!open) return;
    const onPointer = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false);
        triggerRef.current?.focus();
      }
    };
    document.addEventListener("pointerdown", onPointer);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onPointer);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <div ref={rootRef} className={cn("relative inline-block", className)}>
      <button
        ref={triggerRef}
        type="button"
        aria-haspopup="dialog"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
        className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium transition-colors hover:bg-background"
      >
        {label}
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            role="dialog"
            initial={{ opacity: 0, y: -6, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.97 }}
            transition={{ duration: 0.15 }}
            className={cn(
              "absolute left-0 z-50 mt-2 w-64 rounded-xl border border-border bg-surface p-4 text-sm shadow-xl",
              panelClassName,
            )}
          >
            {children}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
```

### Drawer
Slide-in side panel with focus management and Escape.
URL: https://dev.ononc.com/ui
Path: src/components/ui/drawer.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import { AnimatePresence, motion } from "motion/react";
import { X } from "lucide-react";
import { useHydrated } from "@/lib/use-hydrated";
import { cn } from "@/lib/utils";

export interface DrawerProps {
  open: boolean;
  onClose: () => void;
  side?: "left" | "right";
  title?: string;
  children: ReactNode;
  className?: string;
}

/**
 * Drawer — a panel that slides in from the edge. Portaled, closes on Escape and
 * backdrop click, locks body scroll, and manages focus like a dialog.
 */
export function Drawer({
  open,
  onClose,
  side = "right",
  title,
  children,
  className,
}: DrawerProps) {
  const mounted = useHydrated();
  const panelRef = useRef<HTMLDivElement>(null);
  const lastFocused = useRef<HTMLElement | null>(null);
  const onCloseRef = useRef(onClose);
  useEffect(() => {
    onCloseRef.current = onClose;
  });

  useEffect(() => {
    if (!open) return;
    lastFocused.current = document.activeElement as HTMLElement | null;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onCloseRef.current();
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const id = requestAnimationFrame(() => panelRef.current?.focus());
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
      cancelAnimationFrame(id);
      lastFocused.current?.focus?.();
    };
  }, [open]);

  if (!mounted) return null;

  return createPortal(
    <AnimatePresence>
      {open && (
        <div className="fixed inset-0 z-[105]">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
          />
          <motion.div
            ref={panelRef}
            role="dialog"
            aria-modal="true"
            aria-label={title}
            tabIndex={-1}
            initial={{ x: side === "right" ? "100%" : "-100%" }}
            animate={{ x: 0 }}
            exit={{ x: side === "right" ? "100%" : "-100%" }}
            transition={{ type: "spring", stiffness: 320, damping: 34 }}
            className={cn(
              "absolute inset-y-0 flex w-80 max-w-[85vw] flex-col border-border bg-surface p-6 shadow-2xl focus:outline-none",
              side === "right" ? "right-0 border-l" : "left-0 border-r",
              className,
            )}
          >
            <div className="flex items-center justify-between">
              {title && <h2 className="text-lg font-semibold">{title}</h2>}
              <button
                type="button"
                onClick={onClose}
                aria-label="Close drawer"
                className="ml-auto grid size-8 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
              >
                <X className="size-4" />
              </button>
            </div>
            <div className="mt-4 flex-1 overflow-auto text-sm text-muted">
              {children}
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>,
    document.body,
  );
}
```

### OTP Input
Segmented code entry with auto-advance and paste.
URL: https://dev.ononc.com/ui
Path: src/components/ui/otp-input.tsx

```tsx
"use client";

import { type ClipboardEvent, type KeyboardEvent, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface OTPInputProps {
  length?: number;
  onComplete?: (code: string) => void;
  className?: string;
}

/**
 * OTPInput — a segmented one-time-code field. Typing auto-advances, Backspace
 * steps back, ←/→ move between cells, and pasting a code fills every cell.
 */
export function OTPInput({ length = 6, onComplete, className }: OTPInputProps) {
  const [values, setValues] = useState<string[]>(() =>
    Array.from({ length }, () => ""),
  );
  const refs = useRef<(HTMLInputElement | null)[]>([]);

  const focusAt = (i: number) => refs.current[Math.max(0, Math.min(i, length - 1))]?.focus();

  const commit = (next: string[]) => {
    setValues(next);
    if (next.every((v) => v !== "")) onComplete?.(next.join(""));
  };

  const handleChange = (i: number, raw: string) => {
    const digit = raw.replace(/\D/g, "").slice(-1);
    const next = [...values];
    next[i] = digit;
    commit(next);
    if (digit) focusAt(i + 1);
  };

  const handleKeyDown = (i: number, e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Backspace") {
      if (values[i] === "" && i > 0) {
        e.preventDefault();
        const next = [...values];
        next[i - 1] = "";
        setValues(next);
        focusAt(i - 1);
      }
    } else if (e.key === "ArrowLeft") {
      e.preventDefault();
      focusAt(i - 1);
    } else if (e.key === "ArrowRight") {
      e.preventDefault();
      focusAt(i + 1);
    }
  };

  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault();
    const digits = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
    if (!digits) return;
    const next = Array.from({ length }, (_, i) => digits[i] ?? "");
    commit(next);
    focusAt(digits.length);
  };

  return (
    <div className={cn("flex gap-2", className)} onPaste={handlePaste}>
      {values.map((value, i) => (
        <input
          key={i}
          ref={(el) => {
            refs.current[i] = el;
          }}
          type="text"
          inputMode="numeric"
          autoComplete={i === 0 ? "one-time-code" : "off"}
          maxLength={1}
          value={value}
          aria-label={`Digit ${i + 1}`}
          onChange={(e) => handleChange(i, e.target.value)}
          onKeyDown={(e) => handleKeyDown(i, e)}
          onFocus={(e) => e.target.select()}
          className="size-12 rounded-xl border border-border bg-surface text-center text-lg font-semibold tabular-nums outline-none transition-colors focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-brand/40"
        />
      ))}
    </div>
  );
}
```

### Slider
Range input with pointer drag and keyboard control.
URL: https://dev.ononc.com/ui/slider
Path: src/components/ui/slider.tsx

```tsx
"use client";

import { type KeyboardEvent, type PointerEvent, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface SliderProps {
  min?: number;
  max?: number;
  step?: number;
  defaultValue?: number;
  value?: number;
  onValueChange?: (value: number) => void;
  className?: string;
  "aria-label"?: string;
}

/**
 * Slider — an accessible range input. Drag the thumb or the track; ←/→ and
 * Home/End adjust by step. Works controlled or uncontrolled.
 */
export function Slider({
  min = 0,
  max = 100,
  step = 1,
  defaultValue = 50,
  value,
  onValueChange,
  className,
  ...aria
}: SliderProps) {
  const trackRef = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);
  const [internal, setInternal] = useState(defaultValue);
  const current = value ?? internal;
  const pct = ((current - min) / (max - min)) * 100;

  const set = (v: number) => {
    const snapped = Math.round(Math.max(min, Math.min(max, v)) / step) * step;
    if (value === undefined) setInternal(snapped);
    onValueChange?.(snapped);
  };

  const fromClientX = (clientX: number) => {
    const rect = trackRef.current?.getBoundingClientRect();
    if (!rect) return;
    set(min + ((clientX - rect.left) / rect.width) * (max - min));
  };

  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    dragging.current = true;
    e.currentTarget.setPointerCapture(e.pointerId);
    fromClientX(e.clientX);
  };
  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    if (dragging.current) fromClientX(e.clientX);
  };
  const onPointerUp = (e: PointerEvent<HTMLDivElement>) => {
    dragging.current = false;
    e.currentTarget.releasePointerCapture(e.pointerId);
  };

  const onKeyDown = (e: KeyboardEvent) => {
    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
      e.preventDefault();
      set(current + step);
    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
      e.preventDefault();
      set(current - step);
    } else if (e.key === "Home") {
      e.preventDefault();
      set(min);
    } else if (e.key === "End") {
      e.preventDefault();
      set(max);
    }
  };

  return (
    <div
      ref={trackRef}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      className={cn(
        "relative flex h-6 w-56 touch-none items-center",
        className,
      )}
    >
      <div className="h-1.5 w-full rounded-full bg-surface-2" />
      <div
        className="absolute h-1.5 rounded-full bg-brand"
        style={{ width: `${pct}%` }}
      />
      <div
        role="slider"
        tabIndex={0}
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={current}
        aria-label={aria["aria-label"] ?? "Value"}
        onKeyDown={onKeyDown}
        style={{ left: `${pct}%` }}
        className="absolute size-4 -translate-x-1/2 cursor-grab rounded-full border-2 border-brand bg-background shadow outline-none focus-visible:ring-2 focus-visible:ring-brand/50 active:cursor-grabbing"
      />
    </div>
  );
}
```

### Rating
Star rating with hover preview and arrow-key adjust.
URL: https://dev.ononc.com/ui/rating
Path: src/components/ui/rating.tsx

```tsx
"use client";

import { type KeyboardEvent, useState } from "react";
import { Star } from "lucide-react";
import { cn } from "@/lib/utils";

export interface RatingProps {
  max?: number;
  defaultValue?: number;
  onChange?: (value: number) => void;
  className?: string;
}

/**
 * Rating — a star rating exposed as a slider. Hover previews, click sets, and
 * ←/→ (Home/End) adjust the value for keyboard users.
 */
export function Rating({
  max = 5,
  defaultValue = 0,
  onChange,
  className,
}: RatingProps) {
  const [value, setValue] = useState(defaultValue);
  const [hover, setHover] = useState<number | null>(null);
  const shown = hover ?? value;

  const set = (v: number) => {
    const clamped = Math.max(0, Math.min(max, v));
    setValue(clamped);
    onChange?.(clamped);
  };

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
      e.preventDefault();
      set(value + 1);
    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
      e.preventDefault();
      set(value - 1);
    } else if (e.key === "Home") {
      e.preventDefault();
      set(0);
    } else if (e.key === "End") {
      e.preventDefault();
      set(max);
    }
  };

  return (
    <div
      role="slider"
      aria-label="Rating"
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={value}
      tabIndex={0}
      onKeyDown={onKeyDown}
      onMouseLeave={() => setHover(null)}
      className={cn(
        "inline-flex gap-1 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-brand/50",
        className,
      )}
    >
      {Array.from({ length: max }, (_, i) => {
        const filled = i < shown;
        return (
          <button
            key={i}
            type="button"
            tabIndex={-1}
            aria-hidden
            onMouseEnter={() => setHover(i + 1)}
            onClick={() => set(i + 1)}
            className="transition-transform hover:scale-110"
          >
            <Star
              className={cn(
                "size-6 transition-colors",
                filled
                  ? "fill-brand-3 text-brand-3"
                  : "fill-transparent text-muted-2",
              )}
            />
          </button>
        );
      })}
    </div>
  );
}
```

### Stepper
Multi-step progress with completed and active states.
URL: https://dev.ononc.com/ui
Path: src/components/ui/stepper.tsx

```tsx
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface StepperProps {
  steps: string[];
  /** Zero-based index of the current step. */
  current: number;
  className?: string;
}

/**
 * Stepper — a horizontal progress indicator. Completed steps show a check,
 * the current step is highlighted, and a filled bar tracks progress.
 */
export function Stepper({ steps, current, className }: StepperProps) {
  const pct = steps.length > 1 ? (current / (steps.length - 1)) * 100 : 0;

  return (
    <div className={cn("w-full", className)}>
      <ol className="relative flex items-center justify-between">
        <span
          aria-hidden
          className="absolute left-0 right-0 top-4 h-0.5 -translate-y-1/2 bg-border"
        />
        <span
          aria-hidden
          className="absolute left-0 top-4 h-0.5 -translate-y-1/2 bg-brand transition-[width] duration-500"
          style={{ width: `${pct}%` }}
        />
        {steps.map((step, i) => {
          const done = i < current;
          const activeStep = i === current;
          return (
            <li
              key={step}
              className="relative z-10 flex flex-col items-center gap-2"
              aria-current={activeStep ? "step" : undefined}
            >
              <span
                className={cn(
                  "grid size-8 place-items-center rounded-full border text-sm font-semibold transition-colors",
                  done && "border-brand bg-brand text-white",
                  activeStep && "border-brand bg-background text-brand-ink",
                  !done && !activeStep && "border-border bg-surface text-muted",
                )}
              >
                {done ? <Check className="size-4" /> : i + 1}
              </span>
              <span
                className={cn(
                  "text-xs",
                  activeStep ? "font-medium text-foreground" : "text-muted",
                )}
              >
                {step}
              </span>
            </li>
          );
        })}
      </ol>
    </div>
  );
}
```

### Progress Ring
Radial dial that eases to its value on view.
URL: https://dev.ononc.com/ui/progress-ring
Path: src/components/ui/progress-ring.tsx

```tsx
"use client";

import { useEffect, useId, useRef, useState } from "react";
import { useInView } from "motion/react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface ProgressRingProps {
  /** Target percentage (0–100). */
  value?: number;
  size?: number;
  stroke?: number;
  className?: string;
}

/**
 * ProgressRing — a radial progress dial that eases from 0 to its value the
 * first time it scrolls into view, with a gradient arc and a live percentage.
 */
export function ProgressRing({
  value = 72,
  size = 120,
  stroke = 10,
  className,
}: ProgressRingProps) {
  const gradId = useId();
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.5 });
  const [display, setDisplay] = useState(0);

  useEffect(() => {
    if (!inView) return;
    const duration = prefersReducedMotion() ? 0 : 1200;
    const start = performance.now();
    let raf = 0;
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setDisplay(value * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, value]);

  const radius = (size - stroke) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference * (1 - display / 100);

  return (
    <div
      ref={ref}
      role="progressbar"
      aria-valuemin={0}
      aria-valuemax={100}
      aria-valuenow={Math.round(display)}
      className={cn("relative inline-grid place-items-center", className)}
    >
      <svg width={size} height={size} className="-rotate-90">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="var(--surface-2)"
          strokeWidth={stroke}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke={`url(#${gradId})`}
          strokeWidth={stroke}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
        />
        <defs>
          <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="var(--brand)" />
            <stop offset="100%" stopColor="var(--brand-2)" />
          </linearGradient>
        </defs>
      </svg>
      <span className="absolute text-xl font-semibold tabular-nums">
        {Math.round(display)}%
      </span>
    </div>
  );
}
```

### Scroll Progress
Gradient bar tied to scroll position (window or container).
URL: https://dev.ononc.com/ui
Path: src/components/ui/scroll-progress.tsx

```tsx
"use client";

import { type RefObject } from "react";
import { motion, useScroll, useSpring } from "motion/react";
import { cn } from "@/lib/utils";

export interface ScrollProgressProps {
  /** Track this scroll container instead of the window. */
  containerRef?: RefObject<HTMLElement | null>;
  className?: string;
}

/**
 * ScrollProgress — a gradient bar that fills with scroll progress. Tracks the
 * window by default, or a given scroll container. Position it with className
 * (defaults to fixed at the top of the viewport).
 */
export function ScrollProgress({ containerRef, className }: ScrollProgressProps) {
  const { scrollYProgress } = useScroll(
    containerRef ? { container: containerRef } : undefined,
  );
  const scaleX = useSpring(scrollYProgress, {
    stiffness: 120,
    damping: 30,
    mass: 0.3,
  });

  return (
    <motion.div
      aria-hidden
      style={{ scaleX }}
      className={cn(
        "z-[130] h-1 origin-left bg-gradient-to-r from-brand via-brand-2 to-brand-3",
        containerRef ? "absolute inset-x-0 top-0" : "fixed inset-x-0 top-0",
        className,
      )}
    />
  );
}
```

### Image Compare
Before/after wipe with a draggable, keyboardable handle.
URL: https://dev.ononc.com/ui
Path: src/components/ui/image-compare.tsx

```tsx
"use client";

import { type KeyboardEvent, type PointerEvent, type ReactNode, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface ImageCompareProps {
  before: ReactNode;
  after: ReactNode;
  className?: string;
  /** Starting split position (0–100). */
  defaultPosition?: number;
}

/**
 * ImageCompare — drag (or use ←/→) to wipe between a "before" and "after"
 * layer. The handle is an accessible slider.
 */
export function ImageCompare({
  before,
  after,
  className,
  defaultPosition = 50,
}: ImageCompareProps) {
  const [pos, setPos] = useState(defaultPosition);
  const ref = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);

  const update = (clientX: number) => {
    const rect = ref.current?.getBoundingClientRect();
    if (!rect) return;
    setPos(Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100)));
  };

  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    dragging.current = true;
    e.currentTarget.setPointerCapture(e.pointerId);
    update(e.clientX);
  };
  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    if (dragging.current) update(e.clientX);
  };
  const onPointerUp = (e: PointerEvent<HTMLDivElement>) => {
    dragging.current = false;
    e.currentTarget.releasePointerCapture(e.pointerId);
  };

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key === "ArrowLeft") {
      e.preventDefault();
      setPos((p) => Math.max(0, p - 4));
    } else if (e.key === "ArrowRight") {
      e.preventDefault();
      setPos((p) => Math.min(100, p + 4));
    }
  };

  return (
    <div
      ref={ref}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      className={cn(
        "relative aspect-[16/10] w-full touch-none select-none overflow-hidden rounded-2xl border border-border",
        className,
      )}
    >
      <div className="absolute inset-0">{before}</div>
      <div
        className="absolute inset-0"
        style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }}
      >
        {after}
      </div>
      <div
        className="absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-white/90"
        style={{ left: `${pos}%` }}
      >
        <div
          role="slider"
          tabIndex={0}
          aria-label="Comparison position"
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={Math.round(pos)}
          onKeyDown={onKeyDown}
          className="absolute left-1/2 top-1/2 grid size-9 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize place-items-center rounded-full border border-white/60 bg-background/80 text-foreground shadow-lg outline-none backdrop-blur focus-visible:ring-2 focus-visible:ring-brand"
        >
          <span className="text-xs">↔</span>
        </div>
      </div>
    </div>
  );
}
```

### Avatar Stack
Overlapping avatars with an overflow +N chip.
URL: https://dev.ononc.com/ui
Path: src/components/ui/avatar-stack.tsx

```tsx
import { cn } from "@/lib/utils";

export interface AvatarStackProps {
  names: string[];
  /** Max avatars before collapsing into a +N chip. */
  max?: number;
  className?: string;
}

const GRADIENTS = [
  "from-brand to-brand-2",
  "from-brand-2 to-brand-3",
  "from-brand-3 to-brand",
  "from-indigo-500 to-brand",
];

function initials(name: string) {
  return name
    .split(" ")
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

/**
 * AvatarStack — overlapping avatar bubbles (colored initials) that fan apart
 * slightly on hover, with a +N chip when the list overflows.
 */
export function AvatarStack({ names, max = 4, className }: AvatarStackProps) {
  const shown = names.slice(0, max);
  const overflow = names.length - shown.length;

  return (
    <div className={cn("flex items-center", className)}>
      {shown.map((name, i) => (
        <span
          key={i}
          title={name}
          className={cn(
            "grid size-10 place-items-center rounded-full bg-gradient-to-br text-sm font-semibold text-white ring-2 ring-background transition-transform hover:-translate-y-1",
            GRADIENTS[i % GRADIENTS.length],
            i > 0 && "-ml-3",
          )}
        >
          {initials(name)}
        </span>
      ))}
      {overflow > 0 && (
        <span className="-ml-3 grid size-10 place-items-center rounded-full bg-surface text-sm font-semibold text-muted ring-2 ring-background">
          +{overflow}
        </span>
      )}
    </div>
  );
}
```

### Breadcrumbs
Accessible trail with chevrons and aria-current.
URL: https://dev.ononc.com/ui
Path: src/components/ui/breadcrumbs.tsx

```tsx
import { Fragment } from "react";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface Crumb {
  label: string;
  href?: string;
}

export interface BreadcrumbsProps {
  items: Crumb[];
  className?: string;
}

/**
 * Breadcrumbs — an accessible breadcrumb trail. The last item is marked
 * aria-current="page"; the rest are links.
 */
export function Breadcrumbs({ items, className }: BreadcrumbsProps) {
  return (
    <nav aria-label="Breadcrumb" className={cn("text-sm", className)}>
      <ol className="flex flex-wrap items-center gap-1.5">
        {items.map((item, i) => {
          const last = i === items.length - 1;
          return (
            <Fragment key={i}>
              <li>
                {last ? (
                  <span aria-current="page" className="font-medium text-foreground">
                    {item.label}
                  </span>
                ) : (
                  <a
                    href={item.href ?? "#"}
                    className="text-muted transition-colors hover:text-foreground"
                  >
                    {item.label}
                  </a>
                )}
              </li>
              {!last && (
                <li aria-hidden className="text-muted-2">
                  <ChevronRight className="size-3.5" />
                </li>
              )}
            </Fragment>
          );
        })}
      </ol>
    </nav>
  );
}
```

### Skeleton
Shimmering placeholders for loading states.
URL: https://dev.ononc.com/ui
Path: src/components/ui/skeleton.tsx

```tsx
import type { CSSProperties, HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export type SkeletonProps = HTMLAttributes<HTMLDivElement>;

/**
 * Skeleton — a shimmering placeholder for loading states. Size it with utility
 * classes (e.g. `h-4 w-32`). A light band sweeps across via the shimmer keyframe.
 */
export function Skeleton({ className, style, ...props }: SkeletonProps) {
  return (
    <div
      aria-hidden
      className={cn("animate-shimmer rounded-md", className)}
      style={
        {
          backgroundImage:
            "linear-gradient(90deg, var(--surface-2), color-mix(in oklab, var(--foreground) 9%, var(--surface-2)), var(--surface-2))",
          backgroundSize: "200% 100%",
          ...style,
        } as CSSProperties
      }
      {...props}
    />
  );
}
```

### Combobox
Accessible autocomplete with live filtering and keyboard nav.
URL: https://dev.ononc.com/ui
Path: src/components/ui/combobox.tsx

```tsx
"use client";

import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ComboboxProps {
  options: string[];
  placeholder?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
  className?: string;
}

/**
 * Combobox — an accessible autocomplete. Type to filter, ↑/↓ to move, Enter to
 * select, Escape to close; closes on outside click. Wired with combobox/listbox
 * roles and aria-activedescendant.
 */
export function Combobox({
  options,
  placeholder = "Select…",
  defaultValue = "",
  onChange,
  className,
}: ComboboxProps) {
  const id = useId();
  const rootRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState(defaultValue);
  const [active, setActive] = useState(0);

  const filtered = options.filter((o) =>
    o.toLowerCase().includes(query.toLowerCase()),
  );

  useEffect(() => {
    if (!open) return;
    const onDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [open]);

  const choose = (value: string) => {
    setSelected(value);
    setQuery("");
    setOpen(false);
    onChange?.(value);
  };

  const onKeyDown = (e: KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      if (!open) {
        setOpen(true);
        return;
      }
      setActive((a) => Math.min(a + 1, filtered.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((a) => Math.max(a - 1, 0));
    } else if (e.key === "Enter") {
      e.preventDefault();
      if (open && filtered[active]) choose(filtered[active]);
      else setOpen(true);
    } else if (e.key === "Escape") {
      setOpen(false);
    }
  };

  return (
    <div ref={rootRef} className={cn("relative w-64", className)}>
      <div className="relative">
        <input
          role="combobox"
          aria-expanded={open}
          aria-controls={`${id}-list`}
          aria-autocomplete="list"
          aria-activedescendant={
            open && filtered[active] ? `${id}-opt-${active}` : undefined
          }
          value={open ? query : selected}
          placeholder={placeholder}
          onChange={(e) => {
            setQuery(e.target.value);
            setActive(0);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          onKeyDown={onKeyDown}
          className="w-full rounded-lg border border-border bg-surface px-3 py-2 pr-9 text-sm outline-none focus-visible:border-brand"
        />
        <ChevronsUpDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
      </div>
      {open && (
        <ul
          id={`${id}-list`}
          role="listbox"
          className="absolute z-50 mt-1 max-h-56 w-full overflow-auto rounded-lg border border-border bg-surface p-1 shadow-xl"
        >
          {filtered.length === 0 ? (
            <li className="px-3 py-2 text-sm text-muted">No matches</li>
          ) : (
            filtered.map((option, i) => (
              <li
                key={option}
                id={`${id}-opt-${i}`}
                role="option"
                aria-selected={option === selected}
                onMouseDown={(e) => {
                  e.preventDefault();
                  choose(option);
                }}
                onMouseMove={() => setActive(i)}
                className={cn(
                  "flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm",
                  i === active && "bg-brand/15",
                )}
              >
                {option}
                {option === selected && <Check className="size-4 text-brand-2" />}
              </li>
            ))
          )}
        </ul>
      )}
    </div>
  );
}
```

### Toggle Group
Single or multiple selection of toggle buttons.
URL: https://dev.ononc.com/ui
Path: src/components/ui/toggle-group.tsx

```tsx
"use client";

import { type ReactNode, useState } from "react";
import { cn } from "@/lib/utils";

export interface ToggleOption {
  value: string;
  label: ReactNode;
}

export interface ToggleGroupProps {
  options: ToggleOption[];
  type?: "single" | "multiple";
  defaultValue?: string[];
  onChange?: (value: string[]) => void;
  className?: string;
}

/**
 * ToggleGroup — a row of toggle buttons supporting single or multiple
 * selection. Each button reflects state via aria-pressed inside a group.
 */
export function ToggleGroup({
  options,
  type = "single",
  defaultValue = [],
  onChange,
  className,
}: ToggleGroupProps) {
  const [value, setValue] = useState<Set<string>>(() => new Set(defaultValue));

  const toggle = (v: string) => {
    setValue((prev) => {
      let next: Set<string>;
      if (type === "single") {
        next = prev.has(v) ? new Set() : new Set([v]);
      } else {
        next = new Set(prev);
        if (next.has(v)) next.delete(v);
        else next.add(v);
      }
      onChange?.([...next]);
      return next;
    });
  };

  return (
    <div
      role="group"
      className={cn(
        "inline-flex gap-1 rounded-xl border border-border bg-surface p-1",
        className,
      )}
    >
      {options.map((option) => {
        const pressed = value.has(option.value);
        return (
          <button
            key={option.value}
            type="button"
            aria-pressed={pressed}
            onClick={() => toggle(option.value)}
            className={cn(
              "inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors",
              pressed
                ? "bg-brand text-white"
                : "text-muted hover:bg-background hover:text-foreground",
            )}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
}
```

### Tag Input
Add chips with Enter, remove with × or Backspace.
URL: https://dev.ononc.com/ui
Path: src/components/ui/tag-input.tsx

```tsx
"use client";

import { type KeyboardEvent, useState } from "react";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TagInputProps {
  defaultTags?: string[];
  placeholder?: string;
  onChange?: (tags: string[]) => void;
  className?: string;
}

/**
 * TagInput — type and press Enter (or comma) to add a chip; click the × or
 * press Backspace on an empty field to remove the last one.
 */
export function TagInput({
  defaultTags = [],
  placeholder = "Add a tag…",
  onChange,
  className,
}: TagInputProps) {
  const [tags, setTags] = useState<string[]>(defaultTags);
  const [input, setInput] = useState("");

  const update = (next: string[]) => {
    setTags(next);
    onChange?.(next);
  };
  const add = (raw: string) => {
    const tag = raw.trim();
    if (tag && !tags.includes(tag)) update([...tags, tag]);
    setInput("");
  };
  const removeAt = (i: number) => update(tags.filter((_, idx) => idx !== i));

  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      add(input);
    } else if (e.key === "Backspace" && input === "" && tags.length > 0) {
      removeAt(tags.length - 1);
    }
  };

  return (
    <div
      className={cn(
        "flex w-72 flex-wrap items-center gap-1.5 rounded-lg border border-border bg-surface p-1.5 focus-within:border-brand",
        className,
      )}
    >
      <ul className="contents">
        {tags.map((tag, i) => (
          <li
            key={tag}
            className="inline-flex items-center gap-1 rounded-md bg-brand/15 py-1 pl-2.5 pr-1 text-sm text-foreground"
          >
            {tag}
            <button
              type="button"
              aria-label={`Remove ${tag}`}
              onClick={() => removeAt(i)}
              className="grid size-4 place-items-center rounded text-muted transition-colors hover:text-foreground"
            >
              <X className="size-3" />
            </button>
          </li>
        ))}
      </ul>
      <input
        value={input}
        placeholder={tags.length ? "" : placeholder}
        aria-label="Add a tag"
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={onKeyDown}
        className="min-w-[6rem] flex-1 bg-transparent px-1.5 py-1 text-sm outline-none"
      />
    </div>
  );
}
```

### Pagination
Numbered pages with prev/next and ellipsis collapsing.
URL: https://dev.ononc.com/ui
Path: src/components/ui/pagination.tsx

```tsx
"use client";

import { useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PaginationProps {
  count: number;
  page?: number;
  defaultPage?: number;
  onPageChange?: (page: number) => void;
  /** Pages shown on each side of the current page. */
  siblingCount?: number;
  className?: string;
}

function range(start: number, end: number) {
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
}

/**
 * Pagination — numbered pages with prev/next and ellipsis collapsing for long
 * ranges. Works controlled (`page`) or uncontrolled (`defaultPage`).
 */
export function Pagination({
  count,
  page,
  defaultPage = 1,
  onPageChange,
  siblingCount = 1,
  className,
}: PaginationProps) {
  const [internal, setInternal] = useState(defaultPage);
  const current = page ?? internal;

  const go = (p: number) => {
    const next = Math.max(1, Math.min(count, p));
    if (page === undefined) setInternal(next);
    onPageChange?.(next);
  };

  const left = Math.max(2, current - siblingCount);
  const right = Math.min(count - 1, current + siblingCount);
  const items: (number | "…")[] = [1];
  if (left > 2) items.push("…");
  items.push(...range(left, right));
  if (right < count - 1) items.push("…");
  if (count > 1) items.push(count);

  const navBtn =
    "grid size-9 place-items-center rounded-lg border border-border text-sm transition-colors disabled:opacity-40";

  return (
    <nav aria-label="Pagination" className={cn("flex items-center gap-1.5", className)}>
      <button
        type="button"
        aria-label="Previous page"
        onClick={() => go(current - 1)}
        disabled={current === 1}
        className={cn(navBtn, "hover:bg-surface")}
      >
        <ChevronLeft className="size-4" />
      </button>
      {items.map((item, i) =>
        item === "…" ? (
          <span key={`e${i}`} className="px-1 text-muted">
            …
          </span>
        ) : (
          <button
            key={item}
            type="button"
            aria-label={`Page ${item}`}
            aria-current={item === current ? "page" : undefined}
            onClick={() => go(item)}
            className={cn(
              navBtn,
              item === current
                ? "border-brand bg-brand text-white"
                : "hover:bg-surface",
            )}
          >
            {item}
          </button>
        ),
      )}
      <button
        type="button"
        aria-label="Next page"
        onClick={() => go(current + 1)}
        disabled={current === count}
        className={cn(navBtn, "hover:bg-surface")}
      >
        <ChevronRight className="size-4" />
      </button>
    </nav>
  );
}
```

### Progress Bar
Linear meter that fills to its value on view.
URL: https://dev.ononc.com/ui/progress-bar
Path: src/components/ui/progress-bar.tsx

```tsx
"use client";

import { useRef } from "react";
import { useInView } from "motion/react";
import { cn } from "@/lib/utils";

export interface ProgressBarProps {
  /** Target value (0–100). */
  value: number;
  label?: string;
  showValue?: boolean;
  className?: string;
}

/**
 * ProgressBar — a linear meter that fills to its value the first time it
 * scrolls into view. Exposed as an ARIA progressbar.
 */
export function ProgressBar({
  value,
  label,
  showValue = true,
  className,
}: ProgressBarProps) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.6 });
  const v = Math.max(0, Math.min(100, value));

  return (
    <div ref={ref} className={cn("w-72", className)}>
      {(label || showValue) && (
        <div className="mb-1.5 flex items-center justify-between text-sm">
          {label ? <span className="text-foreground">{label}</span> : <span />}
          {showValue && <span className="tabular-nums text-muted">{v}%</span>}
        </div>
      )}
      <div
        role="progressbar"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={v}
        aria-label={label ?? "Progress"}
        className="h-2 w-full overflow-hidden rounded-full bg-surface-2"
      >
        <div
          className="h-full rounded-full bg-gradient-to-r from-brand to-brand-2 transition-[width] duration-700 ease-out"
          style={{ width: inView ? `${v}%` : "0%" }}
        />
      </div>
    </div>
  );
}
```

### File Dropzone
Drag-and-drop file picker with a list (front-end only).
URL: https://dev.ononc.com/ui
Path: src/components/ui/file-dropzone.tsx

```tsx
"use client";

import { type DragEvent, useRef, useState } from "react";
import { File as FileIcon, UploadCloud, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FileDropzoneProps {
  multiple?: boolean;
  accept?: string;
  onFiles?: (files: File[]) => void;
  className?: string;
}

/**
 * FileDropzone — drag files in or click to browse, with a selected-file list.
 * NOTE: front-end only — it surfaces the chosen File objects via `onFiles` and
 * uploads nothing. Wire `onFiles` to your own authenticated upload.
 */
export function FileDropzone({
  multiple = true,
  accept,
  onFiles,
  className,
}: FileDropzoneProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [dragging, setDragging] = useState(false);
  const [files, setFiles] = useState<File[]>([]);

  const handle = (list: FileList | null) => {
    if (!list) return;
    const arr = Array.from(list);
    setFiles(arr);
    onFiles?.(arr);
  };

  const onDrop = (e: DragEvent<HTMLButtonElement>) => {
    e.preventDefault();
    setDragging(false);
    handle(e.dataTransfer.files);
  };

  return (
    <div className={cn("w-72", className)}>
      <button
        type="button"
        onClick={() => inputRef.current?.click()}
        onDragOver={(e) => {
          e.preventDefault();
          setDragging(true);
        }}
        onDragLeave={() => setDragging(false)}
        onDrop={onDrop}
        className={cn(
          "flex w-full flex-col items-center gap-2 rounded-xl border-2 border-dashed p-6 text-center transition-colors",
          dragging
            ? "border-brand bg-brand/5"
            : "border-border bg-surface hover:border-border-strong",
        )}
      >
        <UploadCloud
          className={cn("size-7", dragging ? "text-brand-ink" : "text-muted")}
        />
        <span className="text-sm font-medium">Drop files or click to browse</span>
        <span className="text-xs text-muted">
          Front-end demo — nothing is uploaded
        </span>
      </button>
      <input
        ref={inputRef}
        type="file"
        multiple={multiple}
        accept={accept}
        aria-label="Choose files"
        className="sr-only"
        onChange={(e) => handle(e.target.files)}
      />
      {files.length > 0 && (
        <ul className="mt-3 space-y-1.5">
          {files.map((file, i) => (
            <li
              key={i}
              className="flex items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2 text-sm"
            >
              <FileIcon className="size-4 shrink-0 text-muted" />
              <span className="flex-1 truncate">{file.name}</span>
              <span className="shrink-0 text-xs text-muted">
                {(file.size / 1024).toFixed(0)} KB
              </span>
              <button
                type="button"
                aria-label={`Remove ${file.name}`}
                onClick={() =>
                  setFiles((prev) => prev.filter((_, idx) => idx !== i))
                }
                className="shrink-0 text-muted transition-colors hover:text-foreground"
              >
                <X className="size-3.5" />
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
```

### Checkbox
Tri-state checkbox with an indeterminate option and labels.
URL: https://dev.ononc.com/ui
Path: src/components/ui/checkbox.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { motion } from "motion/react";
import { Check, Minus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CheckboxProps {
  checked?: boolean;
  defaultChecked?: boolean;
  /** Renders the mixed (–) state; reports aria-checked="mixed". */
  indeterminate?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
  label?: ReactNode;
  description?: ReactNode;
  className?: string;
}

/**
 * Checkbox — an accessible tri-state checkbox (role="checkbox", aria-checked).
 * Works controlled or uncontrolled; the check springs in. The visible label
 * becomes the accessible name, and an optional description is wired via
 * aria-describedby.
 */
export function Checkbox({
  checked,
  defaultChecked = false,
  indeterminate = false,
  onCheckedChange,
  disabled = false,
  label,
  description,
  className,
}: CheckboxProps) {
  const descId = useId();
  const [internal, setInternal] = useState(defaultChecked);
  const isControlled = checked !== undefined;
  const on = isControlled ? checked : internal;
  const marked = on || indeterminate;

  const toggle = () => {
    if (disabled) return;
    const next = !on;
    if (!isControlled) setInternal(next);
    onCheckedChange?.(next);
  };

  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={indeterminate ? "mixed" : on}
      aria-label={typeof label === "string" ? label : undefined}
      aria-describedby={description ? descId : undefined}
      disabled={disabled}
      onClick={toggle}
      className={cn(
        "group inline-flex items-start gap-2.5 text-left outline-none disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
    >
      <span
        className={cn(
          "mt-0.5 grid size-5 shrink-0 place-items-center rounded-md border transition-colors group-focus-visible:ring-2 group-focus-visible:ring-brand/50 group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background",
          marked
            ? "border-brand bg-brand text-white"
            : "border-border-strong bg-surface",
        )}
      >
        <motion.span
          initial={false}
          animate={{ scale: marked ? 1 : 0, opacity: marked ? 1 : 0 }}
          transition={{ type: "spring", stiffness: 520, damping: 30 }}
          className="grid place-items-center"
        >
          {indeterminate ? (
            <Minus className="size-3.5" strokeWidth={3} />
          ) : (
            <Check className="size-3.5" strokeWidth={3} />
          )}
        </motion.span>
      </span>
      {(label || description) && (
        <span className="space-y-0.5">
          {label && (
            <span className="block text-sm font-medium text-foreground">
              {label}
            </span>
          )}
          {description && (
            <span id={descId} className="block text-xs text-muted">
              {description}
            </span>
          )}
        </span>
      )}
    </button>
  );
}
```

### Radio Group
Single-select with roving focus and arrow-key navigation.
URL: https://dev.ononc.com/ui
Path: src/components/ui/radio-group.tsx

```tsx
"use client";

import { type KeyboardEvent, type ReactNode, useId, useRef, useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface RadioOption {
  value: string;
  label: ReactNode;
  description?: ReactNode;
  disabled?: boolean;
}

export interface RadioGroupProps {
  options: RadioOption[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  className?: string;
  "aria-label"?: string;
}

/**
 * RadioGroup — an accessible single-select (role="radiogroup"). One stop in the
 * tab order; ↑/↓/←/→ move and select the next enabled option (wrapping), and
 * Home/End jump to the ends. Works controlled or uncontrolled.
 */
export function RadioGroup({
  options,
  value,
  defaultValue,
  onValueChange,
  className,
  ...aria
}: RadioGroupProps) {
  const groupId = useId();
  const isControlled = value !== undefined;
  const [internal, setInternal] = useState(defaultValue ?? "");
  const selected = isControlled ? value : internal;
  const refs = useRef<(HTMLButtonElement | null)[]>([]);

  const enabledIndexes = options
    .map((o, i) => (o.disabled ? -1 : i))
    .filter((i) => i >= 0);

  const select = (next: string) => {
    if (!isControlled) setInternal(next);
    onValueChange?.(next);
  };

  const moveTo = (index: number) => {
    const opt = options[index];
    if (!opt || opt.disabled) return;
    select(opt.value);
    refs.current[index]?.focus();
  };

  const onKeyDown = (e: KeyboardEvent, index: number) => {
    const pos = enabledIndexes.indexOf(index);
    if (e.key === "ArrowDown" || e.key === "ArrowRight") {
      e.preventDefault();
      moveTo(enabledIndexes[(pos + 1) % enabledIndexes.length]);
    } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
      e.preventDefault();
      moveTo(
        enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length],
      );
    } else if (e.key === "Home") {
      e.preventDefault();
      moveTo(enabledIndexes[0]);
    } else if (e.key === "End") {
      e.preventDefault();
      moveTo(enabledIndexes[enabledIndexes.length - 1]);
    }
  };

  // The roving tabindex lands on the selected option, else the first enabled one.
  const tabStop = options.findIndex((o) => o.value === selected && !o.disabled);
  const fallbackStop = enabledIndexes[0] ?? -1;

  return (
    <div
      role="radiogroup"
      aria-label={aria["aria-label"]}
      className={cn("space-y-2", className)}
    >
      {options.map((option, i) => {
        const isChecked = option.value === selected;
        const isTabStop = i === (tabStop >= 0 ? tabStop : fallbackStop);
        const descId = `${groupId}-${i}-desc`;
        return (
          <button
            key={option.value}
            ref={(el) => {
              refs.current[i] = el;
            }}
            type="button"
            role="radio"
            aria-checked={isChecked}
            aria-label={typeof option.label === "string" ? option.label : undefined}
            aria-describedby={option.description ? descId : undefined}
            disabled={option.disabled}
            tabIndex={isTabStop ? 0 : -1}
            onClick={() => !option.disabled && select(option.value)}
            onKeyDown={(e) => onKeyDown(e, i)}
            className={cn(
              "flex w-full items-start gap-3 rounded-xl border p-3 text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand/50 disabled:cursor-not-allowed disabled:opacity-50",
              isChecked
                ? "border-brand bg-brand/10"
                : "border-border bg-surface hover:border-border-strong",
            )}
          >
            <span
              className={cn(
                "mt-0.5 grid size-5 shrink-0 place-items-center rounded-full border transition-colors",
                isChecked ? "border-brand" : "border-border-strong",
              )}
            >
              <motion.span
                initial={false}
                animate={{ scale: isChecked ? 1 : 0 }}
                transition={{ type: "spring", stiffness: 520, damping: 30 }}
                className="size-2.5 rounded-full bg-brand"
              />
            </span>
            <span className="space-y-0.5">
              <span className="block text-sm font-medium text-foreground">
                {option.label}
              </span>
              {option.description && (
                <span id={descId} className="block text-xs text-muted">
                  {option.description}
                </span>
              )}
            </span>
          </button>
        );
      })}
    </div>
  );
}
```

### Select
Listbox-style picker with type-ahead and full keyboard nav.
URL: https://dev.ononc.com/ui
Path: src/components/ui/select.tsx

```tsx
"use client";

import {
  type KeyboardEvent,
  useEffect,
  useId,
  useRef,
  useState,
} from "react";
import { AnimatePresence, motion } from "motion/react";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
}

export interface SelectProps {
  options: SelectOption[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  "aria-label"?: string;
}

/**
 * Select — an accessible listbox-style picker. Open with Enter/Space/↑/↓,
 * navigate with arrows + Home/End, type to jump to a match, Enter selects and
 * Escape closes. Closes on outside click and restores focus to the trigger.
 * Wired with listbox/option roles and aria-activedescendant.
 */
export function Select({
  options,
  value,
  defaultValue,
  onValueChange,
  placeholder = "Select…",
  disabled = false,
  className,
  ...aria
}: SelectProps) {
  const id = useId();
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const typeahead = useRef({ query: "", at: 0 });

  const isControlled = value !== undefined;
  const [internal, setInternal] = useState(defaultValue ?? "");
  const selected = isControlled ? value : internal;
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);

  const selectedOption = options.find((o) => o.value === selected);
  const enabledIndexes = options
    .map((o, i) => (o.disabled ? -1 : i))
    .filter((i) => i >= 0);

  useEffect(() => {
    if (!open) return;
    const onDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [open]);

  // Keep the active option scrolled into view.
  useEffect(() => {
    if (!open) return;
    listRef.current
      ?.querySelector(`#${CSS.escape(`${id}-opt-${active}`)}`)
      ?.scrollIntoView({ block: "nearest" });
  }, [open, active, id]);

  const openList = () => {
    if (disabled) return;
    const start = options.findIndex((o) => o.value === selected && !o.disabled);
    setActive(start >= 0 ? start : (enabledIndexes[0] ?? 0));
    setOpen(true);
  };

  const close = () => {
    setOpen(false);
    triggerRef.current?.focus();
  };

  const choose = (index: number) => {
    const opt = options[index];
    if (!opt || opt.disabled) return;
    if (!isControlled) setInternal(opt.value);
    onValueChange?.(opt.value);
    setOpen(false);
    triggerRef.current?.focus();
  };

  const step = (dir: 1 | -1) => {
    const pos = enabledIndexes.indexOf(active);
    const nextPos =
      pos < 0
        ? 0
        : (pos + dir + enabledIndexes.length) % enabledIndexes.length;
    setActive(enabledIndexes[nextPos]);
  };

  const onType = (key: string) => {
    const now = Date.now();
    const t = typeahead.current;
    t.query = now - t.at > 600 ? key : t.query + key;
    t.at = now;
    const match = options.findIndex(
      (o) => !o.disabled && o.label.toLowerCase().startsWith(t.query.toLowerCase()),
    );
    if (match >= 0) {
      if (open) setActive(match);
      else choose(match);
    }
  };

  const onKeyDown = (e: KeyboardEvent) => {
    if (!open) {
      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
        e.preventDefault();
        openList();
      } else if (e.key.length === 1) {
        onType(e.key);
      }
      return;
    }
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        step(1);
        break;
      case "ArrowUp":
        e.preventDefault();
        step(-1);
        break;
      case "Home":
        e.preventDefault();
        setActive(enabledIndexes[0] ?? 0);
        break;
      case "End":
        e.preventDefault();
        setActive(enabledIndexes[enabledIndexes.length - 1] ?? 0);
        break;
      case "Enter":
      case " ":
        e.preventDefault();
        choose(active);
        break;
      case "Escape":
        e.preventDefault();
        close();
        break;
      case "Tab":
        setOpen(false);
        break;
      default:
        if (e.key.length === 1) onType(e.key);
    }
  };

  return (
    <div ref={rootRef} className={cn("relative w-64", className)}>
      <button
        ref={triggerRef}
        type="button"
        role="combobox"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-controls={`${id}-list`}
        aria-activedescendant={open ? `${id}-opt-${active}` : undefined}
        aria-label={aria["aria-label"]}
        disabled={disabled}
        onClick={() => (open ? setOpen(false) : openList())}
        onKeyDown={onKeyDown}
        className="flex w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface px-3 py-2 text-sm outline-none transition-colors focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-brand/40 disabled:cursor-not-allowed disabled:opacity-50"
      >
        <span className={cn(!selectedOption && "text-muted")}>
          {selectedOption?.label ?? placeholder}
        </span>
        <ChevronsUpDown className="size-4 shrink-0 text-muted" />
      </button>
      <AnimatePresence>
        {open && (
          <motion.ul
            ref={listRef}
            id={`${id}-list`}
            role="listbox"
            initial={{ opacity: 0, y: -6, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.98 }}
            transition={{ duration: 0.14 }}
            className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border border-border bg-surface p-1 shadow-xl"
          >
            {options.map((option, i) => {
              const isSelected = option.value === selected;
              return (
                <li
                  key={option.value}
                  id={`${id}-opt-${i}`}
                  role="option"
                  aria-selected={isSelected}
                  aria-disabled={option.disabled || undefined}
                  onMouseDown={(e) => {
                    e.preventDefault();
                    choose(i);
                  }}
                  onMouseMove={() => !option.disabled && setActive(i)}
                  className={cn(
                    "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-sm",
                    option.disabled
                      ? "cursor-not-allowed text-muted-2"
                      : "cursor-pointer text-foreground",
                    i === active && !option.disabled && "bg-brand/15",
                  )}
                >
                  {option.label}
                  {isSelected && <Check className="size-4 text-brand-2" />}
                </li>
              );
            })}
          </motion.ul>
        )}
      </AnimatePresence>
    </div>
  );
}
```

### Number Input
Numeric stepper with clamp, step, and keyboard control.
URL: https://dev.ononc.com/ui/number-input
Path: src/components/ui/number-input.tsx

```tsx
"use client";

import { type KeyboardEvent, useState } from "react";
import { Minus, Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NumberInputProps {
  value?: number;
  defaultValue?: number;
  min?: number;
  max?: number;
  step?: number;
  onValueChange?: (value: number) => void;
  disabled?: boolean;
  className?: string;
  "aria-label"?: string;
}

const decimalsOf = (step: number) => (step.toString().split(".")[1]?.length ?? 0);

/**
 * NumberInput — an accessible numeric stepper (role="spinbutton"). The −/+
 * buttons and ↑/↓ adjust by step, PageUp/PageDown by ten steps, Home/End jump
 * to the bounds, and every value is clamped to [min, max]. Controlled or
 * uncontrolled.
 */
export function NumberInput({
  value,
  defaultValue = 0,
  min = -Infinity,
  max = Infinity,
  step = 1,
  onValueChange,
  disabled = false,
  className,
  ...aria
}: NumberInputProps) {
  const isControlled = value !== undefined;
  const [internal, setInternal] = useState(defaultValue);
  const current = isControlled ? value : internal;
  const [draft, setDraft] = useState<string | null>(null);

  const clamp = (n: number) => Math.min(max, Math.max(min, n));
  const round = (n: number) => {
    const d = decimalsOf(step);
    return d > 0 ? Number(n.toFixed(d)) : n;
  };

  const commit = (n: number) => {
    if (Number.isNaN(n)) return;
    const next = round(clamp(n));
    if (!isControlled) setInternal(next);
    onValueChange?.(next);
    return next;
  };

  const nudge = (delta: number) => {
    setDraft(null);
    commit(current + delta);
  };

  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "ArrowUp") {
      e.preventDefault();
      nudge(step);
    } else if (e.key === "ArrowDown") {
      e.preventDefault();
      nudge(-step);
    } else if (e.key === "PageUp") {
      e.preventDefault();
      nudge(step * 10);
    } else if (e.key === "PageDown") {
      e.preventDefault();
      nudge(-step * 10);
    } else if (e.key === "Home" && Number.isFinite(min)) {
      e.preventDefault();
      setDraft(null);
      commit(min);
    } else if (e.key === "End" && Number.isFinite(max)) {
      e.preventDefault();
      setDraft(null);
      commit(max);
    }
  };

  const btn =
    "grid size-9 shrink-0 place-items-center text-muted transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40";

  return (
    <div
      className={cn(
        "inline-flex items-center rounded-lg border border-border bg-surface focus-within:border-brand focus-within:ring-2 focus-within:ring-brand/40",
        disabled && "opacity-50",
        className,
      )}
    >
      <button
        type="button"
        tabIndex={-1}
        aria-hidden
        disabled={disabled || current <= min}
        onClick={() => nudge(-step)}
        className={cn(btn, "rounded-l-lg")}
      >
        <Minus className="size-4" />
      </button>
      <input
        type="text"
        inputMode="decimal"
        role="spinbutton"
        aria-label={aria["aria-label"]}
        aria-valuenow={current}
        aria-valuemin={Number.isFinite(min) ? min : undefined}
        aria-valuemax={Number.isFinite(max) ? max : undefined}
        disabled={disabled}
        value={draft ?? String(current)}
        onChange={(e) => {
          const raw = e.target.value;
          setDraft(raw);
          const parsed = Number(raw);
          if (raw.trim() !== "" && !Number.isNaN(parsed)) commit(parsed);
        }}
        onKeyDown={onKeyDown}
        onBlur={() => {
          if (draft !== null) {
            const parsed = Number(draft);
            commit(Number.isNaN(parsed) ? current : parsed);
          }
          setDraft(null);
        }}
        className="w-14 border-x border-border bg-transparent py-2 text-center text-sm tabular-nums outline-none"
      />
      <button
        type="button"
        tabIndex={-1}
        aria-hidden
        disabled={disabled || current >= max}
        onClick={() => nudge(step)}
        className={cn(btn, "rounded-r-lg")}
      >
        <Plus className="size-4" />
      </button>
    </div>
  );
}
```

### Textarea
Auto-resizing multiline field with an optional counter.
URL: https://dev.ononc.com/ui
Path: src/components/ui/textarea.tsx

```tsx
"use client";

import {
  type ChangeEvent,
  type TextareaHTMLAttributes,
  useCallback,
  useEffect,
  useId,
  useRef,
  useState,
} from "react";
import { cn } from "@/lib/utils";

export interface TextareaProps
  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "rows"> {
  /** Minimum visible rows before content grows the field. */
  minRows?: number;
  /** Maximum rows the field grows to before it scrolls. */
  maxRows?: number;
  /** Show a live character counter (requires maxLength). */
  showCount?: boolean;
}

/**
 * Textarea — an auto-resizing multiline field. It grows with its content from
 * minRows up to maxRows, then scrolls. With maxLength + showCount it renders a
 * polite live character counter. Height is driven by direct DOM measurement, so
 * it works controlled or uncontrolled.
 */
export function Textarea({
  minRows = 3,
  maxRows = 10,
  showCount = false,
  className,
  value,
  defaultValue,
  maxLength,
  onChange,
  ...props
}: TextareaProps) {
  const id = useId();
  const ref = useRef<HTMLTextAreaElement>(null);
  const [internalCount, setInternalCount] = useState(
    String(defaultValue ?? "").length,
  );
  const count = value !== undefined ? String(value).length : internalCount;

  const resize = useCallback(() => {
    const el = ref.current;
    if (!el) return;
    const style = window.getComputedStyle(el);
    const lineHeight = parseFloat(style.lineHeight) || 20;
    const paddingY =
      parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
    const borderY =
      parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
    const maxHeight = lineHeight * maxRows + paddingY + borderY;
    el.style.height = "auto";
    const next = Math.min(el.scrollHeight + borderY, maxHeight);
    el.style.height = `${next}px`;
    el.style.overflowY = el.scrollHeight + borderY > maxHeight ? "auto" : "hidden";
  }, [maxRows]);

  // Resize on mount and whenever a controlled value changes.
  useEffect(() => {
    resize();
  }, [resize, value]);

  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
    setInternalCount(e.target.value.length);
    resize();
    onChange?.(e);
  };

  return (
    <div className="w-full">
      <textarea
        ref={ref}
        rows={minRows}
        value={value}
        defaultValue={defaultValue}
        maxLength={maxLength}
        onChange={handleChange}
        aria-describedby={showCount && maxLength ? `${id}-count` : undefined}
        className={cn(
          "block w-full resize-none rounded-xl border border-border bg-surface px-3 py-2 text-sm leading-5 text-foreground outline-none transition-colors placeholder:text-muted-2 focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-brand/40",
          className,
        )}
        {...props}
      />
      {showCount && maxLength && (
        <div
          id={`${id}-count`}
          aria-live="polite"
          className="mt-1 text-right text-xs tabular-nums text-muted"
        >
          {count}/{maxLength}
        </div>
      )}
    </div>
  );
}
```

### Badge
Compact status label in solid, soft, and outline variants.
URL: https://dev.ononc.com/ui/badge
Path: src/components/ui/badge.tsx

```tsx
import { type ReactNode } from "react";
import { cn } from "@/lib/utils";

export type BadgeVariant = "solid" | "soft" | "outline";
export type BadgeTone = "brand" | "neutral" | "success" | "warning" | "danger";

export interface BadgeProps {
  children: ReactNode;
  variant?: BadgeVariant;
  tone?: BadgeTone;
  /** Show a small leading status dot tinted to the tone. */
  dot?: boolean;
  className?: string;
}

const TONES: Record<BadgeTone, Record<BadgeVariant, string>> = {
  brand: {
    solid: "bg-brand text-white",
    soft: "bg-brand/15 text-brand-ink",
    outline: "border border-brand/45 text-brand-ink",
  },
  neutral: {
    solid: "bg-foreground text-background",
    soft: "bg-surface-2 text-foreground",
    outline: "border border-border-strong text-foreground",
  },
  success: {
    solid: "bg-emerald-500 text-white",
    soft: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-300",
    outline: "border border-emerald-500/45 text-emerald-600 dark:text-emerald-300",
  },
  warning: {
    solid: "bg-amber-500 text-white",
    soft: "bg-amber-500/15 text-amber-600 dark:text-amber-300",
    outline: "border border-amber-500/45 text-amber-600 dark:text-amber-300",
  },
  danger: {
    solid: "bg-rose-500 text-white",
    soft: "bg-rose-500/15 text-rose-600 dark:text-rose-300",
    outline: "border border-rose-500/45 text-rose-600 dark:text-rose-300",
  },
};

/**
 * Badge — a compact status label. Mix a `variant` (solid / soft / outline) with
 * a semantic `tone`, and optionally show a leading dot. Purely presentational
 * and theme-aware via design tokens.
 */
export function Badge({
  children,
  variant = "soft",
  tone = "brand",
  dot = false,
  className,
}: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-0.5 text-xs font-medium",
        TONES[tone][variant],
        className,
      )}
    >
      {dot && (
        <span
          aria-hidden
          className={cn(
            "size-1.5 rounded-full",
            variant === "solid" ? "bg-current opacity-80" : "bg-current",
          )}
        />
      )}
      {children}
    </span>
  );
}
```

### Alert
Semantic callouts for info, success, warning, and errors.
URL: https://dev.ononc.com/ui/alert
Path: src/components/ui/alert.tsx

```tsx
"use client";

import { type ReactNode, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import {
  CircleAlert,
  CircleCheck,
  Info,
  TriangleAlert,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";

export type AlertVariant = "info" | "success" | "warning" | "danger";

export interface AlertProps {
  variant?: AlertVariant;
  title?: ReactNode;
  children?: ReactNode;
  /** Render a close button; the alert animates out and calls onDismiss. */
  dismissible?: boolean;
  onDismiss?: () => void;
  className?: string;
}

const VARIANTS: Record<
  AlertVariant,
  { icon: typeof Info; ring: string; tint: string; accent: string }
> = {
  info: {
    icon: Info,
    ring: "border-brand/30",
    tint: "bg-brand/10",
    accent: "text-brand-ink",
  },
  success: {
    icon: CircleCheck,
    ring: "border-emerald-500/30",
    tint: "bg-emerald-500/10",
    accent: "text-emerald-600 dark:text-emerald-300",
  },
  warning: {
    icon: TriangleAlert,
    ring: "border-amber-500/30",
    tint: "bg-amber-500/10",
    accent: "text-amber-600 dark:text-amber-300",
  },
  danger: {
    icon: CircleAlert,
    ring: "border-rose-500/30",
    tint: "bg-rose-500/10",
    accent: "text-rose-600 dark:text-rose-300",
  },
};

/**
 * Alert — a semantic callout (info / success / warning / danger) with a tinted
 * surface and matching icon. Errors announce assertively (role="alert"); the
 * rest are polite status messages. Optionally dismissible with an exit
 * animation.
 */
export function Alert({
  variant = "info",
  title,
  children,
  dismissible = false,
  onDismiss,
  className,
}: AlertProps) {
  const [open, setOpen] = useState(true);
  const config = VARIANTS[variant];
  const Icon = config.icon;

  const dismiss = () => {
    setOpen(false);
    onDismiss?.();
  };

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          role={variant === "danger" ? "alert" : "status"}
          initial={false}
          exit={{ opacity: 0, scale: 0.98, height: 0, marginBottom: 0 }}
          transition={{ duration: 0.18 }}
          className={cn(
            "flex gap-3 overflow-hidden rounded-xl border p-4 text-sm",
            config.ring,
            config.tint,
            className,
          )}
        >
          <Icon className={cn("mt-0.5 size-5 shrink-0", config.accent)} />
          <div className="min-w-0 flex-1">
            {title && (
              <p className="font-semibold text-foreground">{title}</p>
            )}
            {children && (
              <div className={cn("text-muted", title && "mt-0.5")}>
                {children}
              </div>
            )}
          </div>
          {dismissible && (
            <button
              type="button"
              onClick={dismiss}
              aria-label="Dismiss"
              className="-mr-1 -mt-1 grid size-7 shrink-0 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              <X className="size-4" />
            </button>
          )}
        </motion.div>
      )}
    </AnimatePresence>
  );
}
```

### Spinner
Accessible loading indicator in three sizes.
URL: https://dev.ononc.com/ui/spinner
Path: src/components/ui/spinner.tsx

```tsx
import { cn } from "@/lib/utils";

export type SpinnerSize = "sm" | "md" | "lg";

export interface SpinnerProps {
  size?: SpinnerSize;
  /** Optional visible text shown beside the spinner. */
  label?: string;
  className?: string;
}

const SIZES: Record<SpinnerSize, string> = {
  sm: "size-4 border-2",
  md: "size-6 border-2",
  lg: "size-9 border-[3px]",
};

/**
 * Spinner — an accessible loading indicator (role="status"). The ring spins via
 * CSS (and freezes gracefully under prefers-reduced-motion). Without a visible
 * label it still announces "Loading…" to screen readers.
 */
export function Spinner({ size = "md", label, className }: SpinnerProps) {
  return (
    <span
      role="status"
      className={cn("inline-flex items-center gap-2.5 text-sm text-muted", className)}
    >
      <span
        aria-hidden
        className={cn(
          "animate-spin rounded-full border-border-strong border-t-brand",
          SIZES[size],
        )}
      />
      {label ? <span>{label}</span> : <span className="sr-only">Loading…</span>}
    </span>
  );
}
```

### Hover Card
Rich preview revealed on hover or keyboard focus, with delay.
URL: https://dev.ononc.com/ui
Path: src/components/ui/hover-card.tsx

```tsx
"use client";

import {
  type ReactElement,
  type ReactNode,
  cloneElement,
  isValidElement,
  useEffect,
  useId,
  useRef,
  useState,
} from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface HoverCardProps {
  /** The element users hover or focus to reveal the card. */
  trigger: ReactNode;
  children: ReactNode;
  openDelay?: number;
  closeDelay?: number;
  className?: string;
  panelClassName?: string;
}

/**
 * HoverCard — reveals a rich preview panel when the trigger is hovered or
 * keyboard-focused, with small open/close delays so it doesn't flicker between
 * the trigger and the card. Escape dismisses it. A supplementary, sighted-user
 * enhancement (the panel is exposed as a tooltip region).
 */
export function HoverCard({
  trigger,
  children,
  openDelay = 150,
  closeDelay = 120,
  className,
  panelClassName,
}: HoverCardProps) {
  const id = useId();
  const [open, setOpen] = useState(false);
  const timers = useRef<{ open?: ReturnType<typeof setTimeout>; close?: ReturnType<typeof setTimeout> }>({});

  const clearTimers = () => {
    if (timers.current.open) clearTimeout(timers.current.open);
    if (timers.current.close) clearTimeout(timers.current.close);
  };
  const show = (delay = openDelay) => {
    clearTimers();
    timers.current.open = setTimeout(() => setOpen(true), delay);
  };
  const hide = () => {
    clearTimers();
    timers.current.close = setTimeout(() => setOpen(false), closeDelay);
  };

  useEffect(() => clearTimers, []);

  // Associate the panel with the trigger for screen readers while it is open.
  const triggerNode = isValidElement(trigger)
    ? cloneElement(trigger as ReactElement<{ "aria-describedby"?: string }>, {
        "aria-describedby": open ? id : undefined,
      })
    : trigger;

  return (
    <span
      className={cn("relative inline-flex", className)}
      onMouseEnter={() => show()}
      onMouseLeave={hide}
      onFocus={() => show(0)}
      onBlur={hide}
      onKeyDown={(e) => {
        if (e.key === "Escape" && open) {
          clearTimers();
          setOpen(false);
        }
      }}
    >
      {triggerNode}
      <AnimatePresence>
        {open && (
          <motion.div
            id={id}
            role="tooltip"
            initial={{ opacity: 0, y: 6, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 6, scale: 0.97 }}
            transition={{ duration: 0.16 }}
            onMouseEnter={() => show(0)}
            onMouseLeave={hide}
            className={cn(
              "absolute left-1/2 top-full z-50 mt-2 w-64 -translate-x-1/2 rounded-xl border border-border bg-surface p-4 text-sm text-muted shadow-xl",
              panelClassName,
            )}
          >
            {children}
          </motion.div>
        )}
      </AnimatePresence>
    </span>
  );
}
```

### Context Menu
Right-click menu at the pointer with keyboard navigation.
URL: https://dev.ononc.com/ui
Path: src/components/ui/context-menu.tsx

```tsx
"use client";

import {
  type KeyboardEvent as ReactKeyboardEvent,
  type MouseEvent as ReactMouseEvent,
  type ReactNode,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import { createPortal } from "react-dom";
import { AnimatePresence, motion } from "motion/react";
import { useHydrated } from "@/lib/use-hydrated";
import { cn } from "@/lib/utils";

export interface ContextMenuItem {
  label?: string;
  icon?: ReactNode;
  shortcut?: string;
  onSelect?: () => void;
  danger?: boolean;
  disabled?: boolean;
  /** Render a divider instead of an actionable item. */
  separator?: boolean;
}

export interface ContextMenuProps {
  items: ContextMenuItem[];
  children: ReactNode;
  className?: string;
}

// useLayoutEffect on the client, useEffect on the server (avoids SSR warning).
const useIsoLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

/**
 * ContextMenu — a right-click menu, portaled to the body and positioned at the
 * pointer (clamped to the viewport). Opens focused on the first item; ↑/↓ and
 * Home/End move, Enter/click selects, Escape closes. Also closes on outside
 * click, scroll, or resize.
 */
export function ContextMenu({ items, children, className }: ContextMenuProps) {
  const mounted = useHydrated();
  const menuRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const lastFocused = useRef<HTMLElement | null>(null);
  const [open, setOpen] = useState(false);
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const [active, setActive] = useState(-1);

  const focusable = items
    .map((item, i) => (item.separator || item.disabled ? -1 : i))
    .filter((i) => i >= 0);

  const onContextMenu = (e: ReactMouseEvent) => {
    e.preventDefault();
    lastFocused.current = document.activeElement as HTMLElement | null;
    setPos({ x: e.clientX, y: e.clientY });
    setActive(focusable[0] ?? -1);
    setOpen(true);
  };

  useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    const onDown = (e: PointerEvent) => {
      if (!menuRef.current?.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setOpen(false);
        lastFocused.current?.focus?.();
      }
    };
    document.addEventListener("pointerdown", onDown);
    document.addEventListener("keydown", onKey);
    window.addEventListener("scroll", close, true);
    window.addEventListener("resize", close);
    return () => {
      document.removeEventListener("pointerdown", onDown);
      document.removeEventListener("keydown", onKey);
      window.removeEventListener("scroll", close, true);
      window.removeEventListener("resize", close);
    };
  }, [open]);

  // Move DOM focus to the active item.
  useEffect(() => {
    if (open && active >= 0) itemRefs.current[active]?.focus();
  }, [open, active]);

  // Position + clamp via direct style writes (left/top are not React-managed, so
  // they survive re-renders without needing extra state).
  useIsoLayoutEffect(() => {
    if (!open) return;
    const el = menuRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const pad = 8;
    const x =
      pos.x + rect.width > window.innerWidth - pad
        ? Math.max(pad, window.innerWidth - rect.width - pad)
        : pos.x;
    const y =
      pos.y + rect.height > window.innerHeight - pad
        ? Math.max(pad, window.innerHeight - rect.height - pad)
        : pos.y;
    el.style.left = `${x}px`;
    el.style.top = `${y}px`;
  }, [open, pos]);

  const move = (dir: 1 | -1) => {
    if (focusable.length === 0) return;
    const cur = focusable.indexOf(active);
    const next = cur < 0 ? 0 : (cur + dir + focusable.length) % focusable.length;
    setActive(focusable[next]);
  };

  const onMenuKey = (e: ReactKeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      move(1);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      move(-1);
    } else if (e.key === "Home") {
      e.preventDefault();
      setActive(focusable[0] ?? -1);
    } else if (e.key === "End") {
      e.preventDefault();
      setActive(focusable[focusable.length - 1] ?? -1);
    }
  };

  const select = (item: ContextMenuItem) => {
    if (item.disabled || item.separator) return;
    item.onSelect?.();
    setOpen(false);
    lastFocused.current?.focus?.();
  };

  return (
    <>
      <div onContextMenu={onContextMenu} className={className}>
        {children}
      </div>
      {mounted &&
        createPortal(
          <AnimatePresence>
            {open && (
              <motion.div
                ref={menuRef}
                role="menu"
                aria-label="Context menu"
                initial={{ opacity: 0, scale: 0.96 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.96 }}
                transition={{ duration: 0.12 }}
                onKeyDown={onMenuKey}
                style={{ transformOrigin: "top left" }}
                className="fixed left-0 top-0 z-[120] min-w-52 rounded-xl border border-border bg-surface p-1.5 shadow-2xl"
              >
                {items.map((item, i) =>
                  item.separator ? (
                    <div
                      key={`sep-${i}`}
                      role="separator"
                      className="my-1 h-px bg-border"
                    />
                  ) : (
                    <button
                      key={item.label ?? i}
                      ref={(el) => {
                        itemRefs.current[i] = el;
                      }}
                      role="menuitem"
                      type="button"
                      tabIndex={i === active ? 0 : -1}
                      disabled={item.disabled}
                      onClick={() => select(item)}
                      onMouseMove={() => !item.disabled && setActive(i)}
                      className={cn(
                        "flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-left text-sm outline-none disabled:cursor-not-allowed disabled:opacity-40",
                        i === active && "bg-brand/15",
                        item.danger ? "text-brand-3" : "text-foreground",
                      )}
                    >
                      {item.icon && (
                        <span className="grid size-4 shrink-0 place-items-center">
                          {item.icon}
                        </span>
                      )}
                      <span className="flex-1">{item.label}</span>
                      {item.shortcut && (
                        <span className="text-xs tracking-wide text-muted-2">
                          {item.shortcut}
                        </span>
                      )}
                    </button>
                  ),
                )}
              </motion.div>
            )}
          </AnimatePresence>,
          document.body,
        )}
    </>
  );
}
```

### Date Picker
Calendar popover with WAI-ARIA grid keyboard navigation.
URL: https://dev.ononc.com/ui
Path: src/components/ui/date-picker.tsx

```tsx
"use client";

import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DatePickerProps {
  value?: Date;
  defaultValue?: Date;
  onChange?: (date: Date) => void;
  placeholder?: string;
  className?: string;
  "aria-label"?: string;
}

const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
const WEEKDAYS_FULL = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
const longFmt = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
});
const triggerFmt = new Intl.DateTimeFormat("en-US", {
  year: "numeric",
  month: "short",
  day: "numeric",
});
const monthFmt = new Intl.DateTimeFormat("en-US", {
  month: "long",
  year: "numeric",
});

const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
const addDays = (d: Date, n: number) =>
  new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
const addMonths = (d: Date, n: number) => {
  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
  target.setDate(Math.min(d.getDate(), last));
  return target;
};
const clampToMonth = (day: number, view: Date) => {
  const last = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
  return new Date(view.getFullYear(), view.getMonth(), Math.min(day, last));
};
const sameDay = (a: Date, b: Date) =>
  a.getFullYear() === b.getFullYear() &&
  a.getMonth() === b.getMonth() &&
  a.getDate() === b.getDate();
const key = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
const monthGrid = (view: Date) => {
  const first = startOfMonth(view);
  const start = addDays(first, -first.getDay());
  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
};

/**
 * DatePicker — a calendar in a popover. The grid follows the WAI-ARIA pattern
 * (grid → row → gridcell): ←/→ move by a day, ↑/↓ by a week, Home/End to the
 * week edges, PageUp/PageDown by a month, Enter/Space selects, Escape closes.
 * Only the focused day is in the tab order. Closes on outside click and restores
 * focus to the trigger.
 */
export function DatePicker({
  value,
  defaultValue,
  onChange,
  placeholder = "Pick a date",
  className,
  ...aria
}: DatePickerProps) {
  const id = useId();
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const dayRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
  const shouldFocus = useRef(false);

  const isControlled = value !== undefined;
  const [internal, setInternal] = useState<Date | undefined>(defaultValue);
  const selected = isControlled ? value : internal;

  const [open, setOpen] = useState(false);
  const [view, setView] = useState(() => startOfMonth(selected ?? new Date()));
  const [focused, setFocused] = useState(() => selected ?? new Date());

  const today = new Date();

  useEffect(() => {
    if (!open) return;
    const onDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [open]);

  // Move focus to the focused day only on open and keyboard navigation — never
  // on mouse paging (which keeps focus on the Prev/Next button).
  useEffect(() => {
    if (open && shouldFocus.current) {
      dayRefs.current.get(key(focused))?.focus();
      shouldFocus.current = false;
    }
  }, [open, focused, view]);

  const openCalendar = () => {
    const base = selected ?? new Date();
    setView(startOfMonth(base));
    setFocused(base);
    shouldFocus.current = true;
    setOpen(true);
  };

  const close = () => {
    setOpen(false);
    triggerRef.current?.focus();
  };

  const moveFocus = (next: Date) => {
    shouldFocus.current = true;
    setFocused(next);
    if (
      next.getMonth() !== view.getMonth() ||
      next.getFullYear() !== view.getFullYear()
    ) {
      setView(startOfMonth(next));
    }
  };

  // Paging keeps a focusable day in the visible month (preserving the tab stop)
  // without moving focus off the clicked button.
  const pageMonth = (delta: number) => {
    const v = addMonths(view, delta);
    setView(v);
    setFocused(clampToMonth(focused.getDate(), v));
  };

  const choose = (date: Date) => {
    if (!isControlled) setInternal(date);
    onChange?.(date);
    setOpen(false);
    triggerRef.current?.focus();
  };

  const onGridKeyDown = (e: KeyboardEvent) => {
    switch (e.key) {
      case "ArrowLeft":
        e.preventDefault();
        moveFocus(addDays(focused, -1));
        break;
      case "ArrowRight":
        e.preventDefault();
        moveFocus(addDays(focused, 1));
        break;
      case "ArrowUp":
        e.preventDefault();
        moveFocus(addDays(focused, -7));
        break;
      case "ArrowDown":
        e.preventDefault();
        moveFocus(addDays(focused, 7));
        break;
      case "Home":
        e.preventDefault();
        moveFocus(addDays(focused, -focused.getDay()));
        break;
      case "End":
        e.preventDefault();
        moveFocus(addDays(focused, 6 - focused.getDay()));
        break;
      case "PageUp":
        e.preventDefault();
        moveFocus(addMonths(focused, -1));
        break;
      case "PageDown":
        e.preventDefault();
        moveFocus(addMonths(focused, 1));
        break;
      case "Enter":
      case " ":
        e.preventDefault();
        choose(focused);
        break;
      case "Escape":
        e.preventDefault();
        close();
        break;
    }
  };

  const days = monthGrid(view);
  const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7));
  const labelId = `${id}-month`;

  return (
    <div ref={rootRef} className={cn("relative w-64", className)}>
      <button
        ref={triggerRef}
        type="button"
        aria-haspopup="dialog"
        aria-expanded={open}
        aria-label={aria["aria-label"]}
        onClick={() => (open ? setOpen(false) : openCalendar())}
        className="flex w-full items-center gap-2 rounded-lg border border-border bg-surface px-3 py-2 text-sm outline-none transition-colors focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-brand/40"
      >
        <Calendar className="size-4 shrink-0 text-muted" />
        <span className={cn(!selected && "text-muted")}>
          {selected ? triggerFmt.format(selected) : placeholder}
        </span>
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            role="dialog"
            aria-label="Choose date"
            initial={{ opacity: 0, y: -6, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.98 }}
            transition={{ duration: 0.15 }}
            onKeyDown={(e) => {
              if (e.key === "Tab") {
                e.preventDefault();
                close();
              }
            }}
            className="absolute z-50 mt-2 w-72 rounded-xl border border-border bg-surface p-3 shadow-xl"
          >
            <div className="mb-2 flex items-center justify-between">
              <button
                type="button"
                aria-label="Previous month"
                onClick={() => pageMonth(-1)}
                className="grid size-8 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
              >
                <ChevronLeft className="size-4" />
              </button>
              <span id={labelId} aria-live="polite" className="text-sm font-semibold">
                {monthFmt.format(view)}
              </span>
              <button
                type="button"
                aria-label="Next month"
                onClick={() => pageMonth(1)}
                className="grid size-8 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
              >
                <ChevronRight className="size-4" />
              </button>
            </div>
            <div role="grid" aria-labelledby={labelId} onKeyDown={onGridKeyDown}>
              <div role="row" className="mb-1 grid grid-cols-7">
                {WEEKDAYS.map((w, i) => (
                  <span
                    key={w}
                    role="columnheader"
                    aria-label={WEEKDAYS_FULL[i]}
                    className="grid h-8 place-items-center text-xs font-medium text-muted-2"
                  >
                    {w}
                  </span>
                ))}
              </div>
              <div role="rowgroup" className="space-y-0.5">
                {weeks.map((week, wi) => (
                  <div role="row" key={wi} className="grid grid-cols-7 gap-0.5">
                    {week.map((day) => {
                      const inMonth = day.getMonth() === view.getMonth();
                      const isSelected = selected ? sameDay(day, selected) : false;
                      const isToday = sameDay(day, today);
                      const isFocusable = sameDay(day, focused);
                      return (
                        <div role="gridcell" aria-selected={isSelected} key={key(day)}>
                          <button
                            ref={(el) => {
                              if (el) dayRefs.current.set(key(day), el);
                              else dayRefs.current.delete(key(day));
                            }}
                            type="button"
                            tabIndex={isFocusable ? 0 : -1}
                            aria-current={isToday ? "date" : undefined}
                            aria-label={longFmt.format(day)}
                            onClick={() => choose(day)}
                            className={cn(
                              "grid size-9 w-full place-items-center rounded-lg text-sm tabular-nums outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand/50",
                              !inMonth && "text-muted-2",
                              inMonth && !isSelected && "text-foreground hover:bg-background",
                              isSelected && "bg-brand font-semibold text-white",
                              !isSelected && isToday && "ring-1 ring-inset ring-border-strong",
                            )}
                          >
                            {day.getDate()}
                          </button>
                        </div>
                      );
                    })}
                  </div>
                ))}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
```

### Stat Card
KPI tile with a trend delta and an animated sparkline.
URL: https://dev.ononc.com/ui/stat-card
Path: src/components/ui/stat-card.tsx

```tsx
"use client";

import { type ReactNode, useId, useRef } from "react";
import { motion, useInView } from "motion/react";
import { TrendingDown, TrendingUp } from "lucide-react";
import { cn } from "@/lib/utils";

export interface StatCardProps {
  label: string;
  value: ReactNode;
  /** Period-over-period change in %. Its sign drives the arrow and color. */
  delta?: number;
  /** Small muted qualifier, e.g. "vs last week". */
  hint?: string;
  icon?: ReactNode;
  /** Optional sparkline series; drawn and animated the first time in view. */
  data?: number[];
  className?: string;
}

function sparkPath(data: number[], w: number, h: number) {
  const min = Math.min(...data);
  const max = Math.max(...data);
  const span = max - min || 1;
  return data
    .map((d, i) => {
      const x = (i / (data.length - 1)) * w;
      const y = h - ((d - min) / span) * h;
      return `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`;
    })
    .join(" ");
}

/**
 * StatCard — a KPI tile: a label, a prominent value, an optional trend delta
 * (green up / red down) and a gradient sparkline that draws itself the first
 * time the card scrolls into view.
 */
export function StatCard({
  label,
  value,
  delta,
  hint,
  icon,
  data,
  className,
}: StatCardProps) {
  const id = useId();
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.5 });
  const up = (delta ?? 0) >= 0;
  const path = data && data.length > 1 ? sparkPath(data, 100, 32) : "";

  return (
    <div
      ref={ref}
      className={cn(
        "w-60 rounded-2xl border border-border bg-surface p-5",
        className,
      )}
    >
      <div className="flex items-center justify-between">
        <span className="text-sm text-muted">{label}</span>
        {icon && <span className="text-muted-2">{icon}</span>}
      </div>
      <div className="mt-2 flex items-end justify-between gap-3">
        <div className="min-w-0">
          <div className="text-2xl font-semibold tabular-nums text-foreground">
            {value}
          </div>
          {(delta !== undefined || hint) && (
            <div className="mt-1 flex items-center gap-1.5 text-xs">
              {delta !== undefined && (
                <span
                  className={cn(
                    "inline-flex items-center gap-1 font-medium",
                    up
                      ? "text-emerald-600 dark:text-emerald-300"
                      : "text-rose-600 dark:text-rose-300",
                  )}
                >
                  {up ? (
                    <TrendingUp className="size-3.5" />
                  ) : (
                    <TrendingDown className="size-3.5" />
                  )}
                  {up ? "+" : ""}
                  {delta}%
                </span>
              )}
              {hint && <span className="truncate text-muted">{hint}</span>}
            </div>
          )}
        </div>
        {path && (
          <svg
            viewBox="0 0 100 32"
            preserveAspectRatio="none"
            aria-hidden
            className="h-9 w-24 shrink-0"
          >
            <defs>
              <linearGradient id={`${id}-spark`} x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="var(--brand)" />
                <stop offset="100%" stopColor="var(--brand-2)" />
              </linearGradient>
            </defs>
            <motion.path
              d={path}
              fill="none"
              stroke={`url(#${id}-spark)`}
              strokeWidth={2}
              strokeLinecap="round"
              strokeLinejoin="round"
              initial={{ pathLength: 0, opacity: 0 }}
              animate={inView ? { pathLength: 1, opacity: 1 } : undefined}
              transition={{ duration: 1, ease: "easeOut" }}
              vectorEffect="non-scaling-stroke"
            />
          </svg>
        )}
      </div>
    </div>
  );
}
```

### Resizable
Split panels with a draggable, keyboard-resizable divider.
URL: https://dev.ononc.com/ui
Path: src/components/ui/resizable.tsx

```tsx
"use client";

import {
  type KeyboardEvent,
  type PointerEvent,
  type ReactNode,
  useId,
  useRef,
  useState,
} from "react";
import { GripVertical } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ResizableProps {
  first: ReactNode;
  second: ReactNode;
  direction?: "horizontal" | "vertical";
  /** Initial size of the first pane, as a percentage. */
  defaultSize?: number;
  min?: number;
  max?: number;
  step?: number;
  className?: string;
  "aria-label"?: string;
}

/**
 * Resizable — two panes split by a draggable divider. The separator is a proper
 * WAI-ARIA window splitter: drag it, or focus it and use the arrow keys (Home/End
 * jump to the bounds). Sizes are clamped to [min, max]; aria-controls points at
 * the primary pane.
 */
export function Resizable({
  first,
  second,
  direction = "horizontal",
  defaultSize = 50,
  min = 15,
  max = 85,
  step = 2,
  className,
  ...aria
}: ResizableProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);
  const [size, setSize] = useState(defaultSize);
  const paneId = useId();
  const isH = direction === "horizontal";

  const clamp = (n: number) => Math.min(max, Math.max(min, n));

  const fromPointer = (clientX: number, clientY: number) => {
    const rect = containerRef.current?.getBoundingClientRect();
    if (!rect) return;
    const pct = isH
      ? ((clientX - rect.left) / rect.width) * 100
      : ((clientY - rect.top) / rect.height) * 100;
    setSize(clamp(pct));
  };

  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    dragging.current = true;
    e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    if (dragging.current) fromPointer(e.clientX, e.clientY);
  };
  const onPointerUp = (e: PointerEvent<HTMLDivElement>) => {
    dragging.current = false;
    e.currentTarget.releasePointerCapture(e.pointerId);
  };

  const onKeyDown = (e: KeyboardEvent) => {
    const dec = isH ? "ArrowLeft" : "ArrowUp";
    const inc = isH ? "ArrowRight" : "ArrowDown";
    if (e.key === dec) {
      e.preventDefault();
      setSize((s) => clamp(s - step));
    } else if (e.key === inc) {
      e.preventDefault();
      setSize((s) => clamp(s + step));
    } else if (e.key === "Home") {
      e.preventDefault();
      setSize(min);
    } else if (e.key === "End") {
      e.preventDefault();
      setSize(max);
    }
  };

  return (
    <div
      ref={containerRef}
      className={cn(
        "flex overflow-hidden rounded-xl border border-border bg-surface",
        isH ? "flex-row" : "flex-col",
        className,
      )}
      style={{ touchAction: "none" }}
    >
      <div
        id={paneId}
        style={{ flexBasis: `${size}%` }}
        className="min-h-0 min-w-0 shrink-0 grow-0 overflow-auto"
      >
        {first}
      </div>
      <div
        role="separator"
        aria-controls={paneId}
        aria-orientation={isH ? "vertical" : "horizontal"}
        aria-valuenow={Math.round(size)}
        aria-valuemin={min}
        aria-valuemax={max}
        aria-label={aria["aria-label"] ?? "Resize panels"}
        tabIndex={0}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onKeyDown={onKeyDown}
        className={cn(
          "group relative flex shrink-0 items-center justify-center bg-border outline-none transition-colors focus-visible:bg-brand/40",
          isH ? "w-1.5 cursor-col-resize" : "h-1.5 cursor-row-resize",
        )}
      >
        <span
          className={cn(
            "grid place-items-center rounded bg-surface text-muted shadow ring-1 ring-border transition-colors group-hover:text-foreground",
            isH ? "h-7 w-3.5" : "h-3.5 w-7",
          )}
        >
          <GripVertical className={cn("size-3", !isH && "rotate-90")} />
        </span>
      </div>
      <div className="min-h-0 min-w-0 flex-1 overflow-auto">{second}</div>
    </div>
  );
}
```

### Tree View
Expandable hierarchy with roving focus and arrow-key nav.
URL: https://dev.ononc.com/ui
Path: src/components/ui/tree-view.tsx

```tsx
"use client";

import {
  type KeyboardEvent,
  type ReactNode,
  useMemo,
  useRef,
  useState,
} from "react";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TreeNode {
  id: string;
  label: ReactNode;
  children?: TreeNode[];
}

export interface TreeViewProps {
  data: TreeNode[];
  defaultExpanded?: string[];
  onSelect?: (id: string) => void;
  className?: string;
  "aria-label"?: string;
}

interface FlatItem {
  node: TreeNode;
  level: number;
  hasChildren: boolean;
  parentId: string | null;
}

function flatten(
  nodes: TreeNode[],
  expanded: Set<string>,
  level = 1,
  parentId: string | null = null,
  out: FlatItem[] = [],
) {
  for (const node of nodes) {
    const hasChildren = !!node.children?.length;
    out.push({ node, level, hasChildren, parentId });
    if (hasChildren && expanded.has(node.id)) {
      flatten(node.children!, expanded, level + 1, node.id, out);
    }
  }
  return out;
}

/**
 * TreeView — an accessible disclosure tree (role="tree" with nested groups).
 * Only the focused item is tabbable; ↑/↓ move through the visible rows,
 * → expands (then steps in), ← collapses (then steps out to the parent),
 * Home/End jump to the ends, and Enter/Space selects.
 */
export function TreeView({
  data,
  defaultExpanded = [],
  onSelect,
  className,
  ...aria
}: TreeViewProps) {
  const [expanded, setExpanded] = useState<Set<string>>(
    () => new Set(defaultExpanded),
  );
  const [selected, setSelected] = useState<string | null>(null);
  const [focusedId, setFocusedId] = useState<string | null>(
    () => data[0]?.id ?? null,
  );
  const refs = useRef<Map<string, HTMLLIElement>>(new Map());

  const visible = useMemo(() => flatten(data, expanded), [data, expanded]);
  const tabId = visible.some((v) => v.node.id === focusedId)
    ? focusedId
    : (visible[0]?.node.id ?? null);

  const focusId = (id: string) => {
    setFocusedId(id);
    refs.current.get(id)?.focus();
  };

  const toggle = (id: string) =>
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  const activate = (item: FlatItem) => {
    setSelected(item.node.id);
    setFocusedId(item.node.id);
    onSelect?.(item.node.id);
    if (item.hasChildren) toggle(item.node.id);
  };

  const onKeyDown = (e: KeyboardEvent<HTMLLIElement>, item: FlatItem) => {
    if (e.target !== e.currentTarget) return; // ignore keys bubbled from nested items
    const idx = visible.findIndex((v) => v.node.id === item.node.id);
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        if (idx < visible.length - 1) focusId(visible[idx + 1].node.id);
        break;
      case "ArrowUp":
        e.preventDefault();
        if (idx > 0) focusId(visible[idx - 1].node.id);
        break;
      case "ArrowRight":
        e.preventDefault();
        if (item.hasChildren) {
          if (!expanded.has(item.node.id)) toggle(item.node.id);
          else if (idx < visible.length - 1) focusId(visible[idx + 1].node.id);
        }
        break;
      case "ArrowLeft":
        e.preventDefault();
        if (item.hasChildren && expanded.has(item.node.id)) toggle(item.node.id);
        else if (item.parentId) focusId(item.parentId);
        break;
      case "Home":
        e.preventDefault();
        if (visible[0]) focusId(visible[0].node.id);
        break;
      case "End":
        e.preventDefault();
        if (visible.length) focusId(visible[visible.length - 1].node.id);
        break;
      case "Enter":
      case " ":
        e.preventDefault();
        activate(item);
        break;
    }
  };

  const renderNodes = (
    nodes: TreeNode[],
    level: number,
    parentId: string | null,
    root: boolean,
  ): ReactNode => (
    <ul
      role={root ? "tree" : "group"}
      aria-label={root ? aria["aria-label"] : undefined}
      className={cn(
        root ? cn("text-sm", className) : "ml-2.5 border-l border-border pl-1.5",
      )}
    >
      {nodes.map((node) => {
        const hasChildren = !!node.children?.length;
        const isExpanded = expanded.has(node.id);
        const isSelected = selected === node.id;
        const item: FlatItem = { node, level, hasChildren, parentId };
        return (
          <li
            key={node.id}
            ref={(el) => {
              if (el) refs.current.set(node.id, el);
              else refs.current.delete(node.id);
            }}
            role="treeitem"
            aria-expanded={hasChildren ? isExpanded : undefined}
            aria-selected={isSelected}
            tabIndex={tabId === node.id ? 0 : -1}
            onKeyDown={(e) => onKeyDown(e, item)}
            onClick={(e) => {
              e.stopPropagation();
              activate(item);
            }}
            className="block rounded-md outline-none [&:focus-visible>div]:ring-2 [&:focus-visible>div]:ring-brand/50"
          >
            <div
              className={cn(
                "flex items-center gap-1.5 rounded-md py-1.5 pl-1.5 pr-2 transition-colors",
                isSelected
                  ? "bg-brand/15 text-foreground"
                  : "text-muted hover:bg-background hover:text-foreground",
              )}
            >
              {hasChildren ? (
                <ChevronRight
                  className={cn(
                    "size-4 shrink-0 transition-transform",
                    isExpanded && "rotate-90",
                  )}
                />
              ) : (
                <span className="size-4 shrink-0" />
              )}
              <span className="truncate">{node.label}</span>
            </div>
            {hasChildren &&
              isExpanded &&
              renderNodes(node.children!, level + 1, node.id, false)}
          </li>
        );
      })}
    </ul>
  );

  return renderNodes(data, 1, null, true);
}
```

### Toolbar
Grouped controls with roving focus and aria-pressed toggles.
URL: https://dev.ononc.com/ui
Path: src/components/ui/toolbar.tsx

```tsx
"use client";

import { type KeyboardEvent, type ReactNode, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export type ToolbarItem =
  | { type?: "button"; id: string; label: string; icon: ReactNode; onClick?: () => void }
  | {
      type: "toggle";
      id: string;
      label: string;
      icon: ReactNode;
      defaultPressed?: boolean;
      onPressedChange?: (pressed: boolean) => void;
    }
  | { type: "separator"; id: string };

export interface ToolbarProps {
  items: ToolbarItem[];
  orientation?: "horizontal" | "vertical";
  className?: string;
  "aria-label": string;
}

/**
 * Toolbar — a WAI-ARIA toolbar (role="toolbar") that is a single tab stop and
 * roves focus across its controls with the arrow keys (Home/End jump to the
 * ends). Mix actionable buttons, `aria-pressed` toggles, and separators.
 */
export function Toolbar({
  items,
  orientation = "horizontal",
  className,
  ...aria
}: ToolbarProps) {
  const refs = useRef<(HTMLButtonElement | null)[]>([]);
  const focusable = items
    .map((item, i) => (item.type === "separator" ? -1 : i))
    .filter((i) => i >= 0);
  const [active, setActive] = useState(focusable[0] ?? 0);
  const [pressed, setPressed] = useState<Set<string>>(
    () =>
      new Set(
        items
          .filter((i) => i.type === "toggle" && i.defaultPressed)
          .map((i) => i.id),
      ),
  );
  const isH = orientation === "horizontal";

  const focusAt = (index: number) => {
    setActive(index);
    refs.current[index]?.focus();
  };

  const onKeyDown = (e: KeyboardEvent) => {
    const prevKey = isH ? "ArrowLeft" : "ArrowUp";
    const nextKey = isH ? "ArrowRight" : "ArrowDown";
    const pos = focusable.indexOf(active);
    if (pos < 0) return;
    if (e.key === nextKey) {
      e.preventDefault();
      focusAt(focusable[(pos + 1) % focusable.length]);
    } else if (e.key === prevKey) {
      e.preventDefault();
      focusAt(focusable[(pos - 1 + focusable.length) % focusable.length]);
    } else if (e.key === "Home") {
      e.preventDefault();
      focusAt(focusable[0]);
    } else if (e.key === "End") {
      e.preventDefault();
      focusAt(focusable[focusable.length - 1]);
    }
  };

  return (
    <div
      role="toolbar"
      aria-label={aria["aria-label"]}
      aria-orientation={orientation}
      onKeyDown={onKeyDown}
      className={cn(
        "inline-flex gap-1 rounded-xl border border-border bg-surface p-1",
        isH ? "flex-row items-center" : "flex-col items-stretch",
        className,
      )}
    >
      {items.map((item, i) => {
        if (item.type === "separator") {
          return (
            <div
              key={item.id}
              role="separator"
              aria-orientation={isH ? "vertical" : "horizontal"}
              className={cn(
                "shrink-0 bg-border",
                isH ? "mx-0.5 h-6 w-px" : "my-0.5 h-px w-full",
              )}
            />
          );
        }
        const isToggle = item.type === "toggle";
        const isPressed = isToggle && pressed.has(item.id);
        return (
          <button
            key={item.id}
            ref={(el) => {
              refs.current[i] = el;
            }}
            type="button"
            aria-label={item.label}
            aria-pressed={isToggle ? isPressed : undefined}
            title={item.label}
            tabIndex={active === i ? 0 : -1}
            onClick={() => {
              setActive(i);
              if (item.type === "toggle") {
                const willPress = !pressed.has(item.id);
                setPressed((prev) => {
                  const next = new Set(prev);
                  if (willPress) next.add(item.id);
                  else next.delete(item.id);
                  return next;
                });
                item.onPressedChange?.(willPress);
              } else {
                item.onClick?.();
              }
            }}
            className={cn(
              "grid size-9 shrink-0 place-items-center rounded-lg outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand/50",
              isPressed
                ? "bg-brand/20 text-foreground"
                : "text-muted hover:bg-background hover:text-foreground",
            )}
          >
            {item.icon}
          </button>
        );
      })}
    </div>
  );
}
```

### Menubar
Application menu bar with arrow-key navigation between menus.
URL: https://dev.ononc.com/ui
Path: src/components/ui/menubar.tsx

```tsx
"use client";

import { type KeyboardEvent, useEffect, useRef, useState } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface MenubarMenuItem {
  label: string;
  onSelect?: () => void;
  disabled?: boolean;
  shortcut?: string;
}

export interface MenubarMenu {
  label: string;
  items: MenubarMenuItem[];
}

export interface MenubarProps {
  menus: MenubarMenu[];
  className?: string;
  "aria-label"?: string;
}

/**
 * Menubar — an application menu bar (role="menubar"). ←/→ move between top-level
 * menus (and switch the open one), ↓ / Enter opens a menu and focuses its first
 * item, ↑/↓ move within it, Home/End jump, Escape closes back to the bar, and an
 * outside click dismisses it. One tab stop; focus is managed throughout.
 */
export function Menubar({ menus, className, ...aria }: MenubarProps) {
  const rootRef = useRef<HTMLDivElement>(null);
  const topRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const itemRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
  const [activeTop, setActiveTop] = useState(0);
  const [open, setOpen] = useState<number | null>(null);
  const [activeItem, setActiveItem] = useState(0);

  useEffect(() => {
    if (open === null) return;
    const onDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(null);
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [open]);

  // Move focus to the active item whenever the open menu or active item changes.
  useEffect(() => {
    if (open !== null) itemRefs.current.get(`${open}-${activeItem}`)?.focus();
  }, [open, activeItem]);

  const enabledItems = (menuIndex: number) =>
    menus[menuIndex].items
      .map((item, i) => (item.disabled ? -1 : i))
      .filter((i) => i >= 0);

  const openMenu = (index: number) => {
    setActiveTop(index);
    setActiveItem(enabledItems(index)[0] ?? 0);
    setOpen(index);
  };

  const closeMenu = (focusTop = true) => {
    const i = open;
    setOpen(null);
    if (focusTop && i !== null) topRefs.current[i]?.focus();
  };

  const onTopKeyDown = (e: KeyboardEvent, index: number) => {
    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
      e.preventDefault();
      const next =
        e.key === "ArrowRight"
          ? (index + 1) % menus.length
          : (index - 1 + menus.length) % menus.length;
      setActiveTop(next);
      if (open !== null) openMenu(next);
      else topRefs.current[next]?.focus();
    } else if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      openMenu(index);
    } else if (e.key === "Escape") {
      setOpen(null);
    }
  };

  const onMenuKeyDown = (e: KeyboardEvent, menuIndex: number) => {
    const enabled = enabledItems(menuIndex);
    const pos = enabled.indexOf(activeItem);
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setActiveItem(enabled[(pos + 1) % enabled.length]);
        break;
      case "ArrowUp":
        e.preventDefault();
        setActiveItem(enabled[(pos - 1 + enabled.length) % enabled.length]);
        break;
      case "Home":
        e.preventDefault();
        setActiveItem(enabled[0]);
        break;
      case "End":
        e.preventDefault();
        setActiveItem(enabled[enabled.length - 1]);
        break;
      case "ArrowRight":
        e.preventDefault();
        openMenu((menuIndex + 1) % menus.length);
        break;
      case "ArrowLeft":
        e.preventDefault();
        openMenu((menuIndex - 1 + menus.length) % menus.length);
        break;
      case "Escape":
        e.preventDefault();
        closeMenu();
        break;
      case "Tab":
        setOpen(null);
        break;
      case "Enter":
      case " ": {
        e.preventDefault();
        const item = menus[menuIndex].items[activeItem];
        if (item && !item.disabled) {
          item.onSelect?.();
          closeMenu();
        }
        break;
      }
    }
  };

  return (
    <div
      ref={rootRef}
      role="menubar"
      aria-label={aria["aria-label"] ?? "Menubar"}
      className={cn(
        "inline-flex items-center gap-0.5 rounded-xl border border-border bg-surface p-1",
        className,
      )}
    >
      {menus.map((menu, mi) => (
        <div key={menu.label} className="relative">
          <button
            ref={(el) => {
              topRefs.current[mi] = el;
            }}
            type="button"
            role="menuitem"
            aria-haspopup="menu"
            aria-expanded={open === mi}
            tabIndex={activeTop === mi ? 0 : -1}
            onClick={() => (open === mi ? closeMenu() : openMenu(mi))}
            onKeyDown={(e) => onTopKeyDown(e, mi)}
            onMouseEnter={() => open !== null && open !== mi && openMenu(mi)}
            className={cn(
              "rounded-lg px-3 py-1.5 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand/50",
              open === mi
                ? "bg-brand/15 text-foreground"
                : "text-muted hover:text-foreground",
            )}
          >
            {menu.label}
          </button>
          {open === mi && (
            <motion.div
              role="menu"
              aria-label={menu.label}
              initial={{ opacity: 0, y: -6, scale: 0.97 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              transition={{ duration: 0.12 }}
              onKeyDown={(e) => onMenuKeyDown(e, mi)}
              className="absolute left-0 top-full z-50 mt-1 min-w-44 rounded-xl border border-border bg-surface p-1.5 shadow-xl"
            >
              {menu.items.map((item, ii) => (
                <button
                  key={item.label}
                  ref={(el) => {
                    const key = `${mi}-${ii}`;
                    if (el) itemRefs.current.set(key, el);
                    else itemRefs.current.delete(key);
                  }}
                  type="button"
                  role="menuitem"
                  tabIndex={activeItem === ii ? 0 : -1}
                  disabled={item.disabled}
                  onClick={() => {
                    if (item.disabled) return;
                    item.onSelect?.();
                    closeMenu();
                  }}
                  onMouseMove={() => !item.disabled && setActiveItem(ii)}
                  className={cn(
                    "flex w-full items-center justify-between gap-6 rounded-lg px-3 py-1.5 text-left text-sm text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-40",
                    activeItem === ii && !item.disabled && "bg-brand/15",
                  )}
                >
                  <span>{item.label}</span>
                  {item.shortcut && (
                    <span className="text-xs text-muted-2">{item.shortcut}</span>
                  )}
                </button>
              ))}
            </motion.div>
          )}
        </div>
      ))}
    </div>
  );
}
```

### Data Table
Sortable columns with aria-sort and optional row selection.
URL: https://dev.ononc.com/ui
Path: src/components/ui/data-table.tsx

```tsx
"use client";

import { type ReactNode, useMemo, useState } from "react";
import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DataTableColumn<T> {
  key: keyof T & string;
  header: string;
  sortable?: boolean;
  align?: "left" | "right";
  render?: (row: T) => ReactNode;
}

export interface DataTableProps<T> {
  columns: DataTableColumn<T>[];
  rows: T[];
  /** Column key whose value uniquely identifies each row. */
  rowKey: keyof T & string;
  selectable?: boolean;
  onSelectionChange?: (ids: string[]) => void;
  /** Screen-reader caption for the table. */
  caption?: string;
  className?: string;
}

type SortDir = "asc" | "desc";

/**
 * DataTable — a semantic <table> with sortable column headers (toggle a header
 * to cycle ascending/descending, surfaced via aria-sort) and optional row
 * selection (header checkbox supports the indeterminate state). Generic over the
 * row shape.
 */
export function DataTable<T extends Record<string, unknown>>({
  columns,
  rows,
  rowKey,
  selectable = false,
  onSelectionChange,
  caption,
  className,
}: DataTableProps<T>) {
  const getRowId = (row: T) => String(row[rowKey]);
  const [sortKey, setSortKey] = useState<string | null>(null);
  const [sortDir, setSortDir] = useState<SortDir>("asc");
  const [selected, setSelected] = useState<Set<string>>(new Set());

  const sorted = useMemo(() => {
    if (!sortKey) return rows;
    const copy = [...rows];
    copy.sort((a, b) => {
      const av = a[sortKey as keyof T];
      const bv = b[sortKey as keyof T];
      const cmp =
        typeof av === "number" && typeof bv === "number"
          ? av - bv
          : String(av).localeCompare(String(bv));
      return sortDir === "asc" ? cmp : -cmp;
    });
    return copy;
  }, [rows, sortKey, sortDir]);

  const toggleSort = (key: string) => {
    if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    else {
      setSortKey(key);
      setSortDir("asc");
    }
  };

  const ids = sorted.map(getRowId);
  const allSelected = ids.length > 0 && ids.every((id) => selected.has(id));
  const someSelected = ids.some((id) => selected.has(id));

  const emit = (next: Set<string>) => {
    setSelected(next);
    onSelectionChange?.([...next]);
  };
  const toggleAll = () => emit(allSelected ? new Set() : new Set(ids));
  const toggleRow = (id: string) => {
    const next = new Set(selected);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    emit(next);
  };

  return (
    <div className={cn("overflow-x-auto rounded-xl border border-border", className)}>
      <table className="w-full border-collapse text-sm">
        {caption && <caption className="sr-only">{caption}</caption>}
        <thead>
          <tr className="border-b border-border bg-surface">
            {selectable && (
              <th scope="col" className="w-10 px-3 py-2.5">
                <input
                  type="checkbox"
                  aria-label="Select all rows"
                  checked={allSelected}
                  ref={(el) => {
                    if (el) el.indeterminate = someSelected && !allSelected;
                  }}
                  onChange={toggleAll}
                  className="size-4 accent-[var(--brand)]"
                />
              </th>
            )}
            {columns.map((col) => {
              const isSorted = sortKey === col.key;
              return (
                <th
                  key={col.key}
                  scope="col"
                  aria-sort={
                    isSorted
                      ? sortDir === "asc"
                        ? "ascending"
                        : "descending"
                      : col.sortable
                        ? "none"
                        : undefined
                  }
                  className={cn(
                    "px-3 py-2.5 font-medium text-muted",
                    col.align === "right" ? "text-right" : "text-left",
                  )}
                >
                  {col.sortable ? (
                    <button
                      type="button"
                      onClick={() => toggleSort(col.key)}
                      className={cn(
                        "inline-flex items-center gap-1 rounded outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/50",
                        col.align === "right" && "flex-row-reverse",
                      )}
                    >
                      {col.header}
                      {isSorted ? (
                        sortDir === "asc" ? (
                          <ChevronUp className="size-3.5" />
                        ) : (
                          <ChevronDown className="size-3.5" />
                        )
                      ) : (
                        <ChevronsUpDown className="size-3.5 opacity-50" />
                      )}
                    </button>
                  ) : (
                    col.header
                  )}
                </th>
              );
            })}
          </tr>
        </thead>
        <tbody>
          {sorted.map((row) => {
            const id = getRowId(row);
            const isSel = selected.has(id);
            return (
              <tr
                key={id}
                className={cn(
                  "border-b border-border transition-colors last:border-0",
                  isSel ? "bg-brand/10" : "hover:bg-surface",
                )}
              >
                {selectable && (
                  <td className="px-3 py-2.5">
                    <input
                      type="checkbox"
                      aria-label={`Select row ${id}`}
                      checked={isSel}
                      onChange={() => toggleRow(id)}
                      className="size-4 accent-[var(--brand)]"
                    />
                  </td>
                )}
                {columns.map((col) => (
                  <td
                    key={col.key}
                    className={cn(
                      "px-3 py-2.5 text-foreground",
                      col.align === "right" && "text-right tabular-nums",
                    )}
                  >
                    {col.render
                      ? col.render(row)
                      : (row[col.key as keyof T] as ReactNode)}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}
```

### Color Picker
HSV picker with a hue slider, hex input, and swatches.
URL: https://dev.ononc.com/ui
Path: src/components/ui/color-picker.tsx

```tsx
"use client";

import {
  type KeyboardEvent,
  type PointerEvent,
  useId,
  useRef,
  useState,
} from "react";
import { cn } from "@/lib/utils";

export interface ColorPickerProps {
  defaultValue?: string;
  onChange?: (hex: string) => void;
  className?: string;
}

interface HSV {
  h: number;
  s: number;
  v: number;
}

const SWATCHES = [
  "#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4",
  "#3b82f6", "#8b5cf6", "#ec4899", "#f43f5e", "#0f172a",
];

const clampPct = (n: number) => Math.min(100, Math.max(0, n));

function hsvToRgb({ h, s, v }: HSV) {
  const sat = s / 100;
  const val = v / 100;
  const c = val * sat;
  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
  const m = val - c;
  let r = 0;
  let g = 0;
  let b = 0;
  if (h < 60) [r, g] = [c, x];
  else if (h < 120) [r, g] = [x, c];
  else if (h < 180) [g, b] = [c, x];
  else if (h < 240) [g, b] = [x, c];
  else if (h < 300) [r, b] = [x, c];
  else [r, b] = [c, x];
  return {
    r: Math.round((r + m) * 255),
    g: Math.round((g + m) * 255),
    b: Math.round((b + m) * 255),
  };
}

function rgbToHex({ r, g, b }: { r: number; g: number; b: number }) {
  return `#${[r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("")}`;
}

function hexToHsv(hex: string): HSV | null {
  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  if (!m) return null;
  const int = parseInt(m[1], 16);
  const r = ((int >> 16) & 255) / 255;
  const g = ((int >> 8) & 255) / 255;
  const b = (int & 255) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const d = max - min;
  let h = 0;
  if (d) {
    if (max === r) h = ((g - b) / d) % 6;
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h = Math.round(h * 60);
    if (h < 0) h += 360;
  }
  return { h, s: Math.round(max === 0 ? 0 : (d / max) * 100), v: Math.round(max * 100) };
}

/**
 * ColorPicker — an HSV picker: a saturation/brightness area, a hue slider, a hex
 * field and preset swatches. The area and hue slider are pointer-draggable and
 * keyboard-operable (arrow keys), and the hex input accepts typed values. Calls
 * onChange with the hex string. Uncontrolled via defaultValue.
 */
export function ColorPicker({
  defaultValue = "#8b5cf6",
  onChange,
  className,
}: ColorPickerProps) {
  const [hsv, setHsv] = useState<HSV>(() => hexToHsv(defaultValue) ?? { h: 258, s: 65, v: 96 });
  const [text, setText] = useState(defaultValue);
  const svRef = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);
  const hexId = useId();
  const hex = rgbToHex(hsvToRgb(hsv));

  const apply = (next: HSV) => {
    setHsv(next);
    const nextHex = rgbToHex(hsvToRgb(next));
    setText(nextHex);
    onChange?.(nextHex);
  };

  const svFromPointer = (clientX: number, clientY: number) => {
    const rect = svRef.current?.getBoundingClientRect();
    if (!rect) return;
    apply({
      ...hsv,
      s: Math.round(clampPct(((clientX - rect.left) / rect.width) * 100)),
      v: Math.round(clampPct(100 - ((clientY - rect.top) / rect.height) * 100)),
    });
  };

  const onSvPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    dragging.current = true;
    e.currentTarget.setPointerCapture(e.pointerId);
    svFromPointer(e.clientX, e.clientY);
  };
  const onSvPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    if (dragging.current) svFromPointer(e.clientX, e.clientY);
  };
  const onSvPointerUp = (e: PointerEvent<HTMLDivElement>) => {
    dragging.current = false;
    e.currentTarget.releasePointerCapture(e.pointerId);
  };

  const onSvKeyDown = (e: KeyboardEvent) => {
    const step = e.shiftKey ? 10 : 1;
    if (e.key === "ArrowRight") {
      e.preventDefault();
      apply({ ...hsv, s: clampPct(hsv.s + step) });
    } else if (e.key === "ArrowLeft") {
      e.preventDefault();
      apply({ ...hsv, s: clampPct(hsv.s - step) });
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      apply({ ...hsv, v: clampPct(hsv.v + step) });
    } else if (e.key === "ArrowDown") {
      e.preventDefault();
      apply({ ...hsv, v: clampPct(hsv.v - step) });
    }
  };

  const onHueKeyDown = (e: KeyboardEvent) => {
    const step = e.shiftKey ? 15 : 2;
    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
      e.preventDefault();
      apply({ ...hsv, h: Math.min(360, hsv.h + step) });
    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
      e.preventDefault();
      apply({ ...hsv, h: Math.max(0, hsv.h - step) });
    } else if (e.key === "Home") {
      e.preventDefault();
      apply({ ...hsv, h: 0 });
    } else if (e.key === "End") {
      e.preventDefault();
      apply({ ...hsv, h: 360 });
    }
  };

  const hueDragging = useRef(false);
  const hueRef = useRef<HTMLDivElement>(null);
  const hueFromPointer = (clientX: number) => {
    const rect = hueRef.current?.getBoundingClientRect();
    if (!rect) return;
    apply({ ...hsv, h: Math.round(clampPct(((clientX - rect.left) / rect.width) * 100) * 3.6) });
  };

  return (
    <div className={cn("w-60 select-none rounded-xl border border-border bg-surface p-3", className)}>
      <div
        ref={svRef}
        role="slider"
        tabIndex={0}
        aria-label="Color saturation and brightness"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={hsv.v}
        aria-valuetext={hex}
        onPointerDown={onSvPointerDown}
        onPointerMove={onSvPointerMove}
        onPointerUp={onSvPointerUp}
        onKeyDown={onSvKeyDown}
        className="relative h-36 w-full touch-none rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-brand/60"
        style={{
          backgroundColor: `hsl(${hsv.h}, 100%, 50%)`,
          backgroundImage:
            "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",
        }}
      >
        <span
          aria-hidden
          className="absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
          style={{ left: `${hsv.s}%`, top: `${100 - hsv.v}%`, backgroundColor: hex }}
        />
      </div>

      <div className="mt-3 flex items-center gap-3">
        <span
          aria-hidden
          className="size-9 shrink-0 rounded-lg border border-border"
          style={{ backgroundColor: hex }}
        />
        <div className="flex-1">
          <div
            ref={hueRef}
            role="slider"
            tabIndex={0}
            aria-label="Hue"
            aria-valuemin={0}
            aria-valuemax={360}
            aria-valuenow={hsv.h}
            onPointerDown={(e) => {
              hueDragging.current = true;
              e.currentTarget.setPointerCapture(e.pointerId);
              hueFromPointer(e.clientX);
            }}
            onPointerMove={(e) => hueDragging.current && hueFromPointer(e.clientX)}
            onPointerUp={(e) => {
              hueDragging.current = false;
              e.currentTarget.releasePointerCapture(e.pointerId);
            }}
            onKeyDown={onHueKeyDown}
            className="relative h-3 w-full touch-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-brand/60"
            style={{
              backgroundImage:
                "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",
            }}
          >
            <span
              aria-hidden
              className="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-white shadow"
              style={{ left: `${(hsv.h / 360) * 100}%` }}
            />
          </div>
        </div>
      </div>

      <div className="mt-3 flex items-center gap-2">
        <label className="sr-only" htmlFor={hexId}>
          Hex color
        </label>
        <input
          id={hexId}
          value={text}
          onChange={(e) => {
            setText(e.target.value);
            const parsed = hexToHsv(e.target.value);
            if (parsed) apply(parsed);
          }}
          spellCheck={false}
          className="w-24 rounded-lg border border-border bg-background px-2 py-1.5 font-mono text-xs uppercase outline-none focus-visible:border-brand"
        />
        <div className="flex flex-1 flex-wrap justify-end gap-1.5">
          {SWATCHES.map((sw) => (
            <button
              key={sw}
              type="button"
              aria-label={`Select ${sw}`}
              onClick={() => {
                const parsed = hexToHsv(sw);
                if (parsed) apply(parsed);
              }}
              className="size-5 rounded-full border border-border outline-none transition-transform hover:scale-110 focus-visible:ring-2 focus-visible:ring-brand/60"
              style={{ backgroundColor: sw }}
            />
          ))}
        </div>
      </div>
    </div>
  );
}
```

### Calendar
Inline month grid for single or range selection (range shown).
URL: https://dev.ononc.com/ui
Path: src/components/ui/calendar.tsx

```tsx
"use client";

import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DateRange {
  start: Date | null;
  end: Date | null;
}

export interface CalendarProps {
  mode?: "single" | "range";
  defaultMonth?: Date;
  onSelect?: (date: Date) => void;
  onRangeChange?: (range: DateRange) => void;
  className?: string;
  "aria-label"?: string;
}

const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
const WEEKDAYS_FULL = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
const longFmt = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
});
const monthFmt = new Intl.DateTimeFormat("en-US", {
  month: "long",
  year: "numeric",
});

const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1);
const addDays = (d: Date, n: number) =>
  new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
const addMonths = (d: Date, n: number) => {
  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
  target.setDate(Math.min(d.getDate(), last));
  return target;
};
const clampToMonth = (day: number, view: Date) => {
  const last = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
  return new Date(view.getFullYear(), view.getMonth(), Math.min(day, last));
};
const sameDay = (a: Date, b: Date) =>
  a.getFullYear() === b.getFullYear() &&
  a.getMonth() === b.getMonth() &&
  a.getDate() === b.getDate();
const key = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
const monthGrid = (view: Date) => {
  const first = startOfMonth(view);
  const start = addDays(first, -first.getDay());
  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
};

/**
 * Calendar — an inline month grid for single or range selection. Follows the
 * WAI-ARIA grid pattern (grid → row → gridcell): ←/→ a day, ↑/↓ a week, Home/End
 * the week edges, PageUp/PageDown a month, Enter/Space selects. In range mode the
 * second click sets the end (auto-ordered) and hovering previews the range.
 */
export function Calendar({
  mode = "single",
  defaultMonth,
  onSelect,
  onRangeChange,
  className,
  ...aria
}: CalendarProps) {
  const labelId = useId();
  const dayRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
  const shouldFocus = useRef(false);

  const [view, setView] = useState(() => startOfMonth(defaultMonth ?? new Date()));
  const [focused, setFocused] = useState(() => defaultMonth ?? new Date());
  const [selected, setSelected] = useState<Date | null>(null);
  const [range, setRange] = useState<DateRange>({ start: null, end: null });
  const [hovered, setHovered] = useState<Date | null>(null);

  const today = new Date();

  // Only move DOM focus in response to keyboard navigation (never on mount or
  // when paging with the mouse).
  useEffect(() => {
    if (shouldFocus.current) {
      dayRefs.current.get(key(focused))?.focus();
      shouldFocus.current = false;
    }
  }, [focused, view]);

  const moveFocus = (next: Date) => {
    shouldFocus.current = true;
    setFocused(next);
    if (
      next.getMonth() !== view.getMonth() ||
      next.getFullYear() !== view.getFullYear()
    ) {
      setView(startOfMonth(next));
    }
  };

  // Paging keeps the focused day within the visible month so the grid always has
  // a tab stop, but does not steal focus from the clicked button.
  const pageMonth = (delta: number) => {
    const v = addMonths(view, delta);
    setView(v);
    setFocused(clampToMonth(focused.getDate(), v));
  };

  const selectDay = (day: Date) => {
    setFocused(day);
    if (mode === "single") {
      setSelected(day);
      onSelect?.(day);
      return;
    }
    if (!range.start || range.end) {
      const next = { start: day, end: null };
      setRange(next);
      setHovered(null);
      onRangeChange?.(next);
    } else {
      let start = range.start;
      let end = day;
      if (day.getTime() < range.start.getTime()) {
        start = day;
        end = range.start;
      }
      const next = { start, end };
      setRange(next);
      setHovered(null);
      onRangeChange?.(next);
    }
  };

  const onGridKeyDown = (e: KeyboardEvent) => {
    switch (e.key) {
      case "ArrowLeft":
        e.preventDefault();
        moveFocus(addDays(focused, -1));
        break;
      case "ArrowRight":
        e.preventDefault();
        moveFocus(addDays(focused, 1));
        break;
      case "ArrowUp":
        e.preventDefault();
        moveFocus(addDays(focused, -7));
        break;
      case "ArrowDown":
        e.preventDefault();
        moveFocus(addDays(focused, 7));
        break;
      case "Home":
        e.preventDefault();
        moveFocus(addDays(focused, -focused.getDay()));
        break;
      case "End":
        e.preventDefault();
        moveFocus(addDays(focused, 6 - focused.getDay()));
        break;
      case "PageUp":
        e.preventDefault();
        moveFocus(addMonths(focused, -1));
        break;
      case "PageDown":
        e.preventDefault();
        moveFocus(addMonths(focused, 1));
        break;
      case "Enter":
      case " ":
        e.preventDefault();
        selectDay(focused);
        break;
    }
  };

  const previewEnd = range.end ?? hovered;
  const inRange = (day: Date) => {
    if (mode !== "range" || !range.start || !previewEnd) return false;
    const lo = Math.min(range.start.getTime(), previewEnd.getTime());
    const hi = Math.max(range.start.getTime(), previewEnd.getTime());
    const t = day.getTime();
    return t > lo && t < hi;
  };
  const isEndpoint = (day: Date) =>
    mode === "single"
      ? !!selected && sameDay(day, selected)
      : (!!range.start && sameDay(day, range.start)) ||
        (!!range.end && sameDay(day, range.end));

  const days = monthGrid(view);
  const weeks = Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7));

  return (
    <div
      role="group"
      aria-label={aria["aria-label"] ?? "Calendar"}
      className={cn(
        "w-72 rounded-xl border border-border bg-surface p-3",
        className,
      )}
    >
      <div className="mb-2 flex items-center justify-between">
        <button
          type="button"
          aria-label="Previous month"
          onClick={() => pageMonth(-1)}
          className="grid size-8 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
        >
          <ChevronLeft className="size-4" />
        </button>
        <span id={labelId} aria-live="polite" className="text-sm font-semibold">
          {monthFmt.format(view)}
        </span>
        <button
          type="button"
          aria-label="Next month"
          onClick={() => pageMonth(1)}
          className="grid size-8 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
        >
          <ChevronRight className="size-4" />
        </button>
      </div>
      <div
        role="grid"
        aria-labelledby={labelId}
        onKeyDown={onGridKeyDown}
        onMouseLeave={() => setHovered(null)}
      >
        <div role="row" className="mb-1 grid grid-cols-7">
          {WEEKDAYS.map((w, i) => (
            <span
              key={w}
              role="columnheader"
              aria-label={WEEKDAYS_FULL[i]}
              className="grid h-8 place-items-center text-xs font-medium text-muted-2"
            >
              {w}
            </span>
          ))}
        </div>
        <div role="rowgroup" className="space-y-0.5">
          {weeks.map((week, wi) => (
            <div role="row" key={wi} className="grid grid-cols-7">
              {week.map((day) => {
                const inMonth = day.getMonth() === view.getMonth();
                const endpoint = isEndpoint(day);
                const middle = inRange(day);
                const isToday = sameDay(day, today);
                const isFocusable = sameDay(day, focused);
                return (
                  <div
                    role="gridcell"
                    aria-selected={endpoint}
                    key={key(day)}
                    className={cn(
                      middle && "bg-brand/15",
                      "first:rounded-l-lg last:rounded-r-lg",
                    )}
                  >
                    <button
                      ref={(el) => {
                        if (el) dayRefs.current.set(key(day), el);
                        else dayRefs.current.delete(key(day));
                      }}
                      type="button"
                      tabIndex={isFocusable ? 0 : -1}
                      aria-current={isToday ? "date" : undefined}
                      aria-label={longFmt.format(day)}
                      onClick={() => selectDay(day)}
                      onMouseEnter={() => {
                        if (mode === "range" && range.start && !range.end) {
                          setHovered(day);
                        }
                      }}
                      className={cn(
                        "grid size-9 w-full place-items-center rounded-lg text-sm tabular-nums outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand/50",
                        !inMonth && "text-muted-2",
                        inMonth && !endpoint && !middle && "text-foreground hover:bg-background",
                        middle && !endpoint && "text-foreground",
                        endpoint && "bg-brand font-semibold text-white",
                        !endpoint && isToday && "ring-1 ring-inset ring-border-strong",
                      )}
                    >
                      {day.getDate()}
                    </button>
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
```

### Kbd
Keyboard key caps for documenting shortcuts.
URL: https://dev.ononc.com/ui/kbd
Path: src/components/ui/kbd.tsx

```tsx
import { cn } from "@/lib/utils";

export interface KbdProps {
  /** Keys to render, e.g. ["⌘", "K"] or ["Ctrl", "Shift", "P"]. */
  keys: string[];
  className?: string;
}

/**
 * Kbd — renders keyboard keys as styled <kbd> elements. Presentational and
 * server-safe; pass the keys of a shortcut and they render as individual caps.
 */
export function Kbd({ keys, className }: KbdProps) {
  return (
    <span className={cn("inline-flex items-center gap-1", className)}>
      {keys.map((key, i) => (
        <kbd
          key={`${key}-${i}`}
          className="inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded border border-border bg-surface px-1.5 font-mono text-[11px] font-medium text-muted shadow-[0_1px_0_var(--border-strong)]"
        >
          {key}
        </kbd>
      ))}
    </span>
  );
}
```

### Card
Composable content surface with header, content, and footer.
URL: https://dev.ononc.com/ui
Path: src/components/ui/card.tsx

```tsx
import { type HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

/**
 * Card — a composable surface. Use Card with CardHeader / CardTitle /
 * CardDescription / CardContent / CardFooter to build content blocks.
 * Presentational and server-safe.
 */
export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("rounded-2xl border border-border bg-surface", className)}
      {...props}
    />
  );
}

export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex flex-col gap-1 p-5", className)} {...props} />;
}

export function CardTitle({
  className,
  ...props
}: HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h3
      className={cn("text-base font-semibold text-foreground", className)}
      {...props}
    />
  );
}

export function CardDescription({
  className,
  ...props
}: HTMLAttributes<HTMLParagraphElement>) {
  return <p className={cn("text-sm text-muted", className)} {...props} />;
}

export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("p-5 pt-0", className)} {...props} />;
}

export function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn("flex items-center gap-2 p-5 pt-0", className)}
      {...props}
    />
  );
}
```

### Avatar
User image with initials fallback and an optional status dot.
URL: https://dev.ononc.com/ui/avatar
Path: src/components/ui/avatar.tsx

```tsx
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

export type AvatarStatus = "online" | "offline" | "busy" | "away";

export interface AvatarProps {
  /** Display name — used for the accessible label and the initials fallback. */
  name: string;
  src?: string;
  size?: "sm" | "md" | "lg";
  status?: AvatarStatus;
  className?: string;
}

const SIZES: Record<NonNullable<AvatarProps["size"]>, string> = {
  sm: "size-8 text-xs",
  md: "size-10 text-sm",
  lg: "size-14 text-base",
};

const STATUS: Record<AvatarStatus, string> = {
  online: "bg-emerald-500",
  offline: "bg-muted-2",
  busy: "bg-rose-500",
  away: "bg-amber-500",
};

function initials(name: string) {
  return name
    .trim()
    .split(/\s+/)
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? "")
    .join("");
}

/**
 * Avatar — a circular user image that falls back to initials if no src is given
 * or the image fails to load, with an optional status dot. The accessible name
 * is always the person's name.
 */
export function Avatar({ name, src, size = "md", status, className }: AvatarProps) {
  const [errored, setErrored] = useState(false);
  const showImage = !!src && !errored;

  return (
    <span
      className={cn(
        "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-2 font-medium text-foreground ring-1 ring-border",
        SIZES[size],
        className,
      )}
    >
      {showImage ? (
        // eslint-disable-next-line @next/next/no-img-element -- portable, framework-agnostic avatar
        <img
          src={src}
          alt={name}
          onError={() => setErrored(true)}
          className="size-full object-cover"
        />
      ) : (
        <>
          <span aria-hidden>{initials(name)}</span>
          <span className="sr-only">{name}</span>
        </>
      )}
      {status && (
        <span
          role="img"
          aria-label={`Status: ${status}`}
          className={cn(
            "absolute bottom-0 right-0 size-2.5 rounded-full ring-2 ring-surface",
            STATUS[status],
          )}
        />
      )}
    </span>
  );
}
```

### Separator
Thin divider, horizontal or vertical, with an optional label.
URL: https://dev.ononc.com/ui/separator
Path: src/components/ui/separator.tsx

```tsx
import { type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface SeparatorProps {
  orientation?: "horizontal" | "vertical";
  /** Optional centered label (horizontal only), e.g. "OR". */
  label?: ReactNode;
  className?: string;
}

/**
 * Separator — a thin divider. Horizontal or vertical, with an optional centered
 * label for the horizontal variant (useful for "OR" dividers). Plain variants
 * expose role="separator".
 */
export function Separator({
  orientation = "horizontal",
  label,
  className,
}: SeparatorProps) {
  if (orientation === "vertical") {
    return (
      <div
        role="separator"
        aria-orientation="vertical"
        className={cn("w-px self-stretch bg-border", className)}
      />
    );
  }

  if (label) {
    return (
      <div className={cn("flex items-center gap-3", className)}>
        <span className="h-px flex-1 bg-border" />
        <span className="text-xs font-medium uppercase tracking-wide text-muted-2">
          {label}
        </span>
        <span className="h-px flex-1 bg-border" />
      </div>
    );
  }

  return (
    <div
      role="separator"
      className={cn("h-px w-full bg-border", className)}
    />
  );
}
```

### Collapsible
A single show/hide disclosure with an animated height.
URL: https://dev.ononc.com/ui
Path: src/components/ui/collapsible.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CollapsibleProps {
  label: ReactNode;
  children: ReactNode;
  defaultOpen?: boolean;
  className?: string;
}

/**
 * Collapsible — a single show/hide disclosure. The trigger is a button with
 * aria-expanded + aria-controls; the content stays mounted (so aria-controls
 * always resolves) and animates its height open/closed.
 */
export function Collapsible({
  label,
  children,
  defaultOpen = false,
  className,
}: CollapsibleProps) {
  const id = useId();
  const [open, setOpen] = useState(defaultOpen);
  const reduce = useReducedMotion();

  return (
    <div className={cn("w-full", className)}>
      <button
        type="button"
        aria-expanded={open}
        aria-controls={id}
        onClick={() => setOpen((o) => !o)}
        className="flex w-full items-center justify-between gap-2 rounded-lg px-1 py-2 text-left text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-brand/50"
      >
        {label}
        <ChevronDown
          className={cn(
            "size-4 shrink-0 text-muted transition-transform",
            open && "rotate-180",
          )}
        />
      </button>
      <motion.div
        id={id}
        inert={!open}
        initial={false}
        animate={{ height: open ? "auto" : 0, opacity: open ? 1 : 0 }}
        transition={{ duration: reduce ? 0 : 0.2 }}
        className="overflow-hidden"
      >
        <div className="px-1 pb-2 pt-1 text-sm text-muted">{children}</div>
      </motion.div>
    </div>
  );
}
```

### Scroll Area
A bounded scroll container with a custom, themed scrollbar.
URL: https://dev.ononc.com/ui
Path: src/components/ui/scroll-area.tsx

```tsx
"use client";

import {
  type PointerEvent,
  type ReactNode,
  useCallback,
  useEffect,
  useRef,
  useState,
} from "react";
import { cn } from "@/lib/utils";

export interface ScrollAreaProps {
  children: ReactNode;
  className?: string;
}

/**
 * ScrollArea — a bounded scroll container with a custom, themed vertical
 * scrollbar. The native viewport scrolls (so keyboard scrolling and screen
 * readers work); the overlay thumb is decorative and pointer-draggable.
 */
export function ScrollArea({ children, className }: ScrollAreaProps) {
  const viewportRef = useRef<HTMLDivElement>(null);
  const drag = useRef<{ startY: number; startScroll: number } | null>(null);
  const [thumb, setThumb] = useState({ height: 0, top: 0, visible: false });

  const measure = useCallback(() => {
    const el = viewportRef.current;
    if (!el) return;
    const { scrollTop, scrollHeight, clientHeight } = el;
    if (scrollHeight <= clientHeight) {
      setThumb((t) => (t.visible ? { ...t, visible: false } : t));
      return;
    }
    const height = Math.max((clientHeight / scrollHeight) * clientHeight, 24);
    const maxTop = clientHeight - height;
    const top = (scrollTop / (scrollHeight - clientHeight)) * maxTop;
    setThumb({ height, top, visible: true });
  }, []);

  useEffect(() => {
    const el = viewportRef.current;
    if (!el) return;
    // ResizeObserver fires once on observe — that initial callback does the
    // first measure, so we never call setState synchronously in this effect.
    const ro = new ResizeObserver(() => measure());
    ro.observe(el);
    return () => ro.disconnect();
  }, [measure]);

  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    const el = viewportRef.current;
    if (!el) return;
    drag.current = { startY: e.clientY, startScroll: el.scrollTop };
    e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    const el = viewportRef.current;
    const d = drag.current;
    if (!el || !d) return;
    const maxTop = el.clientHeight - thumb.height;
    if (maxTop <= 0) return;
    const scrollPerPx = (el.scrollHeight - el.clientHeight) / maxTop;
    el.scrollTop = d.startScroll + (e.clientY - d.startY) * scrollPerPx;
  };
  const onPointerUp = (e: PointerEvent<HTMLDivElement>) => {
    drag.current = null;
    e.currentTarget.releasePointerCapture(e.pointerId);
  };

  return (
    <div className={cn("relative overflow-hidden", className)}>
      <div
        ref={viewportRef}
        onScroll={measure}
        tabIndex={0}
        className="size-full overflow-auto outline-none [scrollbar-width:none] focus-visible:ring-2 focus-visible:ring-brand/40 [&::-webkit-scrollbar]:hidden"
      >
        {children}
      </div>
      {thumb.visible && (
        <div aria-hidden className="absolute inset-y-1 right-1 w-2">
          <div
            onPointerDown={onPointerDown}
            onPointerMove={onPointerMove}
            onPointerUp={onPointerUp}
            onPointerCancel={onPointerUp}
            style={{ height: thumb.height, transform: `translateY(${thumb.top}px)` }}
            className="w-full cursor-grab rounded-full bg-border-strong transition-colors hover:bg-brand/50 active:cursor-grabbing"
          />
        </div>
      )}
    </div>
  );
}
```

### Empty State
A centered placeholder for empty content with an action.
URL: https://dev.ononc.com/ui
Path: src/components/ui/empty-state.tsx

```tsx
import { type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface EmptyStateProps {
  icon?: ReactNode;
  title: string;
  description?: string;
  /** Optional action slot (e.g. a button). */
  action?: ReactNode;
  className?: string;
}

/**
 * EmptyState — a centered placeholder for empty content: an optional icon, a
 * title, a description, and an optional action. Presentational and server-safe.
 */
export function EmptyState({
  icon,
  title,
  description,
  action,
  className,
}: EmptyStateProps) {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border-strong p-10 text-center",
        className,
      )}
    >
      {icon && (
        <div className="grid size-12 place-items-center rounded-full bg-surface-2 text-muted">
          {icon}
        </div>
      )}
      <div className="space-y-1">
        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
        {description && (
          <p className="mx-auto max-w-xs text-sm text-muted">{description}</p>
        )}
      </div>
      {action && <div className="mt-1">{action}</div>}
    </div>
  );
}
```

### Multi-Select
Searchable multi-select with removable chips and keyboard nav.
URL: https://dev.ononc.com/ui
Path: src/components/ui/multi-select.tsx

```tsx
"use client";

import { type KeyboardEvent, useEffect, useId, useRef, useState } from "react";
import { Check, ChevronsUpDown, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface MultiSelectProps {
  options: string[];
  defaultValue?: string[];
  placeholder?: string;
  onChange?: (values: string[]) => void;
  className?: string;
  "aria-label"?: string;
}

/**
 * MultiSelect — a searchable multi-select. Selected values appear as removable
 * chips; type to filter, ↑/↓ to move, Enter to toggle, Backspace (on an empty
 * query) removes the last chip, Escape closes. Wired as a combobox over an
 * aria-multiselectable listbox; closes on outside click.
 */
export function MultiSelect({
  options,
  defaultValue = [],
  placeholder = "Select…",
  onChange,
  className,
  ...aria
}: MultiSelectProps) {
  const id = useId();
  const rootRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const [selected, setSelected] = useState<string[]>(defaultValue);
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);

  const filtered = options.filter((o) =>
    o.toLowerCase().includes(query.toLowerCase()),
  );

  useEffect(() => {
    if (!open) return;
    const onDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [open]);

  // Keep the active option scrolled into view.
  useEffect(() => {
    if (!open) return;
    listRef.current
      ?.querySelector(`#${CSS.escape(`${id}-opt-${active}`)}`)
      ?.scrollIntoView({ block: "nearest" });
  }, [open, active, id]);

  const emit = (next: string[]) => {
    setSelected(next);
    onChange?.(next);
  };
  const toggle = (value: string) => {
    emit(
      selected.includes(value)
        ? selected.filter((v) => v !== value)
        : [...selected, value],
    );
    setQuery("");
  };
  const remove = (value: string) => emit(selected.filter((v) => v !== value));

  const onKeyDown = (e: KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      if (!open) {
        setOpen(true);
        return;
      }
      setActive((a) => Math.min(a + 1, filtered.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((a) => Math.max(a - 1, 0));
    } else if (e.key === "Enter") {
      e.preventDefault();
      if (open && filtered[active]) toggle(filtered[active]);
      else setOpen(true);
    } else if (e.key === "Escape") {
      setOpen(false);
    } else if (e.key === "Backspace" && query === "" && selected.length) {
      remove(selected[selected.length - 1]);
    }
  };

  return (
    <div ref={rootRef} className={cn("relative w-72", className)}>
      <div className="flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-lg border border-border bg-surface px-2 py-1.5 focus-within:border-brand focus-within:ring-2 focus-within:ring-brand/40">
        {selected.map((v) => (
          <span
            key={v}
            className="inline-flex items-center gap-1 rounded-md bg-brand/15 py-0.5 pl-2 pr-1 text-xs font-medium text-brand-ink"
          >
            {v}
            <button
              type="button"
              aria-label={`Remove ${v}`}
              onClick={() => remove(v)}
              className="grid size-4 place-items-center rounded outline-none transition-colors hover:bg-brand/25 focus-visible:ring-2 focus-visible:ring-brand/50"
            >
              <X className="size-3" />
            </button>
          </span>
        ))}
        <input
          ref={inputRef}
          role="combobox"
          aria-expanded={open}
          aria-controls={`${id}-list`}
          aria-autocomplete="list"
          aria-activedescendant={
            open && filtered[active] ? `${id}-opt-${active}` : undefined
          }
          aria-label={aria["aria-label"]}
          value={query}
          placeholder={selected.length ? "" : placeholder}
          onChange={(e) => {
            setQuery(e.target.value);
            setActive(0);
            setOpen(true);
          }}
          onFocus={() => setOpen(true)}
          onKeyDown={onKeyDown}
          className="min-w-16 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-2"
        />
        <ChevronsUpDown className="ml-auto size-4 shrink-0 text-muted" />
      </div>
      {open && (
        <ul
          ref={listRef}
          id={`${id}-list`}
          role="listbox"
          aria-multiselectable="true"
          aria-label={aria["aria-label"]}
          className="absolute z-50 mt-1 max-h-56 w-full overflow-auto rounded-lg border border-border bg-surface p-1 shadow-xl"
        >
          {filtered.length === 0 ? (
            <li className="px-3 py-2 text-sm text-muted">No matches</li>
          ) : (
            filtered.map((option, i) => {
              const isSel = selected.includes(option);
              return (
                <li
                  key={option}
                  id={`${id}-opt-${i}`}
                  role="option"
                  aria-selected={isSel}
                  onMouseDown={(e) => {
                    e.preventDefault();
                    toggle(option);
                  }}
                  onMouseMove={() => setActive(i)}
                  className={cn(
                    "flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm",
                    i === active && "bg-brand/15",
                  )}
                >
                  <span
                    className={cn(
                      "grid size-4 shrink-0 place-items-center rounded border",
                      isSel
                        ? "border-brand bg-brand text-white"
                        : "border-border-strong",
                    )}
                  >
                    {isSel && <Check className="size-3" strokeWidth={3} />}
                  </span>
                  {option}
                </li>
              );
            })
          )}
        </ul>
      )}
    </div>
  );
}
```

### Time Picker
Pick an hour, minute, and AM/PM with spinbutton segments.
URL: https://dev.ononc.com/ui
Path: src/components/ui/time-picker.tsx

```tsx
"use client";

import { type KeyboardEvent } from "react";
import { useState } from "react";
import { ChevronDown, ChevronUp, Clock } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TimeValue {
  hour: number; // 1–12
  minute: number; // 0–59
  period: "AM" | "PM";
}

export interface TimePickerProps {
  defaultValue?: TimeValue;
  onChange?: (value: TimeValue) => void;
  minuteStep?: number;
  className?: string;
}

const pad = (n: number) => n.toString().padStart(2, "0");

function Segment({
  label,
  display,
  valueNow,
  valueText,
  min,
  max,
  onStep,
}: {
  label: string;
  display: string;
  valueNow: number;
  valueText: string;
  min: number;
  max: number;
  onStep: (dir: 1 | -1) => void;
}) {
  const onKeyDown = (e: KeyboardEvent) => {
    if (e.key === "ArrowUp") {
      e.preventDefault();
      onStep(1);
    } else if (e.key === "ArrowDown") {
      e.preventDefault();
      onStep(-1);
    }
  };
  const chevron =
    "grid h-5 w-9 place-items-center rounded text-muted transition-colors hover:bg-background hover:text-foreground";
  return (
    <div className="flex flex-col items-center gap-0.5">
      <button type="button" tabIndex={-1} aria-hidden onClick={() => onStep(1)} className={chevron}>
        <ChevronUp className="size-4" />
      </button>
      <div
        role="spinbutton"
        tabIndex={0}
        aria-label={label}
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={valueNow}
        aria-valuetext={valueText}
        onKeyDown={onKeyDown}
        className="grid w-9 place-items-center rounded-lg bg-surface-2 py-1.5 text-lg font-semibold tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-brand/50"
      >
        {display}
      </div>
      <button type="button" tabIndex={-1} aria-hidden onClick={() => onStep(-1)} className={chevron}>
        <ChevronDown className="size-4" />
      </button>
    </div>
  );
}

/**
 * TimePicker — choose an hour, minute and AM/PM. Each segment is a spinbutton:
 * focus it and use ↑/↓ (values wrap), or click the chevrons. The AM/PM toggle is
 * a button. Controlled output via onChange.
 */
export function TimePicker({
  defaultValue = { hour: 9, minute: 0, period: "AM" },
  onChange,
  minuteStep = 5,
  className,
}: TimePickerProps) {
  const [value, setValue] = useState<TimeValue>(defaultValue);

  const update = (next: TimeValue) => {
    setValue(next);
    onChange?.(next);
  };

  const stepHour = (dir: 1 | -1) => {
    let hour = value.hour + dir;
    if (hour > 12) hour = 1;
    if (hour < 1) hour = 12;
    update({ ...value, hour });
  };
  const stepMinute = (dir: 1 | -1) => {
    const minute = (((value.minute + dir * minuteStep) % 60) + 60) % 60;
    update({ ...value, minute });
  };
  const togglePeriod = () =>
    update({ ...value, period: value.period === "AM" ? "PM" : "AM" });

  return (
    <div
      className={cn(
        "inline-flex items-center gap-2 rounded-xl border border-border bg-surface p-2",
        className,
      )}
    >
      <Clock className="ml-1 size-4 shrink-0 text-muted" />
      <Segment
        label="Hour"
        display={pad(value.hour)}
        valueNow={value.hour}
        valueText={`${value.hour} o'clock`}
        min={1}
        max={12}
        onStep={stepHour}
      />
      <span className="text-lg font-semibold text-muted-2">:</span>
      <Segment
        label="Minute"
        display={pad(value.minute)}
        valueNow={value.minute}
        valueText={`${value.minute} minutes`}
        min={0}
        max={59}
        onStep={stepMinute}
      />
      <button
        type="button"
        aria-label={`Period, currently ${value.period}. Activate to toggle.`}
        onClick={togglePeriod}
        className="ml-1 rounded-lg border border-border px-3 py-2 text-sm font-semibold text-foreground outline-none transition-colors hover:bg-background focus-visible:ring-2 focus-visible:ring-brand/50"
      >
        {value.period}
      </button>
    </div>
  );
}
```

### Chroma Card
3D tilt card with a hue-shifting holographic sheen and chromatic fringing.
URL: https://dev.ononc.com/ui/chroma-card
Path: src/components/ui/chroma-card.tsx

```tsx
"use client";

import type { CSSProperties, HTMLAttributes, PointerEvent, ReactNode } from "react";
import { useEffect, useRef } from "react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface ChromaCardProps extends HTMLAttributes<HTMLDivElement> {
  /** Max tilt toward the pointer, in degrees. */
  tilt?: number;
  /** Scale applied while hovered. */
  scale?: number;
  /** Chromatic red/cyan fringe offset on hover, in pixels. */
  rgbShift?: number;
  /** Holographic sheen strength (0–1). */
  sheen?: number;
  /** How far the sheen hue travels with the pointer, in degrees. */
  hueRange?: number;
  /** Corner radius in pixels. */
  radius?: number;
  /** Pointer-tracking specular highlight. */
  glare?: boolean;
  /** Soft colored drop glow beneath the card while hovered. */
  glow?: boolean;
  /** Glow color (any CSS color). */
  glowColor?: string;
  /** Settle transition when the pointer enters/leaves, in seconds. */
  duration?: number;
  children: ReactNode;
}

/**
 * ChromaCard — a pointer-tracked 3D card with a hue-shifting holographic
 * sheen, chromatic red/cyan edge fringing and a specular glare. All motion is
 * written to CSS variables on pointer move so hovering never re-renders, and
 * tilt/scale are skipped entirely for reduced-motion users.
 */
export function ChromaCard({
  className,
  tilt = 10,
  scale = 1.03,
  rgbShift = 5,
  sheen = 0.55,
  hueRange = 220,
  radius = 20,
  glare = true,
  glow = true,
  glowColor = "var(--brand)",
  duration = 0.5,
  children,
  style,
  ...props
}: ChromaCardProps) {
  const ref = useRef<HTMLDivElement>(null);
  const settleTimer = useRef<number | null>(null);

  useEffect(
    () => () => {
      if (settleTimer.current) window.clearTimeout(settleTimer.current);
    },
    [],
  );

  const setVars = (el: HTMLDivElement, px: number, py: number) => {
    el.style.setProperty("--rx", `${(0.5 - py) * 2 * tilt}deg`);
    el.style.setProperty("--ry", `${(px - 0.5) * 2 * tilt}deg`);
    el.style.setProperty("--mx", `${px * 100}%`);
    el.style.setProperty("--my", `${py * 100}%`);
    el.style.setProperty("--hue", `${(px - 0.5) * hueRange}deg`);
  };

  const handleEnter = () => {
    const el = ref.current;
    if (!el || prefersReducedMotion()) return;
    el.style.setProperty("--s", String(scale));
    // Ease into the first pointer position, then track 1:1.
    el.style.transitionDuration = `${duration}s`;
    if (settleTimer.current) window.clearTimeout(settleTimer.current);
    settleTimer.current = window.setTimeout(() => {
      el.style.transitionDuration = "0s";
    }, duration * 1000);
  };

  const handleMove = (e: PointerEvent<HTMLDivElement>) => {
    const el = ref.current;
    if (!el || prefersReducedMotion()) return;
    const rect = el.getBoundingClientRect();
    setVars(
      el,
      (e.clientX - rect.left) / rect.width,
      (e.clientY - rect.top) / rect.height,
    );
  };

  const handleLeave = () => {
    const el = ref.current;
    if (!el) return;
    if (settleTimer.current) window.clearTimeout(settleTimer.current);
    el.style.transitionDuration = `${duration}s`;
    el.style.setProperty("--s", "1");
    setVars(el, 0.5, 0.5);
  };

  const layerDuration = { transitionDuration: `${duration}s` };

  return (
    <div className="[perspective:900px]">
      <div
        ref={ref}
        onPointerEnter={handleEnter}
        onPointerMove={handleMove}
        onPointerLeave={handleLeave}
        className={cn(
          "group relative border border-border bg-surface transition-transform ease-out will-change-transform",
          "[transform:rotateX(var(--rx,0deg))_rotateY(var(--ry,0deg))_scale(var(--s,1))]",
          className,
        )}
        style={
          {
            borderRadius: radius,
            transformStyle: "preserve-3d",
            ...style,
          } as CSSProperties
        }
        {...props}
      >
        {glow && (
          <div
            aria-hidden
            className="pointer-events-none absolute -inset-2 -z-10 rounded-[inherit] opacity-0 blur-2xl transition-opacity group-hover:opacity-40"
            style={{ background: glowColor, ...layerDuration }}
          />
        )}
        {/* Chromatic fringe: red / cyan rings pulled apart while hovered. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-[rgba(255,60,60,0.55)] opacity-0 mix-blend-screen transition-[opacity,transform] group-hover:opacity-100"
          style={{
            transform: `translate(${-rgbShift}px, ${-rgbShift / 2}px)`,
            ...layerDuration,
          }}
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-[rgba(60,200,255,0.55)] opacity-0 mix-blend-screen transition-[opacity,transform] group-hover:opacity-100"
          style={{
            transform: `translate(${rgbShift}px, ${rgbShift / 2}px)`,
            ...layerDuration,
          }}
        />
        {/* Holographic sheen, hue-rotated by pointer position. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] opacity-0 transition-opacity group-hover:opacity-100"
          style={layerDuration}
        >
          <div
            className="absolute inset-0"
            style={{
              opacity: sheen,
              background:
                "linear-gradient(115deg, transparent 20%, rgba(255,0,132,0.30) 36%, rgba(0,229,255,0.30) 50%, rgba(124,255,0,0.24) 64%, transparent 80%)",
              backgroundPosition: "var(--mx, 50%) var(--my, 50%)",
              backgroundSize: "220% 220%",
              filter: "hue-rotate(var(--hue, 0deg)) saturate(1.4)",
              mixBlendMode: "color-dodge",
            }}
          />
        </div>
        {glare && (
          <div
            aria-hidden
            className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity group-hover:opacity-100"
            style={{
              background:
                "radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.28), transparent 65%)",
              ...layerDuration,
            }}
          />
        )}
        <div className="relative" style={{ transform: "translateZ(24px)" }}>
          {children}
        </div>
      </div>
    </div>
  );
}
```

### Device Mockup
CSS-only phone, tablet and browser frames for screenshots.
URL: https://dev.ononc.com/ui/device-mockup
Path: src/components/ui/device-mockup.tsx

```tsx
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export type DeviceVariant = "phone" | "browser" | "tablet";
export type DeviceFrame = "graphite" | "silver" | "midnight";
export type PhoneNotch = "island" | "notch" | "none";

export interface DeviceMockupProps {
  /** Which device chrome to draw. */
  variant?: DeviceVariant;
  /** Hardware finish of the frame. */
  frame?: DeviceFrame;
  /** Camera cutout style (phone only). */
  notch?: PhoneNotch;
  /** Address-bar text (browser only). */
  url?: string;
  /** Frame width in pixels; height follows the device's aspect ratio. */
  width?: number;
  /** Soft drop shadow beneath the device. */
  shadow?: boolean;
  /** Diagonal glass reflection across the screen. */
  glare?: boolean;
  /** Screen content; a neutral placeholder renders when omitted. */
  children?: ReactNode;
  className?: string;
}

/** Hardware finishes: bezel / edge highlight / screen backdrop. */
const FINISH: Record<DeviceFrame, { bezel: string; edge: string; screen: string }> = {
  graphite: { bezel: "#3a3d46", edge: "#61646e", screen: "#101218" },
  silver: { bezel: "#d7dae2", edge: "#f4f6fa", screen: "#14161d" },
  midnight: { bezel: "#171923", edge: "#3c4051", screen: "#0b0d14" },
};

function PlaceholderScreen() {
  return (
    <div
      aria-hidden
      className="flex h-full w-full flex-col justify-end gap-2 bg-gradient-to-br from-brand via-brand-2 to-brand-3 p-4"
    >
      <div className="h-2 w-1/2 rounded-full bg-white/70" />
      <div className="h-2 w-1/3 rounded-full bg-white/40" />
    </div>
  );
}

function Glare() {
  return (
    <div
      aria-hidden
      className="pointer-events-none absolute inset-0 z-10"
      style={{
        background:
          "linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.04) 56%, transparent 62%)",
      }}
    />
  );
}

/**
 * DeviceMockup — presentational phone, tablet and browser frames drawn in
 * pure CSS, for showcasing screenshots and live UI. The chrome is decorative
 * (hidden from assistive tech); only your screen content is exposed.
 */
export function DeviceMockup({
  variant = "phone",
  frame = "graphite",
  notch = "island",
  url = "ononc.dev",
  width,
  shadow = true,
  glare = false,
  children,
  className,
}: DeviceMockupProps) {
  const finish = FINISH[frame];
  const screen = children ?? <PlaceholderScreen />;
  const shadowStyle = shadow
    ? { boxShadow: "0 30px 60px -18px rgba(8, 10, 20, 0.5)" }
    : undefined;

  if (variant === "browser") {
    return (
      <figure
        aria-label="Browser window mockup"
        className={cn("m-0", className)}
        style={{ width: width ?? 480 }}
      >
        <div
          className="overflow-hidden rounded-xl border"
          style={{ borderColor: finish.edge, background: finish.bezel, ...shadowStyle }}
        >
          <div aria-hidden className="flex items-center gap-2 px-3.5 py-2.5">
            <span className="size-2.5 rounded-full bg-[#ff5f57]" />
            <span className="size-2.5 rounded-full bg-[#febc2e]" />
            <span className="size-2.5 rounded-full bg-[#28c840]" />
            <span
              className="ml-3 flex-1 truncate rounded-md px-3 py-1 text-center font-mono text-[11px]"
              style={{ background: finish.screen, color: "rgba(255,255,255,0.55)" }}
            >
              {url}
            </span>
          </div>
          <div
            className="relative aspect-[16/10] overflow-hidden"
            style={{ background: finish.screen }}
          >
            {glare && <Glare />}
            {screen}
          </div>
        </div>
      </figure>
    );
  }

  const isPhone = variant === "phone";
  return (
    <figure
      aria-label={isPhone ? "Phone mockup" : "Tablet mockup"}
      className={cn("m-0", className)}
      style={{ width: width ?? (isPhone ? 240 : 380) }}
    >
      <div
        className={cn("relative border-4", isPhone ? "rounded-[2.6rem]" : "rounded-[1.9rem]")}
        style={{
          borderColor: finish.bezel,
          background: finish.bezel,
          boxShadow: `inset 0 0 0 2px ${finish.edge}${shadow ? ", 0 30px 60px -18px rgba(8, 10, 20, 0.5)" : ""}`,
        }}
      >
        {/* Side buttons */}
        <span
          aria-hidden
          className="absolute -left-[6px] top-[22%] h-10 w-[3px] rounded-l"
          style={{ background: finish.edge }}
        />
        <span
          aria-hidden
          className="absolute -right-[6px] top-[30%] h-14 w-[3px] rounded-r"
          style={{ background: finish.edge }}
        />
        <div
          className={cn(
            "relative overflow-hidden",
            isPhone ? "aspect-[9/19] rounded-[2.2rem]" : "aspect-[3/4] rounded-[1.5rem]",
          )}
          style={{ background: finish.screen }}
        >
          {isPhone && notch !== "none" && (
            <span
              aria-hidden
              className={cn(
                "absolute left-1/2 z-20 -translate-x-1/2 bg-black",
                notch === "island"
                  ? "top-2.5 h-[18px] w-[36%] rounded-full"
                  : "top-0 h-[22px] w-[52%] rounded-b-2xl",
              )}
            />
          )}
          {glare && <Glare />}
          <div className="absolute inset-0">{screen}</div>
          <span
            aria-hidden
            className="absolute bottom-1.5 left-1/2 z-20 h-1 w-1/3 -translate-x-1/2 rounded-full bg-white/40"
          />
        </div>
      </div>
    </figure>
  );
}
```

### Infinite Gallery
A drag-and-throw tile wall that wraps forever and drifts while idle.
URL: https://dev.ononc.com/ui/infinite-gallery
Path: src/components/ui/infinite-gallery.tsx

```tsx
"use client";

import type { KeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react";
import { useEffect, useRef, useState } from "react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface InfiniteGalleryProps {
  /** Tile faces, cycled across the wall. Defaults to a built-in gradient set. */
  items?: ReactNode[];
  /** Tile size in pixels. */
  tileWidth?: number;
  tileHeight?: number;
  /** Gap between tiles in pixels. */
  gap?: number;
  /** Base grid shape; the wall tiles it infinitely in both directions. */
  cols?: number;
  rows?: number;
  /** Idle drift speed in px/s (0 disables). */
  speed?: number;
  /** Idle drift direction in degrees (0 = right, 90 = down). */
  angle?: number;
  /** Inertia decay per frame after release (0–0.99). */
  friction?: number;
  /** Tile corner radius in pixels. */
  radius?: number;
  /** Scale tiles up slightly on hover. */
  hoverLift?: boolean;
  /** Accessible name for the pannable region. */
  label?: string;
  className?: string;
}

const DEFAULT_TILES = [
  "linear-gradient(135deg, #7c3aed, #4f46e5)",
  "linear-gradient(135deg, #0ea5e9, #22d3ee)",
  "linear-gradient(135deg, #f43f5e, #fb923c)",
  "linear-gradient(135deg, #10b981, #84cc16)",
  "linear-gradient(135deg, #f59e0b, #ef4444)",
  "linear-gradient(135deg, #06b6d4, #8b5cf6)",
  "linear-gradient(135deg, #ec4899, #a855f7)",
  "linear-gradient(135deg, #14b8a6, #0ea5e9)",
  "linear-gradient(135deg, #6366f1, #ec4899)",
  "linear-gradient(135deg, #84cc16, #14b8a6)",
  "linear-gradient(135deg, #fb7185, #7c3aed)",
  "linear-gradient(135deg, #22d3ee, #10b981)",
].map((background, i) => (
  <div
    key={i}
    className="flex h-full w-full items-end p-3"
    style={{ background }}
  >
    <span className="rounded-full bg-black/30 px-2 py-0.5 font-mono text-[10px] text-white/90">
      {String(i + 1).padStart(2, "0")}
    </span>
  </div>
));

/**
 * InfiniteGallery — a wall of tiles you can grab and throw in any direction;
 * it wraps seamlessly forever and drifts slowly while idle. Also pannable
 * with the arrow keys. Position is written to a transform inside rAF, so
 * panning never re-renders; drift and inertia are disabled for
 * reduced-motion users.
 */
export function InfiniteGallery({
  items = DEFAULT_TILES,
  tileWidth = 168,
  tileHeight = 112,
  gap = 12,
  cols = 4,
  rows = 3,
  speed = 24,
  angle = 135,
  friction = 0.92,
  radius = 14,
  hoverLift = true,
  label = "Infinite gallery",
  className,
}: InfiniteGalleryProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const planeRef = useRef<HTMLDivElement>(null);
  const [copies, setCopies] = useState({ x: 2, y: 2 });

  const blockW = cols * (tileWidth + gap);
  const blockH = rows * (tileHeight + gap);

  const sim = useRef({
    x: 0,
    y: 0,
    tx: 0,
    ty: 0,
    vx: 0,
    vy: 0,
    dragging: false,
    lastX: 0,
    lastY: 0,
  });

  // Enough block copies that the wall always overflows the container.
  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const measure = () =>
      setCopies({
        x: Math.max(2, Math.ceil(el.clientWidth / blockW) + 1),
        y: Math.max(2, Math.ceil(el.clientHeight / blockH) + 1),
      });
    const ro = new ResizeObserver(measure);
    ro.observe(el);
    return () => ro.disconnect();
  }, [blockW, blockH]);

  useEffect(() => {
    const container = containerRef.current;
    const plane = planeRef.current;
    if (!container || !plane) return;

    const reduce = prefersReducedMotion();
    const rad = (angle * Math.PI) / 180;
    let raf = 0;
    let running = false;
    let last = 0;

    const apply = () => {
      const s = sim.current;
      const wx = ((s.x % blockW) - blockW) % blockW;
      const wy = ((s.y % blockH) - blockH) % blockH;
      plane.style.transform = `translate3d(${wx}px, ${wy}px, 0)`;
    };

    const loop = (now: number) => {
      if (!running) return;
      const dt = last ? Math.min(0.05, (now - last) / 1000) : 0;
      last = now;
      const s = sim.current;

      if (!s.dragging) {
        if (!reduce && speed > 0) {
          s.tx += Math.cos(rad) * speed * dt;
          s.ty += Math.sin(rad) * speed * dt;
        }
        if (!reduce && (Math.abs(s.vx) > 0.1 || Math.abs(s.vy) > 0.1)) {
          s.tx += s.vx;
          s.ty += s.vy;
          s.vx *= friction;
          s.vy *= friction;
        }
      }

      const ease = reduce || s.dragging ? 1 : 0.16;
      s.x += (s.tx - s.x) * ease;
      s.y += (s.ty - s.y) * ease;
      apply();
      raf = requestAnimationFrame(loop);
    };

    const start = () => {
      if (running) return;
      running = true;
      last = 0;
      raf = requestAnimationFrame(loop);
    };
    const stop = () => {
      running = false;
      cancelAnimationFrame(raf);
    };

    const io = new IntersectionObserver(
      (entries) => {
        if ((entries[0]?.isIntersecting ?? false) && !document.hidden) start();
        else stop();
      },
      { threshold: 0.05 },
    );
    io.observe(container);

    const onVisibility = () => {
      if (document.hidden) stop();
      else start();
    };
    document.addEventListener("visibilitychange", onVisibility);

    apply();
    return () => {
      stop();
      io.disconnect();
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, [blockW, blockH, speed, angle, friction]);

  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
    const s = sim.current;
    s.dragging = true;
    s.vx = 0;
    s.vy = 0;
    s.lastX = e.clientX;
    s.lastY = e.clientY;
    e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
    const s = sim.current;
    if (!s.dragging) return;
    const dx = e.clientX - s.lastX;
    const dy = e.clientY - s.lastY;
    s.lastX = e.clientX;
    s.lastY = e.clientY;
    s.tx += dx;
    s.ty += dy;
    s.vx = dx;
    s.vy = dy;
  };
  const endDrag = (e: ReactPointerEvent<HTMLDivElement>) => {
    sim.current.dragging = false;
    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
      e.currentTarget.releasePointerCapture(e.pointerId);
    }
  };

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    const s = sim.current;
    const stepX = tileWidth + gap;
    const stepY = tileHeight + gap;
    if (e.key === "ArrowLeft") s.tx += stepX;
    else if (e.key === "ArrowRight") s.tx -= stepX;
    else if (e.key === "ArrowUp") s.ty += stepY;
    else if (e.key === "ArrowDown") s.ty -= stepY;
    else return;
    e.preventDefault();
  };

  const totalCols = cols * copies.x;
  const totalRows = rows * copies.y;
  const tiles = [];
  for (let r = 0; r < totalRows; r++) {
    for (let c = 0; c < totalCols; c++) {
      const index = ((r % rows) * cols + (c % cols)) % items.length;
      tiles.push(
        <div
          key={`${r}-${c}`}
          className={cn(
            "overflow-hidden border border-white/10",
            hoverLift &&
              "transition-transform duration-300 hover:scale-[1.04] motion-reduce:hover:scale-100",
          )}
          style={{ width: tileWidth, height: tileHeight, borderRadius: radius }}
        >
          {items[index]}
        </div>,
      );
    }
  }

  return (
    <div
      ref={containerRef}
      role="region"
      aria-label={label}
      tabIndex={0}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={endDrag}
      onPointerCancel={endDrag}
      onKeyDown={onKeyDown}
      className={cn(
        "relative h-full w-full cursor-grab touch-none select-none overflow-hidden outline-none active:cursor-grabbing",
        "focus-visible:ring-2 focus-visible:ring-brand/60",
        className,
      )}
    >
      <span className="sr-only">
        Drag with the pointer or pan with the arrow keys.
      </span>
      <div
        ref={planeRef}
        aria-hidden
        className="absolute left-0 top-0 grid will-change-transform"
        style={{
          gap,
          gridTemplateColumns: `repeat(${totalCols}, ${tileWidth}px)`,
        }}
      >
        {tiles}
      </div>
    </div>
  );
}
```

### Smooth Cursor
Scoped dot-and-ring cursor that eases behind the pointer and grows over targets.
URL: https://dev.ononc.com/ui/smooth-cursor
Path: src/components/ui/smooth-cursor.tsx

```tsx
"use client";

import type { PointerEvent as ReactPointerEvent, ReactNode } from "react";
import { useEffect, useRef } from "react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export type SmoothCursorVariant = "both" | "ring" | "dot";

export interface SmoothCursorProps {
  /** Which cursor parts to draw. */
  variant?: SmoothCursorVariant;
  /** Ring diameter in pixels. */
  size?: number;
  /** Dot diameter in pixels. */
  dotSize?: number;
  /** Ring follow smoothing (0.02 = floaty, 0.4 = tight). */
  smooth?: number;
  /** Number of ghost dots trailing the cursor (0 disables). */
  trail?: number;
  /** Ring growth multiplier over links, buttons and [data-cursor-hover]. */
  growScale?: number;
  /** Blend the cursor with what's underneath (mix-blend-difference). */
  blend?: boolean;
  /** Cursor color (any CSS color). */
  color?: string;
  /** Hide the native cursor inside the area. */
  hideNative?: boolean;
  /** The hover area the cursor lives in. */
  children: ReactNode;
  className?: string;
}

/**
 * SmoothCursor — a custom dot + ring cursor scoped to its container: the dot
 * sticks to the pointer while the ring eases behind it, growing over
 * interactive targets and shrinking while pressed. Optional ghost trail.
 * Everything is driven by direct style writes inside one rAF loop (no
 * re-renders); reduced-motion users get a snap follow with no trail.
 */
export function SmoothCursor({
  variant = "both",
  size = 34,
  dotSize = 6,
  smooth = 0.14,
  trail = 0,
  growScale = 1.8,
  blend = false,
  color = "var(--brand)",
  hideNative = true,
  children,
  className,
}: SmoothCursorProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const ringRef = useRef<HTMLDivElement>(null);
  const dotRef = useRef<HTMLDivElement>(null);
  const trailRefs = useRef<(HTMLDivElement | null)[]>([]);
  const sim = useRef({
    x: 0,
    y: 0,
    ringX: 0,
    ringY: 0,
    scale: 1,
    targetScale: 1,
    pressed: false,
    hovering: false,
    points: [] as { x: number; y: number }[],
    raf: 0,
    running: false,
  });

  const showRing = variant !== "dot";
  const showDot = variant !== "ring";

  useEffect(() => {
    const s = sim.current;
    return () => cancelAnimationFrame(s.raf);
  }, []);

  const loop = () => {
    const s = sim.current;
    if (!s.running) return;
    const reduce = prefersReducedMotion();
    const ease = reduce ? 1 : smooth;

    s.ringX += (s.x - s.ringX) * ease;
    s.ringY += (s.y - s.ringY) * ease;
    s.targetScale = s.pressed ? 0.8 : s.hovering ? growScale : 1;
    s.scale += (s.targetScale - s.scale) * (reduce ? 1 : 0.18);

    if (dotRef.current) {
      dotRef.current.style.transform = `translate(${s.x - dotSize / 2}px, ${s.y - dotSize / 2}px)`;
    }
    if (ringRef.current) {
      ringRef.current.style.transform = `translate(${s.ringX - size / 2}px, ${s.ringY - size / 2}px) scale(${s.scale})`;
    }

    // Ghost chain: each point eases toward the one before it.
    let px = s.x;
    let py = s.y;
    for (let i = 0; i < s.points.length; i++) {
      const p = s.points[i];
      p.x += (px - p.x) * 0.3;
      p.y += (py - p.y) * 0.3;
      const el = trailRefs.current[i];
      if (el) {
        const d = dotSize * (1 - (i + 1) / (s.points.length + 1));
        el.style.transform = `translate(${p.x - d / 2}px, ${p.y - d / 2}px)`;
        el.style.width = `${d}px`;
        el.style.height = `${d}px`;
        el.style.opacity = String(0.5 * (1 - i / s.points.length));
      }
      px = p.x;
      py = p.y;
    }

    s.raf = requestAnimationFrame(loop);
  };

  const setVisible = (visible: boolean) => {
    const el = containerRef.current;
    if (el) el.style.setProperty("--cursor-opacity", visible ? "1" : "0");
  };

  const onPointerEnter = (e: ReactPointerEvent<HTMLDivElement>) => {
    const el = containerRef.current;
    const s = sim.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    s.x = e.clientX - rect.left;
    s.y = e.clientY - rect.top;
    s.ringX = s.x;
    s.ringY = s.y;
    const ghosts = prefersReducedMotion() ? 0 : trail;
    s.points = Array.from({ length: ghosts }, () => ({ x: s.x, y: s.y }));
    setVisible(true);
    if (!s.running) {
      s.running = true;
      s.raf = requestAnimationFrame(loop);
    }
  };

  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
    const el = containerRef.current;
    const s = sim.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    s.x = e.clientX - rect.left;
    s.y = e.clientY - rect.top;
    const target = e.target as Element | null;
    s.hovering = Boolean(
      target?.closest?.("a, button, [data-cursor-hover]"),
    );
  };

  const onPointerLeave = () => {
    const s = sim.current;
    s.running = false;
    s.pressed = false;
    s.hovering = false;
    cancelAnimationFrame(s.raf);
    setVisible(false);
  };

  const ghost = (i: number) => (
    <div
      key={i}
      ref={(el) => {
        trailRefs.current[i] = el;
      }}
      className="absolute left-0 top-0 rounded-full opacity-0"
      style={{ background: color }}
    />
  );

  return (
    <div
      ref={containerRef}
      onPointerEnter={onPointerEnter}
      onPointerMove={onPointerMove}
      onPointerLeave={onPointerLeave}
      onPointerDown={() => (sim.current.pressed = true)}
      onPointerUp={() => (sim.current.pressed = false)}
      className={cn(
        "relative h-full w-full overflow-hidden",
        hideNative && "[&_*]:cursor-none cursor-none",
        className,
      )}
    >
      {children}
      <div
        aria-hidden
        className={cn(
          "pointer-events-none absolute inset-0 z-20 opacity-[var(--cursor-opacity,0)] transition-opacity duration-200",
          blend && "mix-blend-difference",
        )}
      >
        {trail > 0 && Array.from({ length: trail }, (_, i) => ghost(i))}
        {showRing && (
          <div
            ref={ringRef}
            className="absolute left-0 top-0 rounded-full border-2"
            style={{ width: size, height: size, borderColor: color }}
          />
        )}
        {showDot && (
          <div
            ref={dotRef}
            className="absolute left-0 top-0 rounded-full"
            style={{ width: dotSize, height: dotSize, background: color }}
          />
        )}
      </div>
    </div>
  );
}
```

### Preloader
Page-load curtain that counts up, holds a beat, then reveals the page.
URL: https://dev.ononc.com/ui/preloader
Path: src/components/ui/preloader.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export type PreloaderVariant = "counter" | "bar" | "dots";
export type PreloaderReveal = "up" | "down" | "split" | "fade";
export type PreloaderBackdrop = "ink" | "surface" | "brand";

export interface PreloaderProps {
  /** Simulated load time in seconds. */
  duration?: number;
  /** Progress readout style. */
  variant?: PreloaderVariant;
  /** How the curtain exits once loading completes. */
  reveal?: PreloaderReveal;
  /** Curtain surface. */
  backdrop?: PreloaderBackdrop;
  /** Accent color for the counter / bar / dots (any CSS color). */
  accent?: string;
  /** Status label announced to assistive tech. */
  label?: string;
  /** Show the numeric percentage. */
  showPercent?: boolean;
  /** Called once, when the curtain starts revealing. */
  onComplete?: () => void;
  className?: string;
}

const EXIT_S = 0.7;
const HOLD_MS = 180;

const easeInOutCubic = (t: number) =>
  t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;

const BACKDROP: Record<PreloaderBackdrop, { panel: string; text: string }> = {
  ink: { panel: "bg-[#0a0c14]", text: "text-white" },
  surface: { panel: "bg-surface", text: "text-foreground" },
  brand: {
    panel: "bg-gradient-to-br from-brand via-brand-2 to-brand-3",
    text: "text-white",
  },
};

/**
 * Preloader — a page-load curtain that counts progress up, holds a beat, then
 * reveals the page beneath (slide, split or fade). Progress is written
 * straight to the DOM inside rAF (no per-frame re-renders) and the whole
 * overlay unmounts after the exit. Reduced-motion users skip the count and
 * get a quick fade. Remount (e.g. with a `key`) to replay.
 */
export function Preloader({
  duration = 2.2,
  variant = "counter",
  reveal = "up",
  backdrop = "ink",
  accent = "var(--brand)",
  label = "Loading",
  showPercent = true,
  onComplete,
  className,
}: PreloaderProps) {
  const [phase, setPhase] = useState<"loading" | "revealing" | "hidden">(
    "loading",
  );
  // False on the server and first client paint (markup stays identical);
  // flipped in the effect, well before the reveal can start.
  const [reduceMotion, setReduceMotion] = useState(false);
  const counterRef = useRef<HTMLSpanElement>(null);
  const barRef = useRef<HTMLDivElement>(null);
  const onCompleteRef = useRef(onComplete);
  useEffect(() => {
    onCompleteRef.current = onComplete;
  });

  useEffect(() => {
    let raf = 0;
    let holdTimer = 0;
    let hideTimer = 0;
    const reduce = prefersReducedMotion();
    const total = Math.max(0.2, duration) * 1000;
    let start = 0;

    const paint = (p: number) => {
      if (counterRef.current) {
        counterRef.current.textContent = String(Math.round(p * 100));
      }
      if (barRef.current) {
        barRef.current.style.transform = `scaleX(${p})`;
      }
    };

    const finish = () => {
      paint(1);
      holdTimer = window.setTimeout(() => {
        setReduceMotion(reduce);
        setPhase("revealing");
        onCompleteRef.current?.();
        hideTimer = window.setTimeout(
          () => setPhase("hidden"),
          EXIT_S * 1000 + 60,
        );
      }, HOLD_MS);
    };

    if (reduce) {
      finish();
    } else {
      const tick = (now: number) => {
        if (!start) start = now;
        const t = Math.min(1, (now - start) / total);
        paint(easeInOutCubic(t));
        if (t < 1) raf = requestAnimationFrame(tick);
        else finish();
      };
      raf = requestAnimationFrame(tick);
    }

    return () => {
      cancelAnimationFrame(raf);
      window.clearTimeout(holdTimer);
      window.clearTimeout(hideTimer);
    };
  }, [duration]);

  if (phase === "hidden") return null;

  const revealing = phase === "revealing";
  // Reduced-motion exits fade regardless of the configured reveal.
  const fadeOnly = reveal === "fade" || reduceMotion;
  const skin = BACKDROP[backdrop];
  const panelTransition = {
    transition: `transform ${EXIT_S}s cubic-bezier(0.76, 0, 0.24, 1), opacity ${EXIT_S}s ease`,
  };
  const exitStyle = (translate: string) =>
    revealing
      ? fadeOnly
        ? { opacity: 0, ...panelTransition }
        : { transform: translate, ...panelTransition }
      : panelTransition;

  return (
    <div
      role="status"
      aria-live="polite"
      aria-busy={!revealing}
      className={cn(
        "absolute inset-0 z-30 overflow-hidden",
        skin.text,
        revealing && "pointer-events-none",
        className,
      )}
    >
      <span className="sr-only">{revealing ? "Loaded" : `${label}…`}</span>
      {reveal === "split" ? (
        <>
          <div
            aria-hidden
            className={cn("absolute inset-x-0 top-0 h-1/2", skin.panel)}
            style={exitStyle("translateY(-100%)")}
          />
          <div
            aria-hidden
            className={cn("absolute inset-x-0 bottom-0 h-1/2", skin.panel)}
            style={exitStyle("translateY(100%)")}
          />
        </>
      ) : (
        <div
          aria-hidden
          className={cn("absolute inset-0", skin.panel)}
          style={exitStyle(reveal === "down" ? "translateY(100%)" : "translateY(-100%)")}
        />
      )}

      {/* Progress readout */}
      <div
        aria-hidden
        className={cn(
          "absolute inset-0 flex flex-col items-center justify-center gap-4 transition-opacity duration-300",
          revealing && "opacity-0",
        )}
      >
        {variant === "counter" && (
          <div className="flex items-end gap-1 font-semibold tabular-nums tracking-tight">
            <span ref={counterRef} className="text-6xl" style={{ color: accent }}>
              0
            </span>
            {showPercent && <span className="pb-1.5 text-xl opacity-60">%</span>}
          </div>
        )}
        {variant === "bar" && (
          <div className="w-1/2 max-w-64">
            <div className="h-1 overflow-hidden rounded-full bg-current/15">
              <div
                ref={barRef}
                className="h-full w-full origin-left rounded-full"
                style={{ background: accent, transform: "scaleX(0)" }}
              />
            </div>
          </div>
        )}
        {variant === "dots" && (
          <div className="flex gap-2">
            {[0, 1, 2].map((i) => (
              <span
                key={i}
                className="size-2.5 animate-bounce rounded-full motion-reduce:animate-none"
                style={{ background: accent, animationDelay: `${i * 0.14}s` }}
              />
            ))}
          </div>
        )}
        <p className="text-xs font-medium uppercase tracking-[0.2em] opacity-60">
          {label}
          {variant !== "counter" && showPercent && (
            <span className="ml-2 tabular-nums">
              <span ref={counterRef}>0</span>%
            </span>
          )}
        </p>
      </div>
    </div>
  );
}
```

### Globe
Dotted canvas globe with comet connection arcs — drag to spin.
URL: https://dev.ononc.com/ui/globe
Path: src/components/ui/globe.tsx

```tsx
"use client";

import type { HTMLAttributes, PointerEvent as ReactPointerEvent } from "react";
import { useRef } from "react";
import { useCanvas } from "@/lib/use-canvas";
import { clamp, cn, seededRandom } from "@/lib/utils";

export interface GlobeProps extends HTMLAttributes<HTMLDivElement> {
  /** Number of surface dots. */
  dots?: number;
  /** Dot radius in pixels. */
  dotSize?: number;
  /** Auto-rotation speed in degrees per second. */
  speed?: number;
  /** Axial tilt in degrees. */
  tilt?: number;
  /** Dot color as "r,g,b". */
  color?: string;
  /** Arc color as "r,g,b". */
  accent?: string;
  /** Number of animated connection arcs (0 disables). */
  arcs?: number;
  /** Soft atmosphere glow and rim light. */
  atmosphere?: boolean;
  /** Allow dragging to spin the globe. */
  draggable?: boolean;
  /** Accessible description of the visual. */
  label?: string;
}

interface Vec3 {
  x: number;
  y: number;
  z: number;
}

interface GlobeState {
  points: Vec3[];
  pairs: [Vec3, Vec3, number][];
}

const TAU = Math.PI * 2;

function slerp(a: Vec3, b: Vec3, t: number): Vec3 {
  const dot = clamp(a.x * b.x + a.y * b.y + a.z * b.z, -1, 1);
  const omega = Math.acos(dot);
  if (omega < 1e-4) return a;
  const so = Math.sin(omega);
  // Antipodal endpoints: snap to the nearer end instead of dividing by ~0.
  if (so < 1e-4) return t < 0.5 ? a : b;
  const ka = Math.sin((1 - t) * omega) / so;
  const kb = Math.sin(t * omega) / so;
  return {
    x: ka * a.x + kb * b.x,
    y: ka * a.y + kb * b.y,
    z: ka * a.z + kb * b.z,
  };
}

/**
 * Globe — a dotted sphere rendered on canvas: points spread on a Fibonacci
 * lattice, auto-rotating with animated connection arcs, an atmosphere glow
 * and pointer drag to spin (with inertia). Pauses off-screen and renders a
 * single static frame under reduced motion (via the shared canvas loop).
 */
export function Globe({
  className,
  dots = 520,
  dotSize = 1.6,
  speed = 14,
  tilt = 18,
  color = "139,160,255",
  accent = "196,181,253",
  arcs = 6,
  atmosphere = true,
  draggable = true,
  label = "Rotating dotted globe",
  ...props
}: GlobeProps) {
  const view = useRef({ rotY: 0, vy: 0, dragging: false, lastX: 0 });

  const ref = useCanvas<GlobeState>({
    init: () => {
      const points: Vec3[] = [];
      const golden = Math.PI * (3 - Math.sqrt(5));
      for (let i = 0; i < dots; i++) {
        const y = 1 - (i / Math.max(1, dots - 1)) * 2;
        const r = Math.sqrt(Math.max(0, 1 - y * y));
        const theta = golden * i;
        points.push({ x: Math.cos(theta) * r, y, z: Math.sin(theta) * r });
      }
      const pairs: [Vec3, Vec3, number][] = [];
      for (let i = 0; i < arcs; i++) {
        const a = points[Math.floor(seededRandom(i * 7 + 1) * points.length)];
        const b = points[Math.floor(seededRandom(i * 13 + 5) * points.length)];
        if (a && b && a !== b) pairs.push([a, b, seededRandom(i * 3 + 2)]);
      }
      return { points, pairs };
    },
    draw: ({ ctx, width, height }, state, t, dt) => {
      ctx.clearRect(0, 0, width, height);
      const cx = width / 2;
      const cy = height / 2;
      const R = Math.min(width, height) * 0.38;

      const v = view.current;
      if (!v.dragging) {
        v.rotY += ((speed * Math.PI) / 180) * dt;
        if (Math.abs(v.vy) > 0.0002) {
          v.rotY += v.vy;
          v.vy *= 0.94;
        }
      }

      const cosY = Math.cos(v.rotY);
      const sinY = Math.sin(v.rotY);
      const tiltRad = (tilt * Math.PI) / 180;
      const cosT = Math.cos(tiltRad);
      const sinT = Math.sin(tiltRad);

      const project = (p: Vec3) => {
        const x1 = p.x * cosY + p.z * sinY;
        const z1 = -p.x * sinY + p.z * cosY;
        const y2 = p.y * cosT - z1 * sinT;
        const z2 = p.y * sinT + z1 * cosT;
        return { sx: cx + x1 * R, sy: cy + y2 * R, depth: z2 };
      };

      if (atmosphere) {
        const glow = ctx.createRadialGradient(cx, cy, R * 0.7, cx, cy, R * 1.32);
        glow.addColorStop(0, `rgba(${color},0.14)`);
        glow.addColorStop(1, "rgba(0,0,0,0)");
        ctx.fillStyle = glow;
        ctx.beginPath();
        ctx.arc(cx, cy, R * 1.32, 0, TAU);
        ctx.fill();
        ctx.strokeStyle = `rgba(${color},0.28)`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, TAU);
        ctx.stroke();
      }

      for (const p of state.points) {
        const { sx, sy, depth } = project(p);
        const facing = (depth + 1) / 2; // 0 back, 1 front
        ctx.fillStyle = `rgba(${color},${0.08 + facing * 0.72})`;
        const size = dotSize * (0.55 + facing * 0.45);
        ctx.beginPath();
        ctx.arc(sx, sy, size, 0, TAU);
        ctx.fill();
      }

      // Comet arcs: a bright window sweeps along each great-circle path.
      const SEGMENTS = 44;
      for (const [a, b, phase] of state.pairs) {
        const head = ((t * 0.22 + phase) % 1.3) - 0.15;
        const from = Math.max(0, head - 0.3);
        const to = Math.min(1, head);
        if (to <= from) continue;
        ctx.lineWidth = 1.4;
        let prev: { sx: number; sy: number; depth: number } | null = null;
        for (let i = 0; i <= SEGMENTS; i++) {
          const u = from + ((to - from) * i) / SEGMENTS;
          const raw = slerp(a, b, u);
          const lift = 1 + 0.28 * Math.sin(Math.PI * u);
          const point = project({ x: raw.x * lift, y: raw.y * lift, z: raw.z * lift });
          if (prev) {
            const fade = i / SEGMENTS; // brighter toward the head
            const facing = (Math.max(prev.depth, point.depth) + 1) / 2;
            ctx.strokeStyle = `rgba(${accent},${(0.08 + 0.55 * fade) * (0.25 + 0.75 * facing)})`;
            ctx.beginPath();
            ctx.moveTo(prev.sx, prev.sy);
            ctx.lineTo(point.sx, point.sy);
            ctx.stroke();
          }
          prev = point;
        }
        if (prev && to < 1) {
          const facing = (prev.depth + 1) / 2;
          ctx.fillStyle = `rgba(${accent},${0.3 + 0.6 * facing})`;
          ctx.beginPath();
          ctx.arc(prev.sx, prev.sy, 1.8, 0, TAU);
          ctx.fill();
        }
      }
    },
  });

  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
    if (!draggable) return;
    const v = view.current;
    v.dragging = true;
    v.vy = 0;
    v.lastX = e.clientX;
    e.currentTarget.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
    const v = view.current;
    if (!v.dragging) return;
    const dx = e.clientX - v.lastX;
    v.lastX = e.clientX;
    v.rotY += dx * 0.005;
    v.vy = dx * 0.005;
  };
  const endDrag = (e: ReactPointerEvent<HTMLDivElement>) => {
    view.current.dragging = false;
    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
      e.currentTarget.releasePointerCapture(e.pointerId);
    }
  };

  return (
    <div
      role="img"
      aria-label={label}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={endDrag}
      onPointerCancel={endDrag}
      className={cn(
        "relative overflow-hidden",
        draggable && "cursor-grab touch-none active:cursor-grabbing",
        className,
      )}
      {...props}
    >
      <canvas ref={ref} aria-hidden className="absolute inset-0 h-full w-full" />
    </div>
  );
}
```

### Swipe Deck
A draggable card deck you fling left or right, with keyboard and button controls.
URL: https://dev.ononc.com/ui/swipe-cards
Path: src/components/ui/swipe-cards.tsx

```tsx
"use client";

import { type KeyboardEvent, useState } from "react";
import { Heart, RotateCcw, X } from "lucide-react";
import {
  animate,
  motion,
  type PanInfo,
  useMotionValue,
  useTransform,
} from "motion/react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface SwipeCardItem {
  id: string | number;
  title: string;
  subtitle?: string;
  /** CSS background for the card's visual header (gradient, color, or url()). */
  background?: string;
  tags?: string[];
}

export interface SwipeCardsProps {
  /** Cards to deal, front to back. Defaults to a built-in gradient set. */
  items?: SwipeCardItem[];
  /** Recycle swiped cards to the back so the deck never empties. */
  loop?: boolean;
  /** Max tilt (deg) applied as the front card is dragged sideways. */
  swipeRotation?: number;
  /** How many cards peek behind the front one (1–3). */
  stackDepth?: number;
  /** Show the "Keep"/"Pass" stamps that fade in as you drag. */
  showStamps?: boolean;
  /** Show the circular Pass/Keep control buttons below the deck. */
  showControls?: boolean;
  /** Fires when a card leaves the deck, with the direction it went. */
  onSwipe?: (id: SwipeCardItem["id"], direction: "left" | "right") => void;
  /** Accessible name for the deck. */
  label?: string;
  className?: string;
}

const DEFAULT_ITEMS: SwipeCardItem[] = [
  { id: "aurora", title: "Aurora", subtitle: "Northern drift", background: "linear-gradient(135deg,#7c3aed,#22d3ee)", tags: ["Calm", "Gradient"] },
  { id: "ember", title: "Ember", subtitle: "Slow burn", background: "linear-gradient(135deg,#fb7185,#f59e0b)", tags: ["Warm", "Bold"] },
  { id: "tide", title: "Tide", subtitle: "Deep current", background: "linear-gradient(135deg,#0ea5e9,#10b981)", tags: ["Cool", "Fresh"] },
  { id: "nova", title: "Nova", subtitle: "Bright pulse", background: "linear-gradient(135deg,#a855f7,#ec4899)", tags: ["Vivid", "Loud"] },
  { id: "dusk", title: "Dusk", subtitle: "Last light", background: "linear-gradient(135deg,#6366f1,#0ea5e9)", tags: ["Moody", "Soft"] },
];

/** Offset (px) or velocity (px/s) past which a release counts as a throw. */
const THROW_DISTANCE = 120;
const THROW_VELOCITY = 500;
/** Where a thrown card flies to, safely offscreen. */
const EXIT_X = 640;

/**
 * SwipeCards — a draggable card deck you fling left or right. The front card
 * follows the pointer and tilts; release it past a threshold (or flick it) to
 * send it away and reveal the next, with a spring restack. Fully operable
 * without a pointer via the Pass/Keep buttons and the ← / → arrow keys, and it
 * degrades to instant transitions under reduced-motion. Only the front card is
 * interactive; the rest are inert and hidden from assistive tech.
 */
export function SwipeCards({
  items = DEFAULT_ITEMS,
  loop = true,
  swipeRotation = 18,
  stackDepth = 2,
  showStamps = true,
  showControls = true,
  onSwipe,
  label = "Swipeable card deck",
  className,
}: SwipeCardsProps) {
  const [order, setOrder] = useState<number[]>(() => items.map((_, i) => i));
  const [busy, setBusy] = useState(false);

  const x = useMotionValue(0);
  const rotate = useTransform(x, [-EXIT_X, EXIT_X], [-swipeRotation, swipeRotation]);
  const keepOpacity = useTransform(x, [24, THROW_DISTANCE], [0, 1]);
  const passOpacity = useTransform(x, [-THROW_DISTANCE, -24], [1, 0]);

  const empty = order.length === 0;

  const commit = (direction: "left" | "right") => {
    const frontId = items[order[0]].id;
    setOrder((o) => (loop ? [...o.slice(1), o[0]] : o.slice(1)));
    x.set(0);
    setBusy(false);
    onSwipe?.(frontId, direction);
  };

  const fling = (direction: "left" | "right") => {
    if (busy || empty) return;
    setBusy(true);
    if (prefersReducedMotion()) {
      commit(direction);
      return;
    }
    animate(x, direction === "right" ? EXIT_X : -EXIT_X, {
      type: "spring",
      stiffness: 260,
      damping: 28,
    }).then(() => commit(direction));
  };

  const handleDragEnd = (_: unknown, info: PanInfo) => {
    if (busy) return;
    const thrown =
      Math.abs(info.offset.x) > THROW_DISTANCE ||
      Math.abs(info.velocity.x) > THROW_VELOCITY;
    if (thrown) fling(info.offset.x > 0 ? "right" : "left");
    else animate(x, 0, { type: "spring", stiffness: 300, damping: 30 });
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key === "ArrowLeft") {
      e.preventDefault();
      fling("left");
    } else if (e.key === "ArrowRight") {
      e.preventDefault();
      fling("right");
    }
  };

  const restart = () => {
    if (busy) return;
    x.set(0);
    setOrder(items.map((_, i) => i));
  };

  // Front + `stackDepth` peeking cards + one invisible buffer for smooth entry.
  const visible = order.slice(0, stackDepth + 2);

  return (
    <div className={cn("flex flex-col items-center gap-5", className)}>
      <div
        role="group"
        aria-roledescription="Card deck"
        aria-label={label}
        tabIndex={0}
        onKeyDown={handleKeyDown}
        className="relative h-80 w-64 rounded-3xl outline-none focus-visible:ring-2 focus-visible:ring-brand/60"
      >
        <span className="sr-only">
          Drag a card sideways, or use the Left and Right arrow keys to pass or keep it.
        </span>

        {empty ? (
          <div className="absolute inset-0 grid place-items-center rounded-3xl border border-dashed border-border">
            <div className="flex flex-col items-center gap-3 text-sm text-muted">
              That&apos;s everyone.
              <button
                type="button"
                onClick={restart}
                className="inline-flex items-center gap-1.5 rounded-full border border-border-strong px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-2"
              >
                <RotateCcw className="size-3.5" />
                Restart
              </button>
            </div>
          </div>
        ) : (
          visible.map((cardIndex, depth) => {
            const item = items[cardIndex];
            const isFront = depth === 0;
            return (
              <motion.div
                key={item.id}
                aria-hidden={!isFront}
                className={cn(
                  "absolute inset-0 flex flex-col overflow-hidden rounded-3xl border border-border bg-surface shadow-xl",
                  isFront
                    ? "cursor-grab touch-none active:cursor-grabbing"
                    : "pointer-events-none",
                )}
                style={
                  isFront
                    ? { x, rotate, zIndex: stackDepth + 2 }
                    : { zIndex: stackDepth + 2 - depth }
                }
                initial={false}
                animate={{
                  scale: 1 - depth * 0.05,
                  y: depth * 16,
                  opacity: depth <= stackDepth ? 1 : 0,
                }}
                transition={
                  prefersReducedMotion()
                    ? { duration: 0 }
                    : { type: "spring", stiffness: 300, damping: 30 }
                }
                drag={isFront && !busy ? "x" : false}
                dragSnapToOrigin={false}
                onDragEnd={isFront ? handleDragEnd : undefined}
              >
                <div
                  className="h-40 w-full shrink-0"
                  style={{ background: item.background }}
                />

                {isFront && showStamps && (
                  <>
                    <motion.span
                      aria-hidden
                      style={{ opacity: keepOpacity }}
                      className="pointer-events-none absolute left-4 top-4 rounded-md border-2 border-emerald-400 px-2 py-0.5 text-sm font-bold uppercase tracking-wider text-emerald-400 [transform:rotate(-12deg)]"
                    >
                      Keep
                    </motion.span>
                    <motion.span
                      aria-hidden
                      style={{ opacity: passOpacity }}
                      className="pointer-events-none absolute right-4 top-4 rounded-md border-2 border-rose-400 px-2 py-0.5 text-sm font-bold uppercase tracking-wider text-rose-400 [transform:rotate(12deg)]"
                    >
                      Pass
                    </motion.span>
                  </>
                )}

                <div className="flex flex-1 flex-col gap-3 p-5">
                  <div>
                    <h3 className="text-lg font-semibold tracking-tight">{item.title}</h3>
                    {item.subtitle && (
                      <p className="mt-0.5 text-sm text-muted">{item.subtitle}</p>
                    )}
                  </div>
                  {item.tags && item.tags.length > 0 && (
                    <div className="mt-auto flex flex-wrap gap-1.5">
                      {item.tags.map((tag) => (
                        <span
                          key={tag}
                          className="rounded-full border border-border bg-background px-2 py-0.5 text-[11px] text-muted"
                        >
                          {tag}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              </motion.div>
            );
          })
        )}
      </div>

      {showControls && (
        <div className="flex items-center gap-4">
          <button
            type="button"
            onClick={() => fling("left")}
            disabled={empty}
            aria-label="Pass"
            className="grid size-12 place-items-center rounded-full border border-border bg-surface text-rose-400 shadow-sm transition-colors hover:border-rose-400/60 hover:bg-rose-400/10 disabled:pointer-events-none disabled:opacity-40"
          >
            <X className="size-5" />
          </button>
          <button
            type="button"
            onClick={() => fling("right")}
            disabled={empty}
            aria-label="Keep"
            className="grid size-12 place-items-center rounded-full border border-border bg-surface text-emerald-400 shadow-sm transition-colors hover:border-emerald-400/60 hover:bg-emerald-400/10 disabled:pointer-events-none disabled:opacity-40"
          >
            <Heart className="size-5" />
          </button>
        </div>
      )}
    </div>
  );
}
```

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

### Navbar
Responsive navigation that collapses to a mobile menu.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-block.tsx

```tsx
"use client";

import { useState } from "react";
import { Menu, Sparkles, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NavItem {
  label: string;
  href?: string;
}

export interface NavbarBlockProps {
  brand?: string;
  items?: NavItem[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: NavItem[] = [
  { label: "Features" },
  { label: "Pricing" },
  { label: "Docs" },
  { label: "Blog" },
];

/**
 * NavbarBlock — a responsive navigation bar that collapses to a toggle menu on
 * small screens. The toggle exposes aria-expanded.
 */
export function NavbarBlock({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  ctaLabel = "Get started",
  className,
}: NavbarBlockProps) {
  const [open, setOpen] = useState(false);

  return (
    <nav
      className={cn(
        "relative rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center justify-between px-4 py-3">
        <a href="#" className="flex items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>
        <div className="hidden items-center gap-1 md:flex">
          {items.map((item, i) => (
            <a
              key={i}
              href={item.href ?? "#"}
              className="rounded-full px-3 py-1.5 text-sm text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
        </div>
        <div className="hidden md:block">
          <button className="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90">
            {ctaLabel}
          </button>
        </div>
        <button
          type="button"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
          className="grid size-9 place-items-center rounded-lg border border-border text-foreground md:hidden"
        >
          {open ? <X className="size-5" /> : <Menu className="size-5" />}
        </button>
      </div>
      {open && (
        <div className="flex flex-col gap-1 border-t border-border px-4 py-3 md:hidden">
          {items.map((item, i) => (
            <a
              key={i}
              href={item.href ?? "#"}
              className="rounded-lg px-3 py-2 text-sm text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
          <button className="mt-2 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white">
            {ctaLabel}
          </button>
        </div>
      )}
    </nav>
  );
}
```

### Mega Menu Navbar
SaaS-grade bar with rich, categorized mega-menu dropdowns and a featured card.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-mega-menu.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  ArrowRight,
  Blocks,
  BookOpen,
  ChevronDown,
  Component,
  Gauge,
  LifeBuoy,
  Menu,
  Palette,
  Shield,
  Sparkles,
  Workflow,
  X,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface MegaLink {
  label: string;
  description: string;
  icon: ReactNode;
  href?: string;
}

export interface MegaFeatured {
  title: string;
  description: string;
  ctaLabel: string;
  href?: string;
}

export interface MegaMenu {
  links: MegaLink[];
  featured?: MegaFeatured;
}

export interface MegaNavItem {
  label: string;
  href?: string;
  menu?: MegaMenu;
}

export interface NavbarMegaMenuProps {
  brand?: string;
  items?: MegaNavItem[];
  ctaLabel?: string;
  signInLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: MegaNavItem[] = [
  {
    label: "Product",
    menu: {
      links: [
        { label: "Components", description: "35 interactive primitives", icon: <Component className="size-4" /> },
        { label: "Blocks", description: "Drop-in page sections", icon: <Blocks className="size-4" /> },
        { label: "Motion", description: "Spring & scroll effects", icon: <Zap className="size-4" /> },
        { label: "Theming", description: "Token-driven design system", icon: <Palette className="size-4" /> },
      ],
      featured: {
        title: "What's new in v1.1",
        description: "Six refined navigation blocks, built for production.",
        ctaLabel: "Read the changelog",
      },
    },
  },
  {
    label: "Solutions",
    menu: {
      links: [
        { label: "Startups", description: "Ship a polished UI fast", icon: <Zap className="size-4" /> },
        { label: "Enterprise", description: "Scale with confidence", icon: <Shield className="size-4" /> },
        { label: "Performance", description: "GPU-friendly by default", icon: <Gauge className="size-4" /> },
        { label: "Workflows", description: "Compose without friction", icon: <Workflow className="size-4" /> },
      ],
    },
  },
  {
    label: "Resources",
    menu: {
      links: [
        { label: "Documentation", description: "Guides and API reference", icon: <BookOpen className="size-4" /> },
        { label: "Support", description: "Get help from the team", icon: <LifeBuoy className="size-4" /> },
      ],
    },
  },
  { label: "Pricing", href: "#" },
];

/**
 * NavbarMegaMenu — a SaaS-grade navigation bar with rich mega-menu dropdowns.
 * Triggers open on hover-intent and on click/Enter, expose `aria-expanded`,
 * and close on Escape, outside click, or pointer-leave. On small screens the
 * bar collapses to a stacked menu that groups each section's links.
 */
export function NavbarMegaMenu({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  ctaLabel = "Get started",
  signInLabel = "Sign in",
  className,
}: NavbarMegaMenuProps) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);
  const [mobileOpen, setMobileOpen] = useState(false);
  const rootRef = useRef<HTMLElement>(null);
  const triggerRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const reduce = useReducedMotion();

  const clearClose = () => {
    if (closeTimer.current) {
      clearTimeout(closeTimer.current);
      closeTimer.current = null;
    }
  };
  const scheduleClose = () => {
    clearClose();
    closeTimer.current = setTimeout(() => setOpenIndex(null), 140);
  };

  useEffect(() => () => clearClose(), []);

  useEffect(() => {
    if (openIndex === null) return;
    const idx = openIndex;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        triggerRefs.current[idx]?.focus();
        setOpenIndex(null);
      }
    };
    const onClick = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpenIndex(null);
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("pointerdown", onClick);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("pointerdown", onClick);
    };
  }, [openIndex]);

  return (
    <nav
      ref={rootRef}
      aria-label="Primary"
      onPointerLeave={scheduleClose}
      onPointerEnter={clearClose}
      className={cn(
        "relative rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center justify-between gap-4 px-4 py-3">
        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>

        <div className="hidden items-center gap-0.5 lg:flex">
          {items.map((item, i) =>
            item.menu ? (
              <div key={item.label} onPointerEnter={() => { clearClose(); setOpenIndex(i); }}>
                <button
                  ref={(el) => {
                    triggerRefs.current[i] = el;
                  }}
                  type="button"
                  aria-expanded={openIndex === i}
                  aria-controls={`mega-panel-${i}`}
                  onClick={() => setOpenIndex((cur) => (cur === i ? null : i))}
                  className={cn(
                    "inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-sm transition-colors",
                    openIndex === i
                      ? "bg-background text-foreground"
                      : "text-muted hover:text-foreground",
                  )}
                >
                  {item.label}
                  <ChevronDown
                    className={cn(
                      "size-3.5 transition-transform duration-200",
                      openIndex === i && "rotate-180",
                    )}
                  />
                </button>
              </div>
            ) : (
              <a
                key={item.label}
                href={item.href ?? "#"}
                className="rounded-full px-3 py-1.5 text-sm text-muted transition-colors hover:text-foreground"
              >
                {item.label}
              </a>
            ),
          )}
        </div>

        <div className="hidden items-center gap-2 lg:flex">
          <a
            href="#"
            className="rounded-full px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-foreground"
          >
            {signInLabel}
          </a>
          <button className="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90">
            {ctaLabel}
          </button>
        </div>

        <button
          type="button"
          aria-label="Toggle menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((o) => !o)}
          className="grid size-9 place-items-center rounded-lg border border-border text-foreground lg:hidden"
        >
          {mobileOpen ? <X className="size-5" /> : <Menu className="size-5" />}
        </button>
      </div>

      {/* Desktop mega panel */}
      <AnimatePresence>
        {openIndex !== null && items[openIndex]?.menu && (
          <motion.div
            key={openIndex}
            id={`mega-panel-${openIndex}`}
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8 }}
            transition={{ duration: 0.16, ease: "easeOut" }}
            className="absolute left-3 right-3 top-full z-50 mt-2 hidden lg:block"
          >
            <div className="overflow-hidden rounded-2xl border border-border bg-surface p-2 shadow-2xl shadow-black/20">
              <div
                className={cn(
                  "grid gap-2",
                  items[openIndex]!.menu!.featured
                    ? "md:grid-cols-[1fr_18rem]"
                    : "md:grid-cols-1",
                )}
              >
                <ul className="grid gap-1 sm:grid-cols-2">
                  {items[openIndex]!.menu!.links.map((link) => (
                    <li key={link.label}>
                      <a
                        href={link.href ?? "#"}
                        className="group flex items-start gap-3 rounded-xl p-3 transition-colors hover:bg-background"
                      >
                        <span className="grid size-9 shrink-0 place-items-center rounded-lg border border-border bg-background text-brand-ink transition-colors group-hover:border-border-strong">
                          {link.icon}
                        </span>
                        <span className="min-w-0">
                          <span className="block text-sm font-medium text-foreground">
                            {link.label}
                          </span>
                          <span className="block truncate text-xs text-muted">
                            {link.description}
                          </span>
                        </span>
                      </a>
                    </li>
                  ))}
                </ul>

                {items[openIndex]!.menu!.featured && (
                  <a
                    href={items[openIndex]!.menu!.featured!.href ?? "#"}
                    className="group relative flex flex-col justify-between overflow-hidden rounded-xl border border-border bg-gradient-to-br from-brand/15 via-brand-2/10 to-transparent p-4"
                  >
                    <div>
                      <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/60 px-2 py-0.5 text-[11px] font-medium text-brand-ink">
                        <Sparkles className="size-3" />
                        New
                      </span>
                      <h4 className="mt-3 text-sm font-semibold text-foreground">
                        {items[openIndex]!.menu!.featured!.title}
                      </h4>
                      <p className="mt-1 text-xs text-muted">
                        {items[openIndex]!.menu!.featured!.description}
                      </p>
                    </div>
                    <span className="mt-4 inline-flex items-center gap-1 text-xs font-medium text-foreground">
                      {items[openIndex]!.menu!.featured!.ctaLabel}
                      <ArrowRight className="size-3.5 transition-transform group-hover:translate-x-0.5" />
                    </span>
                  </a>
                )}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Mobile stacked menu */}
      {mobileOpen && (
        <div className="border-t border-border px-3 py-3 lg:hidden">
          <div className="flex flex-col gap-4">
            {items.map((item) => (
              <div key={item.label}>
                {item.menu ? (
                  <>
                    <p className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-2">
                      {item.label}
                    </p>
                    <ul className="mt-1.5 flex flex-col">
                      {item.menu.links.map((link) => (
                        <li key={link.label}>
                          <a
                            href={link.href ?? "#"}
                            className="flex items-center gap-3 rounded-lg px-2 py-2 text-sm text-foreground transition-colors hover:bg-background"
                          >
                            <span className="grid size-8 shrink-0 place-items-center rounded-lg border border-border text-brand-ink">
                              {link.icon}
                            </span>
                            {link.label}
                          </a>
                        </li>
                      ))}
                    </ul>
                  </>
                ) : (
                  <a
                    href={item.href ?? "#"}
                    className="block rounded-lg px-2 py-2 text-sm font-medium text-foreground transition-colors hover:bg-background"
                  >
                    {item.label}
                  </a>
                )}
              </div>
            ))}
            <div className="flex flex-col gap-2 border-t border-border pt-3">
              <a
                href="#"
                className="rounded-full border border-border px-4 py-2 text-center text-sm font-medium text-foreground"
              >
                {signInLabel}
              </a>
              <button className="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white">
                {ctaLabel}
              </button>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}
```

### Floating Navbar
Centered glass island with a highlight that slides between links.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-floating.tsx

```tsx
"use client";

import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { ArrowRight, Menu, Sparkles, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FloatingNavItem {
  label: string;
  href?: string;
}

export interface NavbarFloatingProps {
  brand?: string;
  items?: FloatingNavItem[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: FloatingNavItem[] = [
  { label: "Home" },
  { label: "Features" },
  { label: "Docs" },
  { label: "Pricing" },
  { label: "Blog" },
];

/**
 * NavbarFloating — a centered, glass "island" navigation pill. A single
 * highlight slides between links (shared-layout `layoutId`) following hover and
 * keyboard focus, settling back on the active item. Collapses to a floating
 * panel on small screens. The slide is disabled under reduced-motion.
 */
export function NavbarFloating({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  ctaLabel = "Get started",
  className,
}: NavbarFloatingProps) {
  const [active, setActive] = useState(0);
  const [hovered, setHovered] = useState<number | null>(null);
  const [open, setOpen] = useState(false);
  const reduce = useReducedMotion();

  const highlighted = hovered ?? active;

  return (
    <div className={cn("flex justify-center px-2", className)}>
      <nav aria-label="Primary" className="w-full max-w-2xl">
        <div className="flex items-center gap-1 rounded-full border border-border bg-surface/70 p-2 shadow-xl shadow-black/10 backdrop-blur-xl">
          <a
            href="#"
            className="ml-1 flex shrink-0 items-center gap-2 pr-1 font-semibold"
          >
            <span className="grid size-8 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-white">
              <Sparkles className="size-4" />
            </span>
            <span className="hidden sm:inline">{brand}</span>
          </a>

          <div
            className="relative hidden flex-1 items-center justify-center gap-0.5 md:flex"
            onPointerLeave={() => setHovered(null)}
          >
            {items.map((item, i) => (
              <a
                key={item.label}
                href={item.href ?? "#"}
                aria-current={active === i ? "page" : undefined}
                onClick={() => setActive(i)}
                onPointerEnter={() => setHovered(i)}
                onFocus={() => setHovered(i)}
                onBlur={() => setHovered(null)}
                className={cn(
                  "relative rounded-full px-3.5 py-1.5 text-sm transition-colors",
                  highlighted === i ? "text-foreground" : "text-muted hover:text-foreground",
                )}
              >
                {highlighted === i && (
                  <motion.span
                    layoutId="floating-nav-highlight"
                    aria-hidden
                    className="absolute inset-0 -z-0 rounded-full border border-border bg-background"
                    transition={
                      reduce
                        ? { duration: 0 }
                        : { type: "spring", stiffness: 380, damping: 32 }
                    }
                  />
                )}
                <span className="relative z-10">{item.label}</span>
              </a>
            ))}
          </div>

          <button className="ml-auto hidden shrink-0 items-center gap-1.5 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90 md:inline-flex">
            {ctaLabel}
            <ArrowRight className="size-3.5" />
          </button>

          <button
            type="button"
            aria-label="Toggle menu"
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
            className="ml-auto grid size-9 shrink-0 place-items-center rounded-full border border-border text-foreground md:hidden"
          >
            {open ? <X className="size-5" /> : <Menu className="size-5" />}
          </button>
        </div>

        <AnimatePresence>
          {open && (
            <motion.div
              initial={reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
              transition={{ duration: 0.16, ease: "easeOut" }}
              className="mt-2 overflow-hidden rounded-3xl border border-border bg-surface/90 p-2 shadow-xl backdrop-blur-xl md:hidden"
            >
              {items.map((item, i) => (
                <a
                  key={item.label}
                  href={item.href ?? "#"}
                  aria-current={active === i ? "page" : undefined}
                  onClick={() => {
                    setActive(i);
                    setOpen(false);
                  }}
                  className={cn(
                    "block rounded-2xl px-4 py-2.5 text-sm transition-colors",
                    active === i
                      ? "bg-background text-foreground"
                      : "text-muted hover:bg-background hover:text-foreground",
                  )}
                >
                  {item.label}
                </a>
              ))}
              <button className="mt-1 flex w-full items-center justify-center gap-1.5 rounded-2xl bg-brand px-4 py-2.5 text-sm font-semibold text-white">
                {ctaLabel}
                <ArrowRight className="size-3.5" />
              </button>
            </motion.div>
          )}
        </AnimatePresence>
      </nav>
    </div>
  );
}
```

### Split Navbar
Editorial header with a centered wordmark, split links, and animated underlines.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-split.tsx

```tsx
"use client";

import { useState } from "react";
import { Menu, Search, Sparkles, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SplitNavItem {
  label: string;
  href?: string;
}

export interface NavbarSplitProps {
  brand?: string;
  /** Links shown to the left of the centered wordmark. */
  leftItems?: SplitNavItem[];
  /** Links shown to the right of the centered wordmark. */
  rightItems?: SplitNavItem[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_LEFT: SplitNavItem[] = [
  { label: "Collections" },
  { label: "Studio" },
  { label: "Stories" },
];
const DEFAULT_RIGHT: SplitNavItem[] = [
  { label: "About" },
  { label: "Journal" },
  { label: "Contact" },
];

function UnderlineLink({ label, href }: SplitNavItem) {
  return (
    <a
      href={href ?? "#"}
      className="group relative py-1 text-xs font-medium uppercase tracking-widest text-muted transition-colors hover:text-foreground focus-visible:text-foreground"
    >
      {label}
      <span className="absolute -bottom-0.5 left-0 h-px w-full origin-left scale-x-0 bg-gradient-to-r from-brand-ink via-brand-2 to-brand-3 transition-transform duration-300 ease-out group-hover:scale-x-100 group-focus-visible:scale-x-100" />
    </a>
  );
}

/**
 * NavbarSplit — an editorial header with the wordmark centered and navigation
 * split evenly to either side. Links carry an animated gradient underline on
 * hover and keyboard focus. Collapses to a centered brand with a toggle menu.
 */
export function NavbarSplit({
  brand = "ONONC",
  leftItems = DEFAULT_LEFT,
  rightItems = DEFAULT_RIGHT,
  ctaLabel = "Get started",
  className,
}: NavbarSplitProps) {
  const [open, setOpen] = useState(false);
  const allItems = [...leftItems, ...rightItems];

  return (
    <nav
      aria-label="Primary"
      className={cn(
        "rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      {/* Desktop: three balanced columns */}
      <div className="hidden items-center px-6 py-4 lg:grid lg:grid-cols-3">
        <div className="flex items-center gap-6">
          {leftItems.map((item) => (
            <UnderlineLink key={item.label} {...item} />
          ))}
        </div>

        <a
          href="#"
          className="flex items-center justify-center gap-2 justify-self-center text-base font-semibold tracking-tight"
        >
          <span className="grid size-7 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>

        <div className="flex items-center justify-end gap-6">
          {rightItems.map((item) => (
            <UnderlineLink key={item.label} {...item} />
          ))}
          <div className="flex items-center gap-2 border-l border-border pl-5">
            <button
              type="button"
              aria-label="Search"
              className="grid size-9 place-items-center rounded-full text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              <Search className="size-4" />
            </button>
            <button className="rounded-full border border-border px-4 py-2 text-xs font-semibold uppercase tracking-widest text-foreground transition-colors hover:bg-background">
              {ctaLabel}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile: centered brand + toggle */}
      <div className="flex items-center justify-between px-4 py-3 lg:hidden">
        <button
          type="button"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
          className="grid size-9 place-items-center rounded-lg border border-border text-foreground"
        >
          {open ? <X className="size-5" /> : <Menu className="size-5" />}
        </button>
        <a href="#" className="flex items-center gap-2 font-semibold tracking-tight">
          <span className="grid size-7 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>
        <button
          type="button"
          aria-label="Search"
          className="grid size-9 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
        >
          <Search className="size-4" />
        </button>
      </div>

      {open && (
        <div className="flex flex-col gap-1 border-t border-border px-4 py-3 lg:hidden">
          {allItems.map((item) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              className="rounded-lg px-3 py-2 text-sm uppercase tracking-widest text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
          <button className="mt-2 rounded-full border border-border px-4 py-2 text-xs font-semibold uppercase tracking-widest text-foreground">
            {ctaLabel}
          </button>
        </div>
      )}
    </nav>
  );
}
```

### App Navbar
Product top bar with workspace switcher, search, notifications, and avatar menu.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-app.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import {
  Bell,
  Check,
  ChevronDown,
  CreditCard,
  LogOut,
  Menu,
  Plus,
  Search,
  Settings,
  Sparkles,
  User,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppMenuItem {
  label: string;
  icon?: ReactNode;
  onSelect?: () => void;
  danger?: boolean;
  selected?: boolean;
  separatorBefore?: boolean;
}

interface MenuProps {
  triggerContent: ReactNode;
  triggerClassName?: string;
  triggerLabel: string;
  menuLabel: string;
  items: AppMenuItem[];
  align?: "start" | "end";
}

/**
 * MenuButton — a self-contained, accessible menu button. Opens on click/Enter,
 * moves focus with ↑/↓/Home/End, selects with Enter, closes on Escape
 * (returning focus to the trigger) or outside click.
 */
function MenuButton({
  triggerContent,
  triggerClassName,
  triggerLabel,
  menuLabel,
  items,
  align = "end",
}: MenuProps) {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);

  useEffect(() => {
    if (!open) return;
    const onClick = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onClick);
    return () => document.removeEventListener("pointerdown", onClick);
  }, [open]);

  useEffect(() => {
    if (open) itemRefs.current[active]?.focus();
  }, [open, active]);

  const openMenu = () => {
    const selected = items.findIndex((it) => it.selected);
    setActive(selected >= 0 ? selected : 0);
    setOpen(true);
  };
  const close = (returnFocus = true) => {
    setOpen(false);
    if (returnFocus) triggerRef.current?.focus();
  };

  const onMenuKey = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setActive((a) => (a + 1) % items.length);
        break;
      case "ArrowUp":
        e.preventDefault();
        setActive((a) => (a - 1 + items.length) % items.length);
        break;
      case "Home":
        e.preventDefault();
        setActive(0);
        break;
      case "End":
        e.preventDefault();
        setActive(items.length - 1);
        break;
      case "Tab":
        // APG: Tab closes the menu and lets focus move on naturally.
        close(false);
        break;
      case "Escape":
        e.preventDefault();
        close();
        break;
    }
  };

  return (
    <div ref={rootRef} className="relative">
      <button
        ref={triggerRef}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={triggerLabel}
        onClick={() => (open ? close(false) : openMenu())}
        className={triggerClassName}
      >
        {triggerContent}
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            role="menu"
            aria-label={menuLabel}
            initial={{ opacity: 0, y: -6, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.97 }}
            transition={{ duration: 0.14 }}
            onKeyDown={onMenuKey}
            className={cn(
              "absolute top-full z-50 mt-2 min-w-56 overflow-hidden rounded-xl border border-border bg-surface p-1.5 shadow-2xl shadow-black/25",
              align === "end" ? "right-0" : "left-0",
            )}
          >
            {items.map((item, i) => (
              <div key={item.label}>
                {item.separatorBefore && (
                  <div className="my-1 h-px bg-border" role="separator" />
                )}
                <button
                  ref={(el) => {
                    itemRefs.current[i] = el;
                  }}
                  role={item.selected !== undefined ? "menuitemradio" : "menuitem"}
                  aria-checked={item.selected}
                  tabIndex={i === active ? 0 : -1}
                  onClick={() => {
                    item.onSelect?.();
                    close();
                  }}
                  onPointerMove={() => setActive(i)}
                  className={cn(
                    "flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm outline-none transition-colors",
                    i === active && "bg-brand/15",
                    item.danger ? "text-brand-3" : "text-foreground",
                  )}
                >
                  {item.icon && <span className="grid size-4 shrink-0 place-items-center">{item.icon}</span>}
                  <span className="flex-1">{item.label}</span>
                  {item.selected && <Check className="size-4 text-brand-ink" />}
                </button>
              </div>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export interface AppNavItem {
  label: string;
  href?: string;
}

export interface NavbarAppProps {
  brand?: string;
  items?: AppNavItem[];
  workspaces?: string[];
  userName?: string;
  notificationCount?: number;
  className?: string;
}

const DEFAULT_ITEMS: AppNavItem[] = [
  { label: "Overview" },
  { label: "Projects" },
  { label: "Analytics" },
  { label: "Settings" },
];
const DEFAULT_WORKSPACES = ["Acme Inc.", "ONONC Labs", "Personal"];

function initials(name: string) {
  return name
    .split(" ")
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

/**
 * NavbarApp — a product/dashboard top bar: brand, a workspace switcher menu, a
 * keyboard-hinted search field, primary navigation, a notification button with
 * an unread badge, and an avatar profile menu. Both menus are fully accessible;
 * navigation collapses behind a toggle on small screens.
 */
export function NavbarApp({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  workspaces = DEFAULT_WORKSPACES,
  userName = "Avery Quinn",
  notificationCount = 3,
  className,
}: NavbarAppProps) {
  const [activeNav, setActiveNav] = useState(0);
  const [workspace, setWorkspace] = useState(0);
  const [mobileOpen, setMobileOpen] = useState(false);

  const workspaceItems: AppMenuItem[] = [
    ...workspaces.map((w, i) => ({
      label: w,
      selected: i === workspace,
      onSelect: () => setWorkspace(i),
    })),
    {
      label: "Create workspace",
      icon: <Plus className="size-4" />,
      separatorBefore: true,
    },
  ];

  const avatarItems: AppMenuItem[] = [
    { label: "Profile", icon: <User className="size-4" /> },
    { label: "Settings", icon: <Settings className="size-4" /> },
    { label: "Billing", icon: <CreditCard className="size-4" /> },
    { label: "Sign out", icon: <LogOut className="size-4" />, danger: true, separatorBefore: true },
  ];

  return (
    <header
      className={cn(
        "rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center gap-3 px-3 py-2.5 sm:px-4">
        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          <span className="hidden sm:inline">{brand}</span>
        </a>

        <div className="hidden h-6 w-px bg-border sm:block" />

        <div className="hidden sm:block">
          <MenuButton
            menuLabel="Switch workspace"
            triggerLabel={`Current workspace: ${workspaces[workspace]}. Switch workspace`}
            align="start"
            triggerClassName="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-background"
            triggerContent={
              <>
                {workspaces[workspace]}
                <ChevronDown className="size-3.5 text-muted" />
              </>
            }
            items={workspaceItems}
          />
        </div>

        <nav aria-label="Primary" className="ml-1 hidden items-center gap-0.5 lg:flex">
          {items.map((item, i) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              aria-current={activeNav === i ? "page" : undefined}
              onClick={() => setActiveNav(i)}
              className={cn(
                "rounded-lg px-3 py-1.5 text-sm transition-colors",
                activeNav === i
                  ? "bg-background font-medium text-foreground"
                  : "text-muted hover:text-foreground",
              )}
            >
              {item.label}
            </a>
          ))}
        </nav>

        <div className="ml-auto flex items-center gap-1.5 sm:gap-2">
          {/* Search: full field on md+, icon button below */}
          <label className="relative hidden md:block">
            <span className="sr-only">Search</span>
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
            <input
              type="search"
              placeholder="Search…"
              className="h-9 w-44 rounded-lg border border-border bg-background pl-9 pr-12 text-sm text-foreground outline-none transition-colors placeholder:text-muted-2 focus-visible:border-border-strong lg:w-56"
            />
            <kbd
              aria-hidden
              className="pointer-events-none absolute right-2 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 rounded border border-border bg-surface px-1.5 py-0.5 text-[10px] font-medium text-muted lg:inline-flex"
            >
              ⌘K
            </kbd>
          </label>
          <button
            type="button"
            aria-label="Search"
            className="grid size-9 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground md:hidden"
          >
            <Search className="size-4" />
          </button>

          <button
            type="button"
            aria-label={`Notifications, ${notificationCount} unread`}
            className="relative grid size-9 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
          >
            <Bell className="size-4" />
            {notificationCount > 0 && (
              <span
                aria-hidden
                className="absolute right-1.5 top-1.5 grid min-w-4 place-items-center rounded-full bg-brand-3 px-1 text-[10px] font-semibold leading-4 text-white"
              >
                {notificationCount > 9 ? "9+" : notificationCount}
              </span>
            )}
          </button>

          <MenuButton
            menuLabel="Account"
            triggerLabel={`Account menu for ${userName}`}
            triggerClassName="grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-xs font-semibold text-white outline-none ring-brand/60 transition-shadow hover:ring-2 focus-visible:ring-2"
            triggerContent={initials(userName)}
            items={avatarItems}
          />

          <button
            type="button"
            aria-label="Toggle navigation"
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen((o) => !o)}
            className="grid size-9 place-items-center rounded-lg border border-border text-foreground lg:hidden"
          >
            {mobileOpen ? <X className="size-5" /> : <Menu className="size-5" />}
          </button>
        </div>
      </div>

      {mobileOpen && (
        <nav
          aria-label="Primary"
          className="flex flex-col gap-1 border-t border-border px-3 py-3 lg:hidden"
        >
          {items.map((item, i) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              aria-current={activeNav === i ? "page" : undefined}
              onClick={() => {
                setActiveNav(i);
                setMobileOpen(false);
              }}
              className={cn(
                "rounded-lg px-3 py-2 text-sm transition-colors",
                activeNav === i
                  ? "bg-background font-medium text-foreground"
                  : "text-muted hover:bg-background hover:text-foreground",
              )}
            >
              {item.label}
            </a>
          ))}
        </nav>
      )}
    </header>
  );
}
```

### Drawer Navbar
Minimal bar that opens a premium slide-in navigation drawer with focus management.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-drawer.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import {
  AnimatePresence,
  motion,
  useReducedMotion,
  type Variants,
} from "motion/react";
import { ArrowUpRight, AtSign, Globe, Menu, Rss, Sparkles, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DrawerNavItem {
  label: string;
  href?: string;
}

export interface NavbarDrawerProps {
  brand?: string;
  items?: DrawerNavItem[];
  secondaryItems?: DrawerNavItem[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: DrawerNavItem[] = [
  { label: "Work" },
  { label: "Services" },
  { label: "Studio" },
  { label: "Journal" },
  { label: "Contact" },
];
const DEFAULT_SECONDARY: DrawerNavItem[] = [
  { label: "Support" },
  { label: "Changelog" },
  { label: "Privacy" },
];

/**
 * NavbarDrawer — a minimal bar whose menu opens a premium slide-in drawer. The
 * drawer is scoped to this section (not a full-page overlay) so it previews in
 * context: it dims the page with a backdrop, moves focus to its close button on
 * open, returns focus to the trigger on close, and closes on Escape or backdrop
 * click. Link reveal staggers in, and collapses to a fade under reduced-motion.
 */
export function NavbarDrawer({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  secondaryItems = DEFAULT_SECONDARY,
  ctaLabel = "Start a project",
  className,
}: NavbarDrawerProps) {
  const [open, setOpen] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const closeRef = useRef<HTMLButtonElement>(null);
  const reduce = useReducedMotion();

  // Honor reduced-motion: no stagger, no horizontal slide — links just appear.
  const listVariants: Variants = reduce
    ? { hidden: {}, show: {} }
    : {
        hidden: {},
        show: { transition: { staggerChildren: 0.05, delayChildren: 0.08 } },
      };
  const itemVariants: Variants = reduce
    ? { hidden: { opacity: 1 }, show: { opacity: 1 } }
    : {
        hidden: { opacity: 0, x: 16 },
        show: {
          opacity: 1,
          x: 0,
          transition: { type: "spring", stiffness: 320, damping: 30 },
        },
      };

  useEffect(() => {
    if (!open) return;
    const trigger = triggerRef.current;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    const id = requestAnimationFrame(() => closeRef.current?.focus());
    return () => {
      document.removeEventListener("keydown", onKey);
      cancelAnimationFrame(id);
      trigger?.focus();
    };
  }, [open]);

  return (
    <div
      className={cn(
        "relative isolate flex min-h-[22rem] flex-col overflow-hidden rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      {/* Top bar */}
      <div className="relative z-10 flex items-center justify-between px-5 py-4">
        <a href="#" className="flex items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>
        <div className="flex items-center gap-2">
          <button className="hidden rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:inline-block">
            {ctaLabel}
          </button>
          <button
            ref={triggerRef}
            type="button"
            aria-haspopup="dialog"
            aria-expanded={open}
            aria-controls="drawer-nav-panel"
            onClick={() => setOpen(true)}
            className="inline-flex items-center gap-2 rounded-full border border-border px-3.5 py-2 text-sm font-medium text-foreground transition-colors hover:bg-background"
          >
            <Menu className="size-4" />
            Menu
          </button>
        </div>
      </div>

      {/* Faux page context so the drawer previews against real content */}
      <div className="relative z-0 flex flex-1 flex-col justify-center px-5 pb-10 pt-4">
        <span className="text-xs font-medium uppercase tracking-widest text-brand-ink">
          Design studio
        </span>
        <h2 className="mt-2 max-w-md text-balance text-2xl font-semibold tracking-tight sm:text-3xl">
          Interfaces with intent, crafted end to end.
        </h2>
        <p className="mt-2 max-w-sm text-sm text-muted">
          Open the menu to explore the full navigation drawer.
        </p>
      </div>

      <AnimatePresence>
        {open && (
          <motion.div
            key="drawer-backdrop"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            onClick={() => setOpen(false)}
            className="absolute inset-0 z-20 bg-black/40 backdrop-blur-sm"
          />
        )}
        {open && (
          <motion.div
            key="drawer-panel"
            id="drawer-nav-panel"
            role="dialog"
            aria-label="Site menu"
            initial={reduce ? { opacity: 0 } : { x: "100%" }}
            animate={reduce ? { opacity: 1 } : { x: 0 }}
            exit={reduce ? { opacity: 0 } : { x: "100%" }}
            transition={{ type: "spring", stiffness: 320, damping: 36 }}
            className="absolute inset-y-0 right-0 z-30 flex w-[min(20rem,88%)] flex-col border-l border-border bg-surface p-5 shadow-2xl"
          >
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium uppercase tracking-widest text-muted-2">
                Menu
              </span>
              <button
                ref={closeRef}
                type="button"
                onClick={() => setOpen(false)}
                aria-label="Close menu"
                className="grid size-8 place-items-center rounded-lg text-muted outline-none transition-colors hover:bg-background hover:text-foreground"
              >
                <X className="size-4" />
              </button>
            </div>

            <motion.nav
              aria-label="Site"
              variants={listVariants}
              initial="hidden"
              animate="show"
              className="mt-4 flex flex-col"
            >
              {items.map((item, i) => (
                <motion.a
                  key={item.label}
                  variants={itemVariants}
                  href={item.href ?? "#"}
                  onClick={() => setOpen(false)}
                  className="group flex items-baseline gap-3 border-b border-border py-3 text-lg font-medium text-foreground"
                >
                  <span className="w-6 text-xs font-normal tabular-nums text-muted-2">
                    0{i + 1}
                  </span>
                  <span className="flex-1">{item.label}</span>
                  <ArrowUpRight className="size-4 -translate-x-1 self-center text-muted opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100 group-focus-visible:translate-x-0 group-focus-visible:opacity-100" />
                </motion.a>
              ))}
            </motion.nav>

            <div className="mt-5 flex flex-wrap gap-x-4 gap-y-1">
              {secondaryItems.map((item) => (
                <a
                  key={item.label}
                  href={item.href ?? "#"}
                  className="text-xs text-muted transition-colors hover:text-foreground"
                >
                  {item.label}
                </a>
              ))}
            </div>

            <div className="mt-auto pt-5">
              <button className="w-full rounded-full bg-brand px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand/90">
                {ctaLabel}
              </button>
              <div className="mt-4 flex gap-2">
                {[
                  { Icon: Globe, label: "Website" },
                  { Icon: AtSign, label: "Email" },
                  { Icon: Rss, label: "Blog feed" },
                ].map(({ Icon, label }) => (
                  <a
                    key={label}
                    href="#"
                    aria-label={label}
                    className="grid size-9 place-items-center rounded-lg border border-border text-muted transition-colors hover:text-foreground"
                  >
                    <Icon className="size-4" />
                  </a>
                ))}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
```

### Sticky Navbar
Header that condenses on scroll with a glass backdrop and a progress line.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-sticky.tsx

```tsx
"use client";

import { useRef, useState } from "react";
import { ArrowRight, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface StickyNavItem {
  label: string;
  href?: string;
}

export interface NavbarStickyProps {
  brand?: string;
  items?: StickyNavItem[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: StickyNavItem[] = [
  { label: "Overview" },
  { label: "Features" },
  { label: "Pricing" },
  { label: "Docs" },
];

/**
 * NavbarSticky — a header that condenses as the page scrolls: it gains a glass
 * background, border, and shadow while its padding and logo tighten, with a
 * gradient scroll-progress line beneath. The block embeds a scrollable demo
 * region (focusable for keyboard scrolling) so the effect previews in place.
 */
export function NavbarSticky({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  ctaLabel = "Get started",
  className,
}: NavbarStickyProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [scrolled, setScrolled] = useState(false);
  const [progress, setProgress] = useState(0);
  const [active, setActive] = useState(0);

  const onScroll = () => {
    const el = scrollRef.current;
    if (!el) return;
    const top = el.scrollTop;
    setScrolled((prev) => (prev ? top > 1 : top > 16));
    const max = el.scrollHeight - el.clientHeight;
    setProgress(max > 0 ? (top / max) * 100 : 0);
  };

  return (
    <div
      ref={scrollRef}
      onScroll={onScroll}
      tabIndex={0}
      role="region"
      aria-label="Sticky navbar demo — scroll to condense the header"
      className={cn(
        "relative h-[26rem] overflow-y-auto rounded-2xl border border-border bg-background [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        className,
      )}
    >
      <header
        className={cn(
          "sticky top-0 z-20 transition-all duration-300",
          scrolled
            ? "border-b border-border bg-surface/80 shadow-lg shadow-black/5 backdrop-blur-xl"
            : "border-b border-transparent bg-transparent",
        )}
      >
        <div
          className={cn(
            "flex items-center justify-between px-5 transition-all duration-300",
            scrolled ? "py-2.5" : "py-4",
          )}
        >
          <a href="#" className="flex items-center gap-2 font-semibold">
            <span
              className={cn(
                "grid place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white transition-all duration-300",
                scrolled ? "size-7" : "size-9",
              )}
            >
              <Sparkles className={cn("transition-all duration-300", scrolled ? "size-4" : "size-5")} />
            </span>
            {brand}
          </a>

          <nav aria-label="Primary" className="hidden items-center gap-0.5 md:flex">
            {items.map((item, i) => (
              <a
                key={item.label}
                href={item.href ?? "#"}
                aria-current={active === i ? "page" : undefined}
                onClick={() => setActive(i)}
                className={cn(
                  "rounded-full px-3 py-1.5 text-sm transition-colors",
                  active === i ? "text-foreground" : "text-muted hover:text-foreground",
                )}
              >
                {item.label}
              </a>
            ))}
          </nav>

          <button
            className={cn(
              "inline-flex items-center gap-1.5 rounded-full bg-brand font-semibold text-white transition-all duration-300 hover:bg-brand/90",
              scrolled ? "px-3.5 py-1.5 text-sm" : "px-4 py-2 text-sm",
            )}
          >
            {ctaLabel}
            <ArrowRight className="size-3.5" />
          </button>
        </div>
        <div
          aria-hidden
          className="absolute bottom-0 left-0 h-px bg-gradient-to-r from-brand-ink via-brand-2 to-brand-3"
          style={{ width: `${progress}%` }}
        />
      </header>

      {/* Demo page content so the header has something to scroll over */}
      <div className="px-6 pb-10">
        <section className="flex flex-col items-start py-12">
          <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-3 py-1 text-xs font-medium text-muted">
            <Sparkles className="size-3.5 text-brand-ink" />
            Scroll the panel
          </span>
          <h2 className="mt-4 max-w-md text-balance text-3xl font-semibold tracking-tight">
            A header that earns its place at the top.
          </h2>
          <p className="mt-3 max-w-md text-pretty text-muted">
            As you scroll, the bar tightens and lifts off the page with a glass
            backdrop and a progress line — quietly, never in the way.
          </p>
        </section>

        {["Performance", "Accessibility", "Motion", "Theming"].map((title, i) => (
          <section
            key={title}
            className="border-t border-border py-8"
          >
            <h3 className="text-lg font-medium">
              {String(i + 1).padStart(2, "0")} — {title}
            </h3>
            <p className="mt-2 max-w-lg text-sm text-muted">
              Built to feel considered at every breakpoint. Each section here is
              filler to give the sticky header room to react to your scroll.
            </p>
          </section>
        ))}
      </div>
    </div>
  );
}
```

### Command Navbar
Search opens an inline command palette with full keyboard navigation.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-command.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  Blocks,
  BookOpen,
  Command,
  Component,
  CornerDownLeft,
  FileText,
  Menu,
  Search,
  Sparkles,
  X,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface CommandItem {
  label: string;
  icon: ReactNode;
  hint?: string;
}
export interface CommandGroup {
  label: string;
  items: CommandItem[];
}

export interface NavbarCommandProps {
  brand?: string;
  items?: { label: string; href?: string }[];
  groups?: CommandGroup[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_LINKS = [
  { label: "Product" },
  { label: "Docs" },
  { label: "Pricing" },
  { label: "Blog" },
];

const DEFAULT_GROUPS: CommandGroup[] = [
  {
    label: "Pages",
    items: [
      { label: "Home", icon: <Sparkles className="size-4" />, hint: "G H" },
      { label: "Documentation", icon: <BookOpen className="size-4" />, hint: "G D" },
      { label: "Changelog", icon: <FileText className="size-4" /> },
    ],
  },
  {
    label: "Components",
    items: [
      { label: "Buttons", icon: <Component className="size-4" /> },
      { label: "Blocks", icon: <Blocks className="size-4" /> },
      { label: "Animations", icon: <Zap className="size-4" /> },
    ],
  },
];

/**
 * NavbarCommand — a navigation bar whose search opens an inline command
 * palette. The palette is an accessible combobox (input + listbox): ⌘K/Ctrl-K
 * or the search button opens it, ↑/↓ move the active option (aria-activedescendant),
 * Enter selects, Escape closes and restores focus to the trigger, and an outside
 * click dismisses it. Open/close fades respect reduced-motion.
 */
export function NavbarCommand({
  brand = "ONONC",
  items = DEFAULT_LINKS,
  groups = DEFAULT_GROUPS,
  ctaLabel = "Get started",
  className,
}: NavbarCommandProps) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  const [mobileOpen, setMobileOpen] = useState(false);
  const reduce = useReducedMotion();
  const rootRef = useRef<HTMLElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  // Filter groups by the query; build a flat list for keyboard navigation.
  const q = query.trim().toLowerCase();
  const filteredGroups = groups
    .map((g) => ({
      ...g,
      items: g.items.filter((it) => it.label.toLowerCase().includes(q)),
    }))
    .filter((g) => g.items.length > 0);
  const flat = filteredGroups.flatMap((g) => g.items);
  const activeClamped = Math.min(active, Math.max(0, flat.length - 1));

  // Global ⌘K / Ctrl-K to open.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen(true);
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, []);

  // While open: outside-click closes; focus the input; restore focus on close.
  useEffect(() => {
    if (!open) return;
    const trigger = triggerRef.current;
    const onPointer = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onPointer);
    const id = requestAnimationFrame(() => inputRef.current?.focus());
    return () => {
      document.removeEventListener("pointerdown", onPointer);
      cancelAnimationFrame(id);
      trigger?.focus();
    };
  }, [open]);

  const close = () => setOpen(false);

  const onInputKey = (e: React.KeyboardEvent) => {    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setActive((a) => Math.min(a + 1, flat.length - 1));
        break;
      case "ArrowUp":
        e.preventDefault();
        setActive((a) => Math.max(a - 1, 0));
        break;
      case "Enter":
        e.preventDefault();
        if (flat[activeClamped]) close();
        break;
      case "Escape":
        e.preventDefault();
        close();
        break;
    }
  };

  return (
    <nav
      ref={rootRef}
      aria-label="Primary"
      className={cn(
        "relative rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center justify-between gap-3 px-4 py-3">
        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>

        <div className="hidden items-center gap-0.5 md:flex">
          {items.map((item) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              className="rounded-full px-3 py-1.5 text-sm text-muted transition-colors hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
        </div>

        <div className="flex items-center gap-2">
          <button
            ref={triggerRef}
            type="button"
            aria-haspopup="dialog"
            aria-expanded={open}
            aria-label="Search (Command or Control + K)"
            onClick={() => setOpen(true)}
            className="inline-flex items-center gap-2 rounded-full border border-border bg-background py-1.5 pl-3 pr-2 text-sm text-muted transition-colors hover:border-border-strong hover:text-foreground"
          >
            <Search className="size-4" />
            <span className="hidden sm:inline">Search…</span>
            <kbd
              aria-hidden
              className="ml-1 hidden items-center gap-0.5 rounded border border-border bg-surface px-1.5 py-0.5 text-[10px] font-medium sm:inline-flex"
            >
              <Command className="size-2.5" />K
            </kbd>
          </button>
          <button
            type="button"
            className="hidden rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:inline-block"
          >
            {ctaLabel}
          </button>
          <button
            type="button"
            aria-label="Toggle menu"
            aria-expanded={mobileOpen}
            onClick={() => setMobileOpen((o) => !o)}
            className="grid size-9 place-items-center rounded-lg border border-border text-foreground md:hidden"
          >
            {mobileOpen ? <X className="size-5" /> : <Menu className="size-5" />}
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div className="flex flex-col gap-1 border-t border-border px-4 py-3 md:hidden">
          {items.map((item) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              className="rounded-lg px-3 py-2 text-sm text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
          <button
            type="button"
            className="mt-2 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white"
          >
            {ctaLabel}
          </button>
        </div>
      )}

      <AnimatePresence>
        {open && (
          <motion.div
            key="cmd-panel"
            role="dialog"
            aria-label="Search"
            initial={reduce ? { opacity: 0 } : { opacity: 0, y: -8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8 }}
            transition={{ duration: 0.16, ease: "easeOut" }}
            className="absolute inset-x-3 top-full z-50 mt-2 overflow-hidden rounded-2xl border border-border bg-surface shadow-2xl shadow-black/30"
          >
            <div className="flex items-center gap-2 border-b border-border px-4">
              <Search className="size-4 shrink-0 text-muted" />
              <input
                ref={inputRef}
                type="text"
                role="combobox"
                aria-expanded
                aria-controls="command-listbox"
                aria-activedescendant={
                  flat[activeClamped] ? `command-option-${activeClamped}` : undefined
                }
                aria-label="Search commands"
                value={query}
                onChange={(e) => {
                  setQuery(e.target.value);
                  setActive(0);
                }}
                onKeyDown={onInputKey}
                placeholder="Type a command or search…"
                className="h-12 w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-2"
              />
              <kbd
                aria-hidden
                className="hidden items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[10px] text-muted sm:inline-flex"
              >
                Esc
              </kbd>
            </div>

            <ul
              id="command-listbox"
              role="listbox"
              aria-label="Results"
              className="max-h-72 overflow-y-auto p-2"
            >
              {filteredGroups.length === 0 && (
                <li className="px-3 py-6 text-center text-sm text-muted">
                  No results for “{query}”.
                </li>
              )}
              {filteredGroups.map((group, gi) => {
                const offset = filteredGroups
                  .slice(0, gi)
                  .reduce((n, g) => n + g.items.length, 0);
                return (
                  <li key={group.label} role="presentation">
                    <p className="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-muted-2">
                      {group.label}
                    </p>
                    <ul role="presentation">
                      {group.items.map((item, ii) => {
                        const idx = offset + ii;
                        const isActive = idx === activeClamped;
                        return (
                          <li
                            key={item.label}
                            id={`command-option-${idx}`}
                            role="option"
                            aria-selected={isActive}
                            onPointerMove={() => setActive(idx)}
                            onClick={close}
                            className={cn(
                              "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm",
                              isActive ? "bg-brand/15 text-foreground" : "text-muted",
                            )}
                          >
                            <span className="grid size-7 shrink-0 place-items-center rounded-md border border-border text-brand-ink">
                              {item.icon}
                            </span>
                            <span className="flex-1 text-foreground">{item.label}</span>
                            {item.hint && (
                              <kbd
                                aria-hidden
                                className="rounded border border-border px-1.5 py-0.5 text-[10px] text-muted"
                              >
                                {item.hint}
                              </kbd>
                            )}
                            {isActive && (
                              <CornerDownLeft className="size-3.5 text-muted" aria-hidden />
                            )}
                          </li>
                        );
                      })}
                    </ul>
                  </li>
                );
              })}
            </ul>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}
```

### Sidebar Navbar
Collapsible vertical rail with a sliding active indicator and a user chip.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-sidebar.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import {
  BarChart3,
  Folder,
  Inbox,
  LayoutDashboard,
  PanelLeftClose,
  PanelLeft,
  Settings,
  Sparkles,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarNavItem {
  label: string;
  icon: ReactNode;
  badge?: number;
}

export interface NavbarSidebarProps {
  brand?: string;
  items?: SidebarNavItem[];
  userName?: string;
  userEmail?: string;
  className?: string;
}

const DEFAULT_ITEMS: SidebarNavItem[] = [
  { label: "Dashboard", icon: <LayoutDashboard className="size-4" /> },
  { label: "Projects", icon: <Folder className="size-4" /> },
  { label: "Inbox", icon: <Inbox className="size-4" />, badge: 5 },
  { label: "Analytics", icon: <BarChart3 className="size-4" /> },
  { label: "Settings", icon: <Settings className="size-4" /> },
];

function initials(name: string) {
  return name
    .split(" ")
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

/**
 * NavbarSidebar — a vertical navigation rail that collapses to an icon-only
 * strip. A single highlight slides between items (shared-layout `layoutId`,
 * disabled under reduced-motion); labels stay in the accessibility tree as
 * sr-only text when collapsed, and items expose aria-current. A user chip sits
 * at the foot. The surrounding content pane is demo scaffolding.
 */
export function NavbarSidebar({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  userName = "Avery Quinn",
  userEmail = "avery@ononc.dev",
  className,
}: NavbarSidebarProps) {
  const [active, setActive] = useState(0);
  const [collapsed, setCollapsed] = useState(false);
  const reduce = useReducedMotion();
  const baseId = useId();

  return (
    <div
      className={cn(
        "flex min-h-[24rem] overflow-hidden rounded-2xl border border-border bg-background",
        className,
      )}
    >
      <nav
        aria-label="Sidebar"
        className={cn(
          "flex flex-col border-r border-border bg-surface transition-[width] duration-300",
          collapsed ? "w-16" : "w-60",
        )}
      >
        <div className="flex h-16 items-center gap-2 px-3">
          <span className="grid size-9 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-5" />
          </span>
          {!collapsed && <span className="truncate font-semibold">{brand}</span>}
        </div>

        <ul className="flex flex-1 flex-col gap-1 px-2 py-2">
          {items.map((item, i) => {
            const isActive = active === i;
            return (
              <li key={item.label}>
                <button
                  type="button"
                  onClick={() => setActive(i)}
                  aria-current={isActive ? "page" : undefined}
                  title={collapsed ? item.label : undefined}
                  className={cn(
                    "relative flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand/60",
                    collapsed && "justify-center",
                    isActive ? "text-foreground" : "text-muted hover:text-foreground",
                  )}
                >
                  {isActive && (
                    <motion.span
                      layoutId={`${baseId}-active`}
                      aria-hidden
                      className="absolute inset-0 -z-0 rounded-lg border border-border bg-background"
                      transition={
                        reduce ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 32 }
                      }
                    />
                  )}
                  <span className="relative z-10 shrink-0 text-brand-ink">{item.icon}</span>
                  <span className={cn("relative z-10 flex-1 text-left", collapsed && "sr-only")}>
                    {item.label}
                  </span>
                  {item.badge !== undefined && (
                    <span
                      className={cn(
                        "relative z-10 grid min-w-5 place-items-center rounded-full bg-brand/15 px-1.5 text-[11px] font-medium text-brand-ink",
                        collapsed && "sr-only",
                      )}
                    >
                      {item.badge}
                    </span>
                  )}
                </button>
              </li>
            );
          })}
        </ul>

        <button
          type="button"
          onClick={() => setCollapsed((c) => !c)}
          aria-expanded={!collapsed}
          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
          className={cn(
            "mx-2 mb-2 flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm text-muted outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60",
            collapsed && "justify-center",
          )}
        >
          {collapsed ? (
            <PanelLeft className="size-4 shrink-0" />
          ) : (
            <PanelLeftClose className="size-4 shrink-0" />
          )}
          {!collapsed && <span>Collapse</span>}
        </button>

        <div className="flex items-center gap-2.5 border-t border-border p-3">
          <span className="grid size-8 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-[11px] font-semibold text-white">
            {initials(userName)}
          </span>
          {!collapsed && (
            <span className="min-w-0">
              <span className="block truncate text-sm font-medium text-foreground">
                {userName}
              </span>
              <span className="block truncate text-xs text-muted">{userEmail}</span>
            </span>
          )}
        </div>
      </nav>

      {/* Demo content pane */}
      <div className="flex flex-1 flex-col p-6">
        <div className="flex items-center gap-2 text-xs text-muted">
          <span>{brand}</span>
          <span aria-hidden>/</span>
          <span className="text-foreground">{items[active]?.label}</span>
        </div>
        <h2 className="mt-3 text-2xl font-semibold tracking-tight">
          {items[active]?.label}
        </h2>
        <p className="mt-2 max-w-sm text-sm text-muted">
          Collapse the rail with the toggle. The active highlight glides between
          items, and labels stay available to screen readers when collapsed.
        </p>
        <div className="mt-6 grid flex-1 grid-cols-2 gap-3">
          <div className="rounded-xl border border-border bg-surface/60" />
          <div className="rounded-xl border border-border bg-surface/60" />
        </div>
      </div>
    </div>
  );
}
```

### Announcement Navbar
Two-tier header with a dismissible gradient announcement strip above the nav.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-announce.tsx

```tsx
"use client";

import { type ReactNode, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { ArrowRight, Megaphone, Menu, Sparkles, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AnnounceNavItem {
  label: string;
  href?: string;
}

export interface NavbarAnnounceProps {
  brand?: string;
  items?: AnnounceNavItem[];
  announcement?: ReactNode;
  announcementCtaLabel?: string;
  ctaLabel?: string;
  signInLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: AnnounceNavItem[] = [
  { label: "Features" },
  { label: "Solutions" },
  { label: "Pricing" },
  { label: "Docs" },
];

/**
 * NavbarAnnounce — a two-tier header: a dismissible gradient announcement strip
 * above the main navigation. Dismissing collapses the strip (height + fade, or
 * a plain fade under reduced-motion) and leaves the nav in place. The nav
 * collapses to a toggle menu on small screens.
 */
export function NavbarAnnounce({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  announcement = "ONONC 1.1 is here — six new navigation blocks.",
  announcementCtaLabel = "See what's new",
  ctaLabel = "Get started",
  signInLabel = "Sign in",
  className,
}: NavbarAnnounceProps) {
  const [showStrip, setShowStrip] = useState(true);
  const [open, setOpen] = useState(false);
  const reduce = useReducedMotion();

  return (
    <div
      className={cn(
        "overflow-hidden rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <AnimatePresence initial={false}>
        {showStrip && (
          <motion.div
            key="announce-strip"
            role="region"
            aria-label="Announcement"
            initial={false}
            exit={reduce ? { opacity: 0 } : { height: 0, opacity: 0 }}
            transition={{ duration: 0.25, ease: "easeOut" }}
            className="overflow-hidden border-b border-border bg-gradient-to-r from-brand/15 via-brand-2/10 to-brand-3/15"
          >
            <div className="flex items-center gap-x-3 px-4 py-2.5 text-sm">
              <Megaphone className="size-4 shrink-0 text-brand-ink" aria-hidden />
              <p className="min-w-0 flex-1 truncate text-foreground">
                {announcement}
                <a
                  href="#"
                  className="ml-2 hidden font-medium text-brand-ink hover:underline sm:inline-flex sm:items-center sm:gap-0.5"
                >
                  {announcementCtaLabel}
                  <ArrowRight className="size-3.5" />
                </a>
              </p>
              <button
                type="button"
                onClick={() => setShowStrip(false)}
                aria-label="Dismiss announcement"
                className="grid size-7 shrink-0 place-items-center rounded-md text-muted outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
              >
                <X className="size-4" />
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <nav aria-label="Primary">
        <div className="flex items-center justify-between gap-4 px-4 py-3">
          <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
            <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
              <Sparkles className="size-4" />
            </span>
            {brand}
          </a>

          <div className="hidden items-center gap-0.5 md:flex">
            {items.map((item) => (
              <a
                key={item.label}
                href={item.href ?? "#"}
                className="rounded-full px-3 py-1.5 text-sm text-muted transition-colors hover:text-foreground"
              >
                {item.label}
              </a>
            ))}
          </div>

          <div className="hidden items-center gap-2 md:flex">
            <a
              href="#"
              className="rounded-full px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-foreground"
            >
              {signInLabel}
            </a>
            <button
              type="button"
              className="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
            >
              {ctaLabel}
            </button>
          </div>

          <button
            type="button"
            aria-label="Toggle menu"
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
            className="grid size-9 place-items-center rounded-lg border border-border text-foreground md:hidden"
          >
            {open ? <X className="size-5" /> : <Menu className="size-5" />}
          </button>
        </div>

        {open && (
          <div className="flex flex-col gap-1 border-t border-border px-4 py-3 md:hidden">
            {items.map((item) => (
              <a
                key={item.label}
                href={item.href ?? "#"}
                className="rounded-lg px-3 py-2 text-sm text-muted transition-colors hover:bg-background hover:text-foreground"
              >
                {item.label}
              </a>
            ))}
            <div className="mt-2 flex flex-col gap-2 border-t border-border pt-3">
              <a
                href="#"
                className="rounded-full border border-border px-4 py-2 text-center text-sm font-medium text-foreground"
              >
                {signInLabel}
              </a>
              <button
                type="button"
                className="rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white"
              >
                {ctaLabel}
              </button>
            </div>
          </div>
        )}
      </nav>
    </div>
  );
}
```

### Commerce Navbar
Storefront header with search, account, and a cart badge with a mini-cart popover.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-commerce.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  Menu,
  Minus,
  Plus,
  Search,
  ShoppingBag,
  Sparkles,
  Trash2,
  User,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface CartLine {
  id: string;
  name: string;
  price: number;
  qty: number;
}

export interface NavbarCommerceProps {
  brand?: string;
  categories?: string[];
  initialCart?: CartLine[];
  className?: string;
}

const DEFAULT_CATEGORIES = ["New", "Women", "Men", "Collections", "Sale"];
const DEFAULT_CART: CartLine[] = [
  { id: "a", name: "Merino Crew Knit", price: 128, qty: 1 },
  { id: "b", name: "Tailored Wool Trouser", price: 165, qty: 2 },
];

const money = (n: number) =>
  n.toLocaleString("en-US", { style: "currency", currency: "USD" });

/**
 * NavbarCommerce — a two-row storefront header: brand, product search, account,
 * and a cart button whose unread badge reflects total quantity. The cart button
 * opens a mini-cart popover with quantity steppers and remove controls; it moves
 * focus to its close button on open, restores focus to the trigger on close, and
 * dismisses on Escape or outside click. The category bar collapses on mobile.
 */
export function NavbarCommerce({
  brand = "ONONC",
  categories = DEFAULT_CATEGORIES,
  initialCart = DEFAULT_CART,
  className,
}: NavbarCommerceProps) {
  const [cart, setCart] = useState<CartLine[]>(initialCart);
  const [open, setOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const reduce = useReducedMotion();
  const cartWrapRef = useRef<HTMLDivElement>(null);
  const cartBtnRef = useRef<HTMLButtonElement>(null);
  const closeRef = useRef<HTMLButtonElement>(null);

  const count = cart.reduce((n, l) => n + l.qty, 0);
  const subtotal = cart.reduce((n, l) => n + l.price * l.qty, 0);

  useEffect(() => {
    if (!open) return;
    const trigger = cartBtnRef.current;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    const onPointer = (e: PointerEvent) => {
      if (!cartWrapRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("pointerdown", onPointer);
    const id = requestAnimationFrame(() => closeRef.current?.focus());
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("pointerdown", onPointer);
      cancelAnimationFrame(id);
      trigger?.focus();
    };
  }, [open]);

  const updateQty = (id: string, delta: number) =>
    setCart((c) =>
      c.map((l) => (l.id === id ? { ...l, qty: Math.max(1, l.qty + delta) } : l)),
    );
  const removeLine = (id: string) => {
    setCart((c) => c.filter((l) => l.id !== id));
    // Keep focus inside the dialog after the focused row unmounts.
    requestAnimationFrame(() => closeRef.current?.focus());
  };

  return (
    <header
      className={cn(
        "rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center gap-3 px-4 py-3">
        <button
          type="button"
          aria-label="Toggle menu"
          aria-expanded={mobileOpen}
          onClick={() => setMobileOpen((o) => !o)}
          className="grid size-9 place-items-center rounded-lg border border-border text-foreground md:hidden"
        >
          {mobileOpen ? <X className="size-5" /> : <Menu className="size-5" />}
        </button>

        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          <span className="hidden sm:inline">{brand}</span>
        </a>

        <label className="relative mx-auto hidden w-full max-w-md md:block">
          <span className="sr-only">Search products</span>
          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
          <input
            type="search"
            placeholder="Search products…"
            className="h-9 w-full rounded-full border border-border bg-background pl-9 pr-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-2 focus-visible:border-border-strong"
          />
        </label>

        <div className="ml-auto flex items-center gap-1 md:ml-0">
          <button
            type="button"
            aria-label="Search"
            className="grid size-9 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground md:hidden"
          >
            <Search className="size-4" />
          </button>
          <button
            type="button"
            aria-label="Account"
            className="grid size-9 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
          >
            <User className="size-4" />
          </button>

          <div ref={cartWrapRef} className="relative">
            <button
              ref={cartBtnRef}
              type="button"
              aria-haspopup="dialog"
              aria-expanded={open}
              aria-label={`Cart, ${count} ${count === 1 ? "item" : "items"}`}
              onClick={() => setOpen((o) => !o)}
              className="relative grid size-9 place-items-center rounded-lg text-muted outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
            >
              <ShoppingBag className="size-4" />
              {count > 0 && (
                <span
                  aria-hidden
                  className="absolute -right-0.5 -top-0.5 grid min-w-4 place-items-center rounded-full bg-brand px-1 text-[10px] font-semibold leading-4 text-white"
                >
                  {count}
                </span>
              )}
            </button>

            <AnimatePresence>
              {open && (
                <motion.div
                  key="mini-cart"
                  role="dialog"
                  aria-label="Shopping cart"
                  initial={reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
                  transition={{ duration: 0.16, ease: "easeOut" }}
                  className="absolute right-0 top-full z-50 mt-2 w-80 overflow-hidden rounded-2xl border border-border bg-surface shadow-2xl shadow-black/30"
                >
                  <div className="flex items-center justify-between border-b border-border px-4 py-3">
                    <h3 className="text-sm font-semibold">Your cart ({count})</h3>
                    <button
                      ref={closeRef}
                      type="button"
                      onClick={() => setOpen(false)}
                      aria-label="Close cart"
                      className="grid size-7 place-items-center rounded-md text-muted outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
                    >
                      <X className="size-4" />
                    </button>
                  </div>

                  {cart.length === 0 ? (
                    <p className="px-4 py-8 text-center text-sm text-muted">
                      Your cart is empty.
                    </p>
                  ) : (
                    <ul className="max-h-64 divide-y divide-border overflow-y-auto">
                      {cart.map((line) => (
                        <li key={line.id} className="flex items-center gap-3 px-4 py-3">
                          <span className="grid size-11 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-brand/20 to-brand-2/20 text-brand-ink">
                            <ShoppingBag className="size-4" />
                          </span>
                          <div className="min-w-0 flex-1">
                            <p className="truncate text-sm font-medium text-foreground">
                              {line.name}
                            </p>
                            <p className="text-xs text-muted">{money(line.price)}</p>
                            <div className="mt-1.5 inline-flex items-center rounded-md border border-border">
                              <button
                                type="button"
                                onClick={() => updateQty(line.id, -1)}
                                aria-label={`Decrease quantity of ${line.name}`}
                                className="grid size-6 place-items-center text-muted outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60 disabled:opacity-40"
                                disabled={line.qty <= 1}
                              >
                                <Minus className="size-3" />
                              </button>
                              <span className="min-w-7 text-center text-xs tabular-nums">
                                {line.qty}
                              </span>
                              <button
                                type="button"
                                onClick={() => updateQty(line.id, 1)}
                                aria-label={`Increase quantity of ${line.name}`}
                                className="grid size-6 place-items-center text-muted outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
                              >
                                <Plus className="size-3" />
                              </button>
                            </div>
                          </div>
                          <button
                            type="button"
                            onClick={() => removeLine(line.id)}
                            aria-label={`Remove ${line.name}`}
                            className="grid size-7 shrink-0 place-items-center rounded-md text-muted outline-none transition-colors hover:bg-background hover:text-brand-3 focus-visible:ring-2 focus-visible:ring-brand/60"
                          >
                            <Trash2 className="size-4" />
                          </button>
                        </li>
                      ))}
                    </ul>
                  )}

                  <div className="border-t border-border p-4">
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-muted">Subtotal</span>
                      <span className="font-semibold tabular-nums">{money(subtotal)}</span>
                    </div>
                    <button
                      type="button"
                      disabled={cart.length === 0}
                      className="mt-3 w-full rounded-full bg-brand px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand/90 disabled:opacity-40"
                    >
                      Checkout
                    </button>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>

      {/* Category bar */}
      <nav
        aria-label="Categories"
        className="hidden items-center gap-1 border-t border-border px-4 py-2 md:flex"
      >
        {categories.map((cat, i) => (
          <a
            key={cat}
            href="#"
            className={cn(
              "rounded-full px-3 py-1 text-sm transition-colors",
              i === 0
                ? "font-medium text-brand-ink"
                : "text-muted hover:text-foreground",
            )}
          >
            {cat}
          </a>
        ))}
      </nav>

      {mobileOpen && (
        <nav
          aria-label="Categories"
          className="flex flex-col gap-1 border-t border-border px-4 py-3 md:hidden"
        >
          <label className="relative mb-2">
            <span className="sr-only">Search products</span>
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
            <input
              type="search"
              placeholder="Search products…"
              className="h-9 w-full rounded-full border border-border bg-background pl-9 pr-3 text-sm outline-none placeholder:text-muted-2"
            />
          </label>
          {categories.map((cat) => (
            <a
              key={cat}
              href="#"
              className="rounded-lg px-3 py-2 text-sm text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              {cat}
            </a>
          ))}
        </nav>
      )}
    </header>
  );
}
```

### Auto-hide Navbar
Sticky header that hides on scroll-down and reveals on scroll-up.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-autohide.tsx

```tsx
"use client";

import { useRef, useState } from "react";
import { useReducedMotion } from "motion/react";
import { ArrowRight, Menu, Sparkles, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AutoHideNavItem {
  label: string;
  href?: string;
}

export interface NavbarAutoHideProps {
  brand?: string;
  items?: AutoHideNavItem[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: AutoHideNavItem[] = [
  { label: "Overview" },
  { label: "Features" },
  { label: "Pricing" },
  { label: "Docs" },
];

/**
 * NavbarAutoHide — a sticky header that slides away when scrolling down and
 * reveals on the first scroll up (and is always shown near the top), gaining a
 * glass backdrop once scrolled. The block embeds a focusable scroll region so
 * the behavior previews in place. Under reduced-motion the bar never hides.
 */
export function NavbarAutoHide({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  ctaLabel = "Get started",
  className,
}: NavbarAutoHideProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const lastY = useRef(0);
  const [hidden, setHidden] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState(0);
  const [mobileOpen, setMobileOpen] = useState(false);
  const reduce = useReducedMotion();

  const onScroll = () => {
    const el = scrollRef.current;
    if (!el) return;
    const y = el.scrollTop;
    setScrolled(y > 8);
    if (y < 64) setHidden(false);
    else if (y > lastY.current + 4) setHidden(true);
    else if (y < lastY.current - 4) setHidden(false);
    lastY.current = y;
  };

  const effectiveHidden = reduce ? false : hidden;

  return (
    <div
      ref={scrollRef}
      onScroll={onScroll}
      tabIndex={0}
      role="region"
      aria-label="Auto-hide navbar demo — scroll down to hide, up to reveal"
      className={cn(
        "relative h-[26rem] overflow-y-auto rounded-2xl border border-border bg-background [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        className,
      )}
    >
      <header
        className={cn(
          "sticky top-0 z-20 transition-all duration-300",
          effectiveHidden ? "-translate-y-full" : "translate-y-0",
          scrolled
            ? "border-b border-border bg-surface/80 shadow-lg shadow-black/5 backdrop-blur-xl"
            : "border-b border-transparent bg-transparent",
        )}
      >
        <div className="flex items-center justify-between px-5 py-3.5">
          <a href="#" className="flex items-center gap-2 font-semibold">
            <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
              <Sparkles className="size-4" />
            </span>
            {brand}
          </a>

          <nav aria-label="Primary" className="hidden items-center gap-0.5 md:flex">
            {items.map((item, i) => (
              <a
                key={item.label}
                href={item.href ?? "#"}
                aria-current={active === i ? "page" : undefined}
                onClick={() => setActive(i)}
                className={cn(
                  "rounded-full px-3 py-1.5 text-sm transition-colors",
                  active === i ? "text-foreground" : "text-muted hover:text-foreground",
                )}
              >
                {item.label}
              </a>
            ))}
          </nav>

          <div className="flex items-center gap-2">
            <button
              type="button"
              className="hidden items-center gap-1.5 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:inline-flex"
            >
              {ctaLabel}
              <ArrowRight className="size-3.5" />
            </button>
            <button
              type="button"
              aria-label="Toggle menu"
              aria-expanded={mobileOpen}
              onClick={() => setMobileOpen((o) => !o)}
              className="grid size-9 place-items-center rounded-lg border border-border text-foreground md:hidden"
            >
              {mobileOpen ? <X className="size-5" /> : <Menu className="size-5" />}
            </button>
          </div>
        </div>

        {mobileOpen && (
          <div className="flex flex-col gap-1 border-t border-border bg-surface/95 px-5 py-3 backdrop-blur-xl md:hidden">
            {items.map((item, i) => (
              <a
                key={item.label}
                href={item.href ?? "#"}
                aria-current={active === i ? "page" : undefined}
                onClick={() => {
                  setActive(i);
                  setMobileOpen(false);
                }}
                className={cn(
                  "rounded-lg px-3 py-2 text-sm transition-colors",
                  active === i
                    ? "bg-background font-medium text-foreground"
                    : "text-muted hover:bg-background hover:text-foreground",
                )}
              >
                {item.label}
              </a>
            ))}
          </div>
        )}
      </header>

      <div className="px-6 pb-10">
        <section className="flex flex-col items-start py-12">
          <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-3 py-1 text-xs font-medium text-muted">
            <Sparkles className="size-3.5 text-brand-ink" />
            Scroll this panel
          </span>
          <h2 className="mt-4 max-w-md text-balance text-3xl font-semibold tracking-tight">
            Out of the way when you read, back when you need it.
          </h2>
          <p className="mt-3 max-w-md text-pretty text-muted">
            Scroll down and the bar tucks away to give content the full stage;
            the slightest scroll up brings it right back.
          </p>
        </section>

        {["Reading", "Focus", "Navigation", "Rhythm", "Polish"].map((title, i) => (
          <section key={title} className="border-t border-border py-8">
            <h3 className="text-lg font-medium">
              {String(i + 1).padStart(2, "0")} — {title}
            </h3>
            <p className="mt-2 max-w-lg text-sm text-muted">
              Filler content so the panel scrolls. The header reacts to scroll
              direction, not just position.
            </p>
          </section>
        ))}
      </div>
    </div>
  );
}
```

### Segmented Navbar
Primary navigation as a segmented control with a sliding active pill.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-segmented.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import {
  ArrowRight,
  BarChart3,
  BookOpen,
  LayoutGrid,
  Menu,
  Sparkles,
  Star,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface SegmentedNavItem {
  label: string;
  icon: ReactNode;
  href?: string;
}

export interface NavbarSegmentedProps {
  brand?: string;
  items?: SegmentedNavItem[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: SegmentedNavItem[] = [
  { label: "Overview", icon: <Sparkles className="size-4" /> },
  { label: "Features", icon: <LayoutGrid className="size-4" /> },
  { label: "Insights", icon: <BarChart3 className="size-4" /> },
  { label: "Docs", icon: <BookOpen className="size-4" /> },
];

/**
 * NavbarSegmented — a full-width bar whose primary navigation is a segmented
 * control: a single pill slides behind the active item (shared-layout
 * `layoutId`, scoped with `useId`, disabled under reduced-motion). Each item is
 * a tab with `aria-current`; the control collapses to a stacked menu on mobile.
 */
export function NavbarSegmented({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  ctaLabel = "Get started",
  className,
}: NavbarSegmentedProps) {
  const [active, setActive] = useState(0);
  const [open, setOpen] = useState(false);
  const reduce = useReducedMotion();
  const baseId = useId();

  return (
    <nav
      aria-label="Primary"
      className={cn(
        "rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center justify-between gap-4 px-4 py-3">
        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>

        <div className="hidden items-center gap-1 rounded-full border border-border bg-background p-1 md:flex">
          {items.map((item, i) => {
            const isActive = active === i;
            return (
              <button
                key={item.label}
                type="button"
                aria-current={isActive ? "page" : undefined}
                onClick={() => setActive(i)}
                className={cn(
                  "relative inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-sm transition-colors",
                  isActive ? "text-foreground" : "text-muted hover:text-foreground",
                )}
              >
                {isActive && (
                  <motion.span
                    layoutId={`${baseId}-seg`}
                    aria-hidden
                    className="absolute inset-0 -z-0 rounded-full bg-surface shadow-sm ring-1 ring-border"
                    transition={
                      reduce ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 32 }
                    }
                  />
                )}
                <span className="relative z-10 text-brand-ink">{item.icon}</span>
                <span className="relative z-10">{item.label}</span>
              </button>
            );
          })}
        </div>

        <div className="flex items-center gap-2">
          <button
            type="button"
            aria-label="Star"
            className="hidden items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-background sm:inline-flex"
          >
            <Star className="size-4 text-brand-3" />
            2.4k
          </button>
          <button
            type="button"
            className="hidden items-center gap-1.5 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:inline-flex"
          >
            {ctaLabel}
            <ArrowRight className="size-3.5" />
          </button>
          <button
            type="button"
            aria-label="Toggle menu"
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
            className="grid size-9 place-items-center rounded-lg border border-border text-foreground md:hidden"
          >
            {open ? <X className="size-5" /> : <Menu className="size-5" />}
          </button>
        </div>
      </div>

      {open && (
        <div className="flex flex-col gap-1 border-t border-border px-3 py-3 md:hidden">
          {items.map((item, i) => (
            <button
              key={item.label}
              type="button"
              aria-current={active === i ? "page" : undefined}
              onClick={() => {
                setActive(i);
                setOpen(false);
              }}
              className={cn(
                "flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors",
                active === i
                  ? "bg-background font-medium text-foreground"
                  : "text-muted hover:bg-background hover:text-foreground",
              )}
            >
              <span className="text-brand-ink">{item.icon}</span>
              {item.label}
            </button>
          ))}
          <button
            type="button"
            className="mt-2 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white"
          >
            {ctaLabel}
          </button>
        </div>
      )}
    </nav>
  );
}
```

### Docs Navbar
Documentation header with a version switcher, search, theme toggle, and star count.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-docs.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import {
  Check,
  ChevronDown,
  Menu,
  Moon,
  Search,
  Sparkles,
  Star,
  Sun,
  X,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface DocsNavItem {
  label: string;
  href?: string;
}

export interface NavbarDocsProps {
  brand?: string;
  items?: DocsNavItem[];
  versions?: string[];
  stars?: string;
  className?: string;
}

const DEFAULT_ITEMS: DocsNavItem[] = [
  { label: "Docs" },
  { label: "Guides" },
  { label: "API" },
  { label: "Community" },
];
const DEFAULT_VERSIONS = ["v3.0", "v2.4", "v1.9"];

/** Accessible single-select version switcher (menuitemradio). */
function VersionSwitcher({
  versions,
  value,
  onChange,
}: {
  versions: string[];
  value: string;
  onChange: (v: string) => void;
}) {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);

  useEffect(() => {
    if (!open) return;
    const onPointer = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onPointer);
    return () => document.removeEventListener("pointerdown", onPointer);
  }, [open]);

  useEffect(() => {
    if (open) itemRefs.current[active]?.focus();
  }, [open, active]);

  const openMenu = () => {
    setActive(Math.max(0, versions.indexOf(value)));
    setOpen(true);
  };
  const close = (returnFocus = true) => {
    setOpen(false);
    if (returnFocus) triggerRef.current?.focus();
  };
  const onMenuKey = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setActive((a) => (a + 1) % versions.length);
        break;
      case "ArrowUp":
        e.preventDefault();
        setActive((a) => (a - 1 + versions.length) % versions.length);
        break;
      case "Home":
        e.preventDefault();
        setActive(0);
        break;
      case "End":
        e.preventDefault();
        setActive(versions.length - 1);
        break;
      case "Tab":
        close(false);
        break;
      case "Escape":
        e.preventDefault();
        close();
        break;
    }
  };

  return (
    <div ref={rootRef} className="relative">
      <button
        ref={triggerRef}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={`Version ${value}. Change version`}
        onClick={() => (open ? close(false) : openMenu())}
        className="inline-flex items-center gap-1 rounded-md border border-border bg-background px-2 py-1 text-xs font-medium text-muted outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
      >
        {value}
        <ChevronDown className={cn("size-3.5 transition-transform", open && "rotate-180")} />
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            role="menu"
            aria-label="Version"
            initial={{ opacity: 0, y: -6, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.97 }}
            transition={{ duration: 0.14 }}
            onKeyDown={onMenuKey}
            className="absolute left-0 z-50 mt-1.5 min-w-32 overflow-hidden rounded-lg border border-border bg-surface p-1 shadow-xl"
          >
            {versions.map((v, i) => (
              <button
                key={v}
                ref={(el) => {
                  itemRefs.current[i] = el;
                }}
                role="menuitemradio"
                aria-checked={v === value}
                tabIndex={i === active ? 0 : -1}
                onClick={() => {
                  onChange(v);
                  close();
                }}
                onPointerMove={() => setActive(i)}
                className={cn(
                  "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm outline-none",
                  i === active && "bg-brand/15",
                )}
              >
                <span className="flex-1">{v}</span>
                {v === value && <Check className="size-3.5 text-brand-ink" />}
              </button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

/**
 * NavbarDocs — a documentation header: brand with an accessible version switcher
 * (menuitemradio), primary nav, a search field, a self-contained theme toggle
 * (aria-pressed), and a "Star" count. Collapses to a toggle menu on mobile. The
 * theme toggle is a local demo control and does not change the page theme.
 */
export function NavbarDocs({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  versions = DEFAULT_VERSIONS,
  stars = "2.4k",
  className,
}: NavbarDocsProps) {
  const [version, setVersion] = useState(versions[0]);
  const [dark, setDark] = useState(true);
  const [open, setOpen] = useState(false);

  return (
    <nav
      aria-label="Primary"
      className={cn(
        "rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center gap-3 px-4 py-3">
        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>
        <VersionSwitcher versions={versions} value={version} onChange={setVersion} />

        <div className="ml-2 hidden items-center gap-0.5 lg:flex">
          {items.map((item) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              className="rounded-lg px-3 py-1.5 text-sm text-muted transition-colors hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
        </div>

        <div className="ml-auto flex items-center gap-1.5">
          <label className="relative hidden md:block">
            <span className="sr-only">Search docs</span>
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
            <input
              type="search"
              placeholder="Search docs…"
              className="h-9 w-44 rounded-lg border border-border bg-background pl-9 pr-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-2 focus-visible:border-border-strong"
            />
          </label>

          <button
            type="button"
            onClick={() => setDark((d) => !d)}
            aria-pressed={dark}
            aria-label={dark ? "Switch to light theme" : "Switch to dark theme"}
            className="grid size-9 place-items-center rounded-lg text-muted outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
          >
            {dark ? <Moon className="size-4" /> : <Sun className="size-4" />}
          </button>

          <button
            type="button"
            aria-label={`Star the project — ${stars} stars`}
            className="inline-flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-background"
          >
            <Star className="size-4 text-brand-3" />
            <span className="tabular-nums">{stars}</span>
          </button>

          <button
            type="button"
            aria-label="Toggle menu"
            aria-expanded={open}
            onClick={() => setOpen((o) => !o)}
            className="grid size-9 place-items-center rounded-lg border border-border text-foreground lg:hidden"
          >
            {open ? <X className="size-5" /> : <Menu className="size-5" />}
          </button>
        </div>
      </div>

      {open && (
        <div className="flex flex-col gap-1 border-t border-border px-4 py-3 lg:hidden">
          <label className="relative mb-2">
            <span className="sr-only">Search docs</span>
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
            <input
              type="search"
              placeholder="Search docs…"
              className="h-9 w-full rounded-lg border border-border bg-background pl-9 pr-3 text-sm outline-none transition-colors placeholder:text-muted-2 focus-visible:border-border-strong"
            />
          </label>
          {items.map((item) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              className="rounded-lg px-3 py-2 text-sm text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
}
```

### Bottom Tab Bar
Mobile app-style bottom navigation with a sliding indicator and a center action.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-bottom.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import { Bell, Home, Plus, Search, Sparkles, User } from "lucide-react";
import { cn } from "@/lib/utils";

export interface BottomTab {
  label: string;
  icon: ReactNode;
}

export interface NavbarBottomProps {
  brand?: string;
  tabs?: BottomTab[];
  actionLabel?: string;
  className?: string;
}

const DEFAULT_TABS: BottomTab[] = [
  { label: "Home", icon: <Home className="size-5" /> },
  { label: "Search", icon: <Search className="size-5" /> },
  { label: "Activity", icon: <Bell className="size-5" /> },
  { label: "Profile", icon: <User className="size-5" /> },
];

/**
 * NavbarBottom — a mobile app-style bottom tab bar with a raised center action.
 * The active tab is colored and carries a sliding indicator bar (shared-layout
 * `layoutId`, scoped with `useId`, disabled under reduced-motion); tabs expose
 * aria-current. Shown inside a phone-style frame for preview.
 */
export function NavbarBottom({
  brand = "ONONC",
  tabs = DEFAULT_TABS,
  actionLabel = "Create",
  className,
}: NavbarBottomProps) {
  const [active, setActive] = useState(0);
  const reduce = useReducedMotion();
  const baseId = useId();

  const tabButton = (tab: BottomTab, i: number) => {
    const isActive = active === i;
    return (
      <button
        key={tab.label}
        type="button"
        aria-current={isActive ? "page" : undefined}
        onClick={() => setActive(i)}
        className={cn(
          "relative flex flex-1 flex-col items-center gap-1 rounded-lg py-1.5 text-[11px] font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-brand/60",
          isActive ? "text-brand-ink" : "text-muted hover:text-foreground",
        )}
      >
        {isActive && (
          <motion.span
            layoutId={`${baseId}-tab`}
            aria-hidden
            className="absolute -top-2 h-1 w-8 rounded-full bg-gradient-to-r from-brand to-brand-2"
            transition={
              reduce ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 34 }
            }
          />
        )}
        {tab.icon}
        {tab.label}
      </button>
    );
  };

  return (
    <div
      className={cn(
        "mx-auto flex min-h-[24rem] max-w-sm flex-col overflow-hidden rounded-[2rem] border border-border bg-background shadow-2xl shadow-black/20",
        className,
      )}
    >
      {/* Faux app screen */}
      <div className="flex items-center justify-between px-5 pb-2 pt-4">
        <span className="flex items-center gap-2 text-sm font-semibold">
          <span className="grid size-6 place-items-center rounded-md bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-3.5" />
          </span>
          {brand}
        </span>
        <span className="size-7 rounded-full bg-gradient-to-br from-brand to-brand-2" aria-hidden />
      </div>

      <div className="flex flex-1 flex-col px-5 py-4">
        <h2 className="text-2xl font-semibold tracking-tight">{tabs[active]?.label}</h2>
        <p className="mt-1 text-sm text-muted">
          Tap a tab — the indicator glides across and the center button stays put
          for the primary action.
        </p>
        <div className="mt-4 grid flex-1 gap-3">
          <div className="rounded-2xl border border-border bg-surface/60" />
          <div className="rounded-2xl border border-border bg-surface/60" />
        </div>
      </div>

      {/* Bottom tab bar */}
      <nav
        aria-label="Bottom navigation"
        className="relative flex items-center border-t border-border bg-surface/80 px-4 pb-3 pt-2 backdrop-blur-xl"
      >
        <div className="flex flex-1 justify-around">
          {tabs.slice(0, 2).map((tab, i) => tabButton(tab, i))}
        </div>
        <div className="w-16 shrink-0" aria-hidden />
        <div className="flex flex-1 justify-around">
          {tabs.slice(2).map((tab, i) => tabButton(tab, i + 2))}
        </div>

        <button
          type="button"
          aria-label={actionLabel}
          className="absolute -top-5 left-1/2 grid size-14 -translate-x-1/2 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-white shadow-lg shadow-brand/30 outline-none transition-transform hover:scale-105 focus-visible:ring-4 focus-visible:ring-brand/50 focus-visible:ring-offset-2 focus-visible:ring-offset-surface active:scale-95"
        >
          <Plus className="size-6" />
        </button>
      </nav>
    </div>
  );
}
```

### Scrollspy Navbar
One-page section nav whose active link tracks the in-view section as you scroll.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-scrollspy.tsx

```tsx
"use client";

import { useEffect, useId, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import { Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ScrollspySection {
  id: string;
  label: string;
  heading: string;
  body: string;
}

export interface NavbarScrollspyProps {
  brand?: string;
  sections?: ScrollspySection[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_SECTIONS: ScrollspySection[] = [
  { id: "overview", label: "Overview", heading: "Overview", body: "A one-page layout where the navigation tracks your reading position." },
  { id: "features", label: "Features", heading: "Features", body: "As each section scrolls into the upper band, its link lights up." },
  { id: "pricing", label: "Pricing", heading: "Pricing", body: "Click a link to glide smoothly to its section (instant under reduced-motion)." },
  { id: "faq", label: "FAQ", heading: "FAQ", body: "The active indicator slides between links with shared-layout motion." },
  { id: "contact", label: "Contact", heading: "Contact", body: "Built for landing pages and long-form, single-page documents." },
];

/**
 * NavbarScrollspy — a one-page section navigation. An IntersectionObserver
 * (scoped to the embedded scroll region) tracks which section is in the upper
 * viewport band and marks its link `aria-current`, with a sliding underline
 * indicator. Clicking a link smooth-scrolls to that section (instant under
 * reduced-motion). The scroll region is focusable for keyboard scrolling.
 */
export function NavbarScrollspy({
  brand = "ONONC",
  sections = DEFAULT_SECTIONS,
  ctaLabel = "Get started",
  className,
}: NavbarScrollspyProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const sectionRefs = useRef<(HTMLElement | null)[]>([]);
  const visible = useRef<boolean[]>([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const reduce = useReducedMotion();
  const baseId = useId();

  useEffect(() => {
    const root = scrollRef.current;
    if (!root) return;
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          const idx = Number((entry.target as HTMLElement).dataset.idx);
          visible.current[idx] = entry.isIntersecting;
        }
        const first = visible.current.findIndex(Boolean);
        if (first >= 0) setActiveIndex(first);
      },
      { root, rootMargin: "0px 0px -55% 0px", threshold: 0 },
    );
    const els = sectionRefs.current.filter(Boolean) as HTMLElement[];
    els.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, [sections.length]);

  const goTo = (i: number) => {
    setActiveIndex(i);
    const el = sectionRefs.current[i];
    const root = scrollRef.current;
    if (el && root) {
      root.scrollTo({
        top: el.offsetTop - 52,
        behavior: reduce ? "auto" : "smooth",
      });
    }
  };

  return (
    <div
      ref={scrollRef}
      tabIndex={0}
      role="region"
      aria-label="Scrollspy navbar demo — scroll to track sections"
      className={cn(
        "relative h-[26rem] overflow-y-auto rounded-2xl border border-border bg-background [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        className,
      )}
    >
      <nav
        aria-label="On this page"
        className="sticky top-0 z-20 border-b border-border bg-surface/80 backdrop-blur-xl"
      >
        <div className="flex items-center gap-4 px-4 py-2.5">
          <span className="flex shrink-0 items-center gap-2 text-sm font-semibold">
            <span className="grid size-7 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
              <Sparkles className="size-4" />
            </span>
            {brand}
          </span>
          <div className="flex flex-1 items-center gap-0.5 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
            {sections.map((section, i) => (
              <button
                key={section.id}
                type="button"
                aria-current={activeIndex === i ? "true" : undefined}
                onClick={() => goTo(i)}
                className={cn(
                  "relative shrink-0 rounded-full px-3 py-1.5 text-sm transition-colors",
                  activeIndex === i ? "text-foreground" : "text-muted hover:text-foreground",
                )}
              >
                {activeIndex === i && (
                  <motion.span
                    layoutId={`${baseId}-spy`}
                    aria-hidden
                    className="absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-gradient-to-r from-brand to-brand-2"
                    transition={reduce ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 32 }}
                  />
                )}
                {section.label}
              </button>
            ))}
          </div>
          <button
            type="button"
            className="hidden shrink-0 rounded-full bg-brand px-3.5 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:inline-block"
          >
            {ctaLabel}
          </button>
        </div>
      </nav>

      <div className="px-6">
        {sections.map((section, i) => (
          <section
            key={section.id}
            ref={(el) => {
              sectionRefs.current[i] = el;
            }}
            data-idx={i}
            aria-label={section.label}
            className="flex min-h-[15rem] scroll-mt-14 flex-col justify-center border-b border-border py-10 last:border-b-0"
          >
            <span className="text-xs font-medium uppercase tracking-widest text-brand-ink">
              {String(i + 1).padStart(2, "0")}
            </span>
            <h2 className="mt-2 text-2xl font-semibold tracking-tight">{section.heading}</h2>
            <p className="mt-2 max-w-md text-pretty text-muted">{section.body}</p>
          </section>
        ))}
      </div>
    </div>
  );
}
```

### Multi-level Navbar
Drill-down menu with nested submenus that slide between levels with a back trail.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-multilevel.tsx

```tsx
"use client";

import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion, type Variants } from "motion/react";
import {
  ArrowLeft,
  BookOpen,
  Boxes,
  ChevronRight,
  Component,
  Layers,
  LifeBuoy,
  Menu,
  Rocket,
  ShieldCheck,
  Sparkles,
  X,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface MultiLevelItem {
  label: string;
  icon?: ReactNode;
  href?: string;
  children?: MultiLevelItem[];
}

export interface NavbarMultiLevelProps {
  brand?: string;
  items?: MultiLevelItem[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: MultiLevelItem[] = [
  {
    label: "Products",
    icon: <Boxes className="size-4" />,
    children: [
      { label: "Components", icon: <Component className="size-4" />, href: "#" },
      { label: "Blocks", icon: <Layers className="size-4" />, href: "#" },
      { label: "Templates", icon: <Rocket className="size-4" />, href: "#" },
    ],
  },
  {
    label: "Solutions",
    icon: <Zap className="size-4" />,
    children: [
      { label: "For startups", href: "#" },
      {
        label: "For enterprise",
        icon: <ShieldCheck className="size-4" />,
        children: [
          { label: "Security", href: "#" },
          { label: "SSO & SAML", href: "#" },
          { label: "Audit logs", href: "#" },
        ],
      },
    ],
  },
  {
    label: "Resources",
    icon: <BookOpen className="size-4" />,
    children: [
      { label: "Documentation", href: "#" },
      { label: "Support", icon: <LifeBuoy className="size-4" />, href: "#" },
    ],
  },
  { label: "Pricing", href: "#" },
];

/**
 * NavbarMultiLevel — a navigation menu with drill-down submenus. Items with
 * children push a new level that slides in (with a back button + current title);
 * Escape steps back one level, then closes; an outside click closes. Focus moves
 * into the panel on open and to the first item on each level change, and returns
 * to the trigger on close. Level transitions collapse to a fade under reduced-motion.
 */
export function NavbarMultiLevel({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  ctaLabel = "Get started",
  className,
}: NavbarMultiLevelProps) {
  const [open, setOpen] = useState(false);
  const [stack, setStack] = useState<{ title: string; items: MultiLevelItem[] }[]>([
    { title: "Menu", items },
  ]);
  const [dir, setDir] = useState(1);
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const depthRef = useRef(0);
  const reduce = useReducedMotion();
  const panelId = useId();

  useEffect(() => {
    depthRef.current = stack.length - 1;
  });

  const back = () => {
    setDir(-1);
    setStack((s) => (s.length > 1 ? s.slice(0, -1) : s));
  };

  useEffect(() => {
    if (!open) return;
    const trigger = triggerRef.current;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.preventDefault();
        if (depthRef.current > 0) back();
        else setOpen(false);
      }
    };
    const onPointer = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("pointerdown", onPointer);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("pointerdown", onPointer);
      trigger?.focus();
    };
  }, [open]);

  // Move focus to the first item of whichever level just mounted (entering node).
  const focusLevel = useCallback((node: HTMLUListElement | null) => {
    if (!node) return;
    requestAnimationFrame(() =>
      node.querySelector<HTMLElement>("[data-item]")?.focus(),
    );
  }, []);

  const openMenu = () => {
    setStack([{ title: "Menu", items }]);
    setDir(1);
    setOpen(true);
  };
  const drill = (item: MultiLevelItem) => {
    setDir(1);
    setStack((s) => [...s, { title: item.label, items: item.children! }]);
  };

  const level = stack[stack.length - 1];
  const depth = stack.length - 1;

  const variants: Variants = reduce
    ? { enter: { opacity: 0 }, center: { opacity: 1 }, exit: { opacity: 0 } }
    : {
        enter: (d: number) => ({ x: d > 0 ? 28 : -28, opacity: 0 }),
        center: { x: 0, opacity: 1 },
        exit: (d: number) => ({ x: d > 0 ? -28 : 28, opacity: 0 }),
      };

  return (
    <nav
      aria-label="Primary"
      className={cn(
        "rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center justify-between gap-4 px-4 py-3">
        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>

        <div className="flex items-center gap-2">
          <button
            type="button"
            className="hidden rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:inline-block"
          >
            {ctaLabel}
          </button>

          <div ref={rootRef} className="relative">
            <button
              ref={triggerRef}
              type="button"
              aria-expanded={open}
              aria-controls={panelId}
              onClick={() => (open ? setOpen(false) : openMenu())}
              className="inline-flex items-center gap-2 rounded-full border border-border px-3.5 py-2 text-sm font-medium text-foreground transition-colors hover:bg-background"
            >
              {open ? <X className="size-4" /> : <Menu className="size-4" />}
              Menu
            </button>

            <AnimatePresence>
              {open && (
                <motion.div
                  id={panelId}
                  initial={reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  exit={reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.98 }}
                  transition={{ duration: 0.16, ease: "easeOut" }}
                  className="absolute right-0 top-full z-50 mt-2 w-72 overflow-hidden rounded-2xl border border-border bg-surface shadow-2xl shadow-black/30"
                >
                  <div className="flex items-center gap-2 border-b border-border px-2 py-2">
                    {depth > 0 ? (
                      <button
                        type="button"
                        onClick={back}
                        aria-label={`Back to ${stack[stack.length - 2].title}`}
                        className="grid size-7 place-items-center rounded-md text-muted outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
                      >
                        <ArrowLeft className="size-4" />
                      </button>
                    ) : (
                      <span className="grid size-7 place-items-center text-brand-ink">
                        <Sparkles className="size-4" />
                      </span>
                    )}
                    <span className="text-sm font-semibold">{level.title}</span>
                  </div>

                  <div className="relative overflow-hidden">
                    <AnimatePresence mode="popLayout" custom={dir} initial={false}>
                      <motion.ul
                        ref={focusLevel}
                        key={stack.length}
                        custom={dir}
                        variants={variants}
                        initial="enter"
                        animate="center"
                        exit="exit"
                        transition={{ duration: 0.2, ease: "easeOut" }}
                        className="p-1.5"
                      >
                        {level.items.map((item) =>
                          item.children ? (
                            <li key={item.label}>
                              <button
                                type="button"
                                data-item
                                onClick={() => drill(item)}
                                aria-label={`${item.label}, open submenu`}
                                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-foreground outline-none transition-colors hover:bg-background focus-visible:ring-2 focus-visible:ring-brand/60"
                              >
                                {item.icon && (
                                  <span className="grid size-7 shrink-0 place-items-center rounded-md border border-border text-brand-ink">
                                    {item.icon}
                                  </span>
                                )}
                                <span className="flex-1">{item.label}</span>
                                <ChevronRight className="size-4 text-muted" />
                              </button>
                            </li>
                          ) : (
                            <li key={item.label}>
                              <a
                                href={item.href ?? "#"}
                                data-item
                                onClick={() => setOpen(false)}
                                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-foreground outline-none transition-colors hover:bg-background focus-visible:ring-2 focus-visible:ring-brand/60"
                              >
                                {item.icon ? (
                                  <span className="grid size-7 shrink-0 place-items-center rounded-md border border-border text-brand-ink">
                                    {item.icon}
                                  </span>
                                ) : (
                                  <span className="size-7 shrink-0" aria-hidden />
                                )}
                                <span className="flex-1">{item.label}</span>
                              </a>
                            </li>
                          ),
                        )}
                      </motion.ul>
                    </AnimatePresence>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>
    </nav>
  );
}
```

### Dashboard Navbar
Breadcrumb trail and main bar above a secondary tab row with a sliding underline.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-dashboard.tsx

```tsx
"use client";

import { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
import { Bell, ChevronRight, Search, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NavbarDashboardProps {
  brand?: string;
  breadcrumb?: string[];
  tabs?: string[];
  userName?: string;
  notificationCount?: number;
  className?: string;
}

const DEFAULT_BREADCRUMB = ["Projects", "Acme Inc.", "Website redesign"];
const DEFAULT_TABS = ["Overview", "Activity", "Members", "Settings"];

function initials(name: string) {
  return name
    .split(" ")
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

/**
 * NavbarDashboard — an application header with a breadcrumb trail, a search and
 * notification cluster, and a secondary tab row whose underline slides to the
 * active tab (shared-layout `layoutId`, scoped with `useId`, disabled under
 * reduced-motion). The breadcrumb marks its last crumb `aria-current="page"`;
 * tabs expose `aria-current` and the row scrolls horizontally on small screens.
 */
export function NavbarDashboard({
  brand = "ONONC",
  breadcrumb = DEFAULT_BREADCRUMB,
  tabs = DEFAULT_TABS,
  userName = "Avery Quinn",
  notificationCount = 2,
  className,
}: NavbarDashboardProps) {
  const [active, setActive] = useState(0);
  const reduce = useReducedMotion();
  const baseId = useId();

  return (
    <header
      className={cn(
        "rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center gap-3 px-4 py-3">
        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          <span className="hidden sm:inline">{brand}</span>
        </a>

        <div className="hidden h-6 w-px bg-border sm:block" />

        <nav aria-label="Breadcrumb" className="min-w-0 flex-1">
          <ol className="flex items-center gap-1 overflow-hidden">
            {breadcrumb.map((crumb, i) => {
              const isLast = i === breadcrumb.length - 1;
              return (
                <li key={crumb} className="flex min-w-0 items-center gap-1">
                  {i > 0 && (
                    <ChevronRight className="size-3.5 shrink-0 text-muted-2" aria-hidden />
                  )}
                  {isLast ? (
                    <span
                      aria-current="page"
                      className="truncate text-sm font-medium text-foreground"
                    >
                      {crumb}
                    </span>
                  ) : (
                    <a
                      href="#"
                      className={cn(
                        "truncate text-sm text-muted transition-colors hover:text-foreground",
                        i === 0 ? "hidden sm:inline" : "",
                      )}
                    >
                      {crumb}
                    </a>
                  )}
                </li>
              );
            })}
          </ol>
        </nav>

        <div className="flex shrink-0 items-center gap-1.5">
          <label className="relative hidden md:block">
            <span className="sr-only">Search</span>
            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted" />
            <input
              type="search"
              placeholder="Search…"
              className="h-9 w-40 rounded-lg border border-border bg-background pl-9 pr-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-2 focus-visible:border-border-strong"
            />
          </label>
          <button
            type="button"
            aria-label={`Notifications, ${notificationCount} unread`}
            className="relative grid size-9 place-items-center rounded-lg text-muted transition-colors hover:bg-background hover:text-foreground"
          >
            <Bell className="size-4" />
            {notificationCount > 0 && (
              <span
                aria-hidden
                className="absolute right-1.5 top-1.5 size-2 rounded-full bg-brand-3 ring-2 ring-surface"
              />
            )}
          </button>
          <span
            role="img"
            className="grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-xs font-semibold text-white"
            aria-label={userName}
            title={userName}
          >
            {initials(userName)}
          </span>
        </div>
      </div>

      <nav
        aria-label="Secondary"
        className="flex items-center gap-1 overflow-x-auto border-t border-border px-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
        {tabs.map((tab, i) => {
          const isActive = active === i;
          return (
            <button
              key={tab}
              type="button"
              aria-current={isActive ? "page" : undefined}
              onClick={() => setActive(i)}
              className={cn(
                "relative shrink-0 px-3 py-2.5 text-sm transition-colors",
                isActive ? "text-foreground" : "text-muted hover:text-foreground",
              )}
            >
              {tab}
              {isActive && (
                <motion.span
                  layoutId={`${baseId}-dash-tab`}
                  aria-hidden
                  className="absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-gradient-to-r from-brand to-brand-2"
                  transition={
                    reduce ? { duration: 0 } : { type: "spring", stiffness: 380, damping: 32 }
                  }
                />
              )}
            </button>
          );
        })}
      </nav>
    </header>
  );
}
```

### Locale Navbar
Marketing bar with accessible language and currency switchers.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/navbar-locale.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { Check, ChevronDown, Globe, Menu, Sparkles, Wallet, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface LocaleOption {
  value: string;
  label: string;
  hint?: string;
}

interface RadioMenuProps {
  icon: ReactNode;
  srLabel: string;
  menuLabel: string;
  options: LocaleOption[];
  value: string;
  onChange: (v: string) => void;
}

/** A compact, accessible single-select menu (menuitemradio). */
function RadioMenu({ icon, srLabel, menuLabel, options, value, onChange }: RadioMenuProps) {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const selected = options.find((o) => o.value === value) ?? options[0];

  useEffect(() => {
    if (!open) return;
    const onPointer = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", onPointer);
    return () => document.removeEventListener("pointerdown", onPointer);
  }, [open]);

  useEffect(() => {
    if (open) itemRefs.current[active]?.focus();
  }, [open, active]);

  const openMenu = () => {
    setActive(Math.max(0, options.findIndex((o) => o.value === value)));
    setOpen(true);
  };
  const close = (returnFocus = true) => {
    setOpen(false);
    if (returnFocus) triggerRef.current?.focus();
  };
  const onMenuKey = (e: React.KeyboardEvent) => {
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setActive((a) => (a + 1) % options.length);
        break;
      case "ArrowUp":
        e.preventDefault();
        setActive((a) => (a - 1 + options.length) % options.length);
        break;
      case "Home":
        e.preventDefault();
        setActive(0);
        break;
      case "End":
        e.preventDefault();
        setActive(options.length - 1);
        break;
      case "Tab":
        close(false);
        break;
      case "Escape":
        e.preventDefault();
        close();
        break;
    }
  };

  return (
    <div ref={rootRef} className="relative">
      <button
        ref={triggerRef}
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-label={`${srLabel}: ${selected.label}`}
        onClick={() => (open ? close(false) : openMenu())}
        className="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-muted outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
      >
        <span className="text-brand-ink">{icon}</span>
        <span className="font-medium text-foreground">{selected.label}</span>
        <ChevronDown className={cn("size-3.5 transition-transform", open && "rotate-180")} />
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            role="menu"
            aria-label={menuLabel}
            initial={{ opacity: 0, y: -6, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.97 }}
            transition={{ duration: 0.14 }}
            onKeyDown={onMenuKey}
            className="absolute right-0 z-50 mt-2 min-w-44 overflow-hidden rounded-xl border border-border bg-surface p-1.5 shadow-2xl shadow-black/25"
          >
            {options.map((opt, i) => (
              <button
                key={opt.value}
                ref={(el) => {
                  itemRefs.current[i] = el;
                }}
                role="menuitemradio"
                aria-checked={opt.value === value}
                tabIndex={i === active ? 0 : -1}
                onClick={() => {
                  onChange(opt.value);
                  close();
                }}
                onPointerMove={() => setActive(i)}
                className={cn(
                  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm outline-none",
                  i === active && "bg-brand/15",
                )}
              >
                <span className="flex-1 text-foreground">{opt.label}</span>
                {opt.hint && <span className="text-xs text-muted">{opt.hint}</span>}
                {opt.value === value && <Check className="size-4 text-brand-ink" />}
              </button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export interface LocaleNavItem {
  label: string;
  href?: string;
}

export interface NavbarLocaleProps {
  brand?: string;
  items?: LocaleNavItem[];
  languages?: LocaleOption[];
  currencies?: LocaleOption[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: LocaleNavItem[] = [
  { label: "Product" },
  { label: "Pricing" },
  { label: "Customers" },
  { label: "Docs" },
];
const DEFAULT_LANGUAGES: LocaleOption[] = [
  { value: "en", label: "English" },
  { value: "ko", label: "한국어" },
  { value: "es", label: "Español" },
  { value: "de", label: "Deutsch" },
  { value: "ja", label: "日本語" },
];
const DEFAULT_CURRENCIES: LocaleOption[] = [
  { value: "usd", label: "USD", hint: "$" },
  { value: "eur", label: "EUR", hint: "€" },
  { value: "gbp", label: "GBP", hint: "£" },
  { value: "krw", label: "KRW", hint: "₩" },
];

/**
 * NavbarLocale — a marketing bar with accessible language and currency
 * switchers. Each switcher is a single-select menu (menuitemradio + aria-checked)
 * with full keyboard support (Arrow/Home/End/Tab/Escape), outside-click close,
 * and focus return to its trigger. Collapses to a toggle menu on mobile.
 */
export function NavbarLocale({
  brand = "ONONC",
  items = DEFAULT_ITEMS,
  languages = DEFAULT_LANGUAGES,
  currencies = DEFAULT_CURRENCIES,
  ctaLabel = "Get started",
  className,
}: NavbarLocaleProps) {
  const [lang, setLang] = useState(languages[0].value);
  const [currency, setCurrency] = useState(currencies[0].value);
  const [open, setOpen] = useState(false);

  return (
    <nav
      aria-label="Primary"
      className={cn(
        "rounded-2xl border border-border bg-surface/70 backdrop-blur-xl",
        className,
      )}
    >
      <div className="flex items-center justify-between gap-4 px-4 py-3">
        <a href="#" className="flex shrink-0 items-center gap-2 font-semibold">
          <span className="grid size-8 place-items-center rounded-lg bg-gradient-to-br from-brand to-brand-2 text-white">
            <Sparkles className="size-4" />
          </span>
          {brand}
        </a>

        <div className="hidden items-center gap-0.5 md:flex">
          {items.map((item) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              className="rounded-full px-3 py-1.5 text-sm text-muted transition-colors hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
        </div>

        <div className="hidden items-center gap-1 md:flex">
          <RadioMenu
            icon={<Globe className="size-4" />}
            srLabel="Language"
            menuLabel="Select language"
            options={languages}
            value={lang}
            onChange={setLang}
          />
          <RadioMenu
            icon={<Wallet className="size-4" />}
            srLabel="Currency"
            menuLabel="Select currency"
            options={currencies}
            value={currency}
            onChange={setCurrency}
          />
          <button
            type="button"
            className="ml-1 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
          >
            {ctaLabel}
          </button>
        </div>

        <button
          type="button"
          aria-label="Toggle menu"
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
          className="grid size-9 place-items-center rounded-lg border border-border text-foreground md:hidden"
        >
          {open ? <X className="size-5" /> : <Menu className="size-5" />}
        </button>
      </div>

      {open && (
        <div className="flex flex-col gap-1 border-t border-border px-4 py-3 md:hidden">
          {items.map((item) => (
            <a
              key={item.label}
              href={item.href ?? "#"}
              className="rounded-lg px-3 py-2 text-sm text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              {item.label}
            </a>
          ))}
          <div className="mt-2 flex items-center gap-2 border-t border-border pt-3">
            <RadioMenu
              icon={<Globe className="size-4" />}
              srLabel="Language"
              menuLabel="Select language"
              options={languages}
              value={lang}
              onChange={setLang}
            />
            <RadioMenu
              icon={<Wallet className="size-4" />}
              srLabel="Currency"
              menuLabel="Select currency"
              options={currencies}
              value={currency}
              onChange={setCurrency}
            />
          </div>
          <button
            type="button"
            className="mt-2 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white"
          >
            {ctaLabel}
          </button>
        </div>
      )}
    </nav>
  );
}
```

### Hero
Animated marketing hero over an aurora field.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-block.tsx

```tsx
"use client";

import { ArrowRight, Sparkles } from "lucide-react";
import { motion, type Variants } from "motion/react";
import { AuroraBackground } from "@/components/backgrounds/aurora-background";
import { GradientText } from "@/components/text/gradient-text";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { cn } from "@/lib/utils";

export interface HeroBlockProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase appended after the title, rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  className?: string;
}

const container: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
};
const item: Variants = {
  hidden: { opacity: 0, y: 24 },
  show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 120, damping: 18 } },
};

/**
 * HeroBlock — a centered marketing hero over an aurora field, with an eyebrow
 * pill, gradient highlight, and call-to-action buttons. Content animates in.
 */
export function HeroBlock({
  eyebrow = "Introducing ONONC",
  title = "Build interfaces that feel",
  highlight = "alive.",
  description = "A set of original, motion-first React components — backgrounds, text effects, and polished blocks — ready to drop into your Next.js app.",
  primaryLabel = "Get started",
  secondaryLabel = "Browse components",
  className,
}: HeroBlockProps) {
  return (
    <AuroraBackground
      className={cn("flex min-h-[32rem] items-center justify-center rounded-2xl px-6 py-20", className)}
    >
      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.3 }}
        className="mx-auto max-w-3xl text-center"
      >
        <motion.span
          variants={item}
          className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-3 py-1 text-xs font-medium text-muted backdrop-blur"
        >
          <Sparkles className="size-3.5 text-brand-ink" />
          {eyebrow}
        </motion.span>
        <motion.h1
          variants={item}
          className="mt-6 text-balance text-4xl font-semibold tracking-tight sm:text-6xl"
        >
          {title} <GradientText>{highlight}</GradientText>
        </motion.h1>
        <motion.p
          variants={item}
          className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg"
        >
          {description}
        </motion.p>
        <motion.div
          variants={item}
          className="mt-9 flex flex-wrap items-center justify-center gap-4"
        >
          <MagneticButton aria-label={primaryLabel}>
            {primaryLabel}
            <ArrowRight className="size-4" />
          </MagneticButton>
          <button className="rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface">
            {secondaryLabel}
          </button>
        </motion.div>
      </motion.div>
    </AuroraBackground>
  );
}
```

### Hero Split
Asymmetric product hero with a tilting app-window mock, live chart, and floating stats.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-split.tsx

```tsx
"use client";

import { useId } from "react";
import { ArrowRight, CheckCircle2, Play, Star, TrendingUp } from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { AvatarStack } from "@/components/ui/avatar-stack";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { TiltCard } from "@/components/ui/tilt-card";
import { cn } from "@/lib/utils";

export interface HeroSplitProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase appended after the title, rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  /** Names used for the social-proof avatar stack. */
  customers?: string[];
  className?: string;
}

const container: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1, delayChildren: 0.04 } },
};
const item: Variants = {
  hidden: { opacity: 0, y: 20 },
  show: {
    opacity: 1,
    y: 0,
    transition: { type: "spring", stiffness: 130, damping: 18 },
  },
};

/**
 * HeroSplit — an asymmetric product hero: persuasive copy and social proof on
 * the left, a 3D-tilting app-window mock with a live-feeling chart and floating
 * glass stats on the right, all over a faint dotted grid and a soft brand glow.
 */
export function HeroSplit({
  eyebrow = "New · Analytics 2.0",
  title = "Ship products your users",
  highlight = "actually love",
  description = "A motion-first toolkit for building fast, beautiful interfaces — real-time insight, zero configuration, and a design system that scales with your team.",
  primaryLabel = "Start free",
  secondaryLabel = "Watch demo",
  customers = ["Ava Chen", "Liam Park", "Noah Kim", "Mia Cho", "Eli Ramos"],
  className,
}: HeroSplitProps) {
  const reduce = useReducedMotion();
  const uid = useId().replace(/:/g, "");

  const reveal = reduce
    ? {}
    : {
        variants: container,
        initial: "hidden" as const,
        whileInView: "show" as const,
        viewport: { once: true, amount: 0.3 },
      };

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-background px-6 py-16 sm:px-10 lg:py-20",
        className,
      )}
    >
      {/* Faint dotted grid, faded toward the edges. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 opacity-60"
        style={{
          backgroundImage:
            "radial-gradient(circle at 1px 1px, var(--border-strong) 1px, transparent 0)",
          backgroundSize: "26px 26px",
          maskImage:
            "radial-gradient(130% 120% at 30% 0%, #000 35%, transparent 78%)",
          WebkitMaskImage:
            "radial-gradient(130% 120% at 30% 0%, #000 35%, transparent 78%)",
        }}
      />
      {/* Soft brand glow anchored top-left. */}
      <div
        aria-hidden
        className="pointer-events-none absolute -left-24 -top-28 -z-10 size-[30rem] rounded-full opacity-50 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand) 45%, transparent), transparent 70%)",
        }}
      />

      <div className="grid items-center gap-12 lg:grid-cols-2">
        {/* Copy column */}
        <motion.div {...reveal} className="max-w-xl">
          <motion.span
            variants={item}
            className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur"
          >
            <span className="relative flex size-1.5">
              <span className="absolute inline-flex size-full animate-ping rounded-full bg-brand-2 opacity-75" />
              <span className="relative inline-flex size-1.5 rounded-full bg-brand-2" />
            </span>
            {eyebrow}
          </motion.span>

          <motion.h1
            variants={item}
            className="mt-5 text-4xl font-semibold tracking-tight text-balance sm:text-5xl"
          >
            {title} <GradientText>{highlight}</GradientText>
          </motion.h1>

          <motion.p
            variants={item}
            className="mt-5 max-w-lg text-pretty text-base text-muted sm:text-lg"
          >
            {description}
          </motion.p>

          <motion.div
            variants={item}
            className="mt-8 flex flex-wrap items-center gap-3"
          >
            <MagneticButton aria-label={primaryLabel}>
              {primaryLabel}
              <ArrowRight className="size-4" />
            </MagneticButton>
            <button
              type="button"
              className="inline-flex items-center gap-2 rounded-full border border-border px-5 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface"
            >
              <Play className="size-4 text-brand-ink" />
              {secondaryLabel}
            </button>
          </motion.div>

          {/* Social proof */}
          <motion.div
            variants={item}
            className="mt-9 flex flex-wrap items-center gap-x-4 gap-y-3"
          >
            <AvatarStack names={customers} max={4} />
            <div className="text-sm">
              <div className="flex items-center gap-1 text-brand-3">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star key={i} className="size-4 fill-current" />
                ))}
              </div>
              <p className="mt-0.5 text-muted">
                Trusted by{" "}
                <span className="font-semibold text-foreground">2,000+</span>{" "}
                product teams
              </p>
            </div>
          </motion.div>
        </motion.div>

        {/* Product mock column */}
        <motion.div
          initial={reduce ? false : { opacity: 0, y: 24, scale: 0.97 }}
          whileInView={reduce ? undefined : { opacity: 1, y: 0, scale: 1 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ type: "spring", stiffness: 90, damping: 18, delay: 0.1 }}
          className="relative mx-auto w-full max-w-md lg:mx-0"
        >
          <TiltCard
            max={8}
            className="rounded-2xl border border-border-strong bg-surface shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)]"
          >
            <div className="overflow-hidden rounded-2xl">
              {/* Window chrome */}
              <div className="flex items-center gap-2 border-b border-border bg-background/60 px-4 py-3">
                <span className="size-2.5 rounded-full bg-brand-3/80" />
                <span className="size-2.5 rounded-full bg-brand/70" />
                <span className="size-2.5 rounded-full bg-brand-2/70" />
                <span className="ml-3 truncate rounded-md border border-border bg-surface px-2 py-0.5 text-[11px] text-muted">
                  app.ononc.dev/overview
                </span>
              </div>

              {/* App body */}
              <div className="grid grid-cols-[56px_1fr]">
                {/* Mini sidebar */}
                <div className="flex flex-col gap-3 border-r border-border bg-background/40 p-3">
                  <span className="size-7 rounded-lg bg-gradient-to-br from-brand to-brand-2" />
                  <span className="h-1.5 w-6 rounded-full bg-border-strong" />
                  <span className="h-1.5 w-7 rounded-full bg-border-strong" />
                  <span className="h-1.5 w-5 rounded-full bg-border-strong" />
                  <span className="mt-auto size-7 rounded-full bg-gradient-to-br from-brand-2 to-brand-3" />
                </div>

                {/* Main panel */}
                <div className="space-y-4 p-4">
                  <div className="flex items-end justify-between">
                    <div>
                      <p className="text-[11px] uppercase tracking-wide text-muted">
                        Revenue
                      </p>
                      <p className="text-2xl font-semibold tracking-tight">
                        $48,250
                      </p>
                    </div>
                    <span className="inline-flex items-center gap-1 rounded-full bg-brand/10 px-2 py-1 text-xs font-medium text-brand-2">
                      <TrendingUp className="size-3.5" />
                      +128%
                    </span>
                  </div>

                  {/* Area chart */}
                  <svg
                    viewBox="0 0 320 120"
                    className="h-24 w-full"
                    preserveAspectRatio="none"
                    role="img"
                    aria-label="Revenue trending upward over time"
                  >
                    <defs>
                      <linearGradient id={`${uid}-area`} x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="var(--brand)" stopOpacity="0.35" />
                        <stop offset="100%" stopColor="var(--brand)" stopOpacity="0" />
                      </linearGradient>
                      <linearGradient id={`${uid}-line`} x1="0" y1="0" x2="1" y2="0">
                        <stop offset="0%" stopColor="var(--brand-ink)" />
                        <stop offset="100%" stopColor="var(--brand-2)" />
                      </linearGradient>
                    </defs>
                    <path
                      d="M0,96 C28,86 44,70 72,72 C104,74 120,40 152,44 C188,49 208,22 244,30 C276,37 296,18 320,12 L320,120 L0,120 Z"
                      fill={`url(#${uid}-area)`}
                    />
                    <path
                      d="M0,96 C28,86 44,70 72,72 C104,74 120,40 152,44 C188,49 208,22 244,30 C276,37 296,18 320,12"
                      fill="none"
                      stroke={`url(#${uid}-line)`}
                      strokeWidth="2.5"
                      strokeLinecap="round"
                    />
                  </svg>

                  {/* Stat tiles */}
                  <div className="grid grid-cols-2 gap-3">
                    <div className="rounded-xl border border-border bg-background/50 p-3">
                      <p className="text-[11px] text-muted">Active users</p>
                      <p className="mt-1 text-lg font-semibold tracking-tight">
                        12,480
                      </p>
                    </div>
                    <div className="rounded-xl border border-border bg-background/50 p-3">
                      <p className="text-[11px] text-muted">Conversion</p>
                      <p className="mt-1 text-lg font-semibold tracking-tight">
                        6.4%
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </TiltCard>

          {/* Floating glass badges */}
          <div
            className="animate-float absolute -left-3 top-20 flex items-center gap-2 rounded-xl border border-border bg-surface/90 px-3 py-2 shadow-lg backdrop-blur sm:-left-5"
            style={{ animationDelay: "-1.5s" }}
          >
            <CheckCircle2 className="size-4 text-brand-2" />
            <span className="text-xs font-medium">Deployed to edge</span>
          </div>
          <div
            className="animate-float absolute -right-2 bottom-12 flex items-center gap-2 rounded-xl border border-border bg-surface/90 px-3 py-2 shadow-lg backdrop-blur sm:-right-4"
            style={{ animationDelay: "-3.5s" }}
          >
            <span className="grid size-5 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-[10px] font-bold text-white">
              ↑
            </span>
            <span className="text-xs font-medium">+2,418 today</span>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
```

### Hero Spotlight
Centered hero with a pointer-tracked spotlight over a dot grid and a trusted-by marquee.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-spotlight.tsx

```tsx
"use client";

import type { PointerEvent } from "react";
import { ArrowRight, Sparkles } from "lucide-react";
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useReducedMotion,
  useSpring,
} from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { Marquee } from "@/components/ui/marquee";
import { cn } from "@/lib/utils";

export interface HeroSpotlightProps {
  badge?: string;
  announcement?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  /** Wordmarks shown in the "trusted by" marquee. */
  brands?: string[];
  className?: string;
}

const DEFAULT_BRANDS = [
  "Northwind",
  "Acme Co",
  "Globex",
  "Initech",
  "Umbra",
  "Hooli",
  "Soylent",
  "Vandelay",
];

/**
 * HeroSpotlight — a focused, centered hero where a soft spotlight follows the
 * pointer and reveals a fine dot grid beneath. Carries an announcement
 * pill-link, a gradient headline, dual CTAs, and a quiet trusted-by marquee.
 * Under reduced motion the spotlight rests, centered, with no follow.
 */
export function HeroSpotlight({
  badge = "New",
  announcement = "Realtime collaboration just landed",
  title = "The canvas where ideas",
  highlight = "move at the speed of thought",
  description = "Design, prototype, and ship in one fluid space. Built for teams who care about the details — down to the last pixel and millisecond.",
  primaryLabel = "Get started",
  secondaryLabel = "Book a demo",
  brands = DEFAULT_BRANDS,
  className,
}: HeroSpotlightProps) {
  const reduce = useReducedMotion();
  // Spotlight position in percentages; springs give it gentle inertia.
  const mx = useMotionValue(50);
  const my = useMotionValue(38);
  const sx = useSpring(mx, { stiffness: 120, damping: 24, mass: 0.5 });
  const sy = useSpring(my, { stiffness: 120, damping: 24, mass: 0.5 });
  const mask = useMotionTemplate`radial-gradient(280px circle at ${sx}% ${sy}%, #000 0%, transparent 72%)`;

  const handleMove = (e: PointerEvent<HTMLDivElement>) => {
    if (reduce) return;
    const rect = e.currentTarget.getBoundingClientRect();
    mx.set(((e.clientX - rect.left) / rect.width) * 100);
    my.set(((e.clientY - rect.top) / rect.height) * 100);
  };

  const dots =
    "radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--brand-ink) 60%, transparent) 1px, transparent 0)";

  return (
    <section
      onPointerMove={handleMove}
      className={cn(
        "relative isolate flex min-h-[34rem] flex-col items-center justify-center overflow-hidden rounded-2xl border border-border bg-background px-6 py-20 text-center",
        className,
      )}
    >
      {/* Dim base dot grid. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.12]"
        style={{ backgroundImage: dots, backgroundSize: "24px 24px" }}
      />
      {/* Bright dot grid, revealed only inside the moving spotlight. */}
      <motion.div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10"
        style={{
          backgroundImage: dots,
          backgroundSize: "24px 24px",
          maskImage: mask,
          WebkitMaskImage: mask,
        }}
      />
      {/* Warm center wash for depth. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-2/3"
        style={{
          background:
            "radial-gradient(60% 80% at 50% 0%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 70%)",
        }}
      />

      <motion.div
        initial={reduce ? false : { opacity: 0, y: 16 }}
        animate={reduce ? undefined : { opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="flex flex-col items-center"
      >
        {/* Announcement pill-link */}
        <a
          href="#"
          className="group inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 py-1 pl-1 pr-3 text-sm backdrop-blur transition-colors hover:border-border-strong"
        >
          <span className="inline-flex items-center gap-1 rounded-full bg-brand px-2 py-0.5 text-[11px] font-semibold text-white">
            <Sparkles className="size-3" />
            {badge}
          </span>
          <span className="text-muted">{announcement}</span>
          <ArrowRight className="size-3.5 text-muted transition-transform group-hover:translate-x-0.5" />
        </a>

        <h1 className="mt-6 max-w-3xl text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          {title}{" "}
          <GradientText className="block sm:inline">{highlight}</GradientText>
        </h1>

        <p className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>

        <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
          <button
            type="button"
            className="inline-flex items-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
          >
            {primaryLabel}
            <ArrowRight className="size-4" />
          </button>
          <button
            type="button"
            className="rounded-full border border-border bg-surface/50 px-6 py-3 text-sm font-semibold text-foreground backdrop-blur transition-colors hover:bg-surface"
          >
            {secondaryLabel}
          </button>
        </div>
      </motion.div>

      {/* Trusted-by marquee */}
      <div className="mt-16 w-full max-w-3xl">
        <p className="text-xs uppercase tracking-[0.2em] text-muted-2">
          Trusted by fast-moving teams
        </p>
        <Marquee className="mt-5" duration={32} pauseOnHover>
          {brands.map((brand) => (
            <span
              key={brand}
              className="mx-6 text-lg font-semibold tracking-tight text-muted/70 transition-colors hover:text-foreground"
            >
              {brand}
            </span>
          ))}
        </Marquee>
      </div>
    </section>
  );
}
```

### Hero Glow
Centered hero with a drifting conic glow and an app screenshot fading into the page.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-glow.tsx

```tsx
import { ArrowRight, Circle } from "lucide-react";
import { GradientText } from "@/components/text/gradient-text";
import { cn } from "@/lib/utils";

export interface HeroGlowProps {
  announcement?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  className?: string;
}

/**
 * HeroGlow — a centered hero anchored by a large, slowly drifting conic glow,
 * with a framed app screenshot mock peeking up from below and fading into the
 * page. Fully server-renderable (no client JS); life comes from CSS only, so
 * it freezes gracefully under prefers-reduced-motion.
 */
export function HeroGlow({
  announcement = "ONONC 2.0 is here",
  title = "Your whole workflow, in one",
  highlight = "luminous workspace",
  description = "Plan, build, and launch without switching tabs. A single, fast surface for the work that matters — beautifully out of your way.",
  primaryLabel = "Start building",
  secondaryLabel = "See what's new",
  className,
}: HeroGlowProps) {
  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-background px-6 pt-16 sm:pt-20",
        className,
      )}
    >
      {/* Drifting conic glow orb. */}
      <div
        aria-hidden
        className="animate-float pointer-events-none absolute left-1/2 top-[-18%] -z-10 size-[40rem] max-w-[120%] -translate-x-1/2 rounded-full opacity-50 blur-3xl"
        style={{
          background:
            "conic-gradient(from 90deg at 50% 50%, var(--brand), var(--brand-2), var(--brand-3), var(--brand))",
        }}
      />
      {/* Fine top grid lines for structure. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-72 opacity-[0.4]"
        style={{
          backgroundImage:
            "linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)",
          backgroundSize: "44px 44px",
          maskImage: "linear-gradient(#000, transparent)",
          WebkitMaskImage: "linear-gradient(#000, transparent)",
        }}
      />

      <div className="mx-auto max-w-3xl text-center">
        <a
          href="#"
          className="group inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-sm text-muted backdrop-blur transition-colors hover:border-border-strong hover:text-foreground"
        >
          <Circle className="size-2 fill-brand-2 text-brand-2" />
          {announcement}
          <ArrowRight className="size-3.5 transition-transform group-hover:translate-x-0.5" />
        </a>

        <h1 className="mt-6 text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          {title} <GradientText>{highlight}</GradientText>
        </h1>

        <p className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>

        <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
          <a
            href="#"
            className="inline-flex items-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
          >
            {primaryLabel}
            <ArrowRight className="size-4" />
          </a>
          <a
            href="#"
            className="rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface"
          >
            {secondaryLabel}
          </a>
        </div>
      </div>

      {/* Framed app screenshot mock, fading into the page. */}
      <div className="relative mx-auto mt-14 max-w-4xl">
        <div className="overflow-hidden rounded-t-2xl border border-border-strong border-b-0 bg-surface shadow-[0_-10px_60px_-20px_var(--brand)]">
          {/* Window chrome */}
          <div className="flex items-center gap-2 border-b border-border bg-background/60 px-4 py-3">
            <span className="size-2.5 rounded-full bg-brand-3/70" />
            <span className="size-2.5 rounded-full bg-brand/60" />
            <span className="size-2.5 rounded-full bg-brand-2/60" />
            <span className="mx-auto rounded-md border border-border bg-surface px-6 py-0.5 text-[11px] text-muted">
              ononc.dev
            </span>
          </div>
          {/* Abstract app layout */}
          <div className="grid grid-cols-[72px_1fr] gap-0 sm:grid-cols-[96px_1fr]">
            <div className="flex flex-col gap-3 border-r border-border bg-background/40 p-4">
              <span className="size-8 rounded-lg bg-gradient-to-br from-brand to-brand-2" />
              <span className="h-2 w-full rounded-full bg-border-strong" />
              <span className="h-2 w-3/4 rounded-full bg-border-strong" />
              <span className="h-2 w-full rounded-full bg-border-strong" />
              <span className="h-2 w-2/3 rounded-full bg-border-strong" />
            </div>
            <div className="space-y-4 p-5">
              <div className="flex items-center justify-between">
                <span className="h-3 w-32 rounded-full bg-border-strong" />
                <span className="h-7 w-20 rounded-full bg-brand/30" />
              </div>
              <div className="grid grid-cols-3 gap-3">
                {[0, 1, 2].map((i) => (
                  <div
                    key={i}
                    className="rounded-xl border border-border bg-background/50 p-4"
                  >
                    <span className="block h-2 w-10 rounded-full bg-border-strong" />
                    <span className="mt-3 block h-5 w-16 rounded-md bg-gradient-to-r from-brand/40 to-brand-2/30" />
                  </div>
                ))}
              </div>
              <div className="flex h-28 items-end gap-2 rounded-xl border border-border bg-background/50 p-4">
                {[40, 65, 35, 80, 55, 92, 48, 70].map((h, i) => (
                  <span
                    key={i}
                    className="flex-1 rounded-t bg-gradient-to-t from-brand/30 to-brand-2/70"
                    style={{ height: `${h}%` }}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
        {/* Fade the mock into the page bottom. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-background to-transparent"
        />
      </div>
    </section>
  );
}
```

### Hero Editorial
Typography-forward, left-aligned hero with hairline meta rows and a word-by-word reveal.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-editorial.tsx

```tsx
"use client";

import { Fragment } from "react";
import { ArrowUpRight } from "lucide-react";
import {
  motion,
  useReducedMotion,
  type MotionProps,
  type Variants,
} from "motion/react";
import { GradientUnderline } from "@/components/text/gradient-underline";
import { cn } from "@/lib/utils";

export interface HeroEditorialProps {
  eyebrow?: string;
  /** Small right-aligned meta on the top hairline, e.g. an issue/volume. */
  index?: string;
  /** Words before the emphasized phrase. */
  title?: string;
  /** Emphasized phrase, set in gradient italics. */
  highlight?: string;
  /** Words after the emphasized phrase. */
  titleAfter?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  /** Items shown on the bottom hairline meta row. */
  meta?: string[];
  className?: string;
}

const headline: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.06, delayChildren: 0.05 } },
};
const word: Variants = {
  hidden: { opacity: 0, y: "0.5em", filter: "blur(6px)" },
  show: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.5, ease: "easeOut" },
  },
};

/**
 * HeroEditorial — a typography-forward, left-aligned hero with generous
 * whitespace, hairline meta rows top and bottom, a headline that resolves word
 * by word, and an understated gradient-underline call to action. The aesthetic
 * is restraint; the only flourish is the emphasized phrase.
 */
export function HeroEditorial({
  eyebrow = "Studio — Independent design practice",
  index = "Vol. 01 / 2026",
  title = "We build brands that",
  highlight = "speak",
  titleAfter = "before a single word is read.",
  description = "A small studio for ambitious teams. We shape identity, motion, and interface into one coherent voice — considered, deliberate, and unmistakably yours.",
  primaryLabel = "View selected work",
  secondaryLabel = "Read our approach",
  meta = ["Based in Seoul", "Est. 2026", "Available for projects"],
  className,
}: HeroEditorialProps) {
  const reduce = useReducedMotion();

  const tokens = [
    ...title.split(" ").map((t) => ({ text: t, em: false })),
    { text: highlight, em: true },
    ...titleAfter.split(" ").map((t) => ({ text: t, em: false })),
  ];

  const fadeUp = (delay: number): MotionProps =>
    reduce
      ? {}
      : {
          initial: { opacity: 0, y: 14 },
          whileInView: { opacity: 1, y: 0 },
          viewport: { once: true, amount: 0.4 },
          transition: { duration: 0.6, ease: "easeOut", delay },
        };

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-surface px-8 py-16 sm:px-12 sm:py-20",
        className,
      )}
    >
      {/* Faint paper grain for an editorial texture. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.03] mix-blend-overlay"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
        }}
      />

      <div className="mx-auto max-w-4xl">
        {/* Top hairline */}
        <motion.div
          {...fadeUp(0)}
          className="flex items-center justify-between gap-4 border-b border-border pb-5 text-xs uppercase tracking-[0.2em] text-muted"
        >
          <span className="inline-flex items-center gap-2">
            <span className="size-1.5 rounded-full bg-brand-2" />
            {eyebrow}
          </span>
          <span className="shrink-0 text-muted-2">{index}</span>
        </motion.div>

        {/* Headline, revealed word by word */}
        <motion.h1
          variants={reduce ? undefined : headline}
          initial={reduce ? false : "hidden"}
          whileInView={reduce ? undefined : "show"}
          viewport={{ once: true, amount: 0.3 }}
          className="mt-10 text-balance text-5xl font-semibold leading-[0.98] tracking-tight sm:text-7xl"
        >
          {tokens.map((t, i) => (
            <Fragment key={i}>
              <motion.span
                variants={reduce ? undefined : word}
                className={cn(
                  "inline-block",
                  t.em && "text-gradient italic",
                )}
              >
                {t.text}
              </motion.span>
              {i < tokens.length - 1 ? " " : null}
            </Fragment>
          ))}
        </motion.h1>

        {/* Lead */}
        <motion.p
          {...fadeUp(0.15)}
          className="mt-8 max-w-xl text-pretty text-lg leading-relaxed text-muted"
        >
          {description}
        </motion.p>

        {/* Calls to action */}
        <motion.div
          {...fadeUp(0.25)}
          className="mt-10 flex flex-wrap items-center gap-x-7 gap-y-3"
        >
          <GradientUnderline
            href="#"
            className="inline-flex items-center gap-1 text-base"
          >
            {primaryLabel}
            <ArrowUpRight className="size-4" />
          </GradientUnderline>
          <a
            href="#"
            className="text-sm text-muted transition-colors hover:text-foreground"
          >
            {secondaryLabel}
          </a>
        </motion.div>

        {/* Bottom hairline meta */}
        <motion.div
          {...fadeUp(0.35)}
          className="mt-16 flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-border pt-6 text-xs uppercase tracking-[0.18em] text-muted-2"
        >
          {meta.map((m, i) => (
            <Fragment key={m}>
              {i > 0 && <span className="text-border-strong">/</span>}
              <span>{m}</span>
            </Fragment>
          ))}
        </motion.div>
      </div>
    </section>
  );
}
```

### Hero Terminal
Developer hero with a self-typing terminal window and a copy-to-clipboard install command.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-terminal.tsx

```tsx
"use client";

import { useEffect, useState } from "react";
import { ArrowRight, Check, Copy, TerminalSquare } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { cn } from "@/lib/utils";

export interface HeroTerminalProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  titleAfter?: string;
  description?: string;
  /** The install command shown in the copyable field. */
  command?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  className?: string;
}

type LineKind = "command" | "comment" | "output" | "success";
interface Line {
  kind: LineKind;
  text: string;
}

const LINES: Line[] = [
  { kind: "command", text: "npm create ononc@latest my-app" },
  { kind: "comment", text: "# scaffolding a fresh workspace…" },
  { kind: "output", text: "✓ 82 components linked" },
  { kind: "output", text: "✓ Tailwind v4 + tokens configured" },
  { kind: "command", text: "cd my-app && npm run dev" },
  { kind: "success", text: "▲ Ready on http://localhost:3000" },
];

const FULL_SCRIPT =
  "Terminal demo: scaffold a project with npm create ononc, install dependencies, then run npm run dev to start the server.";

function lineColor(kind: LineKind) {
  switch (kind) {
    case "command":
      return "text-foreground";
    case "comment":
      return "text-muted-2";
    case "success":
      return "text-brand-2";
    default:
      return "text-muted";
  }
}

/**
 * HeroTerminal — a developer-facing hero. The left column carries the pitch and
 * a copy-to-clipboard install command; the right is a terminal window that
 * types its session out line by line. Typing is skipped (shown in full) under
 * prefers-reduced-motion, and the animated pane is hidden from screen readers
 * in favor of a static description.
 */
export function HeroTerminal({
  eyebrow = "Developer-first",
  title = "Go from zero to",
  highlight = "production",
  titleAfter = "in minutes.",
  description = "A typed, tree-shakeable component layer with sensible defaults. Install once, theme with CSS variables, and ship interfaces that feel hand-crafted.",
  command = "npm i ononc",
  primaryLabel = "Read the docs",
  secondaryLabel = "Browse components",
  className,
}: HeroTerminalProps) {
  const reduce = useReducedMotion();
  const [lineIndex, setLineIndex] = useState(0);
  const [charIndex, setCharIndex] = useState(0);
  const [copied, setCopied] = useState(false);
  const done = lineIndex >= LINES.length;

  useEffect(() => {
    if (lineIndex >= LINES.length) return;
    // Reduced motion: reveal the whole session at once.
    if (reduce) {
      const t = setTimeout(() => setLineIndex(LINES.length), 0);
      return () => clearTimeout(t);
    }
    const current = LINES[lineIndex];
    let timeout: ReturnType<typeof setTimeout>;
    if (charIndex < current.text.length) {
      const speed = current.kind === "command" ? 46 : 14;
      timeout = setTimeout(() => setCharIndex((c) => c + 1), speed);
    } else {
      const pause = current.kind === "command" ? 420 : 150;
      timeout = setTimeout(() => {
        setLineIndex((l) => l + 1);
        setCharIndex(0);
      }, pause);
    }
    return () => clearTimeout(timeout);
  }, [lineIndex, charIndex, reduce]);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(command);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1800);
    } catch {
      /* Clipboard API unavailable — silently ignore. */
    }
  };

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-background px-6 py-16 sm:px-10 lg:py-20",
        className,
      )}
    >
      {/* Soft brand glow, bottom-right. */}
      <div
        aria-hidden
        className="pointer-events-none absolute -bottom-32 -right-24 -z-10 size-[28rem] rounded-full opacity-40 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand-2) 40%, transparent), transparent 70%)",
        }}
      />

      <div className="grid items-center gap-12 lg:grid-cols-2">
        {/* Copy column */}
        <div className="max-w-xl">
          <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
            <TerminalSquare className="size-3.5 text-brand-2" />
            {eyebrow}
          </span>

          <h1 className="mt-5 text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
            {title} <GradientText>{highlight}</GradientText> {titleAfter}
          </h1>

          <p className="mt-5 max-w-lg text-pretty text-base text-muted sm:text-lg">
            {description}
          </p>

          {/* Copyable install command */}
          <div className="mt-8 flex max-w-sm items-center gap-3 rounded-xl border border-border bg-surface px-4 py-3 font-mono text-sm">
            <span aria-hidden className="select-none text-brand-2">
              $
            </span>
            <code className="flex-1 truncate text-foreground">{command}</code>
            <button
              type="button"
              onClick={copy}
              aria-label={copied ? "Copied" : "Copy install command"}
              className="grid size-7 shrink-0 place-items-center rounded-md border border-border text-muted transition-colors hover:bg-background hover:text-foreground"
            >
              {copied ? (
                <Check className="size-4 text-brand-2" />
              ) : (
                <Copy className="size-4" />
              )}
            </button>
          </div>
          <span aria-live="polite" className="sr-only">
            {copied ? "Install command copied to clipboard" : ""}
          </span>

          <div className="mt-7 flex flex-wrap items-center gap-3">
            <button
              type="button"
              className="inline-flex items-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
            >
              {primaryLabel}
              <ArrowRight className="size-4" />
            </button>
            <button
              type="button"
              className="rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface"
            >
              {secondaryLabel}
            </button>
          </div>
        </div>

        {/* Terminal window */}
        <motion.div
          initial={reduce ? false : { opacity: 0, y: 24 }}
          whileInView={reduce ? undefined : { opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
          className="overflow-hidden rounded-2xl border border-border-strong bg-surface shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)]"
        >
          {/* Chrome */}
          <div className="flex items-center gap-2 border-b border-border bg-background/60 px-4 py-3">
            <span className="size-2.5 rounded-full bg-brand-3/70" />
            <span className="size-2.5 rounded-full bg-brand/60" />
            <span className="size-2.5 rounded-full bg-brand-2/60" />
            <span className="ml-3 inline-flex items-center gap-1.5 text-[11px] text-muted">
              <TerminalSquare className="size-3.5" />
              zsh — ononc
            </span>
          </div>

          {/* Typed session (decorative; described for assistive tech below). */}
          <div
            aria-hidden
            className="min-h-[14rem] space-y-1.5 p-5 font-mono text-[13px] leading-relaxed"
          >
            {LINES.map((line, i) => {
              if (i > lineIndex) return null;
              const text =
                i < lineIndex ? line.text : line.text.slice(0, charIndex);
              const showCaret =
                i === lineIndex || (done && i === LINES.length - 1);
              return (
                <div key={i} className={cn("flex gap-2", lineColor(line.kind))}>
                  {line.kind === "command" && (
                    <span className="select-none text-brand-2">❯</span>
                  )}
                  <span className="whitespace-pre-wrap break-all">
                    {text}
                    {showCaret && (
                      <span className="animate-blink ml-0.5 inline-block h-[1.05em] w-[2px] translate-y-[2px] bg-brand-2 align-middle" />
                    )}
                  </span>
                </div>
              );
            })}
          </div>
          <p className="sr-only">{FULL_SCRIPT}</p>
        </motion.div>
      </div>
    </section>
  );
}
```

### Hero Waitlist
Launch hero over light beams with an accessible email capture (front-end only) and social proof.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-waitlist.tsx

```tsx
"use client";

import { useId, useState } from "react";
import { ArrowRight, CheckCircle2, Mail } from "lucide-react";
import { LightBeams } from "@/components/backgrounds/light-beams";
import { GradientText } from "@/components/text/gradient-text";
import { AvatarStack } from "@/components/ui/avatar-stack";
import { cn } from "@/lib/utils";

export interface HeroWaitlistProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  placeholder?: string;
  ctaLabel?: string;
  /** Social-proof count, e.g. "2,000+". */
  count?: string;
  /** Names used for the social-proof avatar stack. */
  members?: string[];
  className?: string;
}

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

/**
 * HeroWaitlist — a launch hero over breathing light beams with an inline email
 * capture and social proof. The form is front-end only — nothing is sent
 * anywhere — so it is a safe, drop-in demo; wire `onSubmit` to your own
 * endpoint to collect addresses. Validation and status are announced politely.
 */
export function HeroWaitlist({
  eyebrow = "Launching this summer",
  title = "Be first through the",
  highlight = "door",
  description = "We're opening access in waves. Join the waitlist to claim early access, founder pricing, and a say in what we build next.",
  placeholder = "you@company.com",
  ctaLabel = "Join the waitlist",
  count = "2,000+",
  members = ["Ada Lin", "Ben Ortiz", "Chae Won", "Dev Rao", "Esme Roy"],
  className,
}: HeroWaitlistProps) {
  const id = useId();
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState<"idle" | "error" | "done">("idle");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!EMAIL_RE.test(email.trim())) {
      setStatus("error");
      return;
    }
    // Front-end only: no network request is made. Swap in your own handler here.
    setStatus("done");
  };

  return (
    <LightBeams
      className={cn(
        "flex min-h-[32rem] items-center justify-center rounded-2xl border border-border px-6 py-20 text-center",
        className,
      )}
    >
      <div className="relative mx-auto max-w-2xl">
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
          <span className="relative flex size-1.5">
            <span className="absolute inline-flex size-full animate-ping rounded-full bg-brand-2 opacity-75" />
            <span className="relative inline-flex size-1.5 rounded-full bg-brand-2" />
          </span>
          {eyebrow}
        </span>

        <h1 className="mt-6 text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          {title} <GradientText>{highlight}</GradientText>
        </h1>

        <p className="mx-auto mt-5 max-w-lg text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>

        {status === "done" ? (
          <div
            role="status"
            className="mx-auto mt-8 flex max-w-md items-center justify-center gap-3 rounded-2xl border border-brand/40 bg-surface/80 px-5 py-4 backdrop-blur"
          >
            <CheckCircle2 className="size-5 shrink-0 text-brand-2" />
            <p className="text-sm text-foreground">
              You&rsquo;re on the list — we&rsquo;ll reach out to{" "}
              <span className="font-semibold">{email}</span> soon.
            </p>
          </div>
        ) : (
          <>
            <form
              noValidate
              onSubmit={handleSubmit}
              className="mx-auto mt-8 flex w-full max-w-md flex-col gap-2 sm:flex-row"
            >
              <div className="relative flex-1">
                <Mail className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-muted" />
                <label htmlFor={id} className="sr-only">
                  Email address
                </label>
                <input
                  id={id}
                  type="email"
                  inputMode="email"
                  autoComplete="email"
                  value={email}
                  onChange={(e) => {
                    setEmail(e.target.value);
                    if (status === "error") setStatus("idle");
                  }}
                  placeholder={placeholder}
                  aria-invalid={status === "error"}
                  aria-describedby={status === "error" ? `${id}-error` : undefined}
                  className="w-full rounded-full border border-border bg-surface/80 py-3 pl-10 pr-4 text-sm text-foreground outline-none backdrop-blur transition-colors placeholder:text-muted-2 focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-brand/30"
                />
              </div>
              <button
                type="submit"
                className="inline-flex items-center justify-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
              >
                {ctaLabel}
                <ArrowRight className="size-4" />
              </button>
            </form>
            {status === "error" && (
              <p id={`${id}-error`} className="mt-2 text-sm text-brand-3">
                Please enter a valid email address.
              </p>
            )}
          </>
        )}

        {/* Social proof */}
        <div className="mt-8 flex items-center justify-center gap-3">
          <AvatarStack names={members} max={4} />
          <p className="text-sm text-muted">
            Join <span className="font-semibold text-foreground">{count}</span>{" "}
            builders already in line
          </p>
        </div>
      </div>
    </LightBeams>
  );
}
```

### Hero Stats
Credibility-forward hero with a band of headline metrics that count up on view.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-stats.tsx

```tsx
"use client";

import { ArrowRight, ShieldCheck } from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { CountUp } from "@/components/text/count-up";
import { GradientText } from "@/components/text/gradient-text";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { cn } from "@/lib/utils";

export interface HeroStat {
  value: number;
  prefix?: string;
  suffix?: string;
  decimals?: number;
  label: string;
}

export interface HeroStatsProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  stats?: HeroStat[];
  className?: string;
}

const DEFAULT_STATS: HeroStat[] = [
  { value: 99.99, suffix: "%", decimals: 2, label: "Uptime SLA" },
  { value: 120, suffix: "+", label: "Integrations" },
  { value: 4.9, suffix: "/5", decimals: 1, label: "Average rating" },
  { value: 38, suffix: "ms", label: "Median latency" },
];

const container: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1, delayChildren: 0.04 } },
};
const item: Variants = {
  hidden: { opacity: 0, y: 20 },
  show: {
    opacity: 1,
    y: 0,
    transition: { type: "spring", stiffness: 130, damping: 18 },
  },
};

/**
 * HeroStats — a credibility-forward hero: a centered pitch and CTAs above a
 * band of headline metrics that count up as they scroll into view. A soft
 * brand glow and faint grid anchor it without stealing focus from the numbers.
 */
export function HeroStats({
  eyebrow = "Trusted at scale",
  title = "Infrastructure your team can",
  highlight = "rely on",
  description = "From your first user to your ten-millionth, ONONC stays fast, observable, and calm. The numbers below update live as you scroll.",
  primaryLabel = "Start free",
  secondaryLabel = "Talk to sales",
  stats = DEFAULT_STATS,
  className,
}: HeroStatsProps) {
  const reduce = useReducedMotion();
  const reveal = reduce
    ? {}
    : {
        variants: container,
        initial: "hidden" as const,
        whileInView: "show" as const,
        viewport: { once: true, amount: 0.3 },
      };

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-background px-6 py-16 text-center sm:px-10 lg:py-20",
        className,
      )}
    >
      {/* Soft center glow. */}
      <div
        aria-hidden
        className="pointer-events-none absolute left-1/2 top-[-20%] -z-10 size-[34rem] max-w-[120%] -translate-x-1/2 rounded-full opacity-40 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%)",
        }}
      />

      <motion.div {...reveal} className="mx-auto max-w-2xl">
        <motion.span
          variants={item}
          className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur"
        >
          <ShieldCheck className="size-3.5 text-brand-2" />
          {eyebrow}
        </motion.span>

        <motion.h1
          variants={item}
          className="mt-5 text-balance text-4xl font-semibold tracking-tight sm:text-5xl"
        >
          {title} <GradientText>{highlight}</GradientText>
        </motion.h1>

        <motion.p
          variants={item}
          className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg"
        >
          {description}
        </motion.p>

        <motion.div
          variants={item}
          className="mt-8 flex flex-wrap items-center justify-center gap-3"
        >
          <MagneticButton aria-label={primaryLabel}>
            {primaryLabel}
            <ArrowRight className="size-4" />
          </MagneticButton>
          <button
            type="button"
            className="rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface"
          >
            {secondaryLabel}
          </button>
        </motion.div>
      </motion.div>

      {/* Metrics band */}
      <div className="mx-auto mt-14 grid max-w-4xl grid-cols-2 gap-y-8 border-t border-border pt-10 sm:grid-cols-4">
        {stats.map((stat, i) => (
          <div
            key={i}
            className={cn(
              "px-2",
              i > 0 && "sm:border-l sm:border-border",
            )}
          >
            <div className="text-3xl font-semibold tracking-tight sm:text-4xl">
              <CountUp
                className="text-gradient"
                to={stat.value}
                prefix={stat.prefix}
                suffix={stat.suffix}
                decimals={stat.decimals}
              />
            </div>
            <div className="mt-1 text-sm text-muted">{stat.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### Hero Rotating
Clean centered hero whose headline swaps a key word on a loop over drifting orbs.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-rotating.tsx

```tsx
"use client";

import { ArrowRight, Check } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { RotatingText } from "@/components/text/rotating-text";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { cn } from "@/lib/utils";

export interface HeroRotatingProps {
  eyebrow?: string;
  /** Static words that precede the rotating slot. */
  titleBefore?: string;
  /** Words cycled through the rotating slot. */
  words?: string[];
  /** Static line beneath the rotating headline. */
  titleAfter?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  /** Small reassurances under the buttons. */
  notes?: string[];
  className?: string;
}

const DEFAULT_WORDS = ["SaaS", "portfolio", "online store", "next big idea"];

/**
 * HeroRotating — a clean, centered hero whose headline swaps a key noun on a
 * loop while soft gradient orbs drift behind it. The rotating word stops on a
 * single value under prefers-reduced-motion (handled inside RotatingText).
 */
export function HeroRotating({
  eyebrow = "Ship in a weekend",
  titleBefore = "Launch your",
  words = DEFAULT_WORDS,
  titleAfter = "without the busywork.",
  description = "Opinionated building blocks, beautiful defaults, and zero boilerplate — so you can go from blank page to live in an afternoon.",
  primaryLabel = "Start building",
  secondaryLabel = "See examples",
  notes = ["No credit card required", "Cancel anytime"],
  className,
}: HeroRotatingProps) {
  const reduce = useReducedMotion();

  return (
    <section
      className={cn(
        "relative isolate flex min-h-[32rem] items-center justify-center overflow-hidden rounded-2xl border border-border bg-background px-6 py-20 text-center",
        className,
      )}
    >
      {/* Drifting gradient orbs. */}
      <div
        aria-hidden
        className="animate-float pointer-events-none absolute -left-10 top-6 -z-10 size-72 rounded-full opacity-40 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand) 55%, transparent), transparent 70%)",
        }}
      />
      <div
        aria-hidden
        className="animate-float pointer-events-none absolute -right-12 bottom-0 -z-10 size-80 rounded-full opacity-35 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand-2) 55%, transparent), transparent 70%)",
          animationDelay: "-3s",
        }}
      />

      <motion.div
        initial={reduce ? false : { opacity: 0, y: 16 }}
        animate={reduce ? undefined : { opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="mx-auto max-w-3xl"
      >
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
          <span className="size-1.5 rounded-full bg-brand-2" />
          {eyebrow}
        </span>

        <h1 className="mt-6 text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          <span className="block">
            {titleBefore}{" "}
            <RotatingText words={words} className="text-brand-ink" />
          </span>
          <span className="block">{titleAfter}</span>
        </h1>

        <p className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>

        <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
          <MagneticButton aria-label={primaryLabel}>
            {primaryLabel}
            <ArrowRight className="size-4" />
          </MagneticButton>
          <button
            type="button"
            className="rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface"
          >
            {secondaryLabel}
          </button>
        </div>

        {notes.length > 0 && (
          <div className="mt-6 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm text-muted">
            {notes.map((note) => (
              <span key={note} className="inline-flex items-center gap-1.5">
                <Check className="size-4 text-brand-2" />
                {note}
              </span>
            ))}
          </div>
        )}
      </motion.div>
    </section>
  );
}
```

### Hero Video
Cinematic hero with a 16:9 media card and an accessible play/pause control (front-end only).
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-video.tsx

```tsx
"use client";

import { useState } from "react";
import { ArrowRight, Pause, Play } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { cn } from "@/lib/utils";

export interface HeroVideoProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  /** Duration chip text, e.g. "2:14". */
  duration?: string;
  /** Caption shown along the bottom of the media card. */
  caption?: string;
  className?: string;
}

/**
 * HeroVideo — a cinematic hero with a 16:9 media card. The play control is a
 * real, labelled button that toggles a faux playback state (a progress bar
 * sweeps across) — front-end only, so no media is fetched. Swap the poster and
 * wire the button to your own <video> to make it real.
 */
export function HeroVideo({
  eyebrow = "Watch the 2-minute tour",
  title = "See ONONC in",
  highlight = "motion",
  description = "A quick look at how teams design, review, and ship — all in one calm, fast surface.",
  primaryLabel = "Get started",
  secondaryLabel = "Read the story",
  duration = "2:14",
  caption = "Product overview — 2026",
  className,
}: HeroVideoProps) {
  const reduce = useReducedMotion();
  const [playing, setPlaying] = useState(false);

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-background px-6 py-16 text-center sm:px-10 lg:py-20",
        className,
      )}
    >
      <motion.div
        initial={reduce ? false : { opacity: 0, y: 16 }}
        whileInView={reduce ? undefined : { opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="mx-auto max-w-2xl"
      >
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
          <Play className="size-3 fill-current text-brand-2" />
          {eyebrow}
        </span>
        <h1 className="mt-5 text-balance text-4xl font-semibold tracking-tight sm:text-5xl">
          {title} <GradientText>{highlight}</GradientText>
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <button
            type="button"
            className="inline-flex items-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
          >
            {primaryLabel}
            <ArrowRight className="size-4" />
          </button>
          <button
            type="button"
            className="rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface"
          >
            {secondaryLabel}
          </button>
        </div>
      </motion.div>

      {/* Media card */}
      <motion.div
        initial={reduce ? false : { opacity: 0, y: 24, scale: 0.98 }}
        whileInView={reduce ? undefined : { opacity: 1, y: 0, scale: 1 }}
        viewport={{ once: true, amount: 0.2 }}
        transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
        className="relative mx-auto mt-12 aspect-video w-full max-w-4xl overflow-hidden rounded-2xl border border-border-strong bg-surface shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)]"
      >
        {/* Gradient "poster". */}
        <div
          aria-hidden
          className="absolute inset-0"
          style={{
            backgroundImage: [
              "radial-gradient(40% 60% at 22% 28%, color-mix(in oklab, var(--brand) 60%, transparent), transparent 70%)",
              "radial-gradient(45% 55% at 80% 24%, color-mix(in oklab, var(--brand-2) 55%, transparent), transparent 70%)",
              "radial-gradient(55% 65% at 65% 90%, color-mix(in oklab, var(--brand-3) 45%, transparent), transparent 72%)",
              "linear-gradient(180deg, color-mix(in oklab, var(--background) 35%, transparent), var(--background))",
            ].join(","),
          }}
        />

        {/* Duration chip + caption (decorative; clicks pass through to the button). */}
        <span className="pointer-events-none absolute left-4 top-4 rounded-full bg-background/70 px-2.5 py-1 text-xs font-medium text-foreground backdrop-blur">
          {duration}
        </span>
        <div className="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-background/80 to-transparent p-4 pb-6 text-left">
          <span className="text-sm font-medium text-foreground [text-shadow:0_1px_3px_rgba(0,0,0,0.6)]">
            {caption}
          </span>
        </div>

        {/* Faux playback progress. */}
        <div aria-hidden className="absolute inset-x-0 bottom-0 h-1 bg-border">
          <div
            className="h-full bg-gradient-to-r from-brand to-brand-2 transition-[width] ease-linear"
            style={{
              width: playing ? "100%" : "0%",
              transitionDuration: playing ? "8s" : "0.3s",
            }}
          />
        </div>

        {/* Play / pause control covers the poster. */}
        <button
          type="button"
          onClick={() => setPlaying((p) => !p)}
          aria-pressed={playing}
          aria-label={playing ? "Pause overview video" : "Play overview video"}
          className="group/play absolute inset-0 grid place-items-center focus:outline-none"
        >
          <span className="relative grid size-16 place-items-center rounded-full bg-surface/80 text-foreground ring-1 ring-border-strong backdrop-blur transition-transform hover:scale-105 group-focus-visible/play:ring-2 group-focus-visible/play:ring-brand">
            {!playing && (
              <span className="animate-pulse-ring absolute inset-0 rounded-full ring-2 ring-brand/50" />
            )}
            {playing ? (
              <Pause className="size-6 fill-current" />
            ) : (
              <Play className="ml-0.5 size-6 fill-current" />
            )}
          </span>
        </button>
      </motion.div>
    </section>
  );
}
```

### Hero App
Mobile-app landing hero with a tilting phone mock, store buttons, and a star rating.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-app.tsx

```tsx
"use client";

import {
  ArrowDownLeft,
  ArrowUpRight,
  Download,
  Home,
  Search,
  Star,
  User,
  Wallet,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { TiltCard } from "@/components/ui/tilt-card";
import { cn } from "@/lib/utils";

export interface HeroAppProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  /** Rating shown beside the stars, e.g. "4.9". */
  rating?: string;
  ratingCount?: string;
  className?: string;
}

const container: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1, delayChildren: 0.04 } },
};
const item: Variants = {
  hidden: { opacity: 0, y: 20 },
  show: {
    opacity: 1,
    y: 0,
    transition: { type: "spring", stiffness: 130, damping: 18 },
  },
};

const ROWS = [
  { name: "Spotify", sub: "Subscription", amount: "-$9.99", out: true },
  { name: "Payday", sub: "Acme Inc.", amount: "+$3,200", out: false },
  { name: "Coffee", sub: "Blue Bottle", amount: "-$4.50", out: true },
];

/**
 * HeroApp — a mobile-app landing hero: pitch and store buttons on the left, a
 * 3D-tilting phone mock running an abstract wallet screen on the right, with a
 * floating notification. The store buttons are inert demo links.
 */
export function HeroApp({
  eyebrow = "Now on iOS & Android",
  title = "Your money, finally",
  highlight = "in focus",
  description = "Track spending, split bills, and grow savings — in an app that feels effortless. Bank-grade security, zero clutter.",
  rating = "4.9",
  ratingCount = "12k ratings",
  className,
}: HeroAppProps) {
  const reduce = useReducedMotion();
  const reveal = reduce
    ? {}
    : {
        variants: container,
        initial: "hidden" as const,
        whileInView: "show" as const,
        viewport: { once: true, amount: 0.3 },
      };

  const storeBtn =
    "inline-flex items-center gap-2 rounded-xl bg-foreground px-4 py-2.5 text-background transition-opacity hover:opacity-90";

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-background px-6 py-16 sm:px-10 lg:py-20",
        className,
      )}
    >
      {/* Soft brand glow, right side. */}
      <div
        aria-hidden
        className="pointer-events-none absolute -right-24 top-1/4 -z-10 size-[28rem] rounded-full opacity-40 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand) 42%, transparent), transparent 70%)",
        }}
      />

      <div className="grid items-center gap-12 lg:grid-cols-2">
        {/* Copy column */}
        <motion.div {...reveal} className="max-w-xl">
          <motion.span
            variants={item}
            className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur"
          >
            <Wallet className="size-3.5 text-brand-2" />
            {eyebrow}
          </motion.span>

          <motion.h1
            variants={item}
            className="mt-5 text-balance text-4xl font-semibold tracking-tight sm:text-5xl"
          >
            {title} <GradientText>{highlight}</GradientText>
          </motion.h1>

          <motion.p
            variants={item}
            className="mt-5 max-w-lg text-pretty text-base text-muted sm:text-lg"
          >
            {description}
          </motion.p>

          <motion.div variants={item} className="mt-8 flex flex-wrap gap-3">
            <a href="#" className={storeBtn} aria-label="Download on the App Store">
              <Download className="size-5" />
              <span className="text-left leading-tight">
                <span className="block text-[10px] opacity-80">
                  Download on the
                </span>
                <span className="block text-sm font-semibold">App Store</span>
              </span>
            </a>
            <a href="#" className={storeBtn} aria-label="Get it on Google Play">
              <Download className="size-5" />
              <span className="text-left leading-tight">
                <span className="block text-[10px] opacity-80">Get it on</span>
                <span className="block text-sm font-semibold">Google Play</span>
              </span>
            </a>
          </motion.div>

          <motion.div
            variants={item}
            className="mt-6 flex items-center gap-2 text-sm text-muted"
          >
            <div className="flex items-center gap-0.5 text-brand-3">
              {Array.from({ length: 5 }).map((_, i) => (
                <Star key={i} className="size-4 fill-current" />
              ))}
            </div>
            <span>
              <span className="font-semibold text-foreground">{rating}</span> ·{" "}
              {ratingCount}
            </span>
          </motion.div>
        </motion.div>

        {/* Phone mock column */}
        <motion.div
          initial={reduce ? false : { opacity: 0, y: 24, scale: 0.97 }}
          whileInView={reduce ? undefined : { opacity: 1, y: 0, scale: 1 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ type: "spring", stiffness: 90, damping: 18, delay: 0.1 }}
          className="relative mx-auto"
        >
          <TiltCard max={6} glare={false} className="w-[260px]">
            <div className="rounded-[2.6rem] border-[6px] border-border-strong bg-background p-1.5 shadow-[0_30px_80px_-30px_rgba(0,0,0,0.7)]">
              <div className="relative overflow-hidden rounded-[2.1rem] bg-surface">
                {/* Notch */}
                <div className="absolute left-1/2 top-2 z-10 h-5 w-24 -translate-x-1/2 rounded-full bg-background" />
                {/* Status bar */}
                <div className="flex items-center justify-between px-6 pt-3 text-[10px] font-medium text-muted">
                  <span>9:41</span>
                  <span className="flex items-center gap-1">
                    <span className="size-1.5 rounded-full bg-muted" />
                    <span className="size-1.5 rounded-full bg-muted" />
                    <span className="h-2 w-4 rounded-[3px] border border-muted" />
                  </span>
                </div>

                {/* App content */}
                <div className="space-y-4 px-4 pb-4 pt-6">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-[11px] text-muted">Good morning</p>
                      <p className="text-sm font-semibold">Jordan</p>
                    </div>
                    <span className="size-8 rounded-full bg-gradient-to-br from-brand to-brand-2" />
                  </div>

                  {/* Balance card */}
                  <div
                    className="rounded-2xl p-4 text-white"
                    style={{
                      backgroundImage: `linear-gradient(135deg, var(--brand-ink), var(--brand-2))`,
                    }}
                  >
                    <p className="text-[11px] opacity-80">Total balance</p>
                    <p className="mt-1 text-2xl font-semibold tracking-tight">
                      $12,480.50
                    </p>
                    <div className="mt-3 flex gap-2">
                      <span className="inline-flex items-center gap-1 rounded-full bg-white/20 px-2 py-1 text-[10px] font-medium">
                        <ArrowUpRight className="size-3" /> Send
                      </span>
                      <span className="inline-flex items-center gap-1 rounded-full bg-white/20 px-2 py-1 text-[10px] font-medium">
                        <ArrowDownLeft className="size-3" /> Request
                      </span>
                    </div>
                  </div>

                  {/* Transactions */}
                  <div className="space-y-2">
                    {ROWS.map((r) => (
                      <div key={r.name} className="flex items-center gap-3">
                        <span
                          className={cn(
                            "grid size-8 place-items-center rounded-full",
                            r.out
                              ? "bg-brand-3/15 text-brand-3"
                              : "bg-brand-2/15 text-brand-2",
                          )}
                        >
                          {r.out ? (
                            <ArrowUpRight className="size-4" />
                          ) : (
                            <ArrowDownLeft className="size-4" />
                          )}
                        </span>
                        <div className="flex-1">
                          <p className="text-xs font-medium">{r.name}</p>
                          <p className="text-[10px] text-muted">{r.sub}</p>
                        </div>
                        <span
                          className={cn(
                            "text-xs font-semibold",
                            r.out ? "text-foreground" : "text-brand-2",
                          )}
                        >
                          {r.amount}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Bottom tab bar */}
                <div className="flex items-center justify-around border-t border-border px-4 py-3 text-muted">
                  <Home className="size-5 text-brand-ink" />
                  <Search className="size-5" />
                  <Wallet className="size-5" />
                  <User className="size-5" />
                </div>
              </div>
            </div>
          </TiltCard>

          {/* Floating notification */}
          <div
            className="animate-float absolute -left-4 top-10 flex items-center gap-2 rounded-xl border border-border bg-surface/90 px-3 py-2 shadow-lg backdrop-blur"
            style={{ animationDelay: "-2s" }}
          >
            <span className="grid size-6 place-items-center rounded-full bg-brand-2/15 text-brand-2">
              <ArrowDownLeft className="size-3.5" />
            </span>
            <span className="text-xs font-medium">
              Payment received{" "}
              <span className="text-brand-2">+$240</span>
            </span>
          </div>
        </motion.div>
      </div>
    </section>
  );
}
```

### Hero Marquee
Centered hero floating over rows of huge ghost-text wordmarks scrolling in opposing directions.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-marquee.tsx

```tsx
"use client";

import { ArrowRight, Sparkles } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { Marquee } from "@/components/ui/marquee";
import { cn } from "@/lib/utils";

export interface HeroMarqueeProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  /** Large words scrolling in the backdrop. */
  words?: string[];
  className?: string;
}

const DEFAULT_WORDS = ["DESIGN", "BUILD", "SHIP", "SCALE", "MOTION", "CRAFT"];

/**
 * HeroMarquee — centered content floating over three rows of huge, ghosted
 * wordmarks that scroll in alternating directions. A radial vignette dims the
 * backdrop behind the copy for legibility; the marquee freezes under
 * prefers-reduced-motion via the global rule.
 */
export function HeroMarquee({
  eyebrow = "Built for momentum",
  title = "Everything you need to",
  highlight = "keep shipping",
  description = "A complete, motion-first foundation — primitives, blocks, and patterns — so your team can move from idea to release without losing the thread.",
  primaryLabel = "Get started",
  secondaryLabel = "Explore blocks",
  words = DEFAULT_WORDS,
  className,
}: HeroMarqueeProps) {
  const reduce = useReducedMotion();

  const outlined =
    "mx-6 text-6xl font-extrabold tracking-tight text-transparent sm:text-8xl [-webkit-text-stroke:1px_var(--border-strong)]";
  const filled =
    "mx-6 text-6xl font-extrabold tracking-tight text-foreground/[0.045] sm:text-8xl";

  return (
    <section
      className={cn(
        "relative isolate flex min-h-[34rem] items-center justify-center overflow-hidden rounded-2xl border border-border bg-background px-6 py-20 text-center",
        className,
      )}
    >
      {/* Ghost-text marquee backdrop. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 flex flex-col justify-center gap-4 sm:gap-8"
      >
        <Marquee duration={42} fade>
          {words.map((w) => (
            <span key={w} className={outlined}>
              {w}
            </span>
          ))}
        </Marquee>
        <Marquee duration={52} reverse fade>
          {words.map((w) => (
            <span key={w} className={filled}>
              {w}
            </span>
          ))}
        </Marquee>
        <Marquee duration={47} fade>
          {words.map((w) => (
            <span key={w} className={outlined}>
              {w}
            </span>
          ))}
        </Marquee>
      </div>

      {/* Center vignette to keep the copy readable. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10"
        style={{
          background:
            "radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--background) 82%, transparent), transparent 78%)",
        }}
      />

      <motion.div
        initial={reduce ? false : { opacity: 0, y: 16 }}
        animate={reduce ? undefined : { opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="relative mx-auto max-w-2xl"
      >
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/80 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
          <Sparkles className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>

        <h1 className="mt-6 text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          {title} <GradientText>{highlight}</GradientText>
        </h1>

        <p className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>

        <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
          <MagneticButton aria-label={primaryLabel}>
            {primaryLabel}
            <ArrowRight className="size-4" />
          </MagneticButton>
          <button
            type="button"
            className="rounded-full border border-border bg-surface/60 px-6 py-3 text-sm font-semibold text-foreground backdrop-blur transition-colors hover:bg-surface"
          >
            {secondaryLabel}
          </button>
        </div>
      </motion.div>
    </section>
  );
}
```

### Hero Showcase
Split hero with a stacked screen deck that auto-cycles through product views, with dot controls.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-showcase.tsx

```tsx
"use client";

import { useEffect, useState, type ReactNode } from "react";
import { ArrowRight, BarChart3, CheckCircle2, Inbox, LayoutGrid } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion, type Variants } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { cn } from "@/lib/utils";

export interface HeroShowcaseProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  /** Short checklist of selling points under the buttons. */
  features?: string[];
  className?: string;
}

const container: Variants = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1, delayChildren: 0.04 } },
};
const item: Variants = {
  hidden: { opacity: 0, y: 20 },
  show: {
    opacity: 1,
    y: 0,
    transition: { type: "spring", stiffness: 130, damping: 18 },
  },
};

interface Screen {
  key: string;
  label: string;
  icon: ReactNode;
  render: () => ReactNode;
}

const bar = (h: number, i: number) => (
  <span
    key={i}
    className="flex-1 rounded-t bg-gradient-to-t from-brand/30 to-brand-2/70"
    style={{ height: `${h}%` }}
  />
);

const SCREENS: Screen[] = [
  {
    key: "analytics",
    label: "Analytics",
    icon: <BarChart3 className="size-3.5" />,
    render: () => (
      <div className="flex h-full flex-col">
        <div className="flex items-end justify-between">
          <div>
            <p className="text-[11px] text-muted">Weekly active</p>
            <p className="text-xl font-semibold tracking-tight">18,402</p>
          </div>
          <span className="rounded-full bg-brand/10 px-2 py-1 text-[11px] font-medium text-brand-2">
            +24%
          </span>
        </div>
        <div className="mt-4 flex flex-1 items-end gap-2">
          {[42, 60, 38, 72, 54, 86, 64].map(bar)}
        </div>
      </div>
    ),
  },
  {
    key: "inbox",
    label: "Inbox",
    icon: <Inbox className="size-3.5" />,
    render: () => (
      <div className="space-y-3">
        {[0, 1, 2, 3].map((i) => (
          <div key={i} className="flex items-center gap-3">
            <span
              className={cn(
                "size-8 shrink-0 rounded-full bg-gradient-to-br",
                i % 2 ? "from-brand-2 to-brand-3" : "from-brand to-brand-2",
              )}
            />
            <div className="flex-1 space-y-1.5">
              <span className="block h-2 w-1/3 rounded-full bg-border-strong" />
              <span className="block h-2 w-2/3 rounded-full bg-border" />
            </div>
            <span className="text-[10px] text-muted-2">2m</span>
          </div>
        ))}
      </div>
    ),
  },
  {
    key: "board",
    label: "Board",
    icon: <LayoutGrid className="size-3.5" />,
    render: () => (
      <div className="grid h-full grid-cols-3 gap-2">
        {["To do", "Doing", "Done"].map((col, c) => (
          <div key={col} className="rounded-lg border border-border bg-background/50 p-2">
            <p className="mb-2 text-[10px] font-medium text-muted">{col}</p>
            <div className="space-y-2">
              {Array.from({ length: c === 1 ? 1 : 2 }).map((_, i) => (
                <div
                  key={i}
                  className="rounded-md border border-border bg-surface p-2"
                >
                  <span className="block h-1.5 w-full rounded-full bg-border-strong" />
                  <span className="mt-1.5 block h-1.5 w-2/3 rounded-full bg-border" />
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    ),
  },
];

/**
 * HeroShowcase — an asymmetric hero whose right side is a stacked "screen deck"
 * that cycles through product views (analytics, inbox, board) with a crossfade.
 * Dots let you jump to any view; autoplay pauses and the deck rests on the
 * first view under prefers-reduced-motion.
 */
export function HeroShowcase({
  eyebrow = "One workspace, every view",
  title = "See your work the way your team",
  highlight = "thinks",
  description = "Switch between dashboards, conversations, and boards without losing context. ONONC keeps everything a glance away.",
  primaryLabel = "Start free",
  secondaryLabel = "Take a tour",
  features = ["Real-time sync", "Role-based access", "Full audit trail"],
  className,
}: HeroShowcaseProps) {
  const reduce = useReducedMotion();
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (reduce || SCREENS.length <= 1) return;
    const id = setInterval(
      () => setIndex((i) => (i + 1) % SCREENS.length),
      3400,
    );
    return () => clearInterval(id);
  }, [reduce]);

  const reveal = reduce
    ? {}
    : {
        variants: container,
        initial: "hidden" as const,
        whileInView: "show" as const,
        viewport: { once: true, amount: 0.3 },
      };

  const active = SCREENS[index];

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-background px-6 py-16 sm:px-10 lg:py-20",
        className,
      )}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute -right-24 -top-20 -z-10 size-[28rem] rounded-full opacity-40 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand) 42%, transparent), transparent 70%)",
        }}
      />

      <div className="grid items-center gap-12 lg:grid-cols-2">
        {/* Copy */}
        <motion.div {...reveal} className="max-w-xl">
          <motion.span
            variants={item}
            className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur"
          >
            <LayoutGrid className="size-3.5 text-brand-2" />
            {eyebrow}
          </motion.span>
          <motion.h1
            variants={item}
            className="mt-5 text-balance text-4xl font-semibold tracking-tight sm:text-5xl"
          >
            {title} <GradientText>{highlight}</GradientText>
          </motion.h1>
          <motion.p
            variants={item}
            className="mt-5 max-w-lg text-pretty text-base text-muted sm:text-lg"
          >
            {description}
          </motion.p>
          <motion.ul
            variants={item}
            className="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted"
          >
            {features.map((f) => (
              <li key={f} className="inline-flex items-center gap-1.5">
                <CheckCircle2 className="size-4 text-brand-2" />
                {f}
              </li>
            ))}
          </motion.ul>
          <motion.div variants={item} className="mt-8 flex flex-wrap items-center gap-3">
            <MagneticButton aria-label={primaryLabel}>
              {primaryLabel}
              <ArrowRight className="size-4" />
            </MagneticButton>
            <button
              type="button"
              className="rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface"
            >
              {secondaryLabel}
            </button>
          </motion.div>
        </motion.div>

        {/* Screen deck */}
        <motion.div
          initial={reduce ? false : { opacity: 0, y: 24, scale: 0.97 }}
          whileInView={reduce ? undefined : { opacity: 1, y: 0, scale: 1 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ type: "spring", stiffness: 90, damping: 18, delay: 0.1 }}
          className="relative mx-auto h-80 w-full max-w-sm"
        >
          {/* Stacked back cards for depth. */}
          <div className="absolute inset-0 translate-x-4 translate-y-5 rotate-[3deg] rounded-2xl border border-border bg-surface/50" />
          <div className="absolute inset-0 translate-x-2 translate-y-2.5 rotate-[1.5deg] rounded-2xl border border-border bg-surface/75" />

          {/* Front card */}
          <div className="absolute inset-0 overflow-hidden rounded-2xl border border-border-strong bg-surface shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)]">
            <div className="flex items-center gap-2 border-b border-border bg-background/60 px-4 py-3">
              <span className="size-2.5 rounded-full bg-brand-3/70" />
              <span className="size-2.5 rounded-full bg-brand/60" />
              <span className="size-2.5 rounded-full bg-brand-2/60" />
              <span className="ml-2 inline-flex items-center gap-1.5 text-xs text-muted">
                {active.icon}
                {active.label}
              </span>
            </div>
            <div className="relative h-[calc(100%-2.875rem)]">
              <AnimatePresence mode="wait">
                <motion.div
                  key={active.key}
                  initial={reduce ? false : { opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={reduce ? { opacity: 0 } : { opacity: 0, y: -10 }}
                  transition={{ duration: reduce ? 0 : 0.4, ease: "easeOut" }}
                  className="absolute inset-0 p-4"
                >
                  {active.render()}
                </motion.div>
              </AnimatePresence>
            </div>
          </div>

          {/* Dot controls */}
          <div className="absolute -bottom-7 left-1/2 flex -translate-x-1/2 gap-2">
            {SCREENS.map((s, i) => (
              <button
                key={s.key}
                type="button"
                onClick={() => setIndex(i)}
                aria-label={`Show ${s.label}`}
                aria-current={i === index}
                className={cn(
                  "h-2 rounded-full transition-all",
                  i === index
                    ? "w-6 bg-brand"
                    : "w-2 bg-border-strong hover:bg-muted",
                )}
              />
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}
```

### Hero Countdown
Launch hero with a hydration-safe live countdown ticking to a target date.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-countdown.tsx

```tsx
"use client";

import { useEffect, useState } from "react";
import { ArrowRight, CalendarClock } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { useHydrated } from "@/lib/use-hydrated";
import { cn } from "@/lib/utils";

export interface HeroCountdownProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  /** Launch target as an ISO date-time string. */
  targetDate?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  className?: string;
}

function remaining(target: number) {
  const diff = Math.max(0, target - Date.now());
  return {
    days: Math.floor(diff / 86_400_000),
    hours: Math.floor((diff % 86_400_000) / 3_600_000),
    minutes: Math.floor((diff % 3_600_000) / 60_000),
    seconds: Math.floor((diff % 60_000) / 1_000),
  };
}

const pad = (n: number) => n.toString().padStart(2, "0");

/**
 * HeroCountdown — a launch hero with a live countdown to a target date. The
 * digits render as placeholders until after hydration (so server and client
 * markup match), then tick every second. The clock is hidden from assistive
 * tech in favor of a plain-text launch date.
 */
export function HeroCountdown({
  eyebrow = "Countdown to launch",
  title = "Something new is",
  highlight = "almost here",
  description = "We're putting the final touches on it. Mark your calendar — early adopters get founder pricing for life.",
  targetDate = "2027-01-01T00:00:00",
  primaryLabel = "Notify me",
  secondaryLabel = "Preview features",
  className,
}: HeroCountdownProps) {
  const reduce = useReducedMotion();
  const hydrated = useHydrated();
  const target = new Date(targetDate).getTime();
  const [time, setTime] = useState(() => remaining(target));

  useEffect(() => {
    const id = setInterval(() => setTime(remaining(target)), 1000);
    return () => clearInterval(id);
  }, [target]);

  const units = [
    { label: "Days", value: time.days },
    { label: "Hours", value: time.hours },
    { label: "Minutes", value: time.minutes },
    { label: "Seconds", value: time.seconds },
  ];

  return (
    <section
      className={cn(
        "relative isolate flex min-h-[32rem] items-center justify-center overflow-hidden rounded-2xl border border-border bg-background px-6 py-20 text-center",
        className,
      )}
    >
      {/* Soft brand glow. */}
      <div
        aria-hidden
        className="pointer-events-none absolute left-1/2 top-[-20%] -z-10 size-[34rem] max-w-[120%] -translate-x-1/2 rounded-full opacity-40 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand) 42%, transparent), transparent 70%)",
        }}
      />

      <motion.div
        initial={reduce ? false : { opacity: 0, y: 16 }}
        animate={reduce ? undefined : { opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="mx-auto max-w-2xl"
      >
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
          <CalendarClock className="size-3.5 text-brand-2" />
          {eyebrow}
        </span>

        <h1 className="mt-6 text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          {title} <GradientText>{highlight}</GradientText>
        </h1>

        <p className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>

        {/* Countdown */}
        <div
          aria-hidden
          className="mt-9 flex items-start justify-center gap-2 sm:gap-4"
        >
          {units.map((u, i) => (
            <div key={u.label} className="flex items-start gap-2 sm:gap-4">
              <div className="flex flex-col items-center">
                <div className="grid size-16 place-items-center rounded-xl border border-border bg-surface tabular-nums sm:size-20">
                  <span className="text-2xl font-semibold tracking-tight sm:text-3xl">
                    {hydrated ? pad(u.value) : "--"}
                  </span>
                </div>
                <span className="mt-2 text-xs uppercase tracking-wide text-muted">
                  {u.label}
                </span>
              </div>
              {i < units.length - 1 && (
                <span className="pt-3 text-2xl font-semibold text-muted-2 sm:pt-4 sm:text-3xl">
                  :
                </span>
              )}
            </div>
          ))}
        </div>
        <p className="sr-only">Launching on {targetDate.slice(0, 10)}.</p>

        <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
          <button
            type="button"
            className="inline-flex items-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
          >
            {primaryLabel}
            <ArrowRight className="size-4" />
          </button>
          <button
            type="button"
            className="rounded-full border border-border px-6 py-3 text-sm font-semibold text-foreground transition-colors hover:bg-surface"
          >
            {secondaryLabel}
          </button>
        </div>
      </motion.div>
    </section>
  );
}
```

### Hero AI
AI-product hero with a prompt composer, suggestion chips, and a simulated reply (front-end only).
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-ai.tsx

```tsx
"use client";

import { useId, useState } from "react";
import { Sparkles, Wand2 } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { cn } from "@/lib/utils";

export interface HeroAIProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  placeholder?: string;
  /** Quick-fill suggestion chips. */
  suggestions?: string[];
  /** Canned response revealed on submit (front-end only). */
  answer?: string;
  className?: string;
}

const DEFAULT_SUGGESTIONS = [
  "Design a pricing page",
  "Write release notes",
  "Draft a cold email",
  "Explain this code",
];

type Status = "idle" | "loading" | "done";

/**
 * HeroAI — an AI-product hero with a prompt composer, quick-fill suggestions,
 * and a simulated assistant reply. It is front-end only: submitting reveals a
 * canned answer after a short "thinking" beat (skipped under reduced motion) —
 * no request is sent. Wire `handleSubmit` to your model to make it real.
 */
export function HeroAI({
  eyebrow = "Meet your AI copilot",
  title = "Describe it. ONONC",
  highlight = "builds it",
  description = "Turn a sentence into shippable UI. Ask for a section, a flow, or a whole page — and refine it in plain language.",
  placeholder = "Ask anything — e.g. “Design a pricing page”",
  suggestions = DEFAULT_SUGGESTIONS,
  answer = "Here's a conversion-focused pricing page: three tiers (Starter, Pro, Scale) with a monthly/annual toggle, the Pro plan highlighted, and a short FAQ to handle objections. Want me to drop in the components?",
  className,
}: HeroAIProps) {
  const reduce = useReducedMotion();
  const id = useId();
  const [prompt, setPrompt] = useState("");
  const [status, setStatus] = useState<Status>("idle");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!prompt.trim()) return;
    setStatus("loading");
    // Front-end demo only: reveal the canned answer after a short beat.
    window.setTimeout(() => setStatus("done"), reduce ? 0 : 750);
  };

  return (
    <section
      className={cn(
        "relative isolate overflow-hidden rounded-2xl border border-border bg-background px-6 py-16 text-center sm:px-10 lg:py-20",
        className,
      )}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute left-1/2 top-[-18%] -z-10 size-[32rem] max-w-[120%] -translate-x-1/2 rounded-full opacity-40 blur-3xl"
        style={{
          background:
            "conic-gradient(from 120deg at 50% 50%, var(--brand), var(--brand-2), var(--brand-3), var(--brand))",
        }}
      />

      <motion.div
        initial={reduce ? false : { opacity: 0, y: 16 }}
        animate={reduce ? undefined : { opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="mx-auto max-w-2xl"
      >
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
          <Sparkles className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>
        <h1 className="mt-6 text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          {title} <GradientText>{highlight}</GradientText>
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>
      </motion.div>

      {/* Prompt composer */}
      <div className="mx-auto mt-9 max-w-xl text-left">
        <form
          onSubmit={handleSubmit}
          className="flex items-center gap-2 rounded-2xl border border-border bg-surface p-2 shadow-[0_20px_60px_-30px_var(--brand)] focus-within:border-brand"
        >
          <Sparkles className="ml-2 size-4 shrink-0 text-brand-ink" />
          <label htmlFor={id} className="sr-only">
            Ask the AI copilot
          </label>
          <input
            id={id}
            value={prompt}
            onChange={(e) => {
              setPrompt(e.target.value);
              if (status === "done") setStatus("idle");
            }}
            placeholder={placeholder}
            className="flex-1 bg-transparent py-2 text-sm text-foreground outline-none placeholder:text-muted-2"
          />
          <button
            type="submit"
            aria-label="Generate"
            className="inline-flex shrink-0 items-center gap-1.5 rounded-xl bg-brand px-3 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
          >
            <Wand2 className="size-4" />
            <span className="hidden sm:inline">Generate</span>
          </button>
        </form>

        {/* Suggestion chips */}
        <div className="mt-4 flex flex-wrap justify-center gap-2">
          {suggestions.map((s) => (
            <button
              key={s}
              type="button"
              onClick={() => {
                setPrompt(s);
                if (status === "done") setStatus("idle");
              }}
              className="rounded-full border border-border bg-surface/60 px-3 py-1 text-xs text-muted transition-colors hover:border-border-strong hover:text-foreground"
            >
              {s}
            </button>
          ))}
        </div>

        {/* Response */}
        <div aria-live="polite" className="mt-5">
          {status === "loading" && (
            <div className="flex items-center gap-2 rounded-2xl border border-border bg-surface/60 px-4 py-3 text-sm text-muted">
              <span className="flex gap-1">
                <span className="size-1.5 animate-pulse rounded-full bg-brand-2" />
                <span
                  className="size-1.5 animate-pulse rounded-full bg-brand-2"
                  style={{ animationDelay: "0.2s" }}
                />
                <span
                  className="size-1.5 animate-pulse rounded-full bg-brand-2"
                  style={{ animationDelay: "0.4s" }}
                />
              </span>
              Generating…
            </div>
          )}
          {status === "done" && (
            <motion.div
              initial={reduce ? false : { opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.4, ease: "easeOut" }}
              className="flex gap-3 rounded-2xl border border-border bg-surface px-4 py-3 text-left"
            >
              <span className="grid size-7 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-white">
                <Sparkles className="size-3.5" />
              </span>
              <p className="text-sm leading-relaxed text-foreground/90">{answer}</p>
            </motion.div>
          )}
        </div>
      </div>
    </section>
  );
}
```

### Hero Search
Search-led landing hero with a prominent field and popular query chips (front-end only).
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-search.tsx

```tsx
"use client";

import { useId, useState } from "react";
import { Search, Sparkles, TrendingUp } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { GradientText } from "@/components/text/gradient-text";
import { cn } from "@/lib/utils";

export interface HeroSearchProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  placeholder?: string;
  buttonLabel?: string;
  /** Popular query chips shown beneath the field. */
  tags?: string[];
  className?: string;
}

const DEFAULT_TAGS = ["Dashboards", "Auth", "Pricing", "Onboarding", "AI chat"];

/**
 * HeroSearch — a search-led landing hero (docs, marketplace, templates). The
 * field is a labelled search form; submitting is a no-op (front-end only) and
 * the popular chips fill the query. Wire `onSubmit` to your own search.
 */
export function HeroSearch({
  eyebrow = "10,000+ building blocks",
  title = "Find the perfect",
  highlight = "starting point",
  description = "Search a growing library of production-ready sections, flows, and full pages — copy, paste, and make them yours.",
  placeholder = "Search components, blocks, templates…",
  buttonLabel = "Search",
  tags = DEFAULT_TAGS,
  className,
}: HeroSearchProps) {
  const reduce = useReducedMotion();
  const id = useId();
  const [query, setQuery] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Front-end only: no navigation or fetch. Wire this to your search.
  };

  return (
    <section
      className={cn(
        "relative isolate flex min-h-[30rem] items-center justify-center overflow-hidden rounded-2xl border border-border bg-background px-6 py-20 text-center",
        className,
      )}
    >
      {/* Faint dotted grid + glow. */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.5]"
        style={{
          backgroundImage:
            "radial-gradient(circle at 1px 1px, var(--border-strong) 1px, transparent 0)",
          backgroundSize: "26px 26px",
          maskImage:
            "radial-gradient(120% 110% at 50% 0%, #000 35%, transparent 75%)",
          WebkitMaskImage:
            "radial-gradient(120% 110% at 50% 0%, #000 35%, transparent 75%)",
        }}
      />
      <div
        aria-hidden
        className="pointer-events-none absolute left-1/2 top-[-18%] -z-10 size-[30rem] max-w-[120%] -translate-x-1/2 rounded-full opacity-35 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%)",
        }}
      />

      <motion.div
        initial={reduce ? false : { opacity: 0, y: 16 }}
        animate={reduce ? undefined : { opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="mx-auto w-full max-w-2xl"
      >
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface/70 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
          <Sparkles className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>
        <h1 className="mt-6 text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          {title} <GradientText>{highlight}</GradientText>
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-pretty text-base text-muted sm:text-lg">
          {description}
        </p>

        {/* Search field */}
        <form
          role="search"
          onSubmit={handleSubmit}
          className="mx-auto mt-8 flex max-w-lg items-center gap-2 rounded-full border border-border bg-surface p-1.5 pl-4 shadow-[0_20px_60px_-30px_var(--brand)] focus-within:border-brand"
        >
          <Search className="size-5 shrink-0 text-muted" />
          <label htmlFor={id} className="sr-only">
            Search
          </label>
          <input
            id={id}
            type="search"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder={placeholder}
            className="flex-1 bg-transparent py-2 text-sm text-foreground outline-none placeholder:text-muted-2"
          />
          <button
            type="submit"
            className="shrink-0 rounded-full bg-brand px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
          >
            {buttonLabel}
          </button>
        </form>

        {/* Popular tags */}
        <div className="mt-5 flex flex-wrap items-center justify-center gap-2 text-sm">
          <span className="inline-flex items-center gap-1.5 text-muted-2">
            <TrendingUp className="size-3.5" />
            Popular
          </span>
          {tags.map((tag) => (
            <button
              key={tag}
              type="button"
              onClick={() => setQuery(tag)}
              className="rounded-full border border-border bg-surface/60 px-3 py-1 text-muted transition-colors hover:border-border-strong hover:text-foreground"
            >
              {tag}
            </button>
          ))}
        </div>
      </motion.div>
    </section>
  );
}
```

### Hero Image
Full-bleed gradient-scene hero with a legibility scrim and overlay copy; server-renderable.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/hero-image.tsx

```tsx
import { ArrowRight, Star } from "lucide-react";
import { GradientText } from "@/components/text/gradient-text";
import { cn } from "@/lib/utils";

export interface HeroImageProps {
  eyebrow?: string;
  title?: string;
  /** Highlighted phrase rendered as gradient text. */
  highlight?: string;
  description?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  className?: string;
}

/**
 * HeroImage — a full-bleed, image-style hero built from layered CSS gradients
 * (no asset required) with a slowly drifting light. Overlay copy sits on a
 * content-anchored dark scrim plus a text-shadow halo so it stays AA-legible
 * over the bright artwork. Server-renderable; freezes under reduced motion.
 * Swap the gradient layers for a real next/image background when you have one.
 */
export function HeroImage({
  eyebrow = "New collection",
  title = "Design that feels like",
  highlight = "golden hour",
  description = "Warm, cinematic, and unmistakably yours. A hero that puts the mood first and lets the message glow.",
  primaryLabel = "Explore",
  secondaryLabel = "Watch film",
  className,
}: HeroImageProps) {
  return (
    <section
      className={cn(
        "relative isolate flex min-h-[36rem] items-end overflow-hidden rounded-2xl border border-border-strong",
        className,
      )}
    >
      {/* Scene base. */}
      <div
        aria-hidden
        className="absolute inset-0"
        style={{
          backgroundImage: [
            "radial-gradient(45% 35% at 50% 60%, color-mix(in oklab, var(--brand-3) 75%, transparent), transparent 70%)",
            "radial-gradient(60% 45% at 78% 30%, color-mix(in oklab, var(--brand) 55%, transparent), transparent 72%)",
            "linear-gradient(180deg, #0a0a1f 0%, color-mix(in oklab, var(--brand-ink) 45%, #0a0a1f) 38%, color-mix(in oklab, var(--brand-3) 35%, #160b24) 64%, #06060f 100%)",
          ].join(","),
        }}
      />
      {/* Drifting light. */}
      <div
        aria-hidden
        className="animate-float absolute -right-10 top-6 size-72 rounded-full opacity-50 blur-3xl"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklab, var(--brand-2) 55%, transparent), transparent 70%)",
        }}
      />
      {/* Fine grain. */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.05] mix-blend-overlay"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
        }}
      />
      {/* Content-anchored scrim for legibility. */}
      <div
        aria-hidden
        className="absolute inset-x-0 bottom-0 h-2/3"
        style={{
          background:
            "linear-gradient(to top, rgba(4,4,12,0.9) 0%, rgba(4,4,12,0.55) 35%, transparent 100%)",
        }}
      />

      {/* Overlay copy. */}
      <div className="relative z-10 w-full max-w-2xl p-8 text-left [text-shadow:0_1px_3px_rgba(0,0,0,0.7)] sm:p-12">
        <span className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-medium text-white backdrop-blur">
          <Star className="size-3 fill-current" />
          {eyebrow}
        </span>
        <h1 className="mt-5 text-balance text-4xl font-semibold tracking-tight text-white sm:text-6xl">
          {title} <GradientText>{highlight}</GradientText>
        </h1>
        <p className="mt-5 max-w-lg text-pretty text-base text-white/85 sm:text-lg">
          {description}
        </p>
        <div className="mt-8 flex flex-wrap items-center gap-3">
          <a
            href="#"
            className="inline-flex items-center gap-2 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
          >
            {primaryLabel}
            <ArrowRight className="size-4" />
          </a>
          <a
            href="#"
            className="rounded-full border border-white/25 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition-colors hover:bg-white/20"
          >
            {secondaryLabel}
          </a>
        </div>
      </div>
    </section>
  );
}
```

### Logo Cloud
A quiet marquee of customer wordmarks.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/logo-cloud.tsx

```tsx
import { Marquee } from "@/components/ui/marquee";
import { cn } from "@/lib/utils";

export interface LogoCloudProps {
  heading?: string;
  logos?: string[];
  className?: string;
}

const DEFAULT_LOGOS = [
  "Nebula",
  "Vertex",
  "Quanta",
  "Lumina",
  "Horizon",
  "Apex",
  "Drift",
  "Monolith",
];

/**
 * LogoCloud — a quiet marquee of customer wordmarks beneath a label. Uses
 * stylized text marks (no third-party brand assets).
 */
export function LogoCloud({
  heading = "Trusted by fast-moving teams",
  logos = DEFAULT_LOGOS,
  className,
}: LogoCloudProps) {
  return (
    <section className={cn("w-full", className)}>
      <p className="text-center text-sm text-muted">{heading}</p>
      <div className="mt-6">
        <Marquee duration={26}>
          {logos.map((logo) => (
            <span
              key={logo}
              className="mx-8 text-xl font-semibold tracking-tight text-muted/70"
            >
              {logo}
            </span>
          ))}
        </Marquee>
      </div>
    </section>
  );
}
```

### Bento Grid
Editorial asymmetric grid of spotlight feature cards.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-grid.tsx

```tsx
import type { ReactNode } from "react";
import { Boxes, Gauge, Layers, ShieldCheck, Wand2 } from "lucide-react";
import { SpotlightCard } from "@/components/ui/spotlight-card";
import { cn } from "@/lib/utils";

export interface BentoItem {
  title: string;
  description: string;
  icon?: ReactNode;
  /** Tailwind grid-span classes for this cell. */
  span?: string;
}

export interface BentoGridProps {
  items?: BentoItem[];
  className?: string;
}

const DEFAULT_ITEMS: BentoItem[] = [
  {
    title: "Motion-first by design",
    description:
      "Every component is built around fluid, interruptible animation — not bolted on afterwards.",
    icon: <Wand2 className="size-5" />,
    span: "sm:col-span-2 sm:row-span-2",
  },
  {
    title: "Composable",
    description: "Small primitives snap together into larger blocks.",
    icon: <Layers className="size-5" />,
  },
  {
    title: "Accessible",
    description: "Keyboard paths, ARIA, and reduced-motion respected.",
    icon: <ShieldCheck className="size-5" />,
  },
  {
    title: "Fast",
    description:
      "GPU-friendly effects that pause when off-screen to save battery.",
    icon: <Gauge className="size-5" />,
    span: "sm:col-span-2",
  },
  {
    title: "Zero lock-in",
    description: "Plain React + Tailwind. Copy what you need, own it.",
    icon: <Boxes className="size-5" />,
  },
];

/**
 * BentoGrid — an editorial, asymmetric grid of feature cards. Each cell is a
 * SpotlightCard so the whole board lights up under the cursor.
 */
export function BentoGrid({ items = DEFAULT_ITEMS, className }: BentoGridProps) {
  return (
    <div
      className={cn(
        "grid grid-cols-1 gap-4 sm:grid-cols-3 sm:auto-rows-[11rem]",
        className,
      )}
    >
      {items.map((item, i) => (
        <SpotlightCard
          key={i}
          className={cn("flex flex-col justify-between", item.span)}
        >
          <span className="grid size-10 place-items-center rounded-xl border border-border bg-background text-brand-ink">
            {item.icon}
          </span>
          <div className="mt-4">
            <h3 className="text-base font-semibold">{item.title}</h3>
            <p className="mt-1 text-sm text-muted">{item.description}</p>
          </div>
        </SpotlightCard>
      ))}
    </div>
  );
}
```

### Bento Showcase
Flagship product bento with bespoke per-cell visuals — an orbiting hero, a live bar chart, an avatar stack, and metrics.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-showcase.tsx

```tsx
"use client";

import { type ReactNode, useId } from "react";
import {
  Activity,
  ArrowUpRight,
  BarChart3,
  Boxes,
  Cloud,
  Code2,
  Database,
  ShieldCheck,
  Sparkles,
  Webhook,
  Zap,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { CountUp } from "@/components/text/count-up";
import { cn } from "@/lib/utils";

export interface BentoShowcaseProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  className?: string;
}

/** Bar heights (%) for the analytics mini-chart. */
const BARS = [38, 56, 44, 72, 58, 88, 76];
/** Integration tiles. */
const INTEGRATIONS = [Boxes, Cloud, Database, Code2, Webhook, Zap];
const AVATARS = [
  { initials: "MV", gradient: "from-brand to-brand-2" },
  { initials: "DP", gradient: "from-brand-2 to-brand-3" },
  { initials: "IC", gradient: "from-brand-3 to-brand" },
  { initials: "LR", gradient: "from-indigo-500 to-brand" },
];

/**
 * Cell — the shared surface for every bento tile: a bordered card that lifts a
 * touch and reveals a gradient hairline along its top edge on hover. Animation
 * is driven by the parent's stagger via the passed `variants`.
 */
function Cell({
  className,
  children,
  variants,
  accent = "var(--brand)",
}: {
  className?: string;
  children: ReactNode;
  variants?: Variants;
  accent?: string;
}) {
  return (
    <motion.div
      variants={variants}
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong",
        className,
      )}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{ background: `linear-gradient(90deg, transparent, ${accent}, transparent)` }}
      />
      {children}
    </motion.div>
  );
}

/** A drawn-on-view area sparkline used by the performance cell. */
function Sparkline({ reduce }: { reduce: boolean | null }) {
  const id = useId();
  const line =
    "M0,46 C20,40 28,18 48,24 C70,30 78,8 100,14 C122,20 130,44 152,38 C172,33 184,18 200,12";
  return (
    <svg
      viewBox="0 0 200 60"
      preserveAspectRatio="none"
      className="mt-4 h-16 w-full"
      aria-hidden
    >
      <defs>
        <linearGradient id={`${id}-stroke`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="var(--brand)" />
          <stop offset="100%" stopColor="var(--brand-2)" />
        </linearGradient>
        <linearGradient id={`${id}-fill`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--brand)" stopOpacity="0.22" />
          <stop offset="100%" stopColor="var(--brand)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <motion.path
        d={`${line} L200,60 L0,60 Z`}
        fill={`url(#${id}-fill)`}
        initial={reduce ? false : { opacity: 0 }}
        whileInView={reduce ? undefined : { opacity: 1 }}
        viewport={{ once: true, amount: 0.6 }}
        transition={{ duration: 0.8, delay: 0.25 }}
      />
      <motion.path
        d={line}
        fill="none"
        stroke={`url(#${id}-stroke)`}
        strokeWidth="2.5"
        strokeLinecap="round"
        vectorEffect="non-scaling-stroke"
        initial={reduce ? false : { pathLength: 0 }}
        whileInView={reduce ? undefined : { pathLength: 1 }}
        viewport={{ once: true, amount: 0.6 }}
        transition={{ duration: 1.1, ease: "easeInOut" }}
      />
    </svg>
  );
}

/**
 * BentoShowcase — a flagship product bento. Seven cells of varying size, each
 * carrying a bespoke visual (an orbiting hero, an animated bar chart, an avatar
 * stack, an integrations grid, a drawn sparkline, a pulsing security badge, and
 * a live uptime readout). Cells fade and lift in with a stagger on first view,
 * and every animation collapses gracefully under reduced-motion.
 */
export function BentoShowcase({
  eyebrow = "The platform",
  heading = "Everything you need, on one canvas",
  subheading = "A composable foundation that scales from your first prototype to production traffic — without the seams.",
  className,
}: BentoShowcaseProps) {
  const reduce = useReducedMotion();

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: reduce ? 0 : 0.07 } },
  };
  const item: Variants = {
    hidden: reduce ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
    },
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted">
          <Sparkles className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-pretty text-muted">
          {subheading}
        </p>
      </div>

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.1 }}
        className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[13rem]"
      >
        {/* Hero — orbiting feature */}
        <Cell
          variants={item}
          className="min-h-[18rem] sm:col-span-2 lg:row-span-2"
        >
          <div
            aria-hidden
            className="pointer-events-none absolute -right-10 -top-10 size-56"
          >
            <div
              className="absolute inset-0 rounded-full opacity-60 blur-2xl"
              style={{
                background:
                  "radial-gradient(circle, color-mix(in oklab, var(--brand) 45%, transparent), transparent 70%)",
              }}
            />
            <div className="absolute inset-6 animate-spin-slow rounded-full border border-border-strong">
              <span className="absolute left-1/2 top-0 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand shadow-[0_0_12px_var(--brand)]" />
            </div>
            <div className="absolute inset-14 animate-spin-slow rounded-full border border-border [animation-direction:reverse] [animation-duration:12s]">
              <span className="absolute left-1/2 top-0 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-2 shadow-[0_0_10px_var(--brand-2)]" />
            </div>
            <div className="absolute inset-[5.5rem] rounded-full border border-border" />
          </div>

          <span className="inline-flex w-fit items-center gap-2 rounded-full border border-border bg-background px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted-2">
            Featured
          </span>
          <div className="relative mt-auto">
            <h3 className="text-2xl font-semibold tracking-tight">
              Ship faster with one{" "}
              <span className="text-gradient">cohesive</span> toolkit
            </h3>
            <p className="mt-2 max-w-md text-sm leading-relaxed text-muted">
              Backgrounds, motion, and polished blocks that already speak the
              same design language — drop them in and go.
            </p>
            <a
              href="#"
              className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-ink"
            >
              Explore the system
              <ArrowUpRight className="size-4 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
            </a>
          </div>
        </Cell>

        {/* Analytics — animated bar chart */}
        <Cell variants={item} accent="var(--brand-2)" className="sm:col-span-2">
          <div className="flex items-start justify-between">
            <div>
              <div className="flex items-center gap-2 text-sm font-medium">
                <BarChart3 className="size-4 text-brand-ink" />
                Realtime analytics
              </div>
              <p className="mt-1 text-xs text-muted">
                Events streamed over the last 7 days
              </p>
            </div>
            <span className="inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-xs font-medium text-brand-2">
              <Activity className="size-3" />
              +18%
            </span>
          </div>
          <div className="mt-4 flex h-20 items-end gap-2">
            {BARS.map((h, i) => (
              <motion.span
                key={i}
                className="flex-1 rounded-t-sm bg-gradient-to-t from-brand/25 to-brand"
                style={{ height: `${h}%`, transformOrigin: "bottom" }}
                initial={reduce ? false : { scaleY: 0, opacity: 0.5 }}
                whileInView={reduce ? undefined : { scaleY: 1, opacity: 1 }}
                viewport={{ once: true, amount: 0.6 }}
                transition={{
                  duration: 0.6,
                  delay: i * 0.05,
                  ease: [0.22, 1, 0.36, 1],
                }}
              />
            ))}
          </div>
        </Cell>

        {/* Community — avatar stack */}
        <Cell variants={item} className="min-h-[12rem]">
          <div className="flex -space-x-3">
            {AVATARS.map((a) => (
              <span
                key={a.initials}
                className={cn(
                  "grid size-9 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white ring-2 ring-surface",
                  a.gradient,
                )}
              >
                {a.initials}
              </span>
            ))}
            <span className="grid size-9 place-items-center rounded-full border border-border bg-background text-xs font-medium text-muted ring-2 ring-surface">
              9k+
            </span>
          </div>
          <div className="mt-auto">
            <div className="text-2xl font-semibold tracking-tight">
              <CountUp to={10} suffix="k+" />
            </div>
            <p className="text-sm text-muted">Teams building with ONONC</p>
          </div>
        </Cell>

        {/* Integrations — icon tile grid */}
        <Cell variants={item} accent="var(--brand-3)" className="min-h-[12rem]">
          <div className="grid grid-cols-3 gap-2">
            {INTEGRATIONS.map((Icon, i) => (
              <span
                key={i}
                className="grid h-12 place-items-center rounded-lg border border-border bg-background text-muted transition-colors duration-300 group-hover:text-brand-ink"
              >
                <Icon className="size-4" />
              </span>
            ))}
          </div>
          <p className="mt-auto pt-4 text-sm text-muted">
            <span className="font-semibold text-foreground">50+</span> native
            integrations
          </p>
        </Cell>

        {/* Performance — drawn sparkline */}
        <Cell variants={item} className="sm:col-span-2">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-[11px] uppercase tracking-wider text-muted-2">
                p95 response time
              </p>
              <div className="mt-1 text-3xl font-semibold tracking-tight">
                <CountUp to={120} suffix="ms" />
              </div>
            </div>
            <span className="inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-xs font-medium text-brand-2">
              <Zap className="size-3" />
              Fast
            </span>
          </div>
          <Sparkline reduce={reduce} />
        </Cell>

        {/* Security — pulsing badge */}
        <Cell variants={item} accent="var(--brand-2)" className="min-h-[12rem]">
          <div className="relative w-fit">
            <span
              aria-hidden
              className="absolute inset-0 animate-pulse-ring rounded-xl border border-brand/50"
            />
            <span className="relative grid size-11 place-items-center rounded-xl border border-border bg-background text-brand-ink">
              <ShieldCheck className="size-5" />
            </span>
          </div>
          <div className="mt-auto">
            <h3 className="text-base font-semibold">Secure by default</h3>
            <p className="mt-1 text-sm text-muted">
              SOC 2 Type II and end-to-end encryption.
            </p>
          </div>
        </Cell>

        {/* Uptime — live readout */}
        <Cell variants={item} className="min-h-[12rem]">
          <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted">
            <span className="relative flex size-2">
              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
            </span>
            Operational
          </span>
          <div className="mt-auto">
            <div className="text-3xl font-semibold tracking-tight">
              <CountUp to={99.98} decimals={2} suffix="%" />
            </div>
            <p className="text-sm text-muted">Uptime over 90 days</p>
          </div>
        </Cell>
      </motion.div>
    </section>
  );
}
```

### Bento Stats
Analytics bento: counting metrics, a drawn sparkline, a radial goal dial, and animated traffic-source bars.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-stats.tsx

```tsx
"use client";

import { useEffect, useId, useRef, useState } from "react";
import {
  CalendarDays,
  Star,
  TrendingUp,
  Users,
} from "lucide-react";
import { motion, useInView, useReducedMotion } from "motion/react";
import { CountUp } from "@/components/text/count-up";
import { cn } from "@/lib/utils";

export interface SourceShare {
  label: string;
  value: number;
}

export interface BentoStatsProps {
  eyebrow?: string;
  heading?: string;
  sources?: SourceShare[];
  className?: string;
}

const DEFAULT_SOURCES: SourceShare[] = [
  { label: "Direct", value: 42 },
  { label: "Organic", value: 28 },
  { label: "Referral", value: 18 },
  { label: "Social", value: 12 },
];

/** A horizontal share bar that grows from the left on first view. */
function ShareBar({
  label,
  value,
  delay,
  reduce,
}: {
  label: string;
  value: number;
  delay: number;
  reduce: boolean | null;
}) {
  return (
    <div className="flex items-center gap-3">
      <span className="w-16 shrink-0 text-sm text-muted">{label}</span>
      <div className="h-2 flex-1 overflow-hidden rounded-full bg-surface-2">
        <motion.div
          className="h-full origin-left rounded-full bg-gradient-to-r from-brand to-brand-2"
          style={{ width: `${value}%` }}
          initial={reduce ? false : { scaleX: 0 }}
          whileInView={reduce ? undefined : { scaleX: 1 }}
          viewport={{ once: true, amount: 0.6 }}
          transition={{ duration: 0.8, delay, ease: [0.22, 1, 0.36, 1] }}
        />
      </div>
      <span className="w-10 shrink-0 text-right text-sm font-medium tabular-nums">
        {value}%
      </span>
    </div>
  );
}

/** A compact drawn-on-view area sparkline for the revenue cell. */
function RevenueSpark({ reduce }: { reduce: boolean | null }) {
  const id = useId();
  const line =
    "M0,52 C18,50 30,36 50,38 C72,40 80,20 104,24 C126,28 138,40 160,30 C182,20 190,12 200,8";
  return (
    <svg
      viewBox="0 0 200 60"
      preserveAspectRatio="none"
      className="mt-auto h-20 w-full"
      aria-hidden
    >
      <defs>
        <linearGradient id={`${id}-s`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="var(--brand)" />
          <stop offset="100%" stopColor="var(--brand-2)" />
        </linearGradient>
        <linearGradient id={`${id}-f`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--brand)" stopOpacity="0.2" />
          <stop offset="100%" stopColor="var(--brand)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <motion.path
        d={`${line} L200,60 L0,60 Z`}
        fill={`url(#${id}-f)`}
        initial={reduce ? false : { opacity: 0 }}
        whileInView={reduce ? undefined : { opacity: 1 }}
        viewport={{ once: true, amount: 0.6 }}
        transition={{ duration: 0.8, delay: 0.25 }}
      />
      <motion.path
        d={line}
        fill="none"
        stroke={`url(#${id}-s)`}
        strokeWidth="2.5"
        strokeLinecap="round"
        vectorEffect="non-scaling-stroke"
        initial={reduce ? false : { pathLength: 0 }}
        whileInView={reduce ? undefined : { pathLength: 1 }}
        viewport={{ once: true, amount: 0.6 }}
        transition={{ duration: 1.1, ease: "easeInOut" }}
      />
    </svg>
  );
}

/**
 * GoalDial — a radial progress dial that eases from 0 to its value the first
 * time it scrolls into view. Unlike a bare ring it carries an accessible name,
 * so screen readers announce what the percentage measures.
 */
function GoalDial({
  value,
  label,
  reduce,
}: {
  value: number;
  label: string;
  reduce: boolean | null;
}) {
  const gradId = useId();
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.5 });
  const [display, setDisplay] = useState(0);
  const size = 104;
  const stroke = 9;

  useEffect(() => {
    if (!inView) return;
    const duration = reduce ? 0 : 1200;
    const start = performance.now();
    let raf = 0;
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setDisplay(value * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, value, reduce]);

  const radius = (size - stroke) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference * (1 - display / 100);

  return (
    <div
      ref={ref}
      role="progressbar"
      aria-label={label}
      aria-valuemin={0}
      aria-valuemax={100}
      aria-valuenow={Math.round(display)}
      className="relative inline-grid place-items-center"
    >
      <svg width={size} height={size} className="-rotate-90">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="var(--surface-2)"
          strokeWidth={stroke}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke={`url(#${gradId})`}
          strokeWidth={stroke}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
        />
        <defs>
          <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="var(--brand)" />
            <stop offset="100%" stopColor="var(--brand-2)" />
          </linearGradient>
        </defs>
      </svg>
      <span className="absolute text-xl font-semibold tabular-nums">
        {Math.round(display)}%
      </span>
    </div>
  );
}

/**
 * BentoStats — an analytics bento that reads like a tidy product dashboard:
 * a revenue hero with a drawn sparkline, a radial goal dial, a live active
 * count, an animated traffic-source breakdown, a conversion KPI, and a rating
 * summary. Every number eases up and every bar grows in on first view, and all
 * of it holds still under reduced-motion.
 */
export function BentoStats({
  eyebrow = "Overview",
  heading = "Numbers that move in real time",
  sources = DEFAULT_SOURCES,
  className,
}: BentoStatsProps) {
  const reduce = useReducedMotion();

  return (
    <section className={cn("w-full", className)}>
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <p className="text-[11px] font-medium uppercase tracking-wider text-brand-ink">
            {eyebrow}
          </p>
          <h2 className="mt-1 text-3xl font-semibold tracking-tight sm:text-4xl">
            {heading}
          </h2>
        </div>
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1.5 text-xs font-medium text-muted">
          <CalendarDays className="size-3.5" />
          Last 30 days
        </span>
      </div>

      <div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[12rem]">
        {/* Revenue — hero metric + sparkline */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6 sm:col-span-2">
          <div className="flex items-start justify-between">
            <div>
              <p className="text-[11px] uppercase tracking-wider text-muted-2">
                Monthly revenue
              </p>
              <div className="mt-1 text-3xl font-semibold tracking-tight sm:text-4xl">
                <CountUp to={128.4} decimals={1} prefix="$" suffix="k" />
              </div>
            </div>
            <span className="inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-xs font-medium text-emerald-500">
              <TrendingUp className="size-3" />
              +24%
            </span>
          </div>
          <RevenueSpark reduce={reduce} />
        </div>

        {/* Goal — radial dial */}
        <div className="flex min-h-[12rem] flex-col items-center justify-center gap-3 rounded-2xl border border-border bg-surface p-6 text-center">
          <GoalDial value={78} label="Quarterly goal completion" reduce={reduce} />
          <div>
            <p className="text-sm font-medium">Quarterly goal</p>
            <p className="text-xs text-muted">$1.2M target</p>
          </div>
        </div>

        {/* Active now — live count */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6">
          <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted">
            <span className="relative flex size-2">
              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
            </span>
            Live
          </span>
          <div className="mt-auto">
            <div className="flex items-center gap-1.5 text-3xl font-semibold tracking-tight">
              <Users className="size-5 text-brand-ink" />
              <CountUp to={1284} />
            </div>
            <p className="text-sm text-muted">Active users right now</p>
          </div>
        </div>

        {/* Traffic sources — animated bars */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6 sm:col-span-2">
          <p className="text-sm font-medium">Traffic sources</p>
          <div className="mt-auto flex flex-col gap-3">
            {sources.map((s, i) => (
              <ShareBar
                key={s.label}
                label={s.label}
                value={s.value}
                delay={i * 0.08}
                reduce={reduce}
              />
            ))}
          </div>
        </div>

        {/* Conversion — KPI */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6">
          <p className="text-[11px] uppercase tracking-wider text-muted-2">
            Checkout conversion
          </p>
          <div className="mt-auto">
            <div className="text-3xl font-semibold tracking-tight">
              <CountUp to={3.8} decimals={1} suffix="%" />
            </div>
            <span className="mt-2 inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-xs font-medium text-emerald-500">
              <TrendingUp className="size-3" />
              +0.6 pts
            </span>
          </div>
        </div>

        {/* Rating — satisfaction */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6">
          <div className="flex gap-0.5" aria-hidden>
            {Array.from({ length: 5 }).map((_, i) => (
              <Star key={i} className="size-4 fill-brand text-brand" />
            ))}
          </div>
          <div className="mt-auto">
            <div className="text-3xl font-semibold tracking-tight">
              <CountUp to={4.9} decimals={1} />
              <span className="text-lg text-muted">/5</span>
            </div>
            <p className="text-sm text-muted">From 2,400 reviews</p>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Bento Gallery
Editorial media wall of CSS mesh-gradient tiles with hover-zoom and a caption that resolves on hover or focus.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-gallery.tsx

```tsx
import { ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface GalleryTile {
  eyebrow: string;
  title: string;
  description?: string;
  /** Layered CSS background (mesh gradient) for the tile. */
  background: string;
  /** Tailwind grid-span classes. */
  span?: string;
  href?: string;
}

export interface BentoGalleryProps {
  heading?: string;
  subheading?: string;
  actionLabel?: string;
  tiles?: GalleryTile[];
  className?: string;
}

const DEFAULT_TILES: GalleryTile[] = [
  {
    eyebrow: "Editorial",
    title: "Designing in motion",
    description:
      "A study of rhythm, easing, and restraint across a living interface.",
    span: "col-span-2 row-span-2",
    background:
      "radial-gradient(at 18% 22%, #a78bfa 0px, transparent 55%), radial-gradient(at 82% 8%, #22d3ee 0px, transparent 50%), radial-gradient(at 60% 92%, #8b5cf6 0px, transparent 55%), linear-gradient(135deg, #2e1065, #0b0d18)",
  },
  {
    eyebrow: "Showcase",
    title: "Selected work",
    description: "Twelve projects, one consistent design language.",
    span: "col-span-2",
    background:
      "radial-gradient(at 20% 80%, #fb7185 0px, transparent 55%), radial-gradient(at 85% 20%, #8b5cf6 0px, transparent 50%), linear-gradient(135deg, #4c0519, #0b0d18)",
  },
  {
    eyebrow: "Studio",
    title: "Behind the build",
    background:
      "radial-gradient(at 25% 20%, #22d3ee 0px, transparent 52%), radial-gradient(at 78% 78%, #0ea5e9 0px, transparent 55%), linear-gradient(135deg, #083344, #0b0d18)",
  },
  {
    eyebrow: "Type",
    title: "Letters in space",
    background:
      "radial-gradient(at 30% 28%, #6366f1 0px, transparent 55%), radial-gradient(at 80% 12%, #a78bfa 0px, transparent 50%), linear-gradient(135deg, #1e1b4b, #0b0d18)",
  },
  {
    eyebrow: "Color",
    title: "Palettes that pulse",
    background:
      "radial-gradient(at 22% 25%, #fbbf24 0px, transparent 50%), radial-gradient(at 82% 80%, #fb7185 0px, transparent 55%), linear-gradient(135deg, #422006, #0b0d18)",
  },
  {
    eyebrow: "Field notes",
    title: "On craft",
    background:
      "radial-gradient(at 25% 25%, #34d399 0px, transparent 50%), radial-gradient(at 80% 72%, #22d3ee 0px, transparent 55%), linear-gradient(135deg, #022c22, #0b0d18)",
  },
  {
    eyebrow: "Journal",
    title: "Writing about the web",
    description: "Essays on interface, motion, and taste.",
    span: "col-span-2",
    background:
      "radial-gradient(at 18% 30%, #8b5cf6 0px, transparent 55%), radial-gradient(at 85% 75%, #e11d62 0px, transparent 52%), linear-gradient(135deg, #2e1065, #0b0d18)",
  },
];

/**
 * BentoGallery — an editorial media wall. Each tile is a layered CSS mesh
 * gradient (no image assets, so it stays crisp at any size and ships nothing
 * to download); the artwork zooms gently and the caption resolves on hover or
 * keyboard focus. A strong bottom scrim plus a text-shadow keep the white
 * captions legible over even the brightest tiles.
 */
export function BentoGallery({
  heading = "From the studio",
  subheading = "A living gallery of work, words, and experiments.",
  actionLabel = "View gallery",
  tiles = DEFAULT_TILES,
  className,
}: BentoGalleryProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
            {heading}
          </h2>
          <p className="mt-2 text-muted">{subheading}</p>
        </div>
        <a
          href="#"
          className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface px-4 py-2 text-sm font-medium transition-colors hover:border-border-strong hover:bg-surface-2"
        >
          {actionLabel}
          <ArrowUpRight className="size-4" />
        </a>
      </div>

      <div className="mt-8 grid auto-rows-[11rem] grid-cols-2 gap-3 sm:grid-cols-4 sm:auto-rows-[12rem]">
        {tiles.map((tile) => (
          <a
            key={`${tile.eyebrow}-${tile.title}`}
            href={tile.href ?? "#"}
            aria-label={`${tile.eyebrow}: ${tile.title}`}
            className={cn(
              "group relative block overflow-hidden rounded-2xl border border-border",
              tile.span,
            )}
          >
            {/* artwork */}
            <span
              aria-hidden
              className="absolute inset-0 scale-100 transition-transform duration-700 ease-out group-hover:scale-105"
              style={{ background: tile.background }}
            />
            {/* legibility scrim */}
            <span
              aria-hidden
              className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/15 to-transparent"
            />
            {/* hover ring */}
            <span
              aria-hidden
              className="absolute inset-0 rounded-2xl opacity-0 ring-1 ring-inset ring-white/25 transition-opacity duration-300 group-hover:opacity-100"
            />
            {/* corner action */}
            <span
              aria-hidden
              className="absolute right-3 top-3 grid size-8 translate-y-1 place-items-center rounded-full bg-white/15 text-white opacity-0 backdrop-blur transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100"
            >
              <ArrowUpRight className="size-4" />
            </span>

            <div className="relative flex h-full flex-col justify-end p-5 [text-shadow:0_1px_12px_rgba(0,0,0,0.5)]">
              <span className="text-[11px] font-medium uppercase tracking-wider text-white/80">
                {tile.eyebrow}
              </span>
              <h3 className="mt-1 text-lg font-semibold text-white">
                {tile.title}
              </h3>
              {tile.description ? (
                <p className="mt-1 max-w-sm translate-y-1 text-sm text-white/80 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100">
                  {tile.description}
                </p>
              ) : null}
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
```

### Bento Interactive
Interaction showcase: a conic gradient border, cursor spotlight, 3D tilt, magnetic CTA, and copy-to-clipboard.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-interactive.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useState } from "react";
import {
  ArrowRight,
  Box,
  Check,
  Copy,
  MousePointer2,
  Sparkles,
  Terminal,
  Wand2,
  Zap,
} from "lucide-react";
import { CountUp } from "@/components/text/count-up";
import { MagneticButton } from "@/components/ui/magnetic-button";
import { SpotlightCard } from "@/components/ui/spotlight-card";
import { Switch } from "@/components/ui/switch";
import { TiltCard } from "@/components/ui/tilt-card";
import { cn } from "@/lib/utils";

export interface BentoInteractiveProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  /** The command shown in the copy-to-clipboard cell. */
  command?: string;
  className?: string;
}

function IconTile({ children }: { children: ReactNode }) {
  return (
    <span className="grid size-11 place-items-center rounded-xl border border-border bg-background text-brand-ink">
      {children}
    </span>
  );
}

/**
 * BentoInteractive — a bento that puts the library's interaction model on
 * display: a conic sheen that orbits a card edge, a cursor spotlight, a 3D
 * tilt, a magnetic call-to-action, a copy-to-clipboard command, and a live
 * toggle. Each cell is a real, working primitive — not a screenshot — and each
 * effect settles to a calm resting state when motion is reduced.
 */
export function BentoInteractive({
  eyebrow = "Interactive",
  heading = "Built to be touched",
  subheading = "Every surface reacts — to the pointer, to focus, to a tap. Hover, drag, and click around.",
  command = "npm i ononc",
  className,
}: BentoInteractiveProps) {
  const [copied, setCopied] = useState(false);
  const [live, setLive] = useState(true);

  useEffect(() => {
    if (!copied) return;
    const t = setTimeout(() => setCopied(false), 2000);
    return () => clearTimeout(t);
  }, [copied]);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(command);
      setCopied(true);
    } catch {
      /* clipboard unavailable — leave the button state unchanged */
    }
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted">
          <Sparkles className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-pretty text-muted">
          {subheading}
        </p>
      </div>

      <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {/* Conic gradient border */}
        <div className="group relative min-h-[12rem] overflow-hidden rounded-2xl bg-border p-px sm:col-span-2">
          <span
            aria-hidden
            className="absolute -inset-[150%] animate-spin-slow"
            style={{
              background:
                "conic-gradient(from 0deg, transparent 0deg, var(--brand) 70deg, var(--brand-2) 150deg, var(--brand-3) 220deg, transparent 320deg)",
            }}
          />
          <div className="relative flex h-full flex-col justify-between rounded-[calc(1rem-1px)] bg-surface p-6">
            <IconTile>
              <Wand2 className="size-5" />
            </IconTile>
            <div>
              <h3 className="text-base font-semibold">Living gradient borders</h3>
              <p className="mt-1 max-w-sm text-sm text-muted">
                A conic sheen orbits the edge on a slow loop, then rests as a
                still gradient when motion is reduced.
              </p>
            </div>
          </div>
        </div>

        {/* Cursor spotlight */}
        <SpotlightCard className="min-h-[12rem]">
          <IconTile>
            <MousePointer2 className="size-5" />
          </IconTile>
          <h3 className="mt-4 text-base font-semibold">Cursor spotlight</h3>
          <p className="mt-1 text-sm text-muted">
            A soft glow tracks your pointer across the surface.
          </p>
        </SpotlightCard>

        {/* 3D tilt */}
        <TiltCard
          className="flex h-full min-h-[12rem] flex-col justify-between border border-border bg-surface p-6"
          max={10}
        >
          <IconTile>
            <Box className="size-5" />
          </IconTile>
          <div>
            <h3 className="text-base font-semibold">3D tilt</h3>
            <p className="mt-1 text-sm text-muted">
              Leans toward the cursor with a tracking glare.
            </p>
          </div>
        </TiltCard>

        {/* Copy command */}
        <div className="flex min-h-[12rem] flex-col justify-between rounded-2xl border border-border bg-surface p-6 sm:col-span-2">
          <div className="flex items-center gap-1.5 text-muted">
            <Terminal className="size-4" />
            <span className="text-xs font-medium">Quickstart</span>
          </div>
          <div>
            <p className="text-sm text-muted">Install in seconds</p>
            <div className="mt-2 flex items-center justify-between gap-3 rounded-xl border border-border bg-background px-4 py-3">
              <code className="min-w-0 flex-1 truncate font-mono text-sm text-foreground">
                <span className="text-brand-2">$</span> {command}
              </code>
              <button
                type="button"
                onClick={copy}
                aria-label={copied ? "Copied" : "Copy command"}
                className="grid size-8 shrink-0 place-items-center rounded-lg border border-border text-muted transition-colors hover:text-foreground"
              >
                {copied ? (
                  <Check className="size-4 text-emerald-500" />
                ) : (
                  <Copy className="size-4" />
                )}
              </button>
            </div>
          </div>
        </div>

        {/* Magnetic CTA */}
        <div className="flex min-h-[12rem] flex-col items-center justify-center gap-4 rounded-2xl border border-border bg-surface p-6 text-center">
          <p className="text-sm text-muted">Buttons that lean in</p>
          <MagneticButton aria-label="Get started">
            Get started
            <ArrowRight className="size-4" />
          </MagneticButton>
        </div>

        {/* Live toggle */}
        <div className="flex min-h-[12rem] flex-col justify-between rounded-2xl border border-border bg-surface p-6">
          <div className="flex items-center justify-between">
            <span className="inline-flex items-center gap-1.5 text-sm font-medium">
              <span
                aria-hidden
                className={cn(
                  "size-2 rounded-full transition-colors",
                  live ? "bg-emerald-500" : "bg-muted-2",
                )}
              />
              {live ? "Live" : "Paused"}
            </span>
            <Switch
              checked={live}
              onCheckedChange={setLive}
              label="Toggle live updates"
            />
          </div>
          <div>
            <div className="flex items-center gap-1.5 text-2xl font-semibold tracking-tight">
              <Zap className="size-5 text-brand-ink" />
              <CountUp to={live ? 1240 : 0} />
            </div>
            <p className="text-sm text-muted">
              {live ? "Events streaming in" : "Stream paused"}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Bento Features
Feature-storytelling bento with bespoke mocks — an automation pipeline, a ⌘K palette, live cursors, and theming.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-features.tsx

```tsx
"use client";

import { type ReactNode, Fragment } from "react";
import {
  Accessibility,
  Check,
  CloudOff,
  FileText,
  Filter,
  Monitor,
  MousePointer2,
  RefreshCw,
  Search,
  Send,
  Settings,
  Smartphone,
  Sparkles,
  UserPlus,
  Zap,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface BentoFeaturesProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  className?: string;
}

function Cell({
  className,
  children,
  variants,
  accent = "var(--brand)",
}: {
  className?: string;
  children: ReactNode;
  variants?: Variants;
  accent?: string;
}) {
  return (
    <motion.div
      variants={variants}
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong",
        className,
      )}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{ background: `linear-gradient(90deg, transparent, ${accent}, transparent)` }}
      />
      {children}
    </motion.div>
  );
}

function NodeTile({ children }: { children: ReactNode }) {
  return (
    <span className="grid size-11 shrink-0 place-items-center rounded-xl border border-border bg-background text-brand-ink">
      {children}
    </span>
  );
}

/** A connecting wire with a pulse that travels along it (still under reduced-motion). */
function Wire({ reduce }: { reduce: boolean | null }) {
  return (
    <div className="relative mx-1 h-px flex-1 bg-border-strong">
      <motion.span
        aria-hidden
        className="absolute -top-1 size-2 rounded-full bg-brand shadow-[0_0_10px_var(--brand)]"
        style={{ left: 0 }}
        initial={reduce ? false : { left: "0%", opacity: 0 }}
        animate={reduce ? undefined : { left: ["0%", "100%"], opacity: [0, 1, 0] }}
        transition={
          reduce
            ? undefined
            : { duration: 2.2, repeat: Infinity, ease: "easeInOut" }
        }
      />
    </div>
  );
}

const PIPELINE = [
  { icon: <Zap className="size-5" />, label: "Trigger" },
  { icon: <Filter className="size-5" />, label: "Filter" },
  { icon: <Send className="size-5" />, label: "Action" },
];

const COMMANDS = [
  { icon: <FileText className="size-4" />, label: "Create new document", keys: "C" },
  { icon: <UserPlus className="size-4" />, label: "Invite a teammate", keys: "I" },
  { icon: <Settings className="size-4" />, label: "Open settings", keys: "," },
];

const SWATCHES = [
  "bg-brand",
  "bg-brand-2",
  "bg-brand-3",
  "bg-indigo-500",
  "bg-emerald-500",
];

/**
 * BentoFeatures — a feature-storytelling bento. Instead of metrics, each cell
 * carries a small, bespoke product mock: an automation pipeline with a pulse
 * that travels the wires, a ⌘K command palette, live collaboration cursors, a
 * theming swatch row, cross-device sync, and accessibility/offline notes. Cells
 * fade and lift in with a stagger; every animation rests when motion is reduced.
 */
export function BentoFeatures({
  eyebrow = "Capabilities",
  heading = "Built for the way you work",
  subheading = "Thoughtful features that compound — each one designed to disappear into your flow.",
  className,
}: BentoFeaturesProps) {
  const reduce = useReducedMotion();

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: reduce ? 0 : 0.07 } },
  };
  const item: Variants = {
    hidden: reduce ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
    },
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted">
          <Sparkles className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-pretty text-muted">
          {subheading}
        </p>
      </div>

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.1 }}
        className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[13rem]"
      >
        {/* Automation pipeline — hero */}
        <Cell variants={item} className="min-h-[18rem] sm:col-span-2 lg:row-span-2">
          <span className="inline-flex w-fit items-center gap-2 rounded-full border border-border bg-background px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted-2">
            Automation
          </span>
          <div className="mt-8 flex items-center">
            {PIPELINE.map((step, i) => (
              <Fragment key={step.label}>
                <div className="flex flex-col items-center gap-2">
                  <NodeTile>{step.icon}</NodeTile>
                  <span className="text-[11px] text-muted">{step.label}</span>
                </div>
                {i < PIPELINE.length - 1 ? <Wire reduce={reduce} /> : null}
              </Fragment>
            ))}
          </div>
          <div className="mt-auto">
            <h3 className="text-2xl font-semibold tracking-tight">
              Automate the busywork
            </h3>
            <p className="mt-2 max-w-md text-sm leading-relaxed text-muted">
              Chain triggers, filters, and actions into pipelines that run
              themselves — no glue code, no babysitting.
            </p>
          </div>
        </Cell>

        {/* Command palette */}
        <Cell variants={item} accent="var(--brand-2)" className="sm:col-span-2">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2 text-sm font-medium">
              <Search className="size-4 text-brand-ink" />
              Command palette
            </div>
            <kbd className="rounded-md border border-border bg-background px-1.5 py-0.5 font-mono text-[11px] text-muted">
              ⌘K
            </kbd>
          </div>
          <div className="mt-3 rounded-lg border border-border bg-background p-1.5">
            <ul className="space-y-0.5">
              {COMMANDS.map((c, i) => (
                <li
                  key={c.label}
                  className={cn(
                    "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm",
                    i === 0 ? "bg-surface-2 text-foreground" : "text-muted",
                  )}
                >
                  <span className="text-brand-ink">{c.icon}</span>
                  <span className="flex-1 truncate">{c.label}</span>
                  <kbd className="rounded border border-border px-1 font-mono text-[10px] text-muted-2">
                    {c.keys}
                  </kbd>
                </li>
              ))}
            </ul>
          </div>
        </Cell>

        {/* Collaboration cursors */}
        <Cell variants={item} className="min-h-[12rem]">
          <div aria-hidden className="relative flex-1">
            <span
              className="absolute left-1 top-2 inline-flex animate-float items-center gap-1"
            >
              <MousePointer2 className="size-4 -scale-x-100 fill-brand text-brand" />
              <span className="rounded-md bg-brand px-1.5 py-0.5 text-[10px] font-medium text-white">
                Mara
              </span>
            </span>
            <span
              className="absolute bottom-1 right-2 inline-flex animate-float items-center gap-1 [animation-delay:0.8s]"
            >
              <MousePointer2 className="size-4 fill-brand-2 text-brand-2" />
              <span className="rounded-md bg-brand-2 px-1.5 py-0.5 text-[10px] font-medium text-white">
                Devon
              </span>
            </span>
          </div>
          <div className="mt-2">
            <h3 className="text-base font-semibold">Real-time together</h3>
            <p className="mt-1 text-sm text-muted">
              Live cursors, presence, and instant sync.
            </p>
          </div>
        </Cell>

        {/* Theming swatches */}
        <Cell variants={item} accent="var(--brand-3)" className="min-h-[12rem]">
          <div className="flex gap-2">
            {SWATCHES.map((s, i) => (
              <span
                key={s}
                className={cn(
                  "size-8 rounded-lg",
                  s,
                  i === 0 && "ring-2 ring-brand ring-offset-2 ring-offset-surface",
                )}
              />
            ))}
          </div>
          <div className="mt-auto">
            <h3 className="text-base font-semibold">Make it yours</h3>
            <p className="mt-1 text-sm text-muted">
              Restyle the whole kit from a handful of tokens.
            </p>
          </div>
        </Cell>

        {/* Cross-device sync */}
        <Cell variants={item} accent="var(--brand-2)" className="sm:col-span-2">
          <div className="flex items-center gap-2 text-sm font-medium">
            <RefreshCw className="size-4 text-brand-ink" />
            Synced everywhere
          </div>
          <div className="mt-auto flex items-center justify-center gap-3">
            <div className="flex flex-col items-center gap-1.5">
              <NodeTile>
                <Monitor className="size-5" />
              </NodeTile>
              <span className="text-[11px] text-muted">Desktop</span>
            </div>
            <div className="relative mb-5 h-px flex-1 bg-border-strong">
              <span className="absolute left-1/2 top-1/2 grid size-6 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-border bg-background text-brand-2">
                <Check className="size-3.5" />
              </span>
              <motion.span
                aria-hidden
                className="absolute -top-1 size-2 rounded-full bg-brand-2"
                initial={reduce ? false : { left: "0%", opacity: 0 }}
                animate={
                  reduce ? undefined : { left: ["0%", "100%"], opacity: [0, 1, 0] }
                }
                transition={
                  reduce
                    ? undefined
                    : { duration: 2.4, repeat: Infinity, ease: "easeInOut" }
                }
              />
            </div>
            <div className="flex flex-col items-center gap-1.5">
              <NodeTile>
                <Smartphone className="size-5" />
              </NodeTile>
              <span className="text-[11px] text-muted">Mobile</span>
            </div>
          </div>
        </Cell>

        {/* Accessibility */}
        <Cell variants={item} className="min-h-[12rem]">
          <NodeTile>
            <Accessibility className="size-5" />
          </NodeTile>
          <div className="mt-auto">
            <h3 className="text-base font-semibold">Accessible by default</h3>
            <p className="mt-1 text-sm text-muted">
              Keyboard paths, ARIA, and reduced-motion — built in.
            </p>
          </div>
        </Cell>

        {/* Offline */}
        <Cell variants={item} accent="var(--brand-3)" className="min-h-[12rem]">
          <NodeTile>
            <CloudOff className="size-5" />
          </NodeTile>
          <div className="mt-auto">
            <h3 className="text-base font-semibold">Works offline</h3>
            <p className="mt-1 text-sm text-muted">
              Local-first — edits sync the moment you reconnect.
            </p>
          </div>
        </Cell>
      </motion.div>
    </section>
  );
}
```

### Bento Product
Product-UI preview: an app-window mock with a drawn chart, a mini kanban board, an activity feed, and a KPI.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-product.tsx

```tsx
"use client";

import { type ReactNode, useId } from "react";
import {
  BarChart3,
  Folder,
  LayoutDashboard,
  Settings,
  TrendingUp,
  Users,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { CountUp } from "@/components/text/count-up";
import { cn } from "@/lib/utils";

export interface BentoProductProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  className?: string;
}

function Cell({
  className,
  children,
  variants,
  accent = "var(--brand)",
}: {
  className?: string;
  children: ReactNode;
  variants?: Variants;
  accent?: string;
}) {
  return (
    <motion.div
      variants={variants}
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong",
        className,
      )}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{ background: `linear-gradient(90deg, transparent, ${accent}, transparent)` }}
      />
      {children}
    </motion.div>
  );
}

/** A drawn-on-view area chart for the app-window mock. */
function AreaChart({ reduce }: { reduce: boolean | null }) {
  const id = useId();
  const line =
    "M0,40 C16,38 24,24 40,26 C58,28 64,14 84,18 C104,22 112,30 132,22 C152,14 160,8 176,10 C190,12 196,16 200,14";
  return (
    <svg
      viewBox="0 0 200 50"
      preserveAspectRatio="none"
      className="h-full w-full"
      aria-hidden
    >
      <defs>
        <linearGradient id={`${id}-s`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="var(--brand)" />
          <stop offset="100%" stopColor="var(--brand-2)" />
        </linearGradient>
        <linearGradient id={`${id}-f`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--brand)" stopOpacity="0.22" />
          <stop offset="100%" stopColor="var(--brand)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <motion.path
        d={`${line} L200,50 L0,50 Z`}
        fill={`url(#${id}-f)`}
        initial={reduce ? false : { opacity: 0 }}
        whileInView={reduce ? undefined : { opacity: 1 }}
        viewport={{ once: true, amount: 0.6 }}
        transition={{ duration: 0.8, delay: 0.3 }}
      />
      <motion.path
        d={line}
        fill="none"
        stroke={`url(#${id}-s)`}
        strokeWidth="2"
        strokeLinecap="round"
        vectorEffect="non-scaling-stroke"
        initial={reduce ? false : { pathLength: 0 }}
        whileInView={reduce ? undefined : { pathLength: 1 }}
        viewport={{ once: true, amount: 0.6 }}
        transition={{ duration: 1.1, ease: "easeInOut" }}
      />
    </svg>
  );
}

const NAV = [
  { icon: <LayoutDashboard className="size-4" />, label: "Overview" },
  { icon: <Folder className="size-4" />, label: "Projects" },
  { icon: <BarChart3 className="size-4" />, label: "Reports" },
  { icon: <Settings className="size-4" />, label: "Settings" },
];

const STATS = [
  { label: "Revenue", value: "$48k" },
  { label: "Users", value: "2,310" },
  { label: "Churn", value: "1.2%" },
];

const COLUMNS = [
  { name: "To do", cards: 2, tint: "bg-muted-2/40" },
  { name: "Doing", cards: 2, tint: "bg-brand/60" },
  { name: "Done", cards: 1, tint: "bg-emerald-500/60" },
];

const ACTIVITY = [
  { who: "Mara", what: "shipped v2.4", when: "2m", gradient: "from-brand to-brand-2" },
  { who: "Devon", what: "opened a PR", when: "18m", gradient: "from-brand-2 to-brand-3" },
  { who: "Iris", what: "left a review", when: "1h", gradient: "from-brand-3 to-brand" },
];

/**
 * BentoProduct — a "see it in action" bento. The hero is a faithful app-window
 * mock (chrome, sidebar nav, and a chart that draws itself), surrounded by a
 * mini kanban board, a live activity feed, and a headline KPI. It's all real
 * markup — resizable, themable, and still under reduced-motion.
 */
export function BentoProduct({
  eyebrow = "Product",
  heading = "See your whole workspace at a glance",
  subheading = "One calm surface for projects, metrics, and the people moving them forward.",
  className,
}: BentoProductProps) {
  const reduce = useReducedMotion();

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: reduce ? 0 : 0.07 } },
  };
  const item: Variants = {
    hidden: reduce ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
    },
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted">
          <LayoutDashboard className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-pretty text-muted">
          {subheading}
        </p>
      </div>

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.1 }}
        className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[13rem]"
      >
        {/* App window — hero */}
        <Cell
          variants={item}
          className="min-h-[20rem] p-0 sm:col-span-2 lg:row-span-2"
        >
          <div className="flex h-full flex-col">
            {/* chrome */}
            <div className="flex items-center gap-2 border-b border-border px-4 py-3">
              <span className="size-2.5 rounded-full bg-brand-3/80" />
              <span className="size-2.5 rounded-full bg-amber-400/80" />
              <span className="size-2.5 rounded-full bg-emerald-500/80" />
              <span className="ml-2 flex-1 truncate rounded-md bg-background px-3 py-1 text-[11px] text-muted-2">
                app.ononc.ui/dashboard
              </span>
            </div>
            {/* body */}
            <div className="flex min-h-0 flex-1">
              <nav className="hidden w-32 shrink-0 flex-col gap-1 border-r border-border p-3 sm:flex">
                {NAV.map((n, i) => (
                  <span
                    key={n.label}
                    className={cn(
                      "flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm",
                      i === 0
                        ? "bg-surface-2 font-medium text-foreground"
                        : "text-muted",
                    )}
                  >
                    <span className={i === 0 ? "text-brand-ink" : ""}>
                      {n.icon}
                    </span>
                    {n.label}
                  </span>
                ))}
              </nav>
              <div className="flex min-w-0 flex-1 flex-col p-4">
                <div className="flex items-center justify-between">
                  <h3 className="text-sm font-semibold">Overview</h3>
                  <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-[11px] text-muted">
                    <span className="relative flex size-1.5">
                      <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
                      <span className="relative inline-flex size-1.5 rounded-full bg-emerald-500" />
                    </span>
                    Live
                  </span>
                </div>
                <div className="mt-3 grid grid-cols-3 gap-2">
                  {STATS.map((s) => (
                    <div
                      key={s.label}
                      className="rounded-lg border border-border bg-background px-2.5 py-2"
                    >
                      <div className="text-[10px] uppercase tracking-wide text-muted-2">
                        {s.label}
                      </div>
                      <div className="mt-0.5 text-sm font-semibold tabular-nums">
                        {s.value}
                      </div>
                    </div>
                  ))}
                </div>
                <div className="mt-3 min-h-0 flex-1">
                  <AreaChart reduce={reduce} />
                </div>
              </div>
            </div>
          </div>
        </Cell>

        {/* Kanban */}
        <Cell variants={item} accent="var(--brand-2)" className="sm:col-span-2">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-medium">Sprint board</h3>
            <span className="text-xs text-muted">5 tasks</span>
          </div>
          <div className="mt-3 grid flex-1 grid-cols-3 gap-2">
            {COLUMNS.map((col) => (
              <div
                key={col.name}
                className="flex flex-col rounded-lg border border-border bg-background p-2"
              >
                <span className="mb-2 text-[10px] uppercase tracking-wide text-muted-2">
                  {col.name}
                </span>
                <div className="flex flex-col gap-1.5">
                  {Array.from({ length: col.cards }).map((_, i) => (
                    <div
                      key={i}
                      className="rounded-md border border-border bg-surface p-2"
                    >
                      <span className={cn("block h-1.5 w-3/4 rounded-full", col.tint)} />
                      <span className="mt-1.5 block h-1.5 w-1/2 rounded-full bg-border-strong" />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Cell>

        {/* Activity feed */}
        <Cell variants={item} className="min-h-[12rem]">
          <h3 className="text-sm font-medium">Activity</h3>
          <ul className="mt-3 flex flex-col gap-2.5">
            {ACTIVITY.map((a) => (
              <li key={a.who} className="flex items-center gap-2.5 text-sm">
                <span
                  aria-hidden
                  className={cn(
                    "grid size-6 shrink-0 place-items-center rounded-full bg-gradient-to-br text-[10px] font-semibold text-white",
                    a.gradient,
                  )}
                >
                  {a.who[0]}
                </span>
                <span className="min-w-0 flex-1 truncate text-muted">
                  <span className="font-medium text-foreground">{a.who}</span>{" "}
                  {a.what}
                </span>
                <span className="shrink-0 text-xs text-muted-2">{a.when}</span>
              </li>
            ))}
          </ul>
        </Cell>

        {/* KPI */}
        <Cell variants={item} accent="var(--brand-3)" className="min-h-[12rem]">
          <div className="flex items-center gap-2 text-sm font-medium">
            <Users className="size-4 text-brand-ink" />
            Active projects
          </div>
          <div className="mt-auto">
            <div className="text-3xl font-semibold tracking-tight">
              <CountUp to={42} />
            </div>
            <span className="mt-2 inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-xs font-medium text-emerald-500">
              <TrendingUp className="size-3" />
              +6 this week
            </span>
          </div>
        </Cell>
      </motion.div>
    </section>
  );
}
```

### Bento Minimal
A quiet, editorial bento with oversized ghost numerals and a single accent — server-safe, pure-CSS hover.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-minimal.tsx

```tsx
import { cn } from "@/lib/utils";

export interface MinimalCell {
  title: string;
  description: string;
  /** Tailwind grid-span classes. */
  span?: string;
  /** Larger type treatment for the lead cell. */
  lead?: boolean;
}

export interface BentoMinimalProps {
  eyebrow?: string;
  heading?: string;
  cells?: MinimalCell[];
  className?: string;
}

const DEFAULT_CELLS: MinimalCell[] = [
  {
    title: "Less, but better.",
    description:
      "Every element earns its place. We remove until only the essential remains — then we refine that.",
    span: "sm:col-span-2 lg:row-span-2",
    lead: true,
  },
  { title: "Clarity over cleverness", description: "Plain intent beats clever abstraction." },
  { title: "Motion with meaning", description: "Animation guides attention, never distracts." },
  { title: "Built to last", description: "Tokens and primitives that age gracefully." },
  { title: "Accessible to all", description: "Keyboard, contrast, and reduced-motion first." },
  {
    title: "Crafted in the open",
    description: "Readable source you can own and adapt — no lock-in.",
    span: "sm:col-span-2",
  },
  {
    title: "Quiet by default",
    description: "Restraint now, so the important moments can speak later.",
    span: "sm:col-span-2",
  },
];

/**
 * BentoMinimal — a quiet, editorial counterpoint to the louder bentos. Hairline
 * cells, oversized ghost numerals, and a single brand accent that grows on
 * hover. Server-safe (no client JS) — all interaction is pure CSS, so it works
 * anywhere and respects reduced-motion via the global transition reset.
 */
export function BentoMinimal({
  eyebrow = "Principles",
  heading = "A system with a point of view",
  cells = DEFAULT_CELLS,
  className,
}: BentoMinimalProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="max-w-2xl">
        <p className="text-[11px] font-medium uppercase tracking-wider text-brand-ink">
          {eyebrow}
        </p>
        <h2 className="mt-1 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[12rem]">
        {cells.map((cell, i) => (
          <div
            key={cell.title}
            className={cn(
              "group relative flex min-h-[12rem] flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-colors duration-300 hover:border-border-strong",
              cell.span,
            )}
          >
            <span
              aria-hidden
              className="pointer-events-none absolute -right-2 -top-5 select-none text-7xl font-bold leading-none text-foreground/[0.045] transition-colors duration-300 group-hover:text-brand/10"
            >
              {String(i + 1).padStart(2, "0")}
            </span>
            <div className="relative mt-auto">
              <h3
                className={cn(
                  "font-semibold tracking-tight",
                  cell.lead ? "text-2xl sm:text-3xl" : "text-lg",
                )}
              >
                {cell.title}
              </h3>
              <p
                className={cn(
                  "mt-1 text-muted",
                  cell.lead ? "max-w-md text-base leading-relaxed" : "text-sm",
                )}
              >
                {cell.description}
              </p>
              <span
                aria-hidden
                className="mt-4 block h-px w-8 bg-brand transition-all duration-300 group-hover:w-16"
              />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### Bento Creative
Portfolio/agency bento: an intro, gradient project tiles with role and year, a skills cloud, and a contact CTA.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-creative.tsx

```tsx
import { ArrowUpRight, Mail } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CreativeProject {
  title: string;
  role: string;
  year: string;
  background: string;
  span?: string;
  href?: string;
}

export interface BentoCreativeProps {
  name?: string;
  bio?: string;
  skills?: string[];
  projects?: [CreativeProject, CreativeProject, CreativeProject];
  className?: string;
}

const DEFAULT_PROJECTS: [CreativeProject, CreativeProject, CreativeProject] = [
  {
    title: "Aperture",
    role: "Brand & Web",
    year: "2026",
    background:
      "radial-gradient(at 25% 20%, #a78bfa 0px, transparent 55%), radial-gradient(at 80% 75%, #22d3ee 0px, transparent 55%), linear-gradient(135deg, #2e1065, #0b0d18)",
  },
  {
    title: "Northwind",
    role: "Product Design",
    year: "2025",
    background:
      "radial-gradient(at 22% 78%, #fb7185 0px, transparent 55%), radial-gradient(at 82% 18%, #8b5cf6 0px, transparent 52%), linear-gradient(135deg, #4c0519, #0b0d18)",
  },
  {
    title: "ONONC OS",
    role: "Design System & Motion",
    year: "2026",
    background:
      "radial-gradient(at 18% 30%, #34d399 0px, transparent 52%), radial-gradient(at 85% 70%, #22d3ee 0px, transparent 55%), linear-gradient(135deg, #022c22, #0b0d18)",
    span: "sm:col-span-2",
  },
];

const DEFAULT_SKILLS = [
  "Brand",
  "Web",
  "Product",
  "Motion",
  "3D",
  "Design Systems",
  "Strategy",
];

function ProjectTile({ project }: { project: CreativeProject }) {
  return (
    <a
      href={project.href ?? "#"}
      aria-label={`${project.title} — ${project.role}, ${project.year}`}
      className={cn(
        "group relative block min-h-[12rem] overflow-hidden rounded-2xl border border-border",
        project.span,
      )}
    >
      <span
        aria-hidden
        className="absolute inset-0 transition-transform duration-700 ease-out group-hover:scale-105"
        style={{ background: project.background }}
      />
      <span
        aria-hidden
        className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/10 to-transparent"
      />
      <span
        aria-hidden
        className="absolute right-3 top-3 grid size-8 translate-y-1 place-items-center rounded-full bg-white/15 text-white opacity-0 backdrop-blur transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 group-focus-within:translate-y-0 group-focus-within:opacity-100"
      >
        <ArrowUpRight className="size-4" />
      </span>
      <div className="relative flex h-full flex-col justify-end p-5 [text-shadow:0_1px_12px_rgba(0,0,0,0.5)]">
        <div className="flex items-center justify-between gap-2">
          <span className="text-[11px] font-medium uppercase tracking-wider text-white/80">
            {project.role}
          </span>
          <span className="text-[11px] tabular-nums text-white/70">
            {project.year}
          </span>
        </div>
        <h3 className="mt-1 text-lg font-semibold text-white">{project.title}</h3>
      </div>
    </a>
  );
}

/**
 * BentoCreative — a portfolio/agency bento. An oversized intro sits beside
 * gradient project tiles (with role and year), a skills cloud, a headline
 * stat, and a contact call-to-action. Server-safe; the only motion is a CSS
 * hover zoom that the global reduced-motion reset neutralizes.
 */
export function BentoCreative({
  name = "Studio ONONC",
  bio = "An independent design & engineering studio crafting interfaces with motion, restraint, and a point of view.",
  skills = DEFAULT_SKILLS,
  projects = DEFAULT_PROJECTS,
  className,
}: BentoCreativeProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[12rem]">
        {/* Intro */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6 sm:col-span-2 lg:row-span-2">
          <span className="inline-flex w-fit items-center gap-2 rounded-full border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted">
            <span className="relative flex size-2">
              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
            </span>
            Available for work
          </span>
          <div className="mt-auto">
            <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
              {name}
            </h2>
            <p className="mt-3 max-w-md text-pretty text-muted">{bio}</p>
            <a
              href="#"
              className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-ink"
            >
              View selected work
              <ArrowUpRight className="size-4" />
            </a>
          </div>
        </div>

        {/* First two projects */}
        <ProjectTile project={projects[0]} />
        <ProjectTile project={projects[1]} />

        {/* Skills */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6">
          <h3 className="text-sm font-medium">Capabilities</h3>
          <div className="mt-auto flex flex-wrap gap-1.5">
            {skills.map((skill) => (
              <span
                key={skill}
                className="rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted"
              >
                {skill}
              </span>
            ))}
          </div>
        </div>

        {/* Stat */}
        <div className="flex min-h-[12rem] flex-col justify-between rounded-2xl border border-border bg-surface p-6">
          <div>
            <div className="text-3xl font-semibold tracking-tight">80+</div>
            <p className="text-sm text-muted">Projects shipped</p>
          </div>
          <div>
            <div className="text-3xl font-semibold tracking-tight">12</div>
            <p className="text-sm text-muted">Years of craft</p>
          </div>
        </div>

        {/* Third project (wide) */}
        <ProjectTile project={projects[2]} />

        {/* Contact CTA */}
        <div className="relative flex min-h-[12rem] flex-col justify-between overflow-hidden rounded-2xl border border-border bg-surface p-6 sm:col-span-2">
          <span
            aria-hidden
            className="pointer-events-none absolute -right-12 -top-12 size-40 rounded-full opacity-60 blur-2xl"
            style={{
              background:
                "radial-gradient(circle, color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%)",
            }}
          />
          <h3 className="relative text-xl font-semibold tracking-tight">
            Have a project in mind?
          </h3>
          <div className="relative flex flex-wrap items-center gap-3">
            <a
              href="#"
              className="inline-flex items-center gap-2 rounded-full bg-brand px-5 py-2.5 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
            >
              <Mail className="size-4" />
              Start a conversation
            </a>
            <span className="text-sm text-muted">hello@studioononc.dev</span>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Bento Social Proof
Social-proof bento: a featured testimonial, supporting quotes, an aggregate rating, logos, and headline stats.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-social.tsx

```tsx
"use client";

import { type ReactNode } from "react";
import {
  Aperture,
  Boxes,
  Command,
  Hexagon,
  Orbit,
  Quote,
  Sparkles,
  Star,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { CountUp } from "@/components/text/count-up";
import { cn } from "@/lib/utils";

export interface Testimonial {
  quote: string;
  name: string;
  role: string;
  gradient: string;
}

export interface BentoSocialProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  testimonials?: [Testimonial, Testimonial, Testimonial];
  className?: string;
}

function Cell({
  className,
  children,
  variants,
  accent = "var(--brand)",
}: {
  className?: string;
  children: ReactNode;
  variants?: Variants;
  accent?: string;
}) {
  return (
    <motion.div
      variants={variants}
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong",
        className,
      )}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{ background: `linear-gradient(90deg, transparent, ${accent}, transparent)` }}
      />
      {children}
    </motion.div>
  );
}

function Avatar({ name, gradient }: { name: string; gradient: string }) {
  return (
    <span
      aria-hidden
      className={cn(
        "grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br text-xs font-semibold text-white",
        gradient,
      )}
    >
      {name
        .split(" ")
        .map((p) => p[0])
        .slice(0, 2)
        .join("")}
    </span>
  );
}

const DEFAULT_TESTIMONIALS: [Testimonial, Testimonial, Testimonial] = [
  {
    quote:
      "ONONC let us ship a genuinely polished product in weeks, not months. Motion, accessibility, and theming were already handled — we just composed.",
    name: "Mara Vance",
    role: "VP Engineering, Northwind",
    gradient: "from-brand to-brand-2",
  },
  {
    quote: "The most thoughtful component set we've adopted. It just feels right.",
    name: "Devon Park",
    role: "Design Lead, Aperture",
    gradient: "from-brand-2 to-brand-3",
  },
  {
    quote: "Reduced-motion and keyboard support out of the box saved us an entire audit.",
    name: "Iris Cho",
    role: "Staff Engineer, Vertex",
    gradient: "from-brand-3 to-brand",
  },
];

const LOGOS = [
  { icon: <Hexagon className="size-4" />, name: "Northwind" },
  { icon: <Command className="size-4" />, name: "Aperture" },
  { icon: <Aperture className="size-4" />, name: "Vertex" },
  { icon: <Boxes className="size-4" />, name: "Nimbus" },
  { icon: <Orbit className="size-4" />, name: "Umbra" },
];

/**
 * BentoSocial — a social-proof bento: one featured testimonial, two supporting
 * quotes, an aggregate star rating, a wordmark logo row, and headline stats.
 * Quotes use semantic figure/blockquote/figcaption; cells fade and lift in with
 * a stagger that settles instantly under reduced-motion.
 */
export function BentoSocial({
  eyebrow = "Loved by teams",
  heading = "Don't just take our word for it",
  subheading = "Thousands of teams build their interfaces on ONONC.",
  testimonials = DEFAULT_TESTIMONIALS,
  className,
}: BentoSocialProps) {
  const reduce = useReducedMotion();
  const [featured, second, third] = testimonials;

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: reduce ? 0 : 0.07 } },
  };
  const item: Variants = {
    hidden: reduce ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
    },
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted">
          <Sparkles className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-pretty text-muted">
          {subheading}
        </p>
      </div>

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.1 }}
        className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[13rem]"
      >
        {/* Featured testimonial */}
        <Cell
          variants={item}
          className="min-h-[20rem] sm:col-span-2 lg:row-span-2"
        >
          <Quote className="size-9 text-brand/30" aria-hidden />
          <figure className="mt-auto">
            <blockquote className="text-balance text-xl font-medium leading-relaxed sm:text-2xl">
              “{featured.quote}”
            </blockquote>
            <figcaption className="mt-5 flex items-center gap-3">
              <Avatar name={featured.name} gradient={featured.gradient} />
              <span>
                <span className="block text-sm font-semibold">
                  {featured.name}
                </span>
                <span className="block text-sm text-muted">{featured.role}</span>
              </span>
            </figcaption>
          </figure>
        </Cell>

        {/* Supporting quote — second */}
        <Cell variants={item} accent="var(--brand-2)" className="min-h-[12rem]">
          <figure className="flex h-full flex-col">
            <blockquote className="text-sm leading-relaxed text-foreground">
              “{second.quote}”
            </blockquote>
            <figcaption className="mt-auto flex items-center gap-2.5 pt-4">
              <Avatar name={second.name} gradient={second.gradient} />
              <span>
                <span className="block text-xs font-semibold">{second.name}</span>
                <span className="block text-xs text-muted">{second.role}</span>
              </span>
            </figcaption>
          </figure>
        </Cell>

        {/* Supporting quote — third */}
        <Cell variants={item} accent="var(--brand-3)" className="min-h-[12rem]">
          <figure className="flex h-full flex-col">
            <blockquote className="text-sm leading-relaxed text-foreground">
              “{third.quote}”
            </blockquote>
            <figcaption className="mt-auto flex items-center gap-2.5 pt-4">
              <Avatar name={third.name} gradient={third.gradient} />
              <span>
                <span className="block text-xs font-semibold">{third.name}</span>
                <span className="block text-xs text-muted">{third.role}</span>
              </span>
            </figcaption>
          </figure>
        </Cell>

        {/* Aggregate rating */}
        <Cell variants={item} className="min-h-[12rem]">
          <div className="flex gap-0.5" role="img" aria-label="Rated 4.9 out of 5">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star key={i} className="size-4 fill-brand text-brand" aria-hidden />
            ))}
          </div>
          <div className="mt-auto">
            <div className="text-3xl font-semibold tracking-tight">
              <CountUp to={4.9} decimals={1} />
              <span className="text-lg text-muted">/5</span>
            </div>
            <p className="text-sm text-muted">From 2,400 reviews</p>
          </div>
        </Cell>

        {/* Customers stat */}
        <Cell variants={item} accent="var(--brand-2)" className="min-h-[12rem]">
          <span className="text-[11px] uppercase tracking-wider text-muted-2">
            Customers
          </span>
          <div className="mt-auto">
            <div className="text-3xl font-semibold tracking-tight">
              <CountUp to={10} suffix="k+" />
            </div>
            <p className="text-sm text-muted">Teams shipping with ONONC</p>
          </div>
        </Cell>

        {/* Logo row */}
        <Cell variants={item} className="justify-between sm:col-span-2">
          <p className="text-[11px] uppercase tracking-wider text-muted-2">
            Trusted by teams at
          </p>
          <div className="flex flex-wrap items-center gap-x-6 gap-y-3 text-muted">
            {LOGOS.map((logo) => (
              <span
                key={logo.name}
                className="inline-flex items-center gap-1.5 text-base font-semibold tracking-tight transition-colors duration-300 group-hover:text-foreground"
              >
                <span aria-hidden className="text-brand-ink">{logo.icon}</span>
                {logo.name}
              </span>
            ))}
          </div>
        </Cell>

        {/* Recommend stat */}
        <Cell variants={item} accent="var(--brand-3)" className="sm:col-span-2">
          <div className="flex h-full items-center gap-5">
            <div className="text-5xl font-semibold tracking-tight text-brand-ink">
              <CountUp to={98} suffix="%" />
            </div>
            <p className="text-pretty text-muted">
              of teams would recommend ONONC to a colleague.
            </p>
          </div>
        </Cell>
      </motion.div>
    </section>
  );
}
```

### Bento Developer
Developer/API bento: a copyable code editor, REST endpoints, SDK languages, a latency readout, and webhooks.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-dev.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useState } from "react";
import {
  ArrowUpRight,
  BookOpen,
  Check,
  Copy,
  Terminal,
  Webhook,
  Zap,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { CountUp } from "@/components/text/count-up";
import { cn } from "@/lib/utils";

export interface BentoDevProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  /** The snippet copied by the editor cell. */
  snippet?: string;
  className?: string;
}

function Cell({
  className,
  children,
  variants,
  accent = "var(--brand)",
}: {
  className?: string;
  children: ReactNode;
  variants?: Variants;
  accent?: string;
}) {
  return (
    <motion.div
      variants={variants}
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong",
        className,
      )}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{ background: `linear-gradient(90deg, transparent, ${accent}, transparent)` }}
      />
      {children}
    </motion.div>
  );
}

const DEFAULT_SNIPPET = `import { ONONC } from "ononc";

const ui = new ONONC({ theme: "dark" });
await ui.mount("#app");`;

const ENDPOINTS = [
  { method: "GET", path: "/v1/components", tone: "text-emerald-500" },
  { method: "POST", path: "/v1/components", tone: "text-brand-2" },
  { method: "DELETE", path: "/v1/components/:id", tone: "text-brand-3" },
];

const SDKS = ["TypeScript", "Python", "Go", "Ruby", "Rust", "PHP"];

const EVENTS = [
  { name: "build.succeeded", status: 200 },
  { name: "deploy.created", status: 200 },
  { name: "component.published", status: 201 },
];

/**
 * BentoDev — a developer-experience bento. A copy-to-clipboard code editor sits
 * beside REST endpoints, SDK languages, a live latency readout, a webhook event
 * log, a rate-limit meter, and a docs CTA. Cells fade and lift in with a
 * stagger; the editor's copy works with a graceful clipboard fallback.
 */
export function BentoDev({
  eyebrow = "Developers",
  heading = "An API you'll actually enjoy",
  subheading = "Typed SDKs, predictable REST, and copy-paste examples for every endpoint.",
  snippet = DEFAULT_SNIPPET,
  className,
}: BentoDevProps) {
  const reduce = useReducedMotion();
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (!copied) return;
    const t = setTimeout(() => setCopied(false), 2000);
    return () => clearTimeout(t);
  }, [copied]);

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(snippet);
      setCopied(true);
    } catch {
      /* clipboard unavailable — leave the button state unchanged */
    }
  };

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: reduce ? 0 : 0.07 } },
  };
  const item: Variants = {
    hidden: reduce ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
    },
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="inline-flex items-center gap-2 rounded-full border border-border bg-surface px-3 py-1 text-[11px] font-medium uppercase tracking-wider text-muted">
          <Terminal className="size-3.5 text-brand-ink" />
          {eyebrow}
        </span>
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-pretty text-muted">
          {subheading}
        </p>
      </div>

      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.1 }}
        className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[13rem]"
      >
        {/* Code editor — hero */}
        <Cell variants={item} className="min-h-[20rem] sm:col-span-2 lg:row-span-2">
          <div className="overflow-hidden rounded-xl border border-border bg-background">
            <div className="flex items-center justify-between border-b border-border px-3 py-2">
              <div className="flex items-center gap-1.5">
                <span className="size-2.5 rounded-full bg-brand-3/80" />
                <span className="size-2.5 rounded-full bg-amber-400/80" />
                <span className="size-2.5 rounded-full bg-emerald-500/80" />
                <span className="ml-2 font-mono text-[11px] text-muted-2">
                  app.ts
                </span>
              </div>
              <button
                type="button"
                onClick={copy}
                aria-label={copied ? "Copied" : "Copy code"}
                className="grid size-7 place-items-center rounded-md border border-border text-muted transition-colors hover:text-foreground"
              >
                {copied ? (
                  <Check className="size-3.5 text-emerald-500" />
                ) : (
                  <Copy className="size-3.5" />
                )}
              </button>
            </div>
            <pre className="overflow-x-auto p-4 font-mono text-[12.5px] leading-relaxed">
              <code>
                <span className="text-brand-3">import</span>
                <span className="text-foreground"> {"{ ONONC }"} </span>
                <span className="text-brand-3">from</span>
                <span className="text-brand-2"> &quot;ononc&quot;</span>
                <span className="text-foreground">;</span>
                {"\n\n"}
                <span className="text-brand-3">const</span>
                <span className="text-foreground"> ui </span>
                <span className="text-brand-3">=</span>
                <span className="text-brand-3"> new</span>
                <span className="text-brand-ink"> ONONC</span>
                <span className="text-foreground">({"{ "}theme: </span>
                <span className="text-brand-2">&quot;dark&quot;</span>
                <span className="text-foreground"> {"}"});</span>
                {"\n"}
                <span className="text-brand-3">await</span>
                <span className="text-foreground"> ui.</span>
                <span className="text-brand-ink">mount</span>
                <span className="text-foreground">(</span>
                <span className="text-brand-2">&quot;#app&quot;</span>
                <span className="text-foreground">);</span>
              </code>
            </pre>
          </div>
          <div className="mt-auto pt-5">
            <h3 className="text-xl font-semibold tracking-tight">
              Integrate in minutes
            </h3>
            <p className="mt-2 max-w-md text-sm leading-relaxed text-muted">
              Install the package, drop in your key, and render. No build config,
              no boilerplate.
            </p>
          </div>
        </Cell>

        {/* API endpoints */}
        <Cell variants={item} accent="var(--brand-2)" className="sm:col-span-2">
          <div className="flex items-center gap-2 text-sm font-medium">
            <Zap className="size-4 text-brand-ink" />
            RESTful by design
          </div>
          <div className="mt-auto flex flex-col gap-1.5">
            {ENDPOINTS.map((ep) => (
              <div
                key={`${ep.method} ${ep.path}`}
                className="flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 font-mono text-[12.5px]"
              >
                <span className={cn("w-14 shrink-0 font-semibold", ep.tone)}>
                  {ep.method}
                </span>
                <span className="truncate text-muted">{ep.path}</span>
              </div>
            ))}
          </div>
        </Cell>

        {/* SDK languages */}
        <Cell variants={item} className="min-h-[12rem]">
          <h3 className="text-sm font-medium">SDKs everywhere</h3>
          <div className="mt-auto flex flex-wrap gap-1.5">
            {SDKS.map((sdk) => (
              <span
                key={sdk}
                className="rounded-full border border-border bg-background px-2.5 py-1 font-mono text-xs text-muted"
              >
                {sdk}
              </span>
            ))}
          </div>
        </Cell>

        {/* Latency */}
        <Cell variants={item} accent="var(--brand-2)" className="min-h-[12rem]">
          <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted">
            <span className="relative flex size-2">
              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
            </span>
            Edge network
          </span>
          <div className="mt-auto">
            <div className="text-3xl font-semibold tracking-tight">
              <CountUp to={42} suffix="ms" />
            </div>
            <p className="text-sm text-muted">Median global latency</p>
          </div>
        </Cell>

        {/* Webhook events */}
        <Cell variants={item} accent="var(--brand-3)" className="sm:col-span-2">
          <div className="flex items-center gap-2 text-sm font-medium">
            <Webhook className="size-4 text-brand-ink" />
            Real-time webhooks
          </div>
          <div className="mt-auto flex flex-col gap-1.5">
            {EVENTS.map((e) => (
              <div
                key={e.name}
                className="flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-1.5 font-mono text-xs"
              >
                <span className="truncate text-muted">{e.name}</span>
                <span className="ml-auto shrink-0 rounded border border-emerald-500/30 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-500">
                  {e.status}
                </span>
              </div>
            ))}
          </div>
        </Cell>

        {/* Rate limit */}
        <Cell variants={item} className="min-h-[12rem]">
          <h3 className="text-sm font-medium">Generous limits</h3>
          <div className="mt-auto">
            <div className="mb-2 flex items-baseline justify-between">
              <span className="text-2xl font-semibold tracking-tight">
                <CountUp to={10} suffix="k" />
              </span>
              <span className="text-xs text-muted">req / min</span>
            </div>
            <div className="h-2 overflow-hidden rounded-full bg-surface-2">
              <motion.div
                className="h-full origin-left rounded-full bg-gradient-to-r from-brand to-brand-2"
                style={{ width: "32%" }}
                initial={reduce ? false : { scaleX: 0 }}
                whileInView={reduce ? undefined : { scaleX: 1 }}
                viewport={{ once: true, amount: 0.6 }}
                transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
              />
            </div>
          </div>
        </Cell>

        {/* Docs CTA */}
        <Cell variants={item} accent="var(--brand-3)" className="min-h-[12rem]">
          <span className="grid size-11 place-items-center rounded-xl border border-border bg-background text-brand-ink">
            <BookOpen className="size-5" />
          </span>
          <div className="mt-auto">
            <a
              href="#"
              className="inline-flex items-center gap-1.5 text-base font-semibold"
            >
              Read the docs
              <ArrowUpRight className="size-4 text-brand-ink transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
            </a>
            <p className="mt-1 text-sm text-muted">
              Guides, references, and recipes.
            </p>
          </div>
        </Cell>
      </motion.div>
    </section>
  );
}
```

### Bento Profile
A link-in-bio personal bento: an identity card, outbound link tiles, a now-playing equalizer, and a booking CTA.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-profile.tsx

```tsx
"use client";

import { type ReactNode } from "react";
import {
  ArrowUpRight,
  CalendarDays,
  FileText,
  Globe,
  Mail,
  MapPin,
  Rss,
  Sparkles,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { CountUp } from "@/components/text/count-up";
import { cn } from "@/lib/utils";

export interface ProfileLink {
  icon: ReactNode;
  label: string;
  sub?: string;
  href?: string;
}

export interface BentoProfileProps {
  name?: string;
  handle?: string;
  bio?: string;
  location?: string;
  role?: string;
  links?: [ProfileLink, ProfileLink, ProfileLink, ProfileLink];
  className?: string;
}

function Cell({
  className,
  children,
  variants,
  accent = "var(--brand)",
}: {
  className?: string;
  children: ReactNode;
  variants?: Variants;
  accent?: string;
}) {
  return (
    <motion.div
      variants={variants}
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong",
        className,
      )}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-px opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{ background: `linear-gradient(90deg, transparent, ${accent}, transparent)` }}
      />
      {children}
    </motion.div>
  );
}

function LinkTile({
  link,
  variants,
}: {
  link: ProfileLink;
  variants?: Variants;
}) {
  return (
    <motion.a
      href={link.href ?? "#"}
      aria-label={link.label}
      variants={variants}
      className="group/tile flex min-h-[12rem] flex-col justify-between rounded-2xl border border-border bg-surface p-5 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong"
    >
      <span className="grid size-10 place-items-center rounded-xl border border-border bg-background text-brand-ink">
        {link.icon}
      </span>
      <div className="flex items-end justify-between gap-2">
        <div className="min-w-0">
          <div className="truncate font-medium">{link.label}</div>
          {link.sub ? (
            <div className="truncate text-xs text-muted">{link.sub}</div>
          ) : null}
        </div>
        <ArrowUpRight className="size-4 shrink-0 text-muted transition-all duration-300 group-hover/tile:-translate-y-0.5 group-hover/tile:translate-x-0.5 group-hover/tile:text-brand-ink" />
      </div>
    </motion.a>
  );
}

const DEFAULT_LINKS: [ProfileLink, ProfileLink, ProfileLink, ProfileLink] = [
  { icon: <Globe className="size-5" />, label: "Website", sub: "ava.design" },
  { icon: <Mail className="size-5" />, label: "Email", sub: "say hello" },
  { icon: <FileText className="size-5" />, label: "Résumé", sub: "PDF · 2026" },
  { icon: <Rss className="size-5" />, label: "Journal", sub: "weekly notes" },
];

const EQ_BARS = [0.4, 0.85, 0.55, 1, 0.7];

/**
 * BentoProfile — a "link-in-bio" personal bento: a profile identity cell, a set
 * of outbound link tiles, a now-playing card with an animated equalizer, a
 * follower count, and a featured call-to-action. Link tiles are real anchors
 * with accessible names; the equalizer rests under reduced-motion.
 */
export function BentoProfile({
  name = "Ava Reed",
  handle = "@avareed",
  bio = "Design engineer crafting calm, motion-first interfaces. Currently building ONONC.",
  location = "Lisbon, PT",
  role = "Design Engineer",
  links = DEFAULT_LINKS,
  className,
}: BentoProfileProps) {
  const reduce = useReducedMotion();
  const tiles = links;
  const initials = name
    .split(" ")
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: reduce ? 0 : 0.07 } },
  };
  const item: Variants = {
    hidden: reduce ? { opacity: 1, y: 0 } : { opacity: 0, y: 18 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
    },
  };

  return (
    <section className={cn("w-full", className)}>
      <motion.div
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.1 }}
        className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[12rem]"
      >
        {/* Profile identity — hero */}
        <Cell variants={item} className="min-h-[18rem] sm:col-span-2 lg:row-span-2">
          <div className="flex items-center gap-4">
            <span className="relative">
              <span
                aria-hidden
                className="grid size-16 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-xl font-semibold text-white"
              >
                {initials}
              </span>
              <span
                aria-hidden
                className="absolute bottom-0 right-0 size-4 rounded-full border-2 border-surface bg-emerald-500"
              />
            </span>
            <div>
              <h2 className="text-2xl font-semibold tracking-tight">{name}</h2>
              <p className="text-sm text-muted">{handle}</p>
            </div>
          </div>
          <p className="mt-4 max-w-md text-pretty leading-relaxed text-muted">
            {bio}
          </p>
          <div className="mt-auto flex flex-wrap gap-2 pt-5">
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted">
              <MapPin className="size-3.5 text-brand-ink" />
              {location}
            </span>
            <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted">
              <Sparkles className="size-3.5 text-brand-ink" />
              {role}
            </span>
          </div>
        </Cell>

        {/* Two link tiles */}
        <LinkTile link={tiles[0]} variants={item} />
        <LinkTile link={tiles[1]} variants={item} />

        {/* Now playing */}
        <Cell variants={item} accent="var(--brand-2)" className="min-h-[12rem]">
          <div className="flex items-center justify-between">
            <span className="text-[11px] uppercase tracking-wider text-muted-2">
              Now playing
            </span>
            <div className="flex h-5 items-end gap-0.5" aria-hidden>
              {EQ_BARS.map((h, i) => (
                <motion.span
                  key={i}
                  className="w-1 rounded-full bg-brand"
                  style={{ height: `${h * 100}%`, transformOrigin: "bottom" }}
                  initial={false}
                  animate={
                    reduce ? undefined : { scaleY: [h, 1, 0.4, 0.85, h] }
                  }
                  transition={
                    reduce
                      ? undefined
                      : {
                          duration: 1.1 + i * 0.18,
                          repeat: Infinity,
                          ease: "easeInOut",
                        }
                  }
                />
              ))}
            </div>
          </div>
          <div className="mt-auto">
            <div className="truncate font-medium">Midnight City</div>
            <div className="truncate text-sm text-muted">M83</div>
          </div>
        </Cell>

        {/* Followers */}
        <Cell variants={item} className="min-h-[12rem]">
          <span className="text-[11px] uppercase tracking-wider text-muted-2">
            Audience
          </span>
          <div className="mt-auto">
            <div className="text-3xl font-semibold tracking-tight">
              <CountUp to={128} suffix="k" />
            </div>
            <p className="text-sm text-muted">Followers across platforms</p>
          </div>
        </Cell>

        {/* Featured CTA */}
        <Cell variants={item} accent="var(--brand-3)" className="sm:col-span-2">
          <span
            aria-hidden
            className="pointer-events-none absolute -right-12 -top-12 size-40 rounded-full opacity-60 blur-2xl"
            style={{
              background:
                "radial-gradient(circle, color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%)",
            }}
          />
          <span className="relative text-[11px] uppercase tracking-wider text-muted-2">
            Featured
          </span>
          <div className="relative mt-auto flex items-end justify-between gap-3">
            <div>
              <h3 className="text-lg font-semibold tracking-tight">
                Book a 1:1 mentoring call
              </h3>
              <p className="mt-1 text-sm text-muted">
                30 minutes on design, motion, or careers.
              </p>
            </div>
            <a
              href="#"
              aria-label="Book a call"
              className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
            >
              <CalendarDays className="size-4" />
              Book
            </a>
          </div>
        </Cell>

        {/* Two more link tiles */}
        <LinkTile link={tiles[2]} variants={item} />
        <LinkTile link={tiles[3]} variants={item} />
      </motion.div>
    </section>
  );
}
```

### Bento Blog
Editorial content bento: a featured cover story, post cards, a topics cloud, a newsletter CTA, and an archive.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-blog.tsx

```tsx
import { ArrowUpRight, BookOpen, Clock, Mail } from "lucide-react";
import { cn } from "@/lib/utils";

export interface BlogPost {
  category: string;
  title: string;
  readTime: string;
  date: string;
  href?: string;
}

export interface BentoBlogProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  posts?: [BlogPost, BlogPost, BlogPost, BlogPost];
  className?: string;
}

const DEFAULT_POSTS: [BlogPost, BlogPost, BlogPost, BlogPost] = [
  {
    category: "Engineering",
    title: "Designing interruptible animation that always feels responsive",
    readTime: "8 min",
    date: "Jun 24",
  },
  {
    category: "Design",
    title: "A token system you can restyle in seconds",
    readTime: "5 min",
    date: "Jun 18",
  },
  {
    category: "Accessibility",
    title: "Reduced-motion without losing personality",
    readTime: "6 min",
    date: "Jun 11",
  },
  {
    category: "Craft",
    title: "Why we cap canvas DPR at 2",
    readTime: "4 min",
    date: "Jun 03",
  },
];

const CATEGORIES = [
  { name: "Engineering", count: 24 },
  { name: "Design", count: 18 },
  { name: "Accessibility", count: 9 },
  { name: "Craft", count: 12 },
  { name: "Motion", count: 7 },
];

function PostCard({ post }: { post: BlogPost }) {
  return (
    <a
      href={post.href ?? "#"}
      className="group/card flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-5 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong"
    >
      <span className="text-[11px] font-medium uppercase tracking-wider text-brand-ink">
        {post.category}
      </span>
      <h3 className="mt-2 line-clamp-3 font-semibold leading-snug tracking-tight">
        {post.title}
      </h3>
      <div className="mt-auto flex items-center gap-2 pt-3 text-xs text-muted">
        <Clock className="size-3.5" aria-hidden />
        {post.readTime} · {post.date}
      </div>
    </a>
  );
}

/**
 * BentoBlog — an editorial content bento: a featured cover story, post cards, a
 * "latest" list, topic chips, a newsletter CTA, and an archive link. Server-safe
 * (no client JS); the featured cover uses a CSS mesh gradient with a scrim and
 * text-shadow so the white headline stays legible.
 */
export function BentoBlog({
  eyebrow = "Writing",
  heading = "Notes from the workshop",
  subheading = "Essays on interface, motion, and the craft of building for the web.",
  posts = DEFAULT_POSTS,
  className,
}: BentoBlogProps) {
  const [featured, p1, p2, p3] = posts;

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <p className="text-[11px] font-medium uppercase tracking-wider text-brand-ink">
          {eyebrow}
        </p>
        <h2 className="mt-1 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mx-auto mt-3 max-w-xl text-pretty text-muted">
          {subheading}
        </p>
      </div>

      <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[12rem]">
        {/* Featured cover story */}
        <a
          href={featured.href ?? "#"}
          aria-label={`${featured.category}: ${featured.title}`}
          className="group/feat relative block min-h-[20rem] overflow-hidden rounded-2xl border border-border sm:col-span-2 lg:row-span-2"
        >
          <span
            aria-hidden
            className="absolute inset-0 transition-transform duration-700 ease-out group-hover/feat:scale-105"
            style={{
              background:
                "radial-gradient(at 22% 22%, #a78bfa 0px, transparent 55%), radial-gradient(at 82% 12%, #22d3ee 0px, transparent 50%), radial-gradient(at 65% 90%, #fb7185 0px, transparent 55%), linear-gradient(135deg, #2e1065, #0b0d18)",
            }}
          />
          <span
            aria-hidden
            className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"
          />
          <div className="relative flex h-full flex-col justify-end p-6 [text-shadow:0_1px_12px_rgba(0,0,0,0.5)]">
            <span className="inline-flex w-fit items-center rounded-full bg-white/15 px-2.5 py-1 text-[11px] font-medium uppercase tracking-wider text-white backdrop-blur">
              {featured.category}
            </span>
            <h3 className="mt-3 max-w-md text-balance text-2xl font-semibold tracking-tight text-white">
              {featured.title}
            </h3>
            <div className="mt-4 flex items-center gap-2.5">
              <span
                aria-hidden
                className="grid size-8 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-xs font-semibold text-white"
              >
                AR
              </span>
              <span className="text-sm text-white/85">
                Ava Reed · {featured.readTime} · {featured.date}
              </span>
            </div>
          </div>
        </a>

        {/* Two post cards */}
        <PostCard post={p1} />
        <PostCard post={p2} />

        {/* Topics */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6">
          <h3 className="text-sm font-medium">Topics</h3>
          <div className="mt-auto flex flex-wrap gap-1.5">
            {CATEGORIES.map((c) => (
              <span
                key={c.name}
                className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs text-muted"
              >
                {c.name}
                <span className="text-muted-2">{c.count}</span>
              </span>
            ))}
          </div>
        </div>

        {/* Third post card */}
        <PostCard post={p3} />

        {/* Newsletter CTA */}
        <div className="relative flex min-h-[12rem] flex-col justify-between overflow-hidden rounded-2xl border border-border bg-surface p-6 sm:col-span-2">
          <span
            aria-hidden
            className="pointer-events-none absolute -right-12 -top-12 size-40 rounded-full opacity-60 blur-2xl"
            style={{
              background:
                "radial-gradient(circle, color-mix(in oklab, var(--brand-2) 40%, transparent), transparent 70%)",
            }}
          />
          <div className="relative">
            <h3 className="text-lg font-semibold tracking-tight">
              The Friday digest
            </h3>
            <p className="mt-1 max-w-sm text-sm text-muted">
              One thoughtful email a week — new essays, no noise.
            </p>
          </div>
          <a
            href="#"
            className="relative inline-flex w-fit items-center gap-2 rounded-full bg-brand px-5 py-2.5 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
          >
            <Mail className="size-4" />
            Subscribe
          </a>
        </div>

        {/* Archive */}
        <a
          href="#"
          className="group/arch flex min-h-[12rem] flex-col justify-between rounded-2xl border border-border bg-surface p-6 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong sm:col-span-2"
        >
          <span className="grid size-11 place-items-center rounded-xl border border-border bg-background text-brand-ink">
            <BookOpen className="size-5" />
          </span>
          <div className="flex items-end justify-between gap-3">
            <div>
              <div className="text-2xl font-semibold tracking-tight">
                120 articles
              </div>
              <p className="text-sm text-muted">Five years of writing.</p>
            </div>
            <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-brand-ink">
              Browse the archive
              <ArrowUpRight className="size-4 transition-transform duration-300 group-hover/arch:-translate-y-0.5 group-hover/arch:translate-x-0.5" />
            </span>
          </div>
        </a>
      </div>
    </section>
  );
}
```

### Bento Contact
Contact bento: channel tiles, office hours, an abstract CSS map with a pulsing pin, and an email CTA.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/bento-contact.tsx

```tsx
import {
  ArrowUpRight,
  LifeBuoy,
  Mail,
  MapPin,
  MessageCircle,
  Send,
} from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ContactChannel {
  icon: ReactNode;
  label: string;
  sub: string;
  href?: string;
}

export interface BentoContactProps {
  heading?: string;
  subheading?: string;
  email?: string;
  location?: string;
  address?: string;
  className?: string;
}

function ChannelTile({ channel }: { channel: ContactChannel }) {
  return (
    <a
      href={channel.href ?? "#"}
      aria-label={channel.label}
      className="group/ch flex min-h-[12rem] flex-col justify-between rounded-2xl border border-border bg-surface p-5 transition-[transform,border-color] duration-300 will-change-transform hover:-translate-y-0.5 hover:border-border-strong"
    >
      <span className="grid size-10 place-items-center rounded-xl border border-border bg-background text-brand-ink">
        {channel.icon}
      </span>
      <div className="flex items-end justify-between gap-2">
        <div className="min-w-0">
          <div className="truncate font-medium">{channel.label}</div>
          <div className="truncate text-xs text-muted">{channel.sub}</div>
        </div>
        <ArrowUpRight className="size-4 shrink-0 text-muted transition-all duration-300 group-hover/ch:-translate-y-0.5 group-hover/ch:translate-x-0.5 group-hover/ch:text-brand-ink" />
      </div>
    </a>
  );
}

/**
 * BentoContact — a "get in touch" bento: an intro, channel tiles (email, chat,
 * help center), an availability card, an abstract map tile with a pulsing pin,
 * and an email CTA. Server-safe; the map is pure CSS (no third-party embed,
 * nothing to load) and the pin's pulse rests under reduced-motion.
 */
export function BentoContact({
  heading = "Let's build something together",
  subheading = "Questions, partnerships, or just saying hi — pick whichever channel suits you.",
  email = "hello@ononc.dev",
  location = "Lisbon HQ",
  address = "Rua da Prata 12",
  className,
}: BentoContactProps) {
  const channels: ContactChannel[] = [
    { icon: <Mail className="size-5" />, label: "Email us", sub: email },
    {
      icon: <MessageCircle className="size-5" />,
      label: "Live chat",
      sub: "Avg. 2 min reply",
    },
    {
      icon: <LifeBuoy className="size-5" />,
      label: "Help center",
      sub: "Guides & answers",
    },
  ];

  return (
    <section className={cn("w-full", className)}>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[12rem]">
        {/* Intro — hero */}
        <div className="flex min-h-[18rem] flex-col rounded-2xl border border-border bg-surface p-6 sm:col-span-2 lg:row-span-2">
          <span className="inline-flex w-fit items-center gap-1.5 rounded-full border border-border bg-background px-2.5 py-1 text-xs font-medium text-muted">
            <span className="relative flex size-2">
              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
              <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
            </span>
            Online now
          </span>
          <div className="mt-auto">
            <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
              {heading}
            </h2>
            <p className="mt-3 max-w-md text-pretty text-muted">{subheading}</p>
          </div>
        </div>

        {/* Email + chat channels */}
        <ChannelTile channel={channels[0]} />
        <ChannelTile channel={channels[1]} />

        {/* Availability */}
        <div className="flex min-h-[12rem] flex-col rounded-2xl border border-border bg-surface p-6">
          <h3 className="text-sm font-medium">Office hours</h3>
          <div className="mt-auto">
            <div className="text-lg font-semibold tracking-tight">Mon–Fri</div>
            <p className="text-sm text-muted">9:00 – 18:00 WET</p>
            <p className="mt-1 text-xs text-muted-2">
              Typically replies in 2 hours
            </p>
          </div>
        </div>

        {/* Help center channel */}
        <ChannelTile channel={channels[2]} />

        {/* Abstract map */}
        <div className="relative flex min-h-[12rem] flex-col justify-end overflow-hidden rounded-2xl border border-border bg-surface p-6 sm:col-span-2">
          <span
            aria-hidden
            className="pointer-events-none absolute inset-0 opacity-60"
            style={{
              backgroundImage:
                "linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)",
              backgroundSize: "26px 26px",
            }}
          />
          <span
            aria-hidden
            className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
          >
            <span className="absolute left-1/2 top-1/2 size-12 -translate-x-1/2 -translate-y-1/2 animate-pulse-ring rounded-full border border-brand/50" />
            <span className="relative grid size-9 place-items-center rounded-full bg-brand text-white shadow-[0_8px_20px_-6px_var(--brand)]">
              <MapPin className="size-5" />
            </span>
          </span>
          <div className="relative">
            <div className="font-medium">{location}</div>
            <p className="text-sm text-muted">{address}</p>
          </div>
        </div>

        {/* Email CTA */}
        <div className="relative flex min-h-[12rem] flex-col justify-between overflow-hidden rounded-2xl border border-border bg-surface p-6 sm:col-span-2">
          <span
            aria-hidden
            className="pointer-events-none absolute -right-12 -top-12 size-40 rounded-full opacity-60 blur-2xl"
            style={{
              background:
                "radial-gradient(circle, color-mix(in oklab, var(--brand) 40%, transparent), transparent 70%)",
            }}
          />
          <div className="relative">
            <h3 className="text-lg font-semibold tracking-tight">
              Prefer email?
            </h3>
            <p className="mt-1 max-w-sm text-sm text-muted">
              Drop us a line — we read and reply to every message.
            </p>
          </div>
          <a
            href={`mailto:${email}`}
            className="relative inline-flex w-fit items-center gap-2 rounded-full bg-brand px-5 py-2.5 text-sm font-semibold text-white shadow-[0_8px_30px_-8px_var(--brand)] transition-colors hover:bg-brand/90"
          >
            <Send className="size-4" />
            {email}
          </a>
        </div>
      </div>
    </section>
  );
}
```

### Feature Grid
Titled three-column grid of capabilities.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-grid.tsx

```tsx
import type { ReactNode } from "react";
import {
  Blocks,
  MousePointerClick,
  Palette,
  Smartphone,
  Sparkles,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface Feature {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface FeatureGridProps {
  heading?: string;
  subheading?: string;
  features?: Feature[];
  className?: string;
}

const DEFAULT_FEATURES: Feature[] = [
  {
    title: "Interactive",
    description: "Pointer, scroll, and hover-reactive effects that feel direct.",
    icon: <MousePointerClick className="size-5" />,
  },
  {
    title: "Themeable",
    description: "Driven by CSS variables — restyle the whole kit in seconds.",
    icon: <Palette className="size-5" />,
  },
  {
    title: "Performant",
    description: "Capped DPR, off-screen pausing, and GPU-friendly transforms.",
    icon: <Zap className="size-5" />,
  },
  {
    title: "Responsive",
    description: "Fluid layouts that hold up from phones to ultrawide.",
    icon: <Smartphone className="size-5" />,
  },
  {
    title: "Composable",
    description: "Mix primitives into your own bespoke sections.",
    icon: <Blocks className="size-5" />,
  },
  {
    title: "Delightful",
    description: "Thoughtful micro-interactions on every surface.",
    icon: <Sparkles className="size-5" />,
  },
];

/**
 * FeatureGrid — a titled three-column grid of capabilities. Cards lift and
 * reveal a brand ring on hover.
 */
export function FeatureGrid({
  heading = "Everything you need to ship",
  subheading = "A complete toolkit of building blocks, designed to work together.",
  features = DEFAULT_FEATURES,
  className,
}: FeatureGridProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>
      <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {features.map((f, i) => (
          <div
            key={i}
            className="group rounded-2xl border border-border bg-surface p-6 transition-colors hover:border-border-strong"
          >
            <span className="grid size-11 place-items-center rounded-xl border border-border bg-background text-brand-ink transition-colors group-hover:text-brand-2">
              {f.icon}
            </span>
            <h3 className="mt-4 text-base font-semibold">{f.title}</h3>
            <p className="mt-1 text-sm text-muted">{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### Feature Cards
Elevated capability cards with a gradient hover ring and staggered scroll reveal.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-cards.tsx

```tsx
"use client";

import type { ReactNode } from "react";
import {
  ArrowUpRight,
  Fingerprint,
  Gauge,
  Layers,
  Palette,
  Sparkles,
  Workflow,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface FeatureCard {
  title: string;
  description: string;
  icon?: ReactNode;
  /** Optional link target; when set, the card renders a "Learn more" affordance. */
  href?: string;
}

export interface FeatureCardsProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  features?: FeatureCard[];
  className?: string;
}

const DEFAULT_FEATURES: FeatureCard[] = [
  {
    title: "Motion, built in",
    description:
      "Interruptible, spring-based transitions that feel native — never bolted on after the fact.",
    icon: <Sparkles className="size-5" />,
    href: "#",
  },
  {
    title: "Themeable tokens",
    description:
      "Every color flows from CSS variables, so a single edit restyles the entire surface.",
    icon: <Palette className="size-5" />,
    href: "#",
  },
  {
    title: "Effortless speed",
    description:
      "GPU-friendly transforms and off-screen pausing keep frames smooth and batteries full.",
    icon: <Gauge className="size-5" />,
    href: "#",
  },
  {
    title: "Composable layers",
    description:
      "Small, sharp primitives snap together into bespoke sections without fighting the grid.",
    icon: <Layers className="size-5" />,
    href: "#",
  },
  {
    title: "Secure by default",
    description:
      "Sensible defaults, validated inputs, and focus-safe interactions on every control.",
    icon: <Fingerprint className="size-5" />,
    href: "#",
  },
  {
    title: "Automated flows",
    description:
      "Wire steps together once and let the system carry the work from trigger to result.",
    icon: <Workflow className="size-5" />,
    href: "#",
  },
];

/**
 * FeatureCards — an elevated three-column capability grid. Each card lifts on
 * hover, lights a brand ring and top hairline, and reveals a "Learn more"
 * affordance. Cards rise in with a staggered scroll reveal that collapses for
 * reduced-motion users.
 */
export function FeatureCards({
  eyebrow = "Features",
  heading = "Crafted down to the last pixel",
  subheading = "A complete toolkit of building blocks, tuned to work together and stay out of your way.",
  features = DEFAULT_FEATURES,
  className,
}: FeatureCardsProps) {
  const reduce = useReducedMotion();

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: 0.08 } },
  };
  const item: Variants = {
    hidden: { opacity: 0, y: 14 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
    },
  };

  const revealProps = reduce
    ? {}
    : {
        variants: container,
        initial: "hidden" as const,
        whileInView: "show" as const,
        viewport: { once: true, amount: 0.2 },
      };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            <span className="h-px w-6 bg-gradient-to-r from-transparent to-brand-2" />
            {eyebrow}
            <span className="h-px w-6 bg-gradient-to-l from-transparent to-brand-2" />
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <motion.div
        {...revealProps}
        className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
      >
        {features.map((f, i) => {
          const inner = (
            <>
              {/* hover glow + top hairline */}
              <span
                aria-hidden
                className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                style={{
                  background:
                    "radial-gradient(140px circle at 50% 0%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 70%)",
                }}
              />
              <span
                aria-hidden
                className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand/60 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
              />

              <span className="relative grid size-11 place-items-center rounded-xl border border-border bg-gradient-to-br from-brand/15 to-brand-2/10 text-brand-ink shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] transition-colors duration-300 group-hover:text-brand-2">
                {f.icon}
              </span>
              <h3 className="relative mt-5 text-base font-semibold">
                {f.title}
              </h3>
              <p className="relative mt-1.5 text-sm leading-relaxed text-muted">
                {f.description}
              </p>
              {f.href && (
                <span className="relative mt-5 inline-flex items-center gap-1 text-sm font-medium text-brand-2">
                  Learn more
                  <ArrowUpRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                </span>
              )}
            </>
          );

          const cardClass =
            "group relative flex h-full flex-col overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-[transform,border-color,box-shadow] duration-300 hover:-translate-y-1 hover:border-brand/40 hover:shadow-[0_24px_60px_-32px_var(--brand)]";

          return (
            <motion.div key={i} variants={item} className="h-full">
              {f.href ? (
                <a href={f.href} className={cardClass}>
                  {inner}
                </a>
              ) : (
                <div className={cardClass}>{inner}</div>
              )}
            </motion.div>
          );
        })}
      </motion.div>
    </section>
  );
}
```

### Feature Spotlight
Alternating feature rows pairing copy and a checklist with branded mock visuals.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-spotlight.tsx

```tsx
"use client";

import type { ReactNode } from "react";
import { ArrowRight, Check } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface SpotlightFeature {
  eyebrow?: string;
  title: string;
  description: string;
  points?: string[];
  ctaLabel?: string;
  ctaHref?: string;
  /** Custom visual; defaults to a built-in branded mock chosen by position. */
  visual?: ReactNode;
}

export interface FeatureSpotlightProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  features?: SpotlightFeature[];
  className?: string;
}

/* ---------- Built-in abstract "product" visuals (token-driven, no images) -- */

function AnalyticsMock() {
  const bars = [42, 64, 38, 78, 56, 90, 70];
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="space-y-1.5">
          <div className="h-2 w-24 rounded-full bg-foreground/15" />
          <div className="h-2 w-14 rounded-full bg-foreground/10" />
        </div>
        <span className="rounded-full bg-brand/15 px-2 py-0.5 text-[11px] font-semibold text-brand-ink">
          +24%
        </span>
      </div>
      <div className="flex h-32 items-end gap-2">
        {bars.map((h, i) => (
          <div
            key={i}
            className="flex-1 rounded-t-md bg-gradient-to-t from-brand/25 to-brand-2/70"
            style={{ height: `${h}%` }}
          />
        ))}
      </div>
    </div>
  );
}

function WorkflowMock() {
  const rows = ["Trigger received", "Enrich & validate", "Route to channel"];
  return (
    <div className="space-y-2.5">
      {rows.map((r, i) => (
        <div
          key={i}
          className="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2.5"
        >
          <div className="flex items-center gap-2.5">
            <span className="grid size-6 place-items-center rounded-md bg-brand/15 text-brand-ink">
              <Check className="size-3.5" />
            </span>
            <span className="text-xs font-medium text-foreground/80">{r}</span>
          </div>
          <span className="flex h-4 w-7 items-center rounded-full bg-brand/70 px-0.5">
            <span className="size-3 translate-x-2.5 rounded-full bg-white" />
          </span>
        </div>
      ))}
    </div>
  );
}

function LayersMock() {
  return (
    <div className="grid grid-cols-6 gap-2.5">
      {Array.from({ length: 24 }).map((_, i) => {
        const lit = [8, 9, 14, 15].includes(i);
        return (
          <span
            key={i}
            className={cn(
              "aspect-square rounded-md border",
              lit
                ? "border-brand/40 bg-gradient-to-br from-brand/30 to-brand-2/30"
                : "border-border bg-background",
            )}
          />
        );
      })}
    </div>
  );
}

const MOCKS = [<AnalyticsMock key="a" />, <WorkflowMock key="w" />, <LayersMock key="l" />];

const DEFAULT_FEATURES: SpotlightFeature[] = [
  {
    eyebrow: "Insight",
    title: "See the whole picture at a glance",
    description:
      "Pull every signal into one live view. Trends, anomalies, and milestones surface on their own — you stop digging and start deciding.",
    points: [
      "Real-time streaming metrics",
      "Anomaly detection out of the box",
      "Shareable, embeddable dashboards",
    ],
    ctaLabel: "Explore analytics",
    ctaHref: "#",
  },
  {
    eyebrow: "Automation",
    title: "Let the busywork run itself",
    description:
      "Compose triggers, conditions, and actions into flows that never sleep. Set them once and watch the routine work disappear.",
    points: [
      "Visual, branch-aware builder",
      "Hundreds of native connectors",
      "Replay and audit every run",
    ],
    ctaLabel: "Build a flow",
    ctaHref: "#",
  },
  {
    eyebrow: "Scale",
    title: "Grow without re-architecting",
    description:
      "Modular building blocks compose into anything, then scale horizontally as you go — no rewrites, no surprises at the next tier.",
    points: [
      "Composable primitives",
      "Horizontal by design",
      "Predictable, usage-based cost",
    ],
    ctaLabel: "Read the docs",
    ctaHref: "#",
  },
];

/** Reveal wrapper: rises in on scroll, or renders plain for reduced motion. */
function Reveal({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  const reduce = useReducedMotion();
  if (reduce) return <div className={className}>{children}</div>;
  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 28 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.3 }}
      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.div>
  );
}

/**
 * FeatureSpotlight — alternating, full-width feature rows. Each pairs a copy
 * column (eyebrow, title, checklist, CTA) with a branded mock visual, flipping
 * sides row to row. Rows rise in on view; reduced motion renders them static.
 */
export function FeatureSpotlight({
  eyebrow = "Capabilities",
  heading = "Built for the way you actually work",
  subheading = "Three pillars that carry a product from first signal to global scale.",
  features = DEFAULT_FEATURES,
  className,
}: FeatureSpotlightProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <div className="mt-16 space-y-16 sm:space-y-24">
        {features.map((f, i) => {
          const flip = i % 2 === 1;
          const visual = f.visual ?? MOCKS[i % MOCKS.length];
          return (
            <Reveal
              key={i}
              className="grid items-center gap-8 sm:gap-12 lg:grid-cols-2"
            >
              <div className={cn("space-y-5", flip && "lg:order-2")}>
                {f.eyebrow && (
                  <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
                    <span className="h-px w-6 bg-gradient-to-r from-transparent to-brand-2" />
                    {f.eyebrow}
                  </span>
                )}
                <h3 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
                  {f.title}
                </h3>
                <p className="text-pretty leading-relaxed text-muted">
                  {f.description}
                </p>
                {f.points && f.points.length > 0 && (
                  <ul className="space-y-2.5">
                    {f.points.map((p, j) => (
                      <li key={j} className="flex items-start gap-2.5 text-sm">
                        <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-brand/15 text-brand-2">
                          <Check className="size-3.5" />
                        </span>
                        <span className="text-foreground/90">{p}</span>
                      </li>
                    ))}
                  </ul>
                )}
                {f.ctaLabel && (
                  <a
                    href={f.ctaHref ?? "#"}
                    className="group inline-flex items-center gap-1.5 text-sm font-medium text-brand-2"
                  >
                    {f.ctaLabel}
                    <ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5" />
                  </a>
                )}
              </div>

              <div className={cn(flip && "lg:order-1")}>
                <div className="relative" aria-hidden>
                  <div
                    className="pointer-events-none absolute inset-0 -z-10 rounded-[2rem] bg-gradient-to-br from-brand/10 via-transparent to-brand-2/10 opacity-70 blur-2xl"
                  />
                  <div className="relative overflow-hidden rounded-2xl border border-border bg-surface p-5 shadow-[0_30px_80px_-40px_rgba(0,0,0,0.5)]">
                    <div
                      aria-hidden
                      className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand/40 to-transparent"
                    />
                    {visual}
                  </div>
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
}
```

### Feature Tabs
Interactive tabbed feature tour with autoplay, progress, and full keyboard navigation.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-tabs.tsx

```tsx
"use client";

import {
  type KeyboardEvent as ReactKeyboardEvent,
  type ReactNode,
  useEffect,
  useId,
  useRef,
  useState,
} from "react";
import {
  BarChart3,
  Check,
  Gauge,
  ShieldCheck,
  Workflow,
} from "lucide-react";
import {
  AnimatePresence,
  animate,
  motion,
  useInView,
  useMotionValue,
  useReducedMotion,
  useTransform,
} from "motion/react";
import { cn } from "@/lib/utils";

export interface TabFeature {
  /** Short label shown in the tab. */
  label: string;
  /** Secondary line under the label (desktop only). */
  tagline?: string;
  icon?: ReactNode;
  /** Panel heading. */
  title: string;
  description: string;
  points?: string[];
  /** Panel visual; defaults to a built-in branded mock by position. */
  visual?: ReactNode;
}

export interface FeatureTabsProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  features?: TabFeature[];
  /** Auto-advance the active tab. Pauses on hover/focus and off-screen. */
  autoplay?: boolean;
  /** Auto-advance interval (ms). */
  interval?: number;
  className?: string;
}

/* ---------- Built-in panel visuals (token-driven, no images) ------------- */

function AnalyticsMock() {
  const bars = [38, 60, 46, 72, 54, 88];
  return (
    <div className="w-full space-y-4">
      <div className="flex items-center justify-between">
        <div className="h-2.5 w-28 rounded-full bg-foreground/15" />
        <span className="rounded-full bg-brand/15 px-2 py-0.5 text-[11px] font-semibold text-brand-ink">
          Live
        </span>
      </div>
      <div className="flex h-28 items-end gap-2">
        {bars.map((h, i) => (
          <div
            key={i}
            className="flex-1 rounded-t-md bg-gradient-to-t from-brand/25 to-brand-2/70"
            style={{ height: `${h}%` }}
          />
        ))}
      </div>
    </div>
  );
}

function AutomationMock() {
  const rows = ["On new signup", "Verify & enrich", "Notify the team"];
  return (
    <div className="w-full space-y-2.5">
      {rows.map((r, i) => (
        <div
          key={i}
          className="flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-2.5"
        >
          <span className="grid size-6 place-items-center rounded-md bg-brand/15 text-xs font-semibold text-brand-ink">
            {i + 1}
          </span>
          <span className="text-xs font-medium text-foreground/80">{r}</span>
        </div>
      ))}
    </div>
  );
}

function SecurityMock() {
  const rows = ["SSO enforced", "Audit log on", "Data encrypted"];
  return (
    <div className="w-full space-y-2.5">
      {rows.map((r, i) => (
        <div
          key={i}
          className="flex items-center justify-between rounded-lg border border-border bg-background px-3 py-2.5"
        >
          <span className="text-xs font-medium text-foreground/80">{r}</span>
          <span className="flex h-4 w-7 items-center rounded-full bg-brand/70 px-0.5">
            <span className="size-3 translate-x-2.5 rounded-full bg-white" />
          </span>
        </div>
      ))}
    </div>
  );
}

function SpeedMock() {
  const spark = [30, 52, 40, 66, 58, 80, 72, 96];
  return (
    <div className="w-full space-y-4">
      <div className="flex items-baseline gap-1.5">
        <span className="text-3xl font-semibold tracking-tight">28</span>
        <span className="text-sm text-muted">ms p95</span>
      </div>
      <div className="flex h-20 items-end gap-1.5">
        {spark.map((h, i) => (
          <div
            key={i}
            className="flex-1 rounded-sm bg-gradient-to-t from-brand-2/30 to-brand/70"
            style={{ height: `${h}%` }}
          />
        ))}
      </div>
    </div>
  );
}

const MOCKS = [
  <AnalyticsMock key="a" />,
  <AutomationMock key="w" />,
  <SecurityMock key="s" />,
  <SpeedMock key="p" />,
];

const DEFAULT_FEATURES: TabFeature[] = [
  {
    label: "Analytics",
    tagline: "Dashboards & reporting",
    icon: <BarChart3 className="size-5" />,
    title: "Decisions, backed by live data",
    description:
      "Every metric that matters, updating as it happens. Build a view once and share it with the whole team.",
    points: ["Streaming charts", "Saved segments", "Scheduled exports"],
  },
  {
    label: "Automation",
    tagline: "Triggers & actions",
    icon: <Workflow className="size-5" />,
    title: "Put the routine on autopilot",
    description:
      "Chain triggers, conditions, and actions into flows that run themselves — reliably, around the clock.",
    points: ["Visual builder", "Native connectors", "Full run history"],
  },
  {
    label: "Security",
    tagline: "Access & audit",
    icon: <ShieldCheck className="size-5" />,
    title: "Locked down, end to end",
    description:
      "Enterprise controls without the enterprise overhead. Every action is scoped, logged, and reversible.",
    points: ["SSO & SCIM", "Granular roles", "Tamper-proof audit log"],
  },
  {
    label: "Performance",
    tagline: "Speed & scale",
    icon: <Gauge className="size-5" />,
    title: "Fast at any size",
    description:
      "Sub-50ms responses from the edge, holding steady as traffic climbs from your first user to your millionth.",
    points: ["Global edge", "Smart caching", "Linear scaling"],
  },
];

/**
 * FeatureTabs — an interactive, accessible feature explorer. The tablist
 * supports roving focus and arrow-key navigation; panels crossfade on change.
 * Optional autoplay advances the active tab, driven by a progress bar that
 * holds its position when paused on hover, focus, off-screen, or reduced motion.
 */
export function FeatureTabs({
  eyebrow = "Product tour",
  heading = "One platform, every angle",
  subheading = "Step through the core of the product — or let it walk you through itself.",
  features = DEFAULT_FEATURES,
  autoplay = true,
  interval = 5000,
  className,
}: FeatureTabsProps) {
  const baseId = useId();
  const reduce = useReducedMotion();
  const rootRef = useRef<HTMLDivElement>(null);
  const inView = useInView(rootRef, { amount: 0.4 });
  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const [active, setActive] = useState(0);
  // Hover and focus are tracked separately so that leaving with the pointer
  // never resumes autoplay while a keyboard user is still focused inside.
  const [hovered, setHovered] = useState(false);
  const [focused, setFocused] = useState(false);

  const count = features.length;
  // Clamp so a shrinking `features` prop can never index out of bounds.
  const safeActive = Math.min(active, Math.max(0, count - 1));
  const paused = hovered || focused;
  const autoplayEnabled = autoplay && !reduce && count > 1;
  const playing = autoplayEnabled && inView && !paused;

  // Single source of truth for the autoplay clock (0 → 1). The progress bar
  // reads it directly, and reaching 1 is what advances the tab — so the bar and
  // the advance can never drift, and pausing simply freezes both.
  const progress = useMotionValue(0);
  const progressHeight = useTransform(progress, (v) => `${v * 100}%`);

  // Reset the clock whenever the active tab changes (declared before the play
  // effect so it runs first on a tab change).
  useEffect(() => {
    progress.set(0);
  }, [safeActive, progress]);

  // While playing, animate the remaining fraction to 1 at a steady rate; on
  // completion advance the tab. Pausing stops the animation, holding position.
  useEffect(() => {
    if (!playing) return;
    const remaining = interval * (1 - progress.get());
    const controls = animate(progress, 1, {
      duration: Math.max(0, remaining) / 1000,
      ease: "linear",
      onComplete: () => setActive((a) => (a + 1) % count),
    });
    return () => controls.stop();
  }, [playing, interval, count, safeActive, progress]);

  const focusTab = (i: number) => {
    setActive(i);
    tabRefs.current[i]?.focus();
  };

  const onKeyDown = (e: ReactKeyboardEvent<HTMLButtonElement>) => {
    let next: number | null = null;
    switch (e.key) {
      case "ArrowDown":
      case "ArrowRight":
        next = (safeActive + 1) % count;
        break;
      case "ArrowUp":
      case "ArrowLeft":
        next = (safeActive - 1 + count) % count;
        break;
      case "Home":
        next = 0;
        break;
      case "End":
        next = count - 1;
        break;
      default:
        return;
    }
    e.preventDefault();
    focusTab(next);
  };

  const current = features[safeActive];
  const panelId = `${baseId}-panel`;

  // Nothing to render without features (guard placed after all hooks).
  if (count === 0) return null;

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <div
        ref={rootRef}
        onPointerEnter={() => setHovered(true)}
        onPointerLeave={() => setHovered(false)}
        onFocusCapture={() => setFocused(true)}
        onBlurCapture={(e) => {
          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
            setFocused(false);
          }
        }}
        className="mt-12 grid gap-4 lg:grid-cols-[20rem_1fr] lg:gap-6"
      >
        <div
          role="tablist"
          aria-label={heading}
          aria-orientation="vertical"
          className="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
        >
          {features.map((f, i) => {
            const selected = i === safeActive;
            return (
              <button
                key={i}
                type="button"
                ref={(el) => {
                  tabRefs.current[i] = el;
                }}
                role="tab"
                id={`${baseId}-tab-${i}`}
                aria-selected={selected}
                aria-controls={panelId}
                tabIndex={selected ? 0 : -1}
                onClick={() => setActive(i)}
                onKeyDown={onKeyDown}
                className={cn(
                  "group relative flex shrink-0 items-center gap-3 overflow-hidden rounded-xl border px-3.5 py-3 text-left transition-colors lg:w-full",
                  selected
                    ? "border-border bg-surface"
                    : "border-transparent text-muted hover:bg-surface/60 hover:text-foreground",
                )}
              >
                <span
                  aria-hidden
                  className="absolute inset-y-0 left-0 w-0.5 overflow-hidden rounded-full bg-border"
                >
                  {selected &&
                    (autoplayEnabled ? (
                      <motion.span
                        className="block w-full bg-gradient-to-b from-brand to-brand-2"
                        style={{ height: progressHeight }}
                      />
                    ) : (
                      <span className="block h-full w-full bg-gradient-to-b from-brand to-brand-2" />
                    ))}
                </span>
                <span
                  className={cn(
                    "grid size-9 shrink-0 place-items-center rounded-lg border border-border transition-colors",
                    selected
                      ? "bg-gradient-to-br from-brand/15 to-brand-2/10 text-brand-2"
                      : "bg-background text-brand-ink",
                  )}
                >
                  {f.icon}
                </span>
                <span className="min-w-0">
                  <span className="block text-sm font-semibold text-foreground">
                    {f.label}
                  </span>
                  {f.tagline && (
                    <span className="mt-0.5 hidden truncate text-xs text-muted lg:block">
                      {f.tagline}
                    </span>
                  )}
                </span>
              </button>
            );
          })}
        </div>

        <div
          role="tabpanel"
          id={panelId}
          aria-labelledby={`${baseId}-tab-${safeActive}`}
          tabIndex={0}
          className="relative overflow-hidden rounded-2xl border border-border bg-surface p-6 sm:p-8 lg:min-h-[22rem]"
        >
          <div
            aria-hidden
            className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand/40 to-transparent"
          />
          <AnimatePresence mode="wait">
            <motion.div
              key={safeActive}
              initial={reduce ? false : { opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={reduce ? undefined : { opacity: 0, y: -10 }}
              transition={{ duration: reduce ? 0 : 0.32, ease: "easeOut" }}
              className="grid items-center gap-8 sm:grid-cols-2"
            >
              <div>
                <h3 className="text-xl font-semibold tracking-tight sm:text-2xl">
                  {current.title}
                </h3>
                <p className="mt-3 text-pretty leading-relaxed text-muted">
                  {current.description}
                </p>
                {current.points && current.points.length > 0 && (
                  <ul className="mt-5 space-y-2.5">
                    {current.points.map((p, j) => (
                      <li key={j} className="flex items-center gap-2.5 text-sm">
                        <span className="grid size-5 shrink-0 place-items-center rounded-full bg-brand/15 text-brand-2">
                          <Check className="size-3.5" />
                        </span>
                        <span className="text-foreground/90">{p}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
              <div
                className="flex items-center justify-center rounded-xl border border-border bg-background/60 p-5"
                aria-hidden
              >
                {current.visual ?? MOCKS[safeActive % MOCKS.length]}
              </div>
            </motion.div>
          </AnimatePresence>
        </div>
      </div>
    </section>
  );
}
```

### Feature Sticky Split
A sticky intro and CTA beside a scroll-revealed list of features.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-sticky.tsx

```tsx
"use client";

import type { ReactNode } from "react";
import {
  ArrowRight,
  BarChart3,
  Bell,
  Plug,
  ShieldCheck,
} from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface StickyFeature {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface FeatureStickyProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  ctaLabel?: string;
  ctaHref?: string;
  features?: StickyFeature[];
  className?: string;
}

const DEFAULT_FEATURES: StickyFeature[] = [
  {
    title: "Live analytics",
    description:
      "Watch usage, retention, and revenue update in real time — no nightly batch, no waiting.",
    icon: <BarChart3 className="size-5" />,
  },
  {
    title: "Smart alerts",
    description:
      "Get pinged the moment something drifts out of range, routed to the right channel automatically.",
    icon: <Bell className="size-5" />,
  },
  {
    title: "Hardened access",
    description:
      "Role-based permissions, audit trails, and SSO keep every action accountable.",
    icon: <ShieldCheck className="size-5" />,
  },
  {
    title: "Connects to everything",
    description:
      "Drop-in integrations and a typed API mean your stack talks to ours in minutes.",
    icon: <Plug className="size-5" />,
  },
];

/** Reveal wrapper: rises in on scroll, or renders plain for reduced motion. */
function Reveal({
  children,
  delay = 0,
  className,
}: {
  children: ReactNode;
  delay?: number;
  className?: string;
}) {
  const reduce = useReducedMotion();
  if (reduce) return <div className={className}>{children}</div>;
  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.4 }}
      transition={{ duration: 0.55, delay, ease: [0.22, 1, 0.36, 1] }}
    >
      {children}
    </motion.div>
  );
}

/**
 * FeatureSticky — a two-column split where the intro and call-to-action stay
 * pinned (CSS sticky) while a list of features scrolls past. Each row rises in
 * on view; the sticky behavior and reveals both no-op under reduced motion.
 */
export function FeatureSticky({
  eyebrow = "Why teams switch",
  heading = "One surface for the whole operation",
  subheading = "Stop stitching dashboards together. Everything your team watches, in a single, fast place.",
  ctaLabel = "Start free",
  ctaHref = "#",
  features = DEFAULT_FEATURES,
  className,
}: FeatureStickyProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="grid gap-10 lg:grid-cols-2 lg:gap-16">
        <div className="lg:sticky lg:top-24 lg:self-start">
          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            <span className="h-px w-6 bg-gradient-to-r from-transparent to-brand-2" />
            {eyebrow}
          </span>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
            {heading}
          </h2>
          <p className="mt-4 text-pretty text-muted">{subheading}</p>
          <a
            href={ctaHref}
            className="group mt-7 inline-flex items-center gap-1.5 rounded-full bg-brand px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
          >
            {ctaLabel}
            <ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5" />
          </a>
        </div>

        <ul className="lg:py-2">
          {features.map((f, i) => (
            <li key={i}>
              <Reveal className="flex gap-5 border-t border-border py-7 first:border-t-0 first:pt-0 lg:py-8">
                <span className="grid size-11 shrink-0 place-items-center rounded-xl border border-border bg-surface text-brand-ink shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]">
                  {f.icon}
                </span>
                <div>
                  <h3 className="text-lg font-semibold">{f.title}</h3>
                  <p className="mt-1.5 leading-relaxed text-muted">
                    {f.description}
                  </p>
                </div>
              </Reveal>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```

### Feature Highlights
Understated hairline-divider grid of capabilities — server-safe, pure CSS hover.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-minimal.tsx

```tsx
import type { ReactNode } from "react";
import {
  Boxes,
  Code2,
  Cpu,
  Globe,
  Lock,
  RefreshCw,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface MinimalFeature {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface FeatureMinimalProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  features?: MinimalFeature[];
  className?: string;
}

const DEFAULT_FEATURES: MinimalFeature[] = [
  {
    title: "Edge runtime",
    description: "Ship close to your users with cold starts measured in milliseconds.",
    icon: <Cpu className="size-5" />,
  },
  {
    title: "Global by default",
    description: "Replicated across regions so the first byte is always nearby.",
    icon: <Globe className="size-5" />,
  },
  {
    title: "Typed end to end",
    description: "From the database to the button, types follow the data the whole way.",
    icon: <Code2 className="size-5" />,
  },
  {
    title: "Encrypted at rest",
    description: "Everything is sealed in transit and on disk — no exceptions, no toggles.",
    icon: <Lock className="size-5" />,
  },
  {
    title: "Instant rollbacks",
    description: "Every deploy is immutable, so reverting is a single click away.",
    icon: <RefreshCw className="size-5" />,
  },
  {
    title: "Zero lock-in",
    description: "Plain React and Tailwind. Copy what you need and own it outright.",
    icon: <Boxes className="size-5" />,
  },
];

/**
 * FeatureMinimal — an understated, editorial capability grid. Cells share
 * hairline dividers (no card chrome); each lights a top accent and tints on
 * hover. Server-safe: no client JavaScript, animation comes from pure CSS.
 */
export function FeatureMinimal({
  eyebrow = "Platform",
  heading = "Everything, quietly handled",
  subheading = "The unglamorous infrastructure work, done right so you never have to think about it.",
  features = DEFAULT_FEATURES,
  className,
}: FeatureMinimalProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <div className="mt-12 grid grid-cols-1 gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-3">
        {features.map((f, i) => (
          <div
            key={i}
            className="group relative overflow-hidden bg-surface p-6 transition-colors duration-300 hover:bg-surface-2"
          >
            <span
              aria-hidden
              className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand/60 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
            />
            <div className="flex items-center gap-3">
              <span className="grid size-10 place-items-center rounded-lg border border-border bg-background text-brand-ink transition-colors duration-300 group-hover:text-brand-2">
                {f.icon}
              </span>
              <h3 className="text-base font-semibold">{f.title}</h3>
            </div>
            <p className="mt-3 text-sm leading-relaxed text-muted">
              {f.description}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### Feature Media Cards
Feature cards each topped with a branded mock visual and a staggered scroll reveal.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-media.tsx

```tsx
"use client";

import type { ReactNode } from "react";
import {
  BarChart3,
  Bell,
  Globe,
  Layers,
  Lock,
  Workflow,
} from "lucide-react";
import { motion, useReducedMotion, type Variants } from "motion/react";
import { cn } from "@/lib/utils";

export interface MediaFeature {
  title: string;
  description: string;
  icon?: ReactNode;
  /** Custom poster visual; defaults to a built-in branded mock by position. */
  visual?: ReactNode;
}

export interface FeatureMediaProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  features?: MediaFeature[];
  className?: string;
}

/* ---------- Built-in "poster" visuals (token-driven, no images) ---------- */

function DashboardPoster() {
  const bars = [40, 64, 52, 78, 60, 90];
  return (
    <div className="flex h-full flex-col justify-between">
      <div className="flex items-center justify-between">
        <div className="h-2 w-20 rounded-full bg-foreground/15" />
        <span className="rounded-full bg-brand/15 px-2 py-0.5 text-[10px] font-semibold text-brand-ink">
          +18%
        </span>
      </div>
      <div className="flex h-16 items-end gap-1.5">
        {bars.map((h, i) => (
          <div
            key={i}
            className="flex-1 rounded-t-sm bg-gradient-to-t from-brand/25 to-brand-2/70"
            style={{ height: `${h}%` }}
          />
        ))}
      </div>
    </div>
  );
}

function TogglesPoster() {
  return (
    <div className="flex h-full flex-col justify-center gap-2">
      {[0, 1, 2].map((i) => (
        <div
          key={i}
          className="flex items-center justify-between rounded-lg border border-border bg-surface px-3 py-2"
        >
          <span className="h-2 w-16 rounded-full bg-foreground/15" />
          <span className="flex h-4 w-7 items-center rounded-full bg-brand/70 px-0.5">
            <span className="size-3 translate-x-2.5 rounded-full bg-white" />
          </span>
        </div>
      ))}
    </div>
  );
}

function GridPoster() {
  return (
    <div className="grid h-full grid-cols-5 place-content-center gap-2">
      {Array.from({ length: 15 }).map((_, i) => {
        const lit = [6, 7, 8].includes(i);
        return (
          <span
            key={i}
            className={cn(
              "aspect-square rounded-md border",
              lit
                ? "border-brand/40 bg-gradient-to-br from-brand/30 to-brand-2/30"
                : "border-border bg-surface",
            )}
          />
        );
      })}
    </div>
  );
}

const POSTERS = [
  <DashboardPoster key="d" />,
  <TogglesPoster key="t" />,
  <GridPoster key="g" />,
];

const DEFAULT_FEATURES: MediaFeature[] = [
  {
    title: "Dashboards that update live",
    description:
      "Real-time metrics with saved views and one-click sharing across the team.",
    icon: <BarChart3 className="size-5" />,
  },
  {
    title: "Controls you can trust",
    description:
      "Toggle features safely with per-environment flags and instant rollback.",
    icon: <Workflow className="size-5" />,
  },
  {
    title: "Composable building blocks",
    description:
      "Snap modular primitives together into the exact surface you need.",
    icon: <Layers className="size-5" />,
  },
  {
    title: "Global edge delivery",
    description: "Served from the region nearest each visitor, automatically.",
    icon: <Globe className="size-5" />,
  },
  {
    title: "Encrypted everywhere",
    description: "Sealed in transit and at rest, with keys you control.",
    icon: <Lock className="size-5" />,
  },
  {
    title: "Alerts that find you",
    description: "Routed to the right channel the instant something drifts.",
    icon: <Bell className="size-5" />,
  },
];

/**
 * FeatureMedia — a three-column grid of premium feature cards, each topped with
 * a branded mock visual (distinct from the icon-only Feature Cards). Cards lift
 * and light a brand ring on hover and rise in with a staggered scroll reveal
 * that collapses for reduced-motion users.
 */
export function FeatureMedia({
  eyebrow = "Showcase",
  heading = "A closer look at what ships",
  subheading = "Real surfaces, not stock art — every card previews a piece of the product.",
  features = DEFAULT_FEATURES,
  className,
}: FeatureMediaProps) {
  const reduce = useReducedMotion();

  const container: Variants = {
    hidden: {},
    show: { transition: { staggerChildren: 0.08 } },
  };
  const item: Variants = {
    hidden: { opacity: 0, y: 14 },
    show: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] },
    },
  };
  const revealProps = reduce
    ? {}
    : {
        variants: container,
        initial: "hidden" as const,
        whileInView: "show" as const,
        viewport: { once: true, amount: 0.2 },
      };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <motion.div
        {...revealProps}
        className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
      >
        {features.map((f, i) => (
          <motion.div key={i} variants={item} className="h-full">
            <div className="group flex h-full flex-col overflow-hidden rounded-2xl border border-border bg-surface transition-[transform,border-color,box-shadow] duration-300 hover:-translate-y-1 hover:border-brand/40 hover:shadow-[0_24px_60px_-32px_var(--brand)]">
              <div
                aria-hidden
                className="relative h-36 overflow-hidden border-b border-border bg-background/60 p-5"
              >
                {f.visual ?? POSTERS[i % POSTERS.length]}
                <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand/50 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
              </div>
              <div className="flex flex-1 flex-col p-6">
                <span className="grid size-10 place-items-center rounded-xl border border-border bg-gradient-to-br from-brand/15 to-brand-2/10 text-brand-ink transition-colors duration-300 group-hover:text-brand-2">
                  {f.icon}
                </span>
                <h3 className="mt-4 text-base font-semibold">{f.title}</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-muted">
                  {f.description}
                </p>
              </div>
            </div>
          </motion.div>
        ))}
      </motion.div>
    </section>
  );
}
```

### Feature Carousel
Accessible scroll-snap pager of feature cards with bound-aware prev/next controls.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-carousel.tsx

```tsx
"use client";

import { type ReactNode, useEffect, useRef, useState } from "react";
import {
  Bell,
  ChevronLeft,
  ChevronRight,
  Cpu,
  Gauge,
  Globe,
  Palette,
  ShieldCheck,
  Workflow,
  Zap,
} from "lucide-react";
import { useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface CarouselFeature {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface FeatureCarouselProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  features?: CarouselFeature[];
  className?: string;
}

const DEFAULT_FEATURES: CarouselFeature[] = [
  {
    title: "Blazing fast",
    description: "Sub-50ms responses from the edge, every request.",
    icon: <Zap className="size-5" />,
  },
  {
    title: "Secure by default",
    description: "Encryption, scoped roles, and a tamper-proof audit log.",
    icon: <ShieldCheck className="size-5" />,
  },
  {
    title: "Always on",
    description: "Replicated across regions with automatic failover.",
    icon: <Gauge className="size-5" />,
  },
  {
    title: "Fully themeable",
    description: "Every color flows from tokens — restyle in seconds.",
    icon: <Palette className="size-5" />,
  },
  {
    title: "Automate anything",
    description: "Compose triggers and actions into flows that never sleep.",
    icon: <Workflow className="size-5" />,
  },
  {
    title: "Global edge",
    description: "Served from the region nearest each visitor.",
    icon: <Globe className="size-5" />,
  },
  {
    title: "Smart alerts",
    description: "Routed to the right channel the moment things drift.",
    icon: <Bell className="size-5" />,
  },
  {
    title: "Built to scale",
    description: "Linear, predictable performance from one user to millions.",
    icon: <Cpu className="size-5" />,
  },
];

/**
 * FeatureCarousel — an accessible, scroll-snapping pager of feature cards. The
 * track is keyboard-focusable (arrow keys scroll it natively); the prev/next
 * buttons disable at the ends and scroll smoothly, falling back to an instant
 * jump under reduced motion.
 */
export function FeatureCarousel({
  eyebrow = "Capabilities",
  heading = "Everything in one place",
  subheading = "Swipe, scroll, or use the arrows to explore the toolkit.",
  features = DEFAULT_FEATURES,
  className,
}: FeatureCarouselProps) {
  const reduce = useReducedMotion();
  const trackRef = useRef<HTMLUListElement>(null);
  const [canLeft, setCanLeft] = useState(false);
  const [canRight, setCanRight] = useState(true);

  // Track scroll position to enable/disable the controls. State is only set
  // from event/observer callbacks (never synchronously in the effect body).
  useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    const onScroll = () => {
      const cl = el.scrollLeft > 4;
      const cr = el.scrollLeft < el.scrollWidth - el.clientWidth - 4;
      setCanLeft((p) => (p === cl ? p : cl));
      setCanRight((p) => (p === cr ? p : cr));
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    const ro = new ResizeObserver(onScroll);
    ro.observe(el);
    return () => {
      el.removeEventListener("scroll", onScroll);
      ro.disconnect();
    };
  }, []);

  const scrollByDir = (dir: 1 | -1) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollBy({
      left: dir * el.clientWidth * 0.85,
      behavior: reduce ? "auto" : "smooth",
    });
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div className="max-w-xl">
          {eyebrow && (
            <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
              {eyebrow}
            </span>
          )}
          <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">
            {heading}
          </h2>
          <p className="mt-3 text-muted">{subheading}</p>
        </div>
        <div className="flex shrink-0 gap-2">
          <button
            type="button"
            onClick={() => scrollByDir(-1)}
            disabled={!canLeft}
            aria-label="Previous features"
            className="grid size-10 place-items-center rounded-full border border-border bg-surface text-foreground transition-colors hover:border-border-strong hover:bg-background disabled:cursor-not-allowed disabled:opacity-40"
          >
            <ChevronLeft className="size-5" />
          </button>
          <button
            type="button"
            onClick={() => scrollByDir(1)}
            disabled={!canRight}
            aria-label="Next features"
            className="grid size-10 place-items-center rounded-full border border-border bg-surface text-foreground transition-colors hover:border-border-strong hover:bg-background disabled:cursor-not-allowed disabled:opacity-40"
          >
            <ChevronRight className="size-5" />
          </button>
        </div>
      </div>

      <ul
        ref={trackRef}
        role="group"
        aria-label={`${heading} — scrollable list`}
        tabIndex={0}
        className="mt-10 flex snap-x snap-mandatory gap-4 overflow-x-auto pb-3 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
        {features.map((f, i) => (
          <li
            key={i}
            className="shrink-0 basis-[82%] snap-start sm:basis-[46%] lg:basis-[31%]"
          >
            <div className="group flex h-full flex-col rounded-2xl border border-border bg-surface p-6 transition-colors hover:border-border-strong">
              <span className="grid size-11 place-items-center rounded-xl border border-border bg-gradient-to-br from-brand/15 to-brand-2/10 text-brand-ink transition-colors duration-300 group-hover:text-brand-2">
                {f.icon}
              </span>
              <h3 className="mt-4 text-base font-semibold">{f.title}</h3>
              <p className="mt-1.5 text-sm leading-relaxed text-muted">
                {f.description}
              </p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}
```

### Feature Marquee
Two opposing rows of capability pills that drift on a loop and pause on hover.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-marquee.tsx

```tsx
"use client";

import type { CSSProperties, ReactNode } from "react";
import {
  Activity,
  BarChart3,
  Bell,
  Cloud,
  Code2,
  Cpu,
  Database,
  Globe,
  Layers,
  Lock,
  Plug,
  RefreshCw,
  ShieldCheck,
  Workflow,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface MarqueeCapability {
  label: string;
  icon?: ReactNode;
}

export interface FeatureMarqueeProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  capabilities?: MarqueeCapability[];
  /** Seconds for one full loop of each row. */
  duration?: number;
  className?: string;
}

const DEFAULT_CAPABILITIES: MarqueeCapability[] = [
  { label: "Real-time sync", icon: <RefreshCw className="size-4" /> },
  { label: "Edge runtime", icon: <Cpu className="size-4" /> },
  { label: "Global CDN", icon: <Globe className="size-4" /> },
  { label: "SSO & SCIM", icon: <Lock className="size-4" /> },
  { label: "Audit logs", icon: <ShieldCheck className="size-4" /> },
  { label: "Webhooks", icon: <Plug className="size-4" /> },
  { label: "Live analytics", icon: <BarChart3 className="size-4" /> },
  { label: "Automations", icon: <Workflow className="size-4" /> },
  { label: "Typed SDKs", icon: <Code2 className="size-4" /> },
  { label: "Auto-scaling", icon: <Zap className="size-4" /> },
  { label: "Managed storage", icon: <Database className="size-4" /> },
  { label: "Composable UI", icon: <Layers className="size-4" /> },
  { label: "Smart alerts", icon: <Bell className="size-4" /> },
  { label: "Cloud backups", icon: <Cloud className="size-4" /> },
  { label: "Uptime monitoring", icon: <Activity className="size-4" /> },
];

function Pill({ capability }: { capability: MarqueeCapability }) {
  return (
    <span className="inline-flex shrink-0 items-center gap-2 whitespace-nowrap rounded-full border border-border bg-surface px-4 py-2 text-sm font-medium text-foreground/90">
      {capability.icon && (
        <span className="text-brand-2">{capability.icon}</span>
      )}
      {capability.label}
    </span>
  );
}

/**
 * MarqueeRow — two identical groups, each at least the container's width and
 * animated a full width, give a seamless loop. Reduced motion is handled purely
 * in CSS (no structural swap, so no hydration mismatch): the animation is
 * neutralized and a full-width group stays in view.
 */
function MarqueeRow({
  items,
  reverse,
  duration,
}: {
  items: MarqueeCapability[];
  reverse?: boolean;
  duration: number;
}) {
  const groupClass = cn(
    "flex min-w-full shrink-0 items-center justify-around gap-3 animate-marquee group-hover:[animation-play-state:paused] motion-reduce:[animation:none]",
    reverse && "[animation-direction:reverse]",
  );
  const style = {
    paddingInlineEnd: "0.75rem",
    "--marquee-duration": `${duration}s`,
  } as CSSProperties;
  return (
    <div className="group relative flex w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,#000_8%,#000_92%,transparent)]">
      <div className={groupClass} style={style}>
        {items.map((c, i) => (
          <Pill key={i} capability={c} />
        ))}
      </div>
      <div className={groupClass} style={style} aria-hidden>
        {items.map((c, i) => (
          <Pill key={i} capability={c} />
        ))}
      </div>
    </div>
  );
}

/**
 * FeatureMarquee — two opposing rows of capability pills that drift past on a
 * loop and pause on hover. Honors reduced motion via CSS, keeping a full row of
 * pills visible without animation.
 */
export function FeatureMarquee({
  eyebrow = "All included",
  heading = "Batteries fully included",
  subheading = "Dozens of capabilities ship in the box — here's a taste.",
  capabilities = DEFAULT_CAPABILITIES,
  duration = 42,
  className,
}: FeatureMarqueeProps) {
  const mid = Math.ceil(capabilities.length / 2);
  const rowOne = capabilities.slice(0, mid);
  const rowTwo = capabilities.slice(mid);

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <div className="mt-10 space-y-4">
        <MarqueeRow items={rowOne} duration={duration} />
        {rowTwo.length > 0 && (
          <MarqueeRow items={rowTwo} reverse duration={duration} />
        )}
      </div>
    </section>
  );
}
```

### Feature Accordion
Icon-led disclosure accordion that expands one capability at a time, inline.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-accordion.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import {
  Check,
  ChevronDown,
  Gauge,
  Layers,
  ShieldCheck,
  Sparkles,
  Workflow,
} from "lucide-react";
import { cn } from "@/lib/utils";

export interface AccordionFeature {
  title: string;
  /** One-line summary shown under the title even when collapsed. */
  teaser?: string;
  description: string;
  points?: string[];
  icon?: ReactNode;
}

export interface FeatureAccordionProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  features?: AccordionFeature[];
  /** Index expanded by default (use -1 for all collapsed). */
  defaultIndex?: number;
  className?: string;
}

const DEFAULT_FEATURES: AccordionFeature[] = [
  {
    title: "Motion, built in",
    teaser: "Spring-based transitions that feel native.",
    description:
      "Every interaction is interruptible and physically grounded — drags hand off to inertia, panels settle with a spring, and nothing janks mid-flight.",
    points: ["Interruptible springs", "Reduced-motion aware", "60fps transforms"],
    icon: <Sparkles className="size-5" />,
  },
  {
    title: "Effortless performance",
    teaser: "GPU-friendly and idle when off-screen.",
    description:
      "Animations pause when scrolled out of view or the tab is hidden, transforms stay on the compositor, and device pixel ratio is capped to protect battery.",
    points: ["Off-screen pausing", "DPR-capped canvases", "No layout thrash"],
    icon: <Gauge className="size-5" />,
  },
  {
    title: "Accessible by default",
    teaser: "Keyboard, ARIA, and focus handled for you.",
    description:
      "Interactive components ship with full keyboard paths, correct roles and state, and visible focus — accessibility is the default, not an add-on.",
    points: ["Full keyboard nav", "Correct ARIA roles", "Visible focus rings"],
    icon: <ShieldCheck className="size-5" />,
  },
  {
    title: "Composable primitives",
    teaser: "Snap small parts into bespoke sections.",
    description:
      "Each block is built from the same small set of primitives, so you can recombine them into your own layouts without fighting the system.",
    points: ["Tokenized theming", "Zero lock-in", "Copy-paste friendly"],
    icon: <Layers className="size-5" />,
  },
  {
    title: "Automate the busywork",
    teaser: "Wire steps once and let them run.",
    description:
      "Compose triggers, conditions, and actions into flows that carry the routine work from start to finish — reliably and on their own schedule.",
    points: ["Visual flow builder", "Replayable runs", "Native connectors"],
    icon: <Workflow className="size-5" />,
  },
];

/**
 * FeatureAccordion — an icon-led disclosure accordion. One feature is open at a
 * time and expands inline (distinct from the side-panel Feature Tabs). Headers
 * are buttons wired with aria-expanded/aria-controls; panels use a grid-rows
 * height transition and `inert` so collapsed content leaves the tab/AT tree.
 * Reduced motion is handled by the global stylesheet (it neutralizes the CSS
 * transition).
 */
export function FeatureAccordion({
  eyebrow = "How it works",
  heading = "Depth where you want it",
  subheading = "Open any capability to go deeper — the rest stay tucked away.",
  features = DEFAULT_FEATURES,
  defaultIndex = 0,
  className,
}: FeatureAccordionProps) {
  const baseId = useId();
  const [openIndex, setOpenIndex] = useState(defaultIndex);
  const toggle = (i: number) => setOpenIndex((prev) => (prev === i ? -1 : i));

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <div className="mx-auto mt-10 max-w-3xl space-y-3">
        {features.map((f, i) => {
          const isOpen = i === openIndex;
          const headerId = `${baseId}-h-${i}`;
          const panelId = `${baseId}-p-${i}`;
          return (
            <div
              key={i}
              className={cn(
                "overflow-hidden rounded-2xl border bg-surface transition-colors",
                isOpen ? "border-brand/40" : "border-border",
              )}
            >
              <h3>
                <button
                  id={headerId}
                  type="button"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => toggle(i)}
                  className="flex w-full items-center gap-4 p-5 text-left"
                >
                  <span
                    className={cn(
                      "grid size-11 shrink-0 place-items-center rounded-xl border border-border transition-colors",
                      isOpen
                        ? "bg-gradient-to-br from-brand/15 to-brand-2/10 text-brand-2"
                        : "bg-background text-brand-ink",
                    )}
                  >
                    {f.icon}
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="block font-semibold">{f.title}</span>
                    {f.teaser && (
                      <span className="mt-0.5 block truncate text-sm text-muted">
                        {f.teaser}
                      </span>
                    )}
                  </span>
                  <ChevronDown
                    className={cn(
                      "size-5 shrink-0 text-muted transition-transform duration-300",
                      isOpen && "rotate-180 text-brand-ink",
                    )}
                  />
                </button>
              </h3>
              <div
                id={panelId}
                role="region"
                aria-labelledby={headerId}
                inert={!isOpen}
                className="grid transition-[grid-template-rows] duration-300 ease-out"
                style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
              >
                <div className="overflow-hidden">
                  <div className="px-5 pb-5 pl-20">
                    <p className="text-sm leading-relaxed text-muted">
                      {f.description}
                    </p>
                    {f.points && f.points.length > 0 && (
                      <ul className="mt-3 grid gap-2 sm:grid-cols-2">
                        {f.points.map((p, j) => (
                          <li
                            key={j}
                            className="flex items-center gap-2 text-sm"
                          >
                            <span className="grid size-5 shrink-0 place-items-center rounded-full bg-brand/15 text-brand-2">
                              <Check className="size-3.5" />
                            </span>
                            <span className="text-foreground/90">{p}</span>
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
```

### Feature Panels
Interactive panels that expand on hover, focus, or tap to reveal each feature.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-panels.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { BarChart3, Globe, Lock, Workflow } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PanelFeature {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface FeaturePanelsProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  features?: PanelFeature[];
  /** Index expanded by default. */
  defaultIndex?: number;
  className?: string;
}

const DEFAULT_FEATURES: PanelFeature[] = [
  {
    title: "Insights",
    description:
      "Live dashboards that turn raw events into decisions — trends, anomalies, and milestones surface on their own.",
    icon: <BarChart3 className="size-5" />,
  },
  {
    title: "Automation",
    description:
      "Compose triggers, conditions, and actions into flows that run themselves around the clock.",
    icon: <Workflow className="size-5" />,
  },
  {
    title: "Security",
    description:
      "Scoped roles, SSO, and a tamper-proof audit log keep every action accountable and reversible.",
    icon: <Lock className="size-5" />,
  },
  {
    title: "Global scale",
    description:
      "Served from the edge nearest each visitor, holding steady from your first user to your millionth.",
    icon: <Globe className="size-5" />,
  },
];

/**
 * FeaturePanels — a row of panels where the active one expands to reveal its
 * copy while the others collapse to a sliver (an "image-accordion" pattern). On
 * large screens the panels grow/shrink with flex; below `lg` they stack into a
 * simple list with all copy visible. Each panel is driven by an overlay button
 * (hover, focus, or click activates it) wired with aria-expanded/controls; the
 * flex transition is neutralized for reduced-motion users by the global styles.
 */
export function FeaturePanels({
  eyebrow = "Explore",
  heading = "One product, many angles",
  subheading = "Hover, focus, or tap a panel to open it.",
  features = DEFAULT_FEATURES,
  defaultIndex = 0,
  className,
}: FeaturePanelsProps) {
  const baseId = useId();
  const [active, setActive] = useState(defaultIndex);

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <div className="mt-10 flex flex-col gap-3 lg:h-80 lg:flex-row">
        {features.map((f, i) => {
          const isActive = i === active;
          const titleId = `${baseId}-t-${i}`;
          const descId = `${baseId}-d-${i}`;
          return (
            <div
              key={i}
              className={cn(
                "group relative overflow-hidden rounded-2xl border transition-all duration-500 ease-out focus-within:ring-2 focus-within:ring-[var(--ring)]",
                isActive
                  ? "border-brand/40 lg:flex-[3.2]"
                  : "border-border lg:flex-[1]",
              )}
            >
              <span
                aria-hidden
                className={cn(
                  "pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/12 to-brand-2/5 opacity-0 transition-opacity duration-500",
                  isActive && "opacity-100",
                )}
              />
              <button
                type="button"
                aria-labelledby={titleId}
                aria-expanded={isActive}
                aria-controls={descId}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                className="absolute inset-0 z-10 cursor-pointer focus:outline-none"
              />
              <div className="relative flex h-full min-h-[13rem] flex-col justify-end gap-3 p-6 lg:min-h-0">
                <span
                  className={cn(
                    "grid size-11 shrink-0 place-items-center rounded-xl border border-border transition-colors duration-300",
                    isActive
                      ? "bg-gradient-to-br from-brand/15 to-brand-2/10 text-brand-2"
                      : "bg-background/70 text-brand-ink",
                  )}
                >
                  {f.icon}
                </span>
                <div className="w-full lg:w-80">
                  <h3
                    id={titleId}
                    className="truncate text-lg font-semibold lg:whitespace-nowrap"
                  >
                    {f.title}
                  </h3>
                  <p
                    id={descId}
                    className={cn(
                      "mt-1.5 text-sm leading-relaxed text-muted transition-opacity duration-300 max-lg:opacity-100",
                      isActive ? "lg:opacity-100" : "lg:opacity-0",
                    )}
                  >
                    {f.description}
                  </p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
```

### Feature Checklist
Server-safe 'everything included' section of grouped checkmark columns.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/feature-checklist.tsx

```tsx
import type { ReactNode } from "react";
import { Check, Code2, Rocket, TrendingUp } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ChecklistGroup {
  title: string;
  icon?: ReactNode;
  items: string[];
}

export interface FeatureChecklistProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  groups?: ChecklistGroup[];
  className?: string;
}

const DEFAULT_GROUPS: ChecklistGroup[] = [
  {
    title: "Build",
    icon: <Code2 className="size-5" />,
    items: [
      "TypeScript-first APIs",
      "Tailwind token theming",
      "Copy-paste source",
      "Tree-shakeable exports",
      "SSR & RSC ready",
    ],
  },
  {
    title: "Ship",
    icon: <Rocket className="size-5" />,
    items: [
      "Static-export friendly",
      "Zero runtime dependencies",
      "Edge-ready output",
      "Light & dark themes",
      "Accessible by default",
    ],
  },
  {
    title: "Scale",
    icon: <TrendingUp className="size-5" />,
    items: [
      "Horizontal by design",
      "Off-screen pausing",
      "DPR-capped canvases",
      "Reduced-motion aware",
      "60fps transforms",
    ],
  },
];

/**
 * FeatureChecklist — an "everything included" section: capabilities grouped into
 * labelled columns of checkmarked items. Server-safe (no client JavaScript);
 * all styling comes from design tokens, so it adapts to light and dark themes.
 */
export function FeatureChecklist({
  eyebrow = "What's included",
  heading = "Everything in the box",
  subheading = "No add-ons, no upsells — every plan ships with the full toolkit.",
  groups = DEFAULT_GROUPS,
  className,
}: FeatureChecklistProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-2">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>

      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {groups.map((group, i) => (
          <div
            key={i}
            className="rounded-2xl border border-border bg-surface p-6"
          >
            <div className="flex items-center gap-3">
              <span className="grid size-10 place-items-center rounded-xl border border-border bg-gradient-to-br from-brand/15 to-brand-2/10 text-brand-ink">
                {group.icon}
              </span>
              <h3 className="text-base font-semibold">{group.title}</h3>
            </div>
            <ul className="mt-5 space-y-3">
              {group.items.map((item, j) => (
                <li key={j} className="flex items-start gap-2.5 text-sm">
                  <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-brand/15 text-brand-2">
                    <Check className="size-3.5" />
                  </span>
                  <span className="text-foreground/90">{item}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### Steps
Numbered how-it-works sequence with a connector line.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-block.tsx

```tsx
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface Step {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsBlockProps {
  heading?: string;
  steps?: Step[];
  className?: string;
}

const DEFAULT_STEPS: Step[] = [
  {
    title: "Install",
    description: "Spin up a Next.js app and add Tailwind and motion.",
  },
  {
    title: "Copy a component",
    description: "Grab any component's source from the Code tab and paste it in.",
  },
  {
    title: "Make it yours",
    description: "Tweak the tokens and props until it matches your brand.",
  },
];

/**
 * StepsBlock — a numbered "how it works" sequence with a connecting line on
 * larger screens.
 */
export function StepsBlock({
  heading = "Up and running in minutes",
  steps = DEFAULT_STEPS,
  className,
}: StepsBlockProps) {
  return (
    <section className={cn("w-full", className)}>
      <h2 className="text-center text-3xl font-semibold tracking-tight sm:text-4xl">
        {heading}
      </h2>
      <ol className="relative mt-12 grid gap-8 sm:grid-cols-3">
        <span
          aria-hidden
          className="absolute left-0 right-0 top-5 hidden h-px bg-border sm:block"
        />
        {steps.map((step, i) => (
          <li key={i} className="relative">
            <div className="relative z-10 grid size-10 place-items-center rounded-full border border-border bg-surface font-semibold text-brand-ink">
              {step.icon ?? i + 1}
            </div>
            <h3 className="mt-4 font-semibold">{step.title}</h3>
            <p className="mt-1 text-sm text-muted">{step.description}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}
```

### Steps Horizontal
Refined horizontal flow with gradient-ringed icon nodes and a connector.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-horizontal.tsx

```tsx
import type { ReactNode } from "react";
import { Copy, Download, Rocket, Wand2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HorizontalStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsHorizontalProps {
  eyebrow?: string;
  heading?: string;
  steps?: HorizontalStep[];
  className?: string;
}

const DEFAULT_STEPS: HorizontalStep[] = [
  {
    title: "Install",
    description: "Spin up a Next.js app and add Tailwind, motion, and lucide.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    description: "Open any Code tab and paste the source into your project.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    description: "Tune the design tokens and props until it fits your brand.",
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship it",
    description: "Build, deploy, and watch your interface come alive.",
    icon: <Rocket className="size-5" />,
  },
];

/**
 * StepsHorizontal — a refined horizontal "how it works" row. Gradient-ringed
 * icon nodes sit on a connector line that fades from brand to border, each
 * carrying a small index badge. The sequence folds into a centered column on
 * small screens.
 */
export function StepsHorizontal({
  eyebrow = "How it works",
  heading = "From zero to shipped in four steps",
  steps = DEFAULT_STEPS,
  className,
}: StepsHorizontalProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol className="relative mt-14 grid gap-y-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-6">
        {steps.map((step, i) => (
          <li
            key={i}
            className="group relative flex flex-col items-center gap-4 px-2 text-center"
          >
            {/* connector to the next node (desktop, horizontal) */}
            {i < steps.length - 1 && (
              <span
                aria-hidden
                className="absolute left-1/2 top-7 hidden h-px w-full -translate-y-1/2 bg-gradient-to-r from-brand/50 to-border lg:block"
              />
            )}
            {/* gradient-ringed node */}
            <span className="relative z-10 grid size-14 place-items-center rounded-full bg-gradient-to-br from-brand via-brand-2 to-brand-3 p-px shadow-[0_10px_30px_-12px_var(--brand)] transition-transform duration-300 group-hover:scale-105">
              <span className="grid size-full place-items-center rounded-full bg-surface text-brand-ink">
                {step.icon ?? (
                  <span className="text-sm font-semibold">{i + 1}</span>
                )}
              </span>
              {step.icon && (
                <span className="absolute -right-1 -top-1 grid size-5 place-items-center rounded-full bg-brand text-[10px] font-bold text-white">
                  {i + 1}
                </span>
              )}
            </span>
            <div>
              <h3 className="font-semibold">{step.title}</h3>
              <p className="mx-auto mt-1 max-w-[18rem] text-sm leading-relaxed text-muted">
                {step.description}
              </p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}
```

### Steps Vertical
Vertical sequence joined by a gradient rail with icon nodes.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-vertical.tsx

```tsx
import type { ReactNode } from "react";
import { Copy, Download, Rocket, Wand2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface VerticalStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsVerticalProps {
  eyebrow?: string;
  heading?: string;
  steps?: VerticalStep[];
  className?: string;
}

const DEFAULT_STEPS: VerticalStep[] = [
  {
    title: "Install",
    description:
      "Spin up a Next.js app and add Tailwind, motion, and lucide-react, then drop in the design tokens.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    description:
      "Open any component's Code tab and paste its real source straight into your project — no package, no lock-in.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    description:
      "Tune the CSS variables and component props until the color, motion, and spacing match your brand.",
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship it",
    description:
      "Everything is accessible and reduced-motion aware out of the box. Build, deploy, and launch.",
    icon: <Rocket className="size-5" />,
  },
];

/**
 * StepsVertical — a vertical "flow" of steps connected by a gradient rail.
 * Rounded-square icon nodes anchor each row, with an index eyebrow, title, and
 * description. Self-contained connectors keep the rail aligned at any length.
 */
export function StepsVertical({
  eyebrow = "Getting started",
  heading = "A clear path from idea to launch",
  steps = DEFAULT_STEPS,
  className,
}: StepsVerticalProps) {
  return (
    <section className={cn("mx-auto max-w-2xl", className)}>
      <div>
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol className="mt-12">
        {steps.map((step, i) => {
          const isLast = i === steps.length - 1;
          return (
            <li key={i} className="flex gap-5">
              <div className="flex flex-col items-center">
                <span className="grid size-12 shrink-0 place-items-center rounded-2xl border border-border bg-surface text-brand-ink shadow-sm">
                  {step.icon ?? (
                    <span className="text-sm font-semibold">{i + 1}</span>
                  )}
                </span>
                {!isLast && (
                  <span
                    aria-hidden
                    className="my-2 w-px flex-1 bg-gradient-to-b from-brand/50 via-border to-border"
                  />
                )}
              </div>
              <div className={cn("pb-10", isLast && "pb-0")}>
                <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
                  Step {String(i + 1).padStart(2, "0")}
                </span>
                <h3 className="mt-1 text-base font-semibold">{step.title}</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-muted">
                  {step.description}
                </p>
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
}
```

### Steps Cards
Numbered cards with ghost numerals and chevron connectors that lift on hover.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-cards.tsx

```tsx
import { Fragment, type ReactNode } from "react";
import { ChevronDown, ChevronRight, Copy, Download, Wand2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CardStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsCardsProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  steps?: CardStep[];
  className?: string;
}

const DEFAULT_STEPS: CardStep[] = [
  {
    title: "Install",
    description:
      "Spin up a Next.js app and add Tailwind, motion, and lucide-react.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    description:
      "Open the Code tab and paste the real source into your project.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    description: "Tune the tokens and props until it matches your brand.",
    icon: <Wand2 className="size-5" />,
  },
];

/**
 * StepsCards — numbered "how it works" cards joined by chevron connectors.
 * Each card carries a large ghost numeral and lifts on hover; the connectors
 * point right on desktop and down when the cards stack on small screens.
 */
export function StepsCards({
  eyebrow = "Workflow",
  heading = "Three steps to a polished UI",
  subheading = "No setup ceremony — copy, customize, and ship.",
  steps = DEFAULT_STEPS,
  className,
}: StepsCardsProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        {subheading && <p className="mt-3 text-muted">{subheading}</p>}
      </div>

      <ol className="mt-12 flex flex-col gap-3 lg:flex-row lg:items-stretch">
        {steps.map((step, i) => (
          <Fragment key={i}>
            <li className="group relative flex-1 overflow-hidden rounded-2xl border border-border bg-surface p-6 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:shadow-[0_24px_60px_-32px_var(--brand)]">
              <span
                aria-hidden
                className="pointer-events-none absolute -right-2 -top-3 select-none text-7xl font-black leading-none text-brand/10 transition-colors duration-300 group-hover:text-brand/20"
              >
                {i + 1}
              </span>
              <span className="relative grid size-11 place-items-center rounded-xl border border-border bg-background text-brand-ink transition-colors duration-300 group-hover:border-brand/40 group-hover:text-brand-2">
                {step.icon ?? (
                  <span className="text-sm font-semibold">{i + 1}</span>
                )}
              </span>
              <h3 className="relative mt-5 text-base font-semibold">
                {step.title}
              </h3>
              <p className="relative mt-1.5 text-sm leading-relaxed text-muted">
                {step.description}
              </p>
            </li>
            {i < steps.length - 1 && (
              <li
                aria-hidden
                className="flex items-center justify-center text-muted-2"
              >
                <ChevronRight className="hidden size-6 shrink-0 lg:block" />
                <ChevronDown className="size-6 shrink-0 lg:hidden" />
              </li>
            )}
          </Fragment>
        ))}
      </ol>
    </section>
  );
}
```

### Steps Alternating
Center-rail timeline whose cards zigzag left and right on desktop.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-alternating.tsx

```tsx
import type { ReactNode } from "react";
import { Copy, Download, Rocket, Wand2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AlternatingStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsAlternatingProps {
  eyebrow?: string;
  heading?: string;
  steps?: AlternatingStep[];
  className?: string;
}

const DEFAULT_STEPS: AlternatingStep[] = [
  {
    title: "Install",
    description:
      "Spin up a Next.js app and add Tailwind, motion, and lucide-react.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    description:
      "Open any Code tab and paste the real source into your project.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    description:
      "Tune the design tokens and props until it matches your brand.",
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship it",
    description: "Build, deploy, and watch your interface come alive.",
    icon: <Rocket className="size-5" />,
  },
];

/**
 * StepsAlternating — a center-rail timeline whose cards zigzag left and right
 * on desktop and stack into a single left-anchored rail on mobile. Numbered
 * icon nodes ride the gradient rail.
 */
export function StepsAlternating({
  eyebrow = "The process",
  heading = "How a project comes together",
  steps = DEFAULT_STEPS,
  className,
}: StepsAlternatingProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol className="relative mt-14">
        <span
          aria-hidden
          className="absolute left-5 top-2 h-[calc(100%-1rem)] w-px bg-gradient-to-b from-brand/50 via-border to-border md:left-1/2 md:-translate-x-1/2"
        />
        {steps.map((step, i) => {
          const left = i % 2 === 0;
          return (
            <li
              key={i}
              className="relative mb-10 last:mb-0 md:mb-12 md:grid md:grid-cols-2 md:items-center md:gap-x-12"
            >
              <span className="absolute left-5 top-1 z-10 grid size-10 -translate-x-1/2 place-items-center rounded-full border border-border bg-surface text-brand-ink shadow-sm md:left-1/2 md:top-1/2 md:-translate-y-1/2">
                {step.icon ?? (
                  <span className="text-sm font-semibold">{i + 1}</span>
                )}
              </span>
              <div
                className={cn(
                  "ml-14 md:ml-0",
                  left
                    ? "md:col-start-1 md:pr-12 md:text-right"
                    : "md:col-start-2 md:pl-12",
                )}
              >
                <div className="rounded-2xl border border-border bg-surface p-5 transition-colors hover:border-border-strong">
                  <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
                    Step {String(i + 1).padStart(2, "0")}
                  </span>
                  <h3 className="mt-1 font-semibold">{step.title}</h3>
                  <p className="mt-1.5 text-sm leading-relaxed text-muted">
                    {step.description}
                  </p>
                </div>
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
}
```

### Steps Progress
Vertical timeline whose gradient rail fills and nodes light up on scroll.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-progress.tsx

```tsx
"use client";

import { type ReactNode, useRef } from "react";
import { Check, Copy, Download, Rocket, Wand2 } from "lucide-react";
import {
  motion,
  useInView,
  useReducedMotion,
  useScroll,
  useSpring,
} from "motion/react";
import { cn } from "@/lib/utils";

export interface ProgressStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsProgressProps {
  eyebrow?: string;
  heading?: string;
  steps?: ProgressStep[];
  className?: string;
}

const DEFAULT_STEPS: ProgressStep[] = [
  {
    title: "Install",
    description:
      "Spin up a Next.js app and add Tailwind, motion, and lucide-react.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    description:
      "Open any component's Code tab and paste the real source into your project.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    description:
      "Tune the CSS variables and props until the color and motion match your brand.",
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship it",
    description: "Build, deploy, and watch your interface come alive.",
    icon: <Rocket className="size-5" />,
  },
];

function StepRow({
  step,
  index,
  reduced,
}: {
  step: ProgressStep;
  index: number;
  reduced: boolean;
}) {
  const ref = useRef<HTMLLIElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.8 });
  const active = reduced || inView;

  return (
    <li ref={ref} className="relative flex gap-5 pb-12 last:pb-0">
      <span
        className={cn(
          "relative z-10 grid size-12 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-all duration-500",
          active
            ? "border-brand bg-brand text-white shadow-[0_0_0_4px_var(--ring)]"
            : "border-border bg-surface text-muted",
        )}
      >
        {active ? step.icon ?? <Check className="size-5" /> : index + 1}
      </span>
      <div
        className={cn(
          "pt-1 transition-opacity duration-500",
          active ? "opacity-100" : "opacity-60",
        )}
      >
        <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
          Step {String(index + 1).padStart(2, "0")}
        </span>
        <h3 className="mt-1 text-base font-semibold">{step.title}</h3>
        <p className="mt-1.5 text-sm leading-relaxed text-muted">
          {step.description}
        </p>
      </div>
    </li>
  );
}

/**
 * StepsProgress — a vertical timeline whose gradient rail fills as the section
 * scrolls through the viewport, while each node lights up (and swaps to a
 * check) once it comes into view. Under reduced-motion the rail is fully drawn
 * and every step reads as complete.
 */
export function StepsProgress({
  eyebrow = "Your journey",
  heading = "Follow the path, step by step",
  steps = DEFAULT_STEPS,
  className,
}: StepsProgressProps) {
  const reduced = useReducedMotion();
  const ref = useRef<HTMLOListElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start 60%", "end 60%"],
  });
  const scaleY = useSpring(scrollYProgress, {
    stiffness: 120,
    damping: 30,
    mass: 0.3,
  });

  return (
    <section className={cn("mx-auto max-w-2xl", className)}>
      <div>
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol ref={ref} className="relative mt-12">
        {/* static track */}
        <span
          aria-hidden
          className="absolute bottom-6 left-6 top-6 w-0.5 -translate-x-1/2 rounded bg-border"
        />
        {/* scroll-driven fill */}
        <motion.span
          aria-hidden
          style={{ scaleY: reduced ? 1 : scaleY }}
          className="absolute bottom-6 left-6 top-6 w-0.5 -translate-x-1/2 origin-top rounded bg-gradient-to-b from-brand via-brand-2 to-brand-3"
        />
        {steps.map((step, i) => (
          <StepRow key={i} step={step} index={i} reduced={!!reduced} />
        ))}
      </ol>
    </section>
  );
}
```

### Steps Interactive
Keyboard-accessible tablist walkthrough driving an animated detail panel.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-interactive.tsx

```tsx
"use client";

import { type KeyboardEvent, type ReactNode, useId, useRef, useState } from "react";
import { ArrowRight, Copy, Download, Rocket, Wand2 } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface InteractiveStep {
  title: string;
  tagline: string;
  description: string;
  bullets?: string[];
  icon?: ReactNode;
}

export interface StepsInteractiveProps {
  eyebrow?: string;
  heading?: string;
  steps?: InteractiveStep[];
  className?: string;
}

const DEFAULT_STEPS: InteractiveStep[] = [
  {
    title: "Install",
    tagline: "Set up the foundation",
    description:
      "Create a Next.js app, then add Tailwind, motion, and lucide-react. Drop in the design tokens and you're ready to paste components.",
    bullets: ["Create a Next.js app", "Add the Tailwind v4 tokens", "Install motion + lucide"],
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    tagline: "Grab the source",
    description:
      "Every component exposes its real source in the Code tab. Copy it straight into your project — no package, no lock-in.",
    bullets: ["Open the Code tab", "Copy the full source", "Paste it into your app"],
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    tagline: "Tune the details",
    description:
      "Adjust the CSS variables and component props until the motion, color, and spacing match your brand.",
    bullets: ["Restyle via tokens", "Tweak props and timing", "Compose into blocks"],
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship it",
    tagline: "Launch with confidence",
    description:
      "Everything is accessible and reduced-motion aware out of the box. Build, deploy, and watch it come alive.",
    bullets: ["Accessible by default", "Reduced-motion safe", "Deploy anywhere"],
    icon: <Rocket className="size-5" />,
  },
];

/**
 * StepsInteractive — a clickable product walkthrough. A vertical tablist of
 * steps (full keyboard support: arrows, Home/End, roving tabindex) drives an
 * animated detail panel. Motion is disabled under reduced-motion.
 */
export function StepsInteractive({
  eyebrow = "Walkthrough",
  heading = "See how it fits together",
  steps = DEFAULT_STEPS,
  className,
}: StepsInteractiveProps) {
  const reduced = useReducedMotion();
  const baseId = useId();
  const [active, setActive] = useState(0);
  const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);
  const current = steps[active];

  function selectAndFocus(i: number) {
    setActive(i);
    tabsRef.current[i]?.focus();
  }

  function onKeyDown(e: KeyboardEvent<HTMLDivElement>) {
    const last = steps.length - 1;
    switch (e.key) {
      case "ArrowDown":
      case "ArrowRight":
        e.preventDefault();
        selectAndFocus(active === last ? 0 : active + 1);
        break;
      case "ArrowUp":
      case "ArrowLeft":
        e.preventDefault();
        selectAndFocus(active === 0 ? last : active - 1);
        break;
      case "Home":
        e.preventDefault();
        selectAndFocus(0);
        break;
      case "End":
        e.preventDefault();
        selectAndFocus(last);
        break;
    }
  }

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <div className="mt-10 grid gap-4 lg:grid-cols-[minmax(0,20rem)_1fr]">
        {/* tablist */}
        <div
          role="tablist"
          aria-label={heading}
          aria-orientation="vertical"
          onKeyDown={onKeyDown}
          className="flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0"
        >
          {steps.map((step, i) => {
            const selected = i === active;
            return (
              <button
                key={i}
                ref={(el) => {
                  tabsRef.current[i] = el;
                }}
                role="tab"
                id={`${baseId}-tab-${i}`}
                aria-selected={selected}
                aria-controls={`${baseId}-panel`}
                tabIndex={selected ? 0 : -1}
                onClick={() => setActive(i)}
                className={cn(
                  "flex min-w-[12rem] flex-1 items-center gap-3 rounded-xl border p-3 text-left transition-colors lg:min-w-0 lg:flex-none",
                  selected
                    ? "border-brand/50 bg-surface shadow-[0_10px_30px_-20px_var(--brand)]"
                    : "border-border hover:bg-surface",
                )}
              >
                <span
                  className={cn(
                    "grid size-9 shrink-0 place-items-center rounded-lg border text-sm font-semibold transition-colors",
                    selected
                      ? "border-brand bg-brand text-white"
                      : "border-border bg-background text-muted",
                  )}
                >
                  {i + 1}
                </span>
                <span className="min-w-0">
                  <span className="block truncate text-sm font-semibold">
                    {step.title}
                  </span>
                  <span className="block truncate text-xs text-muted">
                    {step.tagline}
                  </span>
                </span>
              </button>
            );
          })}
        </div>

        {/* panel */}
        <div
          role="tabpanel"
          id={`${baseId}-panel`}
          aria-labelledby={`${baseId}-tab-${active}`}
          tabIndex={0}
          className="relative overflow-hidden rounded-2xl border border-border bg-surface"
        >
          <AnimatePresence mode="wait">
            <motion.div
              key={active}
              initial={{ opacity: 0, x: reduced ? 0 : 16 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: reduced ? 0 : -16 }}
              transition={{ duration: reduced ? 0 : 0.25, ease: "easeOut" }}
              className="grid gap-6 p-6 sm:grid-cols-[1fr_auto] sm:items-center sm:p-8"
            >
              <div>
                <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
                  Step {String(active + 1).padStart(2, "0")} · {current.tagline}
                </span>
                <h3 className="mt-2 text-xl font-semibold tracking-tight">
                  {current.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted">
                  {current.description}
                </p>
                {current.bullets && current.bullets.length > 0 && (
                  <ul className="mt-4 space-y-2">
                    {current.bullets.map((bullet, j) => (
                      <li key={j} className="flex items-center gap-2 text-sm">
                        <ArrowRight className="size-4 shrink-0 text-brand-2" />
                        <span className="text-foreground/90">{bullet}</span>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
              <div
                aria-hidden
                className="relative hidden size-32 shrink-0 place-items-center sm:grid"
              >
                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-brand/25 via-brand-2/10 to-transparent blur-xl" />
                <div className="relative grid size-20 place-items-center rounded-2xl border border-border bg-background text-brand-ink [&_svg]:size-8">
                  {current.icon ?? (
                    <span className="text-lg font-semibold">{active + 1}</span>
                  )}
                </div>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>
      </div>
    </section>
  );
}
```

### Steps Sticky
Scroll-linked walkthrough: a sticky index tracks the step you're reading.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-sticky.tsx

```tsx
"use client";

import { type ReactNode, useRef, useState } from "react";
import { Copy, Download, Rocket, Wand2 } from "lucide-react";
import {
  motion,
  useMotionValueEvent,
  useReducedMotion,
  useScroll,
  useSpring,
} from "motion/react";
import { cn } from "@/lib/utils";

export interface StickyStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsStickyProps {
  eyebrow?: string;
  heading?: string;
  steps?: StickyStep[];
  className?: string;
}

const DEFAULT_STEPS: StickyStep[] = [
  {
    title: "Install",
    description:
      "Create a Next.js app and add Tailwind, motion, and lucide-react. Paste in the design tokens and the whole kit themes itself from a handful of CSS variables.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    description:
      "Open any component's Code tab and copy its real source. There's no package to install and nothing to wire up — the code you read is the code you ship.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    description:
      "Adjust the tokens and props until the motion, color, and spacing match your brand. Every value is exposed; nothing is locked behind a build step.",
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship it",
    description:
      "Each component is accessible and reduced-motion aware out of the box, so you can build, deploy, and trust it in production from day one.",
    icon: <Rocket className="size-5" />,
  },
];

/**
 * StepsSticky — a scroll-linked walkthrough. A sticky index on the left tracks
 * the step you're reading on the right (driven by scroll position), and each
 * index entry scrolls its panel into view on click. Reduced motion swaps smooth
 * scrolling for instant jumps and fills the rail statically.
 */
export function StepsSticky({
  eyebrow = "Walkthrough",
  heading = "Everything you need, in order",
  steps = DEFAULT_STEPS,
  className,
}: StepsStickyProps) {
  const reduced = useReducedMotion();
  const containerRef = useRef<HTMLDivElement>(null);
  const panelRefs = useRef<(HTMLLIElement | null)[]>([]);
  const [active, setActive] = useState(0);

  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start 30%", "end 70%"],
  });
  const railScale = useSpring(scrollYProgress, {
    stiffness: 120,
    damping: 30,
    mass: 0.3,
  });

  useMotionValueEvent(scrollYProgress, "change", (v) => {
    const idx = Math.max(0, Math.min(steps.length - 1, Math.floor(v * steps.length)));
    setActive(idx);
  });

  function goTo(i: number) {
    panelRefs.current[i]?.scrollIntoView({
      behavior: reduced ? "auto" : "smooth",
      block: "center",
    });
  }

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <div
        ref={containerRef}
        className="mt-12 grid gap-8 lg:grid-cols-[18rem_1fr] lg:gap-12"
      >
        {/* sticky index (desktop) */}
        <div className="hidden lg:block">
          <div className="sticky top-24 self-start">
            <ol className="relative space-y-1">
              <span
                aria-hidden
                className="absolute bottom-3 left-6 top-3 w-px -translate-x-1/2 bg-border"
              />
              <motion.span
                aria-hidden
                style={{ scaleY: reduced ? 1 : railScale }}
                className="absolute bottom-3 left-6 top-3 w-px -translate-x-1/2 origin-top bg-gradient-to-b from-brand via-brand-2 to-brand-3"
              />
              {steps.map((step, i) => {
                const reached = i <= active;
                const current = i === active;
                return (
                  <li key={i}>
                    <button
                      type="button"
                      onClick={() => goTo(i)}
                      aria-current={current ? "step" : undefined}
                      className={cn(
                        "flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors",
                        current ? "bg-surface" : "hover:bg-surface",
                      )}
                    >
                      <span
                        className={cn(
                          "relative z-10 grid size-8 shrink-0 place-items-center rounded-full border text-xs font-semibold transition-colors",
                          reached
                            ? "border-brand bg-brand text-white"
                            : "border-border bg-surface text-muted",
                        )}
                      >
                        {i + 1}
                      </span>
                      <span
                        className={cn(
                          "text-sm font-medium transition-colors",
                          current ? "text-foreground" : "text-muted",
                        )}
                      >
                        {step.title}
                      </span>
                    </button>
                  </li>
                );
              })}
            </ol>
          </div>
        </div>

        {/* scrolling panels */}
        <ol className="space-y-6">
          {steps.map((step, i) => (
            <li
              key={i}
              ref={(el) => {
                panelRefs.current[i] = el;
              }}
              className={cn(
                "scroll-mt-24 rounded-2xl border bg-surface p-6 transition-colors sm:p-8",
                i === active ? "border-border-strong" : "border-border",
              )}
            >
              <div className="flex items-center gap-3">
                <span className="grid size-11 place-items-center rounded-xl border border-border bg-background text-brand-ink">
                  {step.icon ?? (
                    <span className="text-sm font-semibold">{i + 1}</span>
                  )}
                </span>
                <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
                  Step {String(i + 1).padStart(2, "0")}
                </span>
              </div>
              <h3 className="mt-4 text-xl font-semibold tracking-tight">
                {step.title}
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-muted">
                {step.description}
              </p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
```

### Steps Accordion
Expandable steps with a proper disclosure pattern; one open at a time.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-accordion.tsx

```tsx
"use client";

import { type ReactNode, useId, useState } from "react";
import { Copy, Download, Plus, Rocket, Wand2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AccordionStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsAccordionProps {
  eyebrow?: string;
  heading?: string;
  steps?: AccordionStep[];
  className?: string;
}

const DEFAULT_STEPS: AccordionStep[] = [
  {
    title: "Install",
    description:
      "Spin up a Next.js app and add Tailwind, motion, and lucide-react. Drop in the design tokens and the kit themes itself from a few CSS variables.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    description:
      "Open any component's Code tab and paste its real source into your project. There's no package to install — the code you read is the code you ship.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    description:
      "Adjust the CSS variables and props until the motion, color, and spacing match your brand. Every value is exposed and editable.",
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship it",
    description:
      "Each component is accessible and reduced-motion aware out of the box, so it's production-ready the moment you deploy.",
    icon: <Rocket className="size-5" />,
  },
];

/**
 * StepsAccordion — a sequence of expandable steps. One step is open at a time;
 * each header is a proper disclosure button (aria-expanded/aria-controls) and
 * the body expands via a grid-rows height transition, with the collapsed region
 * marked inert. The toggle glyph rotates from + to ×.
 */
export function StepsAccordion({
  eyebrow = "How it works",
  heading = "Open each step to dig in",
  steps = DEFAULT_STEPS,
  className,
}: StepsAccordionProps) {
  const baseId = useId();
  const [open, setOpen] = useState<number | null>(0);

  return (
    <section className={cn("mx-auto max-w-2xl", className)}>
      <div>
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol className="mt-10 space-y-3">
        {steps.map((step, i) => {
          const isOpen = i === open;
          const headerId = `${baseId}-h-${i}`;
          const panelId = `${baseId}-p-${i}`;
          return (
            <li
              key={i}
              className={cn(
                "overflow-hidden rounded-2xl border transition-colors",
                isOpen ? "border-border-strong bg-surface" : "border-border",
              )}
            >
              <h3>
                <button
                  id={headerId}
                  type="button"
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                  onClick={() => setOpen(isOpen ? null : i)}
                  className="flex w-full items-center gap-4 p-4 text-left"
                >
                  <span
                    className={cn(
                      "grid size-10 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
                      isOpen
                        ? "border-brand bg-brand text-white"
                        : "border-border bg-surface text-brand-ink",
                    )}
                  >
                    {step.icon ?? <span>{i + 1}</span>}
                  </span>
                  <span className="flex-1">
                    <span className="block text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-ink">
                      Step {String(i + 1).padStart(2, "0")}
                    </span>
                    <span className="block font-semibold">{step.title}</span>
                  </span>
                  <Plus
                    aria-hidden
                    className={cn(
                      "size-5 shrink-0 text-muted transition-transform duration-300",
                      isOpen && "rotate-45 text-brand-ink",
                    )}
                  />
                </button>
              </h3>
              <div
                id={panelId}
                role="region"
                aria-labelledby={headerId}
                inert={!isOpen}
                className="grid transition-[grid-template-rows] duration-300 ease-out"
                style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
              >
                <div className="overflow-hidden">
                  <p className="px-4 pb-5 pl-[4.5rem] text-sm leading-relaxed text-muted">
                    {step.description}
                  </p>
                </div>
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
}
```

### Steps Carousel
Guided one-at-a-time walkthrough with a progress bar, counter, and arrow keys.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-carousel.tsx

```tsx
"use client";

import { type KeyboardEvent, type ReactNode, useState } from "react";
import { ArrowLeft, ArrowRight, Copy, Download, Rocket, Wand2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CarouselStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsCarouselProps {
  eyebrow?: string;
  heading?: string;
  steps?: CarouselStep[];
  className?: string;
}

const DEFAULT_STEPS: CarouselStep[] = [
  {
    title: "Install",
    description:
      "Create a Next.js app and add Tailwind, motion, and lucide-react, then paste in the design tokens to theme the whole kit at once.",
    icon: <Download className="size-6" />,
  },
  {
    title: "Copy a component",
    description:
      "Open any component's Code tab and copy its real source straight into your project — no package, no lock-in.",
    icon: <Copy className="size-6" />,
  },
  {
    title: "Make it yours",
    description:
      "Tune the CSS variables and props until the motion, color, and spacing feel unmistakably like your brand.",
    icon: <Wand2 className="size-6" />,
  },
  {
    title: "Ship it",
    description:
      "Accessible and reduced-motion aware by default, so you can build, deploy, and trust it in production.",
    icon: <Rocket className="size-6" />,
  },
];

/**
 * StepsCarousel — a guided, one-at-a-time walkthrough. A translateX track moves
 * between steps with a top progress bar and an "01 / 04" counter; Prev/Next are
 * bounded (no looping) and the region supports arrow-key navigation.
 */
export function StepsCarousel({
  eyebrow = "Walkthrough",
  heading = "Step through it one at a time",
  steps = DEFAULT_STEPS,
  className,
}: StepsCarouselProps) {
  const [index, setIndex] = useState(0);
  const count = steps.length;
  const go = (i: number) => setIndex(Math.max(0, Math.min(count - 1, i)));

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key === "ArrowRight") {
      e.preventDefault();
      go(index + 1);
    } else if (e.key === "ArrowLeft") {
      e.preventDefault();
      go(index - 1);
    }
  };

  if (count === 0) return null;

  return (
    <section className={cn("mx-auto max-w-3xl", className)}>
      <div className="text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <div
        role="region"
        aria-roledescription="carousel"
        aria-label={heading}
        tabIndex={0}
        onKeyDown={onKeyDown}
        className="mt-10 overflow-hidden rounded-2xl border border-border bg-surface focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
      >
        <div className="h-1 w-full bg-surface-2">
          <div
            className="h-full bg-gradient-to-r from-brand to-brand-2 transition-[width] duration-500 ease-out"
            style={{ width: `${((index + 1) / count) * 100}%` }}
          />
        </div>

        <div
          className="flex transition-transform duration-500 ease-out"
          style={{ transform: `translateX(-${index * 100}%)` }}
        >
          {steps.map((step, i) => (
            <div
              key={i}
              role="group"
              aria-roledescription="slide"
              aria-label={`Step ${i + 1} of ${count}`}
              aria-hidden={i !== index}
              className="min-w-full p-6 sm:p-10"
            >
              <span className="grid size-12 place-items-center rounded-2xl border border-border bg-background text-brand-ink">
                {step.icon ?? <span className="text-lg font-semibold">{i + 1}</span>}
              </span>
              <span className="mt-5 block text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
                Step {String(i + 1).padStart(2, "0")}
              </span>
              <h3 className="mt-1 text-xl font-semibold tracking-tight sm:text-2xl">
                {step.title}
              </h3>
              <p className="mt-2 max-w-xl text-sm leading-relaxed text-muted">
                {step.description}
              </p>
            </div>
          ))}
        </div>

        <div className="flex items-center justify-between gap-4 border-t border-border p-4">
          <button
            type="button"
            onClick={() => go(index - 1)}
            disabled={index === 0}
            aria-label="Previous step"
            className="inline-flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-background disabled:pointer-events-none disabled:opacity-40"
          >
            <ArrowLeft className="size-4" />
            Prev
          </button>
          <span className="text-xs font-semibold tabular-nums tracking-[0.18em] text-muted">
            {String(index + 1).padStart(2, "0")} / {String(count).padStart(2, "0")}
          </span>
          <button
            type="button"
            onClick={() => go(index + 1)}
            disabled={index === count - 1}
            aria-label="Next step"
            className="inline-flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-background disabled:pointer-events-none disabled:opacity-40"
          >
            Next
            <ArrowRight className="size-4" />
          </button>
        </div>
      </div>
    </section>
  );
}
```

### Steps Editorial
Typography-forward sequence with oversized gradient numerals and hairline rules.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-editorial.tsx

```tsx
import { cn } from "@/lib/utils";

export interface EditorialStep {
  title: string;
  description: string;
}

export interface StepsEditorialProps {
  eyebrow?: string;
  heading?: string;
  steps?: EditorialStep[];
  className?: string;
}

const DEFAULT_STEPS: EditorialStep[] = [
  {
    title: "Install",
    description:
      "Spin up a Next.js app and add Tailwind, motion, and lucide-react. The design tokens slot straight into your globals.",
  },
  {
    title: "Copy a component",
    description:
      "Open any Code tab and paste the real source into your project. No package, no lock-in — just the code you can read.",
  },
  {
    title: "Make it yours",
    description:
      "Retune the tokens and props until the color, motion, and spacing feel unmistakably like your brand.",
  },
  {
    title: "Ship it",
    description:
      "Accessible and reduced-motion aware by default, so it's ready for production the moment you deploy.",
  },
];

/**
 * StepsEditorial — a typography-forward sequence. Oversized gradient numerals
 * and hairline dividers carry the rhythm; there are no cards or icons, just
 * confident type. Pure CSS, server-safe.
 */
export function StepsEditorial({
  eyebrow = "How it works",
  heading = "A few deliberate steps",
  steps = DEFAULT_STEPS,
  className,
}: StepsEditorialProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="max-w-2xl">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol className="mt-12">
        {steps.map((step, i) => (
          <li
            key={i}
            className="grid grid-cols-[auto_1fr] items-baseline gap-6 border-t border-border py-8 first:border-t-0 first:pt-0 sm:gap-10"
          >
            <span
              aria-hidden
              className="text-gradient text-5xl font-black leading-none tabular-nums sm:text-6xl"
            >
              {String(i + 1).padStart(2, "0")}
            </span>
            <div>
              <h3 className="text-lg font-semibold tracking-tight sm:text-xl">
                {step.title}
              </h3>
              <p className="mt-2 max-w-xl text-pretty leading-relaxed text-muted">
                {step.description}
              </p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}
```

### Steps Rings
Circular progress rings that sweep from empty to full as they scroll into view.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-rings.tsx

```tsx
"use client";

import { type ReactNode, useId, useRef } from "react";
import { Copy, Download, Rocket, Wand2 } from "lucide-react";
import { useInView } from "motion/react";
import { cn } from "@/lib/utils";

export interface RingStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsRingsProps {
  eyebrow?: string;
  heading?: string;
  steps?: RingStep[];
  className?: string;
}

const DEFAULT_STEPS: RingStep[] = [
  {
    title: "Install",
    description: "Add Tailwind, motion, and lucide, then drop in the tokens.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy a component",
    description: "Paste any component's source straight into your project.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Make it yours",
    description: "Retune the tokens and props to match your brand.",
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship it",
    description: "Build, deploy, and watch your interface come alive.",
    icon: <Rocket className="size-5" />,
  },
];

const SIZE = 76;
const STROKE = 4;
const RADIUS = (SIZE - STROKE) / 2;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

function RingNode({
  step,
  index,
  total,
  gradId,
}: {
  step: RingStep;
  index: number;
  total: number;
  gradId: string;
}) {
  const ref = useRef<HTMLLIElement>(null);
  const inView = useInView(ref, { once: true, amount: 0.6 });

  return (
    <li
      ref={ref}
      className="relative flex flex-col items-center gap-4 px-2 text-center"
    >
      {index < total - 1 && (
        <span
          aria-hidden
          className="absolute left-1/2 top-[38px] hidden h-px w-full -translate-y-1/2 bg-gradient-to-r from-brand/40 to-border lg:block"
        />
      )}
      <div
        className="relative z-10 grid place-items-center"
        style={{ width: SIZE, height: SIZE }}
      >
        <svg
          width={SIZE}
          height={SIZE}
          viewBox={`0 0 ${SIZE} ${SIZE}`}
          className="-rotate-90"
          aria-hidden
        >
          <defs>
            <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="var(--brand)" />
              <stop offset="100%" stopColor="var(--brand-2)" />
            </linearGradient>
          </defs>
          <circle
            cx={SIZE / 2}
            cy={SIZE / 2}
            r={RADIUS}
            fill="none"
            stroke="var(--border)"
            strokeWidth={STROKE}
          />
          <circle
            cx={SIZE / 2}
            cy={SIZE / 2}
            r={RADIUS}
            fill="none"
            stroke={`url(#${gradId})`}
            strokeWidth={STROKE}
            strokeLinecap="round"
            strokeDasharray={CIRCUMFERENCE}
            strokeDashoffset={inView ? 0 : CIRCUMFERENCE}
            style={{ transition: "stroke-dashoffset 1.1s ease-out" }}
          />
        </svg>
        <span className="absolute grid place-items-center text-brand-ink">
          {step.icon ?? <span className="text-sm font-semibold">{index + 1}</span>}
        </span>
      </div>
      <div>
        <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-ink">
          Step {String(index + 1).padStart(2, "0")}
        </span>
        <h3 className="mt-0.5 font-semibold">{step.title}</h3>
        <p className="mx-auto mt-1 max-w-[16rem] text-sm leading-relaxed text-muted">
          {step.description}
        </p>
      </div>
    </li>
  );
}

/**
 * StepsRings — a row of steps anchored by circular progress rings that sweep
 * from empty to full when they scroll into view (instant under reduced motion).
 * The rings fold into a single centered column on small screens.
 */
export function StepsRings({
  eyebrow = "How it works",
  heading = "A guided path, ring by ring",
  steps = DEFAULT_STEPS,
  className,
}: StepsRingsProps) {
  const baseId = useId();

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol className="relative mt-14 grid gap-y-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-6">
        {steps.map((step, i) => (
          <RingNode
            key={i}
            step={step}
            index={i}
            total={steps.length}
            gradId={`${baseId}-ring-${i}`}
          />
        ))}
      </ol>
    </section>
  );
}
```

### Steps Roadmap
Horizontal roadmap with milestone nodes and cards alternating above and below the axis.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-roadmap.tsx

```tsx
import { cn } from "@/lib/utils";

export interface RoadmapStep {
  /** Short phase label, e.g. "Step 01" or "Q1". */
  phase: string;
  title: string;
  description: string;
}

export interface StepsRoadmapProps {
  eyebrow?: string;
  heading?: string;
  steps?: RoadmapStep[];
  className?: string;
}

const DEFAULT_STEPS: RoadmapStep[] = [
  { phase: "Step 01", title: "Install", description: "Add Tailwind, motion, and lucide, then drop in the tokens." },
  { phase: "Step 02", title: "Copy a component", description: "Paste any component's source straight into your project." },
  { phase: "Step 03", title: "Make it yours", description: "Retune the tokens and props to match your brand." },
  { phase: "Step 04", title: "Ship it", description: "Build, deploy, and watch your interface come alive." },
];

function Card({ step }: { step: RoadmapStep }) {
  return (
    <div className="rounded-2xl border border-border bg-surface p-4 text-left transition-colors hover:border-border-strong">
      <span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-ink">
        {step.phase}
      </span>
      <h3 className="mt-1 font-semibold">{step.title}</h3>
      <p className="mt-1 text-sm leading-relaxed text-muted">{step.description}</p>
    </div>
  );
}

function Node({ n }: { n: number }) {
  return (
    <span className="grid size-9 place-items-center rounded-full border border-brand bg-background text-xs font-semibold text-brand-ink">
      {n}
    </span>
  );
}

/**
 * StepsRoadmap — a horizontal roadmap. On desktop, milestone nodes ride a
 * central axis with cards alternating above and below; on mobile it folds into
 * a vertical rail. Pure CSS, server-safe.
 */
export function StepsRoadmap({
  eyebrow = "The roadmap",
  heading = "From install to launch",
  steps = DEFAULT_STEPS,
  className,
}: StepsRoadmapProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      {/* desktop: horizontal axis with alternating cards */}
      <ol className="relative mt-16 hidden min-h-[24rem] md:flex">
        <span
          aria-hidden
          className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gradient-to-r from-brand/40 via-border to-border"
        />
        {steps.map((step, i) => {
          const up = i % 2 === 0;
          return (
            <li key={i} className="relative flex-1">
              <div
                className={cn(
                  "absolute inset-x-0 px-3",
                  up ? "bottom-1/2 mb-7" : "top-1/2 mt-7",
                )}
              >
                <Card step={step} />
              </div>
              <span
                aria-hidden
                className={cn(
                  "absolute left-1/2 h-7 w-px -translate-x-1/2 bg-border",
                  up ? "bottom-1/2" : "top-1/2",
                )}
              />
              <span className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2">
                <Node n={i + 1} />
              </span>
            </li>
          );
        })}
      </ol>

      {/* mobile: vertical rail */}
      <ol className="mt-10 md:hidden">
        {steps.map((step, i) => {
          const isLast = i === steps.length - 1;
          return (
            <li key={i} className="flex gap-4">
              <div className="flex flex-col items-center">
                <Node n={i + 1} />
                {!isLast && (
                  <span aria-hidden className="my-1 w-px flex-1 bg-border" />
                )}
              </div>
              <div className={cn("pb-6", isLast && "pb-0")}>
                <Card step={step} />
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
}
```

### Steps Checklist
Interactive getting-started checklist with toggleable items and a live progress meter.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-checklist.tsx

```tsx
"use client";

import { type ReactNode, useState } from "react";
import { Check, Copy, Download, Rocket, Wand2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ChecklistStep {
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface StepsChecklistProps {
  eyebrow?: string;
  heading?: string;
  steps?: ChecklistStep[];
  className?: string;
}

const DEFAULT_STEPS: ChecklistStep[] = [
  {
    title: "Install the toolkit",
    description: "Add Tailwind, motion, and lucide-react, then drop in the tokens.",
    icon: <Download className="size-5" />,
  },
  {
    title: "Copy your first component",
    description: "Grab any component's source from the Code tab and paste it in.",
    icon: <Copy className="size-5" />,
  },
  {
    title: "Theme it to your brand",
    description: "Tune the CSS variables until the color and motion feel right.",
    icon: <Wand2 className="size-5" />,
  },
  {
    title: "Ship to production",
    description: "Build and deploy — it's accessible and reduced-motion aware.",
    icon: <Rocket className="size-5" />,
  },
];

/**
 * StepsChecklist — an interactive getting-started checklist. Each row is a
 * toggleable checkbox (role=checkbox, keyboard-operable) and a live meter
 * tracks how many steps are complete.
 */
export function StepsChecklist({
  eyebrow = "Getting started",
  heading = "Check off your first launch",
  steps = DEFAULT_STEPS,
  className,
}: StepsChecklistProps) {
  const [done, setDone] = useState<boolean[]>(() => steps.map(() => false));
  const completed = done.filter(Boolean).length;
  const pct = steps.length ? Math.round((completed / steps.length) * 100) : 0;
  const allDone = completed === steps.length && steps.length > 0;

  const toggle = (i: number) =>
    setDone((prev) => prev.map((v, j) => (j === i ? !v : v)));

  return (
    <section className={cn("mx-auto max-w-2xl", className)}>
      <div>
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <div className="mt-8 flex items-center gap-4">
        <div
          className="h-2 flex-1 overflow-hidden rounded-full bg-surface-2"
          role="progressbar"
          aria-valuemin={0}
          aria-valuemax={steps.length}
          aria-valuenow={completed}
          aria-label="Steps completed"
        >
          <div
            className="h-full rounded-full bg-gradient-to-r from-brand to-brand-2 transition-[width] duration-500 ease-out"
            style={{ width: `${pct}%` }}
          />
        </div>
        <span className="shrink-0 text-sm font-medium tabular-nums text-muted">
          {allDone ? "All done 🎉" : `${completed} of ${steps.length}`}
        </span>
      </div>

      <ul className="mt-6 space-y-3">
        {steps.map((step, i) => {
          const checked = done[i];
          return (
            <li key={i}>
              <button
                type="button"
                role="checkbox"
                aria-checked={checked}
                onClick={() => toggle(i)}
                className={cn(
                  "flex w-full items-start gap-4 rounded-2xl border p-4 text-left transition-colors",
                  checked
                    ? "border-brand/40 bg-surface"
                    : "border-border hover:bg-surface",
                )}
              >
                <span
                  className={cn(
                    "mt-0.5 grid size-6 shrink-0 place-items-center rounded-md border transition-colors",
                    checked
                      ? "border-brand bg-brand text-white"
                      : "border-border-strong text-transparent",
                  )}
                >
                  <Check className="size-4" />
                </span>
                <span className="flex-1">
                  <span
                    className={cn(
                      "block font-semibold transition-colors",
                      checked && "text-muted line-through",
                    )}
                  >
                    {step.title}
                  </span>
                  <span className="mt-0.5 block text-sm text-muted">
                    {step.description}
                  </span>
                </span>
                {step.icon && (
                  <span className="mt-0.5 shrink-0 text-muted-2">{step.icon}</span>
                )}
              </button>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
```

### Steps Grid
Two-column matrix of steps with gradient numerals and hairline dividers.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-grid.tsx

```tsx
import { cn } from "@/lib/utils";

export interface GridStep {
  title: string;
  description: string;
}

export interface StepsGridProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  steps?: GridStep[];
  className?: string;
}

const DEFAULT_STEPS: GridStep[] = [
  {
    title: "Install",
    description:
      "Spin up a Next.js app and add Tailwind, motion, and lucide-react, then drop in the design tokens.",
  },
  {
    title: "Copy a component",
    description:
      "Open any Code tab and paste the real source into your project — no package, no lock-in.",
  },
  {
    title: "Make it yours",
    description:
      "Retune the tokens and props until the color, motion, and spacing match your brand.",
  },
  {
    title: "Ship it",
    description:
      "Accessible and reduced-motion aware by default, so it's ready the moment you deploy.",
  },
];

/**
 * StepsGrid — a two-column matrix of steps separated by hairline dividers, each
 * cell led by an oversized gradient numeral. Pure CSS, server-safe; the cells
 * lift subtly on hover.
 */
export function StepsGrid({
  eyebrow = "How it works",
  heading = "A clear, four-part workflow",
  subheading = "Each step stands on its own — start anywhere, finish in order.",
  steps = DEFAULT_STEPS,
  className,
}: StepsGridProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        {subheading && <p className="mt-3 text-muted">{subheading}</p>}
      </div>

      <ol className="mt-12 grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2">
        {steps.map((step, i) => (
          <li
            key={i}
            className="group relative bg-surface p-6 transition-colors hover:bg-background sm:p-8"
          >
            <span
              aria-hidden
              className="text-gradient text-4xl font-black leading-none tabular-nums sm:text-5xl"
            >
              {String(i + 1).padStart(2, "0")}
            </span>
            <h3 className="mt-4 text-base font-semibold">{step.title}</h3>
            <p className="mt-1.5 text-sm leading-relaxed text-muted">
              {step.description}
            </p>
          </li>
        ))}
        {steps.length % 2 === 1 && (
          <li aria-hidden className="hidden bg-surface sm:block" />
        )}
      </ol>
    </section>
  );
}
```

### Steps Wizard
Guided Back/Continue flow with a numbered stepper and completion checks.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-wizard.tsx

```tsx
"use client";

import { useState } from "react";
import { ArrowLeft, ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface WizardStep {
  title: string;
  description: string;
}

export interface StepsWizardProps {
  eyebrow?: string;
  heading?: string;
  steps?: WizardStep[];
  className?: string;
}

const DEFAULT_STEPS: WizardStep[] = [
  {
    title: "Install",
    description:
      "Create a Next.js app and add Tailwind, motion, and lucide-react, then drop in the design tokens so the whole kit themes itself.",
  },
  {
    title: "Copy a component",
    description:
      "Open any component's Code tab and paste its real source into your project. No package to install, nothing to lock you in.",
  },
  {
    title: "Make it yours",
    description:
      "Tune the CSS variables and props until the motion, color, and spacing match your brand exactly.",
  },
  {
    title: "Ship it",
    description:
      "Everything is accessible and reduced-motion aware out of the box, so you can deploy with confidence.",
  },
];

/**
 * StepsWizard — a guided, linear flow. A numbered stepper tracks progress
 * (completed steps show a check), nodes are clickable, and Back/Continue move
 * through the steps, marking each complete as you advance.
 */
export function StepsWizard({
  eyebrow = "Setup wizard",
  heading = "Get set up, step by step",
  steps = DEFAULT_STEPS,
  className,
}: StepsWizardProps) {
  const [current, setCurrent] = useState(0);
  const [done, setDone] = useState<boolean[]>(() => steps.map(() => false));
  const last = steps.length - 1;
  const allDone = done.every(Boolean);

  const markAndAdvance = () => {
    setDone((prev) => prev.map((v, i) => (i === current ? true : v)));
    if (current < last) setCurrent(current + 1);
  };

  return (
    <section className={cn("mx-auto max-w-2xl", className)}>
      <div>
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      {/* stepper */}
      <ol className="relative mt-10 flex items-center justify-between px-4">
        <span
          aria-hidden
          className="absolute inset-x-4 top-4 h-px -translate-y-1/2 bg-border"
        />
        {steps.map((step, i) => {
          const isDone = done[i];
          const isCurrent = i === current;
          return (
            <li key={i} className="relative z-10">
              <button
                type="button"
                onClick={() => setCurrent(i)}
                aria-current={isCurrent ? "step" : undefined}
                aria-label={`Step ${i + 1}: ${step.title}`}
                className="group flex flex-col items-center gap-2"
              >
                <span
                  className={cn(
                    "grid size-8 place-items-center rounded-full border text-xs font-semibold transition-colors",
                    isDone && "border-brand bg-brand text-white",
                    isCurrent &&
                      !isDone &&
                      "border-brand bg-background text-brand-ink ring-4 ring-[var(--ring)]",
                    !isDone &&
                      !isCurrent &&
                      "border-border bg-surface text-muted group-hover:border-border-strong",
                  )}
                >
                  {isDone ? <Check className="size-4" /> : i + 1}
                </span>
                <span
                  className={cn(
                    "hidden text-xs font-medium sm:block",
                    isCurrent ? "text-foreground" : "text-muted",
                  )}
                >
                  {step.title}
                </span>
              </button>
            </li>
          );
        })}
      </ol>

      {/* panel */}
      <div className="mt-8 rounded-2xl border border-border bg-surface p-6 sm:p-8">
        <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
          Step {String(current + 1).padStart(2, "0")} of {String(steps.length).padStart(2, "0")}
        </span>
        <h3 className="mt-2 text-xl font-semibold tracking-tight">
          {steps[current].title}
        </h3>
        <p className="mt-2 text-sm leading-relaxed text-muted">
          {steps[current].description}
        </p>

        <div className="mt-6 flex items-center justify-between gap-4">
          <button
            type="button"
            onClick={() => setCurrent(Math.max(0, current - 1))}
            disabled={current === 0}
            className="inline-flex items-center gap-1.5 rounded-full border border-border px-4 py-2 text-sm font-medium transition-colors hover:bg-background disabled:pointer-events-none disabled:opacity-40"
          >
            <ArrowLeft className="size-4" />
            Back
          </button>

          {allDone ? (
            <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-brand-ink">
              <Check className="size-4" />
              All steps complete
            </span>
          ) : (
            <button
              type="button"
              onClick={markAndAdvance}
              className="inline-flex items-center gap-1.5 rounded-full bg-brand px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
            >
              {current === last ? "Finish" : "Continue"}
              <ArrowRight className="size-4" />
            </button>
          )}
        </div>
      </div>
    </section>
  );
}
```

### Steps Flow
Compact process diagram of arrow-connected chips resolving into an outcome.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-flow.tsx

```tsx
import { Fragment, type ReactNode } from "react";
import { ArrowDown, ArrowRight, Rocket } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FlowStep {
  title: string;
}

export interface FlowOutcome {
  label: string;
  icon?: ReactNode;
}

export interface StepsFlowProps {
  eyebrow?: string;
  heading?: string;
  steps?: FlowStep[];
  outcome?: FlowOutcome;
  className?: string;
}

const DEFAULT_STEPS: FlowStep[] = [
  { title: "Install" },
  { title: "Copy a component" },
  { title: "Make it yours" },
];

const DEFAULT_OUTCOME: FlowOutcome = {
  label: "Shipped",
  icon: <Rocket className="size-4" />,
};

/**
 * StepsFlow — a compact process diagram. Numbered chips connect left to right
 * with arrows and resolve into a highlighted outcome node; the flow stacks
 * vertically (with down-arrows) on small screens. Pure CSS, server-safe.
 */
export function StepsFlow({
  eyebrow = "The flow",
  heading = "A simple path to launch",
  steps = DEFAULT_STEPS,
  outcome = DEFAULT_OUTCOME,
  className,
}: StepsFlowProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol className="mt-12 flex flex-col items-stretch justify-center gap-3 lg:flex-row lg:items-center">
        {steps.map((step, i) => (
          <Fragment key={i}>
            <li className="flex flex-1 items-center gap-3 rounded-2xl border border-border bg-surface px-5 py-4 transition-colors hover:border-border-strong lg:flex-col lg:gap-2 lg:px-6 lg:text-center">
              <span className="grid size-8 shrink-0 place-items-center rounded-full border border-border bg-background text-xs font-semibold text-brand-ink">
                {i + 1}
              </span>
              <span className="font-semibold">{step.title}</span>
            </li>
            <li aria-hidden className="flex shrink-0 items-center justify-center text-muted-2">
              <ArrowRight className="hidden size-5 shrink-0 lg:block" />
              <ArrowDown className="size-5 shrink-0 lg:hidden" />
            </li>
          </Fragment>
        ))}
        <li className="flex flex-1 items-center gap-3 rounded-2xl border border-brand/50 bg-brand/10 px-5 py-4 shadow-[0_0_40px_-18px_var(--brand)] lg:flex-col lg:gap-2 lg:px-6 lg:text-center">
          <span className="grid size-8 shrink-0 place-items-center rounded-full bg-brand text-white">
            {outcome.icon}
          </span>
          <span className="font-semibold text-brand-ink">{outcome.label}</span>
        </li>
      </ol>
    </section>
  );
}
```

### Steps Code
Developer quickstart pairing each step with a copyable terminal snippet.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-code.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { Check, Copy, Terminal } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CodeStep {
  title: string;
  description: string;
  code: string;
}

export interface StepsCodeProps {
  eyebrow?: string;
  heading?: string;
  steps?: CodeStep[];
  className?: string;
}

const DEFAULT_STEPS: CodeStep[] = [
  {
    title: "Create your app",
    description: "Scaffold a fresh Next.js project to build on.",
    code: "npx create-next-app@latest my-app",
  },
  {
    title: "Add the dependencies",
    description: "Pull in motion and lucide-react alongside Tailwind.",
    code: "npm install motion lucide-react",
  },
  {
    title: "Drop in a component",
    description: "Copy any component's source, then import it where you need it.",
    code: 'import { StepsCode } from "@/components/blocks/steps-code";',
  },
  {
    title: "Run it",
    description: "Start the dev server and see it live.",
    code: "npm run dev",
  },
];

function CodeSnippet({ code }: { code: string }) {
  const [copied, setCopied] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    [],
  );

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      if (timer.current) clearTimeout(timer.current);
      timer.current = setTimeout(() => setCopied(false), 1500);
    } catch {
      setCopied(false);
    }
  };

  return (
    <div className="mt-3 overflow-hidden rounded-xl border border-border bg-background">
      <div className="flex items-center justify-between border-b border-border px-3 py-2">
        <span className="flex items-center gap-1.5 text-xs text-muted">
          <Terminal className="size-3.5" />
          terminal
        </span>
        <button
          type="button"
          onClick={copy}
          aria-label={copied ? "Copied to clipboard" : "Copy code"}
          className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface hover:text-foreground"
        >
          {copied ? (
            <Check className="size-3.5 text-brand-2" />
          ) : (
            <Copy className="size-3.5" />
          )}
          {copied ? "Copied" : "Copy"}
        </button>
      </div>
      <pre className="overflow-x-auto p-3 text-sm">
        <code className="font-mono text-foreground/90">{code}</code>
      </pre>
    </div>
  );
}

/**
 * StepsCode — a developer quickstart. Each step pairs a short instruction with
 * a terminal-style snippet and a copy button (with copied feedback), threaded
 * along a gradient rail.
 */
export function StepsCode({
  eyebrow = "Quickstart",
  heading = "Up and running in four commands",
  steps = DEFAULT_STEPS,
  className,
}: StepsCodeProps) {
  return (
    <section className={cn("mx-auto max-w-2xl", className)}>
      <div>
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <ol className="mt-12">
        {steps.map((step, i) => {
          const isLast = i === steps.length - 1;
          return (
            <li key={i} className="flex gap-5">
              <div className="flex flex-col items-center">
                <span className="grid size-10 shrink-0 place-items-center rounded-full border border-border bg-surface text-sm font-semibold text-brand-ink">
                  {i + 1}
                </span>
                {!isLast && (
                  <span
                    aria-hidden
                    className="my-2 w-px flex-1 bg-gradient-to-b from-brand/50 via-border to-border"
                  />
                )}
              </div>
              <div className={cn("min-w-0 flex-1", isLast ? "pb-0" : "pb-8")}>
                <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
                  Step {String(i + 1).padStart(2, "0")}
                </span>
                <h3 className="mt-1 text-base font-semibold">{step.title}</h3>
                <p className="mt-1 text-sm leading-relaxed text-muted">
                  {step.description}
                </p>
                <CodeSnippet code={step.code} />
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
}
```

### Steps Tabs
Horizontal tablist of steps with a sliding indicator and content panels.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/steps-tabs.tsx

```tsx
"use client";

import { type KeyboardEvent, useId, useState } from "react";
import { ArrowRight } from "lucide-react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface TabStep {
  title: string;
  description: string;
  points?: string[];
}

export interface StepsTabsProps {
  eyebrow?: string;
  heading?: string;
  steps?: TabStep[];
  className?: string;
}

const DEFAULT_STEPS: TabStep[] = [
  {
    title: "Install",
    description:
      "Create a Next.js app and add Tailwind, motion, and lucide-react, then drop in the design tokens.",
    points: ["Create a Next.js app", "Add the Tailwind v4 tokens", "Install motion + lucide"],
  },
  {
    title: "Copy a component",
    description:
      "Open any component's Code tab and paste its real source into your project — no package, no lock-in.",
    points: ["Open the Code tab", "Copy the full source", "Paste it into your app"],
  },
  {
    title: "Make it yours",
    description:
      "Tune the CSS variables and props until the motion, color, and spacing match your brand.",
    points: ["Restyle via tokens", "Tweak props and timing", "Compose into blocks"],
  },
  {
    title: "Ship it",
    description:
      "Accessible and reduced-motion aware by default, so it's ready for production the moment you deploy.",
    points: ["Accessible by default", "Reduced-motion safe", "Deploy anywhere"],
  },
];

/**
 * StepsTabs — a horizontal tablist of steps with a sliding underline indicator
 * (shared via motion's layoutId) and a content panel below. Full tablist
 * keyboard support: arrow keys, Home/End, and roving tabindex.
 */
export function StepsTabs({
  eyebrow = "How it works",
  heading = "Pick a step to explore",
  steps = DEFAULT_STEPS,
  className,
}: StepsTabsProps) {
  const baseId = useId();
  const [active, setActive] = useState(0);

  const focusTab = (i: number) => {
    setActive(i);
    document.getElementById(`${baseId}-tab-${i}`)?.focus();
  };

  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
    const last = steps.length - 1;
    switch (e.key) {
      case "ArrowRight":
        e.preventDefault();
        focusTab(active === last ? 0 : active + 1);
        break;
      case "ArrowLeft":
        e.preventDefault();
        focusTab(active === 0 ? last : active - 1);
        break;
      case "Home":
        e.preventDefault();
        focusTab(0);
        break;
      case "End":
        e.preventDefault();
        focusTab(last);
        break;
    }
  };

  return (
    <section className={cn("mx-auto max-w-3xl", className)}>
      <div className="text-center">
        {eyebrow && (
          <span className="text-xs font-semibold uppercase tracking-[0.18em] text-brand-ink">
            {eyebrow}
          </span>
        )}
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
      </div>

      <div
        role="tablist"
        aria-label={heading}
        className="mt-10 flex gap-1 overflow-x-auto border-b border-border [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
      >
        {steps.map((step, i) => {
          const selected = i === active;
          return (
            <button
              key={i}
              id={`${baseId}-tab-${i}`}
              role="tab"
              type="button"
              aria-selected={selected}
              aria-controls={`${baseId}-panel-${i}`}
              tabIndex={selected ? 0 : -1}
              onClick={() => setActive(i)}
              onKeyDown={onKeyDown}
              className={cn(
                "relative flex shrink-0 items-center gap-2 px-4 py-3 text-sm font-medium transition-colors",
                selected ? "text-foreground" : "text-muted hover:text-foreground",
              )}
            >
              <span
                className={cn(
                  "grid size-6 place-items-center rounded-full border text-xs font-semibold transition-colors",
                  selected
                    ? "border-brand bg-brand text-white"
                    : "border-border bg-surface",
                )}
              >
                {i + 1}
              </span>
              {step.title}
              {selected && (
                <motion.span
                  layoutId={`${baseId}-indicator`}
                  className="absolute inset-x-2 -bottom-px h-0.5 rounded-full bg-brand"
                  transition={{ type: "spring", stiffness: 380, damping: 30 }}
                />
              )}
            </button>
          );
        })}
      </div>

      {steps.map((step, i) => (
        <div
          key={i}
          id={`${baseId}-panel-${i}`}
          role="tabpanel"
          aria-labelledby={`${baseId}-tab-${i}`}
          hidden={i !== active}
          tabIndex={0}
          className="rounded-b-2xl border border-t-0 border-border bg-surface p-6 sm:p-8"
        >
          <h3 className="text-xl font-semibold tracking-tight">{step.title}</h3>
          <p className="mt-2 text-sm leading-relaxed text-muted">
            {step.description}
          </p>
          {step.points && step.points.length > 0 && (
            <ul className="mt-4 grid gap-2 sm:grid-cols-3">
              {step.points.map((point, j) => (
                <li
                  key={j}
                  className="flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm"
                >
                  <ArrowRight className="size-4 shrink-0 text-brand-2" />
                  <span className="text-foreground/90">{point}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </section>
  );
}
```

### Stats Band
Headline metrics that count up on view.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/stats-band.tsx

```tsx
import { CountUp } from "@/components/text/count-up";
import { cn } from "@/lib/utils";

export interface Stat {
  value: number;
  /** Text appended after the number, e.g. "k+", "%". */
  suffix?: string;
  prefix?: string;
  decimals?: number;
  label: string;
}

export interface StatsBandProps {
  stats?: Stat[];
  className?: string;
}

const DEFAULT_STATS: Stat[] = [
  { value: 48, suffix: "+", label: "Components" },
  { value: 99.9, suffix: "%", decimals: 1, label: "Uptime" },
  { value: 12, suffix: "k", label: "Developers" },
  { value: 60, suffix: "fps", label: "Buttery smooth" },
];

/**
 * StatsBand — a band of headline metrics that count up the first time they
 * scroll into view.
 */
export function StatsBand({ stats = DEFAULT_STATS, className }: StatsBandProps) {
  return (
    <div
      className={cn(
        "grid grid-cols-2 gap-4 rounded-2xl border border-border bg-surface p-8 sm:grid-cols-4",
        className,
      )}
    >
      {stats.map((stat, i) => (
        <div key={i} className="text-center">
          <div className="text-3xl font-semibold tracking-tight sm:text-4xl">
            <CountUp
              to={stat.value}
              prefix={stat.prefix}
              suffix={stat.suffix}
              decimals={stat.decimals}
            />
          </div>
          <div className="mt-1 text-sm text-muted">{stat.label}</div>
        </div>
      ))}
    </div>
  );
}
```

### Pricing
Three comparable tiers with a highlighted plan.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing.tsx

```tsx
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingPlan {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingProps {
  plans?: PricingPlan[];
  className?: string;
}

const DEFAULT_PLANS: PricingPlan[] = [
  {
    name: "Starter",
    price: "$0",
    period: "/mo",
    description: "For side projects and experiments.",
    features: ["12 components", "Community support", "MIT license"],
    cta: "Start free",
  },
  {
    name: "Pro",
    price: "$19",
    period: "/mo",
    description: "For teams shipping real products.",
    features: [
      "All components",
      "Section blocks",
      "Priority updates",
      "Figma tokens",
    ],
    cta: "Go Pro",
    popular: true,
  },
  {
    name: "Studio",
    price: "$49",
    period: "/mo",
    description: "For agencies and design systems.",
    features: ["Everything in Pro", "Source figma", "Custom theming", "Email support"],
    cta: "Contact sales",
  },
];

/**
 * Pricing — three comparable tiers with the recommended plan elevated by a
 * brand ring and badge.
 */
export function Pricing({ plans = DEFAULT_PLANS, className }: PricingProps) {
  return (
    <div
      className={cn(
        "grid grid-cols-1 items-stretch gap-4 pt-3 md:grid-cols-3",
        className,
      )}
    >
      {plans.map((plan, i) => (
        <div
          key={i}
          className={cn(
            "relative flex h-full flex-col rounded-2xl border bg-surface p-6",
            plan.popular
              ? "border-brand/60 shadow-[0_0_60px_-20px_var(--brand)]"
              : "border-border",
          )}
        >
          {plan.popular && (
            <span className="absolute -top-3 left-6 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white">
              Most popular
            </span>
          )}
          <h3 className="text-lg font-semibold">{plan.name}</h3>
          <p className="mt-1 text-sm text-muted">{plan.description}</p>
          <div className="mt-5 flex items-baseline gap-1">
            <span className="text-4xl font-semibold tracking-tight">
              {plan.price}
            </span>
            {plan.period && (
              <span className="text-sm text-muted">{plan.period}</span>
            )}
          </div>
          <ul className="mt-6 flex-1 space-y-3 text-sm">
            {plan.features.map((feature, j) => (
              <li key={j} className="flex items-center gap-2">
                <Check className="size-4 shrink-0 text-brand-2" />
                <span className="text-foreground/90">{feature}</span>
              </li>
            ))}
          </ul>
          <button
            className={cn(
              "mt-8 w-full rounded-full px-5 py-3 text-sm font-semibold transition-colors",
              plan.popular
                ? "bg-brand text-white hover:bg-brand/90"
                : "border border-border text-foreground hover:bg-background",
            )}
          >
            {plan.cta ?? "Choose plan"}
          </button>
        </div>
      ))}
    </div>
  );
}
```

### Pricing — Billing Toggle
Three tiers with a Monthly/Annual switch; prices tween between periods.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-toggle.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { Check, Sparkles } from "lucide-react";
import { SegmentedControl } from "@/components/ui/segmented-control";
import { cn, prefersReducedMotion } from "@/lib/utils";

type Period = "Monthly" | "Annual";

export interface TogglePlan {
  name: string;
  description: string;
  /** Price per month when billed monthly. */
  monthly: number;
  /** Price per month when billed annually. */
  yearly: number;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingToggleProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  plans?: TogglePlan[];
  /** Currency symbol prefixed to every amount. */
  currency?: string;
  className?: string;
}

const DEFAULT_PLANS: TogglePlan[] = [
  {
    name: "Starter",
    description: "Everything you need to launch your first idea.",
    monthly: 0,
    yearly: 0,
    features: [
      "Up to 3 projects",
      "Community support",
      "1 GB asset storage",
      "Basic analytics",
    ],
    cta: "Start for free",
  },
  {
    name: "Pro",
    description: "For teams that ship on a weekly cadence.",
    monthly: 24,
    yearly: 19,
    features: [
      "Unlimited projects",
      "Priority support",
      "50 GB asset storage",
      "Advanced analytics",
      "Custom domains",
    ],
    cta: "Start free trial",
    popular: true,
  },
  {
    name: "Scale",
    description: "Security and controls for larger organizations.",
    monthly: 64,
    yearly: 52,
    features: [
      "Everything in Pro",
      "SSO & SAML",
      "Unlimited storage",
      "Audit logs",
      "Dedicated manager",
    ],
    cta: "Contact sales",
  },
];

/** Eases the displayed amount toward `value` whenever it changes. */
function AnimatedAmount({
  value,
  currency,
}: {
  value: number;
  currency: string;
}) {
  const [display, setDisplay] = useState(value);
  const displayRef = useRef(value);
  const raf = useRef(0);

  useEffect(() => {
    const from = displayRef.current;
    const to = value;
    if (from === to) return;
    // Tween toward the new value; jump instantly (one frame) under reduced
    // motion. All setState happens inside rAF, never synchronously in-effect.
    const duration = prefersReducedMotion() ? 0 : 480;
    const start = performance.now();
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      displayRef.current = from + (to - from) * eased;
      setDisplay(displayRef.current);
      if (p < 1) raf.current = requestAnimationFrame(tick);
      else displayRef.current = to;
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [value]);

  return (
    <span className="tabular-nums">
      {currency}
      {Math.round(display).toLocaleString("en-US")}
    </span>
  );
}

/**
 * PricingToggle — three tiers with a Monthly/Annual switch. Prices tween when
 * the billing period changes (instant under reduced-motion), and the
 * recommended tier is elevated with a gradient ring and glow.
 */
export function PricingToggle({
  eyebrow = "Pricing",
  heading = "Simple, transparent pricing",
  subheading = "Start free, then scale as your team grows. Switch or cancel anytime.",
  plans = DEFAULT_PLANS,
  currency = "$",
  className,
}: PricingToggleProps) {
  const [period, setPeriod] = useState<Period>("Monthly");
  const annual = period === "Annual";

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
        <SegmentedControl
          options={["Monthly", "Annual"]}
          value={period}
          onValueChange={(v) => setPeriod(v as Period)}
        />
        <span className="inline-flex items-center gap-1 rounded-full border border-brand/30 bg-brand/10 px-3 py-1 text-xs font-medium text-brand-ink">
          <Sparkles className="size-3.5" />
          Save up to 20% yearly
        </span>
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 lg:grid-cols-3">
        {plans.map((plan) => {
          const price = annual ? plan.yearly : plan.monthly;
          const free = price === 0;
          return (
            <div
              key={plan.name}
            className={cn(
                "relative h-full rounded-3xl p-px",
                plan.popular
                  ? "bg-gradient-to-b from-brand via-brand-2/50 to-border shadow-[0_30px_80px_-50px_var(--brand)]"
                  : "bg-border",
              )}
            >
              {plan.popular && (
                <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
                  <Sparkles className="size-3.5" />
                  Most popular
                </span>
              )}
              <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-7">
                <h3 className="text-base font-semibold">{plan.name}</h3>
                <p className="mt-1 text-sm text-muted">{plan.description}</p>

                <div className="mt-6 flex items-baseline gap-1">
                  {free ? (
                    <span className="text-4xl font-semibold tracking-tight">
                      Free
                    </span>
                  ) : (
                    <>
                      <span className="text-4xl font-semibold tracking-tight">
                        <AnimatedAmount value={price} currency={currency} />
                      </span>
                      <span className="text-sm text-muted">/mo</span>
                    </>
                  )}
                </div>
                <p className="mt-1 h-5 text-xs text-muted-2">
                  {free
                    ? "Free forever"
                    : annual
                      ? `${currency}${(plan.yearly * 12).toLocaleString("en-US")} billed yearly`
                      : "Billed monthly"}
                </p>

                <button
                  type="button"
                  className={cn(
                    "mt-6 w-full rounded-full px-5 py-3 text-sm font-semibold transition-colors",
                    plan.popular
                      ? "bg-brand text-white hover:bg-brand/90"
                      : "border border-border-strong text-foreground hover:bg-surface-2",
                  )}
                >
                  {plan.cta ?? "Choose plan"}
                </button>

                <ul className="mt-7 space-y-3 text-sm">
                  {plan.features.map((feature) => (
                    <li key={feature} className="flex items-start gap-2.5">
                      <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                      <span className="text-foreground/90">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
```

### Pricing — Usage Calculator
Pay-as-you-grow calculator: drag the slider to price your team by seats.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-slider.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { ArrowRight, Check } from "lucide-react";
import { Slider } from "@/components/ui/slider";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface PricingSliderProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  minSeats?: number;
  maxSeats?: number;
  defaultSeats?: number;
  /** What every seat includes, shown as a checklist. */
  features?: string[];
  currency?: string;
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_FEATURES = [
  "Unlimited projects",
  "Role-based access",
  "Advanced analytics",
  "SSO & SAML",
  "Priority support",
  "99.9% uptime SLA",
];

/** Marginal price per seat — cheaper as the team grows. */
function rateForSeats(seats: number) {
  if (seats <= 5) return 12;
  if (seats <= 20) return 9;
  return 7;
}

/** Eases the displayed amount toward `value` whenever it changes. */
function AnimatedAmount({
  value,
  currency,
}: {
  value: number;
  currency: string;
}) {
  const [display, setDisplay] = useState(value);
  const displayRef = useRef(value);
  const raf = useRef(0);

  useEffect(() => {
    const from = displayRef.current;
    const to = value;
    if (from === to) return;
    // Tween toward the new value; jump instantly (one frame) under reduced
    // motion. All setState happens inside rAF, never synchronously in-effect.
    const duration = prefersReducedMotion() ? 0 : 320;
    const start = performance.now();
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      displayRef.current = from + (to - from) * eased;
      setDisplay(displayRef.current);
      if (p < 1) raf.current = requestAnimationFrame(tick);
      else displayRef.current = to;
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [value]);

  return (
    <span className="tabular-nums">
      {currency}
      {Math.round(display).toLocaleString("en-US")}
    </span>
  );
}

/**
 * PricingSlider — a pay-as-you-grow calculator. Drag the slider to set seats;
 * the per-seat rate drops at volume tiers and the total eases to its value.
 */
export function PricingSlider({
  eyebrow = "Usage-based",
  heading = "Pricing that scales with your team",
  subheading = "Only pay for the seats you use. Volume discounts apply automatically.",
  minSeats = 1,
  maxSeats = 50,
  defaultSeats = 8,
  features = DEFAULT_FEATURES,
  currency = "$",
  ctaLabel = "Start 14-day trial",
  className,
}: PricingSliderProps) {
  const [seats, setSeats] = useState(defaultSeats);
  const rate = rateForSeats(seats);
  const total = seats * rate;

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mx-auto mt-10 max-w-3xl overflow-hidden rounded-3xl border border-border bg-surface">
        <div className="grid gap-8 p-7 sm:p-9 lg:grid-cols-5">
          {/* Calculator */}
          <div className="lg:col-span-3">
            <div className="flex items-baseline gap-2">
              <span className="text-5xl font-semibold tracking-tight">
                <AnimatedAmount value={total} currency={currency} />
              </span>
              <span className="text-muted">/mo</span>
            </div>
            <p className="mt-1 text-sm text-muted">
              {currency}
              {rate} per seat · billed monthly
            </p>

            <div className="mt-8">
              <div className="mb-3 flex items-center justify-between text-sm">
                <span className="text-muted">Team members</span>
                <span className="rounded-full border border-border bg-background px-2.5 py-0.5 font-semibold tabular-nums">
                  {seats}
                </span>
              </div>
              <Slider
                min={minSeats}
                max={maxSeats}
                value={seats}
                onValueChange={setSeats}
                aria-label="Team members"
                className="w-full"
              />
              <div className="mt-2 flex justify-between text-xs tabular-nums text-muted-2">
                <span>{minSeats}</span>
                <span>{maxSeats}+</span>
              </div>
            </div>
          </div>

          {/* Included */}
          <div className="lg:col-span-2 lg:border-l lg:border-border lg:pl-8">
            <p className="text-sm font-medium text-foreground">
              Included in every seat
            </p>
            <ul className="mt-4 grid grid-cols-1 gap-y-2.5 text-sm sm:grid-cols-2 lg:grid-cols-1">
              {features.map((feature) => (
                <li key={feature} className="flex items-start gap-2">
                  <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                  <span className="text-foreground/90">{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="flex flex-col items-center justify-between gap-3 border-t border-border bg-background/40 px-7 py-5 sm:flex-row sm:px-9">
          <p className="text-sm text-muted">
            Save 20% with annual billing — no credit card required to start.
          </p>
          <button
            type="button"
            className="inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:w-auto"
          >
            {ctaLabel}
            <ArrowRight className="size-4" />
          </button>
        </div>
      </div>
    </section>
  );
}
```

### Pricing — Spotlight
A single conversion-focused plan with a gradient glow and trust signals.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-spotlight.tsx

```tsx
import { ArrowRight, Check, ShieldCheck, Star } from "lucide-react";
import { ShimmerButton } from "@/components/ui/shimmer-button";
import { cn } from "@/lib/utils";

export interface PricingSpotlightProps {
  badge?: string;
  name?: string;
  description?: string;
  price?: string;
  /** Optional struck-through reference price. */
  originalPrice?: string;
  priceNote?: string;
  features?: string[];
  ctaLabel?: string;
  /** Social-proof line shown beneath the CTA. */
  proof?: string;
  guarantee?: string;
  className?: string;
}

const DEFAULT_FEATURES = [
  "All 80+ components",
  "Lifetime updates",
  "Figma design tokens",
  "Unlimited projects",
  "Copy-paste source",
  "Priority email support",
  "Dark & light themes",
  "No attribution required",
];

/**
 * PricingSpotlight — a single, conversion-focused plan lit by a soft gradient
 * glow, with a two-column feature checklist and trust signals. The CTA reuses
 * the ShimmerButton primitive for a premium, animated accent.
 */
export function PricingSpotlight({
  badge = "Lifetime deal",
  name = "ONONC Pro",
  description = "Everything in one payment. Own it forever — no subscription, no lock-in.",
  price = "$199",
  originalPrice = "$399",
  priceNote = "one-time payment",
  features = DEFAULT_FEATURES,
  ctaLabel = "Get lifetime access",
  proof = "Loved by 2,000+ product teams",
  guarantee = "30-day money-back guarantee",
  className,
}: PricingSpotlightProps) {
  return (
    <section className={cn("relative w-full", className)}>
      {/* soft brand glow */}
      <div
        aria-hidden
        className="pointer-events-none absolute left-1/2 top-0 -z-10 h-72 w-[36rem] max-w-full -translate-x-1/2 rounded-full bg-gradient-to-r from-brand/30 via-brand-2/20 to-brand-3/30 blur-3xl"
      />
      <div className="mx-auto max-w-xl overflow-hidden rounded-3xl border border-border-strong bg-surface shadow-[0_40px_120px_-60px_var(--brand)]">
        <div className="p-8 sm:p-10">
          <div className="flex items-center justify-between">
            <span className="inline-flex items-center gap-1 rounded-full border border-brand/30 bg-brand/10 px-3 py-1 text-xs font-semibold text-brand-ink">
              {badge}
            </span>
            <div className="flex items-center gap-0.5 text-brand-3" aria-hidden>
              {Array.from({ length: 5 }).map((_, i) => (
                <Star key={i} className="size-4 fill-current" />
              ))}
            </div>
          </div>

          <h2 className="mt-5 text-2xl font-semibold tracking-tight">{name}</h2>
          <p className="mt-2 text-pretty text-sm text-muted">{description}</p>

          <div className="mt-6 flex flex-wrap items-end gap-x-3 gap-y-1">
            <span className="text-5xl font-semibold tracking-tight">
              {price}
            </span>
            {originalPrice && (
              <span className="pb-1.5 text-lg text-muted-2 line-through">
                {originalPrice}
              </span>
            )}
            <span className="pb-1.5 text-sm text-muted">{priceNote}</span>
          </div>

          <div className="mt-7 flex justify-center">
            <ShimmerButton type="button" className="w-full justify-center">
              {ctaLabel}
              <ArrowRight className="size-4" />
            </ShimmerButton>
          </div>

          <div className="mt-4 flex flex-col items-center gap-2 text-center text-xs text-muted sm:flex-row sm:justify-center sm:gap-4">
            <span className="inline-flex items-center gap-1.5">
              <ShieldCheck className="size-4 text-brand-2" />
              {guarantee}
            </span>
            <span className="hidden sm:inline" aria-hidden>
              ·
            </span>
            <span>{proof}</span>
          </div>
        </div>

        <ul className="grid grid-cols-1 gap-x-6 gap-y-3 border-t border-border bg-background/40 p-8 text-sm sm:grid-cols-2 sm:p-10">
          {features.map((feature) => (
            <li key={feature} className="flex items-start gap-2.5">
              <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
              <span className="text-foreground/90">{feature}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```

### Pricing — Compact Rows
Horizontally stacked plan rows with inline feature chips for dense pages.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-rows.tsx

```tsx
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface RowPlan {
  name: string;
  description: string;
  price: string;
  period?: string;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingRowsProps {
  heading?: string;
  subheading?: string;
  plans?: RowPlan[];
  className?: string;
}

const DEFAULT_PLANS: RowPlan[] = [
  {
    name: "Hobby",
    description: "For personal projects and weekend experiments.",
    price: "$0",
    period: "/mo",
    features: ["3 projects", "Community support", "1 GB storage"],
    cta: "Start free",
  },
  {
    name: "Pro",
    description: "For freelancers and small teams shipping to production.",
    price: "$29",
    period: "/mo",
    features: [
      "Unlimited projects",
      "Priority support",
      "50 GB storage",
      "Custom domains",
    ],
    cta: "Choose Pro",
    popular: true,
  },
  {
    name: "Business",
    description: "For organizations that need scale and governance.",
    price: "$99",
    period: "/mo",
    features: ["SSO & SAML", "Audit logs", "Unlimited storage", "Dedicated manager"],
    cta: "Choose Business",
  },
];

/**
 * PricingRows — compact, horizontally stacked plan rows that stay scannable on
 * dense pages. The recommended plan is lifted with a brand ring.
 */
export function PricingRows({
  heading = "Find the right plan",
  subheading = "Straightforward tiers with no hidden fees. Upgrade or downgrade anytime.",
  plans = DEFAULT_PLANS,
  className,
}: PricingRowsProps) {
  return (
    <section className={cn("mx-auto w-full max-w-3xl", className)}>
      <div className="text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 space-y-4">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={cn(
              "relative flex flex-col gap-5 rounded-2xl border bg-surface p-6 sm:flex-row sm:items-center sm:justify-between",
              plan.popular
                ? "border-brand/50 ring-1 ring-brand/40"
                : "border-border",
            )}
          >
            <div className="min-w-0">
              <div className="flex items-center gap-2">
                <h3 className="text-lg font-semibold">{plan.name}</h3>
                {plan.popular && (
                  <span className="rounded-full bg-brand px-2 py-0.5 text-[11px] font-semibold text-white">
                    Popular
                  </span>
                )}
              </div>
              <p className="mt-1 text-sm text-muted">{plan.description}</p>
              <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1.5">
                {plan.features.map((feature) => (
                  <li
                    key={feature}
                    className="inline-flex items-center gap-1.5 text-xs text-foreground/80"
                  >
                    <Check className="size-3.5 shrink-0 text-brand-2" />
                    {feature}
                  </li>
                ))}
              </ul>
            </div>

            <div className="flex shrink-0 items-center justify-between gap-5 border-t border-border pt-4 sm:flex-col sm:items-end sm:border-0 sm:pt-0 sm:text-right">
              <div className="flex items-baseline gap-1">
                <span className="text-3xl font-semibold tracking-tight">
                  {plan.price}
                </span>
                {plan.period && (
                  <span className="text-sm text-muted">{plan.period}</span>
                )}
              </div>
              <button
                type="button"
                className={cn(
                  "inline-flex items-center justify-center gap-1.5 rounded-full px-5 py-2.5 text-sm font-semibold transition-colors",
                  plan.popular
                    ? "bg-brand text-white hover:bg-brand/90"
                    : "border border-border-strong text-foreground hover:bg-surface-2",
                )}
              >
                {plan.cta ?? "Choose"}
                <ArrowRight className="size-4" />
              </button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### Pricing — Plan Selector
An accessible radiogroup of selectable plans with a live summary and CTA.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-selector.tsx

```tsx
"use client";

import { type KeyboardEvent, useId, useState } from "react";
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SelectablePlan {
  name: string;
  description: string;
  price: string;
  period?: string;
  /** Small label shown beside the name, e.g. "Save 20%". */
  note?: string;
}

export interface PricingSelectorProps {
  heading?: string;
  subheading?: string;
  plans?: SelectablePlan[];
  defaultIndex?: number;
  className?: string;
}

const DEFAULT_PLANS: SelectablePlan[] = [
  {
    name: "Monthly",
    description: "Pay as you go, cancel whenever you like.",
    price: "$29",
    period: "/mo",
  },
  {
    name: "Annual",
    description: "12 months upfront — two months free.",
    price: "$23",
    period: "/mo",
    note: "Save 20%",
  },
  {
    name: "Lifetime",
    description: "One payment, yours forever with free updates.",
    price: "$599",
    period: "once",
    note: "Best value",
  },
];

/**
 * PricingSelector — selectable plan cards exposed as a radiogroup. Click or use
 * ↑/↓ to choose a plan; the summary bar and CTA reflect the active selection.
 */
export function PricingSelector({
  heading = "Choose how you pay",
  subheading = "Switch plans at any time. Every option includes the full component library.",
  plans = DEFAULT_PLANS,
  defaultIndex = 1,
  className,
}: PricingSelectorProps) {
  const baseId = useId();
  const [selected, setSelected] = useState(
    Math.min(Math.max(defaultIndex, 0), plans.length - 1),
  );

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    let next = selected;
    if (e.key === "ArrowDown" || e.key === "ArrowRight")
      next = (selected + 1) % plans.length;
    else if (e.key === "ArrowUp" || e.key === "ArrowLeft")
      next = (selected - 1 + plans.length) % plans.length;
    else if (e.key === "Home") next = 0;
    else if (e.key === "End") next = plans.length - 1;
    else return;
    e.preventDefault();
    setSelected(next);
    document.getElementById(`${baseId}-${next}`)?.focus();
  };

  const active = plans[selected];

  return (
    <section className={cn("mx-auto w-full max-w-xl", className)}>
      <div className="text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div
        role="radiogroup"
        aria-label="Billing plan"
        onKeyDown={onKeyDown}
        className="mt-8 space-y-3"
      >
        {plans.map((plan, i) => {
          const isSelected = i === selected;
          return (
            <button
              key={plan.name}
              id={`${baseId}-${i}`}
              type="button"
              role="radio"
              aria-checked={isSelected}
              tabIndex={isSelected ? 0 : -1}
              onClick={() => setSelected(i)}
              className={cn(
                "flex w-full items-center gap-4 rounded-2xl border bg-surface p-5 text-left transition-colors",
                isSelected
                  ? "border-brand/60 ring-1 ring-brand/40"
                  : "border-border hover:border-border-strong",
              )}
            >
              <span
                aria-hidden
                className={cn(
                  "grid size-5 shrink-0 place-items-center rounded-full border transition-colors",
                  isSelected
                    ? "border-brand bg-brand text-white"
                    : "border-border-strong",
                )}
              >
                {isSelected && <Check className="size-3" />}
              </span>

              <span className="min-w-0 flex-1">
                <span className="flex items-center gap-2">
                  <span className="font-semibold">{plan.name}</span>
                  {plan.note && (
                    <span className="rounded-full bg-brand/10 px-2 py-0.5 text-[11px] font-medium text-brand-ink">
                      {plan.note}
                    </span>
                  )}
                </span>
                <span className="mt-0.5 block text-sm text-muted">
                  {plan.description}
                </span>
              </span>

              <span className="flex shrink-0 items-baseline gap-1">
                <span className="text-xl font-semibold tracking-tight">
                  {plan.price}
                </span>
                {plan.period && (
                  <span className="text-xs text-muted">{plan.period}</span>
                )}
              </span>
            </button>
          );
        })}
      </div>

      <div className="mt-6 flex flex-col items-center justify-between gap-3 rounded-2xl border border-border bg-background/50 p-4 sm:flex-row">
        <p className="text-sm text-muted">
          Selected:{" "}
          <span className="font-semibold text-foreground">{active.name}</span> —{" "}
          {active.price}
          {active.period ? ` ${active.period}` : ""}
        </p>
        <button
          type="button"
          className="inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:w-auto"
        >
          Continue with {active.name}
          <ArrowRight className="size-4" />
        </button>
      </div>
    </section>
  );
}
```

### Pricing — Feature Matrix
Full comparison matrix with per-plan prices, grouped features, and CTAs.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-table.tsx

```tsx
import { Fragment } from "react";
import { Check, Minus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface MatrixPlan {
  name: string;
  price: string;
  period?: string;
  description?: string;
  cta?: string;
  popular?: boolean;
}

export interface MatrixRow {
  feature: string;
  /** One cell per plan: true/false renders a check/dash; a string renders as-is. */
  values: (boolean | string)[];
}

export interface MatrixGroup {
  label: string;
  rows: MatrixRow[];
}

export interface PricingTableProps {
  heading?: string;
  subheading?: string;
  plans?: MatrixPlan[];
  groups?: MatrixGroup[];
  /** Index of the highlighted (recommended) plan column. */
  highlight?: number;
  className?: string;
}

const DEFAULT_PLANS: MatrixPlan[] = [
  { name: "Starter", price: "$0", period: "/mo", description: "For trying things out.", cta: "Start free" },
  {
    name: "Pro",
    price: "$24",
    period: "/mo",
    description: "For growing teams.",
    cta: "Start trial",
    popular: true,
  },
  { name: "Scale", price: "$64", period: "/mo", description: "For larger orgs.", cta: "Contact sales" },
];

const DEFAULT_GROUPS: MatrixGroup[] = [
  {
    label: "Usage",
    rows: [
      { feature: "Projects", values: ["3", "Unlimited", "Unlimited"] },
      { feature: "Asset storage", values: ["1 GB", "50 GB", "1 TB"] },
      { feature: "API requests", values: ["10k / mo", "1M / mo", "Unlimited"] },
    ],
  },
  {
    label: "Collaboration",
    rows: [
      { feature: "Team members", values: ["1", "10", "Unlimited"] },
      { feature: "Roles & permissions", values: [false, true, true] },
      { feature: "Audit log", values: [false, false, true] },
    ],
  },
  {
    label: "Support",
    rows: [
      { feature: "Community", values: [true, true, true] },
      { feature: "Priority support", values: [false, true, true] },
      { feature: "Dedicated manager", values: [false, false, true] },
    ],
  },
];

function MatrixCell({
  value,
  highlighted,
}: {
  value: boolean | string;
  highlighted: boolean;
}) {
  return (
    <td className={cn("px-5 py-3 text-center align-middle", highlighted && "bg-brand/5")}>
      {typeof value === "string" ? (
        <span className="text-sm text-foreground/90">{value}</span>
      ) : value ? (
        <Check className="mx-auto size-4 text-brand-2" role="img" aria-label="Included" />
      ) : (
        <Minus className="mx-auto size-4 text-muted-2" role="img" aria-label="Not included" />
      )}
    </td>
  );
}

/**
 * PricingTable — a full comparison matrix with per-plan price and CTA in the
 * header, grouped feature rows, and a highlighted recommended column. Built as
 * a semantic, scrollable table.
 */
export function PricingTable({
  heading = "Compare every plan",
  subheading = "All the details, side by side — so you can choose with confidence.",
  plans = DEFAULT_PLANS,
  groups = DEFAULT_GROUPS,
  highlight = 1,
  className,
}: PricingTableProps) {
  const colCount = plans.length + 1;
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      {/* Mobile: stacked plan cards — a wide matrix scrolls awkwardly on phones. */}
      <div className="mt-8 grid gap-4 md:hidden">
        {plans.map((plan, i) => {
          const featured = i === highlight;
          return (
            <div
              key={plan.name}
              className={cn(
                "rounded-3xl border p-5",
                featured ? "border-brand bg-brand/5" : "border-border",
              )}
            >
              <div className="flex items-center justify-between gap-3">
                <span className="text-base font-semibold">{plan.name}</span>
                {plan.popular && (
                  <span className="rounded-full bg-brand px-2.5 py-0.5 text-[11px] font-semibold text-white">
                    Most popular
                  </span>
                )}
              </div>
              <div className="mt-1 flex items-baseline gap-1">
                <span className="text-2xl font-semibold tracking-tight">{plan.price}</span>
                {plan.period && <span className="text-xs text-muted">{plan.period}</span>}
              </div>
              {plan.description && (
                <p className="mt-1 text-xs text-muted">{plan.description}</p>
              )}
              <button
                type="button"
                className={cn(
                  "mt-4 w-full rounded-full px-4 py-2 text-xs font-semibold transition-colors",
                  featured
                    ? "bg-brand text-white hover:bg-brand/90"
                    : "border border-border-strong text-foreground hover:bg-surface-2",
                )}
              >
                {plan.cta ?? "Choose"}
              </button>
              <dl className="mt-5 space-y-4">
                {groups.map((group) => (
                  <div key={group.label}>
                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-2">
                      {group.label}
                    </p>
                    <div className="mt-2 space-y-2">
                      {group.rows.map((row) => (
                        <div
                          key={row.feature}
                          className="flex items-center justify-between gap-4 border-t border-border pt-2 text-sm"
                        >
                          <dt className="text-foreground/90">{row.feature}</dt>
                          <dd className="shrink-0">
                            {typeof row.values[i] === "string" ? (
                              <span className="text-foreground/90">{row.values[i]}</span>
                            ) : row.values[i] ? (
                              <Check
                                className="size-4 text-brand-2"
                                role="img"
                                aria-label="Included"
                              />
                            ) : (
                              <Minus
                                className="size-4 text-muted-2"
                                role="img"
                                aria-label="Not included"
                              />
                            )}
                          </dd>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </dl>
            </div>
          );
        })}
      </div>

      {/* Desktop: full comparison matrix */}
      <div className="mt-10 hidden overflow-x-auto rounded-3xl border border-border md:block">
        <table className="w-full min-w-[640px] border-collapse text-left">
          <caption className="sr-only">Plan comparison</caption>
          <thead>
            <tr>
              <th scope="col" className="w-1/4 p-5 align-bottom">
                <span className="text-sm font-medium text-muted">Plans</span>
              </th>
              {plans.map((plan, i) => (
                <th
                  key={plan.name}
                  scope="col"
                  className={cn("p-5 text-center align-bottom", i === highlight && "bg-brand/5")}
                >
                  {plan.popular && (
                    <span className="mb-2 inline-block rounded-full bg-brand px-2.5 py-0.5 text-[11px] font-semibold text-white">
                      Most popular
                    </span>
                  )}
                  <div
                    className={cn(
                      "text-base font-semibold",
                      i === highlight && "text-brand-ink",
                    )}
                  >
                    {plan.name}
                  </div>
                  <div className="mt-1 flex items-baseline justify-center gap-1">
                    <span className="text-2xl font-semibold tracking-tight">{plan.price}</span>
                    {plan.period && <span className="text-xs text-muted">{plan.period}</span>}
                  </div>
                  {plan.description && (
                    <p className="mt-1 text-xs font-normal text-muted">{plan.description}</p>
                  )}
                  <button
                    type="button"
                    className={cn(
                      "mt-3 w-full rounded-full px-4 py-2 text-xs font-semibold transition-colors",
                      i === highlight
                        ? "bg-brand text-white hover:bg-brand/90"
                        : "border border-border-strong text-foreground hover:bg-surface-2",
                    )}
                  >
                    {plan.cta ?? "Choose"}
                  </button>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {groups.map((group) => (
              <Fragment key={group.label}>
                <tr>
                  <th
                    scope="colgroup"
                    colSpan={colCount}
                    className="border-t border-border bg-surface px-5 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-muted-2"
                  >
                    {group.label}
                  </th>
                </tr>
                {group.rows.map((row) => (
                  <tr key={row.feature} className="border-t border-border">
                    <th
                      scope="row"
                      className="px-5 py-3 text-left text-sm font-normal text-foreground/90"
                    >
                      {row.feature}
                    </th>
                    {row.values.map((value, i) => (
                      <MatrixCell key={i} value={value} highlighted={i === highlight} />
                    ))}
                  </tr>
                ))}
              </Fragment>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}
```

### Pricing — Audience Tabs
Switch the whole plan set by audience behind an accessible tablist.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-tabs.tsx

```tsx
"use client";

import { Check } from "lucide-react";
import { Tabs } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

export interface TabbedPlan {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface AudienceGroup {
  label: string;
  plans: TabbedPlan[];
}

export interface PricingTabsProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  groups?: AudienceGroup[];
  className?: string;
}

const DEFAULT_GROUPS: AudienceGroup[] = [
  {
    label: "Individuals",
    plans: [
      {
        name: "Free",
        price: "$0",
        period: "/mo",
        description: "For hobby projects.",
        features: ["3 projects", "Community support", "1 GB storage"],
        cta: "Start free",
      },
      {
        name: "Plus",
        price: "$12",
        period: "/mo",
        description: "For solo makers.",
        features: ["Unlimited projects", "Email support", "20 GB storage", "Custom domains"],
        cta: "Go Plus",
        popular: true,
      },
    ],
  },
  {
    label: "Teams",
    plans: [
      {
        name: "Team",
        price: "$32",
        period: "/seat",
        description: "For small teams.",
        features: ["Everything in Plus", "Shared workspaces", "Roles & permissions", "100 GB storage"],
        cta: "Start trial",
        popular: true,
      },
      {
        name: "Business",
        price: "$64",
        period: "/seat",
        description: "For scaling teams.",
        features: ["Everything in Team", "SSO & SAML", "Audit logs", "Priority support"],
        cta: "Start trial",
      },
    ],
  },
  {
    label: "Enterprise",
    plans: [
      {
        name: "Enterprise",
        price: "Custom",
        description: "For large organizations with bespoke needs.",
        features: [
          "Unlimited everything",
          "Dedicated success manager",
          "99.9% uptime SLA",
          "Custom contracts & invoicing",
        ],
        cta: "Contact sales",
        popular: true,
      },
    ],
  },
];

function PlanCard({ plan }: { plan: TabbedPlan }) {
  return (
    <div
      className={cn(
        "relative flex h-full flex-col rounded-2xl border bg-surface p-6",
        plan.popular ? "border-brand/50 ring-1 ring-brand/40" : "border-border",
      )}
    >
      {plan.popular && (
        <span className="absolute -top-3 left-6 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white">
          Recommended
        </span>
      )}
      <h3 className="text-base font-semibold text-foreground">{plan.name}</h3>
      <p className="mt-1 text-sm text-muted">{plan.description}</p>
      <div className="mt-4 flex items-baseline gap-1">
        <span className="text-3xl font-semibold tracking-tight text-foreground">{plan.price}</span>
        {plan.period && <span className="text-sm text-muted">{plan.period}</span>}
      </div>
      <ul className="mt-5 flex-1 space-y-2.5 text-sm">
        {plan.features.map((f) => (
          <li key={f} className="flex items-start gap-2.5">
            <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
            <span className="text-foreground/90">{f}</span>
          </li>
        ))}
      </ul>
      <button
        type="button"
        className={cn(
          "mt-6 w-full rounded-full px-5 py-2.5 text-sm font-semibold transition-colors",
          plan.popular
            ? "bg-brand text-white hover:bg-brand/90"
            : "border border-border-strong text-foreground hover:bg-surface-2",
        )}
      >
        {plan.cta ?? "Choose plan"}
      </button>
    </div>
  );
}

/**
 * PricingTabs — segments plans by audience (Individuals / Teams / Enterprise)
 * behind an accessible tablist; switching a tab swaps the whole plan set.
 */
export function PricingTabs({
  eyebrow = "Pricing",
  heading = "Plans for every kind of team",
  subheading = "Pick the audience that fits — pricing adapts to how you work.",
  groups = DEFAULT_GROUPS,
  className,
}: PricingTabsProps) {
  const items = groups.map((group) => ({
    label: group.label,
    content: (
      <div
        className={cn(
          "grid grid-cols-1 gap-5 pt-3 sm:grid-cols-2",
          group.plans.length >= 3 && "lg:grid-cols-3",
          group.plans.length === 1 && "mx-auto max-w-md",
        )}
      >
        {group.plans.map((plan) => (
          <PlanCard key={plan.name} plan={plan} />
        ))}
      </div>
    ),
  }));

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>
      <div className="mx-auto mt-8 max-w-4xl">
        <Tabs items={items} />
      </div>
    </section>
  );
}
```

### Pricing — Build Your Plan
A base plan plus toggleable add-ons with a live, animated running total.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-addons.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { ArrowRight } from "lucide-react";
import { Switch } from "@/components/ui/switch";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface Addon {
  name: string;
  description: string;
  /** Added to the monthly total when enabled. */
  price: number;
  defaultOn?: boolean;
}

export interface PricingAddonsProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  planName?: string;
  basePrice?: number;
  baseFeatures?: string[];
  addons?: Addon[];
  currency?: string;
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_BASE_FEATURES = ["Unlimited projects", "Core analytics", "Community support"];

const DEFAULT_ADDONS: Addon[] = [
  {
    name: "Advanced analytics",
    description: "Funnels, retention, and custom dashboards.",
    price: 12,
    defaultOn: true,
  },
  {
    name: "Priority support",
    description: "1-hour response with a dedicated channel.",
    price: 20,
  },
  { name: "Extra storage", description: "1 TB of additional asset storage.", price: 8 },
  { name: "SSO & SAML", description: "Enterprise single sign-on and SCIM.", price: 16 },
];

/** Eases the displayed amount toward `value`; jumps in one frame under reduced motion. */
function AnimatedAmount({ value, currency }: { value: number; currency: string }) {
  const [display, setDisplay] = useState(value);
  const displayRef = useRef(value);
  const raf = useRef(0);

  useEffect(() => {
    const from = displayRef.current;
    const to = value;
    if (from === to) return;
    const duration = prefersReducedMotion() ? 0 : 360;
    const start = performance.now();
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      displayRef.current = from + (to - from) * eased;
      setDisplay(displayRef.current);
      if (p < 1) raf.current = requestAnimationFrame(tick);
      else displayRef.current = to;
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [value]);

  return (
    <span className="tabular-nums">
      {currency}
      {Math.round(display).toLocaleString("en-US")}
    </span>
  );
}

/**
 * PricingAddons — a build-your-plan card: a fixed base plan plus toggleable
 * add-ons (each an accessible Switch) with a live total that eases as you go.
 */
export function PricingAddons({
  eyebrow = "Build your plan",
  heading = "Start with the essentials, add what you need",
  subheading = "Toggle add-ons to tailor your plan — your total updates as you go.",
  planName = "Pro plan",
  basePrice = 24,
  baseFeatures = DEFAULT_BASE_FEATURES,
  addons = DEFAULT_ADDONS,
  currency = "$",
  ctaLabel = "Continue to checkout",
  className,
}: PricingAddonsProps) {
  const [enabled, setEnabled] = useState<boolean[]>(() =>
    addons.map((a) => a.defaultOn ?? false),
  );

  const total =
    basePrice + addons.reduce((sum, a, i) => (enabled[i] ? sum + a.price : sum), 0);

  const toggle = (index: number, on: boolean) =>
    setEnabled((prev) => prev.map((v, j) => (j === index ? on : v)));

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mx-auto mt-10 max-w-2xl overflow-hidden rounded-3xl border border-border bg-surface">
        {/* Base plan */}
        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b border-border p-6">
          <div className="min-w-0">
            <h3 className="text-base font-semibold">{planName}</h3>
            <p className="mt-0.5 text-sm text-muted">{baseFeatures.join(" · ")}</p>
          </div>
          <div className="flex items-baseline gap-1">
            <span className="text-lg font-semibold tracking-tight">
              {currency}
              {basePrice}
            </span>
            <span className="text-sm text-muted">/mo base</span>
          </div>
        </div>

        {/* Add-ons */}
        <ul className="divide-y divide-border">
          {addons.map((addon, i) => (
            <li key={addon.name} className="flex items-center justify-between gap-4 p-5">
              <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-x-2 text-sm font-medium">
                  {addon.name}
                  <span className="font-normal text-muted">
                    +{currency}
                    {addon.price}/mo
                  </span>
                </div>
                <p className="mt-0.5 text-sm text-muted">{addon.description}</p>
              </div>
              <Switch
                checked={enabled[i]}
                onCheckedChange={(on) => toggle(i, on)}
                label={`${addon.name} (+${currency}${addon.price}/mo)`}
              />
            </li>
          ))}
        </ul>

        {/* Total */}
        <div className="flex flex-col items-center justify-between gap-3 border-t border-border bg-background/40 p-6 sm:flex-row">
          <div className="flex items-baseline gap-2">
            <span className="text-3xl font-semibold tracking-tight" aria-hidden="true">
              <AnimatedAmount value={total} currency={currency} />
            </span>
            <span className="text-sm text-muted" aria-hidden="true">
              /mo total
            </span>
            <span className="sr-only" aria-live="polite">
              Total {currency}
              {total.toLocaleString("en-US")} per month
            </span>
          </div>
          <button
            type="button"
            className="inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:w-auto"
          >
            {ctaLabel}
            <ArrowRight className="size-4" />
          </button>
        </div>
      </div>
    </section>
  );
}
```

### Pricing — Free vs Pro
A focused two-plan layout contrasting a free tier with a highlighted Pro.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-duo.tsx

```tsx
import { ArrowRight, Check, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DuoPlan {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: string[];
  cta?: string;
  highlighted?: boolean;
}

export interface PricingDuoProps {
  heading?: string;
  subheading?: string;
  plans?: DuoPlan[];
  className?: string;
}

const DEFAULT_PLANS: DuoPlan[] = [
  {
    name: "Free",
    price: "$0",
    period: "/mo",
    description: "Everything you need to get started, forever free.",
    features: ["Up to 3 projects", "Community support", "1 GB storage", "Basic analytics"],
    cta: "Get started",
  },
  {
    name: "Pro",
    price: "$19",
    period: "/mo",
    description: "Unlock the full toolkit for serious work.",
    features: [
      "Unlimited projects",
      "Priority support",
      "100 GB storage",
      "Advanced analytics",
      "Custom domains",
      "Team roles",
    ],
    cta: "Upgrade to Pro",
    highlighted: true,
  },
];

/**
 * PricingDuo — a focused two-plan layout that contrasts a free tier with a
 * gradient-highlighted Pro, for products with a simple upgrade path.
 */
export function PricingDuo({
  heading = "Two ways to build",
  subheading = "Start free and upgrade the moment you need more. No surprises.",
  plans = DEFAULT_PLANS,
  className,
}: PricingDuoProps) {
  return (
    <section className={cn("mx-auto w-full max-w-3xl", className)}>
      <div className="text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 sm:grid-cols-2">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={cn(
              "relative h-full rounded-3xl p-px",
              plan.highlighted
                ? "bg-gradient-to-b from-brand via-brand-2/50 to-border shadow-[0_30px_80px_-50px_var(--brand)]"
                : "bg-border",
            )}
          >
            {plan.highlighted && (
              <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
                <Sparkles className="size-3.5" />
                Recommended
              </span>
            )}
            <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-7">
              <h3 className="text-lg font-semibold">{plan.name}</h3>
              <p className="mt-1 text-sm text-muted">{plan.description}</p>
              <div className="mt-5 flex items-baseline gap-1">
                <span className="text-4xl font-semibold tracking-tight">{plan.price}</span>
                {plan.period && <span className="text-sm text-muted">{plan.period}</span>}
              </div>
              <ul className="mt-6 flex-1 space-y-3 text-sm">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-start gap-2.5">
                    <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                    <span className="text-foreground/90">{f}</span>
                  </li>
                ))}
              </ul>
              <button
                type="button"
                className={cn(
                  "mt-8 inline-flex w-full items-center justify-center gap-1.5 rounded-full px-5 py-3 text-sm font-semibold transition-colors",
                  plan.highlighted
                    ? "bg-brand text-white hover:bg-brand/90"
                    : "border border-border-strong text-foreground hover:bg-surface-2",
                )}
              >
                {plan.cta ?? "Choose plan"}
                <ArrowRight className="size-4" />
              </button>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### Pricing — Credit Packs
One-time credit packs with bonus credits and an effective per-credit price.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-credits.tsx

```tsx
import { Check, Coins, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface CreditPack {
  name: string;
  /** Base credits in the pack. */
  credits: number;
  /** Bonus credits added on top. */
  bonus?: number;
  /** One-time price. */
  price: number;
  perks?: string[];
  popular?: boolean;
}

export interface PricingCreditsProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  packs?: CreditPack[];
  currency?: string;
  className?: string;
}

const DEFAULT_PACKS: CreditPack[] = [
  {
    name: "Starter",
    credits: 1000,
    price: 9,
    perks: ["Credits never expire", "All models included"],
  },
  {
    name: "Growth",
    credits: 5000,
    bonus: 500,
    price: 39,
    perks: ["Everything in Starter", "Priority queue", "Usage analytics"],
    popular: true,
  },
  {
    name: "Scale",
    credits: 20000,
    bonus: 3000,
    price: 129,
    perks: ["Everything in Growth", "Volume discounts", "Dedicated support"],
  },
];

/**
 * PricingCredits — one-time credit packs for usage-metered products. Each pack
 * shows bonus credits and an effective per-credit price, with a best-value
 * pack highlighted.
 */
export function PricingCredits({
  eyebrow = "Pay as you go",
  heading = "Buy credits, use them anytime",
  subheading = "No subscription. Top up once and your credits never expire.",
  packs = DEFAULT_PACKS,
  currency = "$",
  className,
}: PricingCreditsProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 lg:grid-cols-3">
        {packs.map((pack) => {
          const totalCredits = pack.credits + (pack.bonus ?? 0);
          const perCredit = pack.price / totalCredits;
          return (
            <div
              key={pack.name}
              className={cn(
                "relative h-full rounded-3xl p-px",
                pack.popular
                  ? "bg-gradient-to-b from-brand via-brand-2/50 to-border shadow-[0_30px_80px_-50px_var(--brand)]"
                  : "bg-border",
              )}
            >
              {pack.popular && (
                <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
                  <Sparkles className="size-3.5" />
                  Best value
                </span>
              )}
              <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-7">
                <div className="flex items-center gap-2">
                  <Coins
                    className={cn("size-5", pack.popular ? "text-brand" : "text-brand-2")}
                    aria-hidden
                  />
                  <h3 className="text-base font-semibold">{pack.name}</h3>
                </div>

                <div className="mt-5 flex items-baseline gap-1">
                  <span className="text-4xl font-semibold tracking-tight tabular-nums">
                    {currency}
                    {pack.price}
                  </span>
                  <span className="text-sm text-muted">one-time</span>
                </div>

                <div className="mt-4 rounded-2xl border border-border bg-background/50 p-4">
                  <div className="flex items-baseline gap-1.5">
                    <span className="text-2xl font-semibold tabular-nums">
                      {pack.credits.toLocaleString("en-US")}
                    </span>
                    <span className="text-sm text-muted">credits</span>
                  </div>
                  {pack.bonus ? (
                    <p className="mt-1 text-sm font-medium text-brand-ink">
                      + {pack.bonus.toLocaleString("en-US")} bonus credits
                    </p>
                  ) : null}
                  <p className="mt-2 text-xs tabular-nums text-muted-2">
                    ≈ {currency}
                    {perCredit.toFixed(3)} / credit
                  </p>
                </div>

                <ul className="mt-5 flex-1 space-y-2.5 text-sm">
                  {(pack.perks ?? []).map((perk) => (
                    <li key={perk} className="flex items-start gap-2.5">
                      <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                      <span className="text-foreground/90">{perk}</span>
                    </li>
                  ))}
                </ul>

                <button
                  type="button"
                  className={cn(
                    "mt-7 w-full rounded-full px-5 py-3 text-sm font-semibold transition-colors",
                    pack.popular
                      ? "bg-brand text-white hover:bg-brand/90"
                      : "border border-border-strong text-foreground hover:bg-surface-2",
                  )}
                >
                  Buy {pack.name}
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
```

### Pricing — Currency Switcher
Three tiers with a currency switcher that converts and tweens prices.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-currency.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { Check, Sparkles } from "lucide-react";
import { SegmentedControl } from "@/components/ui/segmented-control";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface CurrencyOption {
  code: string;
  symbol: string;
  /** Multiplier applied to the USD base price. */
  rate: number;
}

export interface CurrencyPlan {
  name: string;
  description: string;
  /** Base monthly price in USD. */
  usd: number;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingCurrencyProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  currencies?: CurrencyOption[];
  plans?: CurrencyPlan[];
  className?: string;
}

const DEFAULT_CURRENCIES: CurrencyOption[] = [
  { code: "USD", symbol: "$", rate: 1 },
  { code: "EUR", symbol: "€", rate: 0.92 },
  { code: "GBP", symbol: "£", rate: 0.79 },
];

const DEFAULT_PLANS: CurrencyPlan[] = [
  {
    name: "Starter",
    description: "For side projects and experiments.",
    usd: 0,
    features: ["3 projects", "Community support", "1 GB storage"],
    cta: "Start free",
  },
  {
    name: "Pro",
    description: "For growing teams shipping weekly.",
    usd: 24,
    features: ["Unlimited projects", "Priority support", "50 GB storage", "Custom domains"],
    cta: "Start trial",
    popular: true,
  },
  {
    name: "Scale",
    description: "For larger organizations.",
    usd: 64,
    features: ["Everything in Pro", "SSO & SAML", "Audit logs", "Dedicated manager"],
    cta: "Contact sales",
  },
];

/** Eases the displayed number toward `value`; jumps in one frame under reduced motion. */
function AnimatedAmount({ value }: { value: number }) {
  const [display, setDisplay] = useState(value);
  const displayRef = useRef(value);
  const raf = useRef(0);

  useEffect(() => {
    const from = displayRef.current;
    const to = value;
    if (from === to) return;
    const duration = prefersReducedMotion() ? 0 : 420;
    const start = performance.now();
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      displayRef.current = from + (to - from) * eased;
      setDisplay(displayRef.current);
      if (p < 1) raf.current = requestAnimationFrame(tick);
      else displayRef.current = to;
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [value]);

  return <span className="tabular-nums">{Math.round(display).toLocaleString("en-US")}</span>;
}

/**
 * PricingCurrency — three tiers with a currency switcher. Prices convert from a
 * USD base and tween to the new amount (instant under reduced-motion); the
 * symbol swaps with the selected currency.
 */
export function PricingCurrency({
  eyebrow = "Global pricing",
  heading = "Priced for wherever you are",
  subheading = "Switch currency to see your local rate. Taxes are calculated at checkout.",
  currencies = DEFAULT_CURRENCIES,
  plans = DEFAULT_PLANS,
  className,
}: PricingCurrencyProps) {
  const [code, setCode] = useState(currencies[0]?.code ?? "USD");
  const active = currencies.find((c) => c.code === code) ?? currencies[0];
  if (!active) return null;

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-8 flex justify-center">
        <SegmentedControl
          options={currencies.map((c) => c.code)}
          value={code}
          onValueChange={setCode}
        />
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 lg:grid-cols-3">
        {plans.map((plan) => {
          const converted = Math.round(plan.usd * active.rate);
          const free = plan.usd === 0;
          return (
            <div
              key={plan.name}
              className={cn(
                "relative h-full rounded-3xl p-px",
                plan.popular
                  ? "bg-gradient-to-b from-brand via-brand-2/50 to-border shadow-[0_30px_80px_-50px_var(--brand)]"
                  : "bg-border",
              )}
            >
              {plan.popular && (
                <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
                  <Sparkles className="size-3.5" />
                  Most popular
                </span>
              )}
              <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-7">
                <h3 className="text-base font-semibold">{plan.name}</h3>
                <p className="mt-1 text-sm text-muted">{plan.description}</p>

                <div className="mt-5 flex items-baseline gap-1">
                  {free ? (
                    <span className="text-4xl font-semibold tracking-tight">Free</span>
                  ) : (
                    <>
                      <span className="text-4xl font-semibold tracking-tight">
                        {active.symbol}
                        <AnimatedAmount value={converted} />
                      </span>
                      <span className="text-sm text-muted">/mo</span>
                    </>
                  )}
                </div>
                <p className="mt-1 h-5 text-xs text-muted-2">
                  {free ? "Free forever" : `Billed in ${active.code}`}
                </p>

                <button
                  type="button"
                  className={cn(
                    "mt-6 w-full rounded-full px-5 py-3 text-sm font-semibold transition-colors",
                    plan.popular
                      ? "bg-brand text-white hover:bg-brand/90"
                      : "border border-border-strong text-foreground hover:bg-surface-2",
                  )}
                >
                  {plan.cta ?? "Choose plan"}
                </button>

                <ul className="mt-7 space-y-3 text-sm">
                  {plan.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5">
                      <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                      <span className="text-foreground/90">{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
```

### Pricing — Enterprise Band
Self-serve tiers above a full-width Enterprise contact band with a gradient wash.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-enterprise.tsx

```tsx
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface EnterprisePlan {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingEnterpriseProps {
  heading?: string;
  subheading?: string;
  plans?: EnterprisePlan[];
  enterpriseTitle?: string;
  enterpriseDescription?: string;
  enterpriseFeatures?: string[];
  enterpriseCta?: string;
  className?: string;
}

const DEFAULT_PLANS: EnterprisePlan[] = [
  {
    name: "Free",
    price: "$0",
    period: "/mo",
    description: "For getting started.",
    features: ["3 projects", "Community support", "1 GB storage"],
    cta: "Start free",
  },
  {
    name: "Pro",
    price: "$24",
    period: "/mo",
    description: "For growing teams.",
    features: ["Unlimited projects", "Priority support", "50 GB storage"],
    cta: "Start trial",
    popular: true,
  },
  {
    name: "Business",
    price: "$64",
    period: "/mo",
    description: "For scaling teams.",
    features: ["Everything in Pro", "Roles & permissions", "Audit logs"],
    cta: "Start trial",
  },
];

const DEFAULT_ENTERPRISE_FEATURES = [
  "SSO & SAML",
  "Dedicated success manager",
  "99.9% uptime SLA",
  "Custom contracts & invoicing",
];

/**
 * PricingEnterprise — self-serve tiers above a full-width Enterprise band with
 * a gradient wash, feature bullets, and a contact-sales CTA.
 */
export function PricingEnterprise({
  heading = "Plans that grow with you",
  subheading = "Start self-serve and move to Enterprise when you need more control.",
  plans = DEFAULT_PLANS,
  enterpriseTitle = "Enterprise",
  enterpriseDescription = "Custom pricing with the security, support, and controls large teams need.",
  enterpriseFeatures = DEFAULT_ENTERPRISE_FEATURES,
  enterpriseCta = "Talk to sales",
  className,
}: PricingEnterpriseProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 md:grid-cols-3">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={cn(
              "relative flex h-full flex-col rounded-2xl border bg-surface p-6",
              plan.popular ? "border-brand/50 ring-1 ring-brand/40" : "border-border",
            )}
          >
            {plan.popular && (
              <span className="absolute -top-3 left-6 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white">
                Most popular
              </span>
            )}
            <h3 className="text-base font-semibold">{plan.name}</h3>
            <p className="mt-1 text-sm text-muted">{plan.description}</p>
            <div className="mt-4 flex items-baseline gap-1">
              <span className="text-3xl font-semibold tracking-tight">{plan.price}</span>
              {plan.period && <span className="text-sm text-muted">{plan.period}</span>}
            </div>
            <ul className="mt-5 flex-1 space-y-2.5 text-sm">
              {plan.features.map((f) => (
                <li key={f} className="flex items-start gap-2.5">
                  <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                  <span className="text-foreground/90">{f}</span>
                </li>
              ))}
            </ul>
            <button
              type="button"
              className={cn(
                "mt-6 w-full rounded-full px-5 py-2.5 text-sm font-semibold transition-colors",
                plan.popular
                  ? "bg-brand text-white hover:bg-brand/90"
                  : "border border-border-strong text-foreground hover:bg-surface-2",
              )}
            >
              {plan.cta ?? "Choose plan"}
            </button>
          </div>
        ))}
      </div>

      {/* Enterprise band */}
      <div className="relative mt-5 overflow-hidden rounded-3xl border border-border-strong bg-surface p-8 sm:p-10">
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand/10 via-transparent to-brand-2/10"
        />
        <div className="relative flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
          <div className="max-w-xl">
            <h3 className="text-xl font-semibold tracking-tight">{enterpriseTitle}</h3>
            <p className="mt-2 text-sm text-muted">{enterpriseDescription}</p>
            <ul className="mt-4 grid grid-cols-1 gap-x-6 gap-y-2 sm:grid-cols-2">
              {enterpriseFeatures.map((f) => (
                <li key={f} className="flex items-center gap-2 text-sm text-foreground/90">
                  <Check className="size-4 shrink-0 text-brand-2" />
                  {f}
                </li>
              ))}
            </ul>
          </div>
          <div className="shrink-0">
            <button
              type="button"
              className="inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90 lg:w-auto"
            >
              {enterpriseCta}
              <ArrowRight className="size-4" />
            </button>
            <p className="mt-2 text-center text-xs text-muted-2 lg:text-right">
              Custom invoicing & MSAs available
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Pricing — Minimal
Understated hairline-divider pricing with no boxed cards and text-link CTAs.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-minimal.tsx

```tsx
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface MinimalPlan {
  name: string;
  description: string;
  price: string;
  period?: string;
  cta?: string;
  popular?: boolean;
}

export interface PricingMinimalProps {
  heading?: string;
  subheading?: string;
  plans?: MinimalPlan[];
  className?: string;
}

const DEFAULT_PLANS: MinimalPlan[] = [
  {
    name: "Hobby",
    description: "Personal projects and prototypes.",
    price: "$0",
    period: "/mo",
    cta: "Get started",
  },
  {
    name: "Pro",
    description: "Everything you need to ship for a living.",
    price: "$19",
    period: "/mo",
    cta: "Start trial",
    popular: true,
  },
  {
    name: "Team",
    description: "Collaboration, roles, and shared billing.",
    price: "$49",
    period: "/mo",
    cta: "Start trial",
  },
  {
    name: "Enterprise",
    description: "Custom security, support, and contracts.",
    price: "Custom",
    cta: "Contact us",
  },
];

/**
 * PricingMinimal — understated, typography-forward pricing on hairline dividers
 * (no boxed cards), with quiet text-link CTAs. Server-safe, pure CSS.
 */
export function PricingMinimal({
  heading = "Pricing, without the noise",
  subheading = "A few clear plans — no feature-matrix overwhelm. Pick one and start building.",
  plans = DEFAULT_PLANS,
  className,
}: PricingMinimalProps) {
  return (
    <section className={cn("mx-auto w-full max-w-3xl", className)}>
      <div className="text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 border-y border-border">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className="grid grid-cols-1 items-baseline gap-3 border-b border-border py-6 last:border-0 sm:grid-cols-[1fr_auto_auto] sm:gap-8"
          >
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-lg font-medium">{plan.name}</h3>
                {plan.popular && (
                  <span className="rounded-full border border-brand/30 bg-brand/10 px-2 py-0.5 text-[11px] font-medium text-brand-ink">
                    Popular
                  </span>
                )}
              </div>
              <p className="mt-0.5 text-sm text-muted">{plan.description}</p>
            </div>
            <div className="flex items-baseline gap-1 sm:justify-end">
              <span className="text-2xl font-semibold tracking-tight">{plan.price}</span>
              {plan.period && <span className="text-sm text-muted">{plan.period}</span>}
            </div>
            <button
              type="button"
              className="group inline-flex items-center gap-1.5 text-sm font-semibold text-brand-ink sm:justify-self-end"
            >
              {plan.cta ?? "Choose"}
              <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
            </button>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### Pricing — Metered Usage
A transparent metered rate schedule: a base fee plus per-unit tier tables.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-metered.tsx

```tsx
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface MeterTier {
  label: string;
  rate: string;
}

export interface Meter {
  name: string;
  unit: string;
  tiers: MeterTier[];
}

export interface PricingMeteredProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  baseFee?: string;
  basePeriod?: string;
  meters?: Meter[];
  perks?: string[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_METERS: Meter[] = [
  {
    name: "API requests",
    unit: "per 1k",
    tiers: [
      { label: "First 50k", rate: "Free" },
      { label: "50k – 1M", rate: "$0.40" },
      { label: "1M+", rate: "$0.25" },
    ],
  },
  {
    name: "Storage",
    unit: "per GB / mo",
    tiers: [
      { label: "First 5 GB", rate: "Free" },
      { label: "5 – 500 GB", rate: "$0.02" },
      { label: "500 GB+", rate: "$0.015" },
    ],
  },
  {
    name: "Bandwidth",
    unit: "per GB",
    tiers: [
      { label: "First 100 GB", rate: "Free" },
      { label: "100 GB – 10 TB", rate: "$0.08" },
      { label: "10 TB+", rate: "$0.05" },
    ],
  },
];

const DEFAULT_PERKS = [
  "No minimums or commitments",
  "Volume discounts applied automatically",
  "Real-time usage dashboard",
];

/**
 * PricingMetered — a transparent metered-usage schedule: a flat platform fee
 * plus per-unit rate tables that step down at higher volume.
 */
export function PricingMetered({
  eyebrow = "Usage-based",
  heading = "Metered pricing, no surprises",
  subheading = "A flat platform fee plus transparent per-unit rates. Only pay for what you use.",
  baseFee = "$0",
  basePeriod = "/mo platform fee",
  meters = DEFAULT_METERS,
  perks = DEFAULT_PERKS,
  ctaLabel = "Start building free",
  className,
}: PricingMeteredProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mx-auto mt-10 max-w-4xl overflow-hidden rounded-3xl border border-border bg-surface">
        <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 border-b border-border p-6 sm:p-7">
          <h3 className="text-base font-semibold">Pay-as-you-go</h3>
          <div className="flex items-baseline gap-1">
            <span className="text-2xl font-semibold tracking-tight">{baseFee}</span>
            <span className="text-sm text-muted">{basePeriod}</span>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-px bg-border sm:grid-cols-3">
          {meters.map((meter) => (
            <div key={meter.name} className="bg-surface p-6">
              <div className="flex items-baseline justify-between gap-2">
                <h4 className="text-sm font-semibold">{meter.name}</h4>
                <span className="text-xs text-muted-2">{meter.unit}</span>
              </div>
              <dl className="mt-3 space-y-2">
                {meter.tiers.map((tier) => (
                  <div
                    key={tier.label}
                    className="flex items-baseline justify-between gap-3 text-sm"
                  >
                    <dt className="text-muted">{tier.label}</dt>
                    <dd className="font-medium tabular-nums">{tier.rate}</dd>
                  </div>
                ))}
              </dl>
            </div>
          ))}
        </div>

        <div className="flex flex-col items-center justify-between gap-4 border-t border-border bg-background/40 p-6 sm:flex-row sm:p-7">
          <ul className="flex flex-wrap justify-center gap-x-5 gap-y-2 sm:justify-start">
            {perks.map((perk) => (
              <li
                key={perk}
                className="inline-flex items-center gap-1.5 text-sm text-foreground/80"
              >
                <Check className="size-4 shrink-0 text-brand-2" />
                {perk}
              </li>
            ))}
          </ul>
          <button
            type="button"
            className="inline-flex w-full shrink-0 items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:w-auto"
          >
            {ctaLabel}
            <ArrowRight className="size-4" />
          </button>
        </div>
      </div>
    </section>
  );
}
```

### Pricing — Highlight Podium
An asymmetric 3-up with an enlarged, gradient-highlighted recommended plan.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-highlight.tsx

```tsx
import { ArrowRight, Check, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HighlightPlan {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: string[];
  cta?: string;
  featured?: boolean;
}

export interface PricingHighlightProps {
  heading?: string;
  subheading?: string;
  plans?: HighlightPlan[];
  className?: string;
}

const DEFAULT_PLANS: HighlightPlan[] = [
  {
    name: "Basic",
    price: "$9",
    period: "/mo",
    description: "For individuals getting started.",
    features: ["10 projects", "Email support", "5 GB storage"],
    cta: "Choose Basic",
  },
  {
    name: "Pro",
    price: "$29",
    period: "/mo",
    description: "Everything serious teams need to ship.",
    features: [
      "Unlimited projects",
      "Priority support",
      "100 GB storage",
      "Advanced analytics",
      "Custom domains",
    ],
    cta: "Choose Pro",
    featured: true,
  },
  {
    name: "Business",
    price: "$79",
    period: "/mo",
    description: "For organizations at scale.",
    features: ["Everything in Pro", "SSO & SAML", "Audit logs"],
    cta: "Choose Business",
  },
];

/**
 * PricingHighlight — an asymmetric "podium" 3-up where the recommended plan is
 * enlarged and gradient-highlighted, with the two flanking plans kept compact.
 */
export function PricingHighlight({
  heading = "One plan stands out",
  subheading = "Most teams choose Pro — it's the sweet spot of power and price.",
  plans = DEFAULT_PLANS,
  className,
}: PricingHighlightProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-12 grid grid-cols-1 items-stretch gap-5 pt-3 lg:grid-cols-3">
        {plans.map((plan) =>
          plan.featured ? (
            <div
              key={plan.name}
              className="relative h-full rounded-3xl bg-gradient-to-b from-brand via-brand-2/50 to-border p-px shadow-[0_40px_100px_-50px_var(--brand)]"
            >
              <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
                <Sparkles className="size-3.5" />
                Most popular
              </span>
              <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-8">
                <h3 className="text-lg font-semibold">{plan.name}</h3>
                <p className="mt-1 text-sm text-muted">{plan.description}</p>
                <div className="mt-5 flex items-baseline gap-1">
                  <span className="text-5xl font-semibold tracking-tight">{plan.price}</span>
                  {plan.period && <span className="text-sm text-muted">{plan.period}</span>}
                </div>
                <button
                  type="button"
                  className="mt-6 inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
                >
                  {plan.cta ?? "Choose plan"}
                  <ArrowRight className="size-4" />
                </button>
                <ul className="mt-7 space-y-3 text-sm">
                  {plan.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5">
                      <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                      <span className="text-foreground/90">{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ) : (
            <div
              key={plan.name}
              className="flex h-full flex-col rounded-3xl border border-border bg-surface p-7"
            >
              <h3 className="text-base font-semibold">{plan.name}</h3>
              <p className="mt-1 text-sm text-muted">{plan.description}</p>
              <div className="mt-5 flex items-baseline gap-1">
                <span className="text-3xl font-semibold tracking-tight">{plan.price}</span>
                {plan.period && <span className="text-sm text-muted">{plan.period}</span>}
              </div>
              <button
                type="button"
                className="mt-6 w-full rounded-full border border-border-strong px-5 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-surface-2"
              >
                {plan.cta ?? "Choose plan"}
              </button>
              <ul className="mt-6 space-y-2.5 text-sm">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-start gap-2.5">
                    <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                    <span className="text-foreground/90">{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          ),
        )}
      </div>
    </section>
  );
}
```

### Pricing — Tiers & FAQ
Compact tiers above an integrated Pricing FAQ built on the Accordion.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-faq.tsx

```tsx
import { Check } from "lucide-react";
import { Accordion, type AccordionItem } from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

export interface FaqPlan {
  name: string;
  price: string;
  period?: string;
  description: string;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingFaqProps {
  heading?: string;
  subheading?: string;
  plans?: FaqPlan[];
  faqHeading?: string;
  faqs?: AccordionItem[];
  className?: string;
}

const DEFAULT_PLANS: FaqPlan[] = [
  {
    name: "Starter",
    price: "$0",
    period: "/mo",
    description: "For getting started.",
    features: ["3 projects", "Community support", "1 GB storage"],
    cta: "Start free",
  },
  {
    name: "Pro",
    price: "$24",
    period: "/mo",
    description: "For growing teams.",
    features: ["Unlimited projects", "Priority support", "50 GB storage"],
    cta: "Start trial",
    popular: true,
  },
  {
    name: "Scale",
    price: "$64",
    period: "/mo",
    description: "For larger orgs.",
    features: ["Everything in Pro", "SSO & SAML", "Audit logs"],
    cta: "Contact sales",
  },
];

const DEFAULT_FAQS: AccordionItem[] = [
  {
    title: "Can I change plans later?",
    content:
      "Yes — upgrade or downgrade anytime. We prorate the difference automatically.",
  },
  {
    title: "Is there a free trial?",
    content:
      "Every paid plan includes a 14-day free trial, and no credit card is required to start.",
  },
  {
    title: "What payment methods do you accept?",
    content:
      "All major credit cards. On annual plans we can also invoice your team.",
  },
  {
    title: "Do you offer discounts?",
    content:
      "Annual billing saves about 20%, and we offer discounts for students and nonprofits.",
  },
  {
    title: "Can I cancel anytime?",
    content:
      "Absolutely. Cancel in one click and keep access until the end of your billing period.",
  },
];

/**
 * PricingFaq — compact tiers above an integrated Pricing FAQ built on the
 * accessible Accordion, so buyers can resolve objections without leaving.
 */
export function PricingFaq({
  heading = "Pricing & FAQ",
  subheading = "Straightforward plans, and answers to the questions we hear most.",
  plans = DEFAULT_PLANS,
  faqHeading = "Frequently asked questions",
  faqs = DEFAULT_FAQS,
  className,
}: PricingFaqProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 md:grid-cols-3">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={cn(
              "relative flex h-full flex-col rounded-2xl border bg-surface p-6",
              plan.popular ? "border-brand/50 ring-1 ring-brand/40" : "border-border",
            )}
          >
            {plan.popular && (
              <span className="absolute -top-3 left-1/2 inline-flex -translate-x-1/2 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white">
                Most popular
              </span>
            )}
            <h3 className="text-base font-semibold">{plan.name}</h3>
            <p className="mt-1 text-sm text-muted">{plan.description}</p>
            <div className="mt-4 flex items-baseline gap-1">
              <span className="text-3xl font-semibold tracking-tight">{plan.price}</span>
              {plan.period && <span className="text-sm text-muted">{plan.period}</span>}
            </div>
            <ul className="mt-5 flex-1 space-y-2.5 text-sm">
              {plan.features.map((f) => (
                <li key={f} className="flex items-start gap-2.5">
                  <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                  <span className="text-foreground/90">{f}</span>
                </li>
              ))}
            </ul>
            <button
              type="button"
              className={cn(
                "mt-6 w-full rounded-full px-5 py-2.5 text-sm font-semibold transition-colors",
                plan.popular
                  ? "bg-brand text-white hover:bg-brand/90"
                  : "border border-border-strong text-foreground hover:bg-surface-2",
              )}
            >
              {plan.cta ?? "Choose plan"}
            </button>
          </div>
        ))}
      </div>

      <div className="mx-auto mt-16 max-w-2xl">
        <h3 className="text-center text-xl font-semibold tracking-tight">{faqHeading}</h3>
        <Accordion items={faqs} defaultIndex={0} className="mt-6" />
      </div>
    </section>
  );
}
```

### Pricing — Editorial Split
A two-column split: value-prop copy beside a single highlighted price card.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-split.tsx

```tsx
import { ArrowRight, Check, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingSplitProps {
  eyebrow?: string;
  heading?: string;
  description?: string;
  benefits?: string[];
  note?: string;
  planName?: string;
  price?: string;
  period?: string;
  planDescription?: string;
  features?: string[];
  cta?: string;
  className?: string;
}

const DEFAULT_BENEFITS = [
  "Ship 2× faster with ready-made sections",
  "Own the code — no runtime dependency",
  "Accessible and responsive out of the box",
  "Free updates for a full year",
];

const DEFAULT_FEATURES = [
  "All 80+ components",
  "Section blocks",
  "Figma design tokens",
  "Priority support",
  "Dark & light themes",
];

/**
 * PricingSplit — an editorial two-column layout: a value-prop column with
 * benefit bullets beside a single, highlighted price card.
 */
export function PricingSplit({
  eyebrow = "Simple pricing",
  heading = "One plan. Everything included.",
  description = "Stop assembling tools. Get the entire component library, section blocks, and design tokens in a single, fair plan.",
  benefits = DEFAULT_BENEFITS,
  note = "Trusted by 2,000+ teams · 30-day money-back guarantee",
  planName = "Pro",
  price = "$19",
  period = "/mo",
  planDescription = "Everything you need to design and ship.",
  features = DEFAULT_FEATURES,
  cta = "Start free trial",
  className,
}: PricingSplitProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16">
        {/* Copy */}
        <div>
          <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
          <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
          <p className="mt-4 text-pretty text-muted">{description}</p>
          <ul className="mt-6 space-y-3">
            {benefits.map((b) => (
              <li key={b} className="flex items-start gap-3">
                <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-brand/10 text-brand-2">
                  <Check className="size-3.5" />
                </span>
                <span className="text-sm text-foreground/90">{b}</span>
              </li>
            ))}
          </ul>
          <p className="mt-6 text-xs text-muted-2">{note}</p>
        </div>

        {/* Card */}
        <div className="relative mt-3 rounded-3xl bg-gradient-to-b from-brand via-brand-2/50 to-border p-px shadow-[0_30px_80px_-50px_var(--brand)]">
          <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
            <Sparkles className="size-3.5" />
            Best value
          </span>
          <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-8">
            <h3 className="text-lg font-semibold">{planName}</h3>
            <p className="mt-1 text-sm text-muted">{planDescription}</p>
            <div className="mt-5 flex items-baseline gap-1">
              <span className="text-5xl font-semibold tracking-tight">{price}</span>
              {period && <span className="text-sm text-muted">{period}</span>}
            </div>
            <button
              type="button"
              className="mt-6 inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
            >
              {cta}
              <ArrowRight className="size-4" />
            </button>
            <ul className="mt-7 space-y-3 text-sm">
              {features.map((f) => (
                <li key={f} className="flex items-start gap-2.5">
                  <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                  <span className="text-foreground/90">{f}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Pricing — Free Trial Band
A conversion-focused trial band with benefit chips, a CTA, and the post-trial price.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-trial.tsx

```tsx
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingTrialProps {
  eyebrow?: string;
  heading?: string;
  description?: string;
  benefits?: string[];
  ctaLabel?: string;
  priceNote?: string;
  className?: string;
}

const DEFAULT_BENEFITS = [
  "Full access to every feature",
  "No credit card required",
  "Cancel anytime",
];

/**
 * PricingTrial — a conversion-focused free-trial band: a soft gradient wash,
 * benefit chips, a prominent CTA, and the post-trial price.
 */
export function PricingTrial({
  eyebrow = "Free trial",
  heading = "Try every feature free for 14 days",
  description = "Spin up your workspace in minutes and explore the entire product with no limits — decide later.",
  benefits = DEFAULT_BENEFITS,
  ctaLabel = "Start your free trial",
  priceNote = "Then $24/mo · cancel anytime",
  className,
}: PricingTrialProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="relative overflow-hidden rounded-3xl border border-border-strong bg-surface px-6 py-12 text-center sm:px-10 sm:py-16">
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 bg-gradient-to-br from-brand/12 via-transparent to-brand-2/12"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute left-1/2 top-0 h-56 w-[34rem] max-w-full -translate-x-1/2 rounded-full bg-brand/15 blur-3xl"
        />
        <div className="relative mx-auto max-w-2xl">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-brand/30 bg-brand/10 px-3 py-1 text-xs font-semibold text-brand-ink">
            {eyebrow}
          </span>
          <h2 className="mt-4 text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
            {heading}
          </h2>
          <p className="mt-4 text-pretty text-muted">{description}</p>

          <ul className="mt-7 flex flex-wrap justify-center gap-x-5 gap-y-2">
            {benefits.map((b) => (
              <li
                key={b}
                className="inline-flex items-center gap-1.5 text-sm text-foreground/90"
              >
                <Check className="size-4 shrink-0 text-brand-2" />
                {b}
              </li>
            ))}
          </ul>

          <div className="mt-8 flex flex-col items-center gap-3">
            <button
              type="button"
              className="inline-flex items-center justify-center gap-1.5 rounded-full bg-brand px-7 py-3.5 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
            >
              {ctaLabel}
              <ArrowRight className="size-4" />
            </button>
            <p className="text-xs text-muted-2">{priceNote}</p>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Pricing — Pay What You Want
Preset amount chips plus a custom amount input that drive the CTA.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-flexible.tsx

```tsx
"use client";

import { type ChangeEvent, type KeyboardEvent, useId, useState } from "react";
import { ArrowRight, Check, Heart } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingFlexibleProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  /** Preset monthly amounts shown as chips. */
  presets?: number[];
  /** The preset marked "Suggested" and used as the initial amount. */
  suggested?: number;
  currency?: string;
  period?: string;
  perks?: string[];
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_PRESETS = [5, 15, 30, 50];
const DEFAULT_PERKS = [
  "Every feature unlocked",
  "Full source on GitHub",
  "Your name in the credits",
  "Cancel or change anytime",
];

/**
 * PricingFlexible — a pay-what-you-want card: preset amount chips (an
 * accessible radiogroup) plus a custom amount input, both driving the CTA.
 */
export function PricingFlexible({
  eyebrow = "Pay what you want",
  heading = "Support the project on your terms",
  subheading = "Choose a monthly amount that feels right — every tier unlocks everything.",
  presets = DEFAULT_PRESETS,
  suggested = 15,
  currency = "$",
  period = "/mo",
  perks = DEFAULT_PERKS,
  ctaLabel = "Continue",
  className,
}: PricingFlexibleProps) {
  const baseId = useId();
  const [amount, setAmount] = useState(suggested);
  const selectedIndex = presets.indexOf(amount);

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
    e.preventDefault();
    let next: number;
    if (selectedIndex < 0) {
      next = 0; // no preset selected (custom amount) → first arrow selects chip 0
    } else {
      const dir = e.key === "ArrowRight" ? 1 : -1;
      next = (selectedIndex + dir + presets.length) % presets.length;
    }
    setAmount(presets[next]);
    document.getElementById(`${baseId}-preset-${next}`)?.focus();
  };

  const onCustom = (e: ChangeEvent<HTMLInputElement>) => {
    const raw = Number(e.target.value);
    setAmount(Number.isNaN(raw) ? 0 : Math.max(0, Math.min(9999, Math.round(raw))));
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mx-auto mt-10 max-w-xl rounded-3xl border border-border bg-surface p-7 sm:p-8">
        <span className="text-sm font-medium text-foreground">Choose your monthly amount</span>

        <div
          role="radiogroup"
          aria-label="Preset amount"
          onKeyDown={onKeyDown}
          className="mt-3 grid grid-cols-2 gap-2.5 sm:grid-cols-4"
        >
          {presets.map((preset, i) => {
            const isSelected = preset === amount;
            return (
              <button
                key={preset}
                id={`${baseId}-preset-${i}`}
                type="button"
                role="radio"
                aria-checked={isSelected}
                tabIndex={isSelected || (selectedIndex < 0 && i === 0) ? 0 : -1}
                onClick={() => setAmount(preset)}
                className={cn(
                  "relative rounded-xl border px-4 py-3 text-sm font-semibold tabular-nums transition-colors",
                  isSelected
                    ? "border-brand bg-brand/10 text-brand-ink"
                    : "border-border text-foreground hover:border-border-strong",
                )}
              >
                {currency}
                {preset}
                {preset === suggested && (
                  <span className="absolute -top-2 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-brand px-2 py-0.5 text-[10px] font-semibold text-white">
                    Suggested
                  </span>
                )}
              </button>
            );
          })}
        </div>

        <div className="mt-5">
          <label htmlFor={`${baseId}-custom`} className="text-sm text-muted">
            Or enter a custom amount
          </label>
          <div className="mt-1.5 flex items-center rounded-xl border border-border bg-background px-4 transition-colors focus-within:border-brand">
            <span className="text-muted">{currency}</span>
            <input
              id={`${baseId}-custom`}
              type="number"
              inputMode="numeric"
              min={0}
              max={9999}
              value={amount}
              onChange={onCustom}
              className="w-full bg-transparent py-3 pl-1 text-base font-semibold tabular-nums outline-none"
            />
            <span className="text-sm text-muted">{period}</span>
          </div>
        </div>

        <button
          type="button"
          className="mt-6 inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
        >
          <Heart className="size-4" />
          {ctaLabel} — {currency}
          {amount}
          {period}
          <ArrowRight className="size-4" />
        </button>

        <ul className="mt-6 grid grid-cols-1 gap-2.5 text-sm sm:grid-cols-2">
          {perks.map((perk) => (
            <li key={perk} className="flex items-start gap-2.5">
              <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
              <span className="text-foreground/90">{perk}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```

### Pricing — Tier Slider
A slider that snaps across named tiers with a swapping, animated detail panel.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-tier-slider.tsx

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { ArrowRight, Check } from "lucide-react";
import { Slider } from "@/components/ui/slider";
import { clamp, cn, prefersReducedMotion } from "@/lib/utils";

export interface SliderTier {
  name: string;
  /** Monthly price as a number (eases between tiers). */
  price: number;
  description: string;
  features: string[];
  cta?: string;
}

export interface PricingTierSliderProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  tiers?: SliderTier[];
  currency?: string;
  defaultIndex?: number;
  className?: string;
}

const DEFAULT_TIERS: SliderTier[] = [
  {
    name: "Starter",
    price: 0,
    description: "For side projects and trying things out.",
    features: ["3 projects", "Community support", "1 GB storage"],
    cta: "Start free",
  },
  {
    name: "Pro",
    price: 24,
    description: "For freelancers shipping to production.",
    features: ["Unlimited projects", "Priority support", "50 GB storage", "Custom domains"],
    cta: "Start trial",
  },
  {
    name: "Team",
    price: 64,
    description: "For teams that collaborate daily.",
    features: ["Everything in Pro", "Roles & permissions", "Shared workspaces", "Audit logs"],
    cta: "Start trial",
  },
  {
    name: "Enterprise",
    price: 128,
    description: "For organizations operating at scale.",
    features: ["Everything in Team", "SSO & SAML", "99.9% uptime SLA", "Dedicated manager"],
    cta: "Contact sales",
  },
];

/** Eases the displayed amount toward `value`; jumps in one frame under reduced motion. */
function AnimatedAmount({ value, currency }: { value: number; currency: string }) {
  const [display, setDisplay] = useState(value);
  const displayRef = useRef(value);
  const raf = useRef(0);

  useEffect(() => {
    const from = displayRef.current;
    const to = value;
    if (from === to) return;
    const duration = prefersReducedMotion() ? 0 : 360;
    const start = performance.now();
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      displayRef.current = from + (to - from) * eased;
      setDisplay(displayRef.current);
      if (p < 1) raf.current = requestAnimationFrame(tick);
      else displayRef.current = to;
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [value]);

  return (
    <span className="tabular-nums">
      {currency}
      {Math.round(display).toLocaleString("en-US")}
    </span>
  );
}

/**
 * PricingTierSlider — drag a slider that snaps across discrete named tiers;
 * the price eases and the detail panel swaps as you move. Tier labels are also
 * clickable, and the selection is announced to screen readers.
 */
export function PricingTierSlider({
  eyebrow = "Find your fit",
  heading = "Slide to your plan",
  subheading = "Drag to explore tiers — the plan details update as you go.",
  tiers = DEFAULT_TIERS,
  currency = "$",
  defaultIndex = 1,
  className,
}: PricingTierSliderProps) {
  const max = tiers.length - 1;
  const [index, setIndex] = useState(clamp(defaultIndex, 0, Math.max(0, max)));
  const tier = tiers[index];
  if (!tier) return null;

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mx-auto mt-10 max-w-2xl rounded-3xl border border-border bg-surface p-7 sm:p-9">
        <div className="flex items-end justify-between gap-4">
          <div className="min-w-0">
            <h3 className="text-lg font-semibold">{tier.name}</h3>
            <p className="mt-1 text-sm text-muted">{tier.description}</p>
          </div>
          <div className="flex shrink-0 items-baseline gap-1">
            <span className="text-4xl font-semibold tracking-tight">
              <AnimatedAmount value={tier.price} currency={currency} />
            </span>
            <span className="text-sm text-muted">/mo</span>
          </div>
        </div>

        <div className="mt-7">
          <Slider
            min={0}
            max={max}
            step={1}
            value={index}
            onValueChange={setIndex}
            aria-label="Plan tier"
            className="w-full"
          />
          <div className="mt-3 flex justify-between gap-2">
            {tiers.map((t, i) => (
              <button
                key={t.name}
                type="button"
                onClick={() => setIndex(i)}
                className={cn(
                  "text-xs font-medium transition-colors",
                  i === index ? "text-brand-ink" : "text-muted-2 hover:text-foreground",
                )}
              >
                {t.name}
              </button>
            ))}
          </div>
        </div>

        <span className="sr-only" aria-live="polite">
          Selected {tier.name}, {currency}
          {tier.price.toLocaleString("en-US")} per month
        </span>

        <ul className="mt-7 grid grid-cols-1 gap-2.5 text-sm sm:grid-cols-2">
          {tier.features.map((f) => (
            <li key={f} className="flex items-start gap-2.5">
              <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
              <span className="text-foreground/90">{f}</span>
            </li>
          ))}
        </ul>

        <button
          type="button"
          className="mt-7 inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
        >
          {tier.cta ?? "Choose plan"}
          <ArrowRight className="size-4" />
        </button>
      </div>
    </section>
  );
}
```

### Pricing — Compare & Toggle
A comparison matrix with a Monthly/Annual switch that tweens the header prices.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-compare-toggle.tsx

```tsx
"use client";

import { Fragment, useEffect, useRef, useState } from "react";
import { Check, Minus, Sparkles } from "lucide-react";
import { SegmentedControl } from "@/components/ui/segmented-control";
import { cn, prefersReducedMotion } from "@/lib/utils";

type Period = "Monthly" | "Annual";

export interface ComparePlan {
  name: string;
  monthly: number;
  /** Per-month price when billed annually. */
  yearly: number;
  cta?: string;
  popular?: boolean;
}

export interface CompareRow {
  feature: string;
  values: (boolean | string)[];
}

export interface CompareGroup {
  label: string;
  rows: CompareRow[];
}

export interface PricingCompareToggleProps {
  heading?: string;
  subheading?: string;
  plans?: ComparePlan[];
  groups?: CompareGroup[];
  highlight?: number;
  currency?: string;
  className?: string;
}

const DEFAULT_PLANS: ComparePlan[] = [
  { name: "Starter", monthly: 0, yearly: 0, cta: "Start free" },
  { name: "Pro", monthly: 24, yearly: 19, cta: "Start trial", popular: true },
  { name: "Scale", monthly: 64, yearly: 52, cta: "Contact sales" },
];

const DEFAULT_GROUPS: CompareGroup[] = [
  {
    label: "Usage",
    rows: [
      { feature: "Projects", values: ["3", "Unlimited", "Unlimited"] },
      { feature: "Asset storage", values: ["1 GB", "50 GB", "1 TB"] },
    ],
  },
  {
    label: "Collaboration",
    rows: [
      { feature: "Team members", values: ["1", "10", "Unlimited"] },
      { feature: "Roles & permissions", values: [false, true, true] },
      { feature: "Audit log", values: [false, false, true] },
    ],
  },
  {
    label: "Support",
    rows: [
      { feature: "Priority support", values: [false, true, true] },
      { feature: "Dedicated manager", values: [false, false, true] },
    ],
  },
];

/** Eases the displayed amount toward `value`; jumps in one frame under reduced motion. */
function AnimatedAmount({ value, currency }: { value: number; currency: string }) {
  const [display, setDisplay] = useState(value);
  const displayRef = useRef(value);
  const raf = useRef(0);

  useEffect(() => {
    const from = displayRef.current;
    const to = value;
    if (from === to) return;
    const duration = prefersReducedMotion() ? 0 : 420;
    const start = performance.now();
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      displayRef.current = from + (to - from) * eased;
      setDisplay(displayRef.current);
      if (p < 1) raf.current = requestAnimationFrame(tick);
      else displayRef.current = to;
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [value]);

  return (
    <span className="tabular-nums">
      {currency}
      {Math.round(display).toLocaleString("en-US")}
    </span>
  );
}

function CompareCell({
  value,
  highlighted,
}: {
  value: boolean | string;
  highlighted: boolean;
}) {
  return (
    <td className={cn("px-5 py-3 text-center align-middle", highlighted && "bg-brand/5")}>
      {typeof value === "string" ? (
        <span className="text-sm text-foreground/90">{value}</span>
      ) : value ? (
        <Check className="mx-auto size-4 text-brand-2" role="img" aria-label="Included" />
      ) : (
        <Minus className="mx-auto size-4 text-muted-2" role="img" aria-label="Not included" />
      )}
    </td>
  );
}

/**
 * PricingCompareToggle — a comparison matrix with a Monthly/Annual switch whose
 * per-plan header prices tween between periods (instant under reduced-motion).
 */
export function PricingCompareToggle({
  heading = "Compare plans",
  subheading = "Switch billing to see how every plan scales.",
  plans = DEFAULT_PLANS,
  groups = DEFAULT_GROUPS,
  highlight = 1,
  currency = "$",
  className,
}: PricingCompareToggleProps) {
  const [period, setPeriod] = useState<Period>("Monthly");
  const annual = period === "Annual";
  const colCount = plans.length + 1;

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
        <SegmentedControl
          options={["Monthly", "Annual"]}
          value={period}
          onValueChange={(v) => setPeriod(v as Period)}
        />
        <span className="inline-flex items-center gap-1 rounded-full border border-brand/30 bg-brand/10 px-3 py-1 text-xs font-medium text-brand-ink">
          <Sparkles className="size-3.5" />
          Save up to 20% yearly
        </span>
      </div>

      {/* Mobile: stacked plan cards — a wide matrix scrolls awkwardly on phones. */}
      <div className="mt-8 grid gap-4 md:hidden">
        {plans.map((plan, i) => {
          const featured = i === highlight;
          const price = annual ? plan.yearly : plan.monthly;
          const free = price === 0;
          return (
            <div
              key={plan.name}
              className={cn(
                "rounded-3xl border p-5",
                featured ? "border-brand bg-brand/5" : "border-border",
              )}
            >
              <div className="flex items-center justify-between gap-3">
                <span className="text-base font-semibold">{plan.name}</span>
                {plan.popular && (
                  <span className="rounded-full bg-brand px-2.5 py-0.5 text-[11px] font-semibold text-white">
                    Most popular
                  </span>
                )}
              </div>
              <div className="mt-1 flex items-baseline gap-1">
                {free ? (
                  <span className="text-2xl font-semibold tracking-tight">Free</span>
                ) : (
                  <>
                    <span className="text-2xl font-semibold tracking-tight">
                      <AnimatedAmount value={price} currency={currency} />
                    </span>
                    <span className="text-xs text-muted">/mo</span>
                  </>
                )}
              </div>
              {!free && (
                <p className="mt-0.5 text-[11px] text-muted-2">
                  {annual ? "billed yearly" : "billed monthly"}
                </p>
              )}
              <button
                type="button"
                className={cn(
                  "mt-4 w-full rounded-full px-4 py-2 text-xs font-semibold transition-colors",
                  featured
                    ? "bg-brand text-white hover:bg-brand/90"
                    : "border border-border-strong text-foreground hover:bg-surface-2",
                )}
              >
                {plan.cta ?? "Choose"}
              </button>
              <dl className="mt-5 space-y-4">
                {groups.map((group) => (
                  <div key={group.label}>
                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-2">
                      {group.label}
                    </p>
                    <div className="mt-2 space-y-2">
                      {group.rows.map((row) => (
                        <div
                          key={row.feature}
                          className="flex items-center justify-between gap-4 border-t border-border pt-2 text-sm"
                        >
                          <dt className="text-foreground/90">{row.feature}</dt>
                          <dd className="shrink-0">
                            {typeof row.values[i] === "string" ? (
                              <span className="text-foreground/90">{row.values[i]}</span>
                            ) : row.values[i] ? (
                              <Check
                                className="size-4 text-brand-2"
                                role="img"
                                aria-label="Included"
                              />
                            ) : (
                              <Minus
                                className="size-4 text-muted-2"
                                role="img"
                                aria-label="Not included"
                              />
                            )}
                          </dd>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </dl>
            </div>
          );
        })}
      </div>

      {/* Desktop: full comparison matrix */}
      <div className="mt-8 hidden overflow-x-auto rounded-3xl border border-border md:block">
        <table className="w-full min-w-[640px] border-collapse text-left">
          <caption className="sr-only">Plan comparison ({period} billing)</caption>
          <thead>
            <tr>
              <th scope="col" className="w-1/4 p-5 align-bottom">
                <span className="text-sm font-medium text-muted">Plans</span>
              </th>
              {plans.map((plan, i) => {
                const price = annual ? plan.yearly : plan.monthly;
                const free = price === 0;
                return (
                  <th
                    key={plan.name}
                    scope="col"
                    className={cn("p-5 text-center align-bottom", i === highlight && "bg-brand/5")}
                  >
                    {plan.popular && (
                      <span className="mb-2 inline-block rounded-full bg-brand px-2.5 py-0.5 text-[11px] font-semibold text-white">
                        Most popular
                      </span>
                    )}
                    <div
                      className={cn(
                        "text-base font-semibold",
                        i === highlight && "text-brand-ink",
                      )}
                    >
                      {plan.name}
                    </div>
                    <div className="mt-1 flex items-baseline justify-center gap-1">
                      {free ? (
                        <span className="text-2xl font-semibold tracking-tight">Free</span>
                      ) : (
                        <>
                          <span className="text-2xl font-semibold tracking-tight">
                            <AnimatedAmount value={price} currency={currency} />
                          </span>
                          <span className="text-xs text-muted">/mo</span>
                        </>
                      )}
                    </div>
                    <p className="mt-0.5 h-4 text-[11px] font-normal text-muted-2">
                      {free ? "" : annual ? "billed yearly" : "billed monthly"}
                    </p>
                    <button
                      type="button"
                      className={cn(
                        "mt-3 w-full rounded-full px-4 py-2 text-xs font-semibold transition-colors",
                        i === highlight
                          ? "bg-brand text-white hover:bg-brand/90"
                          : "border border-border-strong text-foreground hover:bg-surface-2",
                      )}
                    >
                      {plan.cta ?? "Choose"}
                    </button>
                  </th>
                );
              })}
            </tr>
          </thead>
          <tbody>
            {groups.map((group) => (
              <Fragment key={group.label}>
                <tr>
                  <th
                    scope="colgroup"
                    colSpan={colCount}
                    className="border-t border-border bg-surface px-5 py-2.5 text-left text-xs font-semibold uppercase tracking-wide text-muted-2"
                  >
                    {group.label}
                  </th>
                </tr>
                {group.rows.map((row) => (
                  <tr key={row.feature} className="border-t border-border">
                    <th
                      scope="row"
                      className="px-5 py-3 text-left text-sm font-normal text-foreground/90"
                    >
                      {row.feature}
                    </th>
                    {row.values.map((value, i) => (
                      <CompareCell key={i} value={value} highlighted={i === highlight} />
                    ))}
                  </tr>
                ))}
              </Fragment>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}
```

### Pricing — Annual Savings
Annual cards with the monthly price struck through and a 'Save $X/yr' badge.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-savings.tsx

```tsx
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SavingsPlan {
  name: string;
  description: string;
  /** Per-month price when billed monthly. */
  monthly: number;
  /** Per-month price when billed annually. */
  yearly: number;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingSavingsProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  plans?: SavingsPlan[];
  currency?: string;
  className?: string;
}

const DEFAULT_PLANS: SavingsPlan[] = [
  {
    name: "Starter",
    description: "For side projects.",
    monthly: 12,
    yearly: 9,
    features: ["Unlimited projects", "Community support", "5 GB storage"],
    cta: "Choose Starter",
  },
  {
    name: "Pro",
    description: "For growing teams.",
    monthly: 30,
    yearly: 24,
    features: ["Everything in Starter", "Priority support", "100 GB storage", "Custom domains"],
    cta: "Choose Pro",
    popular: true,
  },
  {
    name: "Scale",
    description: "For larger orgs.",
    monthly: 80,
    yearly: 64,
    features: ["Everything in Pro", "SSO & SAML", "Audit logs", "Dedicated manager"],
    cta: "Choose Scale",
  },
];

/**
 * PricingSavings — annual-billing cards that show the monthly price struck
 * through beside the cheaper annual rate, plus an explicit "Save $X/yr" badge.
 */
export function PricingSavings({
  eyebrow = "Save with annual billing",
  heading = "Pay yearly, save big",
  subheading = "Every plan costs less per month when billed annually — here's exactly how much you save.",
  plans = DEFAULT_PLANS,
  currency = "$",
  className,
}: PricingSavingsProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 lg:grid-cols-3">
        {plans.map((plan) => {
          const savings = (plan.monthly - plan.yearly) * 12;
          return (
            <div
              key={plan.name}
            className={cn(
                "relative h-full rounded-3xl p-px",
                plan.popular
                  ? "bg-gradient-to-b from-brand via-brand-2/50 to-border shadow-[0_30px_80px_-50px_var(--brand)]"
                  : "bg-border",
              )}
            >
              {plan.popular && (
                <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
                  Most popular
                </span>
              )}
              <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-7">
                <div className="flex items-center justify-between gap-2">
                  <h3 className="text-base font-semibold">{plan.name}</h3>
                  {savings > 0 && (
                    <span className="rounded-full bg-brand/10 px-2.5 py-0.5 text-xs font-semibold text-brand-ink">
                      Save {currency}
                      {savings.toLocaleString("en-US")}/yr
                    </span>
                  )}
                </div>
                <p className="mt-1 text-sm text-muted">{plan.description}</p>

                <div className="mt-5 flex items-baseline gap-1.5">
                  <span className="text-4xl font-semibold tracking-tight tabular-nums">
                    {currency}
                    {plan.yearly}
                  </span>
                  <span className="text-sm text-muted">/mo</span>
                  {plan.monthly > plan.yearly && (
                    <span className="text-sm tabular-nums text-muted-2 line-through">
                      {currency}
                      {plan.monthly}
                    </span>
                  )}
                </div>
                <p className="mt-1 h-5 text-xs text-muted-2">
                  billed annually ({currency}
                  {(plan.yearly * 12).toLocaleString("en-US")}/yr)
                </p>

                <button
                  type="button"
                  className={cn(
                    "mt-6 w-full rounded-full px-5 py-3 text-sm font-semibold transition-colors",
                    plan.popular
                      ? "bg-brand text-white hover:bg-brand/90"
                      : "border border-border-strong text-foreground hover:bg-surface-2",
                  )}
                >
                  {plan.cta ?? "Choose plan"}
                </button>

                <ul className="mt-7 space-y-3 text-sm">
                  {plan.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5">
                      <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                      <span className="text-foreground/90">{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
```

### Pricing — Promo Code
Cards plus a promo-code field that discounts every plan with an animated drop.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-promo.tsx

```tsx
"use client";

import { type FormEvent, useEffect, useId, useRef, useState } from "react";
import { Check, Sparkles, Tag, X } from "lucide-react";
import { cn, prefersReducedMotion } from "@/lib/utils";

export interface PromoPlan {
  name: string;
  description: string;
  price: number;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingPromoProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  plans?: PromoPlan[];
  /** Promo code (matched case-insensitively). */
  code?: string;
  /** Percentage off applied when the code matches. */
  percentOff?: number;
  currency?: string;
  className?: string;
}

const DEFAULT_PLANS: PromoPlan[] = [
  {
    name: "Starter",
    description: "For side projects.",
    price: 15,
    features: ["Unlimited projects", "Community support", "5 GB storage"],
    cta: "Choose Starter",
  },
  {
    name: "Pro",
    description: "For growing teams.",
    price: 30,
    features: ["Everything in Starter", "Priority support", "100 GB storage", "Custom domains"],
    cta: "Choose Pro",
    popular: true,
  },
  {
    name: "Scale",
    description: "For larger orgs.",
    price: 75,
    features: ["Everything in Pro", "SSO & SAML", "Audit logs"],
    cta: "Choose Scale",
  },
];

/** Eases the displayed amount toward `value`; jumps in one frame under reduced motion. */
function AnimatedAmount({ value, currency }: { value: number; currency: string }) {
  const [display, setDisplay] = useState(value);
  const displayRef = useRef(value);
  const raf = useRef(0);

  useEffect(() => {
    const from = displayRef.current;
    const to = value;
    if (from === to) return;
    const duration = prefersReducedMotion() ? 0 : 420;
    const start = performance.now();
    const tick = (now: number) => {
      const p = duration <= 0 ? 1 : Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      displayRef.current = from + (to - from) * eased;
      setDisplay(displayRef.current);
      if (p < 1) raf.current = requestAnimationFrame(tick);
      else displayRef.current = to;
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [value]);

  return (
    <span className="tabular-nums">
      {currency}
      {Math.round(display).toLocaleString("en-US")}
    </span>
  );
}

/**
 * PricingPromo — pricing cards plus a promo-code field. Applying a valid code
 * discounts every plan, easing the prices down with a struck original and an
 * "applied" state; an invalid code shows an inline error.
 */
export function PricingPromo({
  eyebrow = "Launch offer",
  heading = "Got a promo code?",
  subheading = "Apply your code to see the discount reflected across every plan.",
  plans = DEFAULT_PLANS,
  code = "LAUNCH20",
  percentOff = 20,
  currency = "$",
  className,
}: PricingPromoProps) {
  const baseId = useId();
  const [input, setInput] = useState("");
  const [applied, setApplied] = useState(false);
  const [error, setError] = useState(false);
  const factor = applied ? 1 - percentOff / 100 : 1;

  const onSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (input.trim().toUpperCase() === code.toUpperCase()) {
      setApplied(true);
      setError(false);
    } else {
      setApplied(false);
      setError(true);
    }
  };

  const remove = () => {
    setApplied(false);
    setError(false);
    setInput("");
  };

  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mx-auto mt-8 max-w-md">
        <span className="sr-only" aria-live="polite">
          {applied ? `Promo code ${code} applied — ${percentOff}% off` : ""}
        </span>
        {applied ? (
          <div className="flex items-center justify-between gap-3 rounded-full border border-brand/40 bg-brand/10 px-4 py-2.5">
            <span className="inline-flex items-center gap-2 text-sm font-medium text-brand-ink">
              <Check className="size-4" />
              Code {code} applied — {percentOff}% off
            </span>
            <button
              type="button"
              onClick={remove}
              aria-label="Remove promo code"
              className="inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium text-muted transition-colors hover:text-foreground"
            >
              <X className="size-3.5" />
              Remove
            </button>
          </div>
        ) : (
          <form onSubmit={onSubmit} noValidate>
            <label htmlFor={`${baseId}-code`} className="sr-only">
              Promo code
            </label>
            <div
              className={cn(
                "flex items-center gap-2 rounded-full border bg-surface py-2 pl-4 pr-2 transition-colors",
                error ? "border-brand-3" : "border-border focus-within:border-brand",
              )}
            >
              <Tag className="size-4 shrink-0 text-muted" aria-hidden />
              <input
                id={`${baseId}-code`}
                type="text"
                value={input}
                onChange={(e) => {
                  setInput(e.target.value);
                  if (error) setError(false);
                }}
                placeholder="Enter code (try LAUNCH20)"
                aria-invalid={error}
                aria-describedby={error ? `${baseId}-error` : undefined}
                className="w-full bg-transparent text-sm outline-none placeholder:text-muted-2"
              />
              <button
                type="submit"
                className="shrink-0 rounded-full bg-brand px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
              >
                Apply
              </button>
            </div>
            {error && (
              <p id={`${baseId}-error`} role="alert" className="mt-2 pl-4 text-xs text-brand-3">
                That code isn&apos;t valid. Try LAUNCH20.
              </p>
            )}
          </form>
        )}
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 lg:grid-cols-3">
        {plans.map((plan) => {
          const discounted = plan.price * factor;
          return (
            <div
              key={plan.name}
              className={cn(
                "relative h-full rounded-3xl p-px",
                plan.popular
                  ? "bg-gradient-to-b from-brand via-brand-2/50 to-border shadow-[0_30px_80px_-50px_var(--brand)]"
                  : "bg-border",
              )}
            >
              {plan.popular && (
                <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
                  <Sparkles className="size-3.5" />
                  Most popular
                </span>
              )}
              <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-7">
                <h3 className="text-base font-semibold">{plan.name}</h3>
                <p className="mt-1 text-sm text-muted">{plan.description}</p>

                <div className="mt-5 flex items-baseline gap-1.5">
                  <span className="text-4xl font-semibold tracking-tight">
                    <AnimatedAmount value={discounted} currency={currency} />
                  </span>
                  <span className="text-sm text-muted">/mo</span>
                  {applied && (
                    <span className="text-sm tabular-nums text-muted-2 line-through">
                      {currency}
                      {plan.price}
                    </span>
                  )}
                </div>
                <p className="mt-1 h-5 text-xs font-medium text-brand-ink">
                  {applied ? `${percentOff}% off applied` : ""}
                </p>

                <button
                  type="button"
                  className={cn(
                    "mt-6 w-full rounded-full px-5 py-3 text-sm font-semibold transition-colors",
                    plan.popular
                      ? "bg-brand text-white hover:bg-brand/90"
                      : "border border-border-strong text-foreground hover:bg-surface-2",
                  )}
                >
                  {plan.cta ?? "Choose plan"}
                </button>

                <ul className="mt-7 space-y-3 text-sm">
                  {plan.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5">
                      <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                      <span className="text-foreground/90">{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
```

### Pricing — One-Time License
Perpetual one-time license tiers by seat scope, with a year of updates included.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-onetime.tsx

```tsx
import { Check, KeyRound } from "lucide-react";
import { cn } from "@/lib/utils";

export interface LicenseTier {
  name: string;
  price: string;
  /** Seat scope, e.g. "1 developer". */
  seats: string;
  description: string;
  features: string[];
  cta?: string;
  popular?: boolean;
}

export interface PricingOnetimeProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  tiers?: LicenseTier[];
  note?: string;
  className?: string;
}

const DEFAULT_TIERS: LicenseTier[] = [
  {
    name: "Personal",
    price: "$79",
    seats: "1 developer",
    description: "For solo makers and indie projects.",
    features: [
      "All components & blocks",
      "Unlimited personal projects",
      "1 year of free updates",
    ],
    cta: "Buy license",
  },
  {
    name: "Team",
    price: "$249",
    seats: "Up to 5 developers",
    description: "For small teams shipping together.",
    features: [
      "Everything in Personal",
      "Use in client & commercial work",
      "Priority email support",
      "1 year of free updates",
    ],
    cta: "Buy license",
    popular: true,
  },
  {
    name: "Enterprise",
    price: "$899",
    seats: "Unlimited developers",
    description: "For organizations and agencies.",
    features: [
      "Everything in Team",
      "Company-wide license",
      "Onboarding session",
      "1 year of free updates",
    ],
    cta: "Contact sales",
  },
];

/**
 * PricingOnetime — perpetual one-time license tiers (no subscription): a single
 * payment per seat scope, each including a year of updates and use-forever terms.
 */
export function PricingOnetime({
  eyebrow = "One-time purchase",
  heading = "Buy once, own it forever",
  subheading = "No subscriptions. Pay a single time and keep using your version forever.",
  tiers = DEFAULT_TIERS,
  note = "All licenses are perpetual — keep the version you buy forever. Includes one year of free updates.",
  className,
}: PricingOnetimeProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 grid grid-cols-1 items-stretch gap-5 pt-3 lg:grid-cols-3">
        {tiers.map((tier) => (
          <div
            key={tier.name}
            className={cn(
              "relative h-full rounded-3xl p-px",
              tier.popular
                ? "bg-gradient-to-b from-brand via-brand-2/50 to-border shadow-[0_30px_80px_-50px_var(--brand)]"
                : "bg-border",
            )}
          >
            {tier.popular && (
              <span className="absolute -top-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-brand px-3 py-1 text-xs font-semibold text-white shadow-sm">
                Most popular
              </span>
            )}
            <div className="flex h-full flex-col rounded-[calc(1.5rem_-_1px)] bg-surface p-7">
              <div className="flex items-center gap-2">
                <KeyRound
                  className={cn("size-5", tier.popular ? "text-brand" : "text-brand-2")}
                  aria-hidden
                />
                <h3 className="text-base font-semibold">{tier.name}</h3>
              </div>
              <p className="mt-2 text-sm text-muted">{tier.description}</p>
              <div className="mt-5 flex items-baseline gap-1">
                <span className="text-4xl font-semibold tracking-tight">{tier.price}</span>
                <span className="text-sm text-muted">one-time</span>
              </div>
              <p className="mt-1 text-xs text-muted-2">{tier.seats}</p>
              <button
                type="button"
                className={cn(
                  "mt-6 w-full rounded-full px-5 py-3 text-sm font-semibold transition-colors",
                  tier.popular
                    ? "bg-brand text-white hover:bg-brand/90"
                    : "border border-border-strong text-foreground hover:bg-surface-2",
                )}
              >
                {tier.cta ?? "Buy license"}
              </button>
              <ul className="mt-7 space-y-3 text-sm">
                {tier.features.map((f) => (
                  <li key={f} className="flex items-start gap-2.5">
                    <Check className="mt-0.5 size-4 shrink-0 text-brand-2" />
                    <span className="text-foreground/90">{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>

      <p className="mx-auto mt-6 max-w-2xl text-center text-xs text-muted-2">{note}</p>
    </section>
  );
}
```

### Pricing — Bundle & Save
Individual items combined into a discounted bundle with a 'Save $X' callout.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/pricing-bundle.tsx

```tsx
import { ArrowRight, Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface BundleItem {
  name: string;
  description?: string;
  price: number;
}

export interface PricingBundleProps {
  eyebrow?: string;
  heading?: string;
  subheading?: string;
  items?: BundleItem[];
  bundleName?: string;
  bundlePrice?: number;
  bundleFeatures?: string[];
  currency?: string;
  ctaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: BundleItem[] = [
  { name: "Component Library", description: "80+ accessible components", price: 49 },
  { name: "Section Blocks", description: "Drop-in page sections", price: 39 },
  { name: "Figma Kit", description: "Design tokens & source files", price: 29 },
];

/**
 * PricingBundle — individual products combined into a single discounted bundle,
 * with the per-item prices, the struck individual total, and a "Save $X" callout.
 */
export function PricingBundle({
  eyebrow = "Bundle & save",
  heading = "Get everything together",
  subheading = "Buy the complete toolkit as a bundle and save versus purchasing each part on its own.",
  items = DEFAULT_ITEMS,
  bundleName = "Complete Bundle",
  bundlePrice = 89,
  bundleFeatures = ["Lifetime access", "1 year of updates", "Priority support"],
  currency = "$",
  ctaLabel = "Get the bundle",
  className,
}: PricingBundleProps) {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  const savings = Math.max(0, total - bundlePrice);
  const pct = total > 0 ? Math.round((savings / total) * 100) : 0;

  return (
    <section className={cn("mx-auto w-full max-w-3xl", className)}>
      <div className="text-center">
        <span className="text-sm font-semibold text-brand-ink">{eyebrow}</span>
        <h2 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">{heading}</h2>
        <p className="mt-3 text-pretty text-muted">{subheading}</p>
      </div>

      <div className="mt-10 overflow-hidden rounded-3xl border border-border bg-surface">
        <ul className="divide-y divide-border">
          {items.map((item) => (
            <li key={item.name} className="flex items-center justify-between gap-4 p-5">
              <div className="flex items-center gap-3">
                <span className="grid size-9 shrink-0 place-items-center rounded-xl border border-border bg-background text-brand-2">
                  <Check className="size-4" />
                </span>
                <div>
                  <div className="text-sm font-medium">{item.name}</div>
                  {item.description && (
                    <div className="text-xs text-muted">{item.description}</div>
                  )}
                </div>
              </div>
              <span className="text-sm font-semibold tabular-nums text-muted">
                {currency}
                {item.price}
              </span>
            </li>
          ))}
        </ul>

        <div className="border-t border-border bg-background/40 p-6 sm:p-7">
          <div className="flex flex-col items-start justify-between gap-5 sm:flex-row sm:items-center">
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-base font-semibold">{bundleName}</h3>
                {savings > 0 && (
                  <span className="rounded-full bg-brand px-2.5 py-0.5 text-xs font-semibold text-white">
                    Save {currency}
                    {savings.toLocaleString("en-US")} ({pct}%)
                  </span>
                )}
              </div>
              <ul className="mt-2 flex flex-wrap gap-x-4 gap-y-1">
                {bundleFeatures.map((f) => (
                  <li
                    key={f}
                    className="inline-flex items-center gap-1.5 text-xs text-foreground/80"
                  >
                    <Check className="size-3.5 shrink-0 text-brand-2" />
                    {f}
                  </li>
                ))}
              </ul>
            </div>
            <div className="shrink-0 text-left sm:text-right">
              <div className="flex items-baseline gap-2 sm:justify-end">
                <span className="text-3xl font-semibold tracking-tight tabular-nums">
                  {currency}
                  {bundlePrice}
                </span>
                {savings > 0 && (
                  <span className="text-sm tabular-nums text-muted-2 line-through">
                    {currency}
                    {total}
                  </span>
                )}
              </div>
              <button
                type="button"
                className="mt-3 inline-flex w-full items-center justify-center gap-1.5 rounded-full bg-brand px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand/90 sm:w-auto"
              >
                {ctaLabel}
                <ArrowRight className="size-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Testimonials
Opposing marquee rows of quote cards.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/testimonials.tsx

```tsx
import { Marquee } from "@/components/ui/marquee";
import { cn } from "@/lib/utils";

export interface Testimonial {
  quote: string;
  name: string;
  handle: string;
}

export interface TestimonialsProps {
  testimonials?: Testimonial[];
  className?: string;
}

const DEFAULT_TESTIMONIALS: Testimonial[] = [
  { quote: "This shaved a week off our launch. The motion just works.", name: "Mara Vance", handle: "@maradraws" },
  { quote: "Finally a component kit that doesn't feel like every other site.", name: "Devon Park", handle: "@devbuilds" },
  { quote: "The spotlight and tilt cards are stupidly satisfying.", name: "Iris Cho", handle: "@irisux" },
  { quote: "Dropped the hero in and our bounce rate fell. Real.", name: "Leo Mendez", handle: "@leoships" },
  { quote: "Reduced-motion support out of the box — accessibility win.", name: "Sana Rao", handle: "@sana_a11y" },
  { quote: "Performance held up even with three canvases on one page.", name: "Tom Reyes", handle: "@tomperf" },
];

function Card({ t }: { t: Testimonial }) {
  return (
    <figure className="mx-3 w-80 shrink-0 rounded-2xl border border-border bg-surface p-6">
      <blockquote className="text-sm leading-relaxed text-foreground/90">
        “{t.quote}”
      </blockquote>
      <figcaption className="mt-4 flex items-center gap-3">
        <span
          aria-hidden
          className="grid size-9 place-items-center rounded-full bg-gradient-to-br from-brand to-brand-2 text-xs font-semibold text-white"
        >
          {t.name.charAt(0)}
        </span>
        <span className="text-sm">
          <span className="block font-medium">{t.name}</span>
          <span className="block text-muted">{t.handle}</span>
        </span>
      </figcaption>
    </figure>
  );
}

/**
 * Testimonials — two marquee rows scrolling in opposite directions, pausing on
 * hover so quotes stay readable.
 */
export function Testimonials({
  testimonials = DEFAULT_TESTIMONIALS,
  className,
}: TestimonialsProps) {
  const mid = Math.ceil(testimonials.length / 2);
  const rowA = testimonials.slice(0, mid);
  const rowB = testimonials.slice(mid);

  return (
    <div className={cn("flex flex-col gap-4", className)}>
      <Marquee duration={32}>
        {rowA.map((t, i) => (
          <Card key={i} t={t} />
        ))}
      </Marquee>
      <Marquee duration={36} reverse>
        {rowB.map((t, i) => (
          <Card key={i} t={t} />
        ))}
      </Marquee>
    </div>
  );
}
```

### FAQ
Frequently-asked questions built on the Accordion.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/faq-block.tsx

```tsx
import { Accordion, type AccordionItem } from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

export interface FAQBlockProps {
  heading?: string;
  items?: AccordionItem[];
  className?: string;
}

const DEFAULT_ITEMS: AccordionItem[] = [
  {
    title: "Is ONONC free to use?",
    content:
      "Yes — copy any component into your project and own it. There is no runtime dependency on this library.",
  },
  {
    title: "Does it work with my framework?",
    content:
      "The components are plain React + Tailwind. They drop into any React 18/19 app; the showcase ships on Next.js.",
  },
  {
    title: "How is accessibility handled?",
    content:
      "Interactive components ship keyboard support and ARIA roles, and every animation collapses under prefers-reduced-motion.",
  },
  {
    title: "Can I theme it?",
    content:
      "Everything reads from CSS variables, so you can restyle the whole kit by editing the design tokens.",
  },
];

/**
 * FAQBlock — a centered frequently-asked-questions section built on the
 * accessible Accordion.
 */
export function FAQBlock({
  heading = "Frequently asked questions",
  items = DEFAULT_ITEMS,
  className,
}: FAQBlockProps) {
  return (
    <section className={cn("mx-auto max-w-2xl", className)}>
      <h2 className="text-center text-3xl font-semibold tracking-tight sm:text-4xl">
        {heading}
      </h2>
      <div className="mt-8">
        <Accordion items={items} defaultIndex={0} />
      </div>
    </section>
  );
}
```

### Newsletter
Subscribe form with validation (front-end only).
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/newsletter-block.tsx

```tsx
"use client";

import { type FormEvent, useState } from "react";
import { CheckCircle2 } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NewsletterBlockProps {
  heading?: string;
  description?: string;
  className?: string;
  /** Optional async submit handler. Front-end only by default (no network). */
  onSubscribe?: (email: string) => void;
}

/**
 * NewsletterBlock — a subscribe form with inline email validation and a success
 * state. NOTE: this is front-end only — it does not POST anywhere. Wire
 * `onSubscribe` (or your own action) to a real, authenticated endpoint.
 */
export function NewsletterBlock({
  heading = "Stay in the loop",
  description = "Get new components and templates in your inbox. No spam, unsubscribe anytime.",
  className,
  onSubscribe,
}: NewsletterBlockProps) {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [done, setDone] = useState(false);

  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setError("Please enter a valid email address.");
      return;
    }
    setError("");
    onSubscribe?.(email);
    setDone(true);
  };

  return (
    <section
      className={cn(
        "rounded-2xl border border-border bg-surface p-8 text-center sm:p-12",
        className,
      )}
    >
      <h2 className="text-3xl font-semibold tracking-tight">{heading}</h2>
      <p className="mx-auto mt-3 max-w-md text-muted">{description}</p>

      {done ? (
        <p className="mt-6 inline-flex items-center gap-2 text-brand-2" role="status">
          <CheckCircle2 className="size-5" />
          Thanks — you&apos;re on the list!
        </p>
      ) : (
        <form onSubmit={submit} noValidate className="mx-auto mt-6 max-w-md">
          <div className="flex flex-col gap-2 sm:flex-row">
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@example.com"
              aria-label="Email address"
              aria-invalid={!!error}
              className="flex-1 rounded-full border border-border bg-background px-4 py-2.5 text-sm outline-none focus-visible:border-brand"
            />
            <button
              type="submit"
              className="rounded-full bg-brand px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand/90"
            >
              Subscribe
            </button>
          </div>
          {error && (
            <p role="alert" className="mt-2 text-sm text-brand-3">
              {error}
            </p>
          )}
        </form>
      )}
    </section>
  );
}
```

### Comparison Table
Feature matrix comparing plans with a highlighted column.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/comparison-table.tsx

```tsx
import { Check, Minus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ComparisonRow {
  feature: string;
  /** One cell per plan: true/false, or a string value. */
  values: (boolean | string)[];
}

export interface ComparisonTableProps {
  plans?: string[];
  rows?: ComparisonRow[];
  /** Index of the highlighted plan column. */
  highlight?: number;
  className?: string;
}

const DEFAULT_PLANS = ["Starter", "Pro", "Studio"];
const DEFAULT_ROWS: ComparisonRow[] = [
  { feature: "Components", values: ["12", "All", "All"] },
  { feature: "Section blocks", values: [false, true, true] },
  { feature: "Light & dark themes", values: [true, true, true] },
  { feature: "Figma tokens", values: [false, true, true] },
  { feature: "Priority support", values: [false, false, true] },
  { feature: "Custom theming", values: [false, false, true] },
];

function Cell({ value }: { value: boolean | string }) {
  if (typeof value === "string") {
    return <span className="text-sm text-foreground">{value}</span>;
  }
  return value ? (
    <Check className="mx-auto size-4 text-brand-2" />
  ) : (
    <Minus className="mx-auto size-4 text-muted-2" />
  );
}

/**
 * ComparisonTable — a feature matrix comparing plans, with one column elevated
 * as the recommended choice.
 */
export function ComparisonTable({
  plans = DEFAULT_PLANS,
  rows = DEFAULT_ROWS,
  highlight = 1,
  className,
}: ComparisonTableProps) {
  return (
    <div
      className={cn(
        "w-full overflow-x-auto rounded-2xl border border-border",
        className,
      )}
    >
      <table className="w-full border-collapse text-left">
        <thead>
          <tr className="border-b border-border">
            <th className="p-4 text-sm font-medium text-muted">Features</th>
            {plans.map((plan, i) => (
              <th
                key={plan}
                className={cn(
                  "p-4 text-center text-sm font-semibold",
                  i === highlight && "text-brand-ink",
                )}
              >
                {plan}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, r) => (
            <tr key={r} className="border-b border-border last:border-0">
              <th
                scope="row"
                className="p-4 text-left text-sm font-normal text-foreground/90"
              >
                {row.feature}
              </th>
              {row.values.map((value, i) => (
                <td
                  key={i}
                  className={cn(
                    "p-4 text-center",
                    i === highlight && "bg-brand/5",
                  )}
                >
                  <Cell value={value} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
```

### Timeline
A vertical rail-and-node timeline of milestones.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/timeline.tsx

```tsx
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface TimelineEntry {
  time: string;
  title: string;
  description: string;
  icon?: ReactNode;
}

export interface TimelineProps {
  heading?: string;
  entries?: TimelineEntry[];
  className?: string;
}

const DEFAULT_ENTRIES: TimelineEntry[] = [
  { time: "2023", title: "The idea", description: "Sketched a motion-first kit that didn't look like everyone else's." },
  { time: "2024", title: "First components", description: "Backgrounds, text effects, and the canvas lifecycle hook landed." },
  { time: "2025", title: "Section blocks", description: "Composed primitives into drop-in hero, pricing, and footer blocks." },
  { time: "Today", title: "Copy & ship", description: "Browse, grab the source, and make it yours." },
];

/**
 * Timeline — a vertical, rail-and-node timeline of milestones.
 */
export function Timeline({
  heading = "How we got here",
  entries = DEFAULT_ENTRIES,
  className,
}: TimelineProps) {
  return (
    <section className={cn("mx-auto max-w-2xl", className)}>
      <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
        {heading}
      </h2>
      <ol className="relative mt-8 ml-4 border-l border-border">
        {entries.map((entry, i) => (
          <li key={i} className="relative ml-6 pb-8 last:pb-0">
            <span className="absolute -left-[2.25rem] top-0.5 grid size-6 place-items-center rounded-full border border-border bg-surface text-brand-ink">
              {entry.icon ?? (
                <span className="size-2 rounded-full bg-brand" />
              )}
            </span>
            <time className="text-xs font-medium uppercase tracking-wide text-brand-ink">
              {entry.time}
            </time>
            <h3 className="mt-1 font-semibold">{entry.title}</h3>
            <p className="mt-1 text-sm text-muted">{entry.description}</p>
          </li>
        ))}
      </ol>
    </section>
  );
}
```

### Banner
Dismissible announcement bar with a CTA.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/banner-block.tsx

```tsx
"use client";

import { type ReactNode, useState } from "react";
import { ArrowRight, Sparkles, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface BannerBlockProps {
  message?: ReactNode;
  ctaLabel?: string;
  className?: string;
}

/**
 * BannerBlock — a dismissible announcement bar with a gradient wash and a CTA.
 */
export function BannerBlock({
  message = "ONONC just shipped a big batch of new components.",
  ctaLabel = "See what's new",
  className,
}: BannerBlockProps) {
  const [open, setOpen] = useState(true);
  if (!open) return null;

  return (
    <div
      role="region"
      aria-label="Announcement"
      className={cn(
        "relative flex flex-wrap items-center justify-center gap-x-3 gap-y-1 overflow-hidden rounded-xl border border-border bg-gradient-to-r from-brand/15 via-brand-2/10 to-brand-3/15 px-10 py-3 text-sm",
        className,
      )}
    >
      <Sparkles className="size-4 shrink-0 text-brand-ink" aria-hidden />
      <p className="text-center text-foreground">{message}</p>
      <a
        href="#"
        className="inline-flex items-center gap-1 font-medium text-brand-ink hover:underline"
      >
        {ctaLabel}
        <ArrowRight className="size-3.5" />
      </a>
      <button
        type="button"
        onClick={() => setOpen(false)}
        aria-label="Dismiss announcement"
        className="absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted transition-colors hover:bg-background hover:text-foreground"
      >
        <X className="size-4" />
      </button>
    </div>
  );
}
```

### Team Grid
Responsive grid of team member cards with avatars.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/team-grid.tsx

```tsx
import { cn } from "@/lib/utils";

export interface TeamMember {
  name: string;
  role: string;
}

export interface TeamGridProps {
  heading?: string;
  subheading?: string;
  members?: TeamMember[];
  className?: string;
}

const GRADIENTS = [
  "from-brand to-brand-2",
  "from-brand-2 to-brand-3",
  "from-brand-3 to-brand",
  "from-indigo-500 to-brand",
  "from-brand to-brand-3",
  "from-brand-2 to-indigo-500",
];

const DEFAULT_MEMBERS: TeamMember[] = [
  { name: "Mara Vance", role: "Founder & CEO" },
  { name: "Devon Park", role: "Head of Design" },
  { name: "Iris Cho", role: "Lead Engineer" },
  { name: "Leo Mendez", role: "Product" },
  { name: "Sana Rao", role: "Developer Advocate" },
  { name: "Tom Reyes", role: "Motion Designer" },
];

function initials(name: string) {
  return name
    .split(" ")
    .map((p) => p[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

/**
 * TeamGrid — a responsive grid of team member cards, each with a gradient
 * initial avatar, name, and role.
 */
export function TeamGrid({
  heading = "Meet the team",
  subheading = "The people building ONONC.",
  members = DEFAULT_MEMBERS,
  className,
}: TeamGridProps) {
  return (
    <section className={cn("w-full", className)}>
      <div className="mx-auto max-w-xl text-center">
        <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">
          {heading}
        </h2>
        <p className="mt-3 text-muted">{subheading}</p>
      </div>
      <div className="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3">
        {members.map((member, i) => (
          <div
            key={member.name}
            className="rounded-2xl border border-border bg-surface p-5 text-center transition-colors hover:border-border-strong"
          >
            <span
              aria-hidden
              className={cn(
                "mx-auto grid size-16 place-items-center rounded-full bg-gradient-to-br text-xl font-semibold text-white",
                GRADIENTS[i % GRADIENTS.length],
              )}
            >
              {initials(member.name)}
            </span>
            <h3 className="mt-3 font-semibold">{member.name}</h3>
            <p className="text-sm text-muted">{member.role}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
```

### CTA Section
Closing call-to-action over an animated mesh.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/cta-section.tsx

```tsx
import { ArrowRight } from "lucide-react";
import { GradientMesh } from "@/components/backgrounds/gradient-mesh";
import { ShimmerButton } from "@/components/ui/shimmer-button";
import { cn } from "@/lib/utils";

export interface CTASectionProps {
  title?: string;
  description?: string;
  ctaLabel?: string;
  className?: string;
}

/**
 * CTASection — a high-contrast closing call-to-action set over an animated
 * gradient mesh, anchored by a shimmer button.
 */
export function CTASection({
  title = "Ready to make it move?",
  description = "Drop these components into your next build and ship something people remember.",
  ctaLabel = "Start building",
  className,
}: CTASectionProps) {
  return (
    <GradientMesh
      className={cn(
        "flex flex-col items-center justify-center rounded-2xl border border-border px-6 py-20 text-center",
        className,
      )}
    >
      <h2 className="max-w-2xl text-balance text-3xl font-semibold tracking-tight sm:text-5xl">
        {title}
      </h2>
      <p className="mt-4 max-w-lg text-pretty text-muted">{description}</p>
      <ShimmerButton className="mt-8">
        {ctaLabel}
        <ArrowRight className="size-4" />
      </ShimmerButton>
    </GradientMesh>
  );
}
```

### Footer
Footer with brand, real navigation links, and an optional socials row.
URL: https://dev.ononc.com/blocks
Path: src/components/blocks/footer-block.tsx

```tsx
import Link from "next/link";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FooterLink {
  label: string;
  /** Internal route ("/…", "#…") renders a next/link; anything else opens in a new tab. */
  href: string;
}

export interface FooterColumn {
  heading: string;
  links: FooterLink[];
}

export interface FooterSocial {
  label: string;
  href: string;
  icon: LucideIcon;
}

export interface FooterBlockProps {
  brand?: string;
  tagline?: string;
  columns?: FooterColumn[];
  /** Optional social icons. None are shown unless real links are supplied. */
  socials?: FooterSocial[];
  /** Small note shown opposite the copyright line. */
  note?: string;
  className?: string;
}

/**
 * Sensible defaults that point at real routes only — never dead "#" links.
 * Consumers should pass their own `columns` for their own site map.
 */
const DEFAULT_COLUMNS: FooterColumn[] = [
  {
    heading: "Library",
    links: [
      { label: "Backgrounds", href: "/backgrounds" },
      { label: "Text Animations", href: "/text" },
      { label: "Components", href: "/ui" },
      { label: "Section Blocks", href: "/blocks" },
    ],
  },
  {
    heading: "Get started",
    links: [
      { label: "Introduction", href: "/introduction" },
      { label: "Overview", href: "/" },
    ],
  },
];

/** True for same-site targets that should use client-side navigation. */
function isInternal(href: string): boolean {
  return href.startsWith("/") || href.startsWith("#");
}

/** Renders an internal next/link or an external anchor, based on the href. */
function FooterAnchor({
  href,
  className,
  ariaLabel,
  children,
}: {
  href: string;
  className?: string;
  ariaLabel?: string;
  children: React.ReactNode;
}) {
  if (isInternal(href)) {
    return (
      <Link href={href} className={className} aria-label={ariaLabel}>
        {children}
      </Link>
    );
  }
  return (
    <a
      href={href}
      target="_blank"
      rel="noreferrer noopener"
      className={className}
      aria-label={ariaLabel}
    >
      {children}
    </a>
  );
}

/**
 * FooterBlock — brand + tagline (with optional socials) beside columns of
 * real navigation links, over a legal strip. Every link resolves to an actual
 * destination; there are no placeholder buttons.
 */
export function FooterBlock({
  brand = "ONONC",
  tagline = "Original, motion-first components for the modern web.",
  columns = DEFAULT_COLUMNS,
  socials,
  note = "Built with Next.js & Tailwind.",
  className,
}: FooterBlockProps) {
  return (
    <footer
      className={cn(
        "w-full rounded-2xl border border-border bg-surface p-8 sm:p-10",
        className,
      )}
    >
      <div className="flex flex-col gap-10 lg:flex-row lg:items-start lg:justify-between">
        <div className="max-w-xs">
          <span className="text-lg font-bold tracking-tight">{brand}</span>
          <p className="mt-3 text-sm leading-relaxed text-muted">{tagline}</p>
          {socials && socials.length > 0 ? (
            <div className="mt-5 flex gap-2">
              {socials.map((social) => (
                <FooterAnchor
                  key={social.label}
                  href={social.href}
                  ariaLabel={social.label}
                  className="grid size-9 place-items-center rounded-lg border border-border text-muted outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
                >
                  <social.icon className="size-4" aria-hidden />
                </FooterAnchor>
              ))}
            </div>
          ) : null}
        </div>

        <nav
          aria-label="Footer"
          className="flex flex-wrap gap-x-12 gap-y-8 sm:gap-x-16"
        >
          {columns.map((col) => (
            <div key={col.heading} className="min-w-28">
              <h3 className="text-sm font-semibold text-foreground">
                {col.heading}
              </h3>
              <ul className="mt-3 space-y-2.5">
                {col.links.map((link) => (
                  <li key={link.label}>
                    <FooterAnchor
                      href={link.href}
                      className="rounded-sm text-sm text-muted outline-none transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:ring-2 focus-visible:ring-brand/60"
                    >
                      {link.label}
                    </FooterAnchor>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
      </div>

      <div className="mt-10 flex flex-col items-center justify-between gap-3 border-t border-border pt-6 text-sm text-muted sm:flex-row">
        <span>
          © {new Date().getFullYear()} {brand}. All rights reserved.
        </span>
        {note ? <span>{note}</span> : null}
      </div>
    </footer>
  );
}
```