Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
Web sims
Read sims/README.md first; it has the contract and every command.
When to use this instead of Remotion
- 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/).
Workflow
- 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.
- Put every beat in a
timeline.jsonnext to the sim (chapters, the hero
moment, camera keys). Sound scripts read the same file.
- 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).
- Simulate anything stateful once at load;
render(t)only reads it. - Build:
node sims/build.mjs <name>. - Review with stills at every beat:
node sims/capture.mjs <name> --stills 0,2,5,8,12,16,20 --cols 4 --out out/sims/<name>-review.png. Open the sheet and check it like the review loop says: frame 0 strong, one focal point per frame, nothing blown out by bloom, text readable on a phone, labels never cover the subject. Fix and repeat.
- Sound: a music track (
--music, the sim getscfg.beatsand should hit
the drop), a generated bed (python3 sims/<name>/sound.py like sims/engine/sound.py), or both mixed with ffmpeg first.
- Capture:
node sims/capture.mjs <name> --size 1080x1350 --out out/sims/<name>.mp4
and look at a sheet of the final file before calling it done.
Lessons from the examples
- Bloom eats detail: keep emissive and additive layers under ~1.0 and raise
them only for the one hero moment.
- Glossy metal plus a low sun gives white streaks. Use roughness ≥ 0.45 and
envMapIntensity ≈ 0.5 on big surfaces.
- One hero object beats a crowd. If parts hide the subject, move them out of
the way or fade them.
- Chapters + a one-line caption per step + labels with real numbers make a
simulation read as an explanation, not just eye candy.
- A camera that flies through the object is worth more than ten orbits.
