Stackdome launch site

The Stackdome public launch site — built with Vite + React + TypeScript and motion (Framer Motion), using the Interface Craft storyboard-animation method.

Visual design: Graphite — control-plane calm. Warm neutrals, black-as-action, hue reserved only for health, serif (Redaction) display type, fully-rounded pill buttons, generous air. A light/dark theme toggle lives in the nav.

Run

npm install
npm run dev      # http://localhost:5173
npm run build    # production build → dist/
npm run preview  # serve the production build

Try it

• Toggle light/dark from the nav.
• The hero canvas is the storyboard centerpiece: the deck fades in, nodes stagger, connectors draw, tooljet goes Building → Ready, and the domain gets its HTTPS lock. It is also a working canvas — on a fine pointer the cards drag, the field pans, and the ± cluster zooms. Timings live in HeroCanvas.tsx.
• DialKit — press Shift+D to open live sliders and tune the hero storyboard timings in real time.
• ?still renders every entrance at its final state with no animation (used for static capture / print). The same path serves users with prefers-reduced-motion.

Structure

src/
  content/site.ts      all copy + the canvas graph (single source of truth)
  directions/          graphite — the semantic token map (light + dark palettes)
  theme/               ThemeProvider (light/dark), applies CSS vars to :root
  anim/                Interface Craft: useSequence (storyboard), springs, Reveal, DialKit, useSettle
  components/          Nav, Hero, GraphiteHero, HeroCanvas, Stats, Problem, HowItWorks,
                       Capabilities, WhyTable, Roadmap, FAQ, GetStarted, Footer
  styles/base.css      one semantic token contract; Graphite treatments scoped by [data-direction="graphite"]
public/shots/          real product screenshots wired into the capability slots

Notes

• Live star count (F3): seeded static; set GITHUB_REPO in StarButton.tsx to fetch the live count.
• Screenshots: swap the PNGs in public/shots/ with real app captures anytime.
• Fonts are self-hosted (@fontsource), so first load is fast and offline-safe.