Work/ Case study № 002
Discipline · Motion choreography Built on · The Halloran demonstration brand Status · Shipping in everything we make 2026 · Ongoing

Motion, choreographed.

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 the Halloran & Co. demonstration brand, 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 document
Why motion

Attention isn't requested. It's earned, in the first second.

A 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 real estate 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.

The system

Four rules, no exceptions.

One easing family.

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.

Token --ease-out-soft
Curve cubic-bezier(.22, 1, .36, 1)
Used for 90% of everything

A duration scale, not vibes.

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.

XS 120ms · hovers, presses
S 350ms · chips, small ui
M 700ms · content entrances
L 1100ms · curtains, scenes

Stagger is hierarchy.

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.

Gap 60ms between siblings
Order scene → subject → support → ask
Never more than 5 in a chain

Motion must yield.

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.

Respect prefers-reduced-motion
Scroll reveal once, then done
Rule content first, always
Live demo · 01

Same distance, same time. Different character.

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 easing room
Linearcubic-bezier(0,0,1,1)
A printer head. Mechanical.
Stock ease-outbrowser default
Fine. Forgettable.
Ourscubic-bezier(.22, 1, .36, 1)
Arrives early, settles like it lives there.

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.

Live demo · 02

One listing hero, conducted.

This is the entrance we choreographed for the Halloran property microsites. Five movements, one easing family, 1.4 seconds end to end. Replay it and watch the order: scene, subject, support, ask.

Entrance choreography · 3122 Bayshore
Dusk photograph of a Mediterranean revival Coconut Grove estate with warm lit windows under a live oak canopy
For sale · by appointment

3122 Bayshore Dr.

7 BD · 8·2 BA · 9,420 SF · .62 AC
Schedule a visit

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.

Scroll choreography

The scroll is the tempo. We don't fight it.

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.

Parallax · sparingly

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.

Reveal once

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.

Scrub for atmosphere only

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.

What it changed

The same page, before and after the choreography.

We tested the Halloran demo microsite both ways with people in our orbit: agents, friends, one very patient parent. Static version first, choreographed version a week later. Same content, same layout, same photography.

0×
Longer on page

Median session went from under twenty seconds to nearly a minute. People stopped skimming and started reading the story sections.

0%
Reached the ask

Scroll depth past the schedule-a-visit module nearly doubled. The entrance sequence sets a pace that carries people down the page.

0
Motion complaints

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.

Next

Want your listing to enter the room like this?