Using Web3d

Name: Using Web3d
Author: xenodeve

ASecurity

Router for the web3d family — vendored skills for 3D, 2D canvas, motion and scroll on the web (Three.js, React Three Fiber, Babylon.js, PlayCanvas, A-Frame, PixiJS, Motion, anime.js, React Spring, Lottie, Rive, GSAP ScrollTrigger, Locomotive, AOS, Barba, Spline). Use when a page needs a 3D scene, a canvas, animation or scroll-driven effects; it picks the one library skill for the job and the order to combine them. Triggers include "3D", "WebGL", "three.js", "R3F", "animation", "scroll effect"...

2 stars

0 votes

0 copies

0 views

Added 10/5/2026

developmentgoreactspringperformance

Works with

cli

Security Analysis

A100/100

Scanned 10/5/2026

$npx -y skills add xenodeve/xeno-skills --skill using-web3d --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Using Web3d?

Add the live security badge to your README — it updates automatically with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/xenodeve-using-web3d/badge)](https://www.skillsdirectory.com/skills/xenodeve-using-web3d)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

Files

SKILL.md

---
name: using-web3d
description: Router for the web3d family — vendored skills for 3D, 2D canvas, motion and scroll on the web (Three.js, React Three Fiber, Babylon.js, PlayCanvas, A-Frame, PixiJS, Motion, anime.js, React Spring, Lottie, Rive, GSAP ScrollTrigger, Locomotive, AOS, Barba, Spline). Use when a page needs a 3D scene, a canvas, animation or scroll-driven effects; it picks the one library skill for the job and the order to combine them. Triggers include "3D", "WebGL", "three.js", "R3F", "animation", "scroll effect", "parallax", "page transition", "Lottie", "Rive", "WebXR".
---

# Using Web3D

**A router, not a rulebook.** Pick the row, load that skill, follow it. Skills live verbatim in `skills/vendor/<name>/`, each with an `UPSTREAM.md`.

## 1. Choose the stack first

**Unsure which library, or combining several** → **`web3d-integration-patterns`** (how Three.js, R3F, GSAP, Motion and React Spring fit together). For the page's overall look, go to **`using-anti-slop`**; `modern-web-design` is a trends-and-patterns reference.

## 2. Pick by task

| You need… | Load |
|---|---|
| **A full 3D scene, vanilla JS** | **`threejs-webgl`**; animation clips, skeletons, morphs → **`threejs-animation`** |
| **A 3D scene in React** | **`react-three-fiber`**; performance and loading rules → **`r3f-best-practices`** |
| **A game-like or physics-heavy 3D app** | **`babylonjs-engine`** · **`playcanvas-engine`** |
| **VR / AR (WebXR)** | **`aframe-webxr`** |
| **Decorative pseudo-3D** — tilt, animated backgrounds, Zdog | **`lightweight-3d-effects`** (reach for this before a full engine) |
| **A 3D scene designed without code** | **`spline-interactive`** |
| **Shrinking a 3D model for the web** — GLB size, draw calls | **`threejs-agents-model-optimizer`** |
| **Fast 2D canvas** — sprites, particles, games | **`pixijs-2d`** |
| **UI animation in React** | **`motion-framer`**; physics feel → **`react-spring-physics`**; ready components (Magic UI, React Bits) → **`animated-component-libraries`** |
| **Timeline animation without a framework** | **`animejs`** |
| **Designer-made animation files** | **`lottie-animations`** (After Effects) · **`rive-interactive`** (state machines) |
| **Scroll-linked animation, pinning, scrub** | **`gsap-scrolltrigger`** |
| **Smooth scrolling** | **`locomotive-scroll`** |
| **Simple fade/slide on scroll** | **`scroll-reveal-libraries`** (AOS) |
| **Page transitions between routes** | **`barba-js`** |

## 3. Rules

- **Lightest tool that does the job.** CSS or `lightweight-3d-effects` before a WebGL engine; AOS before GSAP when a fade is all you need.
- **One animation owner per element.** GSAP and Motion both driving the same transform fight; `web3d-integration-patterns` says how to split them.
- **Done means seen.** Load the page in a real browser (`playwright-cli`): no console errors, the canvas renders non-blank, frame rate holds. Then `design-ship-gate`.
- **Do not edit `skills/vendor/`.** Update by re-copying from upstream and updating `UPSTREAM.md`.

Attribution

xenodeve

View source See grades on GitHub More from xenodeve →

SSkills DirectorySkills Directory

Ship a skill? Prove it's safe.

Free 120-pattern security scan, letter grade, and an embeddable README badge.

Submit a skill

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments (0)

No comments yet. Be the first to comment!

--- name: using-web3d description: Router for the web3d family — vendored skills for 3D, 2D canvas, motion and scroll on the web (Three.js, React Three Fiber, Babylon.js, PlayCanvas, A-Frame, PixiJS, Motion, anime.js, React Spring, Lottie, Rive, GSAP ScrollTrigger, Locomotive, AOS, Barba, Spline). Use when a page needs a 3D scene, a canvas, animation or scroll-driven effects; it picks the one library skill for the job and the order to combine them. Triggers include "3D", "WebGL", "three.js", "R3F", "animation", "scroll effect", "parallax", "page transition", "Lottie", "Rive", "WebXR". --- # Using Web3D **A router, not a rulebook.** Pick the row, load that skill, follow it. Skills live verbatim in `skills/vendor/<name>/`, each with an `UPSTREAM.md`. ## 1. Choose the stack first **Unsure which library, or combining several** → **`web3d-integration-patterns`** (how Three.js, R3F, GSAP, Motion and React Spring fit together). For the page's overall look, go to **`using-anti-slop`**; `modern-web-design` is a trends-and-patterns reference. ## 2. Pick by task | You need… | Load | |---|---| | **A full 3D scene, vanilla JS** | **`threejs-webgl`**; animation clips, skeletons, morphs → **`threejs-animation`** | | **A 3D scene in React** | **`react-three-fiber`**; performance and loading rules → **`r3f-best-practices`** | | **A game-like or physics-heavy 3D app** | **`babylonjs-engine`** · **`playcanvas-engine`** | | **VR / AR (WebXR)** | **`aframe-webxr`** | | **Decorative pseudo-3D** — tilt, animated backgrounds, Zdog | **`lightweight-3d-effects`** (reach for this before a full engine) | | **A 3D scene designed without code** | **`spline-interactive`** | | **Shrinking a 3D model for the web** — GLB size, draw calls | **`threejs-agents-model-optimizer`** | | **Fast 2D canvas** — sprites, particles, games | **`pixijs-2d`** | | **UI animation in React** | **`motion-framer`**; physics feel → **`react-spring-physics`**; ready components (Magic UI, React Bits) → **`animated-component-libraries`** | | **Timeline animation without a framework** | **`animejs`** | | **Designer-made animation files** | **`lottie-animations`** (After Effects) · **`rive-interactive`** (state machines) | | **Scroll-linked animation, pinning, scrub** | **`gsap-scrolltrigger`** | | **Smooth scrolling** | **`locomotive-scroll`** | | **Simple fade/slide on scroll** | **`scroll-reveal-libraries`** (AOS) | | **Page transitions between routes** | **`barba-js`** | ## 3. Rules - **Lightest tool that does the job.** CSS or `lightweight-3d-effects` before a WebGL engine; AOS before GSAP when a fade is all you need. - **One animation owner per element.** GSAP and Motion both driving the same transform fight; `web3d-integration-patterns` says how to split them. - **Done means seen.** Load the page in a real browser (`playwright-cli`): no console errors, the canvas renders non-blank, frame rate holds. Then `design-ship-gate`. - **Do not edit `skills/vendor/`.** Update by re-copying from upstream and updating `UPSTREAM.md`.