🧩 What it is / what it does
Main Concept
O 3d-animation-creator is a skill that takes a video file (e.g., product breakdown/assembly, before-and-after transformation) and builds a site production-quality with scroll-driven animation. The video plays forward and backward as the user scrolls — recreating the "scroll-stop" effect popularized by Apple in iPhone launches.
What it delivers
- ▸ Complete HTML/CSS/JS site, zero heavy dependencies
- ▸ Canvas with frame-by-frame rendering synchronized to scroll
- ▸ Animated starscape as the background (fixed canvas, ~180 stars)
- ▸ Annotation cards with snap-stop ("boom boom boom" effect)
- ▸ Specs section with animated count-up via IntersectionObserver
- ▸ Navbar that transforms into a pill with glassmorphism as you scroll
- ▸ Preloading loader for frames before displaying them
- ▸ Mobile responsiveness (different layout, same video)
What it DOESN'T do
- ✗ Doesn't use video players (`<video>`) — all control is through the canvas
- ✗ Doesn't process video at runtime — you need to extract frames with FFmpeg first
- ✗ Doesn't generate the video — it only uses already-extracted frames
- ✗ Doesn't serve the files — it needs a local server (doesn't work via
file://)
🎣 When it triggers
Rule: Claude activates this skill when it detects an intent to create a website with scroll-controlled video—or when the user mentions any of the triggers below. Detection is based on text, not on attached files.
Triggers that activate the skill
"3D animation"
The most direct trigger. Any mention of the skill name or the technique of scroll-controlled 3D animation.
"scroll-stop build" / "scroll animation website"
Intent to build—not just understand. The user wants the finished site.
"scroll-driven video" / "build the scroll-stop site"
Idiomatic variations—all map to the same skill.
"Apple-style scroll animation" / "video on scroll"
Clear visual reference to Apple's product launch style.
Video file + control request
The user provides a .mp4 and asks to "control it with scrolling" or "make it interactive scrub".
📋 Step 0 — The Interview (required)
Before building, the skill interviews the user to gather:
- • Video file path
- • Output directory for the frames
- • Desired number of frames (30–120)
- • Annotation sections (text + video timestamp)
- • Product specifications (for count-up)
- • Preferred color palette
- • Scroll speed (200–800vh)
- • Hero title and subtitle
🚀 How it improves your pages
✓ DO — what the skill handles
- ✓ Turn a simple video into an immersive interactive experience
- ✓ Delivers a complete site with loader, navbar, hero, specs, footer
- ✓ Controls the narrative: the user "reads" the product by scrolling the page
- ✓ Performance: canvas + requestAnimationFrame, no pop-in
- ✓ Retina-ready: uses devicePixelRatio for sharpness on HiDPI displays
- ✓ Mobile: compact layout, single-row cards, bottom:1.5vh position
✗ AVOID — when not to use
- ✗ Long videos (>10s)—prefer 3–6s for the scroll effect to work well
- ✗ PNG frames — use JPEG <100KB each to avoid slowdowns
- ✗ Open via
file://— frames don’t load without a local server - ✗ scroll-behavior: smooth in CSS — interferes with frame-by-frame control
- ✗ First frame is colored/dark — it needs to be white for the loader to work
Speed tip: The container height .scroll-animation controls the pace: 200vh = fast, 500vh = smooth, 800vh = cinematic. Adjust based on the product's information density.
📊 Realistic benchmarks
⚙️ How it works under the hood
6-step pipeline (SKILL.md)
Step 0 — The Interview
Collects the video path, output dir, number of frames, annotation sections, count-up specs, palette, scroll speed, title/subtitle.
Step 1 — Analyze the Video
Extracts metadata: duration, resolution, fps. Determines how many frames to extract (recommended: duration × 20).
Step 2 — Extract Frames via FFmpeg
Runs the FFmpeg command to generate numbered JPEG frames in the output directory.
Step 3 — Build the Website
Generates the complete HTML with a sticky canvas, loader, starscape, navbar, hero, annotation cards, specs, and footer.
Step 4 — Key Implementation Patterns
Canvas with devicePixelRatio. Desktop cover-fit, mobile zoomed contain-fit. Snap-stop with ~600ms overflow lock. Pill navbar transform. Count-up with staggered 200ms easeOutExpo.
Step 5 — Customize Content
Applies the color palette, text, number of cards, and specs provided in the interview.
Step 6 — Serve & Test
Instructs the user to run a local server (e.g., python -m http.server) to test the site.
// Canvas com suporte a Retina / HiDPI
canvas.width = window.innerWidth * window.devicePixelRatio;
canvas.height = window.innerHeight * window.devicePixelRatio;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
// Mapeamento scroll → frame
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY;
const maxScroll = scrollContainer.scrollHeight - window.innerHeight;
const progress = Math.min(scrollTop / maxScroll, 1);
const frameIdx = Math.floor(progress * (frames.length - 1));
if (frameIdx !== currentFrame) {
currentFrame = frameIdx;
requestAnimationFrame(() => drawFrame(frames[frameIdx]));
}
}, { passive: true });⚠️ Required dependency: FFmpeg
The skill checks whether FFmpeg is installed. If not, it instructs the user: brew install ffmpeg (macOS) or equivalent. Frames won't load without a local HTTP server — never via file://.
💬 Practical example + Ready-to-use PROMPT
Scenario: Deconstructing a smartwatch
You have a 4-second video showing a smartwatch coming apart piece by piece (product deconstruction). You want a site where the user scrolls and the watch comes apart on screen—with annotations appearing for each component (battery, AMOLED display, processor) and a final section with animated technical specifications.
3D animation
Tenho um vídeo de deconstrução de smartwatch em:
/Users/eu/videos/watch-deconstruct.mp4
Quero um site scroll-stop Apple-style com:
- Frames extraídos em: /Users/eu/site/frames/
- 80 frames totais
- Velocidade: 600vh (cinemática)
- Cor dominante: #a855f7 (roxo)
Anotações (3 cards):
1. "Tela AMOLED 1.4"" — no frame 20
2. "Bateria 300mAh" — no frame 45
3. "Chip Snapdragon W5" — no frame 65
Specs (count-up):
- "1.4"" / tela
- "300mAh" / bateria
- "5 dias" / autonomia
- "IP68" / resistência
Título: "Por dentro do Tempo"
Subtítulo: "Cada componente, revelado"What happens: Claude starts the interview (Step 0), confirms the parameters, runs the FFmpeg command to extract the 80 frames, and delivers a single HTML file containing the entire site — loader, starscape, sticky canvas, 3 annotation cards with snap-stop, specs section with count-up, and pill navbar.
ffmpeg -i /Users/eu/videos/watch-deconstruct.mp4 \
-vf "fps=20,scale=1920:-1" \
-q:v 3 \
/Users/eu/site/frames/frame_%03d.jpg🧬 Works well with / limitations
animation-designer
Module 3.1Creates CSS/GSAP/Framer Motion animations that can later be rendered as video. Use animation-designer to create the intro video for 3d-animation-creator.
remotion
Module 3.3Generates programmatic videos in React. Remotion's MP4 output is the perfect input for 3d-animation-creator — frame-accurate video → scroll-stopping site.
HyperFrames
Module 3.4HyperFrames converts animated HTML → MP4 via headless Chrome + FFmpeg. Use it to render complex HTML animations and then feed the generated video into the 3d-animation-creator.
✓ COMBINE WITH
- ✓ animation-designer to create the source video with CSS/GSAP animations
- ✓ remotion when the video needs to be generated programmatically in React
- ✓ HyperFrames to convert complex HTML animations into an input MP4
- ✓ frontend-design to refine the final HTML with more visual polish
- ✓ impeccable for a quality review of the delivered site
✗ DO NOT USE WHEN
- ✗ The user wants just a simple CSS animation—use animation-designer
- ✗ The video doesn't exist yet, and there are no plans to create it first
- ✗ The environment doesn't support FFmpeg and the user can't install it
- ✗ The content is text/data — use canvas-design or algorithmic-art
- ✗ Need normal video autoplay — use the tag
<video>directly
Position in Track 3 🎞️ Media
📋 Module 3.2 Summary
What you learned
- ✓ The 3d-animation-creator builds Apple-style scroll-stop sites from videos
- ✓ Uses FFmpeg to extract JPEG frames and the Canvas API to render them
- ✓ The skill is triggered by "3D animation", "scroll-stop build", "Apple-style scroll animation"
- ✓ Includes starscape (~180 stars), pill navbar, annotation cards with snap-stop and count-up
- ✓ Step 0 (interview) is required—it collects the path, frames, notes, and specs
- ✓ Works with animation-designer (upstream), remotion, and HyperFrames for the source video
- ✓ Vanilla JS, zero heavy frameworks, { passive: true }, requestAnimationFrame
Next module:
3.3 remotion
Programmatic video rendering with React — code-controlled frames, MP4 output.
Study tip: Try chaining Modules 3.1 → 3.2: create a CSS animation with animation-designer, export it as a video (via HyperFrames), and feed it into 3d-animation-creator. It's the complete pipeline for Track 3.