Slot text

Each letter spins through a reel of random glyphs and lands on the real one, one after another.

enhancer
entrance
hover
reel
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

Slot text example

Every letter lands in place.

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" data-motion="slot-text">Every letter lands in place.</p>

import { SlotText } from "./motion/react/SlotText";

<SlotText>Your content</SlotText>

<script setup lang="ts">
import SlotText from "./motion/vue/SlotText.vue";
</script>

<template>
  <SlotText>Your content</SlotText>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "slot-text";

The wrappers: SlotText.tsx (React, TypeScript) and SlotText.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-trigger`	`both`	Plays on
`data-motion-dir`	`up`	Reel direction
`data-motion-times`	`8`	Glyphs on each reel
`data-motion-duration`	`750`	Spin time per letter
`data-motion-stagger`	`35`	Delay between letters
`data-motion-glyphs`	`upper`	Glyph set
`data-motion-color`	`#f6a04d`	Reel glyph color

Screen readers hear the text once; the reels are aria-hidden. Every letter keeps its measured width and the reel is clipped inside it, so the line never moves. Text already on screen at load waits for a hover or a replay; reduced motion shows the plain text. The reels pause off screen and in hidden tabs.

Size

slot-text.js is 1.5 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.