onceuponaclaude-com
Showcase site for terminal recordings
Astro SSG site showcasing cc-prism terminal recordings with distinctive visual identity
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.