Type · 1

Build this animation as a single self-contained HTML file (inline CSS and vanilla JS, canvas 2D only, no libraries).

The animation:
Kinetic Type. Three words, one per third of the timeline: "Make" in ink on an orange background, "it" in bone on ink, "move" in ink on bone. Hard cut the background between them. Set each word huge (about 318 px, tight letter-spacing) and centred. Each letter rises from below a mask with ease out, staggered slightly from left to right, while the word settles from 108% to 100% scale. After "move", an orange full stop grows in beside the word and lands. Small caps label bottom left: WORD 01, WORD 02, WORD 03. [Swap in your three words]

Setup:
- One canvas with a 912 × 600 drawing space, centred on the page, scaled to fit the window and sharp on retina screens.
- Write the whole animation as one function draw(ctx, t), where t runs from 0 to 1 and every frame depends only on t.
- Play t from 0 to 1 over 2 seconds, hold the last frame for 1 second, then loop.
- Easing words I use above: "ease out" is cubic-bezier(0.16, 1, 0.3, 1), "glide" is cubic-bezier(0.65, 0, 0.35, 1), and "lands" means a small overshoot, cubic-bezier(0.34, 1.56, 0.64, 1).

Brand:
- Colours: ink #0B0B0C, bone #F6F4F1, white #FFFFFF, accent orange #FF5A1F. [Swap in your colours]
- Fonts from Google Fonts: Google Sans for text, Google Sans Code for small caps labels, Instrument Serif Italic for accent words. [Swap in your fonts] Wait for the fonts to load before the first frame.

Check before you finish:
- Nothing clips at the canvas edges and the text is sharp.
- The last frame works as a still image.