Story

Operation Red Dot

A scroll story: the visual stays pinned while the steps scroll past, and the visual follows along. For: explainer posts, project tours, film-like pages.

Day one

A red dot appears on the living-room wall. I pounce, and it is gone.

The pattern

It travels in straight lines, turns at every mirror, and never waits for me.

The light

The dot is only light. Light bounces, light bends, and it is always one step ahead.

The tracker

So I start writing down everywhere it goes, one room at a time.

Two years later

Twelve rooms, 412 dots, zero catches. I am still very satisfied.

Markup 
<div class="f-story" data-f-story>
  <div class="f-story__pin">
    <div class="f-story__stage" aria-hidden="true">
      <img src="board.jpg" alt="" data-step="0" />
      <img src="prism.jpg" alt="" data-step="1" />
    </div>
    <span class="f-story__count" aria-hidden="true">1 / 2</span>
  </div>
  <div class="f-story__steps f-prose">
    <section class="f-story__step">
      <img class="f-story__inline" src="board.jpg" alt="" loading="lazy" />
      <h2>Day one</h2>
      <p>A red dot appears on the living-room wall.</p>
    </section>
    <section class="f-story__step">…</section>
  </div>
</div>