NuvoraFinanzas personales
- Scroll animado
- Carrusel
Qué hace especial
- Hero con video
- Scroll animado
- Títulos revelados por líneas desde máscara con GSAP (0,8 s, una vez por sección) y textos de apoyo agrupados
- Tres visualizaciones SVG que se construyen al entrar: columnas semanales y curva de saldo, proyección con banda y dona por segmentos
- Lectura de valores por hover, foco y toque en las tres gráficas
- Tarjetas con inclinación de 4° como máximo y brillo que sigue al puntero (solo con puntero fino)
- Partículas lentas en lienzo 2D detrás de las bandas negras (40 en escritorio, 12 en móvil)
- Vídeo del hero en bucle con fundido; prefers-reduced-motion deja todo estático
Qué incluye
- Prompt para recrear y personalizar el diseño con IA.
- Código y archivos del sitio: imágenes, fuentes y licencias.
- Demo interactiva e instrucciones.
- Uso en sitios propios y proyectos finales de clientes.
Secciones y pantallas de la demo (3)
- Hero con vídeo de paisaje, titular serif en cursiva, tarjeta de historia y carrusel de socios
- Analítica: resumen mensual con columnas por semana y curva de saldo, y tarjeta diaria
- Asesor: consultas, gráfica de proyección con banda de incertidumbre y dona de categorías
Qué puedes personalizar
- Marca, paleta, copy y datos de ejemplo de las gráficas (src/config/site.ts)
- Logo, favicon y logos de socios propios (obligatorio: los de la demo son externos y de terceros)
- Fotos de las tarjetas y vídeo del hero (public/assets)
- Breakpoints y medidas (variables de src/index.css)
Cómo empezar
- Copia el prompt y descarga los archivos.
- Llévalos a tu herramienta de IA y pide los cambios: marca, textos e imágenes.
- Revisa el resultado y publícalo en tu dominio.
Descarga el paquete y copia el prompt: tu herramienta de IA trabaja sobre sitio/ con REPRODUCCION.md, recreacion-spec.json y las capturas como referencia. `npm ci`, `npm run build` y `npm run preview` ejecutan la versión final. Cambia marca, logos, textos y datos de ejemplo desde src/config/site.ts sin tocar las gráficas ni las animaciones.
El resultado depende de tu herramienta de IA y de los cambios que hagas. La demo muestra la dirección visual.
Detalles técnicos y requisitos
Requisitos
- Node.js 18, 20 o 22+ y npm para instalar con el lockfile incluido.
- Conexión a internet para Google Fonts y los logos externos de la demo.
- Demo visual: no conecta cuentas bancarias ni ejecuta transacciones. Las cifras son ejemplos.
- El logotipo y los cuatro logos de socios se cargan desde el dominio de la plantilla original; TA Associates, Harris, Siemens y Summit Partners son marcas de terceros mostradas como ejemplo: sustitúyelos antes de publicar.
- No incluido: herramienta de IA (y sus créditos), dominio y hosting.
Tecnologías
- React
- Vite
- TypeScript
- Tailwind CSS
- GSAP
- Motion
- Canvas
Implementadas en el paquete que descargas.
React 18 · Vite 6 · TypeScript · Tailwind CSS 3 · GSAP 3 · framer-motion · Canvas 2D
Herramientas de IA sugeridas
ClaudeCodexCursor
Compatibles con las instrucciones del diseño; no es una prueba registrada.
Compatibilidad probada: Sin prueba registrada todavía.
Paleta y tipografía
#000000#FFFFFF#1A1A1A#4F5D32#C4A35A#8EA85A#E6E0D2#1DC47D
- Inter Tight 300–700 (Google Fonts)
- Instrument Serif normal e itálica (Google Fonts)
Composición: Composición de escritorio a 1440 px con breakpoints a 1279, 1100, 1023, 959 y 767 px; probado a 1440, 768 y 390 px
Licencia y versiones
Úsalo en sitios propios y en proyectos finales de clientes, incluido uso comercial. No revendas ni redistribuyas el prompt, los archivos ni el sitio como plantilla. Leer la licencia
Procedencia: Paquete v1.0.0: código final del piloto 10 (dpl_4xeptS5G8eybHD7wjRXfgycTqTvb) con las tres gráficas nuevas, motion GSAP, fotos WebP y vídeo del hero locales; logo y logos de socios externos no incluidos. Avisos en LICENCIAS-Y-AVISOS.md.
- Versión
- v1.0.0 · Publicado 4 nov 2026