AQUAFINITY
Endless Purity — un sitio corporativo cinematográfico.
Una experiencia corporativa de una sola página, con el árabe como idioma principal, para una empresa de tecnología de agua y energía fundada en Riad en 2008 y con sede en Ottawa desde 2021: una esfera de agua en WebGL, una línea de tiempo de la empresa controlada por scroll, una canalización de tratamiento animada y un mapa mundial de puntos.
Aquafinity es una exportación estática de Next.js 15 diseñada para Cloudflare Pages. Todo el texto —historia, servicios, sucursales y números de teléfono— se extrajo literalmente del sitio existente de la empresa en lugar de inventarse. El hero es una esfera de agua en three.js cargada de forma diferida con una alternativa estática; GSAP ScrollTrigger controla con el scroll la línea de tiempo 2008 → 2021 → hoy; trazados SVG creados a mano animan el recorrido SOURCE → TEST → TREAT → PURIFY → DELIVER; una cuadrícula equirectangular de puntos de tierra pregenerada sitúa Canadá, Libia y Líbano.
El movimiento se ejecuta para todos por defecto porque muchas máquinas Windows vienen con las animaciones del sistema desactivadas; un interruptor ?motion=reduce desactiva Lenis, el bucle WebGL y las animaciones controladas por scroll manteniendo visible todo el contenido. El formulario de contacto compone un mensaje de WhatsApp a la línea de Trípoli: no hay backend por diseño.
Visión general
Agua, tecnología limpia, vidrio y luz. Todo el sitio es un único scroll continuo: esfera, puntos de confianza, marquesina, historia, servicios, recorrido del agua, energía solar, presencia global, contacto.
Secciones
- 01Preloader → Cursor → Encabezado → Hero (esfera WebGL) → Estadísticas de confianza → Marquesina
- 02Acerca de → Línea de tiempo (2008 Riad · expansión · 2021 Ottawa · hoy) → Servicios (5)
- 03Recorrido del agua → Energía solar → Por qué Aquafinity → Presencia global (mapa de puntos) → CTA → Contacto → Pie de página
Diseño
Océano profundo, cian suave.
Fondos #030E18 → #0A2438, aqua distintivo #1BAFD2, cian #5FD9F5 y hielo #DCF2FA; IBM Plex Sans Arabic para el árabe y Space Grotesk para los acentos latinos; una curva de suavizado premium cubic-bezier(0.16, 1, 0.3, 1) en todo el sitio. El logotipo oficial nunca se rediseña.
Ingeniería
- 01output: 'export' con imágenes sin optimizar para Cloudflare Pages; sitemap y robots son force-static
- 02Esfera three.js cargada de forma diferida; alternativa estática cuando WebGL no está disponible
- 03world-atlas + d3-geo se usan una sola vez en tiempo de build para generar lib/map-dots.json — no se envían en tiempo de ejecución
- 04Esquema JSON-LD Organization con fecha de fundación, eslogan y tres direcciones postales
- 05Un único archivo de contenido, lib/content.ts, es la fuente única de verdad para cada cadena
