Preload video

Cinematic intro with shrink effect

Features 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 Customization 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 Notes 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. Demo 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 01 02

Cinematic intro with shrink effect