Component · Interactive components

Bouncing balls animation for dog toys

by Informeek Studio 11 November 2026
Live Push the pile with the cursor, click to throw

The prompt

Create a bouncing balls animation for a dog toy brand, on a 2D canvas. Drop 64 rubber balls on desktop (46 on tablets, about one per 9,000 square px on phones) with radii from 27px to 58px (14px to 29px on phones) into the bottom of a warm cream page (#fff8ee to #ffe9cf). Colours cycle tangerine #ff6b35, lime #c6e842, sky #5ab8ff, pink #ff8fc7, grape #7b61ff and lemon #ffd23f, each with a rolling pattern sprite, a felt seam, a band or grip dots. Draw one shared unrotated light layer over every ball, plus floor shadows. Simulate gravity at 2000px per second squared with three substeps, floor bounce 0.42, ball collisions with restitution 0.5 weighted by area and a little rolling friction. The pointer is a heavy invisible 60px ball that shoves the pile, and a click or tap tosses every ball within 220px up and away. After 2.5s idle, a random ball gets nosed into the air every 1.6 to 3s. Copy in dark brown (#2b1d14) at top left, a label "Fetchwell dog toys" with a lime dot, a 76px heavy headline "Built to be chased, chewed and found again" with the last two words in orange, one line and two pill buttons with a solid 4px shadow. Settle the pile and draw it still for reduced motion.

Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.

Use it in three steps

  1. Copy the prompt with the button above.
  2. Paste it into your tool, such as v0, Lovable, Bolt or Claude.
  3. Make it yours by swapping the six ball colours and patterns for your own products.

About this bouncing balls animation

A bouncing balls animation is a classic first physics project, and here it does a job. The balls are dog toys, piled up at the bottom of a warm cream page under the headline, in six bright colours with three patterns: a felt seam like a tennis ball, a two tone band and a nubbly grip. Sweep the cursor through the pile and it shoves them aside like a heavy hand; click or tap and everything nearby is thrown into the air and comes clattering back down.

Each ball rolls properly because its pattern is a separate sprite that rotates with distance travelled, while the light and shadow layer on top stays still, so the shine always comes from the same place. Collisions are weighted by size, so a big ball barges small ones out of the way. When nobody is playing, a ball gets nosed into the air every couple of seconds, which keeps a phone screen lively.

Why the prompt works

  • It splits pattern from lighting, the trick that makes balls look round as they roll.
  • It gives real physics numbers, gravity, bounce and substeps.
  • It makes the pointer a solid body, so pushing feels physical.
  • It keeps the pile below the copy so the headline stays clear.

Where to use it

Pet brands, toy shops, sports equipment, sweet shops and playful product launches.

The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.

Keep exploring

More prompts like this

See the collection →