How this was made

Making OKTO

OKTO is a fictional coding toy — a squishy robot octopus that children program by snapping command tiles onto its eight arms. The audience is parents of five-to-ten-year-olds who are wary of screens; the page's single job is to make the toy feel so physical and joyful that a pre-order feels obvious. So the site itself behaves like a toy: the hero is a real physics playground.

Palette 6 colours

Off-white: #FAF6EF — warm playmat, not gallery white. Everything sits on it like felt.

Coral: #FF6B57 — Okto's own skin; the brand colour and the primary button.

Sunshine: #FFC93C — the glow ring; used for highlights and the nav CTA.

Pool: #2EC4B6 — water the octopus lives in; list markers and sockets.

Grape: #6C4CE0 — the "grown-up" accent; focus rings and the parents' card.

Ink: #22223B — a blue-black crayon outline around every shape, never pure black.

Neo-Memphis needs many hues but firm discipline: four toy colours only ever appear inside 3px ink outlines, like die-cut stickers, so the page stays graphic instead of noisy.

Type 2 faces

Baloo 2 — chunky, rounded, inflatable. DM Sans carries the body copy: geometric enough to feel engineered, warm enough to sit next to a cartoon octopus. Baloo 2 800 does all display work — the physics logo, headings, buttons — because its forms look like the silicone command tiles themselves. The bravery moment is the logotype: four Baloo capitals set loose as rigid bodies you can pick up and throw.

Techniques no images

matter-js physics hero (the signature). Every body — rings, stars, squiggles, pills and the four logo letters — is a DOM element synced to a Matter body each frame with a single transform. Letters are measured after document.fonts.ready so collision boxes match real glyph metrics. A MouseConstraint gives grab-and-throw; Matter's own touch and wheel listeners are stripped (they preventDefault and hijack page scroll) and replaced with handlers that only intercept a touch when the finger actually lands on a body — so the hero never blocks scrolling. The logo rights itself with a per-tick spring: an anti-gravity force plus a position spring toward its home slot and an angular spring toward upright, skipped while a letter is being dragged. Invisible static walls follow the viewport on resize, an invisible chamfered box shields the headline so shapes pile around the copy instead of on it, and an escape patrol respawns anything thrown out of bounds.
SVG character. Okto is one hand-drawn inline SVG: eight bézier arms with paired ink-outline strokes, socket buttons, blinking eyes whose pupils follow the cursor, and run-lights that pulse around the arms in program order.
CSS spring motion. One easing curve — cubic-bezier(.34,1.56,.64,1) — drives buttons, tiles, reveals and the load choreography, so the whole page bounces with the same rubber.
Command tiles. Each tile demos itself on click: SPIN rotates, SCOOT lunges, WAIT counts three dots, REPEAT wiggles three times. Pure CSS keyframes, restarted via class toggle.
Marquee. The "kid builds" ticker is two opposed CSS translation loops on a tilted ink band; it pauses on hover and unrolls into a static wrap under reduced motion.

Iteration log 3 passes

Pass 1 — Craft

The command-tile grid used auto-fit and orphaned REPEAT onto its own row; replaced with explicit 2/3/6 column steps.
Shapes settled directly on the headline's cap height; the invisible content shield gained 36px of headroom so the pile rests above the copy.
"Watch it go." orphaned in the how-it-works heading — glued with a non-breaking space.
Raised the try-hint contrast, added sunshine ::selection, and thinned the logo's ink text-stroke on small screens where 2.5px swallowed the counters.

Pass 2 — Depth

Second-read detail: Okto's arm sockets now light up in sequence every nine seconds — the "program" visibly runs down the arms, echoing the glow-ring copy.
Knock the logo over three times and a handful of bonus mini-shapes rains in (capped, with an out-of-bounds patrol).
The pre-order button answers back: one click and it snaps to pool green — "Snapped — see you in October!".
Nav octopus wiggles on hover; grabbed bodies scale up 7% while held.

Pass 3 — Hardening

375px: logo home rises to 23% of the hero, six smaller shapes instead of eleven, nav links collapse to brand + CTA.
Reduced motion: the physics engine never starts — a hand-placed static scatter renders instead, marquee unrolls, blinks/bobs/reveals all stop; the grab-note copy even changes to admit the page is sitting still.
Verified Matter 0.19's mousewheel/DOMMouseScroll/touch listeners are removed against its source, fixed the global focus style mutating button radii, scoped user-select to the stage, added pinch-zoom to touch-action.
Chanel rule: deleted a decorative squiggle sprinkle from the how-it-works section — the physics hero is ornament enough.
Simulated the engine deterministically: a letter kicked at 18px/frame with 0.9 rad/s spin returns to exactly (0,0,0°) from home; all bodies inside walls after resize clamp.