Velocity band
Big rows of text slide sideways without end; scrolling speeds them up, turns them around and leans them.
- enhancer
- scroll
- marquee
- loop
- 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
Velocity band example
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<div class="m-demo-band" data-motion="velocity-band"><div>Small files ✦ Smooth motion ✦ No framework ✦</div><div>Scroll the page ✦ Watch it lean ✦</div></div>import { VelocityBand } from "./motion/react/VelocityBand";
<VelocityBand>Your content</VelocityBand><script setup lang="ts">
import VelocityBand from "./motion/vue/VelocityBand.vue";
</script>
<template>
<VelocityBand>Your content</VelocityBand>
</template>const el = document.querySelector("#title");
el.dataset.motion = "velocity-band";The wrappers: VelocityBand.tsx (React, TypeScript) and VelocityBand.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-speed | 80 | Speed at rest |
data-motion-boost | 5 | How much scrolling speeds it up |
data-motion-lean | 7 | Most lean while scrolling |
data-motion-gap | 0.5 | Space between copies |
Accessibility
Each child element is a row (or the element itself, with no children); rows alternate direction. The first copy is the page's own text; the repeats are aria-hidden and inert, so links inside are reached once. Rows keep their line height; only transforms move. Reduced motion stops the rows. The loop stops off screen and in hidden tabs.
Size
velocity-band.js is 1.1 KB gzip, with text-kit.js 3.2 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.