01 — Live Site · Full Page
Fix My Itch is an AI-powered campaign microsite by Razorpay, launched on National Startup Day 2026. It surfaces 10,000+ real, AI-curated problems sourced from 50,000+ people across India — built as a free resource for the next generation of founders.
The initiative repositioned Razorpay not just as a payments infrastructure company, but as an active stakeholder in shaping what India builds next — tied directly to India's 2047 vision.
The Razorpay design team had finalized the visual direction in Figma — bold editorial type, stark black-and-blue palette, editorial card layouts, and a distinctive scratch-card entry mechanic. My brief: translate this into a fully live, production-ready Framer site. Responsive. Performant. Pixel-faithful.
What made this challenging wasn't just fidelity — it was the nature of the interactions. The scratch card reveal, floating problem-card grid, filterable problems table, and dense scroll animations all needed to feel native, not cobbled together.
The entry mechanic was the most memorable piece of the site. Built as a custom Framer component using canvas-based scratch logic, requiring precise pointer event handling to feel tactile and responsive across both desktop mouse and mobile touch input.
Floating typographic cards with parallax motion give the section visual depth. Staggered animation on scroll was tuned so the cards feel alive without becoming distracting.
Swipeable cards on mobile and a horizontal scroll grid on desktop. The swipe gesture needed careful attention to feel native — not like a typical slider plugin.
10,000+ problems filterable by 16 industry categories, sortable by Itch Score. Implemented using Framer's CMS with client-side filtering — fast without page reloads, legible at all breakpoints.
All three breakpoints ran in parallel on the Framer canvas simultaneously. Every section was adapted, not just scaled — especially the hero type sizing and problem card grid reflow.
A working replica of the entry interaction built for Fix My Itch. Scratch away to reveal a real problem from India's dataset.
A canvas-based scratch mechanic greets every visitor. Physically satisfying on desktop mouse and mobile touch — creates a moment of ritual before the content reveals itself.
Typographic cards with real problems float with subtle parallax offset on scroll — communicating the breadth of India's challenges without being overwhelming.
Problem cards are swipeable on mobile with native-feeling momentum — built natively in Framer's interaction system, no janky plugin behaviour.
The All Problems database filters instantly across 16 industry categories with no page reload — keeping the exploration flow fast and uninterrupted.
The Framer canvas ran all three breakpoints in parallel — visible simultaneously during development. Every section was adapted, not just scaled. Typography, grid reflow, and gesture interactions all tuned per breakpoint.
Fix My Itch was submitted to the Shorty Awards — a testament to the campaign's cultural resonance. Engagement metrics significantly exceeded benchmarks for new campaign launches.
The scratch card wasn't a visual flourish — it was the first emotional beat of the campaign. Getting it to feel right across input types required the same rigour as building any core feature.
Multi-breakpoint, CMS-driven, animation-heavy sites reveal limits small projects don't surface. Performance, component architecture, and state management become real concerns.
When developing from someone else's design, pixel fidelity is a professional value. The designer's vision deserves to survive the handoff intact.
This was my first project at Razorpay, days after joining. Shipping it cleanly — live, responsive, and recognised — set the tone for everything that followed.
