(Case study · 08)
EchoFrame
The claim — that software can understand footage — is abstract, and a feature list would have kept it abstract. So the site is built as twelve chapters that move the way an edit moves: hours of unsorted material, a machine that starts to listen, connections surfacing, a direction given in plain language, a sequence assembling itself, and a cut handed back still editable.
A self-initiated product concept. Its own case study states plainly that there is no client, no user testing and no launch or adoption figures, because none exist.
(Why I made this)
How do you make "software that understands footage" something you can feel?
The claim is abstract, and a feature list keeps it abstract.
So I built the site the way an edit moves: hours of unsorted material, a machine that starts to listen, connections surfacing, a direction given in plain language, a sequence assembling itself, and a cut handed back still editable.
There's no client, no user testing and no launch figures, because none exist.
(Decisions)
Problem, decision, chapter
Each one is visible on the site
A feature list makes the idea abstract.
Twelve chapters that move the way an edit moves.
The whole site
Colour usually decorates.
A colour script: each chapter owns its colours, and scroll moves between them.
Chapter colours
More interface chrome doesn't convince anyone.
One sample film, Leaving Home, runs through every chapter.
Continuity
Smoothly moving grain reads as drifting fog.
Grain steps through eight discrete offsets, because real grain jumps.
Film grain
(Structure)
Twelve chapters, one edit
The colour script
- Black: raw footage
- Signal yellow: the machine understands
- White: clarity
- Blue: the edit
- Red: human authorship
- Black: the finished film
(Values)
What I refused to compromise
No stock photography
Every film still is drawn on a canvas from a seed, so the imagery belongs to the product.
No claims that don't exist
No client, no metrics, and none claimed.
The phone gets its own layout
Twelve chapters redrawn, not shrunk.
Motion that respects physics
Each wire draws by its own length, so short and long arcs move at the same speed.
(Mood board)
A colour script, not a palette
Every chapter owns a background, foreground, muted and accent colour, and the page interpolates between them as you travel. Colour carries the narrative instead of decorating it.
Colours sampled from the site's chapters
- Raw footage
#090909 - Understanding
#DFFF01 - Clarity
#FFFFFF - The edit
#365BFF - Authorship
#E3422D
- Cinematic
- Continuous
- Procedural
- Authored by people
(What I made)
A twelve-chapter WebGL site
I made the concept, the art direction and the build: a twelve-chapter site in Next.js, React, TypeScript, Three.js, GSAP and Lenis, with procedural imagery and a phone layout redrawn from scratch.
- Twelve chapters
- Colour script
- Procedural film stills
- Stepped grain
- Connection wires
- A sample film throughout
- Phone layout
The screens
Software that reads a documentary's rushes and proposes a first cut the editor can still argue with — presented as twelve chapters that move the way an edit moves.
(Up close)
The moment the machine understands
123456- The claim, in one line
- Scan, detect, transcribe, interpret: the chapter's four verbs
- What it sees, boxed and labelled
- What it hears: strong quotes highlighted
- Where you are in the twelve chapters
- What it concluded, as plain fields
(What this is)
A concept, said plainly
EchoFrame is a self-initiated product concept. Its own case study states plainly that there is no client, no user testing and no launch or adoption figures, because none exist.
- Scope
- 12 chapters, one continuous colour script
- Imagery
- Procedural, canvas-drawn from seeds
- Claims
- No client, no metrics, none exist
(What I learned)
EchoFrame taught me that continuity convinces more than features. One film running through every chapter did more than any interface I could have added.
Need something like EchoFrame?
Tell me what you want to build. I'll reply with how I'd build it, a rough timeline and a cost range. Free, and no obligation.
Next project
Clinora