Designing a video-driven growth agency experience in Framer
No Growth — A Video-First Website Built in 5 Days
The Challenge
Five days before a major industry conference, I got a call from James, the founder of No Growth, through a referral.
The brief was clear:
“We need a completely new website before the conference—something modern, sleek, and worthy of the work we do.”
The old site felt dated and failed to represent their new brand identity or the quality of their campaigns.
The new version had to:
Feel bold, minimal, and on-brand
Showcase 120+ video ads with smooth playback
Include a custom lead form for new clients
Launch in less than a week
The Problem
Hosting 120 videos directly in Framer wasn’t feasible. It would inflate hosting costs, slow performance, and make the site heavy for mobile users.
We explored other options:
YouTube: easy to embed but brought unwanted branding and controls
Vimeo: cleaner UI but limited control and not ideal for custom performance tuning
Neither could deliver the refined experience I had in mind.
The Solution
I turned to Bunny.net, a CDN built for speed and control, where I could host all video assets, optimize delivery, and design my own playback experience inside Framer.
1. Dual Video Players
To handle different types of media, I built two custom video players—each with a specific purpose.
The Beautiful Video Player (MP4)
Used for short-form and looping ads throughout the site.
It featured:
A blur-up load effect for smooth transitions
Custom playback controls designed around the No Growth brand
Lightweight code for instant load and zero layout shift
Native Framer integration so every clip remained responsive
The HLS Player (Bunny Stream)
For the cinematic hero video—a 1.5-minute, 600 MB showcase—I built the first native HLS streaming player on Framer.
It streamed adaptively through Bunny Stream, automatically adjusting quality to match the user’s connection.
Highlights:
Adaptive bitrate playback for consistent performance
Blur preview for instant first paint
Custom UI matching brand colors
Optimized playback logic to keep the page light and fluid
The result: a cinematic experience that loaded faster than most image-heavy hero sections.
2. Smart CMS Architecture
To make video management scalable, I connected Bunny CDN links directly to Framer CMS.
Each video record contained metadata—title, description, category, and CDN URL—then auto-rendered through custom Framer components tailored to its type (long-form, short-form, static, hero).
The No Growth team can now update or add new videos anytime without touching code.
With categories to separate videos in through the CMS itself
3. Custom Contact Form
I built a custom lead form in Framer with styled checkboxes and radio options that matched their brand system.
It turned a basic inquiry form into a polished touchpoint that felt consistent with the rest of the site.
4. Branded Pre-Loader
To complete the experience, I designed a minimal pre-loader that gives just enough buffer time for homepage videos to load.
It creates a smooth cinematic entrance, ensures every clip is ready to play on first scroll, and subtly builds anticipation—like a production intro before the reel begins.
The Timeline
From first call to live launch—five days.
That included:
Setting up Bunny CDN + HLS streaming
Building both custom players
Designing and implementing CMS logic
Creating the pre-loader and lead form
Testing and shipping the final site before the conference deadline
The response was immediate:
2.2 K+ views in the first few weeks
Instant playback across desktop and mobile
No buffering or lag even with heavy assets
Solid and reliable performance
Fully on-brand presentation of every ad
And an enthusiastic testimonial from James post-launch
The new site didn’t just showcase No Growth’s work—it became part of their creative statement.
Takeaway
This project pushed Framer’s boundaries.
By pairing Bunny’s CDN and HLS streaming with custom Framer components and a branded pre-loader, we delivered a fast, scalable, and cinematic experience.
Two custom players. 120+ videos. One week.
A perfect example of design and tech working in sync to tell a story—beautifully and without compromise.
Check out the site here - https://nogrowth.com/
