AQUAFINITY
Endless Purity — a cinematic corporate site.
A single-page Arabic-first corporate experience for a water and energy technology company founded in Riyadh in 2008 and headquartered in Ottawa since 2021: a WebGL water sphere, a scrubbed company timeline, an animated treatment pipeline and a dotted world map.
Aquafinity is a Next.js 15 static export designed for Cloudflare Pages. All copy — history, services, branches and phone numbers — was extracted verbatim from the company's existing site rather than invented. The hero is a three.js water sphere lazy-loaded with a static fallback; GSAP ScrollTrigger scrubs the 2008 → 2021 → today timeline; hand-authored SVG paths animate the SOURCE → TEST → TREAT → PURIFY → DELIVER journey; a pre-generated equirectangular land-dot grid plots Canada, Libya and Lebanon.
Motion runs for everyone by default because many Windows machines ship with OS animations off; a ?motion=reduce switch disables Lenis, the WebGL loop and scrubbed animations while keeping all content visible. The contact form composes a WhatsApp message to the Tripoli line — there is no backend by design.
Overview
Water, clean technology, glass and light. The whole site is one continuous scroll: sphere, trust points, marquee, history, services, water journey, solar, global presence, contact.
Sections
- 01Preloader → Cursor → Header → Hero (WebGL sphere) → Trust stats → Marquee
- 02About → Timeline (2008 Riyadh · expansion · 2021 Ottawa · today) → Services (5)
- 03Water journey → Solar → Why Aquafinity → Global presence (dotted map) → CTA → Contact → Footer
Design
Deep ocean, soft cyan.
Backgrounds #030E18 → #0A2438, signature aqua #1BAFD2, cyan #5FD9F5 and ice #DCF2FA; IBM Plex Sans Arabic for Arabic and Space Grotesk for Latin accents; a premium easing of cubic-bezier(0.16, 1, 0.3, 1) throughout. The official logo is never redesigned.
Engineering
- 01output: 'export' with unoptimised images for Cloudflare Pages; sitemap and robots are force-static
- 02three.js sphere lazy-loaded; static fallback when WebGL is unavailable
- 03world-atlas + d3-geo used once at build time to generate lib/map-dots.json — not shipped at runtime
- 04JSON-LD Organization schema with founding date, slogan and three postal addresses
- 05One content file, lib/content.ts, is the single source of truth for every string
