New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Lightweight 3D Effects

by jasonkneen in jasonkneen/tiny-world-builder

Lightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js.

AGPL-3.0Auto-check passedFrontend & Design

Install Lightweight 3D Effects

skills CLI
$ npx skills add jasonkneen/tiny-world-builder --skill lightweight-3d-effects -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install jasonkneen/tiny-world-builder lightweight-3d-effects --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/jasonkneen/tiny-world-builder.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/lightweight-3d-effects .claude/skills/lightweight-3d-effects && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
lightweight-3d-effects
GitHub stars
1.6k
Used in
1 other repo
Token cost
~5.7k tokens
SKILL.md length
573 words
Files
11 (incl. scripts, references, assets)
Skills in repo
29
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Lightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js.

  • Works in 4 steps: Limit Shape Count: Keep total shapes… → Use Groups: Organize related shapes for… → Optimize Animation Loop: Only call… → …
  • Adding pseudo-3D illustrations
  • SKILL.md covers Overview, When to Use This Skill, Zdog - Pseudo-3D Illustrations and Vanta.js - Animated 3D…, plus 3 more sections
  • Runs Python and JavaScript scripts from its folder; reaches cdn.jsdelivr.net and unpkg.com

What it does

Lightweight 3D Effects is an agent skill from jasonkneen/tiny-world-builder. 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.

Its SKILL.md is about 5.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including scripts, reference files and assets (for example `assets/examples/README.md`, `assets/starter_lightweight/README.md` and `assets/starter_lightweight/main.js`).

It sits in Frontend & Design, covering Landing pages and Web animation and motion. It works with Three.js. The licence is AGPL-3.0.

When your agent uses it

  • Adding pseudo-3D illustrations
  • Animated backgrounds
  • Parallax tilt effects
  • Decorative 3D elements

Example prompts

  • “/lightweight-3d-effects”

Requirements

  • Python 3
  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  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

What it can do on your machine

Read from SKILL.md and the folder at commit 90bc6f3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (Python and JavaScript), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdn.jsdelivr.net
    • unpkg.com

    Also links to:

    • github.com
    • vantajs.com
    • zzz.dog
    • codepen.io
    • npmjs.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Lightweight 3D Effects loads about 5.7k tokens when it runs, and up to ~21k if it reads all its reference files. Until then it costs about 129 tokens; SKILL.md has 573 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~129
When it runs · the whole SKILL.md, loaded when a task matches
~5.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~21k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from jasonkneen/tiny-world-builder at commit 90bc6f3, republished under its AGPL-3.0 licence (© jasonkneen). 573 words, ~5,718 tokens.

Download SKILL.mdSave it as .claude/skills/lightweight-3d-effects/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
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 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
html
<!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:

javascript
// 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.Shape({
  addTo: illo,
  path: [
    { x: -40, y: 0 },
    { x: 40, y: 0 },
  ],
  stroke: 6,
  color: '#636',
});

// Bezier Curve
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:

javascript
// Create a group
let head = new Zdog.Group({
  addTo: illo,
  translate: { y: -40 },
});

// Add shapes to group
new Zdog.Ellipse({
  addTo: head,
  diameter: 60,
  stroke: 30,
  color: '#FED',
});

// Eyes
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 },
});

// Mouth
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,
});

// Rotate entire group
head.rotate.y = Math.PI / 4;
Zdog Animation
javascript
// Continuous rotation
function animate() {
  illo.rotate.y += 0.03;
  illo.updateRenderGraph();
  requestAnimationFrame(animate);
}
animate();

// Bounce animation
let t = 0;
function bounceAnimate() {
  t += 0.05;
  illo.translate.y = Math.sin(t) * 20;
  illo.updateRenderGraph();
  requestAnimationFrame(bounceAnimate);
}
bounceAnimate();

// Interactive rotation with easing
let targetRotateY = 0;
let currentRotateY = 0;

document.addEventListener('mousemove', (event) => {
  targetRotateY = (event.clientX / window.innerWidth - 0.5) * Math.PI;
});

function smoothAnimate() {
  // Ease towards target
  currentRotateY += (targetRotateY - currentRotateY) * 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.

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
html
<!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>

  <!-- Three.js (required) -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>

  <!-- Vanta.js effect -->
  <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

1. WAVES (Three.js)

javascript
VANTA.WAVES({
  el: "#vanta-bg",
  color: 0x23153c,
  shininess: 30,
  waveHeight: 15,
  waveSpeed: 0.75,
  zoom: 0.65
});

2. CLOUDS (Three.js)

javascript
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)

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

