From superpowers
Builds Apple-style scroll-triggered 3D frame animations for product websites using Next.js and React. Useful for scroll-based reveals, exploded views, and interactive product pages.
npx claudepluginhub lunartech-x/superpowers --plugin superpowersThis skill uses the workspace's default tool permissions.
Build Apple-style scroll-triggered animations that reveal products through frame sequences.
Builds immersive scroll-driven experiences with parallax storytelling, animations via GSAP ScrollTrigger, Framer Motion, and CSS scroll-timeline. For cinematic web sites like NY Times interactives.
Builds immersive scroll-driven experiences with parallax storytelling, scroll animations, interactive narratives using GSAP ScrollTrigger and Framer Motion. Optimizes performance for cinematic web effects.
Implements scroll animations, parallax, pinning, scrubbing, horizontal scroll, and reveals using GSAP ScrollTrigger or Framer Motion in JavaScript, React, or Next.js.
Share bugs, ideas, or general feedback.
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