Case study
CodeMirror
Scroll-driven company website and content admin for a Pune design, development, and automation studio.
CodeMirror is a Pune-based technology partner that designs, builds, and automates digital products. I built their new website end to end — a scroll-driven particle hero, pinned services and process scenes, SEO-ready service pages, and an admin panel where the team edits services, work, reviews, jobs, and enquiries without touching code.
Gallery
Contribution
- Led the build of the new CodeMirror website, from the first layout to the production-ready Next.js app.
- Built the scroll-driven Three.js particle hero that morphs through design, develop, and automate phases.
- Implemented the pinned services deck and horizontal process timeline with GSAP ScrollTrigger and Lenis.
- Shipped SEO-ready service pages with per-service metadata, FAQs, sitemap, robots, and JSON-LD.
- Built an admin panel on Supabase for services, work, reviews, jobs, enquiries, and site settings.
Outcome
Delivered a modern, admin-editable company website that presents CodeMirror’s design, development, and automation work in one clear scroll story.
Technical decisions
Scroll-choreographed marketing site
A Next.js App Router site where GSAP ScrollTrigger and Lenis drive the hero, the services deck, and the process timeline from one shared scroll clock.
Next.js · GSAP · Lenis · Three.js
Content stored outside the code
Services, projects, reviews, jobs, and settings live in Supabase behind a small store layer, seeded with starter content on first run.
Supabase · TypeScript
Admin panel for the team
A protected admin area to edit every public section, read contact enquiries, and post job openings, so updates no longer need a developer.
Next.js · Supabase
Challenges
Heavy motion without a slow page
A WebGL particle hero plus several pinned scroll scenes can easily hurt load time and feel janky on phones.
Resolution: Kept the particle shaders lightweight, pinned scenes only where there is room, and fell back to plain layouts on small screens and for reduced motion.
One team, many services
Eight services across design, development, and automation had to read clearly without turning the homepage into a catalogue.
Resolution: Grouped the story into design, develop, and automate phases on the homepage, and gave each service its own SEO page for detail.