5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T9e0,

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

5a:[["$","$L5d",null,{"post":{"id":"019e0a39-5560-775b-98cd-60432c5c4866","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8e115243-9041-43e1-baaa-70920b31812c","name":"Mikiko Niwa","slug":"studio-before-sunrise","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8e115243-9041-43e1-baaa-70920b31812c/n1ec5b53","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JZrTxYGgymtRtFCyDFU0","resolved":true,"title":"Preload video","body":"$5e","bodyJson":null,"introduction":"Cinematic intro with shrink effect","slug":"preload-video","author":{"framerUserId":"8e115243-9041-43e1-baaa-70920b31812c","name":"Mikiko Niwa","slug":"studio-before-sunrise","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8e115243-9041-43e1-baaa-70920b31812c/n1ec5b53","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JZrTxYGgymtRtFCyDFU0/preload-video-2pYgpC6zA5ZZ5iWqowF1N4Cfrlu2ZO","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-20T07:40:44.164Z","updatedAt":"2026-05-09T00:53:02.980Z","publishedAt":"2026-05-09T00:53:10.112Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://preload-animation-video.framer.website","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_7wgvyy9CSZu7qdSyeTD2TLIWtIyoP5G1AwRwx2YXCZp","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"7JF5wEut7QjyphmeRJod","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-09T00:53:10.112Z","updatedAt":"2026-05-09T00:53:10.112Z","reported":false}}],"$L5f"]

Suggested for you