HYPERCHICKEN
The website of HYPERCHICKEN, a creative tech cooperative that brings together AI, branding and web development. A black and white site set in monospace, with headings that adapt to the width of the screen, a word in the hero that never stands still and a portfolio you filter by discipline.
HYPERCHICKEN
Development
Defy the ordinary
HYPERCHICKEN calls itself a coop of misfits: a small collective of strategists, developers and creative technologists working for brands that do not fit a template. The site had to show that without getting in the way. Everything is black and white and set in Silka Mono, while the images and videos of the cases bring the colour.
In the hero, the word Hyper changes shape every 250 milliseconds: Hyper AI, Hyper Branding, Hyper Dev, Hyper Tech. The team manages that list of words in the CMS. On the work page you filter the cases by discipline, with a transition that lets the cards fade out and back in calmly.
- A word in the hero that keeps changing, switched off with reduced motion
- Headings that scale themselves until they fill the full width of the screen
- Cases built from blocks: text, image, gallery, video and credits
- A background video through Mux, with separate streams for desktop and mobile
- SEO and Open Graph data per page, straight from the CMS
- A digital business card for every team member, with a downloadable vCard
Everything managed in Kirby
The site runs on Kirby CMS with the GeNx Kirby Kit, our own set of plugins for layouts, responsive images, SEO and metadata. The team builds the cases from blocks and also manages the words in the hero, the team members and their business cards from the same CMS.
The front end is plain JavaScript and SCSS with cascade layers, built with Vite. A few small scripts measure the text once the fonts have loaded, so headings and subtitles always fit together neatly. Videos in the cases only load when you press play, so no external script comes along unless you ask for it.