Skip to content
SourceViet

LUMEN Residences — Luxury apartment landing page template

Pinned amenities, a sideways SVG floor-plan rail and an animated location map for premium residences

No reviews yet
Hero with an oversized serif headline over the Saigon skyline

Hero with an oversized serif headline over the Saigon skyline

Sells a way of living, not a spec sheet

Most property landing pages open with a red banner and a price table. This one goes the other way: oversized serif type, generous whitespace, full-bleed imagery and an unhurried scroll — the presentation buyers of premium apartments expect. Everything is still there (amenities, floor plans, location, project figures, a booking form); it is just told in order instead of all at once.

Eight sections, each with its own motion

The hero reveals line by line while its backdrop zooms out on scroll. The intro lights up word by word. A room photograph expands from a framed inset to full bleed. Amenities pin in place, swap images with clip-path and snap to each item when scrolling stops. Five unit types scroll sideways, each with an SVG floor plan. The location map draws the river, then drops in each landmark. Figures count up. The gallery runs three parallax columns at different speeds. It closes on a dark booking block with an endless marquee.

Tune the motion without reading GSAP

Every animation setting — durations, delays, zoom ratios, parallax speeds, whether to snap — lives in lib/motion.ts, each line commented. To slow the page down or drop an effect, change a number there instead of opening a component.

Content lives in one file

Project name, hotline, showroom address, four amenities, five unit types with room layouts, six map landmarks, four figures, six gallery images and the booking form — all in lib/content.ts. Floor plans are declared as room coordinates, so adding a unit type means adding one array entry.

Light on phones, respects reduced motion

On phones the pinned amenities and gallery parallax switch off, leaving simple reveals. With reduced motion enabled at the OS level, GSAP and smooth scrolling do not run at all and the page renders static and complete.

Exports static

Images go through a custom loader pointed at Unsplash's CDN, so no image optimisation server is needed. The demo above is the static export, served by plain nginx with no Node process.

You might also like

More products in the same category.