Webline Technologies
ProjectsWebline Technologies
Technology that keeps business moving
Overview
Webline Technologies Ltd. is a Nairobi technology integrator — infrastructure, workplace hardware, security and managed support. The site had to earn trust before anyone reached a product, then hand off to the storefront without a visible seam.
It reads as one scroll-driven narrative. Five service pillars become full-bleed chapters that pin while their imagery moves behind the copy, so the page advances at reading pace instead of presenting a wall of cards.
Architecture
| Layer | Technology |
|---|---|
| Framework | Next.js 16, React 19 |
| Motion | GSAP ScrollSmoother, pinned scenes |
| Rendering | Static shell, server components |
| Zoning | Reverse-proxy rewrites to the storefront |
One domain, two apps
webline.co.ke serves the corporate site; /store/* is rewritten to a separate storefront deployment running its own basePath. Two codebases, two release cadences, one address bar.
Customer:
Webline Technologies Ltd.Period:
2026Performance:
Brand & Narrative DesignFront-End EngineeringMotion / Scroll DesignMulti-Zone ArchitectureTechnical SEOPerformance Engineering
Features:
Scroll-driven pinned scenes (GSAP ScrollSmoother)Five service pillars as full-bleed chaptersMulti-zone hand-off to the storefrontServer-rendered, fully static shellStructured data + generated sitemapAccessible reduced-motion fallbacks
Bone
Ink
Signal Blue
Warm Grey
One domain, two applications
Visitors should never feel the boundary between the marketing site and the shop, but the two are separate apps with separate release cycles.
A multi-zone setup solved it — until cross-zone navigation silently broke. Vercel rewrites RSC segment-prefetch requests before afterFiles rules run, so every prefetch across the boundary 404'd. Moving the proxy into beforeFiles puts it ahead of that transform.
Pacing, not scrolling
Five services as stacked sections is a list to skim. Instead each pillar pins to the viewport while its imagery moves independently, so scrolling turns a page rather than covering distance.
The trade-off, stated plainly: pinned layouts live inside a position: fixed wrapper, so the document is an empty spacer. Anything expecting a tall page — crawlers, screenshot tools — sees blank space. Mitigated with server-rendered markup and structured data so machines read the content, not the scroll position.
Motion that stays cheap
Scenes pin rather than duplicate, keeping the DOM small. Imagery runs through the Next image pipeline, and every reveal is gated behind an intersection observer so nothing animates off-screen.
The page ships as a static shell with no data fetching on the critical path — which is why it paints immediately rather than after a round-trip.
