claudeers.
// Claude Skills

awwwards-3d

Awwwards-style scroll-driven 3D website skill for Claude Code (Three.js r170 + GSAP + Lenis)

// Claude Skills[ api ][ web ][ claude ]#claude#3d-website#awwwards#blender#claude-code#claude-skill#creative-coding#gsap#skills◷ MIT$open-sourceupdated 9 days ago
★ 23 github ↗

Install with your AI

Paste into Claude Code, Cursor, or any agent — it reads the repo and wires the tool into your project.

Install and set up awwwards-3d (claude-skill project) into my current project.
Found on https://claudeers.com/awwwards-3d
Repo: https://github.com/tsogjavklann/awwwards-3d
Homepage/docs: —
Detected install method: claude-skill → # copy this skill into .claude/skills/awwwards-3d/
Category: skills. Platforms: api, web.
Read the repo's README for exact setup and env vars, then install it and wire it into my project.

Claudeers Health Verdict:
unknown; community-verified: false. Confirm the source before running anything.
// or install directly (claude-skill)
# copy the skill dir into your project:
# .claude/skills/awwwards-3d/   (or ~/.claude/skills/awwwards-3d/ for all projects)
// or clone
git clone https://github.com/tsogjavklann/awwwards-3d

// compatibility

Platformsapi, web
Operating systems—
AI compatibilityclaude
LicenseMIT
Pricingopen-source
LanguageHTML

Get your FREE $2.50 API credits to access TickAtlas financial data ↗

awwwards-3d

A Claude Code skill for building Awwwards-style scroll-driven 3D websites in the visual language of Active Theory, Lusion, 14islands, Bonhomme, Resn, Studio Freight, Locomotive, and Igloo Inc.

Stack: Three.js r170 + GSAP 3.12.5 (ScrollTrigger) + Lenis 1.1 + three's built-in EffectComposer. Single-file HTML deliverables by default; Vite scaffold optional.

The four templates

minimal.html
Foundation — chrome icosahedron, full polish chain (HDR composer, ACES, bloom, vignette, grain, Lenis-driven scroll camera).		coin-scroll.html
Gold coin tumbles + falls on scroll. Loads coin.glb via DRACOLoader. Object-showcase archetype.
minimal.htmlcoin-scroll.html
room-walkthrough.html
Camera follows a CatmullRomCurve3 spline through a low-poly interior. Loads room.glb. Spline-camera archetype.		glass-product.html
Glass orb with MeshPhysicalMaterial transmission + dispersion (r166+). Loads glass_orb.glb. No drei dependency.
room-walkthrough.htmlglass-product.html

🌐 Live demos: tsogjavklann.github.io/awwwards-3d (deployed from /docs)

What's inside

awwwards-3d/
├── SKILL.md                       The skill's "front door". Philosophy + the 5-step workflow.
├── references/
│   ├── ARCHITECTURE.md            Scene graph, lerp loop, scroll loop, render order, cleanup
│   ├── PATTERNS.md                33 copy-paste snippets (camera, materials, lighting, etc.)
│   ├── PROCEDURAL_GEOMETRY.md     Code-only geometry; primitives, math, vertex displacement
│   ├── POST_PROCESSING.md         Canonical built-in EffectComposer chain
│   ├── SHADERS.md                 GLSL building blocks (noise, fresnel, dispersion, …)
│   ├── TRANSITIONS.md             Page transitions (View Transitions, Barba.js, custom GSAP)
│   ├── BLENDER_PIPELINE.md        Blender MCP recipes + GLB export config
│   └── ANTI_PATTERNS.md           20 "never do this" rules with code-review tells
├── assets/
│   ├── templates/
│   │   ├── minimal.html           Foundation — empty scene with full polish chain
│   │   ├── coin-scroll.html       Gold coin tumbles + falls on scroll (loads coin.glb)
│   │   ├── room-walkthrough.html  Camera follows spline through a low-poly interior
│   │   └── glass-product.html     Hero orb with MeshPhysicalMaterial transmission
│   ├── models/
│   │   ├── coin.glb               6 KB Draco-compressed gold coin
│   │   ├── glass_orb.glb          12 KB UV sphere for transmission
│   │   ├── blob.glb               6 KB displaced icosphere
│   │   └── room.glb               5 KB low-poly box room (floor + 3 walls + ceiling + sofa)
│   └── hdri/
│       └── README.md              Where to download HDRIs (Polyhaven, etc.)
└── scripts/
    ├── init_project.py            Scaffold a new project (vanilla or Vite)
    └── export_glb.py              Headless Blender → optimized GLB

