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 tasks involving Zdog pseudo-3D, Vanta.js backgrounds, Vanilla-Tilt parallax, card tilt effects, hero section animations, or lightweight landing page visuals. Ideal for performance-focused designs.
This skill combines three powerful libraries for decorative 3D elements and micro-interactions:
This SKILL.md is the routing layer. Detailed recipes, examples, integration notes, and troubleshooting guidance live in references/details.md so they are loaded only when the task needs them.
Before producing concrete output, making a design recommendation, or debugging an implementation, load the relevant reference section below. Do not rely on memory for branch-specific APIs, examples, or caveats.
| Task branch | Read first |
|---|---|
| Zdog - Pseudo-3D Illustrations | references/details.md#zdog---pseudo-3d-illustrations |
| Vanta.js - Animated 3D Backgrounds | references/details.md#vantajs---animated-3d-backgrounds |
| Vanilla-Tilt.js - Parallax Tilt Effects | references/details.md#vanilla-tiltjs---parallax-tilt-effects |
| Common Patterns | references/details.md#common-patterns |
| Performance Best Practices | references/details.md#performance-best-practices |
| Common Pitfalls | references/details.md#common-pitfalls |
| Resources | references/details.md#resources |