Canvas Animation Examples: 7 Films Drawn Frame by Frame in JavaScript, With the Prompts and What We Measured

How does ChatGPT actually pick the next word? A 25-second vertical explainer for TikTok, no jargon.

IDEA: A weighted prize wheel. Read the sentence so far, give every possible next word odds, spin a wheel sliced by those odds, add the winner, repeat. One example sentence builds through the film.

0–3.5s: dark chat-style screen. Headline "How does an AI chatbot actually pick" with "the next word?" popping in amber. User bubble: "Name a classic sandwich". In the answer box, words type with a blinking cursor: "Peanut", "butter", "and".
3.5–7s: four step pills slide in on top: "1 READ" (active, amber), "2 ODDS", "3 SPIN", "4 ADD". Headline: "First, it reads everything so far". Caption: "your question + everything written so far". The words light up one by one in soft blue-violet; a dashed amber box with a blinking "?" pops in after "and".
7–10.5s: "2 ODDS" active. Headline: "Every possible next word gets odds". Bars grow one after another with counting numbers: jelly 62%, jam 17%, bread 8%, banana 6%, honey 4%. Note: "+ thousands more, each with tiny odds (made-up example numbers)".
10.5–16s: "3 SPIN" active. Headline: "Then it spins. Bigger slice, better chance." The bars curl into a wheel with slices sized to their odds, amber pointer at 12 o'clock. It spins fast and slows. Footnote: "Usually a big slice wins. Not always: that's why answers can vary." It stops on "jelly".
16–21s: "4 ADD" active. Headline: "It adds the winner... then does it all again." The slice flashes gold, "jelly!" pops, and "jelly" drops into the answer in gold. A smaller wheel then spins in quick loops adding "is", "a", "classic", "." until it reads "Peanut butter and jelly is a classic."
21–25s: headline "Every word goes round this loop", then "One word at a time." Below the sentence, a dotted ring draws with nodes READ, ODDS, SPIN, ADD around "for every word"; an amber dot circles clockwise, each node popping as it passes. Hold.

LOOK: navy-charcoal #12151D with fine grain. Amber #FFB72B is the only highlight. Wheel slices periwinkle #8799C7, steel blue #515D7A, slate #2C3345. Panels #1D2332 with thin #2D364D borders; white text, secondary #9AA5B5. Bold geometric sans. No logos.

MOTION: measured for three steps, a clear speed-up in the repeat loops, then a calm steady orbit. Elements morph in place instead of cutting; springy pop-ins, physical ease-out on the wheel.

SOUND: light lo-fi electronic groove with warm synth arps. Typewriter clicks, a blip on each step change, a rising arpeggio as bars fill, a whoosh on the morph, ratchet clicks slowing with the wheel, a ding on each winner, quick pops in the loops, a ping at each node. No narration.

How does your phone know where you are? A 25-second GPS explainer for my science Instagram, playful but accurate.

IDEA: A cute pink phone character on a cartoon Earth. Satellites send it timestamps; time becomes distance, distance becomes circles, and where they cross is the phone.

0–4s: cream paper background. The phone (white screen face, stick limbs) stands on a navy-and-teal globe. Top-left text types on: "How does your phone" then, in magenta, "know where you are?". A red question mark springs up above it.
4–8.5s: the globe shrinks to centre; a dashed orbit draws and six satellites pop on, each sending soft ping rings. A ruler marks "20,200 km". Text: "About 30 GPS satellites, 20,200 km up. Each keeps broadcasting where it is + the time from its atomic clock."
8.5–12.5s: text: "Your phone just listens. The signal flies at the speed of light..." A glowing red packet travels to the phone while a slow-mo timer rolls 0.000 s to 0.070 s. Text: "It arrived 0.07 s late. 0.07 s × 300,000 km/s = 21,000 km away." A yellow badge "21,000 km" pops on the beam.
12.5–18.5s: zoom out; satellites labelled A, B, C. "1 satellite: you're somewhere on this circle." A magenta range circle grows through the phone. "2 satellites: one of two spots." Second circle; two crossings, one marked "?". "3 satellites: found you." Third circle; all meet at the phone.
18.5–22s: close on the phone. Status bar: "phone clock: off by 0.000001 s"; a yellow wedge of uncertainty spreads and the phone looks worried. Text: "Catch: your phone's clock isn't atomic. Off by a millionth of a second = 300 m wrong." Then: "So a 4th satellite joins in and the phone solves for its own clock error." Four beams converge, the wedge shrinks, the bar flips yellow: "phone clock: corrected". The phone smiles.
22–25s: wide; a yellow map pin on the phone, satellites pulsing dots down their sightlines on the beat. Text: "Time becomes distance. Distance becomes a dot on your map." Hold.

