From superpowers
Creates Apple-style scroll-triggered 3D animations for product websites using frame sequences. Works with Next.js and React for smooth, responsive scroll-based reveals.
How this skill is triggered — by the user, by Claude, or both
Slash command
/superpowers:scroll-based-3d-animationsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build Apple-style scroll-triggered animations that reveal products through frame sequences.
Build Apple-style scroll-triggered animations that reveal products through frame sequences.
Video files on scroll:
Frame sequences:
Smoothly transition from the assembled product to exploded view. Slow motion professional internal tech showcase. Apple style animation. High quality professional 3D explosion. Show slow and professional disassembly of the parts before showing exploded view.
Cinematic assembly. Start with a clean high quality vibrant gradient background. Smoothly, a dynamic vortex appears. Professional camera movement. Parts assemble smoothly into final product.
Create a scroll-based frame animation website. Use the frames in the /sequence folder (or /public/sequence). Build a sticky scroll component that maps the user's scroll position to these image frames. As the user scrolls, progress through frames sequentially. Use Next.js with React. Ensure:
- Frames are preloaded for smooth playback
- Scroll position maps 0-100% to frame 1-N
- Section is sticky (100vh height)
- No lag or jitter during scroll
- Mobile responsive
| Setting | Value |
|---|---|
| FPS | 25-30 |
| Resolution | 1080p |
| Total Frames | 200-250 |
| Video Duration | 8-10 seconds |
frame_001.jpg
frame_002.jpg
...
frame_240.jpg
project/
├── public/
│ └── sequence/
│ ├── frame_001.jpg
│ ├── frame_002.jpg
│ └── ...
├── src/
│ └── components/
│ └── ScrollAnimation.jsx
└── package.json
# After AI generates code
cd project-name
npm install
npm run dev
npx claudepluginhub lunartech-x/superpowers --plugin superpowersBuilds immersive scroll-driven experiences like parallax storytelling, scroll animations, interactive narratives, and cinematic web effects using GSAP ScrollTrigger, Framer Motion, and native CSS scroll-timeline.
Builds immersive scroll-driven experiences with parallax storytelling, scroll animations, and interactive narratives. Uses GSAP, Framer Motion, and CSS scroll-timeline.
Guides GSAP and ScrollTrigger usage for web animations including tweens, timelines, scroll-triggered effects, pinning, scrubbing, and parallax on DOM, SVG, Canvas, WebGL.