Responses by Javier Corrales, cofounder and interactive developer; and Jose Sentis, creative developer, Cuchillo.
Background: Although BeAr is a new architecture studio, it is led by architects with years of experience. The website works both as a presentation of the studio and as a portfolio to attract future clients who want to distance themselves from traditional architecture.
Design core: The intention behind this website is to find an intermediate point between the characteristic brutalism of Cuchillo and BeAr and the visual sensation caused by AI. It was very important for us to create a site that explored the concept of randomness. We achieved this through the creation of a design system composed of a number of elements, shapes and colors that enables page transition and the appearance and disappearance of elements. The site interpolates elements like an AI would do—the creation of a feeling of controlled chaos.
Challenges: The performance. It was very important that BeAr’s future clients would be access the site from their mobile devices; by developing this website’s content, we had to be very careful with that.
Navigation structure: We wanted visitors to see as many projects as possible at a simple glance. There are 8,000 particles that work as project thumbnails. While users move the mouse around the homepage, the actual projects’ thumbnails show up and take them to the detail pages. With this navigation structure, all the projects have equal importance, using the client’s content disparity to their favor.
Technology: For the front end, our technology stack uses Eleventy connected to a WordPress instance. Then, our custom-made JavaScript library handles the scroll and scroll-based animations, the routing, and the preloading of assets. We used GSAP to create some of the animations because we love its performance and the way it handles things. On top of that, we have a custom library of easing transitions that we’ve been creating and refining through time.
For this specific website, we used three.js to create the 3-D elements and Tweakpane as a settings and configurations panel.
Browse Projects
Click on an image to view more from each project
