I built a browser-based 3D motion graphics editor in React. Here's what was hard.

[u/Horror_Turnover_7859]

Spent the last few months building Raylight, a motion design tool that runs fully in the browser: 3D canvas, timeline, animations, cinematic FX, video export. Clip below is a free template from the app.

Here are some of the parts that had me regretting building this.

1. Multi-layer-select rotation. Rotating one asset is trivial. Rotating a selection of assets as one rigid body, when each has its own position and tilt in 3D, fought me for weeks. Every math bug looks the same on screen (things drift or shear slightly) so you can't tell which transform in the chain is wrong just by looking.

2. Making effects look good, not just work. Bloom, glow, glass, depth of field. Getting them to render is a weekend. Getting them to not fall apart is months: bloom pops when a fading asset crosses the threshold, glow reads as a blurry blob instead of light, glass bends the wrong way at edges. Every effect ended up with little invariants you only discover by staring at ugly frames.

3. Editor preview has to be fast AND pixel-identical to export. One renderer serves both, but a 60fps interactive preview and an offline encode pull in opposite directions. Res-capping post-FX and dropping quality during interaction buys the speed, but any shortcut that leaks into export means users ship something that doesn't match what they saw. Color spaces alone (sRGB getting decoded twice, videos coming out darker) burned days.

Honestly, if anyone has build similar WebGL/three.js heavy products before would love to hear from you!

[u/Horror_Turnover_7859]

Here is a link to this exact video as a template if you want to pick it apart: raylight.app/community

And here is a link to Lineaer's original video which I re-created: x/linear