轻量级3D特效技能：Zdog、Vanta.js、Vanilla-Tilt.js实现高性能网页3D效果

lightweight-3d-effects by freshtechbro/claudedesignskills

88 周安装量

11 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/freshtechbro/claudedesignskills --skill lightweight-3d-effects

图形渲染前端优化用户体验

🇨🇳中文介绍

轻量级 3D 特效技能

概述

此技能结合了三个强大的库，用于装饰性 3D 元素和微交互：

Zdog : 面向设计师的伪 3D 引擎，用于矢量插图
Vanta.js : 由 Three.js/p5.js 驱动的动画 3D 背景
Vanilla-Tilt.js : 响应鼠标/陀螺仪的平滑视差倾斜效果

使用场景

添加装饰性 3D 插图，无需重型框架
为主图区域创建动画背景
在卡片/图像上实现微妙的视差倾斜效果
构建具有视觉深度的轻量级落地页
添加能增强用户体验且不影响性能的微交互

Zdog - 伪 3D 插图

核心概念

Zdog 是一个伪 3D 引擎，使用 Canvas 或 SVG 在 3D 空间中渲染扁平、圆润的设计。

主要特性:

面向设计师的声明式 API
文件体积小（约 28kb 压缩后）
Canvas 或 SVG 渲染
内置拖拽旋转功能
平滑的动画效果

基本设置

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

    // 添加形状
    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>

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

Vanta.js - 动画 3D 背景

Vanta.js 提供动画 WebGL 背景，设置简单，由 Three.js 或 p5.js 驱动。

14+ 种动画效果（波浪、飞鸟、网格、云朵等）
鼠标/触摸交互
可自定义颜色和设置
总计约 120KB（包含 Three.js）
在大多数设备上可达 60fps

<!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>我的动画背景</h1>
      <p>内容放在这里</p>
    </div>
  </div>

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

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

1. 波浪 (Three.js)

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

2. 云朵 (Three.js)

VANTA.CLOUDS({
  el: "#vanta-bg",
  skyColor: 0x68b8d7,
  cloudColor: 0xadc1de,
  cloudShadowColor: 0x183550,
  sunColor: 0xff9919,
  sunGlareColor: 0xff6633,
  sunlightColor: 0xff9933,
  speed: 1.0
});

3. 飞鸟 (需要 p5.js)

<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. 网格 (Three.js)

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

5. 细胞 (需要 p5.js)

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

6. 雾 (Three.js)

VANTA.FOG({
  el: "#vanta-bg",
  highlightColor: 0xff3f81,
  midtoneColor: 0x1d004d,
  lowlightColor: 0x2b1a5e,
  baseColor: 0x000000,
  blurFactor: 0.6,
  speed: 1.0,
  zoom: 1.0
});

其他效果: 地球、树干、拓扑、圆点、光环、圆环

// 所有效果的通用选项
{
  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,             // 即使隐藏也强制动画

  // 效果特定的选项因效果而异
}

// 初始化并存储引用
const vantaEffect = VANTA.WAVES({
  el: "#vanta-bg",
  // ... 选项
});

// 完成后销毁 (对 SPA 很重要)
vantaEffect.destroy();

// 动态更新选项
vantaEffect.setOptions({
  color: 0xff0000,
  waveHeight: 20
});

// 调整大小 (通常是自动的)
vantaEffect.resize();

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 - 视差倾斜效果

Vanilla-Tilt.js 添加平滑的 3D 倾斜效果，响应鼠标移动和设备方向。

轻量级（约 8.5kb 压缩后）
无依赖
陀螺仪支持
可选眩光效果
平滑过渡

<!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">悬停我！</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js"></script>
</body>
</html>

VanillaTilt.init(document.querySelector(".tilt-card"), {
  // 旋转
  max: 25,                    // 最大倾斜角度 (度)
  reverse: false,             // 反转倾斜方向
  startX: 0,                  // 初始倾斜 X (度)
  startY: 0,                  // 初始倾斜 Y (度)

  // 外观
  perspective: 1000,          // 变换透视 (值越小越强烈)
  scale: 1.1,                 // 悬停时的缩放 (1 = 无缩放)

  // 动画
  speed: 400,                 // 过渡速度 (毫秒)
  transition: true,           // 启用平滑过渡
  easing: "cubic-bezier(.03,.98,.52,.99)",

  // 行为
  axis: null,                 // 限制为 "x" 或 "y" 轴
  reset: true,                // 鼠标离开时重置
  "reset-to-start": true,     // 重置到起始位置 vs [0,0]

  // 眩光效果
  glare: true,                // 启用眩光
  "max-glare": 0.5,          // 眩光不透明度 (0-1)
  "glare-prerender": false,   // 预渲染眩光元素

  // 高级
  full-page-listening: false, // 监听整个页面
  gyroscope: true,            // 启用设备方向
  gyroscopeMinAngleX: -45,    // 最小 X 角度
  gyroscopeMaxAngleX: 45,     // 最大 X 角度
  gyroscopeMinAngleY: -45,    // 最小 Y 角度
  gyroscopeMaxAngleY: 45,     // 最大 Y 角度
  gyroscopeSamples: 10        // 校准样本数
});