Quick start

Run a template directly

cd assets
python -m http.server 8766
# open http://localhost:8766/templates/coin-scroll.html

Scaffold a new project from a template

# Self-contained vanilla folder (single .html + GLBs + serve.py)
python scripts/init_project.py my-site --template coin-scroll --framework vanilla

# Or a full Vite project with package.json + vite.config.js
python scripts/init_project.py my-site --template glass-product --framework vite
cd my-site
npm install
npm run dev

Build new GLB assets in Blender

# Headless export with Draco compression
python scripts/export_glb.py my-source.blend --output dist/hero.glb

# Add Meshopt post-pass for max compression
python scripts/export_glb.py my-source.blend --output dist/hero.glb --meshopt

Locked tech stack

These versions are tested together. Don't bump silently.

PackageVersionWhy locked
three0.170.0Has dispersion (r166+) for chromatic glass; built-in addon paths stable
gsap (with ScrollTrigger)3.12.5ESM-friendly, plays well with Lenis
lenis1.1.0The prevent API requires explicit function, fixed across templates

Not used (and why):

  • postprocessing npm library — incompatible with three r170 (Material.onBeforeRender removed)
  • @studio-freight/lenis — scope retired at v1.0.42; use lenis instead
  • @pmndrs/drei-vanilla MeshTransmissionMaterial — built-in MeshPhysicalMaterial + dispersion covers ~95% of cases

Skill activation

Triggered by phrases like:

  • "Awwwards-style 3D site"
  • "scroll-driven 3D"
  • "WebGL hero"
  • "creative dev portfolio"
  • "premium 3D landing"
  • Mongolian: "3D вэб", "scroll-тэй 3D", "Awwwards маягтай", "интерактив 3D"
  • Mention of Three.js + GSAP + Lenis together

See SKILL.md for the full description and trigger list.

Verification

Templates were verified end-to-end in Playwright (Chrome) on the developer's machine:

  • minimal.html — 0 console errors
  • coin-scroll.html — 0 console errors, GLB loaded via DRACOLoader
  • room-walkthrough.html — 0 console errors, spline camera path
  • glass-product.html — 0 console errors (1 harmless three.js HLSL compiler warning)

Blender recipes (BLENDER_PIPELINE.md) were verified end-to-end in Blender 5.1.1 via the blender-mcp MCP server. All four recipes produce the GLBs in assets/models/ exactly as documented.

License

MIT — see LICENSE.

Credits

Inspired by the work of:

// faq

What is awwwards-3d?

Awwwards-style scroll-driven 3D website skill for Claude Code (Three.js r170 + GSAP + Lenis). It is open-source on GitHub.

Is awwwards-3d free to use?

awwwards-3d is open-source under the MIT license, so it is free to use.

What category does awwwards-3d belong to?

awwwards-3d is listed under skills in the Claudeers registry of Claude-compatible tools.

16 views
★ 23 stars
unclaimed
updated 9 days ago

// embed badge

awwwards-3d on Claudeers
[![Claudeers](https://claudeers.com/api/badge/awwwards-3d.svg)](https://claudeers.com/awwwards-3d)

// retro hit counter

awwwards-3d hit counter
[![Hits](https://claudeers.com/api/counter/awwwards-3d.svg)](https://claudeers.com/awwwards-3d)

// reviews

// guestbook

0/500

// related in Claude Skills

🔓
superpowers

An agentic skills framework & software development methodology that works.

// skillsobra/⟨Shell⟩★ 292,190◷ MIT[ claude ]
🔓
skills

Public repository for Agent Skills

// skillsanthropics/⟨Python⟩★ 178,324[ claude ]
🔓
spec-kit

💫 Toolkit to help you get started with Spec-Driven Development

// skillsgithub/⟨Python⟩★ 138,919◷ MIT[ claude ]
🔓
graphify

AI coding assistant skill (Claude Code, Codex, OpenCode, Cursor, Gemini CLI, and more). Turn any folder of code, SQL schemas, R scripts, shell scripts, docs,…

// skillsGraphify-Labs/⟨Python⟩★ 123,800◷ MIT[ claude ]
→ see how awwwards-3d connects across the ecosystem