lightweight-3d-effects

Generated source view for the actual executable engineering/lightweight-3d-effects skill. The durable routing article is Frontend and Design Skills. Source: skills/engineering/lightweight-3d-effects/SKILL.md

Runtime Source

Bundled Resources

These files are part of the executable skill folder and must be preserved with the skill source.

Description

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.

Skill Source

---
name: lightweight-3d-effects
description: 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.
origin: personal
source_slug: lightweight-3d-effects
---


# 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


## Progressive Disclosure

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` |

## 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

---

Timeline

• 2026-07-15 | Generated a browseable source page from the actual executable skill file. Source: skills/engineering/lightweight-3d-effects/SKILL.md