Skip to content

Work / 01 Integrated Marketing / Digital Experience

GREY MATTER

The thinking, happening before the paragraph

A marketing firm whose product is its judgement, and a site that demonstrates the judgement instead of describing it.

GREY MATTER · Partnered project

01 The engagement

Grey Matter is a partnered integrated marketing company built around the idea of the grey matter of the brain: processing, connection and creative thought. Imagio’s role was to rethink and build its digital experience around that idea, translating the concept of creative cognition into an expressive web environment.

02 The surface

Screenshot of the live greymatterimc.com home page: the Grey Matter wordmark and its circular mark at the top left, a navigation of Work, Services, About and Contact at the right, over a black field of scattered yellow, green and grey particles; centred in large white type, “WE DON’T MAKE MORE NOISE. / WE MAKE IDEAS MATTER.”, with a small SCROLL cue at the bottom
GREY MATTER — greymatterimc.com
SCREENSHOT OF THE LIVE LANDING PAGE · 1440 × 900 · CAPTURED 4 OCTOBER 2026

03 The problem
and the idea

The problem. A firm that publishes a grid of campaigns is publishing proof of delivery, not proof of judgement, and a prospect can tell the difference inside a few seconds. The site had to show how the firm thinks, at the pace a stranger reads, without becoming an illustration of its own thinking.

The idea. Make the page the demonstration. One continuous form assembles out of nothing, holds for as long as you look at it, and only then gives way to the writing underneath.

04 The work

What we did,
in order.

Neural fieldPathwaysInterface

01 · The idea is the objectThe hero is not a loop of clips and not a diagram of the brand. It is one continuous form, held in one place, that resolves out of a scattered field of points. What the firm claims about connecting information to ideas is demonstrated before the first paragraph has been read, rather than described in one sentence.
02 · Generated, not modelledThe form is built in the browser, not scanned in: a sphere scaled on two axes, perturbed by three octaves of value noise, split along a midline fissure and bulged at the back of the skull. One seeded generator means every visitor is shown the same body, so the composition is a decision rather than a lottery.
03 · One scalar drives everythingFormation is a single value running from zero to one. Scatter, resolution, the network drawn between chosen nodes, the signal travelling along it, depth and glow all read that one number, and it changes in exactly one place in the codebase — so nothing can drift out of step because there is nothing else to drift.
04 · The reader is never heldPassing the hero scatters the form; returning to the top re-forms the same object. Once the page has moved it is not on a timer at all. A visitor who does nothing still watches it resolve; a visitor who scrolls is never held.

05 Craft & sequencing

The decisions,
and why.

Why a run, not a gridA grid asks a stranger to infer judgement from volume; a run of statements asks it to be read. There are fewer pages here and more room in each one, because making the reading slow enough to be worth doing is the whole of the argument.
Why the reduced path is a designed pathThe browser picks one of three runtime profiles from device memory, core count and primary input, and scales the particle field, the node and connection counts and the pixel ratio to match. Where motion is turned down, autoplay and post-processing are never enabled rather than switched off, and the page composes correctly without them.
Why the preloader speaks in wordsLoading is the one moment a visitor is guaranteed to read, so it reports progress as language — connection, mapping, synchronising, bridging — instead of as a percentage. It is the claim the site makes afterwards, delivered before there is anything to look at.

06 The scope

The part we held

Creative direction, experience design, website concept, and the design and development of the revamp.

  • Concept direction
  • Experience design
  • Interface design
  • Creative development
  • Motion direction
ClientGrey Matter
BuildNext.js · React · TypeScript · WebGL via React Three Fiber · GSAP
StatusPartnered project

07 Through the method

Observe. Think.
Imagine. Launch.

OBSERVEA firm publishing a grid of campaigns is publishing proof of delivery, not proof of judgement — and a prospect can tell the difference inside a few seconds.
THINKThe site could not describe how the firm thinks. It had to let a stranger watch it happen, at the pace a stranger reads.
IMAGINEWhat if the page were the demonstration — one continuous form assembling out of nothing, holding, and only then giving way to the writing underneath?
DESIGNA run of statements rather than a grid. Fewer pages with more room in each, because the slow reading is the whole argument.
BUILDThe form is generated in the browser under one seeded generator, so every visitor meets the same body; everything after it responds to one scalar.
TESTThree runtime profiles chosen from device memory, core count and primary input. Where motion is reduced, autoplay is never enabled rather than switched off afterwards.
LAUNCHPartnered project. Live at greymatterimc.com.