Building an Animation-Rich Financial Services Platform on Next.js 15
Frontend Developer
Financial services companies need their websites to communicate two things: trust and scale. Dhan Orbis Capital needed animated statistics (AUM figures, clients served), scroll-driven reveals, and a premium feel — but without the typical JavaScript bloat that makes financial sites slow on low-end devices. I built it with zero JS animation libraries.
Communicating Scale Without Sacrificing Speed
Financial services websites face a unique tension: they need to impress with animated numbers, scroll reveals, and micro-interactions to communicate scale and professionalism — but their audience often accesses these sites on corporate networks or older devices where heavy JavaScript hurts performance.
Animated statistics (AUM, clients) are expected but typically require heavy JS libraries
Scroll-triggered animations need to feel premium, not janky on lower-end devices
Financial audiences expect fast, reliable experiences — no tolerance for loading spinners
Content changes infrequently but needs to look dynamic and engaging
CSS-First Animation Architecture
The key insight was that most scroll-triggered animations don't need JavaScript at all. CSS animations triggered by Intersection Observer (via tailwindcss-intersect) deliver 60fps performance because they run on the compositor thread, not the main thread. Only the counting numbers genuinely need JS.
Tailwind CSS Animated + Intersect
Used tailwindcss-animated for keyframe definitions and tailwindcss-intersect for Intersection Observer-triggered class additions. Scroll reveals, fade-ins, and slide-ups are all pure CSS.
react-countup for Statistics
The one place where JS animation makes sense: counting up from 0 to large AUM figures, client counts, and portfolio values. react-countup handles this with IntersectionObserver triggering.
Preline UI Foundation
Used Preline's pre-built Tailwind components as the design foundation — adapted their finance-themed patterns (stat cards, feature grids, testimonial layouts) to match brand requirements.
React 19 RC Adoption
Adopted Next.js 15 with React 19 RC to leverage use() for data fetching patterns and improved Suspense boundaries. Static export means React 19's improvements benefit hydration speed.
System Architecture
Interactive architecture map — click any node to trace its connections.
Data Flows (click a node to filter)
Building With Bleeding-Edge Tools
Using React 19 RC in production required careful evaluation of which new features were stable enough and which to avoid. The payoff was a forward-looking codebase.
Week 1: Design System & Animation Audit
Evaluated animation requirements. Classified each into 'can be CSS' vs 'needs JS'. Result: only counting animations needed JavaScript. Everything else could be CSS.
Week 2: Component Architecture
Built page sections using Preline UI foundations with customized Tailwind styling. Integrated tailwindcss-intersect for scroll-triggered animation classes.
Week 3: Statistics & Interactions
Implemented react-countup for AUM and client statistics with IntersectionObserver triggers. Added micro-interactions for hover states and card animations.
Week 4: Performance & Deploy
Optimized for static export, tested across devices (especially lower-end Android), and deployed to CDN. Verified 60fps scroll animations via Chrome DevTools.
Premium Feel, Minimal Weight
The final site feels rich and dynamic — scroll reveals, counting statistics, smooth transitions — but achieves this with almost zero JavaScript animation overhead.
Scroll-triggered animations running at 60fps via CSS compositor thread — not blocking the main thread
Animated AUM figures and client counts that trigger when scrolled into view
Zero JavaScript animation libraries in the bundle (no Framer Motion, no GSAP)
Static export deployed to CDN for instant global delivery
React 19 RC patterns (use() hook) for modern data fetching
Performance Meets Presentation
The site proves you don't need JavaScript animation libraries to create engaging financial services experiences. CSS does the heavy lifting.
What I Took Away
“CSS animations are criminally underused”
Developers reach for Framer Motion or GSAP by default, but 90% of scroll-triggered animations can be pure CSS. The performance difference is dramatic — compositor thread vs main thread.
“Intersection Observer is the animation trigger, not JS”
tailwindcss-intersect adds classes when elements enter the viewport. Combined with CSS @keyframes, you get scroll-triggered animations without a single line of JavaScript animation code.
“React 19 RC was stable enough for static sites”
For a static-export site, React 19 RC's risks were minimal — no server runtime to worry about. The improved hydration and use() patterns made the DX noticeably better.
Tech Stack
Framework
UI
Animations
Deployment
Building a Smart Parking App with AI Support & Real-Time Geolocation
Tam Tam Park (Social Parking) • 2023 – 2024