The site

A showcase for cc-prism recordings - the terminal animations generated from Claude Code sessions. Deployed to onceuponaclaude.com via Netlify.

Design system

Osaka Jade palette:

  • Background: #111c18 (dark jade)
  • Text: #C1C497 (pale sage)
  • Links: #2DD5B7 (cyan accent)
  • Borders: #d97757 (clay/terracotta)

Typography:

  • DotGothic16 for headings
  • JetBrains Mono for body
  • Silkscreen for buttons

Signature element: Header shimmer animation - 3-character sliding highlight window at 100ms/frame. Cycles through random verbs (“claude builds…”, “claude explores…”) before settling on the domain name.

Technical notes

Astro 5 content config location matters - must be at src/content.config.ts (not src/content/config.ts). Uses glob loader pattern.

The Asciinema component embeds recordings inline in MDX posts. SVG thumbnails fetched from asciinema.org/a/{ID}.svg for list previews.

The aesthetic

Retro-terminal meets editorial. The jade/sage/clay palette feels like old CRT phosphors but warm. The shimmer animation adds life without being distracting.