Learning path map
Detailed content
📺 Channel Intro
A complete 10–15 s bumper combining logo animation (T2), a starfield/gradient background, a title entrance with text splitting, and a cinematic transition into the main content.
A Series with 4 sequential scenes: animated background (starfield), logo animation, title entrance, and exit transition.
The opening structure is reusable on any channel—swap the logo and colors, and it's ready.
Series · AbsoluteFill · scene layers.
templates/starfield.tsx and gradient-shift.tsx make up the background that persists throughout the opening.
Animated backgrounds add depth without needing a real camera — they are purely computational.
seeded random · cycles with interpolate · AbsoluteFill at z=0.
templates/logo-spin-reveal.tsx or logo-stroke-draw.tsx — the logo appears by spinning or drawing itself.
The logo entrance is the brand identity moment; a well-tuned spring makes a visual difference.
spring · SVG stroke-dashoffset · timing from 0–30 frames.
templates/cinematic-title-intro.tsx or title-split.tsx — the channel name appears in slices or cinematically.
The title and tagline are the second layer of identity; the animation needs character.
stagger by letter · translateY + opacity · wait for the logo to finish with Sequence from.
templates/iris-transition.tsx or fade-through-black.tsx — the opening closes elegantly before the content begins.
The transition connects the opening to the content without a hard cut—that's what sets professional work apart from amateur work.
animated clip-path · fade to black · timing in the last 15 frames.
The root component uses Series to sequence the background + logo + title + transition without manually calculating offsets.
Series eliminates offset arithmetic and keeps the code readable when there are 4+ scenes.
Series.Sequence · durationInFrames per scene · order = time.
🛍️ Product Video
A 30–60 s video that showcases a product with Ken Burns movement, identifies its name and price with an animated lower third, shows a comparison, and ends with a CTA end card.
Sequence: Hero (ken-burns), Identity (lower-third), Comparison (split-screen), Numbers (stat-counter), CTA (end-card).
Product videos follow a proven persuasive structure — learning this order is learning visual marketing.
Series · data props · reuse across SKUs.
templates/ken-burns.tsx — the product image slowly zooms in while panning, creating cinematic movement with a still photo.
Ken Burns transforms any still photo into a dynamic scene — it’s the most widely used technique in e-commerce videos.
scale + translateX/Y via interpolate · overflow hidden · smooth easing.
templates/lower-third.tsx — an animated band in the lower third with the product name and price sliding in.
Lower-thirds are the bread and butter of any professional production — reusable for any product.
translateX from offscreen · Sequence from to appear after ken-burns · text props.
templates/image-comparison-slider.tsx or split-screen.tsx — splits the frame to show two states of the product.
Visual comparisons are powerful for showing transformation (before/after) or product differentiators.
animated clip-path · divider line · timing for a slow reveal.
templates/stat-counter.tsx — animated numbers from 0 to the final value (e.g., "4.8★ · 12k reviews").
Animated numbers grab attention and socially validate the product; they are more persuasive than static text.
Math.floor(interpolate) · formatting with toLocaleString · Easing.out.
templates/end-card.tsx — final scene with a URL, QR code, or animated button directing the viewer.
Without a call to action, the video loses conversions. The end card ensures the last frame has a purpose.
scale spring · action text · logo in the bottom corner.
📈 Data Story
A video that tells a story with data: animated charts, counters, comparisons, and highlighted text — all orchestrated to guide the viewer through the narrative in the numbers.
Scenes: Context (the problem) → Central data point → Comparison → Trend (timeline) → Conclusion.
Data alone doesn’t convince — the sequence of scenes creates the narrative that makes the number memorable.
5–8 s rhythm per scene · text + data together · smooth transitions between charts.
templates/chart-animation.tsx or line-chart.tsx — bars or lines grow to reveal the data progressively.
A static chart is boring; growing frame by frame guides the viewer’s eye to the most important data.
height/width via interpolate · stagger between bars · label appears when the bar reaches its position.
templates/donut-chart.tsx — animated slices via SVG stroke-dasharray, showing percentages visually.
Proportions are easier to absorb visually in a donut chart than in text — it’s the natural language of data.
stroke-dasharray · animated stroke-dashoffset · color legend.
templates/stat-counter.tsx + text-highlight.tsx — the number "counts" up to the final value while the text provides context.
The animated number is the emotional anchor—the viewer focuses on it. The highlighted text reinforces the message.
interpolate with Math.round · background highlight via animated width · synchronized timing.
templates/comparison-chart.tsx — two columns grow together, making the difference visually obvious.
Comparison is the strongest argument in data stories; the chart needs to reveal the difference dramatically.
stagger between the two bars · contrasting color · percentage difference label.
Opacity overlap between scenes — scene A fades out while scene B fades in, creating a smooth dissolve.
In data stories, data needs to flow — hard cuts break the narrative's analytical rhythm.
Sequence with overlap · two opacity interpolates · 10–15 frame transition duration.
📱 Reels / Shorts
A vertical 9:16 (1080×1920) video for Instagram Reels or YouTube Shorts — fast pacing, impactful text, a vibrant background, and a subscribe reminder, all in 30–60 s.
Composition with width:1080, height:1920 — everything read via useVideoConfig so components adapt automatically.
The 9:16 format changes the proportions of everything: larger fonts, less text per scene, narrower side margins.
useVideoConfig · dynamic width/height · vertical centering.
templates/typewriter-subtitle.tsx or bounce-text.tsx — text appears letter by letter or with each word bouncing.
85% of Reels are watched without sound — animated captions are the visual audio that keeps viewers watching.
slice by word · stagger by frame · large font (min 60px at 1080px).
templates/glitch-text.tsx — the Reel’s keyword flashes with a color offset for a few frames, creating impact.
Glitch grabs attention in the first 3 seconds — the Reels algorithm measures retention, and the beginning is critical.
seeded random · short translateX · duration of 2–4 frames per glitch.
templates/sound-wave.tsx — animated wave bars pulse to the rhythm of the content, adding energy to the video.
Sound waves create the feeling that there's music even without sound — a visual cue that suggests energetic content.
Math.sin for oscillation · seeded random per bar · size relative to height.
templates/bokeh-circles.tsx — blurred circles floating, simulating a photographic depth-of-field background.
Bokeh adds sophistication to the background without needing a camera — the foreground text naturally stands out.
filter blur · variable opacity · slow translateY to float.
templates/subscribe-reminder.tsx — a bell + "Subscribe" animation that appears in the Reel’s last 5 seconds.
A subscription reminder at the right moment increases conversions without feeling like spam—it’s about timing, not intrusion.
Sequence from=totalFrames-150 · shake animation · entrance spring.