web-sims
Build a simulation-style video (agents, particles, 3D machines, fly-throughs) as one HTML page whose render(t) is a pure function of time, then capture it frame by frame to a 60 fps mp4 with sims/capture.mjs. Use when the idea is a simulation or a 3D object rather than motion graphics with text and UI.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original text
Topics in the source
- Web sims
- When to use this instead of Remotion
- Workflow
- Lessons from the examples
Full Production Studio note: this skill drives the toolkit in whaleyxbt/claude-motion. Clone that repo and run your agent inside it for the scripts/paths below to work; the guidance itself is usable anywhere. Read sims/README.md first; it has the contract and every command. Hundreds of moving things with their own rules (agents, particles, crawlers). A 3D object or machine the camera moves around or flies through. Anything that is easier to write as a three.js or canvas page than as React. Motion graphics with type, UI and timed reveals stay in Remotion (src/). 1. Agree on the idea, the hero moment and the length with the user. Default format: 1080×1350 layout (4:5), 60 fps, 20–24 s. 2. Put every beat in a timeline.json next to the sim (chapters, the hero moment, camera keys). Sound scripts read the same file. 3. Start from the closest example: crawlers (agents on DOM text), dossier (the same plus screen-space overlays), engine (three.js object with cutaway, chapters, fly-through, exploded view, generated sound). 4. Simulate anything stateful once at load; render(t) only reads it. 5. Build: node sims/build.mjs . 6. Review with stills at every beat: node sims/capture.mjs --stills 0,
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- alfaris/full-production-studio
- Source file
- skills/web-sims/SKILL.md
- Fixed revision
- 223f74cc6dceb4c16858c4d58b5d066e7c5eeb83
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: alfaris/full-production-studio · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-10T12:01:34.006Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.