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

About this Component

3D Cloud Loader turns a clean counter intro into an interactive 3D media cloud. The sequence begins with a spinning ring of images and custom text, counts from 000 to 100, then collapses and expands into a draggable, pointer-reactive cloud.

Perfect For

Portfolios, creative studios, product showcases, case studies, landing pages, and experimental hero sections.

Key Features

• Add up to 30 images • Custom left, center, and right text • Optional text scramble effect • Adjustable loader duration, ring count, and spin • Interactive 3D cloud with auto-spin, pointer lean, and drag momentum • Cloud size, media fit, card radius, colors, and typography controls • Optional replay loop and delay • Responsive sizing across breakpoints • Reduced-motion support and static Framer canvas rendering • Offscreen animation pausing for better performance

How It Works

Drop the component into any frame, replace the media, customize the text and styling, then tune the loader and 3D cloud controls directly from Framer's Properties panel. No code editing required.

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":"01a0d25a-5823-711f-a33a-b9f0659ad06c","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":"Ajqc1jgXnaYkrfUyRqVT","resolved":true,"title":"Haytham Preloader 30","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"3D Cloud Loader turns a clean counter intro into an interactive 3D media cloud. The sequence begins with a spinning ring of images and custom text, counts from 000 to 100, then collapses and expands into a draggable, pointer-reactive cloud."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Portfolios, creative studios, product showcases, case studies, landing pages, and experimental hero sections."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Add up to 30 images • Custom left, center, and right text • Optional text scramble effect • Adjustable loader duration, ring count, and spin • Interactive 3D cloud with auto-spin, pointer lean, and drag momentum • Cloud size, media fit, card radius, colors, and typography controls • Optional replay loop and delay • Responsive sizing across breakpoints • Reduced-motion support and static Framer canvas rendering • Offscreen animation pausing for better performance"}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Drop the component into any frame, replace the media, customize the text and styling, then tune the loader and 3D cloud controls directly from Framer's Properties panel. No code editing required."}]},{"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":"Interactive 3D media loader","slug":"haytham-preloader-30","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/01a0d25a-3d64-74ef-b261-97e9b17bb7b0.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-24T07:38:50.745Z","updatedAt":"2026-09-24T07:38:50.745Z","publishedAt":"2026-09-24T07:38:50.742Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://fresh-rectangle-541783.framer.app","price":"12","paymentUrl":"https://contra.com/payment-link/YogTgGRh-haytham-preloader-30-interactive-3-d-media-loader","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"UfNTKgCMON22CqC8UEQR","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-24T07:38:51.299Z","updatedAt":"2026-09-24T07:38:51.299Z","reported":false}}],"$L5f"]

Suggested for you