26 Grains offer one of the best eating experiences in London. With the launch of a new location, they wanted a new site that was completely aligned with their brand and philosophy.
The site needed to be simple yet useful for the user to easily obtain information such as the available menu, the opening hours, and exact location of the restaurants.
One of the highlights of this project is the animations that you can find throughout the site. 26 Grains logo simulates a bowl with the characters scattered inside it.
We wanted to use this concept for the animations.
On the landing page, the characters that make the name of the restaurants are also scattered across the page. On hover over them, the characters' position change to form the name of the restaurant. Each time the page reloads the characters are in a different position. The animations are calculated live for every load.
On the page section titles and on the menu titles, this effect is reversed. The titles read normally and on hover the characters scatter over a certain space.
All the content on the site can easily be customized by the client. Text, logos, colors, etc. all can be changed from the CMS.
The site is built using a JAMStack, a modern web framework focused on speed, scalability, and security.
Framework: GatsbyJS + React
Other content sources: Medium.com, Bamboo HR.