3D Motion Graphics & Video Title Cards

Write a React Three Fiber component that reveals a 3D title text using a particle burst animation — particles fly in from random positions and magnetically assemble into the text form. Requirements: (1) Text3D: use @react-three/drei Text3D with a loaded font, text prop, size: 0.8, height: 0.1, bevelEnabled: true, bevelSize: 0.02. After the geometry is created, extract all vertex positions from the geometry: geometry.attributes.position.array — these become the particle target positions. (2) Particle system: InstancedMesh with SphereGeometry(0.015, 4, 4), count = number of text vertices (sample every Nth vertex if > 5000). Store two Float32Array refs: currentPositions (start: random positions in a 10-unit sphere around origin) and targetPositions (text vertex positions). (3) GSAP timeline: create a timeline with duration 1.8s. Phase 1 (0–0.3s): particles drift slowly from random positions. Phase 2 (0.3–1.8s): for each particle, GSAP tweens its position in currentPositions toward its targetPosition with stagger: { each: 0.001, from: "random" } and ease: "power3.out". (4) useFrame: each frame, update all InstancedMesh matrices from currentPositions. (5) After assembly complete (t=1.8s): fade in the actual Text3D mesh and fade out the particle InstancedMesh simultaneously. (6) Export as ParticleTitleReveal with props text: string, color: string, onComplete: () => void. Full TypeScript.

Write a TypeScript module that exports a React Three Fiber canvas animation to an MP4 file using the WebCodecs API and mp4-muxer, without screen recording. Requirements: (1) Setup: import VideoEncoder from the WebCodecs API (check window.VideoEncoder exists — throw if not). Import Muxer, ArrayBufferTarget from mp4-muxer. (2) startRecording(canvas: HTMLCanvasElement, fps: number, durationSeconds: number): (a) Create a Muxer with target: new ArrayBufferTarget(), video: { codec: "avc", width: canvas.width, height: canvas.height, frameRate: fps }. (b) Create a VideoEncoder with output callback that calls muxer.addVideoChunk(chunk, meta). Config: codec: "avc1.42001f", width: canvas.width, height: canvas.height, bitrate: 8_000_000, framerate: fps. (c) Use canvas.captureStream(fps) to get a MediaStream, then a MediaStreamTrackProcessor to get a ReadableStream of VideoFrames. (d) For each VideoFrame: call encoder.encode(frame, { keyFrame: frameIndex % (fps * 2) === 0 }), frame.close(), increment frameIndex. Stop after durationSeconds * fps frames. (3) stopRecording(): await encoder.flush(), muxer.finalize(), extract muxer.target.buffer as ArrayBuffer. (4) downloadMp4(buffer: ArrayBuffer, filename: string): create a Blob with type "video/mp4", URL.createObjectURL, trigger download via <a> click. (5) React hook: useVideoExport() returning { startExport, progress (0–1), isExporting, downloadUrl }. Full TypeScript with WebCodecs types.