Cinematic preload animation: full-screen video plays, smoothly shrinks into a golden-ratio frame, reveals your text, then fades out to reveal the hero section.
Responsive design: shrink size automatically adapts to screen width while maintaining the golden ratio
Accessibility ready: respects reduced motion preferences for users with motion sensitivity
Video error handling: graceful fallback when video fails to load
Canvas preview: static placeholder shown in editor and exports for smooth editing experience
Lightweight: single component, no external dependencies
Video source: upload a file (MP4, WebM, MOV) or paste a URL
Video fit: Cover, Contain, or Fill
Top and bottom text: fully editable
Font: native Framer font picker with size, weight, spacing, and line height
Background color and text color
Shrink duration, hold duration, and fade duration: all adjustable
Place this component at the top of your page, sized to 100vw × 100vh for a full-screen intro
The component fills its frame during animation
After the animation ends, the content fades out smoothly to reveal your page
Keep video files small and use a widely supported format for best results
Recommended video length: 3 to 4 seconds
Use a dark background on your hero for a smooth transition
Video files not included — please use your own.
Preview Mode is ON by default to showcase three example use cases
3 interactive demos included: Brand Intro, Pre-launch, and Event
Add your own videos to Demo 1, 2, and 3 to preview them with motion
Each demo plays the full animation followed by a hero mockup preview
Use the demo selector to switch between use cases
Toggle Preview Mode OFF for normal use
Mikiko Niwa
