HALO — AI Personal-Finance App Launch
Money, minded.
A premium light-mode launch site for an AI personal-finance app. 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 — balance, insights, transactions and a self-closing savings ring — 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
- GSAP ScrollTrigger + Lenis 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 · Waitlist / CRM
The waitlist and all copy are a typed, front-end demo — wire the capture form to any provider (Mailchimp, HubSpot, your CRM) and the content to a CMS.
Delivered as full Next.js source. Swap the app screens, retheme the one accent gradient, and wire the waitlist 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, an alternating features page, a security posture page, a full pricing comparison table, a company page and a validated waitlist flow — everything a pre-launch fintech needs.
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
- GSAP ScrollTrigger + Lenis 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, gsap scrolltrigger + lenis 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, Lenis. 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.