4. NET (Three.js)

javascript
VANTA.NET({
  el: "#vanta-bg",
  color: 0x3fff00,
  backgroundColor: 0x23153c,
  points: 10,
  maxDistance: 20,
  spacing: 15,
  showDots: true
});

5. CELLS (p5.js required)

javascript
VANTA.CELLS({
  el: "#vanta-bg",
  color1: 0x00ff00,
  color2: 0xff0000,
  size: 1.5,
  speed: 1.0,
  scale: 1.0
});

6. FOG (Three.js)

javascript
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
javascript
// Common options for all effects
{
  el: "#element-id",              // Required: target element
  mouseControls: true,             // Enable mouse interaction
  touchControls: true,             // Enable touch interaction
  gyroControls: false,             // Device orientation
  minHeight: 200.00,               // Minimum height
  minWidth: 200.00,                // Minimum width
  scale: 1.00,                     // Size scale
  scaleMobile: 1.00,               // Mobile scale

  // Colors (hex numbers, not strings)
  color: 0x23153c,
  backgroundColor: 0x000000,

  // Performance
  forceAnimate: false,             // Force animation even when hidden

  // Effect-specific options vary by effect
}
Vanta.js Methods
javascript
// Initialize and store reference
const vantaEffect = VANTA.WAVES({
  el: "#vanta-bg",
  // ... options
});

// Destroy when done (important for SPAs)
vantaEffect.destroy();

// Update options dynamically
vantaEffect.setOptions({
  color: 0xff0000,
  waveHeight: 20
});

// Resize (usually automatic)
vantaEffect.resize();
React Integration
jsx
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.

Key Features:

  • Lightweight (~8.5kb minified)
  • No dependencies
  • Gyroscope support
  • Optional glare effect
  • Smooth transitions
Basic Setup
html
<!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-3d;
    }

    .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
javascript
VanillaTilt.init(document.querySelector(".tilt-card"), {
  // Rotation
  max: 25,                    // Max tilt angle (degrees)
  reverse: false,             // Reverse tilt direction
  startX: 0,                  // Initial tilt X (degrees)
  startY: 0,                  // Initial tilt Y (degrees)

  // Appearance
  perspective: 1000,          // Transform perspective (lower = more intense)
  scale: 1.1,                 // Scale on hover (1 = no scale)

  // Animation
  speed: 400,                 // Transition speed (ms)
  transition: true,           // Enable smooth transitions
  easing: "cubic-bezier(.03,.98,.52,.99)",

  // Behavior
  axis: null,                 // Restrict to "x" or "y" axis
  reset: true,                // Reset on mouse leave
  "reset-to-start": true,     // Reset to start position vs [0,0]

  // Glare effect
  glare: true,                // Enable glare
  "max-glare": 0.5,          // Glare opacity (0-1)
  "glare-prerender": false,   // Pre-render glare elements

  // Advanced
  full-page-listening: false, // Listen to entire page
  gyroscope: true,            // Enable device orientation
  gyroscopeMinAngleX: -45,    // Min X angle
  gyroscopeMaxAngleX: 45,     // Max X angle
  gyroscopeMinAngleY: -45,    // Min Y angle
  gyroscopeMaxAngleY: 45,     // Max Y angle
  gyroscopeSamples: 10        // Calibration samples
});
Advanced Examples

Card with Glare Effect:

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

Layered 3D Effect:

html
<style>
  .tilt-card {
    transform-style: preserve-3d;
  }
  .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>

Programmatic Control:

javascript
const element = document.querySelector(".tilt-card");

VanillaTilt.init(element, {
  max: 25,
  speed: 400,
  glare: true,
  "max-glare": 0.5
});

// Get tilt values
element.addEventListener("tiltChange", (e) => {
  console.log("Tilt:", e.detail);
});

// Reset programmatically
element.vanillaTilt.reset();

// Destroy instance
element.vanillaTilt.destroy();

// Get current values
const values = element.vanillaTilt.getValues();
console.log(values); // { tiltX, tiltY, percentageX, percentageY, angle }
React Integration
jsx
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>
  );
}

// Usage
<TiltCard options={{ max: 30, scale: 1.1 }}>
  <h3>My Card</h3>
</TiltCard>

Common Patterns

