Curve marquee

The text runs without end along a curve, a gentle arc or a wave on a colored ribbon; drag it to fling it either way.

enhancer
loop
marquee
svg
drag
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

Curve marquee example

Be creative ✦ Small files ✦ Smooth motion

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-marquee" data-motion="curve-marquee">Be creative ✦ Small files ✦ Smooth motion</p>

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

<CurveMarquee>Your content</CurveMarquee>

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

<template>
  <CurveMarquee>Your content</CurveMarquee>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "curve-marquee";

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

Options

Attribute	Default	What it does
`data-motion-shape`	`arc`	Curve
`data-motion-depth`	`0.9`	Depth of the curve
`data-motion-waves`	`2`	Crests of a wave
`data-motion-speed`	`70`	Speed
`data-motion-direction`	`left`	Direction
`data-motion-ribbon`	`false`	Colored ribbon under the text
`data-motion-color`	`#f6a04d`	Ribbon color
`data-motion-ink`	`#111111`	Text color on the ribbon
`data-motion-gap`	`✦`	Mark between copies

The page's line keeps its place (invisible) and the curve is drawn over it, so nothing reflows; screen readers hear the text once and the drawing is aria-hidden. Dragging is a flourish, not needed to read anything. Reduced motion holds the text still (dragging still moves it). The loop stops off screen and in hidden tabs.

Size

curve-marquee.js is 1.8 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.