# Djasha System — Full Content Dump

> All entries inline. For one-fetch agent consumption. Site: https://system.djasha.me.

## Manifest

- animated-text (component)
- character-reveal (component)
- custom-cursor (component)
- emerald-button (component)
- expandable (component)
- figure (component)
- hero-gallery (component)
- magnetic-button (component)
- parallax-image (component)
- project-card (component)
- scroll-marquee (component)
- scroll-progress (component)
- spark-cta (component)
- stacking-cards (component)
- status-chip (component)
- text-mask-reveal (component)
- tilt-card (component)
- tool-ticker (component)
- type-roles (component)
- case-study-body (pattern)
- editorial-hero (pattern)
- emerald-direction (pattern)
- filterable-work-grid (pattern)

---

# AnimatedText

Word-by-word or character-by-character staggered text reveal.

## Prompt

Build a text component that reveals words in sequence with a configurable stagger delay. Each word fades in and translates upward slightly. Use motion/react's stagger feature. Default stagger 0.05s, duration 0.6s per word. Support semantic as= prop (h1/h2/p/span). Respect prefers-reduced-motion — disable animation if set.

## Tokens

- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `motion.duration-base` — `300ms`

## A11y

Respects prefers-reduced-motion — renders text statically when enabled. Screen readers read the complete text; animation is purely visual.

## Source (`src/components/AnimatedText.tsx`)

```tsx
import { motion, useReducedMotion } from 'motion/react';

export interface AnimatedTextProps {
  text: string;
  stagger?: number;        // default 0.05 — seconds between word animations
  duration?: number;       // default 0.6 — seconds per word
  className?: string;
  as?: 'h1' | 'h2' | 'p' | 'span';
}

const ease = [0.25, 0.1, 0.25, 1] as const;

export function AnimatedText({
  text,
  stagger = 0.05,
  duration = 0.6,
  className,
  as: Tag = 'p',
}: AnimatedTextProps) {
  const reduced = useReducedMotion();
  const words = text.split(' ');
  const MotionTag = motion.create(Tag);

  return (
    <MotionTag
      className={className}
      style={{ display: 'flex', flexWrap: 'wrap', gap: '0 0.3em' }}
    >
      {words.map((word, i) => (
        <span key={i} style={{ overflow: 'hidden', display: 'inline-block' }}>
          <motion.span
            style={{ display: 'inline-block' }}
            initial={reduced ? { opacity: 1, y: '0%' } : { opacity: 0, y: '100%' }}
            whileInView={{ opacity: 1, y: '0%' }}
            viewport={{ once: true, margin: '-50px' }}
            transition={reduced ? { duration: 0 } : {
              duration,
              ease,
              delay: i * stagger,
            }}
          >
            {word}
          </motion.span>
        </span>
      ))}
    </MotionTag>
  );
}
```

## Usage

Use to give headings and body copy a deliberate entrance. Especially effective on hero sections and section intros where you want to control reading pace.

- Use `as="h1"` or `as="h2"` to preserve semantic heading hierarchy — the animation wraps the element, not a div.
- Keep stagger under 0.08s for sentences longer than 6 words — longer stagger makes the end of a sentence feel like it's loading.
- **Not** for dynamic content that updates frequently — the animation fires once via IntersectionObserver.

---

# CharacterReveal

Character-by-character text reveal with spring-animated masking.

## Prompt

Build a text reveal component that animates each character individually from a masked state to visible, with a small vertical translation. Use motion/react. Configurable stagger (default 0.02s) and duration (default 0.4s). Render as inline-block spans so the text wraps naturally. Respect prefers-reduced-motion.

## Tokens

- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `motion.duration-base` — `300ms`

## A11y

Respects prefers-reduced-motion — renders text statically when enabled. Screen readers read the complete string; the per-character animation is purely visual and does not affect semantics.

## Source (`src/components/CharacterReveal.tsx`)

```tsx
import { motion, useInView, useReducedMotion } from 'motion/react';
import { useRef } from 'react';

export interface CharacterRevealProps {
  text: string;
  stagger?: number;   // default 0.02 — seconds between characters
  duration?: number;  // default 0.4 — seconds per character
  className?: string;
}

// Spitzer-style expo.out — matches --ease-expo-out token
const charEase = [0.16, 1, 0.3, 1] as const;

/**
 * Split text into wrappable segments — keeps words together
 * but allows breaks at spaces and after hyphens.
 * e.g. "Human-centered design" → ["Human-", "centered ", "design"]
 */
function splitIntoSegments(text: string): string[] {
  const segments: string[] = [];
  let current = '';
  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    current += char;
    if (char === '-' || char === ' ') {
      segments.push(current);
      current = '';
    }
  }
  if (current) segments.push(current);
  return segments;
}

export function CharacterReveal({
  text,
  stagger = 0.02,
  duration = 0.4,
  className = '',
}: CharacterRevealProps) {
  const ref = useRef<HTMLSpanElement>(null);
  const isInView = useInView(ref, { once: true, margin: '-50px' });
  const prefersReduced = useReducedMotion();

  const segments = splitIntoSegments(text);
  let charIndex = 0;

  if (prefersReduced) {
    return (
      <span ref={ref} className={`block ${className}`}>
        {text}
      </span>
    );
  }

  return (
    <span
      ref={ref}
      className={`block ${className}`}
      style={{ display: 'block', position: 'relative', overflowY: 'clip' }}
    >
      {segments.map((segment, si) => {
        const trimmed = segment.trimEnd();
        const hasTrailingSpace = segment !== trimmed;

        return (
          <span
            key={si}
            style={{ display: 'inline-flex', whiteSpace: 'nowrap' }}
          >
            {trimmed.split('').map((char) => {
              const i = charIndex++;
              return (
                <motion.span
                  key={i}
                  style={{ display: 'inline-block', willChange: 'transform' }}
                  initial={{ y: '110%' }}
                  animate={isInView ? { y: '0%' } : { y: '110%' }}
                  transition={{
                    duration,
                    ease: charEase,
                    delay: i * stagger,
                  }}
                >
                  {char}
                </motion.span>
              );
            })}
            {hasTrailingSpace && (
              <motion.span
                key={`sp-${si}`}
                style={{ display: 'inline-block', width: '0.3em' }}
                initial={{ y: '110%' }}
                animate={isInView ? { y: '0%' } : { y: '110%' }}
                transition={{
                  duration,
                  ease: charEase,
                  delay: charIndex++ * stagger,
                }}
              >
                {'\u00A0'}
              </motion.span>
            )}
          </span>
        );
      })}
    </span>
  );
}
```

## Usage

Use for short, high-impact strings like hero headlines, section titles, or display quotes where you want maximum cinematic entrance. The per-character animation draws the eye across the entire word before it resolves.

- Keep strings under ~30 characters — longer text produces a noticeably slow tail.
- The default 0.02s stagger is tuned for 5–15 character strings; increase to 0.03s for shorter text, decrease to 0.015s for longer.
- **Not** for body copy or multi-sentence content — use AnimatedText (word-level) instead.

---

# CustomCursor

Custom branded cursor replacement with smooth trailing motion.

## Prompt

Build a custom cursor component that replaces the default pointer. A small dot tracks the cursor instantly, and a larger outline ring trails with a slight lerp delay. Hide on touch devices. Respect prefers-reduced-motion — ring snaps rather than lerps. Accept props for color, dot size, and trail size. Clean up all DOM mutations (class, listeners) on unmount.

## Tokens

- `color.accent` — `#E8462C`
- `motion.duration-base` — `300ms`

## A11y

Disabled on touch devices (doesn't mount on pointer:coarse). Falls back to native cursor if prefers-reduced-motion. Does not hide the native cursor on hover-interactive elements like inputs. Cleans up all event listeners and the global CSS class on unmount.

## Source (`src/components/CustomCursor.tsx`)

```tsx
import { useEffect, useRef } from 'react';

export interface CustomCursorProps {
  color?: string;       // default '#E8462C'
  size?: number;        // default 12 — dot diameter in px
  trailSize?: number;   // default 40 — trailing ring diameter in px
  disabled?: boolean;   // default false
}

/**
 * CustomCursor — replaces the default pointer with a branded dot + trailing ring.
 *
 * Mount at the app root so it's active sitewide.  In the playground, it applies
 * globally while the demo is mounted (which is fine for previewing).
 *
 * On touch devices (pointer:coarse) the component renders nothing.
 * When prefers-reduced-motion is set the cursor renders as a plain dot (no trail spring).
 *
 * Cleans up all event listeners and CSS mutations on unmount.
 */
export function CustomCursor({
  color = '#E8462C',
  size = 12,
  trailSize = 40,
  disabled = false,
}: CustomCursorProps) {
  const dotRef = useRef<HTMLDivElement>(null);
  const ringRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (disabled) return;
    // Touch devices — don't mount cursor
    if (!window.matchMedia('(pointer: fine)').matches) return;

    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const dot = dotRef.current!;
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    const ring = ringRef.current!;
    if (!dot || !ring) return;

    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // Hide native cursor globally
    document.documentElement.classList.add('ds-custom-cursor');

    let mouseX = -999;
    let mouseY = -999;
    let ringX = -999;
    let ringY = -999;
    let raf = 0;
    let visible = false;

    const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
    const lerpFactor = prefersReduced ? 1 : 0.12;

    function tick() {
      if (prefersReduced) {
        ring.style.transform = `translate(${mouseX}px, ${mouseY}px) translate(-50%, -50%)`;
      } else {
        ringX = lerp(ringX, mouseX, lerpFactor);
        ringY = lerp(ringY, mouseY, lerpFactor);
        ring.style.transform = `translate(${ringX}px, ${ringY}px) translate(-50%, -50%)`;
      }
      raf = requestAnimationFrame(tick);
    }

    function onMouseMove(e: MouseEvent) {
      mouseX = e.clientX;
      mouseY = e.clientY;
      dot.style.transform = `translate(${mouseX}px, ${mouseY}px) translate(-50%, -50%)`;
      if (!visible) {
        dot.style.opacity = '1';
        ring.style.opacity = '1';
        if (ringX === -999) { ringX = mouseX; ringY = mouseY; }
        visible = true;
      }
    }

    function onMouseLeave() {
      dot.style.opacity = '0';
      ring.style.opacity = '0';
      visible = false;
    }

    function onMouseEnter() {
      dot.style.opacity = '1';
      ring.style.opacity = '1';
      visible = true;
    }

    function onMouseOver(e: MouseEvent) {
      const target = e.target as HTMLElement;
      const interactive = target.closest('a, button, [role="button"], input, textarea, select, label');
      const isText = !interactive && target.closest('p, span, h1, h2, h3, h4, h5, h6, li, td, th, blockquote');

      if (interactive) {
        dot.classList.add('is-interactive');
        dot.classList.remove('is-text');
        ring.classList.add('is-interactive');
        ring.classList.remove('is-text');
      } else if (isText) {
        dot.classList.add('is-text');
        dot.classList.remove('is-interactive');
        ring.classList.add('is-text');
        ring.classList.remove('is-interactive');
      } else {
        dot.classList.remove('is-interactive', 'is-text');
        ring.classList.remove('is-interactive', 'is-text');
      }
    }

    raf = requestAnimationFrame(tick);
    document.addEventListener('mousemove', onMouseMove, { passive: true });
    document.addEventListener('mouseleave', onMouseLeave, { passive: true });
    document.addEventListener('mouseenter', onMouseEnter, { passive: true });
    document.addEventListener('mouseover', onMouseOver, { passive: true });

    return () => {
      cancelAnimationFrame(raf);
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseleave', onMouseLeave);
      document.removeEventListener('mouseenter', onMouseEnter);
      document.removeEventListener('mouseover', onMouseOver);
      document.documentElement.classList.remove('ds-custom-cursor');
    };
  }, [disabled, color, size, trailSize]);

  if (disabled) return null;

  return (
    <>
      <style>{`
        html.ds-custom-cursor,
        html.ds-custom-cursor *:not(input):not(textarea):not([contenteditable]) {
          cursor: none !important;
        }
        html.ds-custom-cursor input,
        html.ds-custom-cursor textarea,
        html.ds-custom-cursor [contenteditable] {
          cursor: auto !important;
        }
      `}</style>
      {/* Dot — instant follow */}
      <div
        ref={dotRef}
        aria-hidden="true"
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: size,
          height: size,
          borderRadius: '50%',
          background: color,
          pointerEvents: 'none',
          zIndex: 10001,
          opacity: 0,
          willChange: 'transform',
          transition: 'width 0.2s ease, height 0.2s ease, opacity 0.2s ease',
        }}
      />
      {/* Ring — lerp trail */}
      <div
        ref={ringRef}
        aria-hidden="true"
        style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: trailSize,
          height: trailSize,
          borderRadius: '50%',
          border: `1.5px solid ${color}`,
          background: 'transparent',
          pointerEvents: 'none',
          zIndex: 10000,
          opacity: 0,
          willChange: 'transform',
          transition: 'width 0.25s cubic-bezier(0.23, 1, 0.32, 1), height 0.25s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s ease',
          mixBlendMode: 'exclusion',
        }}
      />
    </>
  );
}
```

## Usage

Mount at the app root so it's active sitewide. In the Djasha System playground it applies globally for the duration of the preview — this is intentional and expected.

Use on brand-forward sites where cursor personality adds to the experience. Not for utility apps or sites with lots of precise click targets.

---

# EmeraldButton

DealDash's flagship button — Linear-style 36px control, tokenized elevation, brand glow on hover, 1px press sink. Six variants, six sizes.

## Prompt

Build a button component in the DealDash Emerald style. Base: inline-flex, gap 8px, border-radius 6px, font 500 14px Inter, transition all 120ms cubic-bezier(0.22, 1, 0.36, 1). Heights: default 36px (padding 0 16px), sm 32px, lg 40px, plus square icon sizes 36/32/40 (icon-only requires aria-label). Hover BRIGHTENS or tints — never scales; press sinks 1px (translateY) and darkens (brightness 0.95). Variants — default: bg #1a7a5e, white text, shadow "inset 0 1px 0 0 #ffffff2e, 0 1px 2px 0 #0a140f40" (dark mode: #ffffff1f / #00000066), hover adds brightness(1.08) plus a soft glow "0 0 20px -6px #1a7a5e". outline: 1px border #e6e9e7 (dark #212824), bg card #fafbfa (dark #121615), subtle drop "0 1px 2px 0 #0a140f0d" (dark #00000040); hover tints bg to accent #e7f6ef (dark #15241e), text #0f6a4f (dark #34d399), border to 25% primary. secondary: bg #f1f3f2 (dark #1a201d), highlight+subtle-drop shadows, hover 80% opacity fill. ghost: transparent, hover accent tint. destructive: bg #dc2626 (dark: #f87171 at 70% via color-mix), white text, filled shadows. link: text #1a7a5e, underline on hover, no press sink. Focus-visible: 3px ring at 50% of #1a7a5e. Disabled: opacity 0.5, no shadow, no pointer events. All values come from tokens (--primary, --border, --shadow-btn-*, --duration-fast, --ease-standard) — never hardcode them in call sites.

## Tokens

- `color.dd-primary` — `#1a7a5e`
- `color.dd-primary-foreground` — `#ffffff`
- `color.dd-card` — `#fafbfa`
- `color.dd-accent` — `#e7f6ef`
- `color.dd-accent-foreground` — `#0f6a4f`
- `color.dd-border` — `#e6e9e7`
- `color.dd-secondary` — `#f1f3f2`
- `color.dd-destructive` — `#dc2626`
- `color.dd-foreground` — `#0e1512`
- `shadow.dd-btn-highlight` — `inset 0 1px 0 0 #ffffff2e`
- `shadow.dd-btn-drop` — `0 1px 2px 0 #0a140f40`
- `shadow.dd-btn-drop-subtle` — `0 1px 2px 0 #0a140f0d`
- `motion.dd-duration-fast` — `120ms`
- `motion.dd-ease-standard` — `cubic-bezier(0.22, 1, 0.36, 1)`
- `radius.dd-base` — `0.5rem`

## A11y

Real button/anchor elements, never divs. Focus-visible ring — 3px at 50% of --ring

## Source (`src/components/EmeraldButton.tsx`)

```tsx
import type { ReactNode } from 'react';

/**
 * EmeraldButton — the DealDash flagship button, ported as a self-contained
 * component with every token value resolved inline. Linear-style: compact
 * 36px control row, 6px radius, hairline elevation from --shadow-btn-*
 * tokens, motion on 120ms + cubic-bezier(0.22, 1, 0.36, 1).
 * Hover BRIGHTENS with a soft brand glow (never scales); press sinks 1px
 * and darkens. Swap the token block below to re-theme every button at once.
 */

export type EmeraldButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
export type EmeraldButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
export type EmeraldMode = 'light' | 'dark';

export interface EmeraldButtonProps {
  children: ReactNode;
  variant?: EmeraldButtonVariant;
  size?: EmeraldButtonSize;
  /** Emerald theme mode — controls which token values apply. */
  mode?: EmeraldMode;
  disabled?: boolean;
  href?: string;
  onClick?: () => void;
  'aria-label'?: string;
}

/* DealDash Emerald tokens, resolved. Light values on the scope, dark values
 * on [data-mode="dark"]. In the host app these live on :root / .dark. */
const css = `
.dd-emerald-scope{
  --primary:#1a7a5e; --primary-foreground:#ffffff;
  --foreground:#0e1512; --card:#fafbfa;
  --secondary:#f1f3f2; --secondary-foreground:#0e1512;
  --accent:#e7f6ef; --accent-foreground:#0f6a4f;
  --destructive:#dc2626; --border:#e6e9e7; --ring:#1a7a5e;
  --shadow-btn-highlight:inset 0 1px 0 0 #ffffff2e;
  --shadow-btn-drop:0 1px 2px 0 #0a140f40;
  --shadow-btn-drop-subtle:0 1px 2px 0 #0a140f0d;
  --duration-fast:120ms; --ease-standard:cubic-bezier(0.22, 1, 0.36, 1);
  display:inline-block;
}
.dd-emerald-scope[data-mode="dark"]{
  --foreground:#f4f6f5; --card:#121615;
  --secondary:#1a201d; --secondary-foreground:#f4f6f5;
  --accent:#15241e; --accent-foreground:#34d399;
  --destructive:#f87171; --border:#212824;
  --shadow-btn-highlight:inset 0 1px 0 0 #ffffff1f;
  --shadow-btn-drop:0 1px 2px 0 #00000066;
  --shadow-btn-drop-subtle:0 1px 2px 0 #00000040;
}
.dd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap; border-radius:6px; /* controls = --radius(8px) - 2px */
  font:500 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:all var(--duration-fast) var(--ease-standard);
  outline:none; -webkit-font-smoothing:antialiased;
}
.dd-btn:active{ filter:brightness(0.95); transform:translateY(1px); }
.dd-btn:focus-visible{
  border-color:var(--ring);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
.dd-btn[disabled]{ pointer-events:none; opacity:0.5; box-shadow:none; }
/* Sizes — 36px control row standard; sm 32, lg 40. Never mix in one row. */
.dd-btn--default{ height:36px; padding:0 16px; }
.dd-btn--sm{ height:32px; padding:0 12px; gap:6px; }
.dd-btn--lg{ height:40px; padding:0 20px; }
.dd-btn--icon{ width:36px; height:36px; padding:0; }
.dd-btn--icon-sm{ width:32px; height:32px; padding:0; }
.dd-btn--icon-lg{ width:40px; height:40px; padding:0; }
/* Variants */
.dd-btn--v-default{
  background:var(--primary); color:var(--primary-foreground);
  box-shadow:var(--shadow-btn-highlight), var(--shadow-btn-drop);
}
.dd-btn--v-default:hover{
  filter:brightness(1.08);
  box-shadow:var(--shadow-btn-highlight), var(--shadow-btn-drop), 0 0 20px -6px var(--primary);
}
.dd-btn--v-destructive{
  background:var(--destructive); color:#ffffff;
  box-shadow:var(--shadow-btn-highlight), var(--shadow-btn-drop);
}
.dd-btn--v-destructive:hover{ filter:brightness(1.08); }
.dd-emerald-scope[data-mode="dark"] .dd-btn--v-destructive{
  background:color-mix(in oklab, var(--destructive) 70%, transparent);
}
.dd-btn--v-outline{
  background:var(--card); color:var(--foreground);
  border-color:var(--border); box-shadow:var(--shadow-btn-drop-subtle);
}
.dd-btn--v-outline:hover{
  background:var(--accent); color:var(--accent-foreground);
  border-color:color-mix(in oklab, var(--primary) 25%, transparent);
}
.dd-btn--v-secondary{
  background:var(--secondary); color:var(--secondary-foreground);
  box-shadow:var(--shadow-btn-highlight), var(--shadow-btn-drop-subtle);
}
.dd-btn--v-secondary:hover{ background:color-mix(in oklab, var(--secondary) 80%, transparent); }
.dd-btn--v-ghost{ background:transparent; color:var(--foreground); box-shadow:none; }
.dd-btn--v-ghost:hover{ background:var(--accent); color:var(--accent-foreground); }
.dd-btn--v-link{ background:transparent; color:var(--primary); box-shadow:none; padding:0; height:auto; }
.dd-btn--v-link:hover{ text-decoration:underline; text-underline-offset:4px; }
.dd-btn--v-link:active{ transform:none; }
@media (prefers-reduced-motion: reduce){ .dd-btn{ transition:none; } }
`;

export function EmeraldButton({
  children,
  variant = 'default',
  size = 'default',
  mode = 'dark',
  disabled = false,
  href,
  onClick,
  ...rest
}: EmeraldButtonProps) {
  const cls = `dd-btn dd-btn--${size} dd-btn--v-${variant}`;
  return (
    <span className="dd-emerald-scope" data-mode={mode}>
      <style>{css}</style>
      {href && !disabled ? (
        <a href={href} className={cls} aria-label={rest['aria-label']}>
          {children}
        </a>
      ) : (
        <button type="button" className={cls} disabled={disabled} onClick={onClick} aria-label={rest['aria-label']}>
          {children}
        </button>
      )}
    </span>
  );
}

export default EmeraldButton;
```

## Usage

- The only way to build buttons in an Emerald app — pages never compose raw button styles.
- Keep one control-row height per row: default(36) with default inputs, never mixed.
- Links that look like buttons render an anchor with the same classes (asChild pattern) — never nest a button inside an anchor.
- The trio of --shadow-btn-* tokens re-themes every button at once; restyle there, not per-button.

---

# Expandable

Click-to-toggle disclosure with smooth height animation.

## Prompt

Build an accordion-style disclosure component. A clickable header reveals/hides body content with a smooth height animation. Include `aria-expanded`, `aria-controls`, and a region role for accessibility. Configurable `defaultOpen`. Use modern CSS grid-row animation (0fr → 1fr) or motion/react. Respect prefers-reduced-motion — instant toggle when set.

## Tokens

- `color.accent` — `#E8462C`
- `motion.duration-base` — `300ms`
- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `space.4` — `1rem`
- `radius.md` — `8px`

## A11y

Header is a button (keyboard accessible). aria-expanded reflects state. aria-controls links header to body. Respects prefers-reduced-motion — height transition disabled. Body has role="region" + accessible name.

## Source (`src/components/Expandable.tsx`)

```tsx
import { useState, useId } from 'react';

export interface ExpandableProps {
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
  className?: string;
}

export function Expandable({
  title,
  children,
  defaultOpen = false,
  className = '',
}: ExpandableProps) {
  const [open, setOpen] = useState(defaultOpen);
  const bodyId = useId();

  return (
    <div className={`border-t border-bone/10 ${className}`}>
      <button
        type="button"
        aria-expanded={open}
        aria-controls={bodyId}
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center gap-2 py-4 text-left text-sm font-medium text-accent cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
      >
        {/* Chevron rotates on open */}
        <svg
          aria-hidden="true"
          className="h-4 w-4 shrink-0 transition-transform duration-[var(--duration-base)] ease-[var(--ease-out-quart)]"
          style={{ transform: open ? 'rotate(90deg)' : 'rotate(0deg)' }}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
        </svg>
        {title}
      </button>

      {/* Grid-row height animation: 0fr → 1fr */}
      <div
        id={bodyId}
        role="region"
        aria-label={title}
        className="grid overflow-hidden transition-[grid-template-rows] duration-[var(--duration-base)] ease-[var(--ease-out-quart)] motion-reduce:transition-none"
        style={{ gridTemplateRows: open ? '1fr' : '0fr' }}
      >
        <div className="min-h-0">
          <div className="pb-6 text-bone/70 text-sm leading-relaxed">
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}
```

## Usage

- Use for FAQs, optional details, "show more" content.
- Pair with chevron icon in header (rotates on open).
- Don't nest deeper than 2 levels — gets confusing.

---

# Figure

Semantic figure with image + caption + optional click-to-expand lightbox.

## Prompt

Build a semantic figure component for editorial / blog content. Wraps an image in `<figure>` with a `<figcaption>`. Support click-to-expand into a lightbox overlay. Lightbox: dims background, centers the full-size image, dismisses on Escape, click-outside, and a close button. Caption is optional. Alt text is required for accessibility. Respect `prefers-reduced-motion` — disable lightbox transitions.

## Tokens

- `color.bone` — `#F5F1EC`
- `color.elevated` — `#1A1210`
- `space.4` — `1rem`
- `radius.md` — `8px`

## A11y

Uses semantic <figure> + <figcaption>. Alt text required (TS-enforced). Lightbox closes on Escape, click-outside, and dedicated close button. Focus trapped in lightbox while open.

## Source (`src/components/Figure.tsx`)

```tsx
import { useState, useEffect, useRef, type KeyboardEvent } from 'react';

export interface FigureProps {
  src: string;
  alt: string;
  caption?: string;
  expandable?: boolean;  // default true — click to open lightbox
  type?: 'default' | 'wireframe' | 'persona' | 'diagram' | 'screenshot';
  className?: string;
}

const typeLabels: Record<string, string> = {
  wireframe: 'Wireframe',
  persona: 'Persona',
  diagram: 'Diagram',
  screenshot: 'Screenshot',
};

export function Figure({
  src,
  alt,
  caption,
  expandable = true,
  type = 'default',
  className = '',
}: FigureProps) {
  const [open, setOpen] = useState(false);
  const closeRef = useRef<HTMLButtonElement>(null);
  const openerRef = useRef<HTMLElement | null>(null);

  const typeLabel = typeLabels[type];

  const openLightbox = () => {
    openerRef.current = document.activeElement as HTMLElement;
    setOpen(true);
  };

  const closeLightbox = () => {
    setOpen(false);
    // Restore focus after transition
    requestAnimationFrame(() => openerRef.current?.focus());
  };

  // Escape key + focus trap
  useEffect(() => {
    if (!open) return;
    const handle = (e: globalThis.KeyboardEvent) => {
      if (e.key === 'Escape') closeLightbox();
    };
    document.addEventListener('keydown', handle);
    closeRef.current?.focus();
    return () => document.removeEventListener('keydown', handle);
  }, [open]);

  const prefersReduced =
    typeof window !== 'undefined' &&
    window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  return (
    <>
      <figure className={`case-figure my-8 ${className}`}>
        {typeLabel && (
          <p
            style={{
              fontSize: '0.75rem',
              textTransform: 'uppercase',
              letterSpacing: '0.1em',
              color: 'var(--color-accent, #E8462C)',
              marginBottom: '0.75rem',
            }}
          >
            {typeLabel}
          </p>
        )}
        <div
          style={{
            borderRadius: 'var(--radius-md, 0.5rem)',
            border: '1px solid rgba(255,255,255,0.08)',
            overflow: 'hidden',
            background: 'var(--color-elevated, #1A1515)',
            cursor: expandable ? 'zoom-in' : undefined,
          }}
          onClick={expandable ? openLightbox : undefined}
          role={expandable ? 'button' : undefined}
          tabIndex={expandable ? 0 : undefined}
          aria-label={expandable ? `Expand image: ${alt}` : undefined}
          onKeyDown={
            expandable
              ? (e: KeyboardEvent<HTMLDivElement>) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    openLightbox();
                  }
                }
              : undefined
          }
        >
          <img
            src={src}
            alt={alt}
            loading="lazy"
            style={{ width: '100%', height: 'auto', display: 'block' }}
          />
        </div>
        {caption && (
          <figcaption
            style={{
              fontSize: '0.75rem',
              color: 'var(--color-bone, #F0ECE4)',
              opacity: 0.6,
              textAlign: 'center',
              marginTop: '0.75rem',
            }}
          >
            {caption}
          </figcaption>
        )}
      </figure>

      {/* Lightbox overlay */}
      {open && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label={alt}
          onClick={(e) => {
            if (e.target === e.currentTarget) closeLightbox();
          }}
          style={{
            position: 'fixed',
            inset: 0,
            zIndex: 9999,
            background: 'rgba(0,0,0,0.88)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: '2rem',
            transition: prefersReduced ? 'none' : 'opacity 0.2s',
          }}
        >
          <button
            ref={closeRef}
            onClick={closeLightbox}
            aria-label="Close lightbox"
            style={{
              position: 'absolute',
              top: '1rem',
              right: '1rem',
              background: 'rgba(255,255,255,0.1)',
              border: '1px solid rgba(255,255,255,0.2)',
              borderRadius: '0.375rem',
              color: '#F0ECE4',
              cursor: 'pointer',
              padding: '0.5rem 0.75rem',
              fontSize: '0.875rem',
              fontFamily: 'monospace',
            }}
          >
            ✕ Close
          </button>
          <img
            src={src}
            alt={alt}
            style={{
              maxWidth: '90vw',
              maxHeight: '90vh',
              objectFit: 'contain',
              borderRadius: 'var(--radius-md, 0.5rem)',
              boxShadow: '0 24px 80px rgba(0,0,0,0.6)',
            }}
          />
        </div>
      )}
    </>
  );
}
```

## Usage

- Use for blog post images, case-study images, anywhere caption + image semantic structure matters.
- Set `expandable={false}` for thumbnails or anywhere a lightbox would be jarring (small icons, decorative images).
- Always provide alt text.
- Don't nest figures inside other figures — semantically invalid.

---

# HeroGallery

Multi-image hero arrangement — grid or asymmetric collage with entrance reveal.

## Prompt

Build a hero-section image arrangement. Two layouts: `grid` (uniform 2x2) and `asymmetric` (one larger image + 2-3 smaller — magazine-style). Images stagger-fade-in on mount. Configurable per-image aspect ratios. Responsive: collapses to single column under 640px. Respect prefers-reduced-motion — render without animation.

## Tokens

- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `motion.duration-base` — `300ms`
- `space.4` — `1rem`
- `radius.md` — `8px`

## A11y

Each image requires alt text. Decorative entrance animation respects prefers-reduced-motion. Grid is responsive — collapses to single column on mobile.

## Source (`src/components/HeroGallery.tsx`)

```tsx
import { useEffect, useRef, useState } from 'react';

export interface HeroGalleryImage {
  src: string;
  alt: string;
  aspect?: 'square' | 'portrait' | 'landscape';
}

export interface HeroGalleryProps {
  images: HeroGalleryImage[];
  layout?: 'grid' | 'asymmetric';
  className?: string;
}

const aspectClass: Record<string, string> = {
  square: 'aspect-square',
  portrait: 'aspect-[3/4]',
  landscape: 'aspect-[16/9]',
};

/** Stagger-fade entrance using IntersectionObserver */
function useEntranceVisible(count: number) {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!ref.current) return;
    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) { setVisible(true); return; }

    const io = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setVisible(true); io.disconnect(); } },
      { threshold: 0.1 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [count]);

  return { ref, visible };
}

function GalleryImage({
  image,
  index,
  visible,
  className = '',
}: {
  image: HeroGalleryImage;
  index: number;
  visible: boolean;
  className?: string;
}) {
  const aspect = aspectClass[image.aspect ?? 'landscape'];
  return (
    <div
      className={`overflow-hidden rounded-[var(--radius-md)] ${aspect} ${className}`}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(12px)',
        transition: visible
          ? `opacity var(--duration-base) var(--ease-out-quart) ${index * 80}ms, transform var(--duration-base) var(--ease-out-quart) ${index * 80}ms`
          : 'none',
      }}
    >
      <img
        src={image.src}
        alt={image.alt}
        className="w-full h-full object-cover"
        loading="lazy"
        decoding="async"
      />
    </div>
  );
}

export function HeroGallery({
  images,
  layout = 'asymmetric',
  className = '',
}: HeroGalleryProps) {
  const { ref, visible } = useEntranceVisible(images.length);
  const [first, ...rest] = images;

  if (layout === 'grid') {
    return (
      <div
        ref={ref}
        className={`grid grid-cols-2 gap-[var(--space-4)] sm:grid-cols-2 ${className}`}
      >
        {images.map((img, i) => (
          <GalleryImage key={i} image={img} index={i} visible={visible} />
        ))}
      </div>
    );
  }

  // Asymmetric: first image is large (full width on mobile, left col on desktop),
  // remaining images stack in the right column.
  return (
    <div
      ref={ref}
      className={`grid grid-cols-1 gap-[var(--space-4)] sm:grid-cols-2 ${className}`}
    >
      {/* Large primary image */}
      {first && (
        <GalleryImage
          image={first}
          index={0}
          visible={visible}
          className="sm:row-span-2"
        />
      )}
      {/* Secondary images stacked */}
      {rest.map((img, i) => (
        <GalleryImage key={i + 1} image={img} index={i + 1} visible={visible} />
      ))}
    </div>
  );
}
```

## Usage

- Use as the visual anchor for landing/about pages.
- 3-5 images optimal — fewer feels sparse, more is busy.
- Pair with editorial typography (Space Grotesk display) for the headline that sits beside the gallery.

---

# MagneticButton

Button with cursor-proximity magnetic pull for subtle attention in primary CTAs.

## Prompt

Build a button component that applies a subtle translation toward the cursor when the cursor enters a small radius around it. Use a configurable pull strength (0–1, default 0.3) and eased duration (default 300ms, ease-out-quart). On mouseleave, the button springs back to center. Respect `prefers-reduced-motion` — disable the pull effect entirely. Primary color accent for focus ring and hover state.

## Tokens

- `color.accent` — `#E8462C`
- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `motion.duration-base` — `300ms`
- `space.4` — `1rem`

## A11y

Respects prefers-reduced-motion — pull effect disables. Focus ring uses outline (no transform). Keyboard-activatable via Space/Enter.

## Source (`src/components/MagneticButton.tsx`)

```tsx
import { useRef, type MouseEvent, type ReactNode } from 'react';
import { motion, useMotionValue, useSpring, useReducedMotion } from 'motion/react';

export interface MagneticButtonProps {
  children: ReactNode;
  accent?: string;
  pullStrength?: number;
  durationMs?: number;
  className?: string;
  href?: string;
  onClick?: () => void;
}

export function MagneticButton({
  children,
  accent = '#E8462C',
  pullStrength = 0.3,
  durationMs = 300,
  className = '',
  href,
  onClick,
}: MagneticButtonProps) {
  const ref = useRef<HTMLDivElement>(null);
  const reduced = useReducedMotion();

  const stiffness = Math.max(50, 600 - durationMs * 0.9);
  const damping = Math.max(10, 30 - durationMs * 0.01);
  const springConfig = { stiffness, damping, mass: 0.5 };

  const x = useSpring(useMotionValue(0), springConfig);
  const y = useSpring(useMotionValue(0), springConfig);

  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
    if (reduced) return;
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const distX = e.clientX - (rect.left + rect.width / 2);
    const distY = e.clientY - (rect.top + rect.height / 2);
    const maxDist = 8;
    const clamp = (v: number) => Math.max(-maxDist, Math.min(maxDist, v * pullStrength));
    x.set(clamp(distX));
    y.set(clamp(distY));
  };

  const handleMouseLeave = () => {
    x.set(0);
    y.set(0);
  };

  const defaultClass = 'px-5 py-2.5 text-sm font-mono rounded-md border bg-transparent transition-colors hover:bg-white/5';
  const mergedClass = className || defaultClass;

  return (
    <div
      ref={ref}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{ display: 'inline-block' }}
    >
      <motion.div style={{ x, y }}>
        {href ? (
          <a href={href} className={mergedClass} style={{ borderColor: accent, color: accent }}>
            {children}
          </a>
        ) : (
          <button type="button" onClick={onClick} className={mergedClass} style={{ borderColor: accent, color: accent }}>
            {children}
          </button>
        )}
      </motion.div>
    </div>
  );
}
```

## Usage

- Use for primary CTAs where subtle motion draws the eye without shouting.
- **Not** for forms, modal buttons, or anywhere users expect clicks at pixel-precise positions.
- Do not stack multiple MagneticButtons in close proximity — they'll compete for cursor attention.

---

# ParallaxImage

Image that translates at a fraction of the scroll speed for depth.

## Prompt

Build a parallax image component. The image translates vertically at a configurable fraction of the scroll speed (default 0.5). Use framer-motion `useScroll` + `useTransform` targeting the component's own element with `offset: ['start end', 'end start']`. The image height is expanded by `speed × 48%` to prevent clipping. Configurable speed multiplier. Always requires alt text for a11y. Respect prefers-reduced-motion.

## Tokens

- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`

## A11y

Respects prefers-reduced-motion — image renders statically. Always provide alt text. Image is wrapped in a container with overflow:hidden to prevent layout shift.

## Source (`src/components/ParallaxImage.tsx`)

```tsx
import { useRef } from 'react';
import { motion, useScroll, useTransform } from 'motion/react';

export interface ParallaxImageProps {
  src: string;
  alt: string;
  speed?: number;       // 0–1.5 parallax multiplier; default 0.5 (image moves at half scroll speed)
  className?: string;
  width?: number;
  height?: number;
}

/**
 * ParallaxImage — image that translates vertically at a fraction of the scroll speed.
 *
 * `speed` controls the parallax intensity:
 *  - 0   → no parallax (image scrolls normally)
 *  - 0.5 → image moves at half the scroll rate (default)
 *  - 1   → image stays fixed relative to viewport
 *  - 1.5 → image moves opposite to scroll (dramatic effect)
 *
 * The image is sized to 100% + 2*range to prevent clipping at extremes.
 * Respects prefers-reduced-motion — image renders statically.
 */
export function ParallaxImage({
  src,
  alt,
  speed = 0.5,
  className = '',
  width,
  height,
}: ParallaxImageProps) {
  const ref = useRef<HTMLDivElement>(null);

  // Derive translation range from speed: speed 0.5 → ±12%, speed 1 → ±24%
  const rangePercent = speed * 24;

  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start'],
  });

  const y = useTransform(
    scrollYProgress,
    [0, 1],
    [`${-rangePercent}%`, `${rangePercent}%`]
  );

  const ease = [0.16, 1, 0.3, 1] as const;

  return (
    <div
      ref={ref}
      className={className}
      style={{ overflow: 'hidden', position: 'relative' }}
    >
      <motion.img
        src={src}
        alt={alt}
        width={width}
        height={height}
        style={{
          y,
          width: '100%',
          height: `${100 + rangePercent * 2}%`,
          objectFit: 'cover',
          willChange: 'transform',
          display: 'block',
        }}
        transition={{ ease }}
      />
    </div>
  );
}
```

## Usage

Use for hero images, project covers, or decorative imagery where a subtle depth effect adds visual richness as users scroll. Works best with tall images or images with a clear subject in the center.

---

# ProjectCard

Case-study card with hover-state image reveal — image, title, description, tag chips.

## Prompt

Build a case-study card for portfolio / project listings. Layout: image on top (16:9 aspect), title + description below, tag chips at the bottom. Hover: image scale-up subtle (1.02-1.04), accent border reveal. The whole card is a single `<a>` link. Required props: title, description, href. Optional: imageSrc + imageAlt, tags. Respect prefers-reduced-motion — skip the scale animation.

## Tokens

- `color.accent` — `#E8462C`
- `color.elevated` — `#1A1210`
- `motion.duration-base` — `300ms`
- `space.4` — `1rem`
- `radius.md` — `8px`

