The Brief
Kamakshi Sikha is an ICF-certified executive coach whose clients include C-suite leaders at Fortune 500 companies. Her work is deeply personal, deeply transformative, and deeply expensive. The challenge was not building a portfolio — it was building a digital experience that communicates the caliber of her practice before a single word of copy is read. Her previous site was competent, professional, and forgettable. It looked like every other coaching website: stock photos, testimonial carousels, and a "Book a Call" button. It communicated nothing about what it actually feels like to work with her — the presence, the precision, the quiet intensity that her clients describe. We set out to build a portfolio that functions like a brand film. Not a website with animations, but a cinematic experience that unfolds as you scroll — where every transition, every reveal, every moment of stillness is intentional. The goal was to make the visitor feel something before they understand anything. By the time they reach the contact section, the decision to book is not intellectual — it is emotional. They have already experienced a taste of the transformation she offers, delivered through the medium of the web itself. Equally important was content autonomy — the site needed a CMS integration (Keystatic) that lets Kamakshi publish blog posts, insights, and testimonials without developer involvement, keeping the portfolio alive as a content platform. The technical constraint was equally demanding: this experience had to perform flawlessly on mid-range Android devices. Not just flagship iPhones — mid-range devices that represent the majority of her Indian market audience. Awwwards-caliber animation on a budget phone. That was the challenge.
The Challenge
Animation performance on the web is a solved problem until it is not. On a MacBook Pro with a 120Hz display, you can throw GSAP, Framer Motion, and Lenis at a page simultaneously and it will look gorgeous. On a Redmi Note running Chrome with 4GB of RAM and a 60Hz display, that same page will stutter, drop frames, and drain the battery in twenty minutes. The gap between these two experiences is where most Awwwards-caliber sites fail in real-world deployment. They are built for the judges, not for the audience. We refused to accept that trade-off. The experience had to be indistinguishable in quality across the device spectrum — not identical in fidelity (a 60Hz screen cannot display 120Hz animation), but identical in perceived smoothness, timing, and emotional impact. This required a fundamentally different approach to animation architecture. Instead of layering animation libraries and hoping for the best, we needed a GPU-compositing strategy that kept the main thread free, a performance budget that constrained every animation to operations the GPU can handle natively (transforms and opacity), and a progressive enhancement system that scales complexity based on device capability. The second challenge was conversion. The site needed to do more than impress — it needed to convert visitors into consultation bookings. The animation could not be self-indulgent. Every scroll-driven sequence had to serve the narrative: establishing credibility, building emotional resonance, and creating the conditions for a high-ticket buying decision. If a visitor left thinking "cool website" but did not book, the project failed.
Awwwards-caliber animation performance on mid-range Android devices with 4GB RAM
GPU-composited animation pipeline that keeps the main thread free for interaction
Progressive enhancement that scales visual complexity based on device capability
Conversion-driven narrative design — every animation serves the path to booking
The Approach
We approached the Kamakshi Sikha portfolio as a filmmaking project that happens to be delivered through a browser. The process started with storyboarding — not wireframing, not component design, but literal scene-by-scene storyboarding of the scroll experience. Each "scene" (viewport-height section) was designed with a narrative purpose: establish mood, introduce the person, demonstrate credibility, create emotional resonance, present the offer, invite action. The animation was then engineered to serve this narrative structure, not the other way around. The technical architecture uses three animation systems working in concert: Lenis for smooth scrolling and scroll-position tracking, GSAP for scroll-driven timeline animations with SplitType for character-level text reveals, and Framer Motion for component-level transitions and micro-interactions. The key insight was that these systems must not compete for resources — each one handles a specific layer of the animation stack. Beyond animation, we integrated Keystatic CMS for content management — giving Kamakshi full autonomy to publish blog posts, coaching insights, and testimonials through a git-based CMS that produces Markdoc content without developer involvement.
Scroll-Driven Storyboarding
Before any code was written, we created a frame-by-frame storyboard of the scroll experience. Each section was designed as a cinematic scene with an entrance, a focal point, and an exit. The transitions between sections were designed to create continuity — the exit animation of one section flows into the entrance of the next, creating the sensation of continuous motion rather than discrete page sections. This storyboard became the specification that every technical decision was measured against.
Animation Orchestration Architecture
Three animation systems, three responsibilities. Lenis owns the scroll: it provides buttery-smooth native-feel scrolling with inertia, and exposes a normalized scroll progress value (0-1) that the other systems consume. GSAP owns the scroll-driven timelines: complex multi-element animations that are tied to scroll position — parallax, reveals, scale transformations — all driven by GSAP ScrollTrigger reading Lenis scroll values. Framer Motion owns component transitions: entrance/exit animations, hover states, and micro-interactions that are not scroll-dependent. This separation ensures that the systems never conflict — they operate on different layers and different triggers.
GPU-Compositing Strategy
Every animation in the portfolio is constrained to GPU-compositable properties: transform (translate, scale, rotate) and opacity. No width, height, margin, padding, or color animations. No layout-triggering property changes. This constraint means every animation runs on the compositor thread, completely independent of the main thread. The main thread can be busy parsing JavaScript, running event handlers, or doing garbage collection, and the animations continue at 60fps. We use will-change CSS hints sparingly and strategically — only on elements that are about to animate, removed after animation completes — to manage GPU memory without over-allocation.
Performance Budgets and Progressive Enhancement
We established performance budgets: total page weight under 1.5MB, JavaScript bundle under 200KB gzipped, Largest Contentful Paint under 2 seconds, and animation frame budget of 16ms (60fps) on a baseline device (Snapdragon 665, 4GB RAM). A device capability detection system runs on initial load, measuring actual frame render times during a diagnostic animation sequence. Based on the results, the system selects one of three complexity tiers: full (all animations), reduced (simplified parallax, fewer particles, simpler transitions), or minimal (essential transitions only, no parallax). The tier selection is invisible to the user — every tier feels polished and intentional, not degraded.
Conversion-Driven Narrative Design
The scroll narrative follows a deliberate emotional arc. Section one: atmosphere. Dark, cinematic, textural — establishing that this is not an ordinary coaching website. Section two: introduction. Kamakshi appears through a slow reveal, shot like a documentary subject. Section three: credibility. Client logos, certifications, and impact numbers, animated with restraint. Section four: philosophy. Her approach to coaching, presented as typographic cinema. Section five: testimonials. Client voices, not as a carousel but as a scrolling sequence with individual typographic treatment. Section six: invitation. The booking call-to-action, positioned as a natural conclusion to the narrative, not an interruption of it.
Technical Deep Dive
The technical architecture of the Kamakshi Sikha portfolio is an exercise in disciplined animation engineering. The site achieves visual richness through precise orchestration of three animation systems, not through brute-force complexity. Every animation is optimized for the GPU compositor, every asset is optimized for network delivery, and every interaction is optimized for the emotional narrative.
Lenis Smooth Scroll Implementation
Lenis replaces the browser's native scroll behavior with a custom scroll engine that provides consistent, buttery-smooth scrolling across all browsers and devices. We configure Lenis with custom lerp (linear interpolation) values that create a specific scrolling "feel" — slightly heavier than default, with satisfying inertia that encourages slow, deliberate scrolling. The Lenis instance exposes a scroll progress value that drives all scroll-dependent animations. We hook into Lenis's requestAnimationFrame loop to sync GSAP ScrollTrigger updates, ensuring that scroll-driven animations are perfectly synchronized with the scroll position without any lag or overshoot.
GSAP ScrollTrigger Orchestration
Each section has a GSAP timeline controlled by ScrollTrigger, with the trigger connected to Lenis scroll events. Timelines are authored as proportional sequences — animation progress from 0 to 1, mapped to scroll progress through the section. This proportional authoring means animations play at the same relative speed regardless of how fast the user scrolls. We use ScrollTrigger's scrub parameter with a smoothing value of 0.5 to prevent animations from feeling "jerky" during rapid scroll changes. Pin-spacing is carefully calculated to maintain natural document flow while creating the illusion of scene-locked animations.
Framer Motion Component Architecture
Component-level animations use Framer Motion's declarative API with custom variants that define entrance, active, and exit states. The variants are designed as a system — consistent easing curves, consistent duration scales, consistent motion principles (elements always enter from a meaningful direction, not arbitrary). We use Framer Motion's useInView hook for viewport-triggered animations that are not scroll-driven but scroll-aware — they trigger once when the element enters the viewport, creating a reveal effect that complements the scroll-driven GSAP animations without conflicting with them.
Asset Optimization Pipeline
Images use Next.js Image component with aggressive optimization: WebP format, responsive srcset, lazy loading with blur-up placeholders, and priority hints for above-fold assets. Typography uses variable fonts with unicode-range subsetting — only the characters used on the page are loaded, reducing font payload by 60-70%. Video assets (used for background textures) are encoded as H.265 for Safari and VP9 for Chrome, with poster frames that display immediately while video loads. The total above-fold payload is under 400KB, achieving sub-2-second LCP on 4G connections.
Device Capability Detection
On initial load, the site runs a silent performance diagnostic: it triggers a test animation sequence (invisible to the user) and measures actual frame render times over 60 frames. If the median frame time is under 12ms, the device gets the full animation tier. If it is between 12-20ms, the reduced tier is activated — simplified parallax, fewer simultaneous animations, smaller transform distances. If it exceeds 20ms, the minimal tier activates — essential transitions only, with all scroll-driven animations replaced by simple opacity fades. The diagnostic runs in under 200ms and the results are cached in sessionStorage for the duration of the visit.
Key Features
Scroll-Driven Cinematic Narrative
A six-scene story that unfolds as you scroll, designed with the pacing and intentionality of a brand film. Each section has a narrative purpose, and the transitions between them create continuous cinematic flow.
Triple-Layer Animation System
Lenis for scroll physics, GSAP for scroll-driven timelines, Framer Motion for component transitions. Three systems, zero conflicts, one unified experience that feels effortlessly smooth.
Progressive Performance Scaling
Automatic device capability detection that scales animation complexity across three tiers. Every device gets a polished, intentional experience — not a degraded one. Mid-range phones get a beautiful site, not a broken one.
Typographic Cinema
Text as a visual medium. Headlines that reveal character by character, philosophy statements that build as you scroll, testimonials with individual typographic treatment. The words are not just read — they are experienced.
GPU-Composited Animation Pipeline
Every animation runs on the GPU compositor thread: transforms and opacity only. The main thread stays free for interaction, JavaScript execution, and garbage collection. Result: consistent 60fps even during heavy animation sequences.
Conversion-Optimized Journey
The scroll narrative builds to a natural conclusion: the booking invitation. By the time visitors reach it, they have experienced the brand, absorbed the credibility signals, and felt the emotional resonance. The CTA is not an interruption — it is the obvious next step.
Keystatic CMS for Content Autonomy
Blog posts, coaching insights, and testimonials are managed through Keystatic CMS with Markdoc content format. Kamakshi can publish and update content independently through a git-based editorial workflow — keeping the portfolio alive as a content platform without developer dependency.
Dark Mode with next-themes
System-aware dark mode powered by next-themes with carefully calibrated color tokens for both themes. The cinematic aesthetic adapts to user preference — dark mode deepens the brand film quality, while light mode maintains readability for content-heavy pages like the blog.
The Results
The Kamakshi Sikha portfolio launched as a cinematic web experience that redefines what a coaching portfolio can be. The site achieved consistent 60fps animation performance across the target device spectrum — from flagship iPhones to mid-range Android devices with 4GB of RAM. The progressive enhancement system activated the reduced animation tier on approximately 30% of visitors and the minimal tier on under 5%, meaning 95% of visitors experienced the full or near-full animation suite. The Lighthouse performance score consistently measured above 90, with Largest Contentful Paint under 1.8 seconds on 4G connections. The total page weight was 1.2MB — well under the 1.5MB budget. Most importantly, the site delivered on its primary objective: conversion. In the first quarter after launch, consultation bookings increased by 40% compared to the previous site. The average session duration nearly tripled, indicating that visitors were engaging with the full scroll narrative rather than bouncing. The site demonstrated that Awwwards-caliber animation and real-world performance are not mutually exclusive — they are complementary when the animation architecture respects the constraints of the device.