A property page has about two seconds to convince someone it was made with care. Stillness can't say that fast enough. Choreography can.
This is the studio's motion system: how we decide what moves, when, and exactly how it settles. We developed it while building our demonstration clients, and it now runs underneath every site we design, including this one.
It's a case study you can poke. Every demo below is live.
Studio R&D · published as a working documentA static page gets skimmed. A page that moves with intention gets read. Not because motion decorates the content, but because it tells the eye what matters first, second, and third.
Most small-business sites move badly, not too little. Things bounce for no reason. Carousels autoplay against the reader. Everything fades in the same way at the same speed, which is the digital equivalent of speaking in monotone.
The fix isn't more animation. It's fewer movements with clearer jobs.
We treat motion the way an editor treats punctuation. It sets pace. It groups thoughts. It puts emphasis exactly where the sentence needs it, and then it gets out of the way.
The whole system fits on a page: one easing family, one duration scale, one stagger rule, and a hard promise to readers who'd rather it all held still.
Every entrance on a Two Cool site decelerates on the same curve. Fast out of the gate, long graceful settle, no bounce unless something playful is happening. One curve means the whole page feels like one hand made it.
Durations come off a scale the way type sizes do. Micro feedback is near-instant. Content entrances take long enough to be seen and not a frame longer. Atmosphere is allowed to be slow because nobody is waiting on it.
When several things enter together, their order is an argument: image before headline, headline before spec, spec before the ask. Sixty milliseconds between siblings. Enough to read the sequence, never enough to feel queued.
It never blocks reading, never hijacks scroll, and never runs for users who've asked their device for calm. Reduced-motion isn't a fallback we tolerate. It's a version we design.
Three dots travel the same lane in the same 1.5 seconds. Only the easing changes. Watch which one feels like it belongs in a room with linen and old wood.
The third curve covers most of its distance in the first 400ms, then spends a full second easing into place. The reader gets the information fast and the grace note free.
This is the entrance we choreographed for the Marea project pages. Five movements, one easing family, 1.4 seconds end to end. Replay it and watch the order: scene, subject, support, ask.
The call to action lands last, on the one playful curve in the system. By the time the chip pops, the reader already knows the house, the street, and the numbers. The ask never interrupts. It concludes.
You're inside the demo right now. The numeral drifting behind this section moves slower than the page, which gives the surface depth without asking for your attention. These words brighten at your reading pace because the scrollbar belongs to you, not to us. Nothing here is pinned, parked, or hijacked. The page keeps moving the moment you do.
Background elements drift at 20–40% of scroll speed. Foreground content never parallaxes. Reading lines that move under your eyes are how you lose a reader.
Content enters the first time you reach it, then it's furniture. Re-animating on every scroll direction change is a party trick that gets old by the second scroll.
Scroll-linked motion is reserved for texture: ghost numerals, ambient drift, reading reveals. The content itself arrives on its own clock and then holds still.
We tested the Marea demo project page both ways with people in our orbit: friends, founders, one very patient parent. Static version first, choreographed version a week later. Same content, same layout, same photography.
Median session went from under twenty seconds to nearly a minute. People stopped skimming and started reading the story sections.
Scroll depth past the schedule-a-visit module nearly doubled. The entrance sequence sets a pace that carries people down the page.
Including from the reduced-motion testers, who got the calm version by design. The system yields before anyone has to ask it to.
Small sample, demonstration brand, and we say so. But the direction was unambiguous, and it's why this system now ships in everything the studio touches.