Bhupathi Studio: a Framer site that shows how it's built

I was starting out on my own with no client sites I could show, so the site itself had to be the proof: a visitor should be able to judge the craft without reading a single claim.

A headline inside a box-model overlay, the kind browser dev tools draw, with margin and padding labels that show the real values at each breakpoint.

A page that reports on itself: its Lighthouse score, largest paint and page weight, measured on the live site.

Motion that measures: dividers draw like a ruler and headings rise out of a mask. One idea, used consistently.

Case-study pages built from components and variants, with a code component for the motion.

A small Framer plugin I wrote to build and update the pages, so changes stay consistent across every breakpoint.

A Framer site can be fast, precise and maintainable when someone who writes code builds it. The engineering is part of the design here, not hidden behind it.

Built in Framer with components, variants and React code components. Live: https://bhupathi-studio.framer.website