---
id: "aw-el-c5e3ebe7-4d27-4f88-b63e-2009a35b0c84"
source: https://www.awwwards.com/inspiration/main-scroll-tracing-art
author: "Resn (resn)"
media: "video, 1600x1200, 12.2s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Artwork Swarm Scroll Intro

## Summary
A scroll-driven intro for an art research project: a white page framed by a painterly brushstroke background, where hundreds of artwork thumbnails stream across the screen as one snake-like swarm, then scatter into a sparse constellation around a centred serif statement. Hovering a thumbnail reveals a small caption card with the work's details. Worth studying for how a collection becomes a living, flocking element before settling into a readable layout.

## Style
- Theme: light (white page on an olive and straw painterly backdrop)
- Mood: scholarly, curious, elegant, cultured
- Tags: scroll-driven, image-swarm, museum, serif-headline, scatter-layout, hover-card, flocking
- Category: Motion, Hero

## Palette
| Role | Hex |
|---|---|
| Page white | #FEFEFE |
| Placeholder tile | #F5F5F4 |
| Pale straw | #DCD8BD |
| Wheat | #CAC7A9 |
| Olive | #A8A07F |
| Dark olive | #7E7B62 |
| Umber | #3A342A |
| Headline ink | #161513 |

## Typography
- Headline: transitional serif, regular, sentence case, three centred lines, about 4.5 percent of the window height, near-black. Newsreader (400) or Source Serif 4 (400).
- Intro title (two words split far apart): the same serif at about 5 percent height in very light grey, sitting behind the swarm.
- Eyebrow above the headline: tiny sans, regular, grey. Inter (400).
- Placeholder wordmark: small sans, regular, centred at the top.
- "Scroll down" pill and hover card text: tiny sans; card title semibold, details regular with underlined links.

## Layout
- 4:3 frame (1600x1200); a brushstroke painting texture fills the frame and a white window with 12px radius sits inset by about 2 percent on each side, ending above the bottom fifth.
- Top bar inside the window: centred wordmark, a small black rounded-square menu button at the top-right, a slim scroll indicator on the right edge.
- Final layout: the headline centred at about 45 percent height, eyebrow 24px above, a small outline "Scroll down" pill 32px below.
- Thumbnails scattered with no grid at varied sizes (about 40 to 70px wide), some as pale grey placeholder tiles, a few overlapping the window edge.

## Elements
- Swarm: 150 to 250 small artwork thumbnails (paintings, portraits, manuscripts) clustered tightly in a ribbon that curves across the window.
- Scattered artworks: a dark portrait near the headline's left, a colourful illuminated page on the right, a few more near the corners.
- Placeholder tiles: light grey rectangles marking positions where images have not loaded or are faded.
- Hover card: a white rounded card (about 260 x 70px) with a thumbnail, title, artist, date and underlined links, with a small close button.
- Menu button: 16px black rounded square with a white minus glyph.

## Motion
- 0.5s: only the wordmark and the faint split title are visible.
- About 1 to 3s: thumbnails pour in from the left as a dense ribbon that snakes across the window (about 2000ms, each image following the leader with a slight lag, like flocking).
- About 3 to 5s: the ribbon bursts apart; images ease out to scattered positions while most fade to placeholder grey (about 1200ms, ease-out, random 0 to 300ms delays), and the headline fades up line by line.
- 7.1 to 11.5s: the cursor moves over images; hovered images scale up slightly (1.05, 200ms) and a caption card slides up from the lower right (about 250ms).
- Scattered images drift subtly with the cursor (parallax of 5 to 15px).

## Rebuild it
1. Body: `bg-[url(painting.jpg)] bg-cover p-[2vw]`; window `relative h-[80vh] rounded-xl bg-white overflow-hidden`.
2. Swarm: keep an array of N thumbnails, each a `motion.img` with its own x and y motion values; compute a leader path (a sine wave across the window) driven by `useScroll` progress, and place item i at the path point `progress - i * 0.002` plus small random jitter, so they trail like a snake.
3. At progress 0.4, switch each item's target to a precomputed scatter position and animate with `animate(x, target, { duration: 1.2, ease: [0.22, 1, 0.36, 1], delay: Math.random() * 0.3 })`; fade non-featured items to 15 percent opacity.
4. Headline: `font-[Newsreader] text-[4.5vh] leading-[1.15] text-center max-w-[22ch]`, revealed with a 120ms line stagger.
5. Hover card: `AnimatePresence` card `fixed bottom-6 right-6 rounded-lg bg-white shadow-lg p-3 flex gap-3`, keyed by the hovered artwork.
6. Add pointer parallax with `useMotionValue` and per-item depth factors.

## Generation prompt
An elegant art research website intro: a white rounded window over a painterly olive and straw brushstroke background, where hundreds of small classical artwork thumbnails swarm across the page in a snake-like ribbon, then burst apart into a sparse scattered constellation around a centred three-line serif headline, faint grey placeholder tiles, a small caption card on hover, scholarly and refined, smooth scroll-driven motion, no logos or real names.