Lightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js. Use this skill when adding pseudo-3D illustrations, animated backgrounds, parallax tilt effects, decorative 3D elements, or subtle depth effects without heavy frameworks. Triggers on task

Lightweight 3D Effects Skill Overview This skill combines three powerful libraries for decorative 3D elements and micro interactions: Zdog : Pseudo 3D engine for designer friendly vector illustrations Vanta.js : Animated 3D backgrounds powered by Three.js/p5.js Vanilla Tilt.js : Smooth parallax tilt effects responding to mouse/gyroscope When to Use This Skill Add decorative 3D illustrations without heavy frameworks Create animated backgrounds for hero sections Implement subtle parallax tilt effects on cards/images Build lightweight landing pages with visual depth Add micro interactions that enhance UX without performance impact Zdog Pseudo 3D Illustrations Core Concepts Zdog is a pseudo 3D engine that renders flat, round designs in 3D space using Canvas or SVG. Key Features: Designer friendly declarative API Small file size (~28kb minified) Canvas or SVG rendering Drag rotation built in Smooth animations Basic Setup Zdog Shapes Basic Shapes: Zdog Groups Organize shapes into groups for complex models: Zdog Animation Vanta.js Animated 3D Backgrounds Core Concepts Vanta.js provides animated WebGL backgrounds with minimal setup, powered by Three.js or p5.js. Key Features: 14+ animated effects (Waves, Birds, Net, Clouds, etc.) Mouse/touch interaction Customizable colors and settings ~120KB total (including Three.js) 60fps on most devices Basic Setup Available Effects 1. WAVES (Three.js) 2. CLOUDS (Three.js) 3. BIRDS (p5.js required) 4. NET (Three.js) 5. CELLS (p5.js required) 6. FOG (Three.js) Other effects: GLOBE, TRUNK, TOPOLOGY, DOTS, HALO, RINGS Configuration Options Vanta.js Methods React Integration Vanilla Tilt.js Parallax Tilt Effects Core Concepts Vanilla Tilt.js adds smooth 3D tilt effects responding to mouse movement and device orientation. Key Features: Lightweight (~8.5kb minified) No dependencies Gyroscope support Optional glare effect Smooth transitions Basic Setup Configuration Options Advanced Examples Card with Glare Effect: Layered 3D Effect: Programmatic Control: React Integration Common Patterns Pattern 1: Hero Section with Vanta + Content Pattern 2: Zdog Icon Grid Pattern 3: Tilt Card Gallery Pattern 4: Combined Effect Vanta Background + Tilt Cards Performance Best Practices Zdog Optimization 1. Limit Shape Count : Keep total shapes under 100 for smooth 60fps 2. Use Groups : Organize related shapes for easier management 3. Optimize Animation Loop : Only call updateRenderGraph() when needed 4. Canvas vs SVG : Canvas is faster for animations, SVG for static illustrations Vanta.js Optimization 1. Single Instance : Use only 1 2 Vanta effects per page 2. Mobile Fallback : Disable on mobile or use static background 3. Destroy on Unmount : Always call .destroy() in SPAs 4. Reduce Particle Count : Lower points , quantity for better performance Vanilla Tilt Optimization 1. Limit Instances : Apply to visible elements only 2. Reduce gyroscopeSamples : Lower for better mobile performance 3. Disable on Low End Devices : Check device capabilities 4. Use CSS will change : Hint browser for transforms Common Pitfalls Pitfall 1: Multiple Vanta Instances Problem : Multiple Vanta effects cause performance issues Solution : Use only one effect, or lazy load effects per section Pitfall 2: Memory Leaks in SPAs Problem : Vanta/Tilt not destroyed on component unmount Solution : Always clean up Pitfall 3: Zdog Not Rendering Problem : Canvas appears blank Causes : Forgot to call updateRenderGraph() Canvas size is 0 Shapes are outside view Solution : Pitfall 4: Tilt Not Working on Mobile Problem : Tilt doesn't respond on mobile devices Solution : Enable gyroscope controls Pitfall 5: Color Format Confusion (Vanta.js) Problem : Colors don't work Cause : Vanta.js uses hex numbers , not strings Resources Zdog: [Zdog Documentation](https://zzz.dog/) [Zdog GitHub](https://github.com/metafizzy/zdog) [Zdog Codepen Examples](https://codepen.io/collection/DzdGMe/) Vanta.js: [Vanta.js Official Site](https://www.vantajs.com/) [Vanta.js GitHub](https://github.com/tengbao/vanta) [Effect Customizer](https://www.vantajs.com/?effect=waves) Vanilla Tilt.js: [Vanilla Tilt GitHub](https://github.com/micku7zu/vanilla tilt.js) [NPM Package](https://www.npmjs.com/package/vanilla tilt) Related Skills threejs webgl : For more complex 3D graphics beyond decorative effects gsap scrolltrigger : For animating these effects on scroll motion framer : For React component animations alongside these effects react three fiber : Advanced 3D when lightweight effects aren't enough

lightweight-3d-effects