Search everything...

Stats

Actions

Available In

Help us improve

Share bugs, ideas, or general feedback.

extended-3d-scroll - Claude Code Plugin | ClaudePluginHub

Plugin

extended-3d-scroll

Name: extended-3d-scroll
Author: freshtechbro

By freshtechbro

Rapidly prototype and integrate immersive 3D/VR/AR scenes, smooth parallax scrolling, page transitions, 2D graphics, and lightweight effects into web apps using A-Frame, PlayCanvas, PixiJS, Locomotive Scroll, Barba.js via interactive generators, setup scripts, and specialist agents.

npx claudepluginhub freshtechbro/claudedesignskills --plugin extended-3d-scroll

Popularity

Stars

Top 10%

126

Med: 0·Avg: 266

Installs

Med: 0·Avg: 1

What's Inside

Slash Commands12

/aframe-webxr-component_builder

A-Frame WebXR - Component Builder

/aframe-webxr-scene_generator

A-Frame WebXR - Scene Generator

/barba-js-project_setup

Barba.js - Project Setup

/barba-js-transition_generator

Barba.js - Transition Generator

/lightweight-3d-effects-generate_zdog

Lightweight 3D Effects - Generate Zdog

Agents7

A-Frame WebXR Architect

/aframe-webxr-architect

Expert 3D/graphics architect specializing in A-Frame WebXR scene design, optimization, and best practices.

Barba.js Specialist

/barba-js-specialist

Expert specialist in Barba.js implementation, patterns, and best practices.

Extended 3D & Scroll Integration Specialist

/extended-3d-scroll-integration

Expert integration specialist for combining Extended 3D & Scroll technologies into cohesive applications.

Lightweight 3D Effects Architect

/lightweight-3d-effects-architect

Expert 3D/graphics architect specializing in Lightweight 3D Effects scene design, optimization, and best practices.

Locomotive Scroll Specialist

/locomotive-scroll-specialist

Expert specialist in Locomotive Scroll implementation, patterns, and best practices.

Skills6

aframe-webxr

/aframe-webxr

Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR applications, VR experiences, AR experiences, 360-degree media viewers, or immersive web content with minimal JavaScript. Triggers on tasks involving A-Frame, WebXR, VR development, AR development, entity-component-system, declarative 3D, or HTML-based 3D scenes. Built on Three.js with accessible HTML-first approach.

barba-js

/barba-js

Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated route changes, or building websites with smooth navigation. Triggers on tasks involving Barba.js, page transitions, routing, view management, transition hooks, GSAP integration, or smooth page navigation. Works with gsap-scrolltrigger for transition animations.

lightweight-3d-effects

/lightweight-3d-effects

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.

locomotive-scroll

/locomotive-scroll

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth scrolling experiences, creating parallax effects, building scroll-triggered animations, or developing immersive scrolling websites. Triggers on tasks involving Locomotive Scroll, smooth scrolling, parallax, scroll detection, scroll events, sticky elements, horizontal scrolling, or GSAP ScrollTrigger integration. Integrates with GSAP for advanced scroll-driven animations.

pixijs-2d

/pixijs-2d

Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Use this skill when building 2D games, particle systems, interactive canvases, sprite animations, or UI overlays on 3D scenes. Triggers on tasks involving PixiJS, 2D rendering, sprite sheets, particle effects, filters, or high-performance canvas graphics. Alternative to Canvas2D with WebGL acceleration for rendering thousands of sprites at 60 FPS.

Stats

Version1.0.0

LanguagePython

Stars126

Forks14

MaintenancePoor

LicenseApache-2.0

Last CommitNov 14, 2025

AddedMar 26, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge.

Available In

claude-design-skillstack12

Safety Signals

Caution

Uses power tools

Uses Bash, Write, or Edit tools

Help us improve

Share bugs, ideas, or general feedback.

README

Claude Design Skillstack

Professional design agency skillstack for 3D/WebGL, animation, and modern web development

Claude Code plugin marketplace providing comprehensive coverage of modern web technologies including Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js, and more.

🚀 Quick Start (Plugin Marketplace)

New: Install skills as plugins directly from this marketplace!

# Add marketplace to Claude Code
/plugin marketplace add freshtechbro/claudedesignskills

# Install individual plugins
/plugin install threejs-webgl
/plugin install gsap-scrolltrigger
/plugin install react-three-fiber

# Or install complete bundles
/plugin install core-3d-animation        # 5 skills: Three.js, GSAP, R3F, Motion, Babylon
/plugin install extended-3d-scroll       # 6 skills: A-Frame, Vanta, PlayCanvas, PixiJS, Locomotive, Barba
/plugin install animation-components     # 5 skills: React Spring, Magic UI, AOS, Anime.js, Lottie
/plugin install authoring-motion         # 4 skills: Blender, Spline, Rive, Substance 3D
/plugin install meta-skills             # 2 skills: Integration patterns, Modern design

Each plugin includes:

✅ Complete skill content with SKILL.md
✅ 1-3 slash commands for quick actions
✅ 1-2 specialized agents for domain expertise
✅ Scripts, references, and asset templates

