Ring text

The letters sit around a circle that turns slowly; hovering speeds it up, slows it, pauses it or sends it spinning.

enhancer
loop
hover
circle
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

Ring text example

MOTION • TEXT • RING •

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="ring-text">MOTION • TEXT • RING •</p>

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

<RingText>Your content</RingText>

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

<template>
  <RingText>Your content</RingText>
</template>

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

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

Options

Attribute	Default	What it does
`data-motion-spin`	`18`	Time per turn
`data-motion-hover`	`fast`	On hover
`data-motion-direction`	`cw`	Direction
`data-motion-size`	`0`	Ring size (0 fits the text)

The element keeps the box of its line (the text stays in place, invisible) and the ring is drawn centered on it, so nothing reflows; leave room around it, or set a size. Screen readers hear the text once; the ring is aria-hidden. Reduced motion shows a still ring. The loop stops off screen and in hidden tabs.

Size

ring-text.js is 1.4 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.