Responses by Frederik Hansen, designer, and Michael Vestergaard, developer.

Background: “Our goal was to create a truly unique and tailor-made website for Ribbit, a Copenhagen-based motion design studio founded by five longtime friends and animators, and our challenge was to develop a distinct identity that cuts through the noise of an already skilled and competitive motion design industry,” says Frederik Hansen. “The main target audience are producers and marketing departments of companies, who are on the lookout for a top-tier motion agency.

“Through our research, we discovered that few to almost no competitors were trying to build brands that risked overshadowing the client work they showcased—especially not through brand characters,” Hansen continues. “So, we decided to do exactly that. Most competitors design their sites as clean black-and-white canvases, allowing the work to stand out. We wanted everything to stand out, to pop, to exude playfulness and curiosity, and to express Ribbit’s unique creative spirit.”

Favorite details: “The site is filled with small details and interactions, but the element I am most proud of is the set of five brand characters that I created together with the Ribbit team,” says Hansen. “They appear throughout the site and each one helps express Ribbit’s core value of curiosity in a different way.

“Our inspiration came in part from Gorillaz,” he continues, “not in a one-to-one visual style, but in the way each character in the band feels distinct while still belonging to the same universe. We developed the characters using Jungian-inspired archetypes, which gave us rich personalities to build on and let each character contribute to the overall brand word curiosity. I am most proud that we brought them to life in a way that feels both individual and harmonious across all sections of the site, and they would not have been presented nearly as smoothly without Michael’s coding magic.”

Technology: “We developed the site with vanilla JavaScript, utilizing GSAP and Lottie but building our own renderer for all the character animations,” says Michael Vestergaard. “We went through many iterations and tests of both WebGL renderers and pure CSS solutions, but we ended with a simple solution of loading a bunch of PNGs and toggling them when relevant, as WebGL performance was surprisingly poor for 2-D spritesheets—in Safari, primarily.

“The site is static generated, using a headless CMS and a simple PHP script on the server,” Vestergaard continues. “It’s super fast as it publishes and builds in two seconds. We used imgix through the CMS and Mux for selected videos.”

Challenges: “From a developer point of view, the biggest challenge was actually the rounded corners on the Process videos,” Vestergaard explains. “Of course, the character animations also took a lot of time—especially finding a solution that loaded quickly and looked smooth in all browsers.”

Special navigational features: “During our brand discovery sessions with Ribbit, we identified curiosity as the studio’s core emotional brand value,” says Hansen. “This comes from its approach to creativity, which is deeply driven by curiosity and exploration. That insight inspired several design choices, including the two eyes in the logo’s is. We extended this idea into the site’s navigation by turning those eyes into an interactive burger menu that expands and collapses. You could say the burger menu is quite literally an eye-opener!”