lightweight-3d-effects

Use Vanta.js by loading Three.js and a Vanta effect script, then call an initializer like VANTA.WAVES with a target element and color options. The setup_vanta.py script generates complete HTML pages for 11 effects including Waves, Birds, Net, and Fog.

Zdog is a ~28kb pseudo-3D engine that renders flat, round designs in 3D space using Canvas or SVG. It offers a declarative API with shapes like Ellipse, Box, and Polygon, plus built-in drag rotation and animation loops.

Use Vanilla-Tilt.js by adding a data-tilt attribute to your element or calling VanillaTilt.init with options like max angle, speed, scale, and glare. It weighs about 8.5kb, has no dependencies, and supports gyroscope input on mobile devices.

Yes, Vanta.js works with React by initializing the effect inside useEffect with a ref to the container element and passing THREE as an option. Always call vantaEffect.destroy() in the cleanup function to prevent memory leaks when the component unmounts.

Vanta.js requires colors as hex numbers, not strings. Use 0x23153c instead of "#23153c" when setting color options, both during initialization and when calling setOptions to update colors dynamically.

Use Zdog for decorative pseudo-3D illustrations, icons, and simple animated models where a flat, designer-friendly aesthetic fits. Choose Three.js or react-three-fiber when you need true 3D rendering, complex lighting, textures, or photorealistic scenes.