ATZ Horizon — Technical Services Website
Cinematic marketing website for a Dubai property maintenance company.
Overview
Performance-first corporate website for ATZ Horizon Technical Services — a Dubai facility management company with a DET trade licence covering 9+ technical activities. Editorial design, scroll-driven animations, and a structured service catalogue built to convert.
Role
Software Engineer (X-Space Real Estate)
Period
Jun 2026 – Present
Category
Marketing Website
Status
Live
The Problem
ATZ Horizon needed a website that projected credibility and authority in the competitive Dubai property maintenance market — a sector where most competitors have generic corporate sites. The brief: present a complex service catalogue clearly and drive enquiries, using design that communicates precision and trust.
Approach
Used editorial motion design as the primary differentiator — masked reveals, clip-path wipes, and scroll-driven animations communicate quality through the experience itself. Tailwind v4 with CSS-first tokens keeps the design system tight. All motion implemented natively in Framer Motion without additional animation libraries.
Architecture
Next.js 16 App Router
Route groups with (site) wrapper layout for shared Navbar and Footer. Dynamic [slug] segments for service detail pages with generateStaticParams for full SSG at build time.
Tailwind v4 Token System
CSS-first design tokens in globals.css via @theme inline — brand red (#E21B2D), ground (#F7F7F5), ink (#111318). Tokens are native CSS custom properties, inspectable in DevTools without a build step.
Motion System
Custom easing vocabulary: E_OUT, E_CIN, E_IN_OUT. useScroll + useTransform for scroll-driven parallax and process line draw. useSpring (stiffness 60–70, damping 20–22) for physical, weighted feel. All motion respects useReducedMotion().
Key Features
Cinematic Entrances
Headings animate via overflow-hidden wrappers with y: "108%" → 0 (masked line reveal). Images wipe in with clip-path horizontal unmasking. Staged left-to-right choreography on page load.
Interactive Services Panel
Numbered hover list on the left, sticky image panel on the right. AnimatePresence crossfades between service images on hover — no carousel library.
Scroll-driven Process Line
HowItWorks section uses a scroll-linked progress value to draw a connecting line between 4 process steps as the user reads down the page.
Full Service Catalogue
/services route with /services/[slug] detail pages for each technical activity. All pages pre-rendered at build time via generateStaticParams.
Technology Stack
Engineering Challenges
Scroll Animation Smoothness on Mobile
High spring stiffness produced janky scroll-linked motion on lower-end Android devices. Tuned stiffness (60–70) and damping (20–22) to balance physical feel against mobile performance.
Service Image Crossfade Performance
AnimatePresence crossfades between service images on hover needed to stay smooth. Pre-loading adjacent images and using CSS will-change prevented layout thrash during transitions.
Outcome
Live at property-care.ae. The site presents the full ATZ Horizon technical service catalogue with an editorial design language that differentiates it from generic corporate sites in the Dubai maintenance sector.