blog: bright scenes without the cast for How to use Claude Code

[chaitanyagiri]

Replaces the four scenes on /blog/how-to-use-claude-code/ (pixel cast on a dark stage, live since #699) with scenes drawn from scratch to the founder's direction of 5 Oct: no characters, white and bright, playful, each one built for its section, one small thing to do per scene.

This is the sample for the new style. The other two pages from #699 (openclaw-alternatives, claude-code-alternatives) still show the old scenes and follow once this style is approved.

The four scenes

Section	Scene	What the reader can do
Setup steps	A marble rolls along a track through five stops; each comes alive as it passes (a box opens, a key turns, files rise from a folder, a bubble pops, a line of code turns green)	Tap a stop to see its command
Writing a prompt	A card morphs from "fix the login bug" among question marks into three tagged lines: symptom, where, proof	Drag the slider from vague to specific
The working loop	A dot travels a ring through Explore, Plan, Implement, Commit; each phase animates its own icon	Tap a phase to jump to it
Common mistakes	The context window as a jar that fills with balls for files, command output and the conversation	Press /clear or /compact

Plus a new title card in the same style.

How it is built

• One script and one stylesheet in blog/src/assets/media/how-to-use-claude-code/ (vanilla JS, 21 KB, no library). The page no longer loads the cast kit.
• Same contract as before: each figure holds a still image with alt text, the script swaps in a live SVG, plays only in view, stops for reduced motion, and ?mgstill freezes the still frame. Buttons and the slider work by keyboard.
• Every word in the scenes comes from the post's reviewed text. No claim was added. The post's prose is unchanged; the four figure lines, their captions and the script line changed.
• Stills are 22 to 69 KB each.

Checks

• gate.mjs passes (1,172 words).
• Rendered in headless Chrome at 1200 and 390 px. Not checked in Safari, Firefox or on a real phone. At 390 px the smallest scene text is about 10 px.

Before

After

Frames of the four scenes at different moments:

🤖 Generated with Claude Code