LOOK: cream paper #F5EFEB, light grain, tiny scattered crosshairs. Navy #131E3D oceans and type, teal #2B5B7D continents with halftone edge, magenta #E64980 phone, signals and circles, yellow #F5BF38 labels, badges, pin. Flat vector, thin strokes, bold geometric sans with key words tinted. 

MOTION: quick 0.3–0.5s changes, then 1.5–2s rests to read. Smooth zooms instead of cuts; elastic overshoot on character and badges.

SOUND: mid-tempo lo-fi beat with warm electric piano and soft snare. Typewriter clicks for text, pops for satellites and badges, a hum and fast counter ticks during the signal flight, a ding on arrival, rising tones per circle, a buzz on the clock error, a happy chime on "corrected". No narration.

What happens in the half second after you type a website address and press Enter? A 30-second explainer for our developer newsletter.

IDEA: A browser left, a server right, one wire between. Each stage is acted out as labelled packets on the wire, while a bottom bar, "the half second, slowed down", runs from "Enter" to "page painted".

0–3.8s: empty browser centred. Headline: "What happens in the half second after you press Enter?" A rounded "enter" key appears; "shop.example" types into the address bar.
3.8–5s: the key lights amber; the browser slides left and the progress bar starts.
5–10s: top-left: "1 DNS: find the address" / "The resolver asks root, then .example, then the domain's own name server." Packet "where is shop.example?" runs to "DNS resolver", pings bounce to "root", ".example", "ns.shop.example", and "203.0.113.42" returns to the address bar.
10–14.5s: "2 TCP: open a connection" / "Three messages: SYN, SYN-ACK, ACK." The tree collapses into a server rack "shop.example / 203.0.113.42". SYN, SYN-ACK, ACK slide back and forth; the wire turns solid: "connection open".
14.5–19s: "3 TLS: make it private" / "The server proves who it is; both sides agree on keys." "hello" goes out, "certificate + key" comes back. A card: "CERTIFICATE / shop.example / signed by a trusted certificate authority" gets a green "checked". A padlock snaps shut mid-wire; the wire turns mint.
19–22.7s: "4 HTTP: ask for the page" / "GET / comes back as 200 OK and the HTML." "GET /" glides over; "200 OK" returns, then tag pills "<html>", "<body>", "<h1>" stream into the browser.
22.7–27.6s: "5 Render: text into pixels" / "Parse the HTML, lay out the boxes, paint." Push in on the browser. HTML becomes a DOM tree, then dashed layout boxes. A vertical wipe paints a finished coffee-shop page in cream, brown and orange; the tab reads "Fresh coffee".
27.6–30s: "All of that, in about half a second." The bottom bar becomes five badges DNS → TCP → TLS → HTTP → Render, snapping in one by one. Hold.

LOOK: warm near-black #121318 with fine grain, UI chrome #1A1B24. Amber #F59E0B for packets, key and marker; mint #34D399 for security and success; page in cream #F6F1E9, brown #201E1D, mustard #EAB308. Geometric sans for titles, monospace for URLs, IPs and tags. Pill packets, rounded cards, dashed paths.

MOTION: the marker moves steadily throughout. Packets ease in, shoot across, settle. Old stages slide aside as new ones arrive; no cuts.

SOUND: mellow lo-fi bed with Rhodes chords. Key clacks, a switch click on Enter, pings for DNS hops, ticks for the handshake, a latch click as the lock closes, blips per streamed tag, a shimmer as the page paints, five rising bell notes for the badges. No narration.

