The portfolio website for Boo Republic, a Greek design studio that works in the fields of branding, packaging and web interfaces.
THE REQUEST
An uncontroversial website to showcase the studio’s projects, while having a more humorous character that challenges the visitor to interact. This is possible by the copy text itself but also from the design elements, illustrations and overall animations.
The Boo Republic Studio requested a colorful website with playful illustrations and hidden Bon Jovi Easter eggs to enhance the black humor of the project. They handcrafted custom SVG illustrations that pop out and elevate the site’s character: An elusive unicorn for the Branding, a fish tank for the Packaging and Salvador Dali’s lobster making the calls himself for the Contact page.
The idea was to animate these illustrations, some by responding to the user’s mouse while others would auto-play in a constant loop, so Phantom created a series of frames for each illustration.
OUR SOLUTION
We built a robust CMS based on WordPress, customized to meet the project’s needs. The client and his team can manage blog posts, projects and every little aspect on the site, even the map.
The challenge was to create the SVG animations. Some animations had 7 frames while other had more or less, and each one had to be animated in different timings.
Moreover each “frame” was actually a different SVG file.
So we had to build a functional code that automatically reads all SVG files and turns them into animations. So with just a few lines of code we managed to keep the JavaScript code minimal and optimized in order to achieve the best speed possible.
