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

About this Component

Smoke Preloader creates a cinematic fullscreen loading experience with a smooth 0–100 counter followed by a WebGL smoke reveal.

The animation stays responsive across desktop, tablet, and mobile, with dedicated mobile cropping so the smoke keeps its intended proportions instead of stretching on narrow screens.

Perfect For

• Creative portfolios • Agency and studio sites • Product launches • Editorial websites • Premium landing pages

Key Features

• Smooth 0–100 animated counter • WebGL smoke reveal powered by Three.js • Upload your own smoke sprite sheet • Responsive mobile smoke cropping • Adjustable mobile breakpoint and desktop ratio • Optional scoped scroll lock during the intro • Custom cover and counter colors • Full Framer font controls • Counter X/Y positioning • Adjustable counter, fade, hold, delay, and reveal timing • Custom sprite columns and rows • Adjustable render scale • Static-renderer safe • WebGL fallback and cleanup

How It Works

Place the component inside a fullscreen frame or overlay, upload your smoke sprite sheet, match the Columns and Rows values, then customize the timing, typography, colors, and responsive settings directly in Framer. Once the animation finishes, the component releases scrolling automatically and can hide itself to reveal the page underneath.

Questions?

Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.

5a:[["$","$L5d",null,{"post":{"id":"01a0ae79-4c9e-74e9-9ba4-01fdd8b59201","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":"PxWsczyu5uitHlhUr000","resolved":true,"title":"Haytham Preloader 29","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Smoke Preloader creates a cinematic fullscreen loading experience with a smooth 0–100 counter followed by a WebGL smoke reveal."}]},{"type":"paragraph","content":[{"type":"text","text":"The animation stays responsive across desktop, tablet, and mobile, with dedicated mobile cropping so the smoke keeps its intended proportions instead of stretching on narrow screens."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Creative portfolios • Agency and studio sites • Product launches • Editorial websites • Premium landing pages"}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Smooth 0–100 animated counter • WebGL smoke reveal powered by Three.js • Upload your own smoke sprite sheet • Responsive mobile smoke cropping • Adjustable mobile breakpoint and desktop ratio • Optional scoped scroll lock during the intro • Custom cover and counter colors • Full Framer font controls • Counter X/Y positioning • Adjustable counter, fade, hold, delay, and reveal timing • Custom sprite columns and rows • Adjustable render scale • Static-renderer safe • WebGL fallback and cleanup"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Place the component inside a fullscreen frame or overlay, upload your smoke sprite sheet, match the Columns and Rows values, then customize the timing, typography, colors, and responsive settings directly in Framer. Once the animation finishes, the component releases scrolling automatically and can hide itself to reveal the page underneath."}]},{"type":"customHeading","content":[{"type":"text","text":"Questions?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"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. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase."}]}]},"introduction":"Cinematic WebGL smoke reveal","slug":"haytham-preloader-29","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/01a0ae79-2177-75bf-8d84-3b8f21e8adee.png","metadata":{"tint":{"h":60,"s":25,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-17T08:26:19.506Z","updatedAt":"2026-09-17T08:26:19.506Z","publishedAt":"2026-09-17T08:26:19.503Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sensational-difference-503833.framer.app","price":"10","paymentUrl":"https://contra.com/payment-link/DVdKXxEH-haytham-preloader-29","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"RDlnGrL9KL08fnNwVj1B","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-17T08:26:20.190Z","updatedAt":"2026-09-17T08:26:20.190Z","reported":false}}],"$L5f"]

Suggested for you