🟩 Fluo

Fluo es una Web App financiera de gestión de gastos personales diseñada bajo los estándares más altos de UI/UX. Combina una estética Light Mode minimalista con elementos 3D inflados (claymation) y un ecosistema de animaciones y físicas de scroll de nivel cinematográfico.

🔗 Prueba en vivo: fluo.fabrictd.com

---

✨ Características del Proyecto

Fluo no es solo una tabla de gastos, es una experiencia interactiva completa construida para ejecutarse al 100% en el cliente:

• Privacidad Absoluta (Zero-DB): Todo el motor de datos funciona mediante localStorage. Las transacciones y presupuestos nunca salen del navegador del usuario.
• Animaciones Coreográficas: Entradas con staggered fade-ups, rebotes y microinteracciones en cada elemento de la interfaz gracias a GSAP.
• Físicas de Scroll Inmersivas: Implementación de Lenis para un smooth-scroll libre de fricción, combinado con ScrollTrigger para fijar elementos 3D mientras los gráficos interactúan dinámicamente con la posición del scroll.
• Glassmorphism & 3D Tilt: Barras de navegación con efecto cristal reactivas al scroll y tarjetas de presentación que responden al movimiento del cursor en 3D.
• Dashboard Analítico: Visualización de la evolución financiera y distribución de gastos en tiempo real mediante Chart.js.
• Onboarding Inteligente: Sistema de tutorial guiado con overlay oscuro y foco de luz que se activa únicamente en la primera visita del usuario.

---

🛠️ Stack Tecnológico

La arquitectura de Fluo prescinde de frameworks pesados, optando por tecnologías nativas potenciadas por librerías específicas de vanguardia:

• Estructura & Estilos: HTML5 semántico, CSS3 (CSS Grid, Flexbox, Variables, CSS Transitions).
• Lógica: JavaScript Vanilla (ES6+).
• Motores de Animación:
  • GSAP - Animaciones de línea de tiempo y físicas elásticas.
  • ScrollTrigger - Efectos sticky on-scroll.
  • Lenis - Smooth scroll premium.
  • VanillaTilt.js - Efectos de inclinación 3D en tarjetas.
• Gráficos: Chart.js para el renderizado del dashboard.

---

📂 Estructura del Código

El proyecto está modularizado para garantizar la escalabilidad de las lógicas de almacenamiento y animación:

fluo-app/
├── index.html          # Landing Page (Presentación, ScrollTrigger y features)
├── panel.html          # Dashboard (Gestión, gráficos y modal responsive)
├── assets/
│   └── 3d/             # Ecosistema visual 3D (Iconos globales y categorías)
├── css/
│   ├── main.css        # Variables globales y resets
│   ├── landing.css     # Estilos exclusivos de la página de inicio
│   ├── components.css  # UI/UX: Tarjetas, botones y avatares
│   └── tutorial.css    # Foco y popups del onboarding
└── js/
    ├── app.js          # Orquestador del panel y enrutador lógico
    ├── storage.js      # CRUD completo contra el LocalStorage
    ├── charts.js       # Configuración e instanciación de Chart.js
    └── tutorial.js     # Motor del tutorial paso a paso

---

🚀 Uso Local

Para correr el proyecto en tu entorno de desarrollo, simplemente cloná el repositorio e iniciá un servidor local:

git clone https://github.com/FabriCTD/fluo-app.git

No requiere compilación. Abre index.html con Live Server o directamente en el navegador.

---

👨‍💻 Creador

Desarrollado en Córdoba, Argentina por Fabrizio Piovano.

• 🌐 Web y Servicios (Servidores Discord y Bots a Medida): www.fabrictd.com
• 🐙 GitHub: @FabriCTD

---

© 2026 Fluo. Todos los derechos reservados.