## A11y

The whole card is a single anchor (one focusable element). Image alt text is required when imageSrc provided. Hover state is decorative; all info is in text. Focus state is highly visible (outline + accent border).

## Source (`src/components/ProjectCard.tsx`)

```tsx
export interface ProjectCardProps {
  title: string;
  description: string;
  href: string;
  imageSrc?: string;
  imageAlt?: string;
  tags?: string[];
  /** Optional category label shown above the title */
  category?: string;
  className?: string;
}

export function ProjectCard({
  title,
  description,
  href,
  imageSrc,
  imageAlt,
  tags = [],
  category,
  className = '',
}: ProjectCardProps) {
  return (
    <a
      href={href}
      className={`group block relative overflow-hidden bg-elevated rounded-[var(--radius-md)] transition-all duration-[var(--duration-base)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent ${className}`}
    >
      {/* Image area — 16:10 aspect ratio matching portfolio */}
      <div className="aspect-[16/10] overflow-hidden relative bg-elevated">
        {imageSrc ? (
          <img
            src={imageSrc}
            alt={imageAlt ?? ''}
            className="w-full h-full object-cover transition-transform duration-[var(--duration-base)] ease-[var(--ease-out-quart)] motion-reduce:transition-none group-hover:scale-[1.03]"
            loading="lazy"
            decoding="async"
          />
        ) : (
          /* Placeholder when no image */
          <div className="w-full h-full relative">
            <div
              className="absolute inset-0 opacity-[0.04]"
              style={{
                backgroundImage:
                  'linear-gradient(rgba(232,70,44,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(232,70,44,0.5) 1px, transparent 1px)',
                backgroundSize: '3rem 3rem',
              }}
            />
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-32 h-32 rounded-full opacity-10 blur-3xl bg-accent" />
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="font-display text-[4rem] font-extrabold text-white/[0.04] select-none uppercase">
                {title}
              </span>
            </div>
          </div>
        )}
        {/* Bottom fade */}
        <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-elevated to-transparent" />
      </div>

      {/* Content */}
      <div className="p-[var(--space-4)] -mt-4 relative z-10">
        {category && (
          <p className="text-xs uppercase tracking-[0.12em] text-accent mb-2">{category}</p>
        )}
        <h3 className="text-xl font-bold text-bone group-hover:text-accent transition-colors duration-[var(--duration-base)] uppercase">
          {title}
        </h3>
        {description && (
          <p className="mt-3 text-sm text-bone/60 line-clamp-2">{description}</p>
        )}
        {tags.length > 0 && (
          <div className="mt-4 flex flex-wrap gap-2">
            {tags.slice(0, 4).map((tag) => (
              <span
                key={tag}
                className="text-xs tracking-wide px-2 py-0.5 text-bone/40 border-b border-bone/20"
              >
                {tag}
              </span>
            ))}
          </div>
        )}
      </div>

      {/* Red accent left border on hover */}
      <div className="absolute left-0 top-0 bottom-0 w-[2px] bg-accent scale-y-0 group-hover:scale-y-100 transition-transform duration-[var(--duration-base)] ease-[var(--ease-out-quart)] origin-top motion-reduce:transition-none" />
    </a>
  );
}
```

## Usage

- Use on /work, /projects, /portfolio listing pages.
- Pair with `FilterableWorkGrid` or `ImageGrid` for layout structure.
- Use 2-3 tags max — more clutter the card.

---

# ScrollMarquee

Horizontally-scrolling marquee for announcements, brand ribbons, or feature tickers.

## Prompt

Build a horizontal marquee component that scrolls its children continuously. Configurable speed in pixels per second (default 50), direction (left/right, default left), and pause-on-hover (default true). Duplicate the content to create seamless looping. Use CSS animation with a transform: translateX and duration derived from content width / speed. Respect prefers-reduced-motion — pause or disable. Ensure keyboard focus also pauses the animation for a11y.

## Tokens

- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `motion.duration-base` — `300ms`

## A11y

Respects prefers-reduced-motion — animation disables. Pauses on hover and on keyboard focus. Use aria-label on the wrapper to describe contents.

## Source (`src/components/ScrollMarquee.tsx`)

```tsx
import { useRef, useEffect, type ReactNode } from 'react';

export interface ScrollMarqueeProps {
  children: ReactNode;
  speed?: number;          // pixels per second, default 50
  direction?: 'left' | 'right'; // default 'left'
  pauseOnHover?: boolean;  // default true
  className?: string;
}

export function ScrollMarquee({
  children,
  speed = 50,
  direction = 'left',
  pauseOnHover = true,
  className = '',
}: ScrollMarqueeProps) {
  const trackRef = useRef<HTMLDivElement>(null);

  // Derive animation duration from track width / speed
  useEffect(() => {
    const track = trackRef.current;
    if (!track) return;

    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;

    const group = track.querySelector<HTMLElement>('.marquee-group');
    if (!group) return;

    const groupWidth = group.offsetWidth;
    if (groupWidth <= 0) return;

    const duration = groupWidth / speed;
    track.style.setProperty('--marquee-duration', `${duration}s`);
    track.style.setProperty('--marquee-direction', direction === 'right' ? 'reverse' : 'normal');
  }, [speed, direction]);

  return (
    <div
      className={`scroll-marquee-wrapper ${className}`}
      style={{ overflow: 'hidden', position: 'relative' }}
      onMouseEnter={pauseOnHover ? () => trackRef.current?.style.setProperty('animation-play-state', 'paused') : undefined}
      onMouseLeave={pauseOnHover ? () => trackRef.current?.style.setProperty('animation-play-state', 'running') : undefined}
      onFocus={pauseOnHover ? () => trackRef.current?.style.setProperty('animation-play-state', 'paused') : undefined}
      onBlur={pauseOnHover ? () => trackRef.current?.style.setProperty('animation-play-state', 'running') : undefined}
    >
      <div
        ref={trackRef}
        className="marquee-track"
        style={{
          display: 'inline-flex',
          willChange: 'transform',
          animation: 'scroll-marquee-scroll var(--marquee-duration, 20s) linear infinite var(--marquee-direction, normal)',
          whiteSpace: 'nowrap',
        }}
        aria-live="off"
      >
        {/* Duplicate 3× for seamless loop */}
        {[0, 1, 2].map((i) => (
          <span
            key={i}
            className="marquee-group"
            aria-hidden={i > 0 ? 'true' : undefined}
            style={{ display: 'inline-flex', flexShrink: 0 }}
          >
            {children}
          </span>
        ))}
      </div>
      <style>{`
        @keyframes scroll-marquee-scroll {
          from { transform: translate3d(0, 0, 0); }
          to   { transform: translate3d(-33.333%, 0, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
          .marquee-track {
            animation: none !important;
          }
        }
      `}</style>
    </div>
  );
}
```

## Usage

Use for brand logo ribbons, tool tickers on landing pages, or announcement bars where the horizontal motion adds energy.

---

# ScrollProgress

Thin top/bottom bar tracking scroll position as percentage of page height.

## Prompt

Build a fixed-position thin bar indicating scroll progress through the current page. Bar fills left-to-right as the user scrolls, hits 100% at page bottom. Configurable color, height (default 3px), and position (top or bottom of viewport). Decorative — aria-hidden. Use a passive scroll listener with rAF for smoothness. Reset to 0 on navigation.

## Tokens

- `color.accent` — `#E8462C`

## A11y

Decorative only — visually indicates progress for sighted users. Has aria-hidden by default. Does NOT replace any structural progress indicator.

## Source (`src/components/ScrollProgress.tsx`)

```tsx
import { useState, useEffect, useRef, type RefObject } from 'react';

export interface ScrollProgressProps {
  color?: string;       // default '#E8462C'
  height?: number;      // default 3 — px
  position?: 'top' | 'bottom';
  scrollContainer?: RefObject<HTMLElement | null>;  // scroll target; defaults to window
  className?: string;
}

export function ScrollProgress({
  color = '#E8462C',
  height = 3,
  position = 'top',
  scrollContainer,
  className = '',
}: ScrollProgressProps) {
  const [progress, setProgress] = useState(0);
  const rafRef = useRef<number | null>(null);

  useEffect(() => {
    const getProgress = () => {
      const el = scrollContainer?.current;
      if (el) {
        const scrollTop = el.scrollTop;
        const scrollHeight = el.scrollHeight - el.clientHeight;
        return scrollHeight > 0 ? scrollTop / scrollHeight : 0;
      }
      // Window fallback
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      return docHeight > 0 ? scrollTop / docHeight : 0;
    };

    const handleScroll = () => {
      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
      rafRef.current = requestAnimationFrame(() => {
        setProgress(getProgress());
      });
    };

    const target = scrollContainer?.current ?? window;
    (target as EventTarget).addEventListener('scroll', handleScroll, { passive: true });

    // Initial read
    setProgress(getProgress());

    return () => {
      (target as EventTarget).removeEventListener('scroll', handleScroll);
      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
    };
  }, [scrollContainer]);

  return (
    <div
      aria-hidden="true"
      className={className}
      style={{
        position: scrollContainer?.current ? 'absolute' : 'fixed',
        [position === 'top' ? 'top' : 'bottom']: 0,
        left: 0,
        right: 0,
        height: `${height}px`,
        background: color,
        transformOrigin: 'left',
        transform: `scaleX(${progress})`,
        zIndex: 9999,
        pointerEvents: 'none',
      }}
    />
  );
}
```

## Usage

- Use on long-form pages: blog posts, case studies, docs.
- Don't use on short pages where scroll is minimal.
- Pair with sticky nav at top, or place at bottom to avoid visual conflict.

---

# SparkCta

DealDash's signature CTA effect — a comet of light orbiting the button edge. Pure CSS, GPU-cheap, one per view, reduced-motion safe.

## Prompt

Add DealDash's "spark" effect to one primary CTA button. Register a custom property first — `@property --spark-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }` — and animate ONLY it: `@keyframes spark-orbit { to { --spark-angle: 360deg; } }` (GPU-cheap, no layout). Give the button `position: relative; isolation: isolate` and two pseudo-element layers with `border-radius: inherit; pointer-events: none`. Both layers paint the same double background: (1) a comet — `conic-gradient(from var(--spark-angle), transparent 0deg, transparent 240deg, color-mix(in oklab, #1a7a5e 30%, transparent) 290deg, color-mix(in oklab, #34d399 80%, transparent) 328deg, color-mix(in oklab, #eafff5 92%, #34d399) 340deg, color-mix(in oklab, #34d399 60%, transparent) 347deg, transparent 353deg) border-box` — over (2) a faint always-on track, `conic-gradient(color-mix(in oklab, #34d399 12%, transparent) 0deg 360deg) border-box`. Ring-mask both layers with `mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude` (plus -webkit-mask-composite: xor). ::before = crisp ring: inset -1px, padding 1px, z-index -1. ::after = bloom: inset -2px, padding 2px, z-index -2, blur(6px), opacity 0.6 (0.85 on hover). Animation: `spark-orbit 4.5s linear infinite`, quickening to 2.2s on hover. Under prefers-reduced-motion: animation none, background becomes a static `color-mix(in oklab, #34d399 28%, transparent)` ring, and ::after is display:none. In a tokenized app use var(--primary) for #1a7a5e and var(--chart-1) for #34d399. Use on AT MOST ONE CTA per view.

## Tokens

- `color.dd-primary` — `#1a7a5e`
- `color.dd-primary-foreground` — `#ffffff`
- `color.dd-spark` — `#34d399`
- `shadow.dd-btn-highlight` — `inset 0 1px 0 0 #ffffff2e`
- `shadow.dd-btn-drop` — `0 1px 2px 0 #0a140f40`
- `motion.dd-duration-fast` — `120ms`
- `motion.dd-ease-standard` — `cubic-bezier(0.22, 1, 0.36, 1)`
- `radius.dd-base` — `0.5rem`

## A11y

Prefers-reduced-motion renders a static soft ring (28% mint) and removes the bloom layer entirely — nothing still moves. The effect is decorative overlay only (pointer-events none, no content) so screen readers see a plain button. Underlying button keeps the standard 3px focus-visible ring. Ambient animation limited to ONE instance per view by rule.

## Source (`src/components/SparkCta.tsx`)

```tsx
import type { ReactNode } from 'react';

/**
 * SparkCta — DealDash's signature CTA effect: a comet of light orbiting the
 * button edge. Two pure-CSS layers over a faint always-on track:
 *   ::before — crisp 1px ring: dim track + long-tail comet, head near-white mint.
 *   ::after  — the same comet blurred into a soft bloom outside the edge,
 *              so the light reads as emissive, not painted.
 * Only the registered --spark-angle custom property animates (GPU-cheap, no
 * layout). Orbit is slow and cinematic at rest (4.5s), quickens on hover
 * (2.2s). Reduced motion renders a static soft ring.
 *
 * RULES: at most ONE spark per view, primary CTA only (hero "Start Free",
 * featured plan, final CTA). It is brand garnish, not a component default.
 */

export interface SparkCtaProps {
  children?: ReactNode;
  label?: string;
  /** Idle orbit period in seconds (DealDash standard: 4.5). */
  idleSeconds?: number;
  /** Hover orbit period in seconds (DealDash standard: 2.2). */
  hoverSeconds?: number;
  mode?: 'light' | 'dark';
  href?: string;
  onClick?: () => void;
}

/* Resolved DealDash Emerald tokens: --primary #1a7a5e, --chart-1 #34d399
 * (comet), --shadow-btn-* elevation, 120ms/ease-standard motion. */
const css = `
@property --spark-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes spark-orbit { to { --spark-angle: 360deg; } }
.dd-spark-scope{
  --primary:#1a7a5e; --primary-foreground:#ffffff; --chart-1:#34d399;
  --ring:#1a7a5e;
  --shadow-btn-highlight:inset 0 1px 0 0 #ffffff2e;
  --shadow-btn-drop:0 1px 2px 0 #0a140f40;
  --duration-fast:120ms; --ease-standard:cubic-bezier(0.22, 1, 0.36, 1);
  display:inline-block;
}
.dd-spark-scope[data-mode="dark"]{
  --shadow-btn-highlight:inset 0 1px 0 0 #ffffff1f;
  --shadow-btn-drop:0 1px 2px 0 #00000066;
}
.dd-spark-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 20px; border-radius:6px; border:none; cursor:pointer;
  font:500 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  background:var(--primary); color:var(--primary-foreground);
  box-shadow:var(--shadow-btn-highlight), var(--shadow-btn-drop);
  transition:all var(--duration-fast) var(--ease-standard);
  text-decoration:none; outline:none;
}
.dd-spark-btn:hover{
  filter:brightness(1.08);
  box-shadow:var(--shadow-btn-highlight), var(--shadow-btn-drop), 0 0 20px -6px var(--primary);
}
.dd-spark-btn:active{ filter:brightness(0.95); transform:translateY(1px); }
.dd-spark-btn:focus-visible{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
}
/* The spark itself. Put .btn-spark on any button (asChild anchors too). */
.btn-spark{ position:relative; isolation:isolate; }
.btn-spark::before,
.btn-spark::after{
  content:"";
  position:absolute;
  border-radius:inherit;
  pointer-events:none;
  background:
    conic-gradient(
        from var(--spark-angle),
        transparent 0deg,
        transparent 240deg,
        color-mix(in oklab, var(--primary) 30%, transparent) 290deg,
        color-mix(in oklab, var(--chart-1) 80%, transparent) 328deg,
        color-mix(in oklab, #eafff5 92%, var(--chart-1)) 340deg,
        color-mix(in oklab, var(--chart-1) 60%, transparent) 347deg,
        transparent 353deg
      )
      border-box,
    conic-gradient(
        color-mix(in oklab, var(--chart-1) 12%, transparent) 0deg,
        color-mix(in oklab, var(--chart-1) 12%, transparent) 360deg
      )
      border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: spark-orbit var(--spark-idle, 4.5s) linear infinite;
}
.btn-spark::before{ inset:-1px; padding:1px; z-index:-1; }
.btn-spark::after{ inset:-2px; padding:2px; z-index:-2; filter:blur(6px); opacity:0.6; }
.btn-spark:hover::before,
.btn-spark:hover::after{ animation-duration: var(--spark-hover, 2.2s); }
.btn-spark:hover::after{ opacity:0.85; }
@media (prefers-reduced-motion: reduce){
  .btn-spark::before,
  .btn-spark::after{
    animation:none;
    background: color-mix(in oklab, var(--chart-1) 28%, transparent);
  }
  .btn-spark::after{ display:none; }
  .dd-spark-btn{ transition:none; }
}
`;

export function SparkCta({
  children,
  label = 'Start Free',
  idleSeconds = 4.5,
  hoverSeconds = 2.2,
  mode = 'dark',
  href,
  onClick,
}: SparkCtaProps) {
  const speed = {
    ['--spark-idle' as string]: `${idleSeconds}s`,
    ['--spark-hover' as string]: `${hoverSeconds}s`,
  };
  const content = children ?? label;
  return (
    <span className="dd-spark-scope" data-mode={mode} style={speed}>
      <style>{css}</style>
      {href ? (
        <a href={href} className="dd-spark-btn btn-spark">{content}</a>
      ) : (
        <button type="button" className="dd-spark-btn btn-spark" onClick={onClick}>{content}</button>
      )}
    </span>
  );
}

export default SparkCta;
```

## Usage

- Reserved for the single most important CTA: hero "Start Free", the featured pricing plan, the final CTA section.
- Works on any element with a border-radius — Button, asChild anchors — just add the `btn-spark` class when the CSS is global.
- The spark is brand garnish, not a component default: if two things spark, nothing is special.

---

# StackingCards

Scroll-pinned stack of cards that layer on top of each other as the user scrolls.

## Prompt

Build a scroll-pinned stacking cards component. Cards enter from the bottom and pin in place as the user scrolls, stacking above each other with a slight offset. Uses CSS `position: sticky` with progressively higher `top` values per card, and IntersectionObserver for entrance animations. Configurable sticky behavior. Respect prefers-reduced-motion — render as a simple vertical list when enabled.

## Tokens

- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `radius.md` — `8px`
- `space.8` — `2rem`

## A11y

Respects prefers-reduced-motion — cards render stacked vertically without pinning. All cards are in DOM order so screen readers read them sequentially.

## Source (`src/components/StackingCards.tsx`)

```tsx
import { useEffect, useRef, type CSSProperties } from 'react';

export interface StackingCard {
  title: string;
  body?: string;
  color?: string;
}

export interface StackingCardsProps {
  cards: StackingCard[];
  sticky?: boolean;  // default true
  className?: string;
}

const STACK_OFFSET = 16; // px — how much each card is offset from the one below
const TOP_OFFSET = 80;   // px — distance from viewport top when pinned

/**
 * StackingCards — scroll-pinned cards that layer on top of each other as you scroll.
 *
 * Each card becomes `position: sticky` at a progressively lower `top` value so they
 * appear to stack. An IntersectionObserver drives the entrance animation (fade + slide).
 *
 * Respects prefers-reduced-motion: renders as a simple vertical list without sticky or
 * entrance animations.
 */
export function StackingCards({ cards, sticky = true, className = '' }: StackingCardsProps) {
  const containerRef = useRef<HTMLOListElement>(null);

  useEffect(() => {
    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;

    const container = containerRef.current;
    if (!container) return;

    const items = Array.from(container.querySelectorAll<HTMLElement>('.stacking-card-item'));
    if (!items.length) return;

    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            (entry.target as HTMLElement).style.opacity = '1';
            (entry.target as HTMLElement).style.transform = 'translateY(0)';
            observer.unobserve(entry.target);
          }
        }
      },
      { rootMargin: '0px 0px -15% 0px', threshold: 0.1 }
    );

    items.forEach((item) => observer.observe(item));

    return () => observer.disconnect();
  }, [cards]);

  const prefersReducedStatic =
    typeof window !== 'undefined'
      ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
      : false;

  return (
    <ol
      ref={containerRef}
      className={`stacking-cards-list ${className}`}
      style={{
        listStyle: 'none',
        margin: 0,
        padding: 0,
        position: 'relative',
      }}
    >
      {cards.map((card, i) => {
        const accent = card.color ?? '#E8462C';
        const topValue = sticky && !prefersReducedStatic
          ? TOP_OFFSET + i * STACK_OFFSET
          : 'auto';

        const cardStyle: CSSProperties = {
          position: sticky && !prefersReducedStatic ? 'sticky' : 'relative',
          top: topValue,
          zIndex: i + 1,
          marginBottom: sticky && !prefersReducedStatic ? '1.5rem' : '1rem',
          // Entrance animation initial state
          opacity: prefersReducedStatic ? 1 : 0,
          transform: prefersReducedStatic ? 'none' : 'translateY(24px)',
          transition: prefersReducedStatic
            ? 'none'
            : 'opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)',
          willChange: 'opacity, transform',
        };

        const innerStyle: CSSProperties = {
          borderRadius: '12px',
          border: '1px solid rgba(240,236,228,0.10)',
          background: `linear-gradient(135deg, #15110F 0%, #0B0908 100%)`,
          padding: '2rem 2.5rem',
          boxShadow: `0 2px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px ${accent}18`,
        };

        return (
          <li key={i} className="stacking-card-item" style={cardStyle}>
            <div style={innerStyle}>
              <div
                style={{
                  width: 8,
                  height: 8,
                  borderRadius: '50%',
                  background: accent,
                  marginBottom: '1.25rem',
                  opacity: 0.9,
                }}
              />
              <h3
                style={{
                  margin: '0 0 0.625rem',
                  fontSize: '1.25rem',
                  fontWeight: 700,
                  letterSpacing: '-0.02em',
                  color: '#F5F1EC',
                  lineHeight: 1.2,
                }}
              >
                {card.title}
              </h3>
              {card.body && (
                <p
                  style={{
                    margin: 0,
                    fontSize: '0.9375rem',
                    color: 'rgba(245,241,236,0.55)',
                    lineHeight: 1.65,
                  }}
                >
                  {card.body}
                </p>
              )}
              <div
                style={{
                  marginTop: '1.5rem',
                  fontSize: '0.6875rem',
                  fontFamily: 'ui-monospace, monospace',
                  letterSpacing: '0.12em',
                  textTransform: 'uppercase',
                  color: accent,
                  opacity: 0.7,
                }}
              >
                {String(i + 1).padStart(2, '0')}
              </div>
            </div>
          </li>
        );
      })}
    </ol>
  );
}
```

## Usage

Use for process steps, feature lists, or any sequential content where the "piling up" metaphor reinforces hierarchy. Works best inside a sufficiently tall container so the scroll effect has room to play out.

The sticky effect requires the component to be embedded in a real scrolling layout. The playground preview shows the static layout — embed in a page to see the pinned effect.

---

# StatusChip

DealDash's sanctioned soft status chip — 10% tint fill, full-strength text, 20% border, mapped to exactly four semantic tokens.

## Prompt

Build a soft status chip in the DealDash Emerald style. Recipe: background = status color at 10% (color-mix in oklab with transparent; 15% for warning), text = status color at full strength, border = 1px solid status color at 20%. Shape: inline-flex, height 22px, padding 0 8px, border-radius 4px (or 9999px for pills), font 500 12px/1 Inter. The four statuses map to semantic tokens — success/positive: #1a7a5e (--primary, same in dark), warning: #b45309 (dark #fbbf24), info: #1d4ed8 (dark #60a5fa), danger: #dc2626 (dark #f87171). No other palette is allowed: no emerald/amber/blue/zinc Tailwind classes, no raw hex in pages. In Tailwind terms the recipe is `bg-{status}/10 text-{status} border-{status}/20` (bg-warning/15 for warning). Keep the page's status→chip mapping in one const, typed against the status union.

## Tokens

- `color.dd-primary` — `#1a7a5e`
- `color.dd-warning` — `#b45309`
- `color.dd-info` — `#1d4ed8`
- `color.dd-destructive` — `#dc2626`
- `radius.dd-base` — `0.5rem`

