Orbit border
A twinkling star runs the exact outline of any button, pill or card, trailing light and stardust, and speeds up under the pointer.
- enhancer
- border
- glow
- button
- card
- sparkle
- 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
Orbit border 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-ob-demo"><button class="m-ob-btn" type="button" data-motion="orbit-border">Get started</button><div class="m-ob-card" data-motion="orbit-border" data-motion-stars="2" data-motion-speed="9"><b>Starlight edge</b><span>The star keeps to any outline: pills, cards and circles.</span></div></div>import { OrbitBorder } from "./motion/react/OrbitBorder";
<OrbitBorder>Your content</OrbitBorder><script setup lang="ts">
import OrbitBorder from "./motion/vue/OrbitBorder.vue";
</script>
<template>
<OrbitBorder>Your content</OrbitBorder>
</template>const el = document.querySelector("#title");
el.dataset.motion = "orbit-border";The wrappers: OrbitBorder.tsx (React, TypeScript) and OrbitBorder.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-color | #f6a04d | Color of the star and its trail |
data-motion-speed | 5 | Seconds for one lap |
data-motion-trail | 0.32 | Trail length, as a share of the outline |
data-motion-stars | 1 | How many stars share the outline |
data-motion-dust | true | Shed sparkling dust as it goes |
Accessibility
Decorative: the canvas is aria-hidden, takes no pointer events and never covers the element's text, so the button or card keeps its own role, label and focus ring. Keyboard focus speeds the star the way the pointer does. Touch users see the same orbit. 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
orbit-border.js is 2.9 KB gzip. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.