Tech Stack
Typography
Color Palette
Overview
A landing page for Pulse, a personal finance awareness app that challenges the sterile conventions of fintech design. The site features noise grain textures, scroll-linked word-by-word text reveals, parallax depth effects, beautifully designed app mockups, and a philosophical narrative arc that moves from problem to solution to manifesto — all wrapped in a navy + teal palette with Instrument Serif headlines.
The Ideation Process
Pulse started with a simple question: why does every finance app look the same? The fintech space is saturated with sterile blue-on-white layouts and stock photography that feels cold and impersonal. We wanted to prove that a finance product could feel warm, philosophical, and deeply human — without sacrificing the trust signals users need. The navy (#0F1729) was chosen as the primary dark because it reads as trustworthy without being corporate. Teal (#2DD4A8) serves as the positive accent — it's the color of growth, health, and upward momentum. Coral (#E8604C) provides an emotional counterpoint, used sparingly for emphasis and calls to action. The warm white background (#FAFAF8) with subtle noise grain textures creates that tactile, paper-like quality that makes digital feel human. Instrument Serif for headlines adds editorial sophistication — it's the kind of font you'd see in a New York Times feature, not a banking app, which is exactly the point.
Design & Development
The page follows a narrative arc: problem → solution → philosophy → call to action. The hero opens with a GSAP-powered character-by-character text animation on 'Feel your finances.' — each letter rotates in from below the baseline with a staggered delay, creating a typewriter-meets-kinetic-typography effect. Below it, a custom-designed phone mockup shows the app's dashboard with real financial data, spending charts, and transaction lists — all designed from scratch as CSS/SVG compositions, not screenshots. The Features section uses a 3-column card grid with scroll-triggered InView fade-up animations and hover effects. How It Works uses an alternating timeline layout with a scroll-progress line that fills with teal as you scroll, paired with four interactive visual mockups (bank connection flow, spending dashboard, AI insights cards, and financial awareness score). The App Showcase section puts a large phone mockup center-stage with three tabbed screen states (Overview, Search, Insights) — clicking each tab smoothly crossfades the phone's content. The Philosophy section uses the most ambitious animation: a scroll-linked word-by-word text reveal where each word fades from 15% to 100% opacity as you scroll, creating a reading experience that feels like the page is speaking to you. The dark background with animated grain texture adds atmosphere. The CTA section features magnetic buttons (spring-physics cursor tracking) and pulsing decorative circles.
What Makes It Unique
Noise grain texture system with CSS SVG filters + animated grain overlay — creates a tactile, paper-like warmth across the entire page that humanizes the fintech experience
Scroll-linked word-by-word text reveal in the Philosophy section — each word transitions from 15% to 100% opacity based on scroll progress, creating a meditative reading experience
Custom-designed phone mockups built entirely in CSS/SVG — dashboard with spending charts, transaction lists, search interface, and weekly pulse reports, not screenshots
GSAP character-by-character hero animation with rotateX transforms and staggered delays — letters appear to flip up from below the baseline
Scroll-progress timeline in How It Works — a teal line fills the vertical timeline as you scroll through the four steps, synced with Framer Motion's useScroll
Tabbed app showcase with AnimatePresence crossfade — three distinct app screens (Overview, Search, Insights) swap with smooth y-axis transitions
Magnetic CTA buttons using Framer Motion spring physics — buttons follow cursor with dampened spring motion on hover
Parallax depth system — hero content fades and translates on scroll, Philosophy background shifts at different rate than content
Technical Highlights
- Next.js 15 with React 19 and Turbopack for fast development
- Hybrid animation system: GSAP for character-level hero animation + Framer Motion for scroll-triggered reveals and layout animations
- Custom InView component wrapping Framer Motion's useInView with configurable variants, transitions, and viewport margins
- CSS noise grain via inline SVG data URIs with feTurbulence filters — no external image assets needed
- Animated grain overlay using CSS @keyframes with translate transforms for dynamic texture movement
- Framer Motion useScroll + useTransform for parallax and scroll-linked opacity/position transforms
- Tailwind CSS v4 with CSS custom properties for a complete design token system (colors, fonts, spacing)
- Responsive design with mobile-first approach — phone mockups scale gracefully, timeline collapses to single-column
The Result
Pulse demonstrates our ability to build narrative-driven, animation-rich landing pages for fintech products. The site proves that finance doesn't have to look sterile — it can be warm, philosophical, and deeply human while maintaining the trust signals (encryption badges, security messaging, read-only emphasis) that fintech users need. The custom app mockups showcase our UI design capabilities beyond just web — we designed a complete mobile app interface as part of the landing page. The scroll-linked text reveal and noise grain textures show our mastery of the kind of subtle, atmospheric animation that separates premium sites from templates. This is the kind of project that makes clients say 'I want my product to feel like that.'
Want something like this?
Every project starts with a conversation. Tell us about your brand, your goals, and your timeline — we'll handle the rest.