Examples
Every example in the repository, by topic: complete scenes ready to run
Each example covers one subject: it shows the variants the API offers for it, with the code that builds each one on screen.
Gallery
Short scenes in the brand's colors, from a logo built of primitives to Fourier epicycles, each one a classic of animation galleries made with the whole API.
LogoThe logo built from primitives: a square that turns into a circle as it moves, and a wordmark cut from ellipses and bars.
Measured segmentA segment between two points whose run, rise and length are measured live while the points move.
Vector arrowA vector on a plane whose components, angle and coordinates follow it as it sweeps around, leaving a fading trail.
Boolean shapesTwo ellipses and their union, intersection, exclusion and difference, which reshape live as one ellipse turns and slides.
Point on shapesPoints that travel along a circle, a square and a star with a trail of echoes, and an arm that turns about its end.
Moving aroundA square that slides, recolors, shrinks and turns, one call at a time and then all at once, squashing as it speeds.
Moving angleAn angle that opens and closes while its arc, its value in degrees and a fading trail follow the moving ray.
Sliding ladderA ladder whose feet slide along a wall and the floor, its midpoint tracing a quarter circle and its past positions outlining an astroid.
Group to destinationA cluster of points that travels so its gold leader lands on each target, the others trailing it on delayed followers.
Moving frame boxThe product rule written term by term, with a frame and a band that glide from one term to the next.
Point with traceA pen on the end of two turning arms that traces a rose, the second arm turning four times faster the other way.
Sine cosine plotThe sine and the cosine over two turns, with a scanning line that reads both curves until it stops at two pi.
Gradient descentGradient descent from two starts on the same curve: one ball settles in a shallow valley, the other finds the deepest one.
Riemann areaRiemann sums that refine from four rectangles to sixty-four under a curve, their total closing in on the area.
Hyperbola rectangleA rectangle from the origin to a point that slides along the hyperbola y = 6/x, changing shape while its area stays six.
Heating curveThe heating curve of water, traced as a thermometer fills, through melting and boiling.
Following cameraA camera that zooms in on a point riding a sine wave, follows it along two turns and pulls back out.
Zoomed insetA Koch snowflake explored through a round magnifier that follows a point along its edge and zooms deeper.
Surface plotA Gaussian hill on 3D axes that the camera circles while the hill narrows into a peak and spreads back out.
Light sourceA gold point light that sweeps over three solids like a sun, lighting each from the side it passes.
Camera orbitLit solids on 3D axes seen by a camera that circles them, tilts up and down, and keeps a readout fixed on the screen.
Warped gridA sentence and an equation that write themselves and transform, then a grid bent by a nonlinear function.
Fourier epicyclesFive turning circles stacked on each other, the odd harmonics of a square wave, whose tip draws the wave as they spin.Showcase
Complete pieces that combine many topics, each with its own look.
DashboardAn analytics dashboard built only from boxes, revealed piece by piece and updated live.
Lower thirdA broadcast lower third, a live badge and a news ticker over drifting footage.
Mobile appA phone chat app built from boxes: a clipped device, bubbles that wrap and a composer that types.
Quiz nightA live trivia played in teams: a room the audience smashes into, polls and quizzes from Markdown, reveals with confetti, a tug of war, a score race and a podium.Foundations
4 examplesBasicsScenes, objects, play and wait, groups and segments: the first things to learn.
7 examplesShapesGeometry primitives, curves, arrows, strokes, boolean operations and clipping.
7 examplesStyleColors, gradients, blend modes, themes and backgrounds.
10 examplesTextTypography, code blocks, Typst layouts and animated text.
8 examplesMathEquations, step-by-step derivations, annotations and matrices.
10 examplesLayoutBoxes, rows, grids, zones and animated reflow.Motion
9 examplesAnimationEasing, keyframes, timing, motion paths and procedural motion.
4 examplesTransformsMorphing one object into another, matching parts and pivots.
3 examplesEmphasisDrawing attention: indications, highlights and hand-drawn notes.
5 examplesTransitionsTransitions between segments and content reused across them.
7 examplesCameraPan, zoom and rotation, camera paths, insets and parallax.