Pattern 1: Hero Section with Vanta + Content
html
<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
html
<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
    });

    // Create different icon for each canvas
    const icons = [
      createHeartIcon,
      createStarIcon,
      createCheckIcon
    ];

    icons[index](illo);

    function animate() {
      illo.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>
html
<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, 1fr));
    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-3d;
  }

  .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
html
<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 background
  VANTA.NET({
    el: "#vanta-section",
    color: 0x3fff00,
    backgroundColor: 0x23153c,
    points: 10,
    maxDistance: 20
  });

  // Tilt cards
  VanillaTilt.init(document.querySelectorAll(".service-card"), {
    max: 15,
    speed: 400,
    glare: true,
    "max-glare": 0.3
  });
</script>

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
Show full SKILL.md (230 more words)Show less
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
javascript
// Mobile detection and fallback
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

if (!isMobile) {
  VANTA.WAVES({
    el: "#hero",
    // ... options
  });
} else {
  document.getElementById('hero').style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
}
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
css
.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

javascript
// Intersection Observer to load Vanta only when visible
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && !entry.target.vantaEffect) {
      entry.target.vantaEffect = VANTA.WAVES({
        el: entry.target,
        // ... options
      });
    }
  });
});

observer.observe(document.getElementById('hero'));
Pitfall 2: Memory Leaks in SPAs

Problem: Vanta/Tilt not destroyed on component unmount

Solution: Always clean up

javascript
// React useEffect cleanup
useEffect(() => {
  const effect = VANTA.WAVES({ el: vantaRef.current });

  return () => {
    effect.destroy(); // Important!
  };
}, []);
Pitfall 3: Zdog Not Rendering

Problem: Canvas appears blank

Causes:

  • Forgot to call updateRenderGraph()
  • Canvas size is 0
  • Shapes are outside view

Solution:

javascript
// Always call updateRenderGraph after shape changes
illo.updateRenderGraph();

// Ensure canvas has dimensions
<canvas width="240" height="240"></canvas>

// Check shape positions are visible
new Zdog.Ellipse({
  addTo: illo,
  diameter: 20,
  translate: { z: 0 }, // Keep close to origin
});
Pitfall 4: Tilt Not Working on Mobile

Problem: Tilt doesn't respond on mobile devices

Solution: Enable gyroscope controls

javascript
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

javascript
// ❌ Wrong
color: "#23153c"

// ✅ Correct
color: 0x23153c

Resources

Zdog:

Vanta.js:

Vanilla-Tilt.js:

  • 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

© jasonkneen, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (scripts, references, assets) in .agents/skills/lightweight-3d-effects of jasonkneen/tiny-world-builder.

  • SKILL.md
  • assets/examples/README.md
  • assets/starter_lightweight/README.md
  • assets/starter_lightweight/index.html
  • assets/starter_lightweight/main.js
  • assets/starter_lightweight/style.css
  • references/tilt_patterns.md
  • references/vantajs_effects.md
  • references/zdog_api.md
  • scripts/generate_zdog.py
  • scripts/setup_vanta.py

Open the folder on GitHubat commit 90bc6f3

Used in 1 other repository

We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in jasonkneen/tiny-world-builder, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Lightweight 3D Effects next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Lightweight 3D Effects compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Lightweight 3D Effects this skilljasonkneen/tiny-world-builder1.6k1 repos~5.7kAutomated safety check: PassAGPL-3.0
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT
Inspira UIsecondsky/claude-skills227—~2.6kAutomated safety check: PassMIT
Motion Webfeitangyuan/motion-web668—~18kAutomated safety check: PassCC-BY-NC-4.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Scroll World Landing Pageoso95/scroll-world9.8k1 repos~12kAutomated safety check: NotesMIT

Similar skills

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Inspira UI

    secondsky/claude-skills

    120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js.

    227 GitHub stars~2.6k tokensUpdated 10 days ago
    Frontend & DesignAuto-check passed

  • Motion Web

    feitangyuan/motion-web

    Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…

    668 GitHub stars~18k tokensUpdated 23 days ago
    Game DevelopmentAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Scroll World Landing Page

    oso95/scroll-world

    Builds a scroll-driven landing page where a pre-rendered camera flies through connected AI-generated scenes, using Higgsfield for stills and video clips.

    9.8k GitHub starsUsed in 1 repo~12k tokens
    Frontend & DesignAuto-check: notes

  • Scroll Craft

    nateherkai/scroll-craft

    Build premium scroll-driven landing pages for service, product, food, and drink brands.

    3k GitHub stars~6.2k tokensUpdated 8 days ago
    Frontend & DesignAuto-check: notes

