AQUAFINITY
Endless Purity — un site corporate cinématographique.
Une expérience corporate monopage, conçue d'abord en arabe, pour une entreprise de technologies de l'eau et de l'énergie fondée à Riyad en 2008 et dont le siège est à Ottawa depuis 2021 : une sphère d'eau WebGL, une chronologie d'entreprise pilotée par le défilement, un pipeline de traitement animé et une carte du monde en pointillés.
Aquafinity est un export statique Next.js 15 conçu pour Cloudflare Pages. Tous les textes — historique, services, agences et numéros de téléphone — ont été extraits mot pour mot du site existant de l'entreprise plutôt qu'inventés. Le hero est une sphère d'eau three.js chargée à la demande avec un repli statique ; GSAP ScrollTrigger pilote la chronologie 2008 → 2021 → aujourd'hui au défilement ; des tracés SVG dessinés à la main animent le parcours SOURCE → TEST → TREAT → PURIFY → DELIVER ; une grille équirectangulaire de points terrestres pré-générée positionne le Canada, la Libye et le Liban.
Le mouvement est actif pour tout le monde par défaut, car de nombreuses machines Windows sont livrées avec les animations système désactivées ; un commutateur ?motion=reduce désactive Lenis, la boucle WebGL et les animations au défilement tout en gardant tout le contenu visible. Le formulaire de contact compose un message WhatsApp vers la ligne de Tripoli — il n'y a pas de backend, par conception.
Vue d'ensemble
Eau, technologies propres, verre et lumière. Tout le site est un seul défilement continu : sphère, points de confiance, marquee, historique, services, parcours de l'eau, solaire, présence mondiale, contact.
Sections
- 01Preloader → Curseur → En-tête → Hero (sphère WebGL) → Statistiques de confiance → Marquee
- 02À propos → Chronologie (2008 Riyad · expansion · 2021 Ottawa · aujourd'hui) → Services (5)
- 03Parcours de l'eau → Solaire → Pourquoi Aquafinity → Présence mondiale (carte en pointillés) → CTA → Contact → Pied de page
Design
Océan profond, cyan doux.
Arrière-plans #030E18 → #0A2438, aqua signature #1BAFD2, cyan #5FD9F5 et glace #DCF2FA ; IBM Plex Sans Arabic pour l'arabe et Space Grotesk pour les accents latins ; un easing premium cubic-bezier(0.16, 1, 0.3, 1) partout. Le logo officiel n'est jamais redessiné.
Ingénierie
- 01output: 'export' avec images non optimisées pour Cloudflare Pages ; sitemap et robots sont en force-static
- 02Sphère three.js chargée à la demande ; repli statique quand WebGL n'est pas disponible
- 03world-atlas + d3-geo utilisés une seule fois au build pour générer lib/map-dots.json — non livrés à l'exécution
- 04Schéma JSON-LD Organization avec date de fondation, slogan et trois adresses postales
- 05Un seul fichier de contenu, lib/content.ts, est la source unique de vérité pour chaque chaîne
