The latest articles on DEV Community by Emily Johnson (@emilyjohnson2610). https://dev.to/emilyjohnson2610 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4198236%2F62200e4d-c5e4-437e-87f3-c084657393b3.png https://dev.to/emilyjohnson2610 en Emily Johnson Wed, 21 Oct 2026 11:42:10 +0000 https://dev.to/emilyjohnson2610/generated-motion-in-docs-captions-controls-and-honesty-lb1 https://dev.to/emilyjohnson2610/generated-motion-in-docs-captions-controls-and-honesty-lb1 <p>Our docs site explains a camera-control SDK, and static screenshots were doing a poor job of showing what "slow orbit" or "push in" actually look like. We added short motion previews. Here is the checklist we settled on.</p> <h2> 1. Never autoplay with sound </h2> <p>Use <code>&lt;video muted loop playsinline&gt;</code> and only autoplay when <code>prefers-reduced-motion: no-preference</code>.</p> <h2> 2. Always give controls </h2> <p>Add <code>controls</code>, or a visible pause button. WCAG 2.2.2 asks for a way to pause anything that moves for more than five seconds.</p> <h2> 3. Caption what the clip is </h2> <p>Each preview has a caption stating that the motion was generated from a still image. Readers should never wonder whether a clip is a real recording of the SDK.</p> <h2> 4. Keep a text equivalent </h2> <p>Every clip sits next to one sentence that describes the movement, which also helps search and screen readers.</p> <h2> 5. Budget the bytes </h2> <p>720p, 6 seconds, H.264, under 1.5 MB each, lazy-loaded below the fold.</p> <p>For generating the previews we relied on Wan 3.0 (Wan 3.0 under the hood; we found it a solid <a href="https://wan3.io/wan-3-0" rel="noopener noreferrer">AI video maker</a>), setting each screenshot as the first frame and describing only the camera move.</p> webdev video a11y