Word cycle
A word cycles through a list, letter by letter, on a colored pill that fits each word.
- enhancer
- loop
- words
- pill
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Word cycle example
Make it gorgeous
Make it gorgeous
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<p class="demo-big">Make it <span data-motion="word-cycle" data-motion-words="gorgeous|smooth|tiny|yours">gorgeous</span></p>import { WordCycle } from "./motion/react/WordCycle";
<WordCycle>Your content</WordCycle><script setup lang="ts">
import WordCycle from "./motion/vue/WordCycle.vue";
</script>
<template>
<WordCycle>Your content</WordCycle>
</template>const el = document.querySelector("#title");
el.dataset.motion = "word-cycle";The wrappers: WordCycle.tsx (React, TypeScript) and WordCycle.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-words | auto | The other words, separated by | |
data-motion-interval | 2200 | Time per word |
data-motion-stagger | 22 | Delay between letters |
data-motion-from | below | Letters arrive |
data-motion-align | start | Word inside its slot |
data-motion-pill | true | Colored pill |
data-motion-color | #f6a04d | Pill color |
data-motion-ink | #111111 | Text color on the pill |
Accessibility
The slot is as wide as the longest word from the start, so the sentence never reflows; write the longest word in the page (it is what readers see without scripts). The pill sits a little outside the word, so give the element some margin. Screen readers hear every word once. Reduced motion keeps the first word still. The loop stops off screen and in hidden tabs.
Size
word-cycle.js is 1.6 KB gzip, with text-kit.js 2.6 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.