In past Developer Spotlights, we’ve featured devs who’ve pushed the craft of building award-winning websites. But web development is more than just translating great design—Max Barvian is one of those pioneering devs who have a deep understanding of the core mechanics of frontend development. In 2024, he shared one of the coolest CSS-powered, scroll-driven animations with us here on Codrops. We can’t shine the light enough on Max, as his work represents the next frontier in web development—one that merges deep technical knowledge with creative experimentation.
Hi! My name is Max Barvian. I’m a UI engineer currently working at Clerk.
Projects I’m proud of
NumberFlow
NumberFlow is an animated number component for React, Vue, Svelte, and vanilla TS/JS. It was heavily inspired by the number animations in the wonderful Family app:
I built NumberFlow as a custom element with wrapper components for each framework. All the animations are powered by the Web Animations API (WAAPI). It uses the FLIP technique, registered custom CSS properties, spring-based linear() timings, new CSS math functions, and composited KeyframeEffects for better interruption handling.
The response to NumberFlow has been surreal. 𝕏 is currently using it for their analytics dashboard, and Elon Musk even retweeted this screenshot of it:
barvian.me
When it came time to rebuild my portfolio last year, my goal was to make some combination of Godly and the Apple TV home screen. I’d really wanted a site like that for years, with a grid of project videos that smoothly transitioned into detail pages, but never felt confident about pulling it off. Then I found the View Transitions API. Despite its shortcomings (i.e. no interruption handling), it felt like the perfect tool for the job. View Transitions using snapshots of “old” views seemed perfect for the video grid, and meant I wouldn’t have to worry about animating a bunch of <video> elements at the same time. Ultimately, I had to use a few more tricks to get decent performance during the transitions, but I still can’t imagine having built the site with anything else. I was honored when Googlers Addy Osmani and Una Kravets shared my little site as a demo for View Transitions.
Musée
I stumbled upon this incredible design by Kevin Pham on Dribbble a couple years ago and immediately fell in love with it. I had wanted to experiment with CSS Scroll Snapping and 3D scenes for a while, and this seemed like the perfect candidate. I ended up using React Three Fiber, Motion for React, and Tailwind to implement it. It’s not perfect (there’s a pesky bug with mobile Safari on the last slide that I haven’t been able to fix), but I’m pretty happy with how it turned out. I was honored when Guillermo Rauch, Paul Henschel, Matt Perry, and Three.js all reposted it.
Fluid type projects
This work is probably the most boring on the list but I’m still happy with it. I was working on a Tailwind plugin for CSS clamp() when I encountered some longstanding accessibility issues with fluid type. I didn’t want to bring those issues into my plugin, so I spent a whole Sunday watching math videos on YouTube and talking to my physicist brother to figure out how to work around them. I eventually published the results in Smashing Magazine with some help from their great editors there, and was honored to see Adrian Roselli reference the work in his original article. Utopia, a popular fluid clamp generator, also integrated the findings into their tool.
About me
I got into creative development in a 7th grade journalism class, when my teacher made me the webmaster for our school newspaper. I asked my parents for Dreamweaver that year for Christmas and got my first freelance client a year after that. I’ve since moved on from Dreamweaver 🙂, but I’ve never wanted to do anything else professionally. I feel lucky that I’ve been able to make a career out of my passion.
Current challenges
At Clerk I’m working on building the component library we use for our dashboard. It’s been a fun challenge to try to build something that equally emphasizes UX and DX! I hope to share more on 𝕏 as it progresses. React Aria Components has been a huge inspiration here.
Tools
I basically live in VS Code writing React, Tailwind, and Motion code all day.
Philosophy
Someone I follow on 𝕏 thought NumberFlow was a good example of a quote by Charlie Munger:
“Take a simple idea and take it seriously.”
—Charlie Munger
That’s stuck with me over the last few months, and I think it’s increased my enjoyment of projects I previously would’ve dismissed as too routine or boring.
It’s an honor to be featured on a site I’ve been reading my whole career. Thanks a lot, Manoela and the Codrops team!