The Brief
Webflow announced their official “Future of the Web” Community Challenge in the summer of 2025. It was the biggest Webflow Challenge to date. For us, sitting it out wasn’t an option.
The prompt: build a motion-rich storytelling experience that showcases what’s next for the web, using new interactions powered by GSAP. The brief asked for expressive animation, thoughtful layout, and a story that pulls people through. The winning build would become Webflow’s official showcase site.
We entered because the brief gave us something we rarely get in client work — no constraints, no brand guidelines, no business goals to hit. Just a blank page and a question: what can we actually do when nobody’s telling us what it needs to be? We approached this as an exploration of what’s possible.
That’s a different kind of challenge. Client projects have structure built in — there’s always a business, an audience, a goal. Here, we had to build everything ourselves. The concept, the narrative, the interaction logic, the sound — all from scratch.
We entered because the brief gave us something we rarely get in client work — no constraints, no brand guidelines, no business goals to hit. Just a blank page and a question: what can we actually do when nobody’s telling us what it needs to be? We approached this as an exploration of what’s possible.
That’s a different kind of challenge. Client projects have structure built in — there’s always a business, an audience, a goal. Here, we had to build everything ourselves. The concept, the narrative, the interaction logic, the sound — all from scratch.
The Concept
The challenge theme was “the future of the web.” Most entries would go straight to visual spectacle. We wanted to go somewhere else. We wanted to tell a story that anyone could connect with, not just designers and developers.
We landed on music as the entire framework. Music is composed, not assembled. It has structure, rhythm, tension, and release. Every sound has a role. Nothing plays by accident. That’s how we think about building for the web. The metaphor carried itself.
The site is built around three instruments. The Webflow harp in the hero sets the tone and positions Webflow as the instrument. The piano represents the fundamentals — structure, style, content, motion, interaction, accessibility, performance. These are the keys you learn first. They don’t change. The drum machine represents what’s coming — AI, new tools, new ways of creating. It’s faster, more experimental, less predictable.
But it still needs someone behind it — the composer. That’s the line that runs through the whole story: you are the composer, Webflow is the instrument. The technology doesn’t make the music. You do, and that’s how we see the future.
The Decisions
No client brief. No strategy document. No one to push back on us but each other. Every decision came down to instinct and taste — which made some of them harder, not easier.
We spent the first week not touching Figma or Webflow at all. Just the concept. What’s the story? What’s the structure? What’s the feeling someone should have when they scroll through this?
Most challenge entries start building immediately — interactions first, concept later. We went the other way. The symphony metaphor had to hold up on its own before we added a single animation. If the story didn’t work without motion, motion wasn’t going to save it.
By the end of that week we had a full narrative arc: silence > fundamentals > complexity > AI > you’re the composer. Everything we built after that served the story.
This wasn’t a website with background music. Sound was structural. Every section has its own audio identity — piano keys, drum machine hits, transitions between them. We composed and recorded all of it ourselves.
That meant learning things we’d never done before. Audio timing synced to scroll position. Sound triggers tied to interaction states. Volume and layering that respond to how the user moves through the page. None of this is standard Webflow territory.
The risk was obvious — sound on the web is polarizing. Most people browse silently. We built the experience to work without the sound, but designed it to be better with it. The opening gives you the choice. If you say yes, experience becomes different.
The site is structured as a linear timeline with seven main sections. The piano section is calm, methodical, educational. You learn the fundamentals of web design one key at a time. The drum section is fast, experimental, chaotic. Code flies across the screen. The rhythm changes. Everything in between is a story.
The transitions are the pivot points of the entire experience. At some point the story shifts from “here’s what we know” to “here’s what’s coming.” Getting that moment right took more effort than any other part of the build.
The timeline doubles as both navigation and narrative device. You can see where you are in the story at any point. It’s a progress bar and a musical score — you’re watching the composition unfold.
Every interaction serves the narrative. Piano responds to clicks with animations that mirror actually playing an instrument. Drum pads trigger visual effects that match the energy of the sound. Scroll-driven animations pace the story to keep the tempo.
We used GSAP interactions for everything — scroll triggers, custom timelines, staggers, synced audio cues. Webflow’s new interactions gave us GSAP controls without leaving the platform. That was the whole point of the challenge — see what’s possible.
The hardest part was restraint. We had the tools to make everything move. The discipline was knowing when stillness was more powerful than motion. The silence before the first note. The pause between. Those gaps are what make the interactions land.
Every line on the site is part of the narrative. We wrote all of it — no client brief, no brand voice to match, no feedback rounds. Just us, telling the story we wanted to tell.
That was harder than writing for clients. When you write for someone else, the constraints help. You know the audience, the goal, the tone. Here, we had to decide all of that ourselves.
The writing does something we don’t usually get to do: it takes a position. The site doesn’t just showcase interactions. It argues that the future of the web isn’t about AI replacing creators — it’s about creators getting better instruments.
The Results
The Webflow Symphony was chosen from hundreds of submissions by studios and developers worldwide. But the recognition isn’t the point.
This project proved that concept and storytelling matter more than technical complexity. The entries with the flashiest visuals didn’t all make the cut.
It also gave us something we now show every potential client: proof that we don’t just execute briefs. We think. We write. We compose. GSAP agrees.
“Our judges and entire team were absolutely blown away by your creativity. You can tell how much time you put into every detail, and we are all beyond impressed!”
