FREE · WORKS LIKE VANTA.JS · ZERO DEPENDENCIES

Awesome Backgrounds

Upload your own images, or pick emoji, Font Awesome and Lucide icons, and watch them bounce around a box like the old DVD-logo screensaver. Mix and match as many as you want. When it looks right, copy one script tag and paste it onto any page you control — nothing here ever touches a server, and the page that ends up using it needs nothing else installed.

Live Preview

Add a layer to see it bounce here.
0 sprites bouncing.
1×

Get The Code

Add at least one layer to generate your embed code.

Layers

No layers yet. Add an image, an emoji, or an icon to get started.

How To: What This Generates, And How To Use It

What the code actually is

Once you've added at least one layer above, "Get The Code" prints a snippet with three pieces. You paste the whole thing, as-is, onto your own page -- nothing here needs a build step, a package install, or a framework.

1
A <div> -- the box the animation lives in

This is just an empty container with an id, e.g. <div id="my-awesome-background"></div>. Its size on the page (width and height, from your own CSS) is the size of the bouncing area -- make it as big as you want the effect to cover: a header, a full section, or the whole page. Any real content you put inside that div (text, a headline, a button) should get position: relative so it stays visually on top of the animation instead of underneath it.

2
A <script src> tag -- the engine, loaded once

This pulls in the small, dependency-free script that actually knows how to move sprites around and bounce them off the edges of a box. It's the same file this page itself uses. You only need this tag once per page, no matter how many backgrounds you add to that page.

3
An AwesomeBackgrounds.init(...) call -- your specific layers and speed

This is the part that's actually yours: it points at the div by its id and hands over the exact images/emoji/icons and sizes/speed you configured above, already baked into plain image data -- so the page loading this never has to fetch Font Awesome, Lucide, or any font or icon library at all.

How to add it to your website

  • Plain HTML file: open the page's HTML in any editor, paste the div wherever you want the effect to start, and paste both script tags right before the closing </body> tag. Save, upload, done.
  • Site builder (Squarespace, Wix, WordPress, Webflow, etc.): look for a block called "Custom HTML," "Embed," or "Code" and paste the whole snippet into it -- most builders that let you add custom code will run the scripts inside automatically.
  • An existing site you or a developer maintain: the div can go inside any existing container; just make sure that container (or the div itself) has a real height, either set directly (like the example's min-height: 300px) or inherited from its parent -- an animation inside a div with no height has nowhere to bounce.

If it doesn't show up

  • Check the div actually has height -- a zero-height box hides the whole animation even though it's running correctly.
  • Check both <script> tags loaded -- open your browser's developer console (F12) and look for a red error mentioning awesome-backgrounds.js or AwesomeBackgrounds.
  • Make sure AwesomeBackgrounds.init(...) runs after the div exists on the page -- pasting it right before </body>, as shown, already guarantees this.
  • If your foreground text or buttons seem to sit behind the animation, add position: relative to that content (not the outer div) so normal stacking order puts it back on top.