the library behind the lessons

See the math that makes things move.

Every animation on this site comes apart into small, nameable pieces of math — a lerp, an easing curve, a vector reflection. This is that toolbox: pure functions in @utilspalooza/core, published on npm. (A companion effects package that composes these primitives into finished canvas effects is in the works.) Read it to understand the idea, then take the code.

npm i @utilspalooza/core

v0.1.0 on npm ↗MIT licensesource on GitHub ↗

The math beneath the animation

142 functions, grouped by the idea they teach — not by file. Every one is a pure, typed, tested piece of the math that makes a thing move. Pick a concept, then click any name to read its full signature, params, and a runnable example.

Numbers in motion

The scalar building blocks: turn time, input, or distance into a usable value. Almost every animation downstream is just these, repeated.

7 reference modules

Easing & tweening

Why motion feels alive instead of robotic. The curves that shape acceleration, plus tiny time-driven helpers that sample them — they move values, never your render layer.

1 reference module1 system guide

Angles & trigonometry

Where sine and cosine stop being homework and become rotation, orbits, and waves. Degrees, radians, and the unit circle, made visible.

9 reference modules

Vectors

How anything that moves knows where it is going. Add, scale, rotate, reflect, normalize — the grammar of position and velocity in 2D.

0 reference modules1 concept set

Points, lines & curves

The geometry under shapes and paths: distances, points along a line, triangle math, Bezier curves, and placing things evenly around a circle.

14 reference modules

Collision detection

The question every game asks: are these two things touching? Circles, rectangles, lines, points, and polygons, in every combination.

21 reference modules

Color

Color as math you can interpolate. Convert between RGB and HSL, blend two colors, and build palettes that actually go together.

1 reference module1 concept set

Physics & systems

Where simple rules produce complex, lifelike behavior: bouncing, orbits, flocking, gravity, lensing, and cellular automata.

7 reference modules1 system guide

Helpers

The small conveniences every demo needs and nobody wants to rewrite: random numbers, number formatting, centering on a parent.

4 reference modules

Core types

The shared shapes — Point, Circle, Line, Polygon, Vector — that the whole library speaks in.

1 reference module

More core math

Recently added to the package and not yet slotted into a concept above.

1 reference module

From primitives to finished effects

The same math, composed into drop-in canvas pieces. This is the planned follow-on package surface: each effect creates a canvas, runs its own loop, and hands back a lifecycle handle.

import { mountGlitter } from "@utilspalooza/effects";

const effect = mountGlitter("#hero", {
  density: 0.8,
  interactive: true,
  seed: 23,
});

effect.pause();
effect.resume();
effect.resize();
effect.destroy();

Glitter

mountGlitter

A field of glow dots and radial beams driven by cosine oscillators.

Pretty Ring

mountPrettyRing

Layered radial placement, wobble, additive glow, and pointer pulse.

Sparklies

mountSparklies

Small fireworks built from rotated local beam coordinates.

Klimt

mountKlimt

Tip-to-tail rectangle ribbons using local-coordinate stepping.