6.3 KiB

Raw Blame History

description
AI prompts for generating start/end frames and video sequences for scrollytelling

Lookup: Scroll Animation Image Generation Prompts

Purpose: AI prompts for generating start/end frames and video sequences for scrollytelling

Last Updated: 2026-01-07

Overview

Use these prompts with nano banana, Runway, Pika, or other AI tools to create image sequences for scroll animations.

Workflow: Start frame → End frame → Video interpolation → Frame extraction

Start Frame Prompts

Product Hero Shot

Ultra-premium product photography of [PRODUCT NAME] placed on a matte black 
surface, minimalistic studio photoshoot. Deep black background (#050505) with 
subtle gradient falloff, soft rim lighting outlining edges, controlled 
reflections on smooth textures. Cinematic lighting, high contrast, luxury tech 
aesthetic, sharp focus, shallow depth of field. No clutter, no text, no logos 
emphasized. Shot with professional DSLR, 85mm lens, f/1.8, ultra-high 
resolution, photorealistic, Apple-level product shoot, dramatic mood, modern 
and elegant.

Variables: Replace [PRODUCT NAME] with your product Output: Starting position, fully assembled, hero angle

Variations by Product Type

Product Type	Additional Details
Headphones	"over-ear headphones with leather cushions and metal headband"
Smartphone	"smartphone with edge-to-edge OLED display, aluminum frame"
Watch	"luxury smartwatch with titanium case and sapphire crystal"
Laptop	"thin laptop with aluminum unibody, open at 45 degrees"
Camera	"mirrorless camera with prime lens attached, side profile"

End Frame Prompts

Exploded Technical View

Exploded technical diagram view of [PRODUCT NAME], every component precisely 
separated and floating in perfect alignment, suspended in mid-air against deep 
black studio background (#050505). Visible internal structure including 
[INTERNAL COMPONENTS], all parts evenly spaced showing assembly order. 
Hyper-realistic product visualization, ultra-sharp focus, studio rim lighting 
identical to hero shot, soft highlights tracing each component, controlled 
reflections on matte and metal surfaces. Cinematic lighting, high contrast, 
luxury engineering aesthetic, no labels, no annotations, no text. 
Photorealistic, ultra-high resolution, Apple-style industrial design render, 
dramatic and clean.

Variables:

[PRODUCT NAME]: Your product
[INTERNAL COMPONENTS]: Specific parts to show

Internal Components by Product

Product	Internal Components Examples
Headphones	"copper wiring, titanium drivers, magnets, circuit boards, padding layers, metal frame"
Smartphone	"battery, logic board, cameras, OLED panel, antenna bands, frame"
Watch	"watch movement, gears, battery, sensors, display, crown mechanism"
Laptop	"keyboard assembly, trackpad, battery cells, logic board, cooling fans, display panel"
Camera	"sensor, shutter mechanism, lens elements, mirror assembly, circuit boards"

Video Interpolation Prompts

For Runway/Pika

Smoothly transition from fully assembled [PRODUCT] to exploded view. 
Components separate slowly and precisely, maintaining perfect alignment. 
Camera stays locked, product rotates slightly clockwise. Cinematic motion, 
professional product animation, 4-5 seconds duration, 30fps.

Settings:

Duration: 4-5 seconds
FPS: 30 (yields 120-150 frames)
Camera: Static or slow orbit
Motion: Smooth, controlled separation

Frame Extraction

Using ffmpeg

# Extract as WebP (best for web)
ffmpeg -i animation.mp4 -vf fps=30 frame_%04d.webp

# Extract as PNG (higher quality, larger)
ffmpeg -i animation.mp4 -vf fps=30 frame_%04d.png

# Extract with quality control
ffmpeg -i animation.mp4 -vf fps=30 -quality 90 frame_%04d.webp

Using ezgif.com

Upload MP4 video
Choose "Video to GIF" → "Split to frames"
Select WebP format
Download all frames as ZIP
Rename: frame_0001.webp, frame_0002.webp, etc.

Background Color Matching

CRITICAL: Page background MUST match image background exactly

Recommended Dark Backgrounds

Color Code	Usage
`#050505`	Pure black with slight lift (recommended)
`#0a0a0a`	Slightly lighter, less harsh
`#000000`	True black (only if images are true black)
`#1a1a1a`	Dark gray (for lighter renders)

Pro tip: Use eyedropper tool on first frame background, use exact hex in CSS

Alternative Animation Styles

Rotation (360° spin)

Start: Front view End: Front view (after 360° rotation) Prompt: "Rotate product 360 degrees on turntable, maintain lighting"

Zoom In (Feature reveal)

Start: Full product view End: Close-up of key feature Prompt: "Smooth camera push-in focusing on [FEATURE], maintain focus"

Morph (Color/style change)

Start: Product in color A End: Product in color B Prompt: "Seamlessly morph product color from [A] to [B], maintain form"

Quality Settings

For High-End Results

Resolution: 1920x1080 minimum (4K for high-DPI)
Format: WebP (compression) or PNG (quality)
Frame count: 90-150 frames (3-5 seconds at 30fps)
Total size: Target <50MB for all frames combined

Optimization Tips

Use WebP format (70% smaller than PNG)
Compress with quality 85-90
Resize images to max 2000px width
Use consistent aspect ratio (16:9 or 1:1)

Testing Checklist

Background color matches exactly (no visible edges)
All frames same dimensions
Smooth motion (no jumps between frames)
Consistent lighting across sequence
File names sequential (frame_0001 to frame_0120)
Total file size reasonable (<50MB)

concepts/scroll-linked-animations.md - Understanding the technique
examples/scrollytelling-headphone.md - Full implementation
guides/scrollytelling-setup.md - Setup instructions

Tool References

Runway ML - AI video generation
Pika Labs - AI video interpolation
ezgif - Frame extraction
FFmpeg - Video processing

6.3 KiB Raw Blame History