Cinematic 3D Motion Graphics, VFX & CGI Engineering

1. Deterministic 3D & Shader Rules

Whether rendering in HyperFrames or Remotion, headless Chromium captures frames out of real-time order.

1. Never use clock.getDelta() or performance.now() to advance 3D animations or shaders.
2. Always compute scene state as a pure function of t (seconds) or frame.
3. Seed all randomness: Particle positions, debris velocities, starfields, and noise turbulence MUST use a deterministic seeded generator (mulberry32(seed)).

2. HyperFrames Three.js + GSAP Deterministic Adapter

When using Three.js inside a HyperFrames HTML composition:

• Vendor Three.js locally from /home/user/AI-VIDEO-EDITOR/toolkit/vendor/three.core.min.js (or registry/blocks/cuboid-carousel/assets/three.module.min.js).
• Drive a state = { progress: 0, camAngle: 0, explode: 0 } object via the paused master GSAP timeline window.__timelines["main"], and render the Three.js scene inside a GSAP onUpdate callback or deterministic renderAtTime(t) hook so seeking to any timestamp t immediately updates camera matrices, meshes, shader uTime uniforms, and calls renderer.render(scene, camera).