How do I add a water loading animation to Framer or Webflow?

Every loader ships as a copy-paste embed. In Framer: Insert, then Embed, then paste. In Webflow: Add, then Embed, same block. The drop includes a vanilla HTML and CSS flavour too, so the same water animation works on any site with no plugin and no build step.

What format are these? Lottie, GIF, or code?

Code. Each water loader is a few kilobytes of self-contained HTML, CSS and canvas JavaScript, not a Lottie JSON, GIF or MP4. That means no player library to load, no pixelation at large sizes, and a file so small it never slows the page it is meant to be loading.

Are the loops seamless?

Yes. The sea in every loader is a continuous wave train, a smooth flowing surface with no fixed restart point. Leave one running for an hour and you will not catch a seam.

Can I match the animation to my brand colours?

Yes. Every loader draws in a single accent colour that you can set to any hex on this page before you copy, and the default follows your page's text colour, so the water sits naturally on light or dark themes.

What licence do I get for $29?

A perpetual commercial licence for the whole drop: all twelve water loading animations, usable in client work and your own projects, with no per-site fees, no subscription and nothing that expires.

DROP 25 / WATER / 12 LOADERS

Water.

Twelve seas, one motif: a living surface drawn as stacked flowing lines that travel, breathe, cross and stand, each a seamless flow.

A water loading animation should move like water: not a shape sliding across the screen, but a surface that never stops reshaping. Every loader in this drop draws the sea as a stack of flowing lines, a swell that travels, breathes, crosses and stands, in one accent colour. Each one is a few kilobytes of hand-drawn canvas code rather than a video, GIF or Lottie file: crisp at any size, seamless in its flow, and pasted into Framer, Webflow or any HTML page in under a minute.

Buy Water$29

INCLUDES 12 LOADERS / HTML + CSS + CANVAS / FRAMER + WEBFLOW EMBED / COMMERCIAL LICENSE

DROP 25 / WATER / CONCEPT INDEX

DROP 25 / WATER / SPECIMEN GRID

Side by side.

Every loader across light and dark. Pick an accent and watch it flow through all of them at once — the picker writes a single CSS variable each canvas reads live. The same mechanic ships in the buyer zip.

ACCENT

#

BG

01 / Calm set

02 / Breathing stack

03 / Traveling set

04 / Crossing seas

05 / Depth fade

06 / The weave

07 / Chop over swell

08 / Current shear

09 / Tight grain

10 / Loose trio

11 / The set

12 / Standing sea

Drop 25 / Water / questions

Asked often, answered plainly.

How do I add a water loading animation to Framer or Webflow?: Every loader ships as a copy-paste embed. In Framer: Insert, then Embed, then paste. In Webflow: Add, then Embed, same block. The drop includes a vanilla HTML and CSS flavour too, so the same water animation works on any site with no plugin and no build step.
What format are these? Lottie, GIF, or code?: Code. Each water loader is a few kilobytes of self-contained HTML, CSS and canvas JavaScript, not a Lottie JSON, GIF or MP4. That means no player library to load, no pixelation at large sizes, and a file so small it never slows the page it is meant to be loading.
Are the loops seamless?: Yes. The sea in every loader is a continuous wave train, a smooth flowing surface with no fixed restart point. Leave one running for an hour and you will not catch a seam.
Can I match the animation to my brand colours?: Yes. Every loader draws in a single accent colour that you can set to any hex on this page before you copy, and the default follows your page's text colour, so the water sits naturally on light or dark themes.
What licence do I get for $29?: A perpetual commercial licence for the whole drop: all twelve water loading animations, usable in client work and your own projects, with no per-site fees, no subscription and nothing that expires.