Motion as a house tour

Tall imagery unveils upward as the user scrolls into each section, triggered on the component's entry into view and riding Lenis's smoothed scroll. The effect reads less like content loading and more like walking into a room: the space opens as you arrive. The copy gets the same treatment, darkening word by word as you scroll, so reading pace and scroll pace stay linked. Because the triggers are component-based, editors can rearrange sections in the CMS and the choreography holds.

Copy pins on the left while its related images scroll past on the right. When the images finish, the next copy slides up and the next set continues the scroll. The pattern is usually called scrollytelling, and here it's the closest thing on the site to literally walking room to room: the narration waits while each space moves past.

Harland's keyhole brand mark runs through the site as a motion system, not a single trick, with behavior graded to its context. Inside media it slightly grows on reveal, image over image. On pinned sections it grows with the scroll while copy fades in over it. And in the signature version, it pins with copy centered inside while lifestyle images fly upward around it, 2 on each side, releasing once the last image passes. That version is the moment the whole tour builds to: standing in the middle of something magical while the life of the building moves past.

The tour ends in the neighborhood: a custom-styled Google Map matched to the brand, with a sidebar of categorized LA hotspots that pan the map on click.