Don't know where to begin? Start here.

Every example on this site is a function you call inside an animation loop. If you've never wired one up before, the gap between seeing a bouncing ball and running one in your own page can feel bigger than it is. It isn't. Below is the smallest complete file that does it — the entire thing, nothing hidden.

The whole file

Copy this into a file called index.html, save it, and double-click it. That's the entire build step. There is no bundler, no node_modules, no framework.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bouncing ball</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #111;
    }
    canvas {
      background: #1b1b2b;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <canvas id="stage" width="600" height="400"></canvas>

  <!-- the whole library, straight from the CDN — no build step -->
  <script src="https://unpkg.com/@utilspalooza/core"></script>
  <script>
    const canvas = document.getElementById('stage');
    const ctx = canvas.getContext('2d');

    // the playing field and the ball — plain objects, no classes needed
    const stage = { x: 0, y: 0, width: canvas.width, height: canvas.height };
    const ball = { x: 300, y: 60, vx: 4, vy: 0, radius: 18, color: '#7cf' };

    function frame() {
      Utilspalooza.ballBounce(ball, stage);          // ← the one library call
      ctx.clearRect(0, 0, stage.width, stage.height);
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
      ctx.fillStyle = ball.color;
      ctx.fill();
      requestAnimationFrame(frame);
    }
    frame();
  </script>
</body>
</html>

What each part is doing

  1. The canvas. One <canvas> element — the rectangle you draw into. Its width and height are the drawing resolution.
  2. The library. The <script src="https://unpkg.com/@utilspalooza/core"> line pulls in all of Utilspalooza from a CDN and hangs it on a global called Utilspalooza. That's the only dependency.
  3. The loop. requestAnimationFrame calls frame() about 60 times a second. Each frame: ballBounce nudges the ball one physics step (it edits the ball's position and velocity in place), then you clear the canvas and draw the ball at its new spot. That's the shape of every animation here.

Ready for a real project?

The CDN tag above is the zero-setup path. When you're working in a bundled project (Vite, Next, etc.), install it instead:

npm i @utilspalooza/core

…then import { ballBounce } from "@utilspalooza/core" and use the exact same loop. Browse the examples for more functions, or the API reference to see every one with its signature and a live demo.