🎯 The project and the persuasive structure
Product videos follow a classic marketing structure: attention → interest → desire → action. In Remotion, this translates directly into scenes: the ken-burns effect grabs attention, the lower-third sparks interest, the comparison creates desire, and the end card prompts action.
🛍️ Project scene map
📸 Opening scene — ken-burns
O ken-burns is the technique of smoothly zooming and panning across a still image, creating cinematic motion without a camera. In Remotion, it’s simply scale and translate animated with interpolate inside a container with overflow: hidden.
const frame = useCurrentFrame(); const { durationInFrames } = useVideoConfig(); // zoom: 1.0 → 1.08 ao longo da cena const scale = interpolate( frame, [0, durationInFrames], [1.0, 1.08], { extrapolateRight: "clamp" } ); // pan: desloca 20px da esquerda para direita const x = interpolate( frame, [0, durationInFrames], [0, -20], { extrapolateRight: "clamp" } ); return <div style={{ overflow:"hidden", width:"100%", height:"100%" }}> <img src={src} style={{ width: "100%", height: "100%", objectFit: "cover", transform: `scale(${scale}) translateX(${x}px)` }} /> </div>;
💡 Tip: maximum scale 1.10
Zoom above 1.10 starts to look digital and artificial. Keep it between 1.03–1.10 and the effect looks like a real camera. For pan, 20–30px over 90 frames is the sweet spot — noticeable but not distracting.
🏷️ Overlay — lower third with name and price
O lower-third is an overlay that appears over the ken-burns—it isn’t a separate scene in the Series, but a Sequence within the same hero scene. It slides up from below, shows the name and price, and optionally exits before the scene ends.
✓ What to DO
- ✓Animate translateY from +80 → 0 in 20 frames (spring). Fast, firm entrance.
- ✓Use a semi-transparent background (rgba 0,0,0,0.6) so the text is legible over any photo.
- ✓Start with Sequence from={fps} — gives the viewer 1 s to see the product before the text.
✗ What NOT to do
- ✗White text with no background over a light photo—it may be unreadable depending on the product photo.
- ✗Lower-third on frame 0 — covers the product before the viewer sees it.
- ✗Price in small type — on mobile (social media), it needs to be at least 36px.
⚖️ Comparison scene — split-screen
The comparison scene uses split-screen.tsx to show two images side by side, or image-comparison-slider.tsx to progressively reveal the “after” over the “before.” Both use clip-path animated to control the split.
Frame 0–15: the two images enter
Left image slides in from the left and right image slides in from the right, both with opacity 0→1. The viewer sees both appear at the same time.
Frame 15–60: animated divider line
A vertical white line separates the two sides. On the slider, it moves from 30% to 70%, progressively revealing the "after".
Frame 60–90: labels appear
"Before" and "After" (or "Without the product" / "With the product") come in with spring, reinforcing the comparison visually.
📊 Social proof — stat-counter
The numbers scene uses stat-counter.tsx to animate counters from 0 to the product's actual value: reviews, sales, stars. A “counting” number catches the eye and makes the data more memorable than static text.
const frame = useCurrentFrame(); const progress = interpolate( frame, [0, 60], [0, 1], { easing: Easing.out(Easing.cubic), extrapolateRight: "clamp" } ); const value = Math.round(progress * targetValue); // Exemplo: targetValue = 12847 (vendas) // frame 0 → "0", frame 30 → "6.424", frame 60 → "12.847" return <div> <span>{value.toLocaleString("pt-BR")}</span> <span className="text-sm"> vendas</span> </div>;
📊 Recommended data for product videos
- Ratings: ⭐⭐⭐⭐⭐ 4.8/5 — visual effect with filled stars
- Volume: "12,847 sales" — a big number makes an impression
- Satisfaction: "97% recommend it" — percentages are quick to absorb
- Comparison: "40% lower than the competition" — anchors the price
📣 End card and video pacing
O end-card is the final scene: it presents a logo, URL, final price, or QR code. Everything scattered across the earlier scenes converges here into one clear message: "where to buy". The video's overall pace should speed up slightly toward the end card.
✓ Effective end card
- ✓Centered logo with spring — final brand identity.
- ✓URL or CTA in a large font and contrasting color.
- ✓Duration of 90–120 frames (3–4 s) — time to read and act.
✗ End card that doesn’t convert
- ✗Too much information at once — viewers don’t know where to look.
- ✗Less than 60 frames — there’s no time to absorb the URL.
- ✗Same background as the video — end card does not look visually distinct.
🏁 Module Summary
Next Module:
4.3 — Data Story: animated charts + stat-counter + comparison + data narrative.