fix(cli): hyperframes docs motion-blur shows the motion blur guide (#6779)

* fix(cli): hyperframes docs motion-blur shows the motion blur guide

* docs(cli): list the motion-blur topic in the docs command reference

docs/packages/cli.mdx

@@ -1988,7 +1988,7 @@ npx hyperframes docs [topic]
 ```
 
 Topics: `data-attributes`, `examples`, `rendering`, `gsap`, `troubleshooting`,
-`compositions`. Run it bare to list them.
+`compositions`, `motion-blur`. Run it bare to list them.
 
 ### `feedback`
 

packages/cli/src/commands/docs.test.ts

@@ -48,3 +48,18 @@ describe("docs examples topic", () => {
     }
   });
 });
+
+describe("docs topics", () => {
+  const source = readFileSync(
+    join(REPO_ROOT, "packages", "cli", "src", "commands", "docs.ts"),
+    "utf8",
+  );
+
+  it("has a file for every topic it lists, including motion-blur", () => {
+    const files = [...source.matchAll(/file: "([^"]+)"/g)].map((match) => match[1] ?? "");
+    expect(files).toContain("motion-blur.md");
+    for (const file of files) {
+      expect(readdirSync(join(REPO_ROOT, "packages", "cli", "src", "docs"))).toContain(file);
+    }
+  });
+});

packages/cli/src/commands/docs.ts

@@ -43,6 +43,10 @@ const TOPICS: Record<string, TopicEntry> = {
     file: "compositions.md",
     description: "Composition structure, nesting, and variables",
   },
+  "motion-blur": {
+    file: "motion-blur.md",
+    description: "Shutter smear on fast movers: attributes, tiers, checks",
+  },
 };
 
 function docsDir(): string {

packages/cli/src/docs/motion-blur.md

@@ -0,0 +1,28 @@
+# Motion Blur
+
+Fast-moving elements get a shutter smear along their path. It is opt-in: nothing blurs until the composition root has `data-motion-blur="on"`.
+
+## Turn it on
+
+- `data-motion-blur` — `on` enables blur; `off` opts out, on the root or on any subtree
+- `data-motion-blur-shutter` — shutter angle in degrees, 0-720 (default: 240)
+- `data-motion-blur-samples` — samples per frame, 2-64 (default: at least 32, sized to the smear)
+- `data-motion-blur-events` — `on` runs timeline callbacks while blur looks for movers; needed when motion is set from a `render(t)` callback
+- `data-motion-blur-tier` — `auto` (default), `capture` or `filter`
+
+The same attributes drive the browser editor preview and `hyperframes render`.
+
+## Two ways it is drawn
+
+- `capture` redraws each mover along its path, so turns and zooms smear truthfully. Needs a browser with HTML in Canvas.
+- `filter` puts an SVG filter on each mover. Works in any Chrome and costs little; turns and zooms are only softened.
+
+`auto` uses `filter` when every mover only translates and `capture` when anything turns or scales.
+
+## Check and render
+
+- `npx hyperframes check` reports `motion_blur_filter_fallback`, `motion_blur_no_movers` and `motion_blur_unverified`
+- `hyperframes render --page-motion-blur off` renders without the composition's blur
+- Blur is off for HDR, distributed, and sub-frame-blur renders
+
+Full guide: https://hyperframes.heygen.com/guides/motion-blur