---
id: "aw-el-93949e34-608f-4ef8-9525-879beede4ec0"
source: https://www.awwwards.com/inspiration/scroll-animations-tracing-art
author: "Resn (resn)"
media: "video, 1600x1200, 8.5s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Museum Provenance Scroll Story

## Summary
A scroll-driven art history story inside a floating panel over a blurred close-up of an old painting: portraits rearrange, a centred serif paragraph appears, the panel tints from white to pale blue-grey, and the names of successive owners drift in around a horse painting before a giant grey name slides across the top. A refined pattern for telling a chronological story with images, names and scale changes.

## Style
- Theme: light (white to pale blue-grey panel over a dark painted background)
- Mood: scholarly, elegant, quiet, narrative
- Tags: scroll-storytelling, museum, serif-type, provenance, image-choreography, editorial, scroll-animation
- Category: Motion, Typography

## Palette
| Role | Hex |
|---|---|
| Panel white | #FEFEFE |
| Panel blue-grey | #D7DEE4 |
| Ink | #1C1C1C |
| Ghost grey | #9A9DA1 |
| Painting olive | #605C51 |
| Umber | #504A3E |
| Dark brown | #383225 |
| Sand | #C1AB97 |

## Typography
- Story paragraph: transitional serif regular, about 14px (9px in the frame), centred, five lines, leading 1.35, ink. Closest free: Source Serif 4 or Newsreader 400.
- Names: the same serif at about 36px in the frame, sentence case, ink, placed freely around the image.
- Giant ghost name: same serif about 9% of the frame height, grey, clipped by the panel's top edge.
- Captions: tiny sans or serif under images with underlined titles.
- Logo: a small serif placeholder wordmark at the top-left of the panel.

## Layout
- 4:3 (1600x1200). Background: a blurred close-up of an old painting of a spotted horse filling the frame.
- Panel: centred, about 88% wide and 66% tall, radius about 10px, no border, no visible shadow.
- Top-right: a black circular close button (about 18px). Right edge: a small rounded info tab with an "i".
- Images sit centred; story text below them; names placed at varying positions (left middle, top-right, bottom-left) to suggest a timeline.

## Elements
- Portrait cluster: a large central portrait with two smaller portraits and faded ghost copies offset behind them.
- A pair of images side by side (a painted portrait and a red chalk drawing) with captions.
- A centred serif paragraph explaining the painting's history (placeholder copy).
- The horse painting as the anchor image with an underlined caption.
- Owner names appearing one by one, and a final giant grey name plus a faint grey sentence below the image.
- Close button and info tab.

## Motion
- 0.3s: cluster state, side portraits drifting outward while ghost copies fade.
- 1.9s: images regroup into a side-by-side pair; the paragraph fades up.
- 3.4s: the panel background tints from white to blue-grey (about 400ms).
- 4.9s: the pair is replaced by the horse painting; a first name fades in at the left.
- 6.5s: that name leaves; two new names appear top-right and bottom-left.
- 8.0s: a huge grey name slides in from the right across the top edge; a grey line of text fades in below.
- Each beat lasts about 1.5s of scroll; elements translate about 40px with opacity, eased with a soft ease-out (about 600ms); the large name moves with a slower 900ms ease.

## Rebuild it
1. Wrap the story in a tall container (`h-[600vh]`) with a sticky full-screen stage: background image `blur-sm scale-110`, panel `absolute inset-x-[6%] top-[17%] h-[66vh] rounded-[10px]`.
2. Get progress with Motion `useScroll({ target })` and map it with `useTransform` into per-beat ranges (for example 0 to 0.2 cluster, 0.2 to 0.4 pair, and so on).
3. Panel colour: `useTransform(progress, [0.35, 0.4], ["#FEFEFE", "#D7DEE4"])`.
4. Images: render all with `layoutId` so they morph between arrangements; crossfade the horse image in at its beat.
5. Names: absolutely positioned `motion.span` elements with `opacity` and `y` mapped to their beat windows.
6. Giant name: `text-[9vw] text-[#9A9DA1] whitespace-nowrap` with `x` mapped from 40% to 0 over its window; clip it with the panel's `overflow-hidden` except the top bleed.

## Generation prompt
An elegant museum storytelling web page: a large rounded pale panel floating over a blurred close-up of an old oil painting of a spotted horse, containing a small framed painting of a white spotted horse in a landscape, refined serif names of former owners placed around it, a centred serif paragraph and a huge pale grey serif name sliding across the top edge; quiet, scholarly, minimal, soft light.