- Scene
- 17
- Take
- 01
- Level
- Advanced
- Runtime
- ~3 h
Creative Motion
Canvas loops, particles, seeded noise, accessible pointer effects and @property: the playful end of web motion, measured, capped and kind to reduced-motion users.
Some motion is too busy for elements: a burst of paper, a field of dots, a ring that trails the pointer. This phase builds those on a canvas and with registered CSS properties, and measures what each costs: how many particles a machine affords, why a canvas goes blurry, why a resize flashes.
You build seeded random numbers and value noise by hand, so a picture is repeatable and a loop has no seam. You give pointer effects the same rules as everything else: a fine pointer, keyboard focus with equal polish, the real cursor kept, and reduced motion respected.
At the end the launch site celebrates a reservation with a pooled, capped confetti burst, and its Reserve button gets a gradient border that turns with @property. Both stay still for reduced motion.
Scene 17 · the brief from Lumen
Tomás, founder of Lumen Bikes
“When the first person reserves a Volt, I want the page to cheer. Not a video. Something that is ours.”
Tomás has watched the reservation counter all week. He asks Ama for one moment of joy: when someone presses Reserve, the page should throw confetti. Mei sketches paper in orange, blue and gold.
Kofi worries about three things. Lena's cheap Android will choke on a thousand pieces. A visitor who clicks twenty times must not freeze the page. And Ravi, who cannot look at moving screens for long, must get the same good news without movement.
In this phase the team learns the canvas loop, caps the particles, and keeps every pointer effect fair. The launch site ends with a burst of at most 150 pieces that gives way to a message for reduced motion.
In this scene
You will learn
- Build a canvas loop that stays sharp, resizes cleanly and sleeps when nobody looks
- Write particles with a pool and a cap, and measure what a machine affords
- Make seeded random numbers and noise, and pointer effects that stay accessible
- Animate gradients and counters with
@property, and treat the Paint API as optional
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page
Files you touch
- src/js/components/confetti.js
- index.html
- src/styles/components.css
- src/js/main.js
Shot list · 6 shots, widths by reading time
- 17.1The Canvas Animation LoopA canvas keeps no shapes: you wipe it and draw everything again each frame. This topic builds that loop properly: time-based steps, a backing store that matches the screen's pixels, a resize that does not flash, and a loop that sleeps when nobody can see it. 24 min 3 live
- 17.2ParticlesA particle is a tiny object with a position, a velocity and a lifetime. This topic builds an emitter with gravity and drag, reuses particle objects from a pool with a hard cap, and measures in headless Chromium how many a machine can afford. 29 min 3 live
- 17.3Noise and Generative MotionMath.random() jumps from one value to the next, so it makes jitter, not drift. Value noise blends random values on a grid into a smooth, repeatable wander. This topic builds seeded random numbers and 1D noise by hand and fixes the seam that breaks a looping animation. 24 min 2 live
- 17.4Cursor and Pointer Effects, Kept AccessibleA follower that trails the pointer and a button that leans toward it feel alive, and are easy to make unfair. This topic builds both with frame-rate independent smoothing and keeps them for people with a fine pointer, with keyboard focus given the same polish, and with nothing moving for reduced motion. 29 min 3 live
- 17.5@property and HoudiniAn unregistered custom property is only text, so the browser cannot animate it. Registering it with @property gives it a type, and then gradients, angles and counters animate. The CSS Paint API goes further but is not in every browser, so it must be an optional extra. 23 min 3 live
- 17.6Build: The Launch ConfettibuildReserving a Volt now throws a pooled canvas burst of at most 150 pieces, which pauses with the tab and never plays for reduced motion, and the Reserve button's gradient border turns twice with @property. 25 min 1 live
Dailies · 4 checked exercises
A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.