Motion & Reveal

Three motion systems in one: motion= for hover/interaction transitions, float= for idle loop animations, and reveal= for scroll-triggered entrance effects. All driven by CSS custom properties.

motion=

Applies a transition preset to all interactive CSS properties. Hover the buttons below.

<button surface="solid" tone="primary" density="default" radius="md" motion="subtle">subtle</button>
<button surface="solid" tone="primary" density="default" radius="md" motion="expressive">expressive</button>
<button surface="solid" tone="primary" density="default" radius="md" motion="dramatic">dramatic</button>

float=

Continuous floating animation. Pairs beautifully with glass surfaces.

slow

med

fast

<div surface="glass" tone="primary" density="spacious" radius="xl" float="slow">
  Slow float
</div>

<div surface="glass" tone="accent" density="spacious" radius="xl" float="med">
  Medium float
</div>

<div surface="glass" tone="info" density="spacious" radius="xl" float="fast">
  Fast float
</div>

float with axis=

By default float= animates the Y axis. Use axis="x" or axis="xy" for other directions.

axis="x"

axis="xy"

<div float="med" axis="x">Horizontal float</div>
<div float="slow" axis="xy">Diagonal float</div>

reveal=

Scroll-triggered entrance animation. Elements are invisible until they enter the viewport, then animate in. Requires the JS runtime to observe scroll positions. Add reveal-delay="300" (in ms) to stagger multiple items.

reveal= directions

reveal="bottom"

reveal="top"

reveal="left"

reveal="right"

reveal="scale"

reveal="blur"

↑ Scroll out and back in to replay

<!-- Animate from bottom (most common) -->
<div reveal="bottom">Slides up from below</div>

<!-- Other directions -->
<div reveal="top">Slides down from above</div>
<div reveal="left">Slides in from the left</div>
<div reveal="right">Slides in from the right</div>

<!-- Scale up -->
<div reveal="scale">Scales up from 90%</div>

<!-- Blur in -->
<div reveal="blur">Blurs into focus</div>

<!-- Stagger with delay -->
<div reveal="bottom" reveal-delay="0">First</div>
<div reveal="bottom" reveal-delay="100">Second</div>
<div reveal="bottom" reveal-delay="200">Third</div>

Staggered reveal

<div layout="grid" cols="4" gap="md">
  <div surface="glass" density="spacious" radius="lg" reveal="bottom" reveal-delay="0">1</div>
  <div surface="glass" density="spacious" radius="lg" reveal="bottom" reveal-delay="80">2</div>
  <div surface="glass" density="spacious" radius="lg" reveal="bottom" reveal-delay="160">3</div>
  <div surface="glass" density="spacious" radius="lg" reveal="bottom" reveal-delay="240">4</div>
</div>

CSS custom properties

/* Motion */
--aura-motion-subtle-duration:     150ms
--aura-motion-subtle-ease:         ease
--aura-motion-expressive-duration: 280ms
--aura-motion-expressive-ease:     cubic-bezier(0.34, 1.56, 0.64, 1)
--aura-motion-dramatic-duration:   500ms
--aura-motion-dramatic-ease:       cubic-bezier(0.22, 1, 0.36, 1)

/* Float */
--aura-float-slow-duration:  4s
--aura-float-med-duration:   2.5s
--aura-float-fast-duration:  1.5s
--aura-float-amplitude-sm:   6px
--aura-float-amplitude-md:   12px
--aura-float-amplitude-lg:   22px

/* Reveal */
--aura-reveal-distance: 24px
--aura-reveal-duration: 480ms
--aura-reveal-ease:     cubic-bezier(0.22, 1, 0.36, 1)