📚 View complete marketplace documentation →

Overview

27 plugins (22 individual + 5 bundles) extending Claude Code with specialized knowledge for cutting-edge web technologies.

Key Features:

🏪 Plugin marketplace with 27 ready-to-install plugins
✅ 22 individual skills + 5 category bundles
🔧 50+ slash commands for instant boilerplate generation
🤖 27+ specialized agents for domain expertise
📚 Comprehensive patterns, examples, and integration guides
🚀 Auto-activates when Claude detects relevant tasks

What are Claude Skills?

Modular packages that teach Claude specific technologies. Each contains:

SKILL.md - Instructions and patterns
references/ - API docs and guides
scripts/ - Automation utilities
assets/ - Templates and examples

Progressive disclosure: Claude loads only what's needed per task.

Available Plugins

Individual Plugins (22)

All plugins include slash commands and specialized agents. Full details →

Category Bundles (5)

core-3d-animation - Three.js, GSAP, R3F, Motion, Babylon.js (5 skills, 9 commands, 6 agents)
extended-3d-scroll - A-Frame, Vanta, PlayCanvas, PixiJS, Locomotive, Barba (6 skills, 12 commands, 7 agents)
animation-components - React Spring, Magic UI, AOS, Anime.js, Lottie (5 skills, 10 commands, 6 agents)
authoring-motion - Blender, Spline, Rive, Substance 3D (4 skills, 10 commands, 5 agents)
meta-skills - Integration patterns, Modern design (2 skills, 4 commands, 3 agents)

Available Skills

Core 3D & Animation (5)

threejs-webgl • gsap-scrolltrigger • react-three-fiber • motion-framer • babylonjs-engine

Extended 3D & Scroll (6)

aframe-webxr • lightweight-3d-effects • playcanvas-engine • pixijs-2d • locomotive-scroll • barba-js

Animation & Components (5)

react-spring-physics • animated-component-libraries • scroll-reveal-libraries • animejs • lottie-animations

3D Authoring & Motion (4)

blender-web-pipeline • spline-interactive • rive-interactive • substance-3d-texturing

Meta-Skills (2)

web3d-integration-patterns • modern-web-design

Installation

Prerequisites: Claude Code CLI or claude.com/code

Option 1: Plugin Marketplace (Recommended - New!)

Install directly from the marketplace:

# Add marketplace
/plugin marketplace add freshtechbro/claudedesignskills

# Browse and install plugins
/plugin install threejs-webgl
/plugin install core-3d-animation  # Bundle: 5 skills + commands + agents

Benefits:

✅ One-command installation
✅ Includes slash commands for quick actions
✅ Specialized agents for domain expertise
✅ Automatic updates when repo updates
✅ Individual plugins or category bundles

Option 2: Upload to claude.ai

Upload individual skills directly to claude.ai:

Go to Settings > Features > Skills
Click Upload skill
Select any .zip file from .claude/skills/
Skill activates automatically when Claude detects relevant tasks

View full README on GitHub

More by freshtechbro

gsap-scrolltrigger

126·

Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens, scroll-triggered animations, pinning, scrubbing, parallax effects, or animating DOM elements, SVG, Canvas, WebGL, or Three.js. Triggers on tasks involving GSAP, ScrollTrigger, smooth animations, scroll effects, or animation sequencing.

6mo

v1.0.0

freshtechbro

animation-components

126·1·

Comprehensive animation and component libraries with React Spring, Magic UI, React Bits, AOS, Anime.js, and Lottie

6mo

v1.0.0

freshtechbro

rive-interactive

126·

State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.

6mo

v1.0.0

freshtechbro

barba-js

126·

6mo

v1.0.0

freshtechbro

aframe-webxr

126·

6mo

v1.0.0

freshtechbro

Help us improve

Find plugins for your project

Help us improve

extended-3d-scroll

Popularity

What's Inside

Help us improve

Health & Quality

Confidence

README

Claude Design Skillstack

🚀 Quick Start (Plugin Marketplace)

Overview

What are Claude Skills?

Available Plugins

Individual Plugins (22)

Category Bundles (5)

Available Skills

Core 3D & Animation (5)

Extended 3D & Scroll (6)

Animation & Components (5)

3D Authoring & Motion (4)

Meta-Skills (2)

Installation

Option 1: Plugin Marketplace (Recommended - New!)

Option 2: Upload to claude.ai

Similar Plugins

core-3d-animation

threejs

ui-design

llm-council-plugin

caveman

nanobanana

More by freshtechbro

gsap-scrolltrigger

animation-components

rive-interactive

barba-js

aframe-webxr

Claude Design Skillstack

🚀 Quick Start (Plugin Marketplace)

Overview

What are Claude Skills?

Available Plugins

Individual Plugins (22)

Category Bundles (5)

Available Skills

Core 3D & Animation (5)

Extended 3D & Scroll (6)

Animation & Components (5)

3D Authoring & Motion (4)

Meta-Skills (2)

Installation

Option 1: Plugin Marketplace (Recommended - New!)

Option 2: Upload to claude.ai