ai-agent

Threejs Scroll Animation Demo

Name: Threejs Scroll Animation Demo
Author: fireship-io

3D Scrolling Portfolio Website with Three.js

1,662 stars687 forksHTMLUpdated 7/6/2024100% free · open source

What it does

Creates a ready‑to‑use 3‑D scrolling portfolio website built with Three.js and GSAP that animates models as the user scrolls.

When to use it

•You need a visually striking single‑page portfolio that showcases products or projects with interactive 3‑D graphics.
•You want to impress investors or clients with a modern WebGL experience without hiring a 3‑D developer.
•You have a static site (e.g., on Vercel, Netlify, or GitHub Pages) and need a drop‑in animation demo you can customize.

Ready-to-paste prompt

npm run build && npx serve -s dist   # builds a production‑ready static bundle and serves it locally on port 3000

Heads up: The project uses native ES modules, so you must run it through a local server (npm run dev or `npx serve`). Opening `index.html` directly from the file system will cause CORS errors and the 3‑D scene won’t load.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/threejs-scroll-animation-demo && curl -fsSL https://workflowstacks.com/api/skills/threejs-scroll-animation-demo/claude-skill -o ~/.claude/skills/threejs-scroll-animation-demo/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Threejs Scroll Animation Demo works

Codeflow

Free to inspect

Threejs Scroll Animation Demo is a tiny HTML project (~80 lines across 1 code files). Setup is light: installs like a normal app. Reading the code is optional. Last commit 27 months ago, no license file, no tests found.

Size

Tiny codebase

~80 lines · 1 code files · 2 min skim

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

HTML 54%JavaScript 32%CSS 13%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
main.js
Where the program starts running
3
package.json
Dependencies and the commands it exposes

READMENo tests foundThin docsNo CINo licenseLast update 27 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/threejs-scroll-animation-demo && curl -fsSL https://workflowstacks.com/api/skills/threejs-scroll-animation-demo/claude-skill -o ~/.claude/skills/threejs-scroll-animation-demo/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

fireship-io

Language

HTML