Files
pbakaus_impeccable/public/css
Paul Bakaus 03a1953ba7 feat(site): add visuals + auto-rotate to Why Impeccable
Per-panel storytelling visualizations, pure HTML/CSS, no image assets:

- 01 Intentional design: "Generic AI" dark/purple gradient card vs.
  warm editorial card with /impeccable vocabulary side by side.
- 02 Brand and product, both: tiny brand mock (italic display headline)
  vs. product mock (mono/stats rows).
- 03 Production codebases: dark terminal showing /impeccable polish
  reading DESIGN.md tokens and component APIs.
- 04 Where you code: prompt bar with blinking caret + 4×2 grid of
  harness logos (Claude, Cursor, Codex, Gemini, Copilot, Antigravity,
  Kiro, OpenCode).
- 05 DESIGN.md: a file-view of the six Stitch sections with a
  "Stitch spec" badge, plus an interop tagline.
- 06 CI/CD: terminal showing `impeccable detect` failing CI with
  three issues and exit 1.
- 07 Chrome extension: browser chrome + floating extension popup
  listing detections and two magenta outline boxes over "page content".

Auto-rotation: 7s per tab, pauses on hover, stops entirely on any
click/keyboard interaction (user-initiated navigation wins). Thin
magenta progress bar animates on the active tab's left accent as
the rotation progresses. IntersectionObserver gates the whole timer
so it only runs while the section is on screen. prefers-reduced-motion
disables the auto-rotation and the progress animation.

Dropped the "Seven reasons..." lead line.
2026-04-22 12:05:19 -07:00
..