Numbers in motion The scalar building blocks: turn time, input, or distance into a usable value. Almost every animation downstream is just these, repeated.
8 functions
clampThis one helps answer: how do I stop this value from ever leaving its allowed range? inverseLerpThis one helps answer: how far between a and b is this value, as a 0-to-1 fraction? lerpThis one helps answer: what number sits 30% of the way from a to b? mapRangeThis one helps answer: if the input runs 0–100, what's the matching value on 0–360? pingPongThis one helps answer: how does ever-growing time become back-and-forth motion? smootherstepSame question as smoothstep, answered with an even silkier start and finish. smoothstepThis one helps answer: how do I fade between two edges without a snap at either end? wrapThis one helps answer: how does a runaway value loop back around, like a clock hand?
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.
35 functions
criticalDampingThis one helps answer: how much damping lands a spring on target with zero overshoot? delayThis one helps answer: how does an animation wait its turn before starting? EasingFunctionThis is a shared data shape used by other helpers. loopThis one helps answer: how does a finished animation start over, forever? SpringOptionsThis is a shared data shape used by other helpers. SpringStateThis is a shared data shape used by other helpers. springValueUse this when you want motion that feels bouncy instead of robotic. staggerThis one helps answer: how do list items animate one after another, not all at once? tickerUse this when you want the library to call you every frame so you can update and draw. TickerFrameThis is a shared data shape used by other helpers. TickerHandleThis is a shared data shape used by other helpers. tweenFrameThis one helps answer: what should every animated property be at this exact moment? tweenObjectUse this when several things should move together, like x, y, scale, and opacity. TweenObjectSpecThis is a shared data shape used by other helpers. tweenValueUse this when one number should glide from one value to another. TweenValueOptionsThis is a shared data shape used by other helpers. yoyoThis one helps answer: how does progress climb 0 to 1, then glide back down to 0? easeInStarts slow and accelerates — the gentle quadratic take-off. easeInCubicA deeper slow start than quadratic — the cubic take-off. easeInOutSlow start, quick middle, soft landing — the quadratic S-curve. easeInOutCubicA punchier S-curve than quadratic: gentler ends, a quicker middle. easeInOutQuadThe same S-curve as easeInOut, kept so older code using this name still works. easeInOutQuartA stronger S-curve: long calm ends with a dash through the middle. easeInOutQuintThe family's steepest S-curve — it creeps, sprints, then creeps again. easeInQuadThe same quadratic take-off as easeIn, kept so older code using this name still works. easeInQuartAn even more patient start — quartic barely moves, then rushes the finish. easeInQuintThe most extreme slow start in the family — quintic creeps, then rockets. easeOutStarts fast and glides to a stop — the quadratic soft landing. easeOutBounceLands like a dropped ball — hits the end and bounces before settling. easeOutCubicFaster out of the gate, softer landing than quadratic — the cubic ease-out. easeOutElasticOvershoots the target and twangs back, like letting go of a rubber band. easeOutQuadThe same quadratic landing as easeOut, kept so older code using this name still works. easeOutQuartA hard launch and a long, feathered landing — the quartic ease-out. easeOutQuintThe most extreme soft landing in the family — quintic bolts, then feathers in. linearThe baseline: constant speed, no easing — the straight line every other curve bends.
Angles & trigonometry Where sine and cosine stop being homework and become rotation, orbits, and waves. Degrees, radians, and the unit circle, made visible.
11 functions
lerpAngleUse this when something rotates toward a target heading and must take the short turn across the 0°/360° seam instead of whipping almost a full circle. shortestAngleBetweenUse this when you need the signed shortest turn from one heading to another, like steering an enemy or pointing a turret. wrapAngleUse this when rotations keep accumulating and you want equivalent angles like 370° and 10° treated as the same direction. degToRadUse this when you think in degrees, but `Math.sin` and `Math.cos` need radians. dftThis one helps answer: what recipe of spinning circles retraces this shape? getRotationThis one helps answer: what angle points me from here toward there? radToDegUse this when the math gives you radians, but you want to show degrees to a human. sineCurveUse this when something should bob up and down over and over, like floating or breathing. sineWaveUse this when lots of points should make a wavy line, like water, a rope, or a flag. unitCirclePointUse this when you want something to go around a circle or understand where sine and cosine come from. waveAmplitudeUse this when several waves are all pushing on the same point at once.
Vectors How anything that moves knows where it is going. Add, scale, rotate, reflect, normalize — the grammar of position and velocity in 2D.
15 functions
vecAddThis one helps answer: where do I end up after taking both of these steps? vecAngleThis one helps answer: which way is this vector pointing, as an angle? vecAngleBetweenUse this when you need the size of the turn from one direction to another, like measuring how far off-target an aim or heading is. vecCrossThis one helps answer: does that vector sit to my left or to my right? vecDotUse this when you want to know whether two things are pointing mostly the same way. vecLerpThis one helps answer: what point sits 30% of the way between these two positions? vecLimitThis one helps answer: how do I cap a speed without bending its direction? vecMagnitudeThis one helps answer: how long is this vector — how big a step is it? vecMagnitudeSquaredThe fast cousin of vecMagnitude: compare lengths without paying for a square root. vecNormalizeUse this when you care about direction, but you want every step to have the same size. vecPerpendicularThis one helps answer: which direction is exactly 90° from this one? vecReflectUse this when an incoming velocity or direction hits a surface and you need the clean bounced direction back. vecRotateThis one helps answer: where does this vector point after turning by that angle? vecScaleThis one helps answer: what is this step at double, half, or reverse strength? vecSubtractThis one helps answer: what single step carries me from that point to this one?
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.
16 functions
bezierPointThis one helps answer: where is the point at t on a curve bent by two control points? circleFromThreePointsThis one helps answer: which circle passes exactly through these three points? deCasteljauThis one helps answer: where does a Bézier of any degree land at t — scaffolding included. distanceThis one helps answer: how far apart are these two points, as the crow flies? distributeAroundCircleThis one helps answer: how do N things space out evenly around a circle, clock-face style? equilateralTriangleThis one helps answer: where do a perfect triangle's three corners land on this circle? findPointAroundCircleThis one helps answer: where is the point 25% of the way around this circle? getPointOnLineThis one helps answer: what point sits 30% of the way along this line? getTriangleDataThis one helps answer: what right triangle hides between these two points? triangleDataFromLineThis one helps answer: what are all the sides and angles of the triangle under this line? lineLengthThis one helps answer: how long is this line segment? moveAlongLineThis one helps answer: what point is this fraction of the trip from here to there? moveTowardThis one helps answer: where is my object next frame, moving at fixed speed to its goal? quadraticBezierThis one helps answer: where is the point at t on a curve bent by one control point? createRectThis one helps answer: where are this rectangle's four corners, even mid-spin? starVerticesThis one helps answer: where do a star's spikes and notches go, point by point?
Collision detection The question every game asks: are these two things touching? Circles, rectangles, lines, points, and polygons, in every combination.
21 functions
circleToCircleThis one helps answer: are these circles touching yet? circleToRectThis one helps answer: is this circle touching the rectangle yet? circleCircleThis one helps answer: are these circles touching yet? lineCircleThis one helps answer: is this line touching the circle yet? lineLineThis one helps answer: exactly where do these two lines cross? linePointThis one helps answer: is this point on the line yet? pointCircleThis one helps answer: is this point inside the circle yet? polygonCircleThis one helps answer: is this circle touching the polygon yet? polygonLineThis one helps answer: is this line crossing the polygon yet? polygonPointThis one helps answer: is this point inside the polygon yet? polygonPolygonThis one helps answer: are these polygons overlapping yet? lineToCircleThis one helps answer: is this line touching the circle yet? lineToLineThis one helps answer: are these lines crossing yet? lineToPointThis one helps answer: is this point on the line yet? lineToRectThis one helps answer: is this line crossing the rectangle yet? pointToCircleThis one helps answer: is this point inside the circle yet? pointToPolygonThis one helps answer: is this point inside the polygon yet? pointToRectThis one helps answer: is this point inside the rectangle yet? polygonToPolygonThis one helps answer: are these polygons overlapping yet? rectToPolygonThis one helps answer: is this rectangle overlapping the polygon yet? rectToRectThis one helps answer: are these rectangles overlapping yet?
Color Color as math you can interpolate. Convert between RGB and HSL, blend two colors, and build palettes that actually go together.
11 functions
colorFamilyUse this when you want a little group of colors that feel like they belong together. HSLThis is a shared data shape used by other helpers. hslToRgbThis one helps answer: which RGB values match this hue, saturation, and lightness? HUE_FAMILIESThis is a ready-made exported value. HueFamilyThis is a shared data shape used by other helpers. lerpColorUse this when one color should fade into another. lerpColorHslUse this when you want a color fade that usually looks nicer in the middle. RGBThis is a shared data shape used by other helpers. rgbToCssThis one helps answer: how do I hand this RGB color to the canvas as a CSS string? rgbToHslThis one helps answer: what hue, saturation, and lightness is this RGB color, really? getRandomColorsThis one helps answer: can I have a nice random color — maybe something in the blues?
Physics & systems Where simple rules produce complex, lifelike behavior: bouncing, orbits, flocking, gravity, lensing, and cellular automata.
13 functions
ballBounceThis one helps answer: how does a ball fall, hit the floor, and bounce believably? ballToBallBounceThis one helps answer: what happens when two moving balls smack into each other? BoidThis is a shared data shape used by other helpers. BoidsOptionsThis is a shared data shape used by other helpers. boidsStepUse this when you already have the boids and just want to advance them by one frame. DEFAULT_BOIDS_OPTIONSThis is a ready-made exported value. FlockUse this when you want a whole flock of little movers that steer together. FlockBoundsThis is a shared data shape used by other helpers. gameOfLifeStepThis one helps answer: in this grid of cells, who lives and who dies next tick? grStepThis one helps answer: what does an orbit do when Einstein corrects Newton? lensDeflectionThis one helps answer: how much does a heavy mass bend a passing ray of light? gravitationalStepThis one helps answer: where does gravity pull this orbiting body next frame? sphereLightingThis one helps answer: where does the shiny highlight sit on this lit ball?
Helpers The small conveniences every demo needs and nobody wants to rewrite: random numbers, number formatting, centering on a parent.
4 functions
centerOnParentThis one helps answer: what x,y puts this box dead-center inside that one? numberWithCommasThis one helps answer: how do I show 1234567 as 1,234,567? randomIntegerBetweenThis one helps answer: roll me a whole number from min to max, ends included. randomNumberBetweenThis one helps answer: give me any number from min up to — but never touching — max.
Core types The shared shapes — Point, Circle, Line, Polygon, Vector — that the whole library speaks in.
8 functions
BallThis is a shared data shape used by other helpers. CircleThis is a shared data shape used by other helpers. ContainerThis is a shared data shape used by other helpers. LineThis is a shared data shape used by other helpers. PointThis is a shared data shape used by other helpers. PolygonThis is a shared data shape used by other helpers. ShapeInMotionThis is a shared data shape used by other helpers. VectorThis is a shared data shape used by other helpers.