---
id: "aw-el-36a83ad5-d5ae-4836-b931-bb8ed2897ce0"
source: https://www.awwwards.com/inspiration/data-visualisation-tracing-art
author: "Resn (resn)"
media: "video, 1600x1200, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Radial Artwork Thumbnail Data Visualisation

## Summary
An interactive data visualisation for a museum storytelling site: hundreds of tiny artwork thumbnails are scattered in a ring of clusters, one cluster per patron, each labelled with a name and short description around the edge, plus a dense knot at the centre. Hovering a patron fades every other thumbnail to near white and streams a trail of thumbnails from the centre to that cluster. It turns a collection database into something you can feel at a glance.

## Style
- Theme: light (white panel over a painted floral backdrop)
- Mood: scholarly, elegant, curious, calm, precise
- Tags: data-visualisation, radial-cluster, thumbnails, hover-focus, museum, storytelling, editorial-serif, particles
- Category: Components, Motion

## Palette
| Role | Hex |
|---|---|
| Panel white | #FEFEFE |
| Iris navy | #28405E |
| Leaf teal | #4B7F8B |
| Moss green | #69815A |
| Sage | #81A28F |
| Ochre earth | #976D41 |
| Faded grey | #EEEEED |
| Muted stone | #C5C6BD |

## Typography
- Narrative paragraph: transitional serif, regular, sentence case, black, about 2.3% of frame height, four lines, left-aligned at the left edge of the ring. Source Serif 4 or Newsreader.
- Patron labels: tiny grotesk, name in medium weight and a one-line role in regular grey below, about 8px, positioned outside each cluster. Inter.
- Header wordmark top-left: light serif, placeholder.
- No large display type; the thumbnails are the visual focus.

## Layout
- 4:3 presentation frame (1600x1200); the site is a white 16:9 panel (about 88% wide) with 8px radius floating over a painted iris and leaf texture.
- Ring of 10 clusters evenly spaced on a circle about 55% of the panel height in diameter, centred slightly right of the panel centre.
- Narrative text sits inside the left part of the ring, overlapping the empty space between clusters.
- Labels sit just outside each cluster, aligned left on the right side and right on the left side.
- Top-right: a small black square menu button (20px, 4px radius); right edge: a narrow scroll pill with three dots.
- No borders or shadows inside the panel; the white field gives full focus.

## Elements
- Thumbnails: tiny square crops of paintings (4 to 8px each), mostly browns and dark tones, packed loosely into organic clusters of 40 to 80.
- Central knot: a denser cluster of about 60 thumbnails at the ring centre, representing shared works.
- Trails: a line of thumbnails that streams from the centre to the hovered cluster.
- Faded state: non-active thumbnails drop to about 10% opacity, becoming light grey squares.
- Labels: name plus role text for each cluster; non-active labels fade with their cluster.
- Backdrop: a painted floral pattern of blue irises and green leaves on an ochre ground.

## Motion
- 0 to 300ms: full overview, every cluster visible.
- 300 to 1800ms: hovering the right-hand patron fades all other thumbnails to 10% over about 400ms while that cluster stays full colour.
- 1800 to 3200ms: thumbnails stream from the centre to the active cluster in a curved line, each travelling about 600ms with a 15ms stagger and ease-out.
- 4600 to 6100ms: moving to the next patron below swaps focus; the previous cluster fades as the new trail draws.
- 7500ms: pointer leaves; all clusters restore to full opacity over 500ms.
- Thumbnails drift by 1 to 2px continuously for a subtle living feel.

## Rebuild it
1. React component that receives `patrons` (name, role, works) and lays out cluster centres on a circle: `x = cx + r * cos(i * 2PI / n)`, `y = cy + r * sin(...)`.
2. Render thumbnails on a `<canvas>` or with PixiJS for performance (hundreds of sprites); position each with a seeded random offset inside its cluster radius (about 40px).
3. Hover detection: nearest cluster to the pointer; store `active` in state.
4. Tween opacity per sprite toward 1 or 0.1 with Motion `animate()` on a shared value or a simple lerp in the render loop (factor 0.12).
5. Trails: for the active cluster, animate a subset of sprites from the centre along a quadratic curve to their cluster position, staggered by 15ms.
6. Labels as absolutely positioned HTML over the canvas with `text-[8px]` and `transition-opacity duration-300`; the paragraph in a serif at 18px.

## Generation prompt
An elegant museum data visualisation on a clean white panel floating over a painted iris and leaf background: hundreds of tiny square painting thumbnails grouped into ten organic clusters arranged in a ring, each labelled with small grey text, a dense cluster in the centre, and a short serif paragraph on the left; hovering one cluster fades the rest to pale grey and a stream of thumbnails flows from the centre to it; scholarly, calm and precise.