Most property websites treat scroll as a scrollbar problem — get the visitor from the hero to the contact form with as little friction as possible. Era Residence, the marketing site for a residential development in Estepona, treats scroll as the entire medium. Nothing on the page is static; every section has its own rhythm, its own entrance, its own exit, and the whole thing is stitched together by a handful of quiet feedback mechanisms that never let you forget the page is listening to you.
What this is: a look at how that design language is built — the fonts, the palette, the parallax, the video and image treatment, and the small orchestration details that make it feel considered rather than assembled.
The typography does two jobs at once: it has to read as a luxury Mediterranean development, and it has to survive being sliced apart, rotated, and flown across the screen dozens of times per page — because nearly every piece of text on the site is animated in via character, word or line splitting (GSAP’s SplitText). That constraint shapes the choice. A high-contrast serif carries the big statements — “Crafted to Endure,” “Light & Flow,” “Your Private Sanctuary” — where the flare of a serif reads as considered even mid-flight, rotated 90° and rotating back to rest. A cleaner sans handles the surrounding copy, labels, and UI chrome, where legibility during motion matters more than character.
The interesting decision is architectural, not stylistic: text never simply appears.
Three different physical metaphors for three different type roles, applied consistently across all twenty-six sections. That consistency reads as intentional — the same headline treatment in the hero as in the footer, the same paragraph-reveal in the amenities grid as in the location panel.
Nothing about the color system is loud. The site leans into warm neutrals — sandstone, terracotta-adjacent, sun-bleached masonry — which is exactly the palette a Mediterranean coastal development should reach for, but it is applied with restraint: large fields of near-white and warm grey give the imagery room to carry the color, and the site’s actual accent color shows up sparingly, mostly in small UI moments (the scrollbar fill, active states, tab highlights) rather than as a design flourish. The effect is that photography and video do the color work, and the interface stays quiet enough not to compete with a listing photo of a terrace at golden hour.
There is also a [data-theme] and [data-bg] system
running under the hood — sections are tagged light,
dark, or color, and as you scroll a ScrollTrigger
watches which theme-tagged element sits behind a fixed piece of UI (like
the logo) and swaps its color classes accordingly. It is the same trick
dark-mode toggles use, but applied continuously as you scroll rather than
as a single switch — so the top-left mark and nav labels are always
legible against whatever is currently behind them, without you ever
noticing the swap happen.
This is the site’s real signature: there is no single parallax effect reused down the page. Each section gets a distinct scroll-linked behavior, hand-tuned to what that section is trying to say.
word-spacing. A line of type
physically pulls its words apart as you scroll past it, so the sentence
itself seems to stretch under the weight of the scroll.
clip-path “curtains” that peel open like a
shutter, then the whole intro scales up 1.84× while flower motifs
push outward to the edges of the frame — the visual grammar of a
camera pulling back to reveal a wider shot.
No two of these use the same easing, the same duration, or the same trigger
range. That is a lot of bespoke work for what could have been one reusable
“fade and slide” component — and it is exactly why the
site does not feel like a template. Underneath the variety, though, there is
real discipline: every one of these is built from CSS
position: sticky plus a scroll-linked timeline, never
GSAP’s heavier pin mechanism — which is why none of it stutters
even while the page is also running a custom-eased smooth-scroll layer.
Video on this site is not used for narrative — it is used as ambient texture. Short, looping, muted clips (bougainvillea flowers swaying, water, foliage) sit behind or beside text blocks purely to add a sense of a living place, and they are gated so they only play while their section is actually on-screen — the moment a clip scrolls out of view it pauses, and it resumes exactly where it left off when you scroll back. That is not a performance afterthought; it is why a page with this much simultaneous animation never feels like it is fighting itself for GPU time.
Images follow a similar discipline in how they are revealed rather than just
how they are compressed. A hero image does not fade in — it is masked
by a wipe, or clipped by a polygon that opens like a shutter, or scaled from
a slightly zoomed-in starting point down to rest, so the “load”
of an image becomes a designed moment rather than a pop. Different sections
choose different unveiling geometry (a straight wipe here, an angled
clip-path there), which is the image equivalent of the parallax
variety above — the same principle of “no two reveals are
identical” applied to photography instead of type.
The detail that separates this from a typical scroll-reveal site is that
everything has a symmetrical, opposite-direction exit. Most sites animate
content in and then simply leave it there, or fade it out generically when
you scroll away. Here, every reveal primitive — the character flip,
the word rotation, the line-mask rise, the clip-path wipe
— has a mirrored version that plays in reverse when you scroll back up
past it, or when you navigate away entirely. Text that flew in rotating
forward flies out rotating backward; lines that rose up sink back down.
It is a small thing, but it is what makes scrolling back up through the page feel like rewinding a specific sequence rather than just re-triggering effects out of order — and it is the same mechanism that makes the page-to-page transitions (this is technically a single-page app under the hood) feel like one continuous piece of film rather than a hard cut between documents.
The clearest piece of ambient feedback on the whole site is the smallest: the mark in the top-left corner never stops spinning, and its spin speed is tied directly to how fast you are scrolling. Scroll gently and it settles at a slow, constant rotation. Flick the page hard and it spins up in that same direction; let go and it eases back down to its resting speed over the following second.
It is a tiny detail, but it is doing real communicative work — a persistent, low-key confirmation that your scroll input is being tracked and responded to in real time, everywhere on the page, independent of whatever section-specific animation happens to be running. Most feedback on a scrolling site is local — a progress bar, a section indicator. This one is global and constant, which is why it registers as a piece of brand personality rather than a UI widget.
Before any of this starts, the site makes you wait — deliberately. A full-screen preloader holds the page behind an arch-shaped mask while the logo’s letters assemble, a progress bar fills along a hand-tuned easing curve (not linear — it surges and settles the way a real loading process does), and the arch itself widens and lifts as the bar completes, then dives upward off the top of the screen to reveal the hero underneath. Only once that sequence finishes does the page unlock scrolling and hand control to the visitor.
The reasoning is defensible even though it costs a few seconds: this is a site built entirely on a custom smooth-scroll engine, dozens of scroll-linked timelines, and heavy imagery, and letting someone start scrolling before all of that is registered and measured would mean broken triggers, mistimed reveals, or a jarring layout shift mid-animation. The preloader is not stalling for its own sake — it is making sure the elaborate choreography that follows never has to correct itself in front of you. It also does the polite thing on repeat visits: if you have already been to the site this session, it recognises that and plays a short version of the same sequence instead of making you sit through the full intro twice.
None of these ideas — scroll-linked type reveals, section-specific parallax, ambient scroll feedback, a gated loader — are individually novel. Scroll-triggered animation is one of the most common patterns on the modern web, and any one of these effects shows up somewhere on thousands of sites.
What makes Era Residence read as considered rather than default is the combination:
position: sticky rather
than a heavyweight pin, so the variety costs nothing in smoothness.
The variety is deliberate; the discipline underneath it is what keeps that variety from turning into noise.
I have since turned all of this into a single build brief for an agent — the prompt I used to build a premium property site on Replit — with the sticky-over-pin rule, the mirrored exits, and this site's own missing reduced-motion branch written in as corrections.