Ribbon trail

Springy ribbons chase the pointer, each on its own spring so they part on turns and gather when it rests, in lens, comet or even shapes.

element
cursor
trail
ribbons
pointer
spring
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

Ribbon trail example

Move the pointer

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>

<axi0-ribbon-trail cover></axi0-ribbon-trail><p class="demo-big">Move the pointer</p>

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

<RibbonTrail />

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

<template>
  <RibbonTrail />
</template>

const fx = document.createElement("axi0-ribbon-trail");
document.querySelector("#hero").append(fx);

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

Options

Attribute	Default	What it does
`count`	`3`	How many ribbons
`width`	`30`	Ribbon width
`shape`	`lens`	Ribbon shape: thick in the middle, thick at the head, or even
`wave`	`false`	Let the ribbons ripple as they go
`length`	`34`	Ribbon length, in links
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Decorative: the canvas is aria-hidden and takes no focus; with cover it ignores the pointer, so the content above it stays clickable and readable. Touch: drag a finger and the ribbons follow; with no pointer they follow a path of their own, so keyboard users see the same motion. Drawn on a 2D canvas at device resolution (capped at 2); it starts when it comes within 300 px of the screen, the frame loop stops off screen and in hidden tabs, and reduced motion draws one still frame with no movement.

Size

ribbon-trail.js is 1.3 KB gzip, with backgrounds-kit.js 3.4 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.