HALO — AI Personal-Finance App Launch
Money, minded.
A premium light-mode fictional launch theme for a personal-finance product. The hero is a pure-CSS-3D phone that tilts and drifts as one scrubbed GSAP timeline swaps four real DOM/SVG app screens inside it — sample balance, insights, transactions and goal screens — then splits into three phones at the finale. A calm violet→teal system, a feature bento grid, count-up metrics, three-tier pricing and an accessible FAQ round out a complete, static-export product site.
Role · Design + front-end build (CSS-3D scroll choreography, no WebGL) · Updated Jul 2026
- 6 page types: scroll-cinema home, features, security, pricing, company, waitlist
- The CSS-3D phone + four reusable DOM/SVG app-screen components
- Native scroll + GSAP motion foundation with a reduced-motion matchMedia gate
- Typed pricing, FAQ and content data — clean CMS/CRM seams
- Delivery
- 3–4 days
- Licence
- One-time licence · full source
- Support
- 14 days setup support
- Updates
- Free updates included
Backend · CMS / consented lead capture
The sample finance content and local-only form are typed front-end demos. Validate every product and trust claim before connecting your consented CRM workflow.
Delivered as full Next.js source. Replace every sample balance, price and trust claim, retheme the accent, and connect the consented form to your provider—no WebGL to maintain.
What makes it special
A phone that performs on scroll
The device is built entirely from styled DOM with transform-style: preserve-3d — no image, no WebGL. One scrubbed ScrollTrigger timeline tilts it in 3D, drifts it across the viewport, and crossfades four real app screens inside its frame.
App screens drawn, not screenshotted
Balance + spend donut, an insights bar chart, a transaction feed and a savings ring that fills on scroll are all live SVG/DOM — crisp at any resolution, instantly rethemeable, zero image weight.
Splits into three at the finale
The single phone fans into three as the cinema ends — one app, every account — with neutral SVG store badges. A choreographed payoff that still degrades to a calm static layout under reduced motion.
A complete launch IA
Home cinema, features, evidence-first trust content, illustrative pricing, a fictional company premise and a validated local-only form—without presenting the concept as a live financial service.
Calm, accessible, fast
WCAG 2.2 AA intent, keyboard-operable FAQ and nav, visible focus, and every animation gated behind prefers-reduced-motion. Self-hosted fonts, no runtime external requests, static export deploys anywhere.
What’s included
- 6 page types: scroll-cinema home, features, security, pricing, company, waitlist
- The CSS-3D phone + four reusable DOM/SVG app-screen components
- Native scroll + GSAP motion foundation with a reduced-motion matchMedia gate
- Typed pricing, FAQ and content data — clean CMS/CRM seams
- Full Next.js 15 / TypeScript source, static export, WCAG 2.2 AA intent
More Finance & Fintech templates
Explore more collections
Frequently asked
- What do I get when I buy HALO?
- A one-time licence with the full, editable source code, including 6 page types: scroll-cinema home, features, security, pricing, company, waitlist, the css-3d phone + four reusable dom/svg app-screen components, native scroll + gsap motion foundation with a reduced-motion matchmedia gate. 14 days setup support and free updates included.
- What is HALO built with?
- It's a Next.js marketing site, built with Next.js 15, TypeScript, Tailwind v4, GSAP ScrollTrigger, Authored CSS foundation. You receive the complete source to host and extend anywhere.
- Can YantraCore customise HALO for my brand?
- Yes — buy it as-is for $3,900, or have YantraCore tailor it to your brand, content and requirements. Start from this page or commission a custom build.
- How fast is delivery?
- Delivery is 3–4 days after purchase.
Make HALO yours.
Buy it as-is, or have YantraCore tailor it to your brand and content.