lightweight-3d-effects▌
freshtechbro/claudedesignskills · updated Apr 8, 2026
This skill combines three powerful libraries for decorative 3D elements and micro-interactions:
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
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<style>
.zdog-canvas {
display: block;
margin: 0 auto;
background: #FDB;
cursor: move;
}
</style>
</head>
<body>
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<script>
let isSpinning = true;
let illo = new Zdog.Illustration({
element: '.zdog-canvas',
zoom: 4,
dragRotate: true,
onDragStart: function() {
isSpinning = false;
},
});
// Add shapes
new Zdog.Ellipse({
addTo: illo,
diameter: 20,
translate: { z: 10 },
stroke: 5,
color: '#636',
});
new Zdog.Rect({
addTo: illo,
width: 20,
height: 20,
translate: { z: -10 },
stroke: 3,
color: '#E62',
fill: true,
});
function animate() {
illo.rotate.y += isSpinning ? 0.03 : 0;
illo.updateRenderGraph();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Zdog Shapes
Basic Shapes:
// Circle
new Zdog.Ellipse({
addTo: illo,
diameter: 80,
stroke: 20,
color: '#636',
});
// Rectangle
new Zdog.Rect({
addTo: illo,
width: 80,
height: 60,
stroke: 10,
color: '#E62',
fill: true,
});
// Rounded Rectangle
new Zdog.RoundedRect({
addTo: illo,
width: 60,
height: 40,
cornerRadius: 10,
stroke: 4,
color: '#C25',
fill: true,
});
// Polygon
new Zdog.Polygon({
addTo: illo,
radius: 40,
sides: 5,
stroke: 8,
color: '#EA0',
fill: true,
});
// Line
new Zdog.ShapeDiscussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.7★★★★★75 reviews- ★★★★★Pratham Ware· Dec 24, 2024
lightweight-3d-effects reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Mei Abebe· Dec 24, 2024
Useful defaults in lightweight-3d-effects — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Yusuf Park· Dec 20, 2024
lightweight-3d-effects has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Evelyn Taylor· Dec 16, 2024
Useful defaults in lightweight-3d-effects — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Harper Sharma· Dec 4, 2024
I recommend lightweight-3d-effects for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Yusuf Choi· Nov 23, 2024
Solid pick for teams standardizing on skills: lightweight-3d-effects is focused, and the summary matches what you get after install.
- ★★★★★Mei Liu· Nov 15, 2024
lightweight-3d-effects has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Harper Shah· Nov 11, 2024
Useful defaults in lightweight-3d-effects — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Sophia Robinson· Nov 7, 2024
lightweight-3d-effects has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Mei Huang· Oct 26, 2024
Solid pick for teams standardizing on skills: lightweight-3d-effects is focused, and the summary matches what you get after install.
showing 1-10 of 75