5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T775,

Ripple rings expand from centre, your logo rises, and up to 6 product images orbit in a smooth merry-go-round. Drop in, customise, publish.

Full Description

Ondula is a full-screen page loader built for brands that care about every detail including the two seconds before your page appears.

Three colour-customisable ripple rings expand outward in a staggered sequence, clearing the screen before your logo rises from below. If you upload product images, they orbit the logo in a smooth, continuous merry-go-round fading in with the logo and fading out before it flies offscreen. Then the overlay dissolves and your page is revealed.

The entire animation runs on a single requestAnimationFrame loop with direct DOM writes no React re-renders during playback, no jank, no dropped frames.

What's inside

Ripple sequence Three rings expand from the centre with a staggered offset. Each ring fades out as it grows, clearing the screen cleanly before the logo appears. Ring colours are individually controlled.

Logo reveal Your logo rises from below the centre, rests, then exits upward as the loader closes. Upload any image SVG, PNG, WebP and set exact width and height.

Orbital product showcase (optional) Upload 1 to 6 images and they distribute themselves evenly around a circle — 90° apart for 4 images, 72° for 5, 60° for 6. The orbit rotates continuously at a speed you control. No images uploaded? The loader runs cleanly with just the logo.

Canvas Preview Mode A toggle dims the loader to 12% opacity so you can keep working on your canvas without the loader covering your page. Flip it off to test the full animation in Framer Preview.

For assistance, email me.

59:[["$","$L5c",null,{"post":{"id":"019f3768-4a85-71cc-bb4b-51707ecf386b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"dc756cc3-0e70-4d81-b856-067a3159f858","name":"Jane","slug":"jane-muthoni-muchiri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1587759/avatar-ztz6FeQVn24ahnOtuJ0eSgcXcREr4C.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"RPaxSc9jmkOoz9nbM56Y","resolved":true,"title":"Ondula Loader","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Ripple rings expand from centre, your logo rises, and up to 6 product images orbit in a smooth merry-go-round. Drop in, customise, publish. "}]},{"type":"paragraph","content":[{"type":"text","text":"Full Description","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Ondula is a full-screen page loader built for brands that care about every detail including the two seconds before your page appears."}]},{"type":"paragraph","content":[{"type":"text","text":"Three colour-customisable ripple rings expand outward in a staggered sequence, clearing the screen before your logo rises from below. If you upload product images, they orbit the logo in a smooth, continuous merry-go-round fading in with the logo and fading out before it flies offscreen. Then the overlay dissolves and your page is revealed."}]},{"type":"paragraph","content":[{"type":"text","text":"The entire animation runs on a single requestAnimationFrame loop with direct DOM writes no React re-renders during playback, no jank, no dropped frames. "}]},{"type":"paragraph","content":[{"type":"text","text":"What's inside","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Ripple sequence","marks":[{"type":"bold"}]},{"type":"text","text":" Three rings expand from the centre with a staggered offset. Each ring fades out as it grows, clearing the screen cleanly before the logo appears. Ring colours are individually controlled."}]},{"type":"paragraph","content":[{"type":"text","text":"Logo reveal","marks":[{"type":"bold"}]},{"type":"text","text":" Your logo rises from below the centre, rests, then exits upward as the loader closes. Upload any image SVG, PNG, WebP and set exact width and height."}]},{"type":"paragraph","content":[{"type":"text","text":"Orbital product showcase","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"(optional)","marks":[{"type":"italic"}]},{"type":"text","text":" Upload 1 to 6 images and they distribute themselves evenly around a circle — 90° apart for 4 images, 72° for 5, 60° for 6. The orbit rotates continuously at a speed you control. No images uploaded? The loader runs cleanly with just the logo."}]},{"type":"paragraph","content":[{"type":"text","text":"Canvas Preview Mode","marks":[{"type":"bold"}]},{"type":"text","text":" A toggle dims the loader to 12% opacity so you can keep working on your canvas without the loader covering your page. Flip it off to test the full animation in Framer Preview. "}]},{"type":"paragraph","content":[{"type":"text","text":"For assistance, "},{"type":"text","text":"email me.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:jane.framer.expert@gmail.com","target":"_blank"}}]}]}]},"introduction":"A cinematic ripple loader","slug":"ondula-loader","author":{"framerUserId":"dc756cc3-0e70-4d81-b856-067a3159f858","name":"Jane","slug":"jane-muthoni-muchiri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1587759/avatar-ztz6FeQVn24ahnOtuJ0eSgcXcREr4C.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dc756cc3-0e70-4d81-b856-067a3159f858/nkecmzwd","metadata":{"tint":"hsl(187 90% 16%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-07-06T12:30:09.486Z","updatedAt":"2026-07-07T13:54:32.858Z","publishedAt":"2026-07-06T12:30:09.483Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://ondula-ripple-loader.framer.website/","price":"14","paymentUrl":"https://janemuso.lemonsqueezy.com/checkout/buy/f3c3f396-b98d-48c9-9520-c5dfa113eca3","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"8CiERzllqjB8dIr5RGcQ"}}],"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-07-06T12:30:09.541Z","updatedAt":"2026-07-06T12:30:09.541Z","reported":false}}],"$L5e"]

Suggested for you