带眩光效果的卡片:

<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>高级卡片</h3>
    <p>带眩光效果</p>
  </div>
</div>

分层 3D 效果:

<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">背景</div>
  <div class="layer-2">中间层</div>
  <div class="layer-3">前景</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("倾斜:", e.detail);
});

// 程序化重置
element.vanillaTilt.reset();

// 销毁实例
element.vanillaTilt.destroy();

// 获取当前值
const values = element.vanillaTilt.getValues();
console.log(values); // { tiltX, tiltY, percentageX, percentageY, angle }

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>我的卡片</h3>
</TiltCard>

模式 1: 带 Vanta 背景和内容的主图区域

<section id="hero">
  <div class="hero-content">
    <h1>欢迎</h1>
    <p>带内容覆盖的动画背景</p>
    <button>开始使用</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>

模式 2: Zdog 图标网格

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

    // 为每个 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>

模式 3: 倾斜卡片画廊

<div class="card-gallery">
  <div class="card" data-tilt data-tilt-glare data-tilt-max-glare="0.3">
    <img src="product1.jpg" alt="产品 1">
    <h3>产品 1</h3>
  </div>

  <div class="card" data-tilt data-tilt-glare data-tilt-max-glare="0.3">
    <img src="product2.jpg" alt="产品 2">
    <h3>产品 2</h3>
  </div>

  <div class="card" data-tilt data-tilt-glare data-tilt-max-glare="0.3">
    <img src="product3.jpg" alt="产品 3">
    <h3>产品 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>

模式 4: 组合效果 - Vanta 背景 + 倾斜卡片

<div id="vanta-section">
  <div class="container">
    <h1>我们的服务</h1>

    <div class="services-grid">
      <div class="service-card" data-tilt data-tilt-scale="1.05">
        <div class="icon">🚀</div>
        <h3>快速</h3>
        <p>闪电般的性能</p>
      </div>

      <div class="service-card" data-tilt data-tilt-scale="1.05">
        <div class="icon">🎨</div>
        <h3>美观</h3>
        <p>令人惊叹的视觉设计</p>
      </div>

      <div class="service-card" data-tilt data-tilt-scale="1.05">
        <div class="icon">💪</div>
        <h3>强大</h3>
        <p>功能丰富的平台</p>
      </div>
    </div>
  </div>
</div>

<script>
  // Vanta 背景
  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>

限制形状数量 : 保持总形状数在 100 以下以实现平滑的 60fps
使用组 : 组织相关形状以便于管理
优化动画循环 : 仅在需要时调用 updateRenderGraph()
Canvas 与 SVG : Canvas 适合动画，SVG 适合静态插图

单一实例 : 每页仅使用 1-2 个 Vanta 效果
移动端回退 : 在移动端禁用或使用静态背景
卸载时销毁 : 在 SPA 中始终调用 .destroy()
减少粒子数量 : 降低 points、quantity 以获得更好的性能

// 移动端检测和回退

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

限制实例数量 : 仅应用于可见元素
减少gyroscopeSamples: 降低以获得更好的移动端性能
在低端设备上禁用 : 检查设备能力
使用 CSSwill-change: 提示浏览器进行变换

  will-change: transform;
}

陷阱 1: 多个 Vanta 实例

问题 : 多个 Vanta 效果导致性能问题

解决方案 : 仅使用一个效果，或按需懒加载效果

// Intersection Observer 仅在可见时加载 Vanta
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'));

陷阱 2: SPA 中的内存泄漏

问题 : Vanta/Tilt 在组件卸载时未销毁

解决方案 : 始终清理

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

  return () => {
    effect.destroy(); // 很重要！
  };
}, []);

陷阱 3: Zdog 未渲染

问题 : Canvas 显示为空白

忘记调用 updateRenderGraph()
Canvas 尺寸为 0
形状在视图之外

// 形状更改后始终调用 updateRenderGraph
illo.updateRenderGraph();

// 确保 canvas 有尺寸
<canvas width="240" height="240"></canvas>

