Wreel
Agency
A vibrant, animated, and engaging website to showcase the talent and ability of this digital‑centric design agency. Built using Gatsby, with Contentful this represents the latest accumulation of over a decade of brand development.
In Detail
Although feature‑rich, interactive, and content‑managed, this is still the ideal candidate for a static site and headless CMS combination.
Using a recipe that should be familiar from elsewhere within my portfolio, we settled upon a tried‑and‑tested tech stack which we knew would offer a level of future‑proofing whilst offering extremely fast performance and a content management interface that the client already knew well:
- Gatsby: an extremely performant, React‑based, static site generator;
- Contentful: a headless CMS which integrates beautifully with Gatsby via GraphQL, is an interface the client is intimately familiar with from previous projects together, and has a very generous free tier.
As this is a website that has evolved over the years (starting over a decade ago with a single‑page, jQuery‑based site I coded by hand), this move to a new stack was also an opportunity to remove redundant work, streamline the experience and introduce some more hypermedia and rich content.
Since launching, this cycle of enhancement and improvement has continued, resulting in a highly optimised website that performs very well in search engines and has been well‑received by the wider design and development communities, attracting awards and high praise from peers and customers alike.
An Animated and Interactive Experience
There would be no point in being a hyper‑creative agency if your website didn't show that off to full effect. From on‑load and into‑view animations through to snippet videos and organic interactive movement, this website offers users an animated, immersive, and interactive experience.
From a development perspective, this is all carefully managed and sent to the visiting browser using an array of different device checks. It's not just screen dimensions that determine how enhanced the visitor's experience is!
A Unique Custom Cursor
Often a divisive feature, a custom and animated cursor offers users a little more interest and indicates available interactions to the user in a unique way.
Three.js Distortion Hover Effect
Using Canvas and a modified version of Robin Delaporte's hover‑effect library, large‑screened devices are supplied with a distortion‑type hover effect for project items alongside a modification of the custom cursor.
This is a progressive enhancement on top of the existing cross‑fade supplied to lower‑powered, less‑capable, or non‑mouse devices.
A Curated, Content‑Managed Portfolio
Using Contentful, the client is able to manage every aspect of their portfolio, including artworking cross‑faded (and distorted) imagery for different uses and aspect ratios.
The project pages themselves are full of high‑impact imagery (carefully optimised on‑build, and on‑view to maintain a quick page load), as well as allowing the use of video and audio hypermedia.
Simple and Intuitive Navigation
As a relatively small site with succinct sections, the navigation is both relatively simple whilst also the most important part of the site for visitors. Using a custom implementation that will be familiar to the majority of website users, this is enhanced using some considered animations and ‑ of course ‑ that custom cursor.