## A11y

Chip text is the full-strength status color on a 10–15% tint — AA at 12px/500 in both modes (dark mode swaps to lighter hues

## Source (`src/components/StatusChip.tsx`)

```tsx
import type { ReactNode } from 'react';

/**
 * StatusChip — DealDash's sanctioned soft status chip recipe:
 *
 *   bg-{status}/10  text-{status}  border-{status}/20   (15% fill for warning)
 *
 * Status maps to exactly four semantic tokens — success/positive = --primary,
 * warning = --warning, info = --info, danger = --destructive. No emerald,
 * amber, blue, zinc, or raw-hex palette classes in pages — ever. Status maps
 * live in one const per page, typed against the status union.
 */

export type ChipStatus = 'success' | 'warning' | 'info' | 'danger';

export interface StatusChipProps {
  status?: ChipStatus;
  children?: ReactNode;
  label?: string;
  /** Rounded-full pill instead of the default 4px (rounded-sm). */
  pill?: boolean;
  mode?: 'light' | 'dark';
}

/* Resolved DealDash Emerald status tokens (light / dark):
 * success --primary  #1a7a5e / #1a7a5e   warning --warning #b45309 / #fbbf24
 * info    --info     #1d4ed8 / #60a5fa   danger  --destructive #dc2626 / #f87171 */
const css = `
.dd-chip-scope{
  --primary:#1a7a5e; --warning:#b45309; --info:#1d4ed8; --destructive:#dc2626;
  display:inline-block;
}
.dd-chip-scope[data-mode="dark"]{
  --warning:#fbbf24; --info:#60a5fa; --destructive:#f87171;
}
.dd-chip{
  display:inline-flex; align-items:center; gap:6px;
  height:22px; padding:0 8px; border-radius:4px; /* chips: rounded-sm or full */
  font:500 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  background:color-mix(in oklab, var(--chip-color) 10%, transparent);
  color:var(--chip-color);
  border:1px solid color-mix(in oklab, var(--chip-color) 20%, transparent);
  white-space:nowrap; -webkit-font-smoothing:antialiased;
}
.dd-chip--pill{ border-radius:9999px; }
.dd-chip--success{ --chip-color:var(--primary); }
.dd-chip--warning{
  --chip-color:var(--warning);
  background:color-mix(in oklab, var(--chip-color) 15%, transparent); /* 15 for warning fills */
}
.dd-chip--info{ --chip-color:var(--info); }
.dd-chip--danger{ --chip-color:var(--destructive); }
`;

export function StatusChip({
  status = 'success',
  children,
  label,
  pill = false,
  mode = 'dark',
}: StatusChipProps) {
  const safeStatus: ChipStatus = (['success', 'warning', 'info', 'danger'] as const).includes(status as ChipStatus)
    ? status
    : 'success';
  return (
    <span className="dd-chip-scope" data-mode={mode}>
      <style>{css}</style>
      <span className={`dd-chip dd-chip--${safeStatus}${pill ? ' dd-chip--pill' : ''}`}>
        {children ?? label ?? safeStatus}
      </span>
    </span>
  );
}

export default StatusChip;
```

## Usage

- Deal stages, payment states, sync states — anywhere a row needs a scannable status.
- One status map const per page, typed against the domain's status union — not inline conditionals.
- Errors are never rendered as empty states: a failed fetch shows a danger treatment with Retry, not "No items yet".

---

# TextMaskReveal

Editorial typographic intro that reveals from a full-block mask wiping in one of four directions.

## Prompt

Build a typographic reveal component for editorial heroes. The text is initially fully covered by a solid block (the "mask") that wipes off in a configurable direction (up/down/left/right) using `clip-path: inset(...)`. The wipe is a single ease-out-quart sweep, default 0.9s. Triggers once on scroll-into-view. Configurable duration, delay, and direction. Semantic `as=` prop (default `h1`). Respect `prefers-reduced-motion` — render text statically with no animation when set.

## Tokens

- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `motion.duration-base` — `300ms`

## A11y

Respects prefers-reduced-motion — renders static text. Uses semantic heading element via `as=` prop. Screen readers read the complete string; the reveal is purely visual.

## Source (`src/components/TextMaskReveal.tsx`)

```tsx
import { motion, useReducedMotion } from 'motion/react';

export interface TextMaskRevealProps {
  text: string;
  duration?: number;   // default 0.9 — seconds
  delay?: number;      // default 0 — seconds before mask starts moving
  direction?: 'up' | 'down' | 'left' | 'right';  // default 'up' — direction the mask exits
  as?: 'h1' | 'h2' | 'h3' | 'p' | 'span';
  className?: string;
}

// Map direction to the starting clip-path inset state.
// The mask exits in the specified direction, so it starts fully covered and opens toward that side.
function getInitialClipPath(direction: 'up' | 'down' | 'left' | 'right'): string {
  switch (direction) {
    case 'up':    return 'inset(100% 0 0 0)';   // covered from top; wipes upward to reveal
    case 'down':  return 'inset(0 0 100% 0)';   // covered from bottom; wipes downward to reveal
    case 'left':  return 'inset(0 100% 0 0)';   // covered from right; wipes leftward to reveal
    case 'right': return 'inset(0 0 0 100%)';   // covered from left; wipes rightward to reveal
  }
}

// ease-out-quart approximation via cubic-bezier
const easeOutQuart = [0.25, 1, 0.5, 1] as const;

export function TextMaskReveal({
  text,
  duration = 0.9,
  delay = 0,
  direction = 'up',
  as: Tag = 'h1',
  className,
}: TextMaskRevealProps) {
  const reduced = useReducedMotion();
  const MotionTag = motion.create(Tag);

  if (reduced) {
    return <Tag className={className}>{text}</Tag>;
  }

  return (
    <div style={{ overflow: 'hidden', display: 'inline-block' }}>
      <MotionTag
        className={className}
        initial={{ clipPath: getInitialClipPath(direction) }}
        whileInView={{ clipPath: 'inset(0% 0% 0% 0%)' }}
        viewport={{ once: true, margin: '-50px' }}
        transition={{
          duration,
          delay,
          ease: easeOutQuart,
        }}
      >
        {text}
      </MotionTag>
    </div>
  );
}
```

## Usage

- Use as the headline of a landing or about page hero — once per page, max twice.
- Pair with smaller `AnimatedText` or static body copy below — TextMaskReveal owns the entrance.
- Keep the text under 12 words — long lines wrap unpredictably during the wipe.
- Up direction (default) feels assertive; down feels gentler; left/right feel editorial.

---

# TiltCard

Card with 3D perspective tilt that follows the cursor.

## Prompt

Build a card component with a 3D tilt effect that follows the cursor. Use CSS perspective (default 800px) and compute rotateX/rotateY from cursor position relative to card center. Max tilt 10deg by default, configurable. Spring-animate the rotation back to center on mouseleave. Respect prefers-reduced-motion.

## Tokens

- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `motion.duration-base` — `300ms`
- `radius.md` — `8px`

## A11y

Respects prefers-reduced-motion — tilt effect disables. Hover-only, doesn't interfere with keyboard navigation.

## Source (`src/components/TiltCard.tsx`)

```tsx
import { useRef, useState, type MouseEvent } from 'react';
import { motion, useMotionValue, useSpring, useReducedMotion } from 'motion/react';

export interface TiltCardProps {
  children: React.ReactNode;
  maxTiltDeg?: number;     // default 10 — max rotation in degrees
  perspective?: number;    // default 800 — CSS perspective value in px
  className?: string;
}

const springConfig = { stiffness: 200, damping: 20 };

export function TiltCard({ children, maxTiltDeg = 10, perspective = 800, className }: TiltCardProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [hovering, setHovering] = useState(false);
  const reduced = useReducedMotion();

  const rotateX = useSpring(useMotionValue(0), springConfig);
  const rotateY = useSpring(useMotionValue(0), springConfig);
  const glowX = useMotionValue(50);
  const glowY = useMotionValue(50);

  function handleMouseMove(e: MouseEvent<HTMLDivElement>) {
    if (reduced) return;
    const el = ref.current;
    if (!el) return;

    const rect = el.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const percentX = (x - centerX) / centerX;
    const percentY = (y - centerY) / centerY;

    rotateX.set(-percentY * maxTiltDeg);
    rotateY.set(percentX * maxTiltDeg);
    glowX.set((x / rect.width) * 100);
    glowY.set((y / rect.height) * 100);
  }

  function handleMouseLeave() {
    setHovering(false);
    rotateX.set(0);
    rotateY.set(0);
  }

  function handleMouseEnter() {
    setHovering(true);
  }

  return (
    <motion.div
      ref={ref}
      onMouseMove={handleMouseMove}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{
        rotateX,
        rotateY,
        transformStyle: 'preserve-3d',
        perspective,
        position: 'relative',
        overflow: 'hidden',
      }}
      className={className}
    >
      {children}
      <motion.div
        style={{
          position: 'absolute',
          inset: 0,
          pointerEvents: 'none',
          background: `radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(255,255,255,0.08) 0%, transparent 60%)`,
          opacity: hovering ? 1 : 0,
          transition: 'opacity 0.3s ease',
        }}
        ref={(el) => {
          if (!el) return;
          const unsub1 = glowX.on('change', (v) =>
            el.style.setProperty('--glow-x', `${v}%`)
          );
          const unsub2 = glowY.on('change', (v) =>
            el.style.setProperty('--glow-y', `${v}%`)
          );
          return () => {
            unsub1();
            unsub2();
          };
        }}
      />
    </motion.div>
  );
}
```

