Wreel
Agency
Gatsby, React, TypeScript, GraphQL, and Contentful development for Wreel Agency's animated, content‑managed website, interactive creative portfolio, and latest stage of long‑running 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 already proven on IMG Licensing and Red Central, 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 richer media and interactive 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, these enhancements are carefully managed using a range of device and capability checks. Screen dimensions alone don't determine the level of enhancement a visitor receives.
A Unique Custom Cursor
Often a divisive feature, a custom and animated cursor offers users a little more interest whilst also indicating available interactions.
Three.js Distortion Hover Effect
Using Canvas and a modified version of Robin Delaporte's hover‑effect library, project items on larger‑screen devices use a distortion‑style hover effect alongside a modified version 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), alongside video and audio hypermedia.
Simple and Intuitive Navigation
As a relatively small site with succinct sections, the navigation is simple but remains an important part of the experience 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.
The Outcome
My work with Wreel is the latest stage in a relationship spanning well over a decade, during which its online presence has evolved from a hand‑coded, single‑page jQuery site into a modern, content‑managed platform for an independent creative agency.
The current website has continued to evolve since launch, combining strong performance and search visibility with the rich visual and interactive experience expected of Wreel's work, and has received recognition from both the design and development communities.
- "
John Kavanagh is one of the most open‑minded developers I have ever worked with. His appreciation of great creative work, his enthusiasm and 'anything is possible' attitude is always a breath of fresh air. I worked with him on several successful projects in our days at McCann Worldgroup. Since then we have collaborated on many freelance projects and he's always been super efficient and effective, combining a great work ethic with immense talent. If I ever have a creative digital project which needed bringing to life, John is the first developer I call on."