More from jasonkneen/tiny-world-builder

All 29 skills in this repo

  • Threejs Primitive Reconstructor

    jasonkneen/tiny-world-builder

    create robust, browser-runnable three.js primitive reconstructions from static low-poly, voxel, isometric, or stylized game-art reference images.

    1.6k GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Poly Pizza API

    jasonkneen/tiny-world-builder

    A skill your agent uses whenever an LLM agent needs to search, browse, or download 3D models from Poly Pizza (poly.pizza) using their REST API.

    1.6k GitHub stars~1.9k tokensUpdated yesterday
    Auto-check passed

  • Tinyworld Block Button Style

    jasonkneen/tiny-world-builder

    A skill your agent uses when styling any tool/block button, palette tile, icon chip, or new clickable square in Tiny World Builder.

    1.6k GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

  • Tinyworld Ghost World Gen

    jasonkneen/tiny-world-builder

    A skill your agent uses when changing ghost board generation, path / road / river continuity, deterministic regen, edge connections, or anything that runs inside makeGhostWorld in…

    1.6k GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

  • Tinyworld Island And Planes

    jasonkneen/tiny-world-builder

    A skill your agent uses when changing the home island layout, edge dressing, undersides, autoincentive sponsor banner (now a top-left logo-adjacent DOM banner), plane/crop-duster flight paths…

    1.6k GitHub stars~4.7k tokensUpdated yesterday
    Auto-check passed

  • 3D Modeling

    jasonkneen/tiny-world-builder

    Expert 3D modeling specialist with deep knowledge of topology, UV mapping, game-ready and film-ready pipelines, DCC tool workflows (Blender, Maya, ZBrush, 3ds Max, Houdini), retopology, LOD systems…

    1.6k GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

Works with

Categories

Questions about Lightweight 3D Effects

What does Lightweight 3D Effects do?

Lightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js. Lightweight 3D Effects is an agent skill from jasonkneen/tiny-world-builder.js.

When should I use Lightweight 3D Effects?

Lightweight 3D Effects fits situations like: adding pseudo-3D illustrations; animated backgrounds; parallax tilt effects; decorative 3D elements.

How do I install Lightweight 3D Effects in Claude Code?

Run `npx skills add jasonkneen/tiny-world-builder --skill lightweight-3d-effects -a claude-code`. Or copy the skill folder (.agents/skills/lightweight-3d-effects in jasonkneen/tiny-world-builder) into .claude/skills/lightweight-3d-effects in your project. Claude Code loads it when a task matches its description.

How do I install Lightweight 3D Effects in Codex?

Run `npx skills add jasonkneen/tiny-world-builder --skill lightweight-3d-effects -a codex`. Or copy the skill folder (.agents/skills/lightweight-3d-effects in jasonkneen/tiny-world-builder) into .agents/skills/lightweight-3d-effects in your project. Codex loads it when a task matches its description.

Can I use Lightweight 3D Effects in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add jasonkneen/tiny-world-builder --skill lightweight-3d-effects -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/lightweight-3d-effects, .gemini/skills/lightweight-3d-effects, .github/skills/lightweight-3d-effects and .opencode/skills/lightweight-3d-effects in your project.

What does Lightweight 3D Effects need to run?

Going by SKILL.md and its folder, Lightweight 3D Effects needs Python and JavaScript for the scripts in its folder. Our summary lists: Python 3; Node.js.

Does Lightweight 3D Effects access the network?

SKILL.md names 7 domains. In commands or code: cdn.jsdelivr.net and unpkg.com; the agent is likely to contact these when it follows the instructions. As links in the text: github.com, vantajs.com, zzz.dog, codepen.io and npmjs.com. This is read from the text; nothing was executed.

Is Lightweight 3D Effects safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Lightweight 3D Effects use?

Lightweight 3D Effects is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Lightweight 3D Effects use?

About 5.7k tokens (SKILL.md is roughly 23k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.

What are the alternatives to Lightweight 3D Effects?

Skills that share tags, products or a category with Lightweight 3D Effects: Auteur (agiwhitelist/auteur, 1k stars), Inspira UI (secondsky/claude-skills, 227 stars), Motion Web (feitangyuan/motion-web, 668 stars) and Impeccable (bestofjs/bestofjs, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Lightweight 3D Effects?

jasonkneen (a GitHub user) maintains it in jasonkneen/tiny-world-builder, which has 1,591 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 8, 2026.

Source: jasonkneen/tiny-world-builder on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.