Skip to main content Início Criadores jasonkneen tiny-world-builder lightweight-3d-effects
lightweight-3d-effects 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.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/jasonkneen/tiny-world-builder --skill lightweight-3d-effectsO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... tinyworld-lowpoly-stylized-3d Use when adding, importing, designing, reviewing, or animating low-poly / stylized 3D assets in Tiny World Builder, including Three.js procedural meshes, GLB/GLTF assets, Poly Pizza models, material palettes, scale/orientation, silhouettes, clouds/planes/crop dusters, and toolbar thumbnails.
Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Explorador de arquivos
11 arquivos 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.
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 illustrationsVanta.js : Animated 3D backgrounds powered by Three.js/p5.jsVanilla-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 (false ;
},
});
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 (rotate .y += isSpinning ? 0.03 : 0 ;
illo.updateRenderGraph ();
requestAnimationFrame (animate);
}
animate ();
</script >
</body >
</html >
Zdog Shapes
new Zdog .Ellipse ({
addTo : illo,
diameter : 80 ,
stroke : 20 ,
color : '#636' ,
});
new Zdog .Rect ({
addTo : illo,
width : 80 ,
height : 60 ,
stroke : 10 ,
color : '#E62' ,
fill : true ,
});
new Zdog .RoundedRect ({
addTo : illo,
width : 60 ,
height : 40 ,
cornerRadius : 10 ,
stroke : 4 ,
color : '#C25' ,
fill : true ,
});
new Zdog .Polygon ({
addTo : illo,
radius : 40 ,
sides : 5 ,
stroke : 8 ,
color : '#EA0' ,
fill : true ,
});
new Zdog .Shape ({
addTo : illo,
path : [
{ x : -40 , y : 0 },
{ x : 40 , y : 0 },
],
stroke : 6 ,
color : '#636' ,
});
new Zdog .Shape ({
addTo : illo,
path : [
{ x : -40 , y : -20 },
{
bezier : [
{ x : -40 , y : 20 },
{ x : 40 , y : 20 },
{ x : 40 , y : -20 },
],
},
],
stroke : 4 ,
color : '#C25' ,
closed : false ,
});
Zdog Groups Organize shapes into groups for complex models:
let head = new Zdog .Group ({
addTo : illo,
translate : { y : -40 },
});
new Zdog .Ellipse ({
addTo : head,
diameter : 60 ,
stroke : 30 ,
color : '#FED' ,
});
new Zdog .Ellipse ({
addTo : head,
diameter : 8 ,
stroke : 4 ,
color : '#333' ,
translate : { x : -10 , z : 15 },
});
new Zdog .Ellipse ({
addTo : head,
diameter : 8 ,
stroke : 4 ,
color : '#333' ,
translate : { x : 10 , z : 15 },
});
new Zdog .Shape ({
addTo : head,
path : [
{ x : -10 , y : 0 },
{
bezier : [
{ x : -5 , y : 5 },
{ x : 5 , y : 5 },
{ x : 10 , y : 0 },
],
},
],
stroke : 2 ,
color : '#333' ,
translate : { y : 5 , z : 15 },
closed : false ,
});
head.rotate .y = Math .PI / 4 ;
Zdog Animation
function animate (rotate .y += 0.03 ;
illo.updateRenderGraph ();
requestAnimationFrame (animate);
}
animate ();
let t = 0 ;
function bounceAnimate (0.05 ;
illo.translate .y = Math .sin (t) * 20 ;
illo.updateRenderGraph ();
requestAnimationFrame (bounceAnimate);
}
bounceAnimate ();
let targetRotateY = 0 ;
let currentRotateY = 0 ;
document .addEventListener ('mousemove' , (event ) => {
targetRotateY = (event.clientX / window .innerWidth - 0.5 ) * Math .PI ;
});
function smoothAnimate (0.1 ;
illo.rotate .y = currentRotateY;
illo.updateRenderGraph ();
requestAnimationFrame (smoothAnimate);
}
smoothAnimate ();
Vanta.js - Animated 3D Backgrounds
Core Concepts Vanta.js provides animated WebGL backgrounds with minimal setup, powered by Three.js or p5.js.
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 <!DOCTYPE html >
<html >
<head >
<style >
#vanta-bg {
width : 100% ;
height : 100vh ;
}
.content {
position : relative;
z-index : 1 ;
color : white;
text-align : center;
padding : 100px 20px ;
}
</style >
</head >
<body >
<div id ="vanta-bg" >
<div class ="content" >
<h1 > My Animated Background</h1 >
<p > Content goes here</p >
</div >
</div >
<script src ="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js" > </script >
<script src ="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.waves.min.js" > </script >
<script >
VANTA .WAVES ({
el : "#vanta-bg" ,
mouseControls : true ,
touchControls : true ,
gyroControls : false ,
minHeight : 200.00 ,
minWidth : 200.00 ,
scale : 1.00 ,
scaleMobile : 1.00 ,
color : 0x23153c ,
shininess : 30.00 ,
waveHeight : 15.00 ,
waveSpeed : 0.75 ,
zoom : 0.65
});
</script >
</body >
</html >
Available Effects VANTA .WAVES ({
el : "#vanta-bg" ,
color : 0x23153c ,
shininess : 30 ,
waveHeight : 15 ,
waveSpeed : 0.75 ,
zoom : 0.65
});
VANTA .CLOUDS ({
el : "#vanta-bg" ,
skyColor : 0x68b8d7 ,
cloudColor : 0xadc1de ,
cloudShadowColor : 0x183550 ,
sunColor : 0xff9919 ,
sunGlareColor : 0xff6633 ,
sunlightColor : 0xff9933 ,
speed : 1.0
});
3. BIRDS (p5.js required)
<script src ="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.min.js" > </script >
<script src ="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.birds.min.js" > </script >
<script >
VANTA .BIRDS ({
el : "#vanta-bg" ,
backgroundColor : 0x23153c ,
color1 : 0xff0000 ,
color2 : 0x0000ff ,
birdSize : 1.5 ,
wingSpan : 20 ,
speedLimit : 5 ,
separation : 40 ,
alignment : 40 ,
cohesion : 40 ,
quantity : 3
});
</script >
VANTA .NET ({
el : "#vanta-bg" ,
color : 0x3fff00 ,
backgroundColor : 0x23153c ,
points : 10 ,
maxDistance : 20 ,
spacing : 15 ,
showDots : true
});
5. CELLS (p5.js required)
VANTA .CELLS ({
el : "#vanta-bg" ,
color1 : 0x00ff00 ,
color2 : 0xff0000 ,
size : 1.5 ,
speed : 1.0 ,
scale : 1.0
});
VANTA .FOG ({
el : "#vanta-bg" ,
highlightColor : 0xff3f81 ,
midtoneColor : 0x1d004d ,
lowlightColor : 0x2b1a5e ,
baseColor : 0x000000 ,
blurFactor : 0.6 ,
speed : 1.0 ,
zoom : 1.0
});
Other effects: GLOBE, TRUNK, TOPOLOGY, DOTS, HALO, RINGS
Configuration Options
{
el : "#element-id" ,
mouseControls : true ,
touchControls : true ,
gyroControls : false ,
minHeight : 200.00 ,
minWidth : 200.00 ,
scale : 1.00 ,
scaleMobile : 1.00 ,
color : 0x23153c ,
backgroundColor : 0x000000 ,
forceAnimate : false ,
}
Vanta.js Methods
const vantaEffect = VANTA .WAVES ({
el : "#vanta-bg" ,
});
vantaEffect.destroy ();
vantaEffect.setOptions ({
color : 0xff0000 ,
waveHeight : 20
});
vantaEffect.resize ();
React Integration import { useEffect, useRef, useState } from 'react' ;
import VANTA from 'vanta/dist/vanta.waves.min' ;
import * as THREE from 'three' ;
function VantaBackground (const vantaRef = useRef (null );
const [vantaEffect, setVantaEffect] = useState (null );
useEffect (() => {
if (!vantaEffect) {
setVantaEffect (VANTA .WAVES ({
el : vantaRef.current ,
THREE : THREE ,
mouseControls : true ,
touchControls : true ,
color : 0x23153c ,
shininess : 30 ,
waveHeight : 15 ,
waveSpeed : 0.75
}));
}
return () => {
if (vantaEffect) vantaEffect.destroy ();
};
}, [vantaEffect]);
return (
<div ref ={vantaRef} style ={{ width: '100 %', height: '100vh ' }}>
<div className ="content" >
<h1 > React + Vanta.js</h1 >
</div >
</div >
Vanilla-Tilt.js - Parallax Tilt Effects
Core Concepts Vanilla-Tilt.js adds smooth 3D tilt effects responding to mouse movement and device orientation.
Lightweight (~8.5kb minified)
No dependencies
Gyroscope support
Optional glare effect
Smooth transitions
Basic Setup <!DOCTYPE html >
<html >
<head >
<style >
.tilt-card {
width : 300px ;
height : 400px ;
background : linear-gradient (135deg , #667eea 0% , #764ba2 100% );
border-radius : 15px ;
margin : 50px auto;
display : flex;
align-items : center;
justify-content : center;
color : white;
font-size : 24px ;
transform-style : preserve-3 d;
}
.tilt-inner {
transform : translateZ (60px );
}
</style >
</head >
<body >
<div class ="tilt-card" data-tilt >
<div class ="tilt-inner" > Hover Me!</div >
</div >
<script src ="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js" > </script >
</body >
</html >
Configuration Options VanillaTilt .init (document .querySelector (".tilt-card" ), {
max : 25 ,
reverse : false ,
startX : 0 ,
startY : 0 ,
perspective : 1000 ,
scale : 1.1 ,
speed : 400 ,
transition : true ,
easing : "cubic-bezier(.03,.98,.52,.99)" ,
axis : null ,
reset : true ,
"reset-to-start" : true ,
glare : true ,
"max-glare" : 0.5 ,
"glare-prerender" : false ,
full-page-listening : false ,
gyroscope : true ,
gyroscopeMinAngleX : -45 ,
gyroscopeMaxAngleX : 45 ,
gyroscopeMinAngleY : -45 ,
gyroscopeMaxAngleY : 45 ,
gyroscopeSamples : 10
});
Advanced Examples <div class ="tilt-card" data-tilt
data-tilt-glare
data-tilt-max-glare ="0.5"
data-tilt-scale ="1.1" >
<div class ="tilt-inner" >
<h3 > Premium Card</h3 >
<p > With glare effect</p >
</div >
</div >
<style >
.tilt-card {
transform-style : preserve-3 d;
}
.layer-1 {
transform : translateZ (20px );
}
.layer-2 {
transform : translateZ (40px );
}
.layer-3 {
transform : translateZ (60px );
}
</style >
<div class ="tilt-card" data-tilt data-tilt-max ="15" >
<div class ="layer-1" > Background</div >
<div class ="layer-2" > Middle</div >
<div class ="layer-3" > Front</div >
</div >
const element = document .querySelector (".tilt-card" );
VanillaTilt .init (element, {
max : 25 ,
speed : 400 ,
glare : true ,
"max-glare" : 0.5
});
element.addEventListener ("tiltChange" , (e ) => {
console .log ("Tilt:" , e.detail );
});
element.vanillaTilt .reset ();
element.vanillaTilt .destroy ();
const values = element.vanillaTilt .getValues ();
console .log (values);
React Integration import { useEffect, useRef } from 'react' ;
import VanillaTilt from 'vanilla-tilt' ;
function TiltCard ({ children, options } ) {
const tiltRef = useRef (null );
useEffect (() => {
const element = tiltRef.current ;
VanillaTilt .init (element, {
max : 25 ,
speed : 400 ,
glare : true ,
"max-glare" : 0.5 ,
...options
});
return () => {
element.vanillaTilt .destroy ();
};
}, [options]);
return (
<div ref ={tiltRef} className ="tilt-card" >
{children}
</div > TiltCard options={{ max : 30 , scale : 1.1 }}>
<h3 > My Card</h3 > TiltCard >
Common Patterns
Pattern 1: Hero Section with Vanta + Content <section id ="hero" >
<div class ="hero-content" >
<h1 > Welcome</h1 >
<p > Animated background with content overlay</p >
<button > Get Started</button >
</div >
</section >
<style >
#hero {
position : relative;
width : 100% ;
height : 100vh ;
overflow : hidden;
}
.hero-content {
position : relative;
z-index : 1 ;
color : white;
text-align : center;
padding-top : 20vh ;
}
</style >
<script src ="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js" > </script >
<script src ="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.waves.min.js" > </script >
<script >
VANTA .WAVES ({
el : "#hero" ,
mouseControls : true ,
touchControls : true ,
color : 0x23153c ,
waveHeight : 20 ,
waveSpeed : 1.0
});
</script >
Pattern 2: Zdog Icon Grid <div class ="icon-grid" >
<canvas class ="icon" width ="120" height ="120" > </canvas >
<canvas class ="icon" width ="120" height ="120" > </canvas >
<canvas class ="icon" width ="120" height ="120" > </canvas >
</div >
<script src ="https://unpkg.com/zdog@1/dist/zdog.dist.min.js" > </script >
<script >
document .querySelectorAll ('.icon' ).forEach ((canvas, index ) => {
let illo = new Zdog .Illustration ({
element : canvas,
zoom : 3 ,
dragRotate : true
});
const icons = [
createHeartIcon,
createStarIcon,
createCheckIcon
];
icons[index](illo);
function animate (rotate .y += 0.02 ;
illo.updateRenderGraph ();
requestAnimationFrame (animate);
}
animate ();
});
function createHeartIcon (illo ) {
new Zdog .Shape ({
addTo : illo,
path : [
{ x : 0 , y : -10 },
{
bezier : [
{ x : -20 , y : -20 },
{ x : -20 , y : 0 },
{ x : 0 , y : 10 }
]
},
{
bezier : [
{ x : 20 , y : 0 },
{ x : 20 , y : -20 },
{ x : 0 , y : -10 }
]
}
],
stroke : 6 ,
color : '#E62' ,
fill : true ,
closed : false
});
}
</script >
Pattern 3: Tilt Card Gallery <div class ="card-gallery" >
<div class ="card" data-tilt data-tilt-glare data-tilt-max-glare ="0.3" >
<img src ="product1.jpg" alt ="Product 1" >
<h3 > Product 1</h3 >
</div >
<div class ="card" data-tilt data-tilt-glare data-tilt-max-glare ="0.3" >
<img src ="product2.jpg" alt ="Product 2" >
<h3 > Product 2</h3 >
</div >
<div class ="card" data-tilt data-tilt-glare data-tilt-max-glare ="0.3" >
<img src ="product3.jpg" alt ="Product 3" >
<h3 > Product 3</h3 >
</div >
</div >
<style >
.card-gallery {
display : grid;
grid-template-columns : repeat (auto-fit, minmax (300px , 1 fr));
gap : 30px ;
padding : 50px ;
}
.card {
background : white;
border-radius : 15px ;
padding : 20px ;
box-shadow : 0 10px 30px rgba (0 ,0 ,0 ,0.1 );
transform-style : preserve-3 d;
}
.card img {
width : 100% ;
border-radius : 10px ;
transform : translateZ (40px );
}
.card h3 {
margin-top : 15px ;
transform : translateZ (60px );
}
</style >
<script src ="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js" > </script >
Pattern 4: Combined Effect - Vanta Background + Tilt Cards <div id ="vanta-section" >
<div class ="container" >
<h1 > Our Services</h1 >
<div class ="services-grid" >
<div class ="service-card" data-tilt data-tilt-scale ="1.05" >
<div class ="icon" > 🚀</div >
<h3 > Fast</h3 >
<p > Lightning quick performance</p >
</div >
<div class ="service-card" data-tilt data-tilt-scale ="1.05" >
<div class ="icon" > 🎨</div >
<h3 > Beautiful</h3 >
<p > Stunning visual design</p >
</div >
<div class ="service-card" data-tilt data-tilt-scale ="1.05" >
<div class ="icon" > 💪</div >
<h3 > Powerful</h3 >
<p > Feature-rich platform</p >
</div >
</div >
</div >
</div >
<script >
VANTA .NET ({
el : "#vanta-section" ,
color : 0x3fff00 ,
backgroundColor : 0x23153c ,
points : 10 ,
maxDistance : 20
});
VanillaTilt .init (document .querySelectorAll (".service-card" ), {
max : 15 ,
speed : 400 ,
glare : true ,
"max-glare" : 0.3
});
</script >
Performance Best Practices
Zdog Optimization
Limit Shape Count : Keep total shapes under 100 for smooth 60fpsUse Groups : Organize related shapes for easier managementOptimize Animation Loop : Only call updateRenderGraph() when neededCanvas vs SVG : Canvas is faster for animations, SVG for static illustrations
Vanta.js Optimization
Single Instance : Use only 1-2 Vanta effects per pageMobile Fallback : Disable on mobile or use static backgroundDestroy on Unmount : Always call .destroy() in SPAsReduce Particle Count : Lower points, quantity for better performance
const isMobile = /iPhone|iPad|iPod|Android/i .test (navigator.userAgent );
if (!isMobile) {
VANTA .WAVES ({
el : "#hero" ,
});
} else {
document .getElementById ('hero' ).style .background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' ;
}
Vanilla-Tilt Optimization
Limit Instances : Apply to visible elements onlyReduce gyroscopeSamples : Lower for better mobile performanceDisable on Low-End Devices : Check device capabilitiesUse CSS will-change : Hint browser for transforms .tilt-card {
will-change : transform;
}
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
const observer = new IntersectionObserver ((entries ) => {
entries.forEach (entry =>if (entry.isIntersecting && !entry.target .vantaEffect ) {
entry.target .vantaEffect = VANTA .WAVES ({
el : entry.target ,
});
}
});
});
observer.observe (document .getElementById ('hero' ));
Pitfall 2: Memory Leaks in SPAs Problem : Vanta/Tilt not destroyed on component unmount
Solution : Always clean up
useEffect (() => {
const effect = VANTA .WAVES ({ el : vantaRef.current });
return () => {
effect.destroy ();
};
}, []);
Pitfall 3: Zdog Not Rendering Problem : Canvas appears blank
Forgot to call updateRenderGraph()
Canvas size is 0
Shapes are outside view
illo.updateRenderGraph ();
<canvas width ="240" height ="240" > </canvas > new Zdog .Ellipse ({
addTo : illo,
diameter : 20 ,
translate : { z : 0 },
});
Pitfall 4: Tilt Not Working on Mobile Problem : Tilt doesn't respond on mobile devices
Solution : Enable gyroscope controls
VanillaTilt .init (element, {
gyroscope : true ,
gyroscopeMinAngleX : -45 ,
gyroscopeMaxAngleX : 45
});
Pitfall 5: Color Format Confusion (Vanta.js) Problem : Colors don't work
Cause : Vanta.js uses hex numbers , not strings
color : "#23153c"
color : 0x23153c
Resources
Related Skills
threejs-webgl : For more complex 3D graphics beyond decorative effectsgsap-scrolltrigger : For animating these effects on scrollmotion-framer : For React component animations alongside these effectsreact-three-fiber : Advanced 3D when lightweight effects aren't enough 