skills.rest
joaoguirunas
joaoguirunasCOMMUNITY
Explore all skills by this author →
GitHub

sites-scroll-motion

Implements scroll-driven animations, parallax, and 3D scenes for Next.js websites using CSS, Framer Motion, and Three.js.

3|3|Updated Apr 23, 2026
Search Tags:#next.js#three.js#webgpu#parallax#framer motion#scroll animation#3d scenes
One-click install
npx skills add https://github.com/joaoguirunas/team-os --skill sites-scroll-motion-joaoguirunas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sites-scroll-motion
Source: https://github.com/joaoguirunas/team-os/tree/main/.claude/skills/sites-scroll-motion
Command: npx skills add https://github.com/joaoguirunas/team-os --skill sites-scroll-motion-joaoguirunas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and correctly implementing scroll-based motion effects is error-prone: developers pick the wrong technique, cause layout thrashing, trigger re-renders on every scroll pixel, or break SSR in Next.js. This Skill provides a decision tree and production-tested code patterns for scroll animations, parallax, and 3D scenes. ## Core Features & Use Cases - Decision tree for technique selection: Routes each motion goal (reveal, parallax, sticky sections, 3D camera paths, GPU compute) to the right tool, from zero-dependency IntersectionObserver + CSS to Three.js WebGPU with TSL compute shaders. - Performance-safe patterns: Dual-ref smoothing, _scrollDirty flags, passive listeners, DPR caps, and SSR-safe dynamic imports prevent the most common scroll-animation bugs. - Copy-paste recipes: Twelve ready recipes covering fade-in reveals, scroll snap, sticky scroll-driven sections, keyframe camera rigs, per-stage parameter interpolation, starfields, and depth-of-field post-processing. - Use Case: A developer building an immersive marketing site in Next.js needs a scroll-driven 3D camera that glides between sections while fog and color palettes shift smoothly; the Skill supplies the CameraRig keyframe pattern and stageParams lerp implementation. ## Quick Start Ask the agent to implement a scroll-driven animation for your site, for example: add a sticky section with a scroll-linked 3D camera and parallax background to my Next.js landing page.

Frequently Asked Questions about sites-scroll-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate elements on scroll in React?▼

Use Framer Motion's useScroll with a target ref and offset, then map scrollYProgress through useTransform to values like opacity or y. For simple reveals without dependencies, use IntersectionObserver with CSS transition classes instead.

Framer Motion vs IntersectionObserver for scroll animations?▼

IntersectionObserver with CSS classes handles simple viewport reveals with zero dependencies. Framer Motion is better when you need spring physics, multi-keyframe transforms, staggered timing, or scroll-linked continuous values via useScroll and useTransform.

Why does my scroll animation cause lag or re-renders in React?▼

Storing scroll position in useState triggers a re-render on every scroll pixel. Use refs with a requestAnimationFrame loop instead: mark a dirty flag in the scroll event, read scrollY once per frame, and smooth values with frame-rate-independent lerp.

Can I use Three.js with Next.js without SSR errors?▼

Yes, but any module importing three or accessing window must be loaded with next/dynamic using ssr: false, otherwise hydration fails. Render the Canvas in a fixed-position wrapper with pointerEvents: none so scroll events reach the DOM.

When should I use Three.js WebGPU instead of WebGL?▼

Use WebGPU with TSL when you need GPU compute shaders, simulations, or more than roughly 10k physics-driven instances. For standard scenes like starfields or planets, WebGL offers better browser compatibility and simpler setup.

How do I sync a 3D camera path with page scroll?▼

Define a keyframe array of [scrollT, position, lookAt] tuples, then interpolate between segments with a smoothstep-eased lerp function each frame. You can sync keyframe scroll positions to real DOM section offsets and recalculate on resize.

Related Skills

Explore More Software Engineering Skills→
modu-aimodu-ai
4

agency-copywriting

Generate JSON-structured brand-aligned copy for AI Agency website sections.

Official
Advanced
shreyas-lyzrshreyas-lyzr
4

popup-cro

Design, test, and deploy popups with timing, targeting, and compliance guidelines.

Community
Advanced
HakiickHakiick

responsive-tester

Validate responsive design across mobile, tablet, and desktop viewports with Playwright.

Community
Intermediate
andersoncollabandersoncollab

scroll-animations

Implement CSS scroll-driven animations with scroll() and view() timelines.

Community
Intermediate