Case 02 / 05 Live client · Dubai Services · 15 pages
Shamil Services
A licensed Dubai pest, bird and cleaning company, working since 2013 out of Al Quoz. Brand premise, copy, art direction and build — over their own photography, and their own logo colours.
- Role
- Strategy, copy, design, build
- Pages
- 15
- Photographs
- 75, client-supplied
- Stack
- HTML · CSS · JS · Python
01 — Overview
Three services, one idea
Pest control, bird control and cleaning normally read as three businesses sharing a phone number. Looking through every photograph the client supplied, the same act kept happening: the perimeter line where the wall meets the floor, the roof edge, the kitchen extraction, the tank lid. Find the opening, close it, write down that it is closed.
That became the premise, the headline and the argument the whole site makes — and it happens to answer the market's loudest complaint, which is that the last company came, sprayed, and the problem came back.
“We close the way in.”
The headline. Survey first, seal the routes, then treat — stated as a sequence, because the order is the difference.
“Your space, our responsibility.”
Their existing tagline, kept. A brand refresh that throws away what the client already owns is a rebrand nobody asked for.
02 — Design direction
Sampled from what they already had
Every colour was pulled out of the client's own logo files and out of the daylight in their photographs, rather than picked from a mood board. The page travels: light at the top, deep slate through the technical middle, light again at the call to action.
Slate #2B3B4A and deep #16222E
Their wordmark hue, deepened — and never taken to near-black, which would have thrown away the brand.
Green #5EB229
Their banner green, rationed to two jobs only: the call to action, and the seal line.
Blue #438DCB
The check in their logo. It appears only where something is confirmed closed, so the colour carries a meaning rather than a mood.
Archivo · Public Sans · JetBrains Mono
An engineered display face, a quiet body face, and mono reserved for permit references and response windows — so the documentation claim looks like documentation.
03 — Key features
A hero that is a camera move
The hero is a real 3D perspective stage. Five photographic planes sit at descending depths; scroll drives the camera forward, and each plane approaches, passes and gives way to the next. It runs 520vh so every beat gets a plateau to be read on, rather than flying past.
Five bands, five entrances
Word-by-word rise, then a grid snap-align that slides characters into reading order like a list being worked, then a word punch, then blur-to-sharp as a tank lid lifts, then a staged settle into the call to action.
The seal line
One SVG path running the full height of the page down the margin, drawing itself as you scroll. Four times it reaches a gap; the gap closes and a small blue check lands. Remove it and the page loses its argument — which is the test of a real signature.
“Press and hold to seal it.”
One interactive moment, inside the research section. Progress builds while held and eases back on an early release rather than snapping. Reduced motion gets the completed state with no hold required.
Fourteen service pages
Pest, bed bugs, termites, ants, bird control, AC and duct, water tank, sofa, mattress, carpet, curtain, office, commercial and villa work — each a real page with its own photography, generated from a single data file.
One call to action
Everything funnels to a quote. WhatsApp and the toll-free line are the real channels, and the form is honest about being a mailto — which the client was told, along with the free upgrade path.
04 — Technology
Legibility as an engineering problem
Type sits over photography for the whole hero, which is where most scroll heroes quietly fail. Four layers hold the contrast: a global base scrim, a per-band scrim riding the band's own progress value, a three-layer text-shadow token, and scrims on the small labels — audited against the worst frame, not the best one.
Delta-gated writes
Planes are positioned with translateZ under a perspective stage, driven by a normalised lerp in a rAF loop that rests when it converges and when the hero leaves the viewport. Nothing is written per frame that has not changed.
Five gates for the static hero
Phones, portrait tablets, coarse-pointer portrait, landscape phones and reduced motion get a composed static hero instead. The gate strings are identical in CSS and JS, and they arm and disarm live from change listeners.
Complete without imagery
The page has to read and convert if every photograph fails to load. That was a build rule, not a fallback added later.
Python for the repetitive half
Service pages, image processing and the data file are generated by scripts, so fourteen pages stay consistent and a copy change is one edit rather than fourteen.
05 — Visual showcase
06 — Responsive
The phone is the primary device
This is a business people call from a phone, usually while looking at the problem. So the phone is not a reduction of the desktop layout: it gets a composed static hero, a persistent action bar with call, WhatsApp and quote, and band pacing validated by flicking the page at 120, 240 and 360 pixels a throw.
Reduced motion is honoured live and in both directions, including un-pinning on the way back, so a visitor who changes the setting mid-session is not left in a broken state.
07 — Client review
What the client said
“Amazing website! The design is modern, professional, and perfectly represents Shamil Services. We’re very happy with the result!”
Shamil Services LLCClient · Al Quoz, Dubai