## Usage

Use for featured cards, hero content, or any grid where you want a subtle liveliness without overdoing motion. Works best on larger card surfaces where the tilt arc is perceptible but not disorienting.

- **Not** for small icon buttons or tight list items — the effect reads as jitter below ~200px width.
- **Not** inside scrolling containers where the user's cursor sweeps the card quickly.

---

# ToolTicker

Horizontal scrolling ticker of tools, technologies, or skills.

## Prompt

Build a horizontal ticker that scrolls a list of tools (name + optional icon) continuously. Configurable speed (px/s), direction, pause-on-hover. Duplicate content for seamless loop. Respect prefers-reduced-motion. Lighter than ScrollMarquee — for branding ribbons and "tools we use" sections specifically.

## Tokens

- `motion.duration-base` — `300ms`
- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `space.4` — `1rem`

## A11y

Respects prefers-reduced-motion — animation pauses. Pauses on hover and keyboard focus. Use aria-label on wrapper to describe contents.

## Source (`src/components/ToolTicker.tsx`)

```tsx
import { useRef, useEffect } from 'react';

export interface ToolEntry {
  name: string;
  icon?: string;  // SVG path `d` attribute string (24x24 viewBox)
  color?: string; // icon fill color
}

export interface ToolTickerProps {
  tools: Array<ToolEntry>;
  speed?: number;        // default 50 — pixels per second
  direction?: 'left' | 'right';
  pauseOnHover?: boolean;
  className?: string;
}

export function ToolTicker({
  tools,
  speed = 50,
  direction = 'left',
  pauseOnHover = true,
  className = '',
}: ToolTickerProps) {
  const trackRef = useRef<HTMLDivElement>(null);

  // Derive animation duration from track width / speed (same pattern as ScrollMarquee)
  useEffect(() => {
    const track = trackRef.current;
    if (!track) return;

    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;

    const group = track.querySelector<HTMLElement>('.tool-ticker-group');
    if (!group) return;

    const groupWidth = group.offsetWidth;
    if (groupWidth <= 0) return;

    const duration = groupWidth / speed;
    track.style.setProperty('--ticker-duration', `${duration}s`);
    track.style.setProperty('--ticker-direction', direction === 'right' ? 'reverse' : 'normal');
  }, [speed, direction]);

  const handleMouseEnter = pauseOnHover
    ? () => trackRef.current?.style.setProperty('animation-play-state', 'paused')
    : undefined;
  const handleMouseLeave = pauseOnHover
    ? () => trackRef.current?.style.setProperty('animation-play-state', 'running')
    : undefined;
  const handleFocus = pauseOnHover
    ? () => trackRef.current?.style.setProperty('animation-play-state', 'paused')
    : undefined;
  const handleBlur = pauseOnHover
    ? () => trackRef.current?.style.setProperty('animation-play-state', 'running')
    : undefined;

  // Duplicate set for seamless loop (3×)
  const sets = [0, 1, 2];

  return (
    <div
      aria-label="Scrolling list of tools and technologies"
      className={`tool-ticker-wrapper ${className}`}
      style={{
        overflow: 'hidden',
        position: 'relative',
        maskImage: 'linear-gradient(to right, transparent, black 12%, black 88%, transparent)',
        WebkitMaskImage: 'linear-gradient(to right, transparent, black 12%, black 88%, transparent)',
      }}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      onFocus={handleFocus}
      onBlur={handleBlur}
    >
      <div
        ref={trackRef}
        style={{
          display: 'inline-flex',
          willChange: 'transform',
          animation: 'tool-ticker-scroll var(--ticker-duration, 20s) linear infinite var(--ticker-direction, normal)',
          padding: '1rem 0',
        }}
        aria-live="off"
      >
        {sets.map((i) => (
          <span
            key={i}
            className="tool-ticker-group"
            aria-hidden={i > 0 ? 'true' : undefined}
            style={{ display: 'inline-flex', flexShrink: 0, alignItems: 'center', gap: '1rem' }}
          >
            {tools.map((tool, idx) => (
              <span
                key={idx}
                title={tool.name}
                style={{
                  display: 'inline-flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                  width: '4.5rem',
                  height: '4.5rem',
                  borderRadius: '0.875rem',
                  background: 'var(--color-elevated, #1A1515)',
                  border: '1px solid rgba(255,255,255,0.07)',
                  flexShrink: 0,
                  position: 'relative',
                  cursor: 'default',
                  transition: 'border-color 0.25s, transform 0.25s',
                  marginRight: '1rem',
                }}
              >
                {tool.icon ? (
                  <svg
                    viewBox="0 0 24 24"
                    fill={tool.color ?? '#F0ECE4'}
                    aria-hidden="true"
                    style={{ width: '55%', height: '55%' }}
                  >
                    <path d={tool.icon} />
                  </svg>
                ) : (
                  <span
                    style={{
                      fontSize: '0.625rem',
                      fontFamily: 'monospace',
                      fontWeight: 600,
                      color: tool.color ?? 'var(--color-bone, #F0ECE4)',
                      textTransform: 'uppercase',
                      letterSpacing: '0.04em',
                      textAlign: 'center',
                      padding: '0 0.25rem',
                      lineHeight: 1.2,
                    }}
                  >
                    {tool.name.slice(0, 8)}
                  </span>
                )}
              </span>
            ))}
          </span>
        ))}
      </div>
      <style>{`
        @keyframes tool-ticker-scroll {
          from { transform: translate3d(0, 0, 0); }
          to   { transform: translate3d(-33.333%, 0, 0); }
        }
        @media (prefers-reduced-motion: reduce) {
          .tool-ticker-wrapper > div {
            animation: none !important;
          }
        }
      `}</style>
    </div>
  );
}
```

