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:T84b,

About this Component

Media Intro Reveal is a cinematic Framer intro that transitions from animated typography into a centered media window before expanding smoothly to fill the entire frame.

Use an image or upload your own video, customize the typography, control the reveal window, adjust the animation timing, and position the media exactly where you want it.

Perfect For

• Portfolio and agency intros • Photography and film websites • Fashion and editorial experiences • Product launches • Fullscreen landing page heroes

Key Features

• Image and video support • Smooth two-stage fullscreen reveal • Custom three-line intro text • Native Framer font controls • Responsive desktop and mobile sizing • Cover and Contain media modes • Focus X & Y controls • Adjustable reveal window size • Custom animation speed, delay, stagger, offset, and rotation • Video loop and playback speed controls • Optional scoped Scroll Stopper • Reduced Motion support • Static Canvas preview states • Optimized for multiple instances • No external scripts or runtime dependencies

How It Works

Choose Image or Video, upload your media, customize the intro text and reveal settings, then adjust the motion and behavior directly from Framer’s property panel.

The optional Scroll Stopper blocks scrolling only inside the component while the first intro runs and releases immediately when the reveal finishes.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final upon purchase as this is a non-tangible digital product. Refunds are only considered if a confirmed critical technical issue prevents the component’s core functionality from working as described and I’m unable to resolve it within a reasonable timeframe.

Refunds are not provided for buyer’s remorse, aesthetic preferences, or custom modification requests. Any technical issue must be reported with supporting evidence within 14 days of purchase.

5a:[["$","$L5d",null,{"post":{"id":"01a0f1e0-5665-705f-892e-a3d7c5a5327a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"YOsYlYMsSlrsYxcOGycx","resolved":true,"title":"Haytham Preloader 32","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Media Intro Reveal is a cinematic Framer intro that transitions from animated typography into a centered media window before expanding smoothly to fill the entire frame."}]},{"type":"paragraph","content":[{"type":"text","text":"Use an image or upload your own video, customize the typography, control the reveal window, adjust the animation timing, and position the media exactly where you want it."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Portfolio and agency intros • Photography and film websites • Fashion and editorial experiences • Product launches • Fullscreen landing page heroes"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Image and video support • Smooth two-stage fullscreen reveal • Custom three-line intro text • Native Framer font controls • Responsive desktop and mobile sizing • Cover and Contain media modes • Focus X & Y controls • Adjustable reveal window size • Custom animation speed, delay, stagger, offset, and rotation • Video loop and playback speed controls • Optional scoped Scroll Stopper • Reduced Motion support • Static Canvas preview states • Optimized for multiple instances • No external scripts or runtime dependencies"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Choose Image or Video, upload your media, customize the intro text and reveal settings, then adjust the motion and behavior directly from Framer’s property panel."}]},{"type":"paragraph","content":[{"type":"text","text":"The optional Scroll Stopper blocks scrolling only inside the component while the first intro runs and releases immediately when the reveal finishes."}]},{"type":"paragraph","content":[{"type":"text","text":"Questions?","marks":[{"type":"bold"}]},{"type":"text","text":" Reach out at "},{"type":"text","text":"hasanwali6890@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hasanwali6890@gmail.com","target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales are final upon purchase as this is a non-tangible digital product. Refunds are only considered if a confirmed critical technical issue prevents the component’s core functionality from working as described and I’m unable to resolve it within a reasonable timeframe."}]},{"type":"paragraph","content":[{"type":"text","text":"Refunds are not provided for buyer’s remorse, aesthetic preferences, or custom modification requests. Any technical issue must be reported with supporting evidence within 14 days of purchase."}]}]},"introduction":"Cinematic image & video intro","slug":"haytham-preloader-32","author":{"framerUserId":"10767168-8381-4f2b-9206-2d6c344aae23","name":"Hasan Wali","slug":"hasan-wali","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/98885/avatar-WMhG6M5ak8XBca7qBEj8qK9rJSB8o7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/10767168-8381-4f2b-9206-2d6c344aae23/01a0f1e0-3f81-7387-b4b2-71eeb8ec65f5.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-30T10:33:25.796Z","updatedAt":"2026-09-30T10:33:25.796Z","publishedAt":"2026-09-30T10:33:25.793Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://relevant-minimalist-572023.framer.app","price":"10","paymentUrl":"https://contra.com/payment-link/IBkR68p7-haytham-preloader-32-cinematic-image-and-video-intro","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"eADEoQPkeLmFZoqCfIPh","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-30T10:33:26.373Z","updatedAt":"2026-09-30T10:33:26.373Z","reported":false}}],"$L5f"]

Suggested for you