Login
freshtechbro/claudedesignskills11 files

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.

Use this skillView repositoryView on skills.sh
Specification
Skill ID
freshtechbro/claudedesignskills/lightweight-3d-effects
Publisher
freshtechbro
Repository
claudedesignskills
Installs
0
Files
11
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

freshtechbro/claudedesignskills/lightweight-3d-effectsInstalls these files
  • 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

What this skill tells the agent

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.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:

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

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

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

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

2. CLOUDS (Three.js)

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>

4. NET (Three.js)

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
});

6. FOG (Three.js)

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

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

More from freshtechbro

freshtechbro/claudedesignskills

Aframe Webxr

Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR applications, VR experiences, AR experiences, 360-degree media viewers, or immersive web content with minimal JavaScript. Triggers on tasks involving A-Frame, WebXR, VR development, AR development, entity-component-system, declarative 3D, or HTML-based 3D scenes. Built on Three.js with accessible HTML-first approach.

freshtechbro/claudedesignskills

Animated Component Libraries

Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-made animated components instead of hand-crafting animations. Triggers on tasks involving animated UI components, Magic UI, React Bits, shadcn/ui integration, Tailwind CSS components, or component library selection. Alternative to manually implementing animations with Framer Motion or GSAP.

freshtechbro/claudedesignskills

Animejs

Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations. Triggers on tasks involving Anime.js, timeline animations, staggered sequences, SVG path animations, morphing, or multi-step animation choreography. Alternative to GSAP for SVG-heavy animations and React-independent projects.

Use this skill in a project

Open any RiverX project, search the Skills panel for freshtechbro/claudedesignskills/lightweight-3d-effects, and install it in one click.

Use this skill