## Usage

- Use on About / Lab / brand-forward pages to show your toolset.
- 8–20 items optimal — fewer feels sparse, more is overwhelming.
- Pair with subtle dividers between items (vertical bars, dots, asterisks) for editorial feel.

---

# TypeRoles

The seven DealDash t-* typography roles — one named Inter scale with display optical sizing and Linear-tight tracking. Never hand-roll a title.

## Prompt

Define the DealDash typography system: Inter variable (Google Fonts, opsz axis 14–32) everywhere; JetBrains Mono strictly for code/log/mono contexts. On body set: -webkit-font-smoothing antialiased, text-rendering optimizeLegibility, font-feature-settings "liga" 1, "calt" 1, "cv05" 1 (disambiguated lowercase l) — globally, never per element. Then expose exactly seven role classes and use nothing else for text: .t-page-title — 24px/1.25 weight 600 (30px at ≥640px), font-variation-settings "opsz" 28, letter-spacing -0.02em, one per page. .t-section-title — 18px/1.375 weight 600, "opsz" 22, letter-spacing -0.015em, section h2. .t-card-title — 16px weight 600 line-height 1. .t-body — 14px weight 400 line-height 1.625. .t-small — 14px in muted color #66716c (dark #8f9a94). .t-caption — 12px weight 500 line-height 1. .t-overline — 12px weight 500 uppercase letter-spacing 0.025em muted. Marketing display type may exceed the scale (up to 7xl) but keeps the same family, semibold weight, tight tracking, and brand-green emphasis — no second typeface, no second green.

