NuvoraPersonal finance
- Scroll animation
- Carousel
What makes it special
- Video hero
- Scroll animation
- Titles revealed line by line from a mask with GSAP (0.8 s, once per section) and supporting text grouped
- Three SVG visualizations that build as they enter: weekly columns and balance curve, projection with a band and segmented donut
- Value readout on hover, focus and tap in all three charts
- Cards with a maximum 4° tilt and a sheen that follows the pointer (fine pointer only)
- Slow particles on a 2D canvas behind the black bands (40 on desktop, 12 on mobile)
- Looping hero video with a fade; prefers-reduced-motion leaves everything static
What's included
- Prompt to recreate and customize the design with AI.
- Site code and files: images, fonts and licences.
- Interactive demo and instructions.
- Use on your own sites and final client projects.
Demo sections and screens (3)
- Hero with landscape video, italic serif headline, story card and partner carousel
- Analytics: monthly summary with columns by week and a balance curve, plus a daily card
- Advisor: queries, projection chart with an uncertainty band and category donut
What you can customize
- Brand, palette, copy and sample chart data (src/config/site.ts)
- Your own logo, favicon and partner logos (required: the demo’s are external and belong to third parties)
- Card photos and hero video (public/assets)
- Breakpoints and measurements (variables in src/index.css)
How to start
- Copy the prompt and download the files.
- Take them to your AI tool and ask for the changes: brand, copy and images.
- Review the result and publish it on your domain.
Download the package and copy the prompt: your AI tool works on sitio/ with REPRODUCCION.md, recreacion-spec.json and the screenshots as reference. `npm ci`, `npm run build` and `npm run preview` run the final version. Change the brand, logos, copy and sample data from src/config/site.ts without touching the charts or the animations.
The result depends on your AI tool and the changes you make. The demo shows the visual direction.
Technical details & requirements
Requirements
- Node.js 18, 20 or 22+ and npm to install with the included lockfile.
- An internet connection for Google Fonts and the demo’s external logos.
- Visual demo: it does not connect bank accounts or execute transactions. The figures are examples.
- The logo and the four partner logos are loaded from the original template’s domain; TA Associates, Harris, Siemens and Summit Partners are third-party trademarks shown as examples: replace them before publishing.
- Not included: AI tool (and its credits), domain and hosting.
Technologies
- React
- Vite
- TypeScript
- Tailwind CSS
- GSAP
- Motion
- Canvas
Implemented in the package you download.
React 18 · Vite 6 · TypeScript · Tailwind CSS 3 · GSAP 3 · framer-motion · Canvas 2D
Suggested AI tools
ClaudeCodexCursor
Compatible with the design instructions; not a recorded test.
Tested compatibility: No recorded test yet.
Palette and typography
#000000#FFFFFF#1A1A1A#4F5D32#C4A35A#8EA85A#E6E0D2#1DC47D
- Inter Tight 300–700 (Google Fonts)
- Instrument Serif normal e itálica (Google Fonts)
Layout: Desktop composition at 1440 px with breakpoints at 1279, 1100, 1023, 959 and 767 px; tested at 1440, 768 and 390 px
Licence & versions
Use it on your own sites and in final client projects, including commercial use. Do not resell or redistribute the prompt, the files or the site as a template. Read the licence
Provenance: Package v1.0.0: final code of pilot 10 (dpl_4xeptS5G8eybHD7wjRXfgycTqTvb) with the three new charts, GSAP motion, and local WebP photos and hero video; external logo and partner logos not included. Notices in LICENCIAS-Y-AVISOS.md.
- Version
- v1.0.0 · Published Nov 4, 2026