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

blog/src/_data/media.json

@@ -4424,8 +4424,8 @@
     "category": "guides",
     "hero": {
       "file": "assets/media/how-to-use-claude-code/hero.png",
-      "alt": "Title card. The words How to use Claude Code, with Michael and Pam from the office cast standing beside them",
-      "prompt": "Title card: the kit's title scene (assets/mg/kit.js).",
+      "alt": "Title card on white. The words How to use Claude Code above a dotted track with five small icons: a box, a key, a folder, a speech bubble and a line of code, and a yellow marble at the end",
+      "prompt": "Still of the hero scene in assets/media/how-to-use-claude-code/motion.js.",
       "status": "ready"
     },
     "inline": {}

blog/src/assets/media/how-to-use-claude-code/motion.css

@@ -0,0 +1,13 @@
+/* Bright coded scenes for "How to use Claude Code". Pairs with motion.js. */
+.prose figure.mg { margin: 42px 0; }
+.prose figure.mg img, .mg .mg-svg { display: block; width: 100%; height: auto; border: 1px solid #1A1320; border-radius: 18px; background: #fff; }
+.mg figcaption { font: 500 13px/1.5 "Space Grotesk", system-ui, sans-serif; color: #6B5878; padding-top: 10px; text-align: center; }
+.mg .mg-svg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+.mg .mg-svg text { -webkit-user-select: none; user-select: none; pointer-events: none; }
+.mg .mg-hit { cursor: pointer; outline: none; }
+.mg [role="slider"] { cursor: grab; touch-action: none; }
+.mg .mg-ring { stroke-opacity: 0; transition: stroke-opacity 0.15s; }
+.mg .mg-hit:focus-visible .mg-ring { stroke-opacity: 1; }
+.mg [role="slider"]:focus-visible circle:nth-child(2) { stroke-width: 5; }
+@media (hover: hover) { .mg .mg-hit:hover .mg-ring { stroke-opacity: 0.5; } }
+@media (prefers-reduced-motion: reduce) { .mg .mg-ring { transition: none; } }

blog/src/posts/how-to-use-claude-code.md

@@ -35,7 +35,7 @@ On accounts, the same page says Claude Code requires a Pro, Max, Team, Enterpris
 
 Run the native installer, check the version, then start `claude` in a project and log in. These are the commands from Anthropic's [quickstart](https://code.claude.com/docs/en/quickstart), read on 5 Oct 2026.
 
-<figure class="mg" data-scene="flow"><img src="/blog/assets/media/how-to-use-claude-code/setup-steps.png" width="1600" height="900" loading="lazy" decoding="async" alt="Animation. Pam walks along five boxes that light up in order: Install, Sign in, Open a project, Ask a question, Make a change."><script type="application/json">{"kicker":"Setup","title":"Claude Code from zero to a first change","nodes":[{"label":"Install","note":"One command in your terminal."},{"label":"Sign in","note":"Run claude. Log in in the browser."},{"label":"Open a project","note":"cd to the folder, then run claude."},{"label":"Ask a question","note":"Try: what does this project do?"},{"label":"Make a change","note":"It shows you the change."}],"labels":["--version","","",""],"host":"pam","say":"Five boxes. I drew them myself."}</script><figcaption>The five setup steps, from Anthropic's quickstart. Checked 5 Oct 2026.</figcaption></figure>
+<figure class="mg" data-scene="marble"><img src="/blog/assets/media/how-to-use-claude-code/setup-steps.png" width="1600" height="1200" loading="lazy" decoding="async" alt="Animation on a white card. A yellow marble rolls along a dotted track through five stops, and each one comes alive as it passes: a box opens for Install, a key turns for Sign in, files rise out of a folder for Open a project, a speech bubble pops for Ask a question, and a line of code turns green for Make a change. A strip below shows the command for each stop."><figcaption>The five setup steps, from Anthropic's quickstart. Tap a stop for its command. Checked 5 Oct 2026.</figcaption></figure>
 
 1. **Install.** On macOS, Linux or WSL:
 
@@ -90,7 +90,7 @@ Then run `/init`. It generates a starter `CLAUDE.md`, the file Claude reads at t
 
 Name the symptom, the likely location and what fixed looks like. That advice, and the example below, come from Anthropic's [best practices page](https://code.claude.com/docs/en/best-practices), which puts it this way: "The more precise your instructions, the fewer corrections you'll need."
 
-<figure class="mg" data-scene="before-after"><img src="/blog/assets/media/how-to-use-claude-code/prompt.png" width="1600" height="900" loading="lazy" decoding="async" alt="Animation. A card showing a four word prompt flips over to show a three line prompt that names the symptom, the folder to check and the failing test to write."><script type="application/json">{"kicker":"Prompts","title":"The same bug, asked for twice","before":{"label":"Vague","lines":["fix the login bug"]},"after":{"label":"Specific","lines":["Users report that login fails after session timeout.","Check the auth flow in src/auth/, especially token refresh.","Write a failing test that reproduces the issue, then fix it."]},"host":"jim","say":"Symptom, place, proof. That's it."}</script><figcaption>Adapted from the before and after on Anthropic's best practices page. Checked 5 Oct 2026.</figcaption></figure>
+<figure class="mg" data-scene="focus"><img src="/blog/assets/media/how-to-use-claude-code/prompt.png" width="1600" height="1200" loading="lazy" decoding="async" alt="Animation on a white card. A slider moves from vague to specific. At vague the card says fix the login bug among floating question marks. At specific it shows three tagged lines: the symptom, where to look, and the proof, a failing test."><figcaption>Drag the slider. Adapted from the before and after on Anthropic's best practices page. Checked 5 Oct 2026.</figcaption></figure>
 
 The second half matters as much as the first. Give Claude a check it can run (a test, a build, a linter) and it does the work, runs the check and iterates until it passes. Without one, in the docs' words, "you become the verification loop". Use `@` to point at a file by path.
 
@@ -119,15 +119,15 @@ Sources: the [commands reference](https://code.claude.com/docs/en/commands) and
 
 Anthropic's recommended workflow has four phases, and it exists to stop Claude solving the wrong problem.
 
-<figure class="mg" data-scene="flow"><img src="/blog/assets/media/how-to-use-claude-code/loop.png" width="1600" height="900" loading="lazy" decoding="async" alt="Animation. Four boxes light up left to right, Explore, Plan, Implement and Commit, while Pam points at each one in turn."><script type="application/json">{"kicker":"Workflow","title":"The four phases Anthropic recommends","nodes":[{"label":"Explore","note":"Plan mode: it reads, no changes."},{"label":"Plan","note":"Ask for a detailed plan."},{"label":"Implement","note":"It codes and runs the tests."},{"label":"Commit","note":"Ask for a commit and a PR."}],"labels":["","ok",""],"host":"pam","say":"Fixing a typo? Skip the plan."}</script><figcaption>Explore, plan, implement, commit. From the best practices page, checked 5 Oct 2026.</figcaption></figure>
+<figure class="mg" data-scene="loop"><img src="/blog/assets/media/how-to-use-claude-code/loop.png" width="1600" height="1200" loading="lazy" decoding="async" alt="Animation on a white card. A yellow dot travels around a ring through four phases, Explore, Plan, Implement and Commit. Each phase lights up in turn with a small moving icon and a one line note in the middle."><figcaption>Explore, plan, implement, commit. From the best practices page, checked 5 Oct 2026.</figcaption></figure>
 
 Press `Shift+Tab` until the status bar shows plan mode, and Claude reads files and answers questions without making changes. Ask for a plan, approve it, let it implement and run the tests, then ask it to commit. The docs add a limit: "If you could describe the diff in one sentence, skip the plan." Our [plan mode guide](/blog/how-to-use-claude-code-plan-mode/) has the details.
 
 ## Common mistakes
 
 In our experience, most beginner trouble is a full context window. Everything Claude reads and every command output lands in it, and the best practices page says performance degrades as it fills.
 
-<figure class="mg" data-scene="stage"><img src="/blog/assets/media/how-to-use-claude-code/mistakes.png" width="1600" height="900" loading="lazy" decoding="async" alt="Animation. Michael opens, then Dwight points at a board of common mistakes while Jim and Oscar add one rule each in speech bubbles."><script type="application/json">{"kicker":"House rules","title":"Three mistakes Anthropic's docs warn about","board":{"label":"Avoid","lines":["The kitchen sink session","Correcting over and over","The trust-then-verify gap"]},"script":[{"who":"michael","say":"New here? Dwight has rules."},{"who":"dwight","say":"/clear between unrelated tasks.","point":"up-left"},{"who":"dwight","say":"Two failed fixes? /clear. New prompt.","carry":"/clear"},{"who":"jim","say":"Give it a test, or you are the test."},{"who":"oscar","say":"Rewind is not a replacement for git."}]}</script><figcaption>Failure patterns named on Anthropic's best practices page. Checked 5 Oct 2026.</figcaption></figure>
+<figure class="mg" data-scene="jar"><img src="/blog/assets/media/how-to-use-claude-code/mistakes.png" width="1600" height="1200" loading="lazy" decoding="async" alt="Animation on a white card. Coloured balls for files, command output and the conversation drop into a jar until it is full and a note says performance degrades as it fills. Two buttons empty it: clear throws everything out, compact squeezes it into one summary block."><figcaption>Why a full context window causes trouble, and the two commands that fix it. Checked 5 Oct 2026.</figcaption></figure>
 
 * **One session for everything.** Run `/clear` between unrelated tasks.
 * **Correcting the same thing a third time.** After two failed corrections, `/clear` and write a better first prompt.
@@ -144,4 +144,4 @@ Once the basics feel boring, pick one:
 * [Subagents](/blog/claude-code-subagents-vs-multi-agent-harness/), to keep research out of your main context.
 * [Managing multiple Claude Code sessions](/blog/manage-multiple-claude-code-sessions/), for when one terminal stops being enough.
 
-<link rel="stylesheet" href="/blog/assets/mg/kit.css"><script defer src="/blog/assets/mg/kit.js"></script>
+<link rel="stylesheet" href="/blog/assets/media/how-to-use-claude-code/motion.css"><script defer src="/blog/assets/media/how-to-use-claude-code/motion.js"></script>

docs/blog/agent-security-and-sandboxing/index.html

@@ -348,7 +348,7 @@ <h3><a href="/blog/asd-ste100-prompting/">ASD-STE100 Prompting: Karpathy&#39;s 4
     <div class="meta">
       <time datetime="2026-10-05">Oct 5, 2026</time>
       <span class="dot" aria-hidden="true"></span>
-      <span>6 min</span>
+      <span>5 min</span>
     </div>
     <h3><a href="/blog/how-to-use-claude-code/">How to Use Claude Code: Setup, First Task and the Commands That Matter</a></h3>
     <p class="dek">How to use Claude Code, checked 5 Oct 2026: install it, sign in, run a first task, then the commands, shortcuts and habits a beginner needs.</p>

docs/blog/asd-ste100-prompting/index.html

@@ -370,7 +370,7 @@ <h2>Related in Guides</h2>
     <div class="meta">
       <time datetime="2026-10-05">Oct 5, 2026</time>
       <span class="dot" aria-hidden="true"></span>
-      <span>6 min</span>
+      <span>5 min</span>
     </div>
     <h3><a href="/blog/how-to-use-claude-code/">How to Use Claude Code: Setup, First Task and the Commands That Matter</a></h3>
     <p class="dek">How to use Claude Code, checked 5 Oct 2026: install it, sign in, run a first task, then the commands, shortcuts and habits a beginner needs.</p>

docs/blog/assets/media/how-to-use-claude-code/motion.css

@@ -0,0 +1,13 @@
+/* Bright coded scenes for "How to use Claude Code". Pairs with motion.js. */
+.prose figure.mg { margin: 42px 0; }
+.prose figure.mg img, .mg .mg-svg { display: block; width: 100%; height: auto; border: 1px solid #1A1320; border-radius: 18px; background: #fff; }
+.mg figcaption { font: 500 13px/1.5 "Space Grotesk", system-ui, sans-serif; color: #6B5878; padding-top: 10px; text-align: center; }
+.mg .mg-svg { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+.mg .mg-svg text { -webkit-user-select: none; user-select: none; pointer-events: none; }
+.mg .mg-hit { cursor: pointer; outline: none; }
+.mg [role="slider"] { cursor: grab; touch-action: none; }
+.mg .mg-ring { stroke-opacity: 0; transition: stroke-opacity 0.15s; }
+.mg .mg-hit:focus-visible .mg-ring { stroke-opacity: 1; }
+.mg [role="slider"]:focus-visible circle:nth-child(2) { stroke-width: 5; }
+@media (hover: hover) { .mg .mg-hit:hover .mg-ring { stroke-opacity: 0.5; } }
+@media (prefers-reduced-motion: reduce) { .mg .mg-ring { transition: none; } }