---
title: "Preload  video — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Mikiko Niwa · Loaders. Cinematic intro with shrink effect"
canonical: "https://framer.elliotli.dev/component/preload-video"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Preload video

# Preload video

Cinematic intro with shrink effect

[View on Framer](https://framer.com/marketplace/components/preload-video/?via=elliot-li)

![Preload  video preview image 1](https://framer.elliotli.dev/og/component/preload-video/31be55bc1a5ae5e9/1600x1200.jpg)

## Summary

Cinematic intro with shrink effect

## Description

### 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](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-lvqee6jk-NxHQvCWFLoaaBCWXC6Ylk4MXSyvUdf)01![02](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-lvqee6jk-gTtuu5mgviwTcxT2xZCizyNZc5VZqt)02

## Rank history [How rankings work →](/terms#rankings)

-   All · #8158

## Details

- **Author**: Mikiko Niwa
- **Price**: $10.00
- **Published**: 2026-05-09
- **Updated**: 2026-05-09
- **Added**: 2026-04-20
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story