recut-motion-graphic

Define the viewer job and visual grammar first, then call recut.motion-graphic.create with a brief describing content, form, and background. Wait for the job to reach verified status, read the assetId from the result, and place it with timeline.placeComponents.

Use HTML for pure visual layers without state, React for structured cards and lists with hooks and GSAP animation, and R3F for 3D objects, shaders, and particles. Choose based on the concept's visual grammar, not the API.

Yes, GSAP is the preferred animation engine for react and r3f surfaces via the useTimeline hook. Timelines must be paused and driven only by seek or progress; ScrollTrigger, Draggable, random utilities, and play/restart calls are rejected at build time.

Build-time static scanning rejects wall-clock sources such as Math.random, Date.now, setTimeout, and requestAnimationFrame because animation must be a pure function of time. Use fixed seeds derived from object.id or pure arithmetic instead.

Reuse a component asset only when viewer job, information structure, visual form, and canvas role are all identical. If the job differs, create a new asset that shares the same palette, typography, and motion language rather than copying source code.

Fullscreen mode components fill the entire canvas and must align getBaseSize to it, while local mode components keep their own design size and can be positioned anywhere. Use fullscreen only when the graphic intentionally covers the whole frame as a chapter or conclusion beat.