reveal

Tags for how content arrives. This page is a short essay, and each part of it enters in its own way. The caption under each part names the tag and the setting. Scroll back up and most of it plays again.

A page is read in time, not all at once.

<motion-blur> direction="both": sharp only in the middle of the screen, blurred as it arrives and as it leaves

Show the codeHide the code 
<script type="module">
  import "motion-components/motion-blur";
</script>

<motion-blur direction="both" intensity="18" y="40" once="false">
  <p>A page is read in time, not all at once.</p>
</motion-blur>

Motion tells you where to look.

<motion-blur-in> comes into focus over 0.9 seconds when it scrolls into view

Show the codeHide the code 
<script type="module">
  import "motion-components/motion-blur-in";
</script>

<motion-blur-in intensity="24" y="28" duration="0.9" once="false">
  <h2>Motion tells you where to look.</h2>
</motion-blur-in>

When everything appears at the same moment, the eye has to decide on its own where to start. A small, short movement settles that question. It points at the part that just changed and says: start here.

<motion-reveal> fades in and rises 64 pixels on a spring

Show the codeHide the code 
<script type="module">
  import "motion-components/motion-reveal";
</script>

<motion-reveal y="64" duration="0.8" once="false">
  <p>
    When everything appears at the same moment, the eye has to decide on its own
    where to start. A small, short movement settles that question.
  </p>
</motion-reveal>

What a single movement can say

This is new.

This belongs with that.

Read this first.

This came from where you clicked.

Nothing here changed.

<motion-stagger> each line follows the one before it by 0.12 seconds

Show the codeHide the code 
<script type="module">
  import "motion-components/motion-stagger";
</script>

<motion-stagger interval="0.12" y="28" duration="0.6" once="false">
  <p>This is new.</p>
  <p>This belongs with that.</p>
  <p>Read this first.</p>
  <p>This came from where you clicked.</p>
  <p>Nothing here changed.</p>
</motion-stagger>
Good motion is noticed once, then forgotten.

<motion-blur> direction="in": the blur follows your scroll, so it sharpens as you move down and blurs again as you move up

Show the codeHide the code 
<script type="module">
  import "motion-components/motion-blur";
</script>

<motion-blur direction="in" intensity="22" y="60" once="false">
  <blockquote>Good motion is noticed once, then forgotten.</blockquote>
</motion-blur>

The first time, a movement explains what happened. After that it should get out of the way. That is why these entrances are short, why they use springs instead of fixed curves, and why they never move the text you are already reading.

<motion-reveal> y="-48": drops in from above instead of rising

Show the codeHide the code 
<script type="module">
  import "motion-components/motion-reveal";
</script>

<motion-reveal y="-48" duration="0.9" once="false">
  <p>
    The first time, a movement explains what happened.
    After that it should get out of the way.
  </p>
</motion-reveal>

Three ways to order a list

onetwothreefourfive

from="first" left to right

onetwothreefourfive

from="center" outward from the middle

onetwothreefourfive

from="last" right to left

<motion-stagger> the same five words with three values of from

Show the codeHide the code 
<script type="module">
  import "motion-components/motion-stagger";
</script>

<motion-stagger interval="0.1" y="40" from="first" once="false" style="display: flex; gap: 1rem">
  <span>one</span><span>two</span><span>three</span><span>four</span><span>five</span>
</motion-stagger>

<motion-stagger interval="0.1" y="40" from="center" once="false" style="display: flex; gap: 1rem">
  <span>one</span><span>two</span><span>three</span><span>four</span><span>five</span>
</motion-stagger>

<motion-stagger interval="0.1" y="40" from="last" once="false" style="display: flex; gap: 1rem">
  <span>one</span><span>two</span><span>three</span><span>four</span><span>five</span>
</motion-stagger>

And when you move on, it lets go.

<motion-blur> direction="in": comes into focus as you reach the end, and blurs again if you scroll back up

Show the codeHide the code 
<script type="module">
  import "motion-components/motion-blur";
</script>

<motion-blur direction="in" intensity="20" y="40" once="false">
  <p>And when you move on, it lets go.</p>
</motion-blur>