// 检查形状位置是否可见
new Zdog.Ellipse({
  addTo: illo,
  diameter: 20,
  translate: { z: 0 }, // 保持在原点附近
});

陷阱 4: 移动端倾斜效果不工作

问题 : 倾斜效果在移动设备上无响应

解决方案 : 启用陀螺仪控制

VanillaTilt.init(element, {
  gyroscope: true,
  gyroscopeMinAngleX: -45,
  gyroscopeMaxAngleX: 45
});

陷阱 5: 颜色格式混淆 (Vanta.js)

问题 : 颜色不生效

原因 : Vanta.js 使用十六进制数字，而非字符串

// ❌ 错误
color: "#23153c"

// ✅ 正确
color: 0x23153c

Vanilla-Tilt.js:

threejs-webgl : 用于装饰性效果之外的更复杂 3D 图形
gsap-scrolltrigger : 用于在滚动时动画化这些效果
motion-framer : 用于与这些效果一起的 React 组件动画
react-three-fiber : 当轻量级效果不足时的高级 3D

🇺🇸English

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

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

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

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

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:

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

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

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

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

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

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

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

<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

Limit Shape Count : Keep total shapes under 100 for smooth 60fps
Use Groups : Organize related shapes for easier management
Optimize Animation Loop : Only call updateRenderGraph() when needed
Canvas vs SVG : Canvas is faster for animations, SVG for static illustrations

Vanta.js Optimization

Single Instance : Use only 1-2 Vanta effects per page
Mobile Fallback : Disable on mobile or use static background
Destroy on Unmount : Always call .destroy() in SPAs
Reduce Particle Count : Lower points, quantity for better performance

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

Limit Instances : Apply to visible elements only
ReducegyroscopeSamples: Lower for better mobile performance
Disable on Low-End Devices : Check device capabilities
Use CSSwill-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

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

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

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

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

// ❌ Wrong
color: "#23153c"

// ✅ Correct
color: 0x23153c

Resources

Zdog:

Vanta.js:

Vanilla-Tilt.js:

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

Weekly Installs

Repository

freshtechbro/cl…gnskills

GitHub Stars

First Seen

Feb 27, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

opencode88

cursor86

github-copilot86

codex86

amp86

cline86

Flutter布局指南：构建响应式UI的约束规则与自适应设计模式

1,200 周安装

轻量级3D特效技能：Zdog、Vanta.js、Vanilla-Tilt.js实现高性能网页3D效果

🇨🇳中文介绍

轻量级 3D 特效技能

概述

使用场景

Zdog - 伪 3D 插图

核心概念

基本设置

相关 Skills

Zdog 形状

Zdog 组

Zdog 动画

Vanta.js - 动画 3D 背景

核心概念

基本设置

可用效果

配置选项

Vanta.js 方法

React 集成

Vanilla-Tilt.js - 视差倾斜效果

核心概念

基本设置

配置选项

高级示例

React 集成

常用模式

模式 1: 带 Vanta 背景和内容的主图区域

模式 2: Zdog 图标网格

模式 3: 倾斜卡片画廊

模式 4: 组合效果 - Vanta 背景 + 倾斜卡片

性能最佳实践

Zdog 优化

Vanta.js 优化

Vanilla-Tilt 优化

常见陷阱

陷阱 1: 多个 Vanta 实例

陷阱 2: SPA 中的内存泄漏

陷阱 3: Zdog 未渲染

陷阱 4: 移动端倾斜效果不工作

陷阱 5: 颜色格式混淆 (Vanta.js)

资源

相关技能

🇺🇸English

Lightweight 3D Effects Skill

Overview

When to Use This Skill

Zdog - Pseudo-3D Illustrations

Core Concepts

Basic Setup

Zdog Shapes

Zdog Groups

Zdog Animation

Vanta.js - Animated 3D Backgrounds

Core Concepts

Basic Setup

Available Effects

Configuration Options

Vanta.js Methods

React Integration

Vanilla-Tilt.js - Parallax Tilt Effects

Core Concepts

Basic Setup

Configuration Options

Advanced Examples

React Integration

Common Patterns

Pattern 1: Hero Section with Vanta + Content

Pattern 2: Zdog Icon Grid

Pattern 3: Tilt Card Gallery

Pattern 4: Combined Effect - Vanta Background + Tilt Cards

Performance Best Practices

Zdog Optimization

Vanta.js Optimization

Vanilla-Tilt Optimization

Common Pitfalls

Pitfall 1: Multiple Vanta Instances

Pitfall 2: Memory Leaks in SPAs

Pitfall 3: Zdog Not Rendering

Pitfall 4: Tilt Not Working on Mobile

Pitfall 5: Color Format Confusion (Vanta.js)