Letter Run
Testing (and proving) that you can build anything in Webflow
The Brief
Build a digital clubhouse that encapsulates everything Edgar Allan is and stands for while pushing what’s possible with Webflow.
Letter Run is a playable 3D clubhouse experience and scavenger hunt that introduces users to the world of Edgar Allan via a unique fully 3D experience with custom soundscapes. It took almost a year to complete and was a labor of love that won us an awwwards site of the day and technical achievement award from Webflow.
The Results
Integrations on integrations:
Letter Run combines an impressive number of integrations, including Spline, Blender, React, and more; some of which we’d never attempted to use when building in Webflow before this effort.
Fully editable content:
Letter Run’s content layer is editable within the Webflow CMS, making it easily updatable, even for team members without technical knowledge.
Built with optimism:
We wanted to build something that referenced our decade in business, made us happy, and let us break Webflow a few times. It was a joy (and is a joy to play).
.png)
Tell me about building with optimism
Building with optimism
Letter Run showcases that anyone can expand the capabilities of Webflow and build pretty much anything with the right combination of knowledge, integrations, and attitude.
What started as an exercise in club building and brand identity pretty soon took on a life of its own – literally. With a blend of optimism and creativity (a theme for the whole project), we turned our word mark into something character-driven and lovable. His name is Edgar, and we think he’s adorable despite the fact that he started out resembling a pill or something more akin to a tooth-shaped sleep paralysis demon.
Once we had Edgar’s design, we created animals and beings to share his world with him, using the same base design of our word mark to create cats, bunnies, and dogs. Movement came next and we explored various walk cycles before we settled on a hoppy kind of gait that resembles a run.
We took an equally playful approach to creating Edgar’s world, with elements of it based on our philosophies and principles. For example, the pool in the end product that reflects our “everyone in the pool” mindset. That’s just one of a ton of references that we don’t want to spoil for you.
Moving from flat design environments into a more dynamic world proved challenging along with the color and lighting. To help us stay the course, we focussed on why we wanted to create Letter Run in the first place: to build something with optimism and joy.
We moved away from realism and created something fresh and colorful that looked a lot more like what we had in our heads and felt like a reflection of who we are.
How’d you push the envelope?
Pushing the envelope
We knew these four things for certain when we started creating Letter Run:
The content layer should be fully editable
So we hosted it inside of Webflow’s CMS so we could edit, revise, and add things easily.
The experience needed to be engaging and fun
We needed to give Edgar something to do, so the idea of a 3D scavenger hunt was born. When we launched, there were 10 hidden items to collect, and we gave out prizes by mail.
The world shouldn’t sound like the inside of a black hole
We partnered with musician KC Katalbas to bring the ambiance of Edgar’s world to life in dreamy surround sound.
We’d need to use a lot of integrations
We started in Figma with flat designs and illustrations of each room, then moved to Blender to create 3D elements, React for its JavaScript Library, and Three.js files to display our 3D animated experience.
More on the making of Letter Run
A look behind the curtain
Want an even deeper look into how we created Letter Run?
Check out this presentation by Edgar Allan’s Managing Member, Mason Poe and our VP of Strategy and Content, Kendra Bentle-Rainey for all the details: