CASE STUDY / 03

DATA
BECOMES
BEHAVIOR.

DISCIPLINE WEBGL / DATA VISUALIZATION / PRODUCT DESIGN ENGINE THREE.JS DATA DETERMINISTIC DEMO NETWORK
01

CONCEPT

ONE HOLDER.
ONE ANT.

COLONY converts a familiar crypto abstraction — token holders — into a spatial system. Every holder becomes one procedural ant, making distribution readable through density, movement and formation.

COLONY ant mark
COLONY ONE HOLDER.
ONE ANT.
DARK EARTH / BRONZE / AMBER / OFF-WHITE
02

PROCEDURAL DESIGN

NO HERO
IMAGE.

The visual world is generated at runtime: terrain, ants, paths, clusters, particles and light. This avoids the alignment problems of compositing unrelated AI-generated images.

01 INSTANCED HOLDERS

Thousands of holders share a small set of geometries and materials.

02 PROCEDURAL TERRAIN

Geometry displacement creates a repeatable dark-earth world.

03 SCROLL CAMERA

The browser scroll position becomes a controlled cinematic camera path.

04 HOLDER INSPECTION

Raycasting maps rendered instances back to deterministic holder records.

03

REPRESENTATION

ANT.
NODE.
CLUSTER.

One dataset is allowed to change visual language. The user can read the community narratively as ants, analytically as nodes, or structurally as formations.

ANT INDIVIDUAL
NODE COMPUTATIONAL
CLUSTER STRUCTURAL
04

PERFORMANCE

THOUSANDS.
NOT THOUSANDS OF COMPONENTS.

COLONY uses THREE.InstancedMesh for the holder population, clamps device pixel ratio, reduces population on mobile, and respects reduced-motion preferences.

THREE.JS WEBGL INSTANCED MESH RAYCASTING PROCEDURAL GEOMETRY DETERMINISTIC DATA RESPONSIVE CANVAS REDUCED MOTION

LIVE EXPERIENCE

ENTER
THE COLONY.

OPEN LIVE DEMO