Deck layout · facet

How light moves.

A deck: one stage, and every scroll is the next slide.

One laser.

Every red dot starts as light.

A filter keeps only red.

Pieces change color, so the light does too.

A mirror bends it.

The red beam turns down and finds the target.

Light adds up.

Red and green meet, and the target turns yellow.

Four rooms.

The board shrinks into four rooms of dot paths.

Start tracking.

example.com/red-dot

Markup

<main class="f-deck" data-f-deck>
  <div class="f-deck__stage">
    <div class="f-deck__caps"></div>
    <div class="f-deck__frame">
      <div class="f-deck__board" aria-hidden="true">
        <i class="f-deck__piece f-deck__tile" data-f-piece="laser"></i>
        <i class="f-deck__piece f-deck__beam" data-f-piece="b1"></i>
      </div>
    </div>
    <div class="f-deck__bar">
      <button type="button" data-f-deck-prev aria-label="Previous slide">↑</button>
      <span class="f-deck__count">1 / 2</span>
      <span class="f-deck__progress"></span>
      <button type="button" data-f-deck-next aria-label="Next slide">↓</button>
    </div>
  </div>
  <section class="f-deck__slide" data-f-slide='{"laser": {"at": [50, 50]}}'>
    <h2>How light moves.</h2>
  </section>
  <section class="f-deck__slide"
    data-f-slide='{"laser": {"at": [20, 50]}, "b1": {"beam": [20, 50, 60]}}'>
    <h2>In straight lines.</h2>
  </section>
</main>
<!-- The data-f-slide format is on the Overview page, under Behavior. -->