## Tokens

- `color.dd-foreground` — `#0e1512`
- `color.dd-muted-foreground` — `#66716c`

## A11y

Roles are classes, not elements — heading semantics come from the markup (one h1 per page on t-page-title, ordered h2/h3 below, no skips). Muted roles (t-small, t-overline) use

## Source (`src/components/TypeRoles.tsx`)

```tsx
/**
 * TypeRoles — the DealDash `t-*` typography roles as a live specimen.
 * ONE named scale: Inter variable everywhere (titles use the display optical
 * size via the opsz axis with Linear-style tight tracking; body stays at text
 * optical size), JetBrains Mono for code/log/mono contexts only.
 *
 * Use the roles. Never hand-roll a title.
 *
 * Body text renders antialiased with font-feature-settings
 * "liga" 1, "calt" 1, "cv05" 1 — set once globally, don't repeat per element.
 */

export interface TypeRolesProps {
  sample?: string;
  mode?: 'light' | 'dark';
}

const css = `
.dd-type-scope{
  --foreground:#0e1512; --muted-foreground:#66716c; --border:#e6e9e7;
  color:var(--foreground);
  font-family:Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"liga" 1, "calt" 1, "cv05" 1;
  display:block; width:100%; max-width:560px;
}
.dd-type-scope[data-mode="dark"]{
  --foreground:#f4f6f5; --muted-foreground:#8f9a94; --border:#212824;
}
.dd-type-row{
  display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.dd-type-row:last-child{ border-bottom:none; }
.dd-type-label{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; color:var(--muted-foreground);
}
/* The seven roles — exact recipes from the DealDash platform standard. */
.t-page-title{
  font-size:24px; font-weight:600; line-height:1.25;      /* sm+: 30px */
  font-optical-sizing:auto; font-variation-settings:"opsz" 28;
  letter-spacing:-0.02em;
}
@media (min-width:640px){ .t-page-title{ font-size:30px; } }
.t-section-title{
  font-size:18px; font-weight:600; line-height:1.375;
  font-optical-sizing:auto; font-variation-settings:"opsz" 22;
  letter-spacing:-0.015em;
}
.t-card-title{ font-size:16px; font-weight:600; line-height:1; }
.t-body{ font-size:14px; font-weight:400; line-height:1.625; }
.t-small{ font-size:14px; color:var(--muted-foreground); }
.t-caption{ font-size:12px; font-weight:500; line-height:1; }
.t-overline{
  font-size:12px; font-weight:500; text-transform:uppercase;
  letter-spacing:0.025em; color:var(--muted-foreground);
}
`;

const ROLES: Array<{ cls: string; use: string }> = [
  { cls: 't-page-title', use: 'One per page (PageHeader)' },
  { cls: 't-section-title', use: 'Section h2' },
  { cls: 't-card-title', use: 'CardTitle default' },
  { cls: 't-body', use: 'Prose, descriptions' },
  { cls: 't-small', use: 'Secondary lines' },
  { cls: 't-caption', use: 'Labels, stat captions' },
  { cls: 't-overline', use: 'Eyebrows, column labels' },
];

export function TypeRoles({ sample = 'Deals move faster in green', mode = 'dark' }: TypeRolesProps) {
  return (
    <div className="dd-type-scope" data-mode={mode}>
      <style>{css}</style>
      {ROLES.map((r) => (
        <div className="dd-type-row" key={r.cls}>
          <span className="dd-type-label" title={r.use}>.{r.cls}</span>
          <span className={r.cls}>{sample}</span>
        </div>
      ))}
    </div>
  );
}

export default TypeRoles;
```

## Usage

- Every title, label, and body run in the app maps to one of the seven roles — if none fits, the design is off-system.
- t-page-title appears exactly once per route, inside the PageHeader.
- t-overline is the eyebrow/column-label voice; pair it above a t-page-title or table columns.

---

# CaseStudyBody

Long-form case-study layout — hero figure, scroll-pinned process steps, expandable footnotes.

## Prompt

Compose a long-form case-study body with three layers: a hero Figure with caption + click-to-zoom; a "process" section using StackingCards (3–5 sticky-pinned cards covering Discovery → Direction → Build → Ship); and optional Expandable disclosures for footnotes / deep cuts. Wrapped in a semantic `<article>` with `prose prose-invert` for typographic defaults. Centered max-content width. Generous vertical rhythm between sections (space-y-12). Respects prefers-reduced-motion via StackingCards' own guard.

## Tokens

- `color.bone` — `#F5F1EC`
- `color.elevated` — `#1A1210`
- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `space.8` — `2rem`
- `radius.md` — `8px`

## A11y

Hero figure has alt text + caption + lightbox. StackingCards collapses to a static stack under prefers-reduced-motion. Expandable disclosures use proper aria-expanded/controls. Document layout uses semantic <article> and <section> landmarks.

## Source (`src/components/CaseStudyBody.astro`)

```astro
---
import { Figure } from './Figure';
import { Expandable } from './Expandable';
import { StackingCards } from './StackingCards';

interface Props {
  steps: Array<{ title: string; body: string; color?: string }>;
  hero: { src: string; alt: string; caption?: string };
  expandables?: Array<{ title: string; body: string }>;
}

const { steps, hero, expandables = [] } = Astro.props;
---
<article class="prose prose-invert max-w-content mx-auto py-16 px-6 space-y-12">
  <Figure client:load src={hero.src} alt={hero.alt} caption={hero.caption} expandable={true} />

  <section>
    <h2 class="font-display text-3xl mb-6">How it came together</h2>
    <StackingCards client:visible cards={steps} sticky={true} />
  </section>

  {expandables.length > 0 && (
    <section class="space-y-3">
      <h2 class="font-display text-3xl mb-6">Notes</h2>
      {expandables.map((e) => (
        <Expandable client:load title={e.title}>{e.body}</Expandable>
      ))}
    </section>
  )}
</article>
```

## Usage

- Use for `/work/[slug]` case-study pages and any long-form authored content.
- 3–5 process steps is the sweet spot — fewer feels thin, more loses momentum.
- Use Expandables for footnotes / deep-dive details readers can choose to open.
- Pair with EditorialHero above and a ContactCTA below.

---

# EditorialHero

Magazine-style landing hero — TextMaskReveal headline + magnetic CTA + asymmetric image collage.

## Prompt

Compose a magazine-style landing hero. Left column: TextMaskReveal headline (h1, display face, ~6xl, tight tracking, 0.95 line-height) + body paragraph (xl, bone/70, max ~xl width) + MagneticButton CTA. Right column: HeroGallery in asymmetric layout. Two-column grid (1.2fr / 1fr) on md+, stacked on mobile. Generous vertical padding (~py-20). Hands the wow-factor to TextMaskReveal's wipe-in and the magnetic pull on the CTA.

## Tokens

- `color.accent` — `#E8462C`
- `motion.ease-out-quart` — `cubic-bezier(0.165, 0.84, 0.44, 1)`
- `motion.duration-base` — `300ms`
- `space.8` — `2rem`

## A11y

Headline is a proper h1 via TextMaskReveal. CTA is a real link with accessible name. Images require alt text. Respects prefers-reduced-motion via TextMaskReveal and MagneticButton's own guards.

## Source (`src/components/EditorialHero.astro`)

```astro
---
import { TextMaskReveal } from './TextMaskReveal';
import { MagneticButton } from './MagneticButton';
import { HeroGallery } from './HeroGallery';

interface Props {
  headline: string;
  body: string;
  ctaLabel: string;
  ctaHref: string;
  images: Array<{ src: string; alt: string; aspect?: 'square' | 'portrait' | 'landscape' }>;
}

const { headline, body, ctaLabel, ctaHref, images } = Astro.props;
---
<section class="grid md:grid-cols-[1.2fr_1fr] gap-10 md:gap-16 items-center py-20">
  <div>
    <TextMaskReveal client:load text={headline} as="h1" duration={1} className="font-display text-6xl md:text-7xl tracking-tight leading-[0.95] mb-6" />
    <p class="text-xl text-bone/70 mb-8 max-w-xl">{body}</p>
    <MagneticButton client:load href={ctaHref} accent="#E8462C">{ctaLabel}</MagneticButton>
  </div>
  <div>
    <HeroGallery client:visible layout="asymmetric" images={images} />
  </div>
</section>
```

## Usage

- Use as the `<main>` opening for `/`, `/about`, `/lab`, or any landing page.
- One per page — multiple competing TextMaskReveals fight for entrance attention.
- Pair with subtle background grain or solid `--color-ink` — never busy backgrounds.
- 3–5 images in the gallery is ideal; vary aspect ratios.

---

# EmeraldDirection

The DealDash Emerald design direction — Linear-grade calm with an emerald signature. Elevation as a surface ramp, hairline borders, one green, choreographed motion, and error≠empty≠loading as law.

## Prompt

Theme an app as "Linear-grade calm with an emerald signature". Drop in the source stylesheet below, then hold four laws. (1) Elevation is a RAMP, not a shadow: dark mode climbs #0a0d0c background → #121615 card → #151a18 popover (sidebar sits one step BELOW at #0c0f0e); light mode #ffffff → #fafbfa → #ffffff. Structure comes from hairline borders — #212824 dark, #e6e9e7 light — never gray slabs or heavy shadows; the ONLY big shadow is --shadow-overlay ("0 12px 50px -12px #0a140f38, 0 2px 8px -2px #0a140f1f" light; "0 16px 70px -12px #000000a6, 0 2px 10px -2px #00000066" dark), shared by every floating surface. (2) One green: #1a7a5e is THE accent (buttons, active states, focus ring), #34d399 is its bright voice on dark surfaces (charts, glows, the spark comet). Everything else is neutral. Color is a signal, not decoration. (3) Motion is choreographed: three durations — 120ms press/color, 180ms hover/transform, 260ms enter/overlay — all on cubic-bezier(0.22, 1, 0.36, 1). Hover brightens or tints, never scales; press sinks 1px; nothing exceeds 260ms outside deliberate hero moments; at most one ambient animation per view and every animation ships a reduced-motion fallback. (4) Error, empty, and loading are THREE different states: loading = skeleton or a role="status" spinner (no layout jump); empty = honest, filter-aware copy with a CTA; error = destructive treatment with a Retry wired to the failed fetch. A failed fetch must never render "No items yet". Layout rhythm: 4px grid, 36px control row (32 sm / 40 lg), radius 8px cards / 6px controls / 4px-or-full chips, max-width 1280px gutters.

## Tokens

- `color.dd-primary` — `#1a7a5e`
- `color.dd-spark` — `#34d399`
- `color.dd-background` — `#ffffff`
- `color.dd-foreground` — `#0e1512`
- `color.dd-card` — `#fafbfa`
- `color.dd-popover` — `#ffffff`
- `color.dd-sidebar` — `#fafbfa`
- `color.dd-secondary` — `#f1f3f2`
- `color.dd-muted-foreground` — `#66716c`
- `color.dd-accent` — `#e7f6ef`
- `color.dd-accent-foreground` — `#0f6a4f`
- `color.dd-border` — `#e6e9e7`
- `color.dd-input` — `#f6f8f7`
- `color.dd-destructive` — `#dc2626`
- `color.dd-warning` — `#b45309`
- `color.dd-info` — `#1d4ed8`
- `shadow.dd-overlay` — `0 12px 50px -12px #0a140f38, 0 2px 8px -2px #0a140f1f`
- `shadow.dd-btn-highlight` — `inset 0 1px 0 0 #ffffff2e`
- `shadow.dd-btn-drop` — `0 1px 2px 0 #0a140f40`
- `shadow.dd-btn-drop-subtle` — `0 1px 2px 0 #0a140f0d`
- `motion.dd-duration-fast` — `120ms`
- `motion.dd-duration-base` — `180ms`
- `motion.dd-duration-slow` — `260ms`
- `motion.dd-ease-standard` — `cubic-bezier(0.22, 1, 0.36, 1)`
- `radius.dd-base` — `0.5rem`

## A11y

The direction ships an accessibility floor, not a target — AA contrast on all text including muted-on-card in both modes; focus visible everywhere (2px outline on --ring

## Source (`src/styles/dealdash-emerald.css`)

```css
/* ---------------------------------------------------------------------------
 * DealDash Emerald — complete drop-in theme.
 * "Linear-grade calm with an emerald signature": near-black or near-white
 * neutral surfaces, hairline borders, ONE green accent, tight display type,
 * and motion that is quick, subtle, and purposeful.
 *
 * Tokens are the single source of truth. Never hardcode a palette color, a
 * duration, or an easing curve in a page. If a value isn't expressible with
 * tokens, add a token first. Tokens are hex — for alpha use
 * color-mix(in oklab, var(--x) N%, transparent).
 * ------------------------------------------------------------------------- */

:root {
  --radius: 0.5rem; /* cards/dialogs 8px, controls 6px (−2px), chips 4px/full */

  /* Brand — THE accent. Color is a signal, not decoration. */
  --primary: #1a7a5e;
  --primary-foreground: #ffffff;

  /* Core surfaces — Linear-style: near-white cards + hairline borders carry
   * the structure; no gray slabs. bg → card → popover is an elevation RAMP. */
  --background: #ffffff;
  --foreground: #0e1512;
  --card: #fafbfa;
  --card-foreground: #0e1512;
  --popover: #ffffff;
  --popover-foreground: #0e1512;

  /* Secondary / muted / accent */
  --secondary: #f1f3f2;
  --secondary-foreground: #0e1512;
  --muted: #f1f3f2;
  --muted-foreground: #66716c;
  --accent: #e7f6ef;
  --accent-foreground: #0f6a4f;

  /* Semantic status — success/positive = primary, danger = destructive. */
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --warning: #b45309;
  --warning-foreground: #ffffff;
  --info: #1d4ed8;
  --info-foreground: #ffffff;

  /* Form elements — hairline borders carry structure. */
  --border: #e6e9e7;
  --input: #f6f8f7;
  --ring: #1a7a5e;

  /* Charts (teal gradient); chart-1 doubles as the spark comet color. */
  --chart-1: #34d399;
  --chart-2: #2eb086;
  --chart-3: #10b981;
  --chart-4: #059669;
  --chart-5: #047857;

  /* Sidebar navigation */
  --sidebar: #fafbfa;
  --sidebar-foreground: #0e1512;
  --sidebar-primary: #1a7a5e;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #eef1ef;
  --sidebar-accent-foreground: #0e1512;
  --sidebar-border: #e6e9e7;
  --sidebar-ring: #1a7a5e;

  /* Motion — 3 duration tiers on ONE standard easing.
   * fast = press/color, base = hover/transform, slow = enter/overlay. */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);

  /* Button elevation — swap these to restyle EVERY button at once.
   * highlight = top "lit" inner edge. */
  --shadow-btn-highlight: inset 0 1px 0 0 #ffffff2e;
  --shadow-btn-drop: 0 1px 2px 0 #0a140f40;
  --shadow-btn-drop-subtle: 0 1px 2px 0 #0a140f0d;

  /* Overlay elevation — ONE deep soft shadow shared by dialogs, dropdowns,
   * popovers, and select menus so every floating surface feels identical. */
  --shadow-overlay: 0 12px 50px -12px #0a140f38, 0 2px 8px -2px #0a140f1f;
}

/* Dark mode — near-black neutral base with a whisper of green, elevation as
 * small surface steps, hairline borders instead of heavy fills. */
.dark {
  --primary: #1a7a5e;
  --primary-foreground: #ffffff;

  --background: #0a0d0c;
  --foreground: #f4f6f5;
  --card: #121615;
  --card-foreground: #f4f6f5;
  --popover: #151a18;
  --popover-foreground: #f4f6f5;

  --secondary: #1a201d;
  --secondary-foreground: #f4f6f5;
  --muted: #1a201d;
  --muted-foreground: #8f9a94;
  --accent: #15241e;
  --accent-foreground: #34d399;

  /* Lighter status hues for dark surfaces, dark text on fills. */
  --destructive: #f87171;
  --destructive-foreground: #ffffff;
  --warning: #fbbf24;
  --warning-foreground: #451a03;
  --info: #60a5fa;
  --info-foreground: #082f49;

  --border: #212824;
  --input: #161c19;
  --ring: #1a7a5e;

  --chart-1: #34d399;
  --chart-2: #2eb086;
  --chart-3: #10b981;
  --chart-4: #059669;
  --chart-5: #047857;

  /* Sidebar sits one step BELOW the background, hairline divider. */
  --sidebar: #0c0f0e;
  --sidebar-foreground: #dfe4e1;
  --sidebar-primary: #1a7a5e;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #161b19;
  --sidebar-accent-foreground: #f4f6f5;
  --sidebar-border: #1c2220;
  --sidebar-ring: #1a7a5e;

  --shadow-btn-highlight: inset 0 1px 0 0 #ffffff1f;
  --shadow-btn-drop: 0 1px 2px 0 #00000066;
  --shadow-btn-drop-subtle: 0 1px 2px 0 #00000040;
  --shadow-overlay: 0 16px 70px -12px #000000a6, 0 2px 10px -2px #00000066;
}

/* ---------------------------------------------------------------------------
 * Base — Inter variable everywhere, JetBrains Mono for code only. Crisp
 * Linear-grade rendering: antialiased, contextual alternates, disambiguated
 * lowercase l (cv05). Set globally — don't repeat per element.
 * ------------------------------------------------------------------------- */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1, "cv05" 1;
}

/* ---------------------------------------------------------------------------
 * Typography roles — ONE named scale. Use the t-* roles; never hand-roll a
 * title. Titles use Inter's display optical size (opsz) with tight tracking.
 * ------------------------------------------------------------------------- */
.t-page-title {
  font-size: 1.5rem;      /* 24px; 30px at ≥640px */
  font-weight: 600;
  line-height: 1.25;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 28;
  letter-spacing: -0.02em;
}
@media (min-width: 640px) {
  .t-page-title { font-size: 1.875rem; }
}
.t-section-title {
  font-size: 1.125rem;    /* 18px */
  font-weight: 600;
  line-height: 1.375;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 22;
  letter-spacing: -0.015em;
}
.t-card-title { font-size: 1rem; font-weight: 600; line-height: 1; }
.t-body { font-size: 0.875rem; font-weight: 400; line-height: 1.625; }
.t-small { font-size: 0.875rem; color: var(--muted-foreground); }
.t-caption { font-size: 0.75rem; font-weight: 500; line-height: 1; }
.t-overline {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------------------
 * Soft status chips — the sanctioned recipe:
 *   bg {status}/10 · text {status} · border {status}/20  (15% fill: warning)
 * success/positive = primary, warning = warning, info = info,
 * danger = destructive. Errors are never rendered as empty states.
 * ------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px; /* or 9999px for pills */
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.chip--success {
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
}
.chip--warning {
  background: color-mix(in oklab, var(--warning) 15%, transparent);
  color: var(--warning);
  border: 1px solid color-mix(in oklab, var(--warning) 20%, transparent);
}
.chip--info {
  background: color-mix(in oklab, var(--info) 10%, transparent);
  color: var(--info);
  border: 1px solid color-mix(in oklab, var(--info) 20%, transparent);
}
.chip--danger {
  background: color-mix(in oklab, var(--destructive) 10%, transparent);
  color: var(--destructive);
  border: 1px solid color-mix(in oklab, var(--destructive) 20%, transparent);
}

/* ---------------------------------------------------------------------------
 * The spark (.btn-spark) — signature CTA effect: a comet of light orbiting
 * the button edge. ::before = crisp 1px ring (dim track + long-tail comet,
 * head near-white mint). ::after = same comet blurred into a bloom outside
 * the edge so the light reads as emissive. Only the registered --spark-angle
 * animates (GPU-cheap, no layout). 4.5s idle orbit, 2.2s on hover.
 * RULES: at most ONE spark per view, primary CTA only.
 * ------------------------------------------------------------------------- */
@property --spark-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes spark-orbit {
  to { --spark-angle: 360deg; }
}
.btn-spark {
  position: relative;
  isolation: isolate;
}
.btn-spark::before,
.btn-spark::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  background:
    conic-gradient(
        from var(--spark-angle),
        transparent 0deg,
        transparent 240deg,
        color-mix(in oklab, var(--primary) 30%, transparent) 290deg,
        color-mix(in oklab, var(--chart-1) 80%, transparent) 328deg,
        color-mix(in oklab, #eafff5 92%, var(--chart-1)) 340deg,
        color-mix(in oklab, var(--chart-1) 60%, transparent) 347deg,
        transparent 353deg
      )
      border-box,
    conic-gradient(
        color-mix(in oklab, var(--chart-1) 12%, transparent) 0deg,
        color-mix(in oklab, var(--chart-1) 12%, transparent) 360deg
      )
      border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: spark-orbit 4.5s linear infinite;
}
.btn-spark::before {
  inset: -1px;
  padding: 1px;
  z-index: -1;
}
.btn-spark::after {
  inset: -2px;
  padding: 2px;
  z-index: -2;
  filter: blur(6px);
  opacity: 0.6;
}
.btn-spark:hover::before,
.btn-spark:hover::after {
  animation-duration: 2.2s;
}
.btn-spark:hover::after {
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .btn-spark::before,
  .btn-spark::after {
    animation: none;
    background: color-mix(in oklab, var(--chart-1) 28%, transparent);
  }
  .btn-spark::after {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Accessibility floor (non-negotiable): visible focus everywhere; every
 * animation ships a reduced-motion fallback.
 * ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

## Usage

- This is the contract for every DealDash surface — pages, extensions, marketing; deviations are bugs unless recorded in the standard.
- Re-theme by swapping token values only (the --shadow-btn-* trio restyles every button at once); components never hardcode a hex, a duration, or a bezier.
- The stylesheet is framework-agnostic: tokens on :root/.dark, roles and recipes as plain classes; Tailwind apps map utilities onto the same variables.

---

# FilterableWorkGrid

Work index page composition — heading + tools ticker + responsive grid of ProjectCards.

## Prompt

Compose a `/work` index page. Header: large display heading + optional intro paragraph. Optional ToolTicker brand ribbon below the header (full-bleed, slow speed). Responsive grid of ProjectCards (1 col mobile / 2 col sm / 3 col lg). Centered max-content container. Pure layout — no scroll-pinning, no fancy entrance animations beyond the cards' own hover states.

## Tokens

- `color.accent` — `#E8462C`
- `color.elevated` — `#1A1210`
- `motion.duration-base` — `300ms`
- `space.4` — `1rem`
- `radius.md` — `8px`

## A11y

ProjectCards are real anchors with accessible names. ToolTicker pauses on hover and respects prefers-reduced-motion. Grid uses semantic landmarks. Heading hierarchy starts at h1 (the page heading).

## Source (`src/components/FilterableWorkGrid.astro`)

```astro
---
import { ToolTicker } from './ToolTicker';
import { ProjectCard } from './ProjectCard';

interface Props {
  projects: Array<{ title: string; description: string; href: string; imageSrc?: string; imageAlt?: string; tags?: string[] }>;
  tools?: Array<{ name: string; icon?: string; color?: string }>;
  heading: string;
  intro?: string;
}

const { projects, tools, heading, intro } = Astro.props;
---
<div class="max-w-content mx-auto py-16 px-6">
  <header class="mb-10">
    <h1 class="font-display text-5xl tracking-tight mb-4">{heading}</h1>
    {intro && <p class="text-xl text-bone/70 max-w-2xl">{intro}</p>}
  </header>

  {tools && tools.length > 0 && (
    <div class="mb-12 -mx-6 overflow-hidden">
      <ToolTicker client:visible tools={tools} speed={40} />
    </div>
  )}

  <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
    {projects.map((p) => (
      <ProjectCard client:idle {...p} />
    ))}
  </div>
</div>
```

## Usage

- Use as the body of `/work` or any project listing page.
- Ticker is optional — include it on About / Brand pages where the toolset matters; skip on `/work` itself if it competes for attention.
- 6–18 projects is the sweet spot. Fewer feels thin (consider featuring one); more demands real filtering UI (out of scope for v2).

---