text

Tags for type. Each word below is set by the tag it names, and almost all of them keep moving. Gravity drops in as you reach it, and stretch waits for your pointer. For variable fonts in depth, see the variable font showcase.

gravity

<motion-gravity> drops in when it scrolls into view

Show the codeHide the code

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

<motion-gravity trigger="view" height="120" interval="0.06">gravity</motion-gravity>

stretch

<motion-stretch> hover it

Show the codeHide the code

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

<motion-stretch spread="28">stretch</motion-stretch>

font

<motion-font> breathes between thin and heavy

Show the codeHide the code

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

<motion-font axis="wght" from="200" to="800" duration="1.2" loop hold="0.4" gap="0.4">font</motion-font>

swap

<motion-swap> swaps its letters on a loop

Show the codeHide the code

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

<motion-swap trigger="view" loop hold="1.2" gap="0.4">swap</motion-swap>

liquid

<motion-liquid> never stops flowing

Show the codeHide the code

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

<motion-liquid intensity="14" duration="6">liquid</motion-liquid>

glitch

<motion-glitch> glitches every few seconds

Show the codeHide the code

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

<motion-glitch trigger="loop" intensity="8">glitch</motion-glitch>

circle

<motion-circle> wraps text around a full circle and turns it

Show the codeHide the code

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

<motion-circle text="text set around a full circle, turning slowly, " radius="120" duration="16"><span class="tx-core">circle</span></motion-circle>

perspective

<motion-perspective> recedes and returns on a loop

Show the codeHide the code

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

<motion-perspective depth="0.7" vanish="right" loop>perspective</motion-perspective>

curve

<motion-curve> rides a travelling wave

Show the codeHide the code

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

<motion-curve amplitude="40" wave-length="520" wave-duration="3">curve</motion-curve>

ring

<motion-ring> circles itself, again and again

Show the codeHide the code

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

<motion-ring loop hold="1.4" gap="0.6">ring</motion-ring>

marker

<motion-marker> highlights itself on a loop

Show the codeHide the code

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

<motion-marker loop hold="1.4" gap="0.6">marker</motion-marker>

typewriter

<motion-typewriter> types, holds and erases

Show the codeHide the code

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

<motion-typewriter interval="0.12" loop cursor>typewriter</motion-typewriter>

tickertickertickerticker

<motion-ticker> scrolls forever, and pauses on hover

Show the codeHide the code

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

<motion-ticker speed="70" gap="64" pause-on-hover><span>ticker</span><span class="tx-ghost">ticker</span><span>ticker</span><span class="tx-ghost">ticker</span></motion-ticker>

scramble

<motion-scramble> decodes itself over and over

Show the codeHide the code

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

<motion-scramble loop hold="1.4" gap="0.3" iterations="3">scramble</motion-scramble>

split

<motion-split> letters rise in, leave, and rise again

Show the codeHide the code

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

<motion-split by="chars" interval="0.06" y="60" loop hold="1.2" gap="0.4">split</motion-split>

headline

<motion-headline> letters slide up out of a mask, on a loop

Show the codeHide the code

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

<motion-headline by="chars" interval="0.04" loop hold="1.4" gap="0.4">headline</motion-headline>

text-mask

<motion-text-mask> rises from behind a clip line, on a loop

Show the codeHide the code

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

<motion-text-mask loop hold="1.4" gap="0.4">text-mask</motion-text-mask>

underline

<motion-underline> draws a wave under itself, on a loop

Show the codeHide the code

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

<motion-underline shape="wave" loop hold="1.4" gap="0.6">underline</motion-underline>

strike

<motion-strike> strikes itself through, on a loop

Show the codeHide the code

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

<motion-strike loop hold="1.4" gap="0.6">strike</motion-strike>

<motion-words> rotates through a list of words

Show the codeHide the code

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

<motion-words words="words, rotate, repeat, again" interval="1.8"></motion-words>

<motion-counter> counts up from zero, again and again

Show the codeHide the code

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

<motion-counter to="100" duration="1.8" loop hold="1.6" gap="0.4"></motion-counter>

arc

<motion-arc> bends text along half a circle and orbits

Show the codeHide the code

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

<motion-arc text="text that bends along a slice of a circle" radius="160" arc="180" duration="14"><span class="tx-core">arc</span></motion-arc>