Koollab Agency: A First Framer Build for a Strategy-First Branding Studio

At a glance

• Client: Koollab Agency, Sydney

• Stack: Framer (their first Framer build), Figma

• My role: Web design and Framer development, under their Creative Director

• Live: koollab.agency

The Challenge

Koollab is a branding agency for B2B tech companies. Their old site was on Webflow, like most of their client work, but the team wanted to see if Framer could move faster for their own marketing. The new site also had to clear a bar the old one didn't: it had to look like the agency that built it.

The brief was a multi-page site that mirrored Koollab's brand philosophy.

Smart, minimal, but never sterile.

And the site had to do something their Webflow setup couldn't. By launch, the team needed to be confident enough to run CMS updates and add case studies without a developer in the loop.

[VIDEO: 10-15s scroll-through of the home page hero, About, and Process pages]

My role

Web design and Framer development under Koollab's Creative Director. The visual direction was set on his side. My job was to translate that into a Framer build that held up across the home page, the About page, the Process page, the Case Studies index, and the individual case study template, with motion that felt native to the brand rather than bolted on.

The build

Inspiration sources were named upfront. Arpeggio for the home page rhythm, Artcraft for the hero carousel, Focus Lab for the Process page tone, Motto for the About page, Medium and WeDiscover for the Case Studies CMS. Naming references this early meant fewer design conversations downstream, because every section had a reference point both sides could point at.

Three things on the build that were worth the time:

• A persistent component library set up before any page work. Every section pulled from shared primitives so global tweaks at launch (typography scale, brand color tokens) propagated everywhere without per-page surgery.

• A neo-brutalist layout system with kinetic motion. Bold blocks, generous spacing, motion treated as part of the type hierarchy rather than decoration.

• A Case Studies CMS that the team could actually run. Filterable across 11 categories, with reusable templates so adding a new case study became a content task, not a design task.

[IMAGE: Process page hero showing the brand mascot, the Brand Scientist]

The CMS was added mid-project. Halfway through, Koollab asked to make the case studies first-class instead of static pages. Adding a CMS to a build that was originally scoped without one is the kind of scope change that usually slows everything down. In this case it tightened the project. The CMS forced earlier decisions on case study layout, which made the individual pages faster to design than they would have been one-off.

The curved carousel

The hard part of this project wasn't the site, it was the hero.

Koollab wanted the home page hero to behave like the one on Artcraft, the Webflow template where the featured images sit on a curved 3D ring that rotates with scroll. A few Framer community components do something similar. None of them gave us the effect.

I opened DevTools on Artcraft and traced it. The trick: a stack of <div> elements arranged in a circle, each rotated in equal increments around a Y-axis pivot, like the blades of a helicopter propeller. The images sit at the end of each blade, themselves rotated 90 degrees to face the screen. Scroll drives the propeller.

[GIF: the carousel rotating as the page scrolls]

Recreating that in Framer was a small win in itself. I built it as a reusable component with parameters for blade count, blade length, image size, and scroll mapping, then bound the rotation to scroll position so it tracked the page rather than running on a timer.

[GIF: same carousel from a different angle showing the depth]

The image containers themselves needed a second pass. Framer's CMS text components don't let embedded images break past the width of their parent text container, which would have made the case study layouts feel boxed-in. A small Framer code override fixed it for the full-width images, and a follow-up override let images stack side-by-side at the same wider width. Both overrides became reusable across the site.

Results

[METRIC: e.g., final page load time, performance score, time-to-first-byte]
[METRIC: e.g., any traffic or conversion movement since launch]

What I can say without numbers:

• A multi-page Framer site Koollab now uses as a sales touchpoint, sent to prospects ahead of calls.

• A team confident enough in Framer to add case studies, edit copy, and ship interior tweaks without me.

• A curved-carousel component reusable across future builds. Already pulled into two other projects since.

[IMAGE: screenshot of the Case Studies index page with filters visible]

What changed

Koollab is the project I point to when someone asks if Framer can replace Webflow for an agency that already lives in Webflow. The answer is yes, but only because the carousel work made the site specific to Koollab rather than another tidy Framer template. Without that single hard part, this would have been a typical Framer build.

The harder lesson sat in the handoff. The team using the site didn't trust Framer at the start of the project. By launch, they were running CMS updates without me. That shift, from "we'll need you for everything" to "we can handle this", is the only result I care about on a build like this.

[CTA: hannesatian.com]