Anthropic Claudeその他⭐ リポ 0品質スコア 50/100

lightweight-3d-effects

Name: lightweight-3d-effects
Author: freshtechbro

Zdog・Vanta.js・Vanilla-Tilt.js を使い、装飾要素やマイクロインタラクションに軽量な3Dエフェクトを追加するスキルです。擬似3Dイラスト・アニメーション背景・視差チルト効果・ヒーローセクションのアニメーションなど、重厚なフレームワークなしで奥行き感のある表現を実装したい場合に使用します。パフォーマンスを重視したランディングページやカードのチルトエフェクトにも最適です。

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.

SKILL.md 本文

軽量 3D エフェクトスキル

概要

このスキルは、装飾的 3D 要素とマイクロインタラクションのための 3 つの強力なライブラリを組み合わせています：

Zdog: デザイナーに優しいベクターイラストのための疑似 3D エンジン
Vanta.js: Three.js/p5.js で駆動されたアニメーション 3D 背景
Vanilla-Tilt.js: マウス/ジャイロスコープに応答する滑らかな視差チルト効果

このスキルをいつ使用するか

重いフレームワークなしで装飾的 3D イラストを追加する
ヒーローセクション用にアニメーション背景を作成する
カード/画像に微妙な視差チルト効果を実装する
視覚的な奥行きを持つ軽量ランディングページを構築する
パフォーマンスへの影響がないマイクロインタラクションを追加する

Zdog - 疑似 3D イラスト

基本概念

Zdog は、Canvas または SVG を使用して、平坦で丸いデザインを 3D 空間にレンダリングする疑似 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;
      },
    });

    // 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 の図形

基本図形：

// 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 グループ

複雑なモデルのための図形をグループに整理します：

// 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 アニメーション

// 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 - アニメーション 3D 背景

基本概念

Vanta.js は、Three.js または p5.js で駆動される、最小限のセットアップでアニメーション WebGL 背景を提供します。

主な機能：

14 以上のアニメーションエフェクト（Waves、Birds、Net、Clouds など）
マウス/タッチインタラクション
カスタマイズ可能な色と設定
総合 ~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>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>

利用可能なエフェクト

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 が必要)

<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 が必要)

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

その他のエフェクト： GLOBE、TRUNK、TOPOLOGY、DOTS、HALO、RINGS

設定オプション

// すべてのエフェクト共通のオプション
{
  el: "#element-id",              // 必須：ターゲット要素
  mouseControls: true,             // マウス インタラクションを有効にする
  touchControls: true,             // タッチ インタラクションを有効にする
  gyroControls: false,             // デバイス方向
  minHeight: 200.00,               // 最小高さ
  minWidth: 200.00,                // 最小幅
  scale: 1.00,                     // サイズ スケール
  scaleMobile: 1.00,               // モバイル スケール

  // 色（16 進数文字列ではなく数字）
  color: 0x23153c,
  backgroundColor: 0x000000,

  // パフォーマンス
  forceAnimate: false,             // 非表示時もアニメーションを強制

  // エフェクト固有のオプションはエフェクトごとに異なります
}

Vanta.js メソッド

// 初期化して参照を保存する
const vantaEffect = VANTA.WAVES({
  el: "#vanta-bg",
  // ... options
});

// 完了時に破棄する（SPA の場合重要）
vantaEffect.destroy();

// オプションを動的に更新する
vantaEffect.setOptions({
  color: 0xff0000,
  waveHeight: 20
});

// リサイズ（通常は自動）
vantaEffect.resize();

React インテグレーション

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">Hover Me!</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,     // [0,0] vs 開始位置にリセットする

  // グレア効果
  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>Premium Card</h3>
    <p>With glare effect</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">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); // { tiltX, tiltY, percentageX, percentageY, angle }

React インテグレーション

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>

よく使われるパターン

パターン 1：Vanta + コンテンツを使用したヒーローセクション

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

パターン 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
    });

    // 各キャンバスに異なるアイコンを作成する
    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="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>

パターン 4：結合エフェクト - Vanta 背景 + チルトカード

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

パフォーマンスのベストプラクティス

Zdog の最適化

図形数を制限する：スムーズな 60fps のため、総図形数を 100 未満に保つ
グループを使用する：関連する図形を整理しやすくするため
アニメーションループを最適化する：必要な場合のみ updateRenderGraph() を呼び出す
Canvas vs SVG：Canvas はアニメーション用、SVG は静止イラスト用

Vanta.js の最適化

単一インスタンス：ページあたり 1～2 つの Vanta エフェクトのみ使用
モバイルフォールバック：モバイルで無効にするか、静止背景を使用
アンマウント時に破棄する：SPA では常に .destroy() を呼び出す
パーティクル数を削減する：より良いパフォーマンスのため points、quantity を低くする

// モバイル検出とフォールバック
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 の最適化

インスタンス数を制限する：表示要素のみに適用する
gyroscopeSamples を削減する：モバイルパフォーマンスのため低くする
ローエンドデバイスで無効にする：デバイス機能をチェック
CSS will-change を使用する：トランスフォーム用にブラウザーにヒントを与える

.tilt-card {
  will-change: transform;
}

よくある落とし穴

落とし穴 1：複数の Vanta インスタンス

問題：複数の Vanta エフェクトがパフォーマンス問題を引き起こす

解決策：1 つのエフェクトのみを使用するか、セクションごとにエフェクトを遅延読み込み

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

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 は 16 進数文字列ではなく、16 進数数字を使用

// ❌ 間違い
color: "#23153c"

// ✅ 正しい
color: 0x23153c

リソース

Zdog:

Vanta.js:

Vanilla-Tilt.js:

詳細情報

作者: freshtechbro
リポジトリ: freshtechbro/claudedesignskills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/freshtechbro/claudedesignskills / ライセンス: MIT

SKILL.md 本文

軽量 3D エフェクト スキル

概要

このスキルをいつ使用するか

Zdog - 疑似 3D イラスト

基本概念

基本セットアップ

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）

リソース

関連スキル

詳細情報

関連スキル

superfluid

civ-finish-quotes

nookplot

web3-polymarket

ethskills

xxyy-trade

軽量 3D エフェクトスキル

パターン 1：Vanta + コンテンツを使用したヒーローセクション

パターン 2：Zdog アイコングリッド

パターン 3：チルトカードギャラリー

パターン 4：結合エフェクト - Vanta 背景 + チルトカード

落とし穴 2：SPA でのメモリリーク