24Studio

24Studio is a Mumbai-based creative technology studio working across brand films, CGI, architectural visualisation, immersive experiences and events. Their work is visual and fast-moving, so a template website would have flattened it. They needed a site that feels as crafted as their showreel, shows the work front and centre, and turns visitors into enquiries they can actually follow up.

We designed and developed the whole site from scratch: no templates and no UI libraries. It sits on a custom design system built with CSS custom properties, fluid typography using clamp() and a single-breakpoint, mobile-first layout, so it scales cleanly from phone to big screen. The motion is the star: a scroll-driven hero with the video showreel, a word-by-word reveal, capabilities that pin and transition with clip-paths as you scroll, and a staggered work grid that opens projects in a YouTube lightbox.

• 01

  Showreel-first hero

  A scroll-driven hero built around the studio’s video showreel, so visitors see the work in the first second.

• 02

  Scroll storytelling

  A word-by-word reveal section and scroll-pinned capabilities with clip-path transitions.

• 03

  Work grid + lightbox

  A staggered grid of projects, each opening in a YouTube lightbox without leaving the page.

• 04

  12 interaction modules

  Parallax, magnetic buttons, a custom cursor, marquees and load animations, all in vanilla JS on one shared animation loop for smooth performance.

• 05

  Three ways to enquire

  A homepage form, a slide-over panel and a standalone QR contact page for events, all feeding one Google Sheet through a Next.js API route.

• 06

  Built to be found

  Sitemap, robots.txt, JSON-LD schema and Google Search Console indexing set up from day one.

• 07

  Ships on every push

  Hosted on Vercel with automatic GitHub deployments and the custom domain connected through GoDaddy DNS.