A 30-second history of modern AI, from the 2017 paper 'Attention Is All You Need' to today's AI agents that write code. For a tech YouTube channel.

IDEA: A timeline along the bottom with an orange marker moving right. Each milestone is a small working demo of what it made possible; at the end the camera pulls back to show them all in a row.

0–5s: top-left "2017" / "Attention Is All You Need". A cream paper's title types out; its five words lift into tiles and orange arcs leap between them. Caption: "The Transformer: every word looks at every other word."
5–8.8s: "2018" / "Pre-training". Text scrolls upward on the left ("books, articles, the web... forums, code"); a six-block model stack lights up layer by layer on the right: "GPT · OpenAI · 2018" and "BERT · Google · 2018". Caption: "GPT and BERT learn language by reading mountains of text."
8.8–12.5s: "2020" / "Scale". A tiny square "GPT-1 · 2018 / 117M", a larger "GPT-2 · 2019 / 1.5B", then a huge orange block "GPT-3 · 2020 / 175B parameters". Caption: "GPT-3: 175 billion parameters, ~1,500x GPT-1 (to scale)."
12.5–16.3s: "2022" / "ChatGPT". "Explain attention like I'm five." types into a chat; the reply streams: "Every word looks at the other words in the sentence to work out what it means." Caption: "ChatGPT: now anyone can just talk to it."
16.3–20.2s: "2024" / "Reasoning". Prompt: How many r's in "strawberry"? Tiles s t r a w b e r r y; a box steps across, each r flashes orange, a counter goes 1, 2, 3, then "Answer: 3 ✓". Caption: "Reasoning models work it out step by step, then answer."
20.2–26.7s: "2025" turning to "Today" / "Coding agents". Terminal in ~/my-app: "> add a dark-mode toggle to the settings page", "Reading 12 files", green diff lines, "Running tests", "✓ 24 passed, 0 failed". Caption: "Coding agents read the code, change it, and run the tests."
26.7–30s: pull back to all six milestones side by side above the timeline. Centred: "2017: one paper about attention." / "Today: AI that writes the code." Hold.

LOOK: near-black #121316 with fine grain. Paper cream #EFEAD8, orange #FF5E36, terminal green #3DD68C, text #DCDAD5, panels #1C1E24 with thin borders. Years and titles in a high-contrast serif; captions in monospace.

MOTION: precise and calm. Fast bursts of typing and scanning, each followed by a short hold. Year changes: defocus blur plus sideways pan. One smooth pull-back at the end.

SOUND: minimal ambient drone with warm pads. Typing clicks, a chime per attention arc, a thud and riser on GPT-3, ticks per scanned letter, pings on the answer and passing tests, a whoosh per year change, a pad resolving at the end. No narration.

A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.

IDEA: A friendly moon in a nightcap visits three baby stars lying in little cloud beds and tucks each one in, one after another, until everyone, the moon included, is asleep.

0–2.5s: a starry navy sky over soft rolling purple clouds. Three smiling yellow baby stars sit in fluffy lavender cloud beds with white scalloped edges, left, middle and right. The left star twinkles with soft white rays.
2.5–5s: the middle star, then the right star twinkle in turn. The round cream moon, smiling, wearing a slate-blue nightcap, floats into the top-right corner.
5–7.8s: the view drifts slightly as the moon glides down to the left star and pulls its cloud blanket up to its chin. The star closes its eyes with a little smile and small "z" letters float up.
7.8–10s: the moon glides to the middle star (the biggest one), pulls its blanket up and holds it snug. Its eyes close; "z"s drift up.
10–15s: the moon floats to the smallest star on the right, lifts it into a hug; a pink heart pops up and floats away. The moon lays it back in its cloud bed and tucks it in. The third star falls asleep.
15–17.5s: the moon rises to top centre above the sleeping stars, gives a big slow yawn, and closes its eyes, still floating.
17.5–20s: "Goodnight, stars" fades in, centred near the bottom. Everyone bobs gently up and down as if breathing. Hold to the end.

