Panels layout

Panels

Every red dot, on the record.

Each scroll moves one whole page, like a product page. For: project launches and showcases.

The pattern

It turns at every mirror.

The dot travels in straight lines and never waits. The tracker draws every segment.

Twelve rooms

One record.

Every room's dot paths, in the same file.

Two years later

One beam.
Every color.

The dot is only light. Light bounces, and light spreads.

Start tracking.

Open source, free, and ready for any home with a windowsill.

Start tracking ↗ Read the docs
Markup 
<nav class="f-nav f-nav--fixed f-nav--over" aria-label="Site">…</nav>
<nav class="f-dots" aria-label="Panels"></nav>
<main class="f-panels" data-f-panels>
  <section class="f-panel f-panel--bottom">
    <video class="f-panel__media" src="loop.mp4" poster="loop-poster.jpg"
      muted loop playsinline></video>
    <button class="f-media-toggle f-panel__toggle" type="button"
      data-f-panel-toggle hidden>Pause</button>
    <div class="f-panel__copy">
      <h2 class="f-reveal">Every red dot, on the record.</h2>
    </div>
  </section>
  <section class="f-panel f-panel--split f-panel--plain">
    <img class="f-panel__side" src="board-2.jpg" alt="" />
    <div class="f-panel__copy"><h2 class="f-reveal">One record.</h2></div>
  </section>
</main>
<!-- Shapes: f-panel--bottom, --center, --stage, --split, --end; --plain uses page colors. -->