Skip to content
Motion Atlas

Live examples of what AI can make for a website, each with the prompt that asks for it and the source to copy.

All examples / scroll story

Pinned scene: a desk that sets itself up as you scroll

A tall section pins an isometric desk in place with position: sticky; while the reader scrolls through it, a laptop, a lamp, a mug and a potted plant drop onto the desk one after another, each over its own quarter of the pinned stretch.

Prompt tested

One desk, everything in reach

Keep scrolling: the laptop, the lamp, the mug and the plant settle onto the desk one by one while the scene stays put.

An isometric desk with a laptop, a desk lamp, a mug and a potted plant
Scroll inside ↓

Prompt

Build a pinned scroll scene as one HTML section with CSS only (no JavaScript, no libraries, no scroll event listeners): a tall outer section (300cqh, so three screens of scrolling) holds a stage with position: sticky; top: 0; height: 100cqh, so the stage stays pinned while the reader scrolls through the section. Inside the stage: a short heading ('One desk, everything in reach') and one line of text, and next to it an inline SVG of an isometric desk (30° projection) on a paper background: a flat desk top on four slim slate legs with a soft shadow on the floor. On the desk sit four objects, each in its own <g>: an open laptop with a sky-blue screen at the back left, a slate desk lamp with a yellow shade and a pale yellow pool of light at the back right, a small sky-blue mug at the front, and a coral pot with three mint leaves at the front right. Motion: give the outer section view-timeline-name: --pinned-run, and drive each object with animation-timeline: --pinned-run, animation-duration: auto and animation-fill-mode: both; each object drops in from 60px above with opacity 0 to its resting place over its own slice of the pinned stretch, in this order: laptop animation-range: contain 0% contain 22%, lamp contain 24% contain 46%, mug contain 48% contain 70%, plant contain 72% contain 94%. Animate only transform and opacity. The base styles are the finished, assembled desk: put only the animation lines (view-timeline-name, animation-*) inside @supports (animation-timeline: view()), with the keyframes going from the hidden state to the base, so browsers without scroll-driven animations show the whole desk pinned while the text scrolls past, and add a prefers-reduced-motion rule that sets animation: none. Size heights in cqh (no vh units), use no overflow: hidden/auto (use overflow: clip if you need clipping) and no position: fixed. On screens of 768px and wider put the text on the left and the desk on the right; below that stack them. Use a navy outline (#1F2A44, 1.5 px, round joins) and the palette ink #1F2A44, slate #5B6B8C, sky #7FB6FF, mint #6FD6B4, sun #FFC861, coral #FF8A7A, paper #F6F4EF; shade each box with a light top, mid right face and darker left face.

Words it rests on

  • pinned scene (position: sticky stage inside a tall section)
  • named view timeline (view-timeline-name)
  • animation-timeline: --name
  • animation-range: contain 0% contain 25%
  • animation-duration: auto, animation-fill-mode: both
  • @supports (animation-timeline: view()) fallback: finished layout
  • cqh units instead of vh
  • isometric illustration (30° projection)
  • three-tone face shading
  • prefers-reduced-motion still frame

Prompt test

A fresh AI session given only this prompt rebuilt this on 2026-11-05 using claude-opus-5-5; a separate fresh session using claude-opus-5-5 judged it “like this”.

The original example
Original
The rebuild made from the prompt alone
Rebuilt from the prompt

Lesson: For a pinned scene, naming the three parts of the mechanism (a tall section with a `position: sticky` stage, a named `view-timeline` on the section, and one `animation-range` slice of `contain` per object) together with "put only the animation lines inside `@supports`" got a rebuild whose objects land in the same order over the same part of the scroll and whose no-support frame is the finished scene, on the first try; the object shapes were left to the rebuild and drifted (cone lamp, round mug and pot), so name the drawing style per object when the silhouette matters.

Facts

Tags
scroll story view timeline position sticky isometric flat shaded harbor
Weight
2.3 KB gzip (HTML + CSS)
Needs
No library, no JavaScript
Browser support
Scroll-driven animations (named view-timeline, animation-range): Chrome and Edge 115+, Safari 26+; Firefox only behind a flag. position: sticky works in every current browser. Other browsers show the finished layout: the whole desk stays pinned while the reader scrolls past.
Motion
follows the scroll; without support or with reduced motion the finished layout shows
Link
/examples/scroll-pinned/

Source

Paste both parts into any page. Wrap the HTML in <div class="ma-scroll-pinned"> and put the CSS in a <style> element or your stylesheet; every class, id and animation name starts with ma-scroll-pinned, so it will not clash with your styles.

demo.html

<section class="ma-scroll-pinned-run">
<div class="ma-scroll-pinned-stage">
<div class="ma-scroll-pinned-copy">
<h2>One desk, everything in reach</h2>
<p>Keep scrolling: the laptop, the lamp, the mug and the plant settle onto the desk one by one while the scene stays put.</p>
</div>
<svg class="ma-scroll-pinned-art" viewBox="72 24 266 232" role="img" aria-labelledby="ma-scroll-pinned-title">
<title id="ma-scroll-pinned-title">An isometric desk with a laptop, a desk lamp, a mug and a potted plant</title>
<g stroke="#1F2A44" stroke-width="1.5" stroke-linejoin="round">
<path d="M178 112L325.2 197L230 252L82.7 167Z" fill="#1F2A44" opacity=".08" stroke="none"/>
<path d="M183.2 119L178 122L178 82L183.2 79Z" fill="#5B6B8C"/>
<path d="M172.8 119L178 122L178 82L172.8 79Z" fill="#47567A"/>
<path d="M178 76L183.2 79L178 82L172.8 79Z" fill="#8F9BB3"/>
<path d="M309.6 192L304.4 195L304.4 155L309.6 152Z" fill="#5B6B8C"/>
<path d="M299.2 192L304.4 195L304.4 155L299.2 152Z" fill="#47567A"/>
<path d="M304.4 149L309.6 152L304.4 155L299.2 152Z" fill="#8F9BB3"/>
<path d="M108.7 162L103.5 165L103.5 125L108.7 122Z" fill="#5B6B8C"/>
<path d="M98.3 162L103.5 165L103.5 125L98.3 122Z" fill="#47567A"/>
<path d="M103.5 119L108.7 122L103.5 125L98.3 122Z" fill="#8F9BB3"/>
<path d="M235.2 235L230 238L230 198L235.2 195Z" fill="#5B6B8C"/>
<path d="M224.8 235L230 238L230 198L224.8 195Z" fill="#47567A"/>
<path d="M230 192L235.2 195L230 198L224.8 195Z" fill="#8F9BB3"/>
<path d="M316.6 152L230 202L230 195L316.6 145Z" fill="#C9D2E3"/>
<path d="M91.4 122L230 202L230 195L91.4 115Z" fill="#A3B0C8"/>
<path d="M178 65L316.6 145L230 195L91.4 115Z" fill="#F6F4EF"/>
<g class="ma-scroll-pinned-item ma-scroll-pinned-laptop">
<path d="M224.8 114L190.1 134L190.1 131L224.8 111Z" fill="#B7C1D3"/>
<path d="M139.9 105L190.1 134L190.1 131L139.9 102Z" fill="#8F9BB3"/>
<path d="M174.5 82L224.8 111L190.1 131L139.9 102Z" fill="#E8ECF3"/>
<path d="M174.5 90L210.9 111L193.6 121L157.2 100Z" fill="#C9D2E3"/>
<path d="M227.4 109.5L224.8 111L224.8 73L227.4 71.5Z" fill="#B7C1D3"/>
<path d="M174.5 82L224.8 111L224.8 73L174.5 44Z" fill="#8F9BB3"/>
<path d="M177.1 42.5L227.4 71.5L224.8 73L174.5 44Z" fill="#E8ECF3"/>
<path d="M178 80L221.3 105L221.3 75L178 50Z" fill="#7FB6FF"/>
<path d="M184.9 62L209.2 76M184.9 69L202.2 79" stroke="#F6F4EF" stroke-width="3" stroke-linecap="round"/>
</g>
<g class="ma-scroll-pinned-item ma-scroll-pinned-lamp">
<path d="M235.2 116L259.4 130L235.2 144L210.9 130Z" fill="#FFE0A3" stroke="none" opacity=".7"/>
<path d="M287.1 138L271.5 147L271.5 144L287.1 135Z" fill="#5B6B8C"/>
<path d="M255.9 138L271.5 147L271.5 144L255.9 135Z" fill="#47567A"/>
<path d="M271.5 126L287.1 135L271.5 144L255.9 135Z" fill="#8F9BB3"/>
<path d="M275 135L271.5 137L271.5 93L275 91Z" fill="#5B6B8C"/>
<path d="M268.1 135L271.5 137L271.5 93L268.1 91Z" fill="#47567A"/>
<path d="M271.5 89L275 91L271.5 93L268.1 91Z" fill="#8F9BB3"/>
<path d="M276.7 90L271.5 93L271.5 89L276.7 86Z" fill="#5B6B8C"/>
<path d="M243 76.5L271.5 93L271.5 89L243 72.5Z" fill="#47567A"/>
<path d="M248.1 69.5L276.7 86L271.5 89L243 72.5Z" fill="#8F9BB3"/>
<path d="M260.3 85.5L248.1 92.5L248.1 83.5L260.3 76.5Z" fill="#FFC861"/>
<path d="M236 85.5L248.1 92.5L248.1 83.5L236 76.5Z" fill="#E8AC3E"/>
<path d="M248.1 69.5L260.3 76.5L248.1 83.5L236 76.5Z" fill="#FFE0A3"/>
</g>
<g class="ma-scroll-pinned-item ma-scroll-pinned-plant">
<path d="M245.5 166L226.5 177L226.5 159L245.5 148Z" fill="#FF8A7A"/>
<path d="M207.4 166L226.5 177L226.5 159L207.4 148Z" fill="#E06A5B"/>
<path d="M226.5 137L245.5 148L226.5 159L207.4 148Z" fill="#FFB8AD"/>
<path d="M226.5 148C204.5 138 206.5 114 222.5 108C224.5 124 224.5 138 226.5 148Z" fill="#4FB896"/>
<path d="M226.5 148C246.5 140 250.5 118 236.5 104C230.5 120 228.5 136 226.5 148Z" fill="#6FD6B4"/>
<path d="M226.5 148C218.5 130 228.5 108 228.5 96C236.5 112 234.5 132 226.5 148Z" fill="#A8E8D2"/>
</g>
<g class="ma-scroll-pinned-item ma-scroll-pinned-mug">
<path d="M187.5 144.5L176.3 151L176.3 136L187.5 129.5Z" fill="#7FB6FF"/>
<path d="M165 144.5L176.3 151L176.3 136L165 129.5Z" fill="#5A93DB"/>
<path d="M176.3 123L187.5 129.5L176.3 136L165 129.5Z" fill="#C4DDFF"/>
<path d="M184.9 134C193.9 135 187.9 146.5 178.9 145.5" fill="none" stroke-width="2.5" stroke-linecap="round"/>
</g>
</g>
</svg>
</div>
</section>

demo.css

/* Pinned scene: a tall section holds a sticky stage, and the desk objects drop into place one by
   one across the section's own named view timeline. The base styles are the finished scene, so
   without support, with reduced motion or paused, the assembled desk simply stays pinned.
   Only transform and opacity move. */
.ma-scroll-pinned {
  background: #F6F4EF;
  color: #1F2A44;
}

.ma-scroll-pinned .ma-scroll-pinned-run {
  position: relative;
  height: 300cqh;
}

.ma-scroll-pinned .ma-scroll-pinned-stage {
  position: sticky;
  top: 0;
  box-sizing: border-box;
  height: 100cqh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  gap: 1rem;
  padding: 1.25rem;
  overflow: clip;
}

.ma-scroll-pinned .ma-scroll-pinned-copy h2 {
  margin: 0 0 0.4rem;
  overflow-wrap: break-word;
  font-size: 1.35rem;
  line-height: 1.2;
}

.ma-scroll-pinned .ma-scroll-pinned-copy p {
  margin: 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5B6B8C;
}

.ma-scroll-pinned .ma-scroll-pinned-art {
  display: block;
  flex: 0 1 auto;
  width: 100%;
  max-width: 34rem;
  min-height: 0;
  max-height: 58cqh;
  margin: 0 auto;
}

/* Two columns on wider screens: words on the left, the desk on the right. */
@media (min-width: 768px) {
  .ma-scroll-pinned .ma-scroll-pinned-stage {
    flex-direction: row;
    align-items: center;
    align-items: safe center;
    gap: 4%;
    padding: 2rem 4%;
  }

  .ma-scroll-pinned .ma-scroll-pinned-copy {
    flex: 1 1 0;
    min-width: 0;
    max-width: 20rem;
  }

  .ma-scroll-pinned .ma-scroll-pinned-copy h2 {
    font-size: 1.75rem;
  }

  .ma-scroll-pinned .ma-scroll-pinned-art {
    flex: 1.6 1 0;
    min-width: 0;
    max-width: 42rem;
    max-height: 80cqh;
  }
}

/* Each object starts above its spot, transparent, and lands on the desk. */
@keyframes ma-scroll-pinned-drop {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation wiring only: the run names its view timeline, and each object takes its own quarter
   of the pinned stretch (contain 0% is when the run's top meets the top of the view, contain 100%
   when its bottom meets the bottom). */
@supports (animation-timeline: view()) {
  .ma-scroll-pinned .ma-scroll-pinned-run {
    view-timeline-name: --ma-scroll-pinned-run;
    view-timeline-axis: block;
  }

  .ma-scroll-pinned .ma-scroll-pinned-item {
    animation-name: ma-scroll-pinned-drop;
    animation-duration: auto;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-timeline: --ma-scroll-pinned-run;
  }

  .ma-scroll-pinned .ma-scroll-pinned-laptop {
    animation-range: contain 0% contain 22%;
  }

  .ma-scroll-pinned .ma-scroll-pinned-lamp {
    animation-range: contain 24% contain 46%;
  }

  .ma-scroll-pinned .ma-scroll-pinned-mug {
    animation-range: contain 48% contain 70%;
  }

  .ma-scroll-pinned .ma-scroll-pinned-plant {
    animation-range: contain 72% contain 94%;
  }
}

/* Calm still frame: the assembled desk. */
@media (prefers-reduced-motion: reduce) {
  .ma-scroll-pinned,
  .ma-scroll-pinned * {
    animation: none !important;
  }
}