Components showcase — Motion Components

Coil

A desk lamp that dims on a spring.

Launching 1 March 2027. Move your pointer over this panel to light it.

Coil, a jointed desk lamp, lighting a desk

<motion-spotlight> the light that follows your pointer over the panel

<motion-countdown> rolls each digit to the launch date

<motion-dialog> opens from the waitlist button

<motion-progress> the yellow bar along the top of the window

Show the codeHide the code

<script type="module">
  import "motion-components/motion-progress";
  import "motion-components/motion-spotlight";
  import "motion-components/motion-countdown";
  import "motion-components/motion-dialog";
</script>

<motion-progress thickness="3"></motion-progress>

<motion-spotlight size="620" style="--mc-spotlight-color: rgb(250 204 21 / 0.22)">
  <section>
    <h2>A desk lamp that dims on a spring.</h2>
    <motion-countdown to="2027-03-01T09:00:00" format="days hours minutes seconds" roll></motion-countdown>
    <button type="button" id="open-waitlist">Join the waitlist</button>
  </section>
</motion-spotlight>

<motion-dialog id="waitlist" light-dismiss>
  <h2>You found the waitlist</h2>
  <p>Press Escape, click outside, or use the button.</p>
  <button type="button" id="close-waitlist">Close</button>
</motion-dialog>

<script>
  const dialog = document.querySelector("#waitlist");
  document.querySelector("#open-waitlist").addEventListener("click", () => dialog.show());
  document.querySelector("#close-waitlist").addEventListener("click", () => dialog.close());
</script>

<motion-theme-toggle> in the header, wipes this whole launch page between light and dark in a circle from the switch, without changing the site

<motion-theme-icon> Coil's logo, morphing between sun and moon to match

Show the codeHide the code

<script type="module">
  import "motion-components/motion-theme-toggle";
  import "motion-components/motion-theme-icon";
</script>

<article id="page">
  <header class="bar">
    <p class="logo">
      <motion-theme-icon id="logo-icon" mode="light" aria-hidden="true"></motion-theme-icon>
      Coil
    </p>
    <motion-theme-toggle id="page-toggle" appearance="toggle" icon-only wipe target="#page"></motion-theme-toggle>
  </header>
  <!-- the rest of the page -->
</article>

<style>
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1.25rem; }
  .logo { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 700; }
  #page[data-theme="dark"] { background: #1a1a22; color: #e8e8f0; }
</style>

<script>
  const icon = document.querySelector("#logo-icon");
  document.querySelector("#page-toggle").addEventListener("colorschemechange", (e) => {
    icon.mode = e.detail.colorScheme;
  });
</script>

Four finishes

Coil in signal blue A colour you can find in the dark

Coil in ochre As warm as the light it gives

<motion-slider> drag it, use the arrows, or the arrow keys

Show the codeHide the code

<script type="module">
  import "motion-components/motion-slider";
</script>

<motion-slider gap="0" role="region" aria-label="Coil finishes">
  <figure>
    <img src="coil-in-graphite.jpg" alt="Coil in graphite" />
    <figcaption>
      <motion-headline once="false" threshold="0.6">Coil in graphite</motion-headline>
      <motion-headline once="false" threshold="0.6" delay="0.25">Quiet on a dark desk</motion-headline>
    </figcaption>
  </figure>
  <figure>
    <img src="coil-in-signal-blue.jpg" alt="Coil in signal blue" />
    <figcaption>
      <motion-headline once="false" threshold="0.6">Coil in signal blue</motion-headline>
      <motion-headline once="false" threshold="0.6" delay="0.25">A colour you can find in the dark</motion-headline>
    </figcaption>
  </figure>
  <figure>
    <img src="coil-in-paper.jpg" alt="Coil in paper" />
    <figcaption>
      <motion-headline once="false" threshold="0.6">Coil in paper</motion-headline>
      <motion-headline once="false" threshold="0.6" delay="0.25">Light enough to disappear</motion-headline>
    </figcaption>
  </figure>
</motion-slider>

Off, then on

The desk at night with Coil switched off

<motion-image-compare> drag the handle, or focus it and press the arrow keys

Show the codeHide the code

<script type="module">
  import "motion-components/motion-image-compare";
</script>

<motion-image-compare start="50" style="aspect-ratio: 4 / 3">
  <img slot="before" src="desk-off.jpg" alt="The desk at night with Coil switched off" />
  <img slot="after" src="desk-on.jpg" alt="The same desk with Coil switched on" />
</motion-image-compare>

Gallery

<motion-gallery> open any picture, then step through with the arrows

Show the codeHide the code

<script type="module">
  import "motion-components/motion-gallery";
</script>

<motion-gallery columns="3" gap="12" aspect-ratio="4/3">
  <img src="coil-graphite.jpg" alt="Coil in graphite" data-caption="Coil in graphite" />
  <img src="coil-blue.jpg" alt="Coil in signal blue" data-caption="Coil in signal blue" />
  <img src="coil-paper.jpg" alt="Coil in paper" data-caption="Coil in paper" />
  <img src="coil-off.jpg" alt="Coil switched off" data-caption="Coil switched off" />
</motion-gallery>

Questions

How does it dim?

Turn the head. The light eases down on a spring instead of stepping.

Does it remember?

It keeps your last brightness and colour for each time of day.

Is Coil real?

No. It is a made-up product, built to show the components on this page.

<motion-flip-card> click a question to flip it to the answer

Show the codeHide the code

<script type="module">
  import "motion-components/motion-flip-card";
</script>

<motion-flip-card trigger="click" axis="y" style="width: 16rem; height: 12rem">
  <div slot="front">How does it dim?</div>
  <div slot="back">Turn the head. The light eases down on a spring instead of stepping.</div>
</motion-flip-card>