Ghost trail
Outlined echoes of the text trail behind it, fainter the further back, and slide one after another into the word, on view, on hover and every few seconds.
- enhancer
- echo
- trail
- outline
- hover
- entrance
- headline
- 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
Ghost trail example
Motion echo
Motion echo
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>
<p class="m-demo-xl" data-motion="ghost-trail">Motion echo</p>import { GhostTrail } from "./motion/react/GhostTrail";
<GhostTrail>Your content</GhostTrail><script setup lang="ts">
import GhostTrail from "./motion/vue/GhostTrail.vue";
</script>
<template>
<GhostTrail>Your content</GhostTrail>
</template>const el = document.querySelector("#title");
el.dataset.motion = "ghost-trail";
// run the entrance again: axi0Motion.play(el, "ghost-trail")The wrappers: GhostTrail.tsx (React, TypeScript) and GhostTrail.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-every | 3200 | Echo again after (0 = never) |
data-motion-from | left | Trail side |
data-motion-count | 5 | Echoes |
data-motion-distance | 0.3 | Gap between echoes, in letter heights |
data-motion-duration | 1300 | Time the echoes take to settle |
data-motion-color | #f6a04d | Nearest echo |
data-motion-color2 | #ff5f8f | Furthest echo |
Accessibility
The echoes are aria-hidden copies that ignore the pointer; the text itself stays as written, readable and selectable. Only transform and opacity change, so nothing moves around it. Under reduced motion there are no echoes. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.
Size
ghost-trail.js is 1.4 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.