LOOK: night-sky gradient #1B1C4B to #262768, rolling clouds #282766, cloud beds #BAC0E8 with white #FFFFFF scalloped trim, stars warm yellow #F9C84E, moon pale cream #FDF8E2, nightcap #4A4E90, a small pink heart. Soft flat shapes with very round corners; simple cute faces with dot eyes, tiny curved smiles and blush cheeks. Title in a bold rounded sans, lavender-grey #A0A6D6, sentence case, small. Calm, centred, picture-book layout with the cloud beds in a low row.

MOTION: slow and soothing throughout. Smooth ease-in-out on every move, soft floating holds, a constant gentle bob on all characters. One continuous scene with gentle drifts of the view, no cuts, nothing sudden.

SOUND: a slow music-box lullaby the whole way through. A soft twinkle chime each time a star sparkles, a quiet airy whoosh when the moon moves, gentle bell touches as each star falls asleep and on the heart, a soft sleepy chime as the moon yawns, and the lullaby resolving and fading under the title. No narration.

¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.

IDEA: Un niño mira la Luna; la cámara entra en diagramas sencillos (Luna medio iluminada, órbita, cuatro fases) y vuelve al niño, que dibuja la Luna entera con el dedo. Unos 40 segundos, formato cuadrado 1:1.

0–5s: un niño de espaldas, jersey naranja, en una colina bajo un cielo estrellado, mira una Luna creciente. Se escribe letra a letra "¿Por qué la Luna cambia de forma cada noche?" ("cambia de forma" en amarillo). Una etiqueta bajo la Luna cambia "noche 3", "noche 7", "noche 11", "noche 15", y la Luna crece hasta llena.
5–16s: zoom a la Luna, que se oscurece: "La Luna no tiene luz propia." Un Sol amarillo entra por la izquierda con rayos discontinuos: "La ilumina el Sol." La mitad que mira al Sol se vuelve crema, la otra azul oscuro; etiquetas "mitad iluminada" y "mitad oscura". Luego: "El Sol siempre ilumina la mitad de la Luna."
16–26.5s: diagrama desde arriba: Sol a la izquierda, Tierra al centro, órbita discontinua. Arriba "La Luna gira alrededor de la Tierra." y, en amarillo, "El ciclo completo dura unos 29 días y medio." Abajo a la derecha, "Así la vemos:" muestra la fase. La Luna, entre el Sol y la Tierra ("Luna nueva"), avanza en sentido antihorario a saltos de un cuarto: "Cuarto creciente", "Luna llena" (detrás de la Tierra), "Cuarto menguante" y otra vez "Luna nueva".
26.5–34.5s: "Cada noche vemos un trozo distinto de su lado iluminado." Cuatro círculos en fila se llenan uno a uno con las fases y sus nombres. Debajo, una flecha amarilla curva de derecha a izquierda: "...y vuelta a empezar".
34.5–40s: de vuelta al niño. Señala la Luna creciente y una línea amarilla discontinua recorre su borde oscuro hasta cerrar el círculo. "La Luna no cambia de forma: cambia cuánto vemos de su lado iluminado." ("cambia cuánto vemos" en amarillo). Se mantiene.

LOOK: cielo azul noche #141838 a #0B0E23; Sol y palabras clave #F8C847; lado iluminado crema #F6F2DC con cráteres #D3CEB0; lado oscuro #2B3463; Tierra #2A74D9 con continentes #4AA96C; jersey #E86F45. Ilustración plana con grano suave. Sans geométrica en negrita, texto blanco centrado arriba. Líneas discontinuas; etiquetas redondeadas.

MOTION: tranquilo, una pausa de un segundo tras cada texto. Cámara suave; etiquetas y fases con pequeño rebote; la Luna avanza a pasos.

SOUND: nana de caja de música y celesta, unos 95 BPM. Tecleo en el texto, un pop en cada etiqueta, un soplo al entrar el Sol, tic-tac de engranaje en la órbita con una campanita en cada fase, pops de madera ascendentes en la fila, un brillo en la flecha y el contorno, acorde final. Sin narración.