Fluxa
Fondos con shaders para Webflow, aplicados desde el Designer. Un producto que diseñé y construí de punta a punta: gráficos, extensión, API y cobro.
Ver el sitio en vivo ↗- Rol
- Diseño, gráficos y desarrollo full-stack
- Tipo
- App del Designer de Webflow + backend
- Estado
- En producción, envío al Marketplace en curso
El problema
Los diseñadores quieren fondos vivos, movidos por la GPU, en sus sitios de Webflow, pero lograrlo implica escribir shaders a mano, conectarlos a la página y mantenerlos rápidos en cualquier dispositivo.
Fluxa lo convierte en un panel: eliges un preset o lo ajustas, seleccionas una sección en el Designer y aplicas. El shader queda como un elemento nativo de la página publicada.
Los gráficos
La galería tiene tres familias de shaders. Dos son GLSL propio: una superficie de líquido de vidrio con grano de semitono, y un campo de ruido evolutivo. La tercera, un solver de fluidos estables que sigue el cursor, corre en WebGL2 y en WebGPU compute, con selección automática del backend.
El rendimiento es parte del diseño: el render se pausa cuando el shader está fuera de pantalla, y la resolución se adapta a un presupuesto fijo de píxeles para que un gradiente fluido a 1080p no se trabe en 4K nativo.
El producto alrededor
La extensión del Designer es React y Vite. El backend es Hono sobre Cloudflare Workers con Postgres, inicio de sesión por email y social, y suscripciones con Lemon Squeezy y webhooks, verificados de extremo a extremo.
Los sitios publicados cargan runtimes versionados, alojados y con integridad fijada, registrados mediante la API de Custom Code de Webflow, así un lanzamiento nunca cambia en silencio la página en vivo de un cliente.
También construí el sitio web de Fluxa en Astro: un hero con fondo de vidrio acanalado, un shader WebGL2 del logo y una transformación al hacer scroll con GSAP, además de un blog y una galería pública de presets con vista previa del shader en vivo.
Qué aprendí
La revisión del Marketplace me obligó a mirar con rigor cómo llega el código al sitio de un cliente. Rehice la ruta de entrega dos veces: de scripts en línea, a un loader, a scripts autocontenidos alojados y elementos nativos. Restricciones así mejoran la arquitectura.
Construido con
- TypeScript
- GLSL
- WebGL2
- WebGPU
- Three.js
- React
- Vite
- Hono
- Cloudflare Workers
- Postgres
- Lemon Squeezy
- Rive
- Astro
- GSAP
