Dot Waves

Give your sections something alive to sit on.

Dot Waves is a moving background made of tiny marks that swell and shrink as a soft wave rolls underneath them. It looks like light moving across a surface, and it runs on pure WebGL. There are no images or videos to load, so it stays light and sharp at any size.

Move your cursor over it and ripples spread out from the pointer. Click and you get a bigger one. Drop it behind a hero, a pricing block or a footer, and it quietly makes the page feel finished.

What you can customize

Everything lives in the Properties panel.

• Shape: Dot, Square or Plus

• Wave style: Flow, Swell or Ripple

• Colors: Mark color and background color (works with your Framer color styles)

• Grid: Spacing, mark size, depth and contrast

• Motion: Speed (including reverse), direction, scale, pause, and an intro reveal

• Fade: None, Edges, Center, Top or Bottom, with adjustable size

• Cursor: Ripple on or off, ripple size, ripple power

• Opacity for the whole effect

Good for

Hero sections, landing pages, SaaS and AI sites, portfolios, product launches, footers, cards and anywhere a flat color feels boring.

Built with care

• Fills any frame you give it, at any size

• Stays still on the Framer canvas and in exports, so editing stays fast

• Pauses when it’s off screen to save battery

• Respects “reduce motion” system settings

• Falls back to your background color if a device can’t run WebGL

• Single file, no external libraries

How to use it

Buy it, paste the link on your canvas, set your colors, done. Takes about a minute.

Thanks for supporting my work. If you build something nice with it, I’d love to see it. ✌️

Questions, tweaks or custom requests: sohailansari895@gmail.com or @sohaildesigns_ on X