Edge glow

A gradient border glows on the side nearest the pointer, brightest at the edge.

enhancer
hover
pointer
border
glow
card
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

Edge glow example

Glow along the edgeBring the pointer close to the border: the colored light follows its direction and grows brighter at the edge.

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>

<div class="m-edge-glow" data-motion="edge-glow"><svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true"><path d="M12 2l2.1 6.4L20.5 10l-6.4 2.1L12 18.5l-2.1-6.4L3.5 10l6.4-1.6z" fill="currentColor"/><path d="M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z" fill="currentColor"/></svg><b>Glow along the edge</b><span>Bring the pointer close to the border: the colored light follows its direction and grows brighter at the edge.</span></div>

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

<EdgeGlow>Your content</EdgeGlow>

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

<template>
  <EdgeGlow>Your content</EdgeGlow>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "edge-glow";

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

Options

Attribute	Default	What it does
`data-motion-colors`	`#f6a04d,#ff6b8b,#8a7dff`	up to three hex colors along the lit arc
`data-motion-width`	`2`	the ring's width in pixels
`data-motion-glow`	`16`	the blur of the glow in pixels
`data-motion-reach`	`90`	how far outside the element, in pixels, the pointer still lights it
`data-motion-spread`	`80`	half the lit arc, in degrees

The ring and its glow are one layer over the element's border, changed through paint only (no layout). On an element that clips its overflow, the ring sits just inside the border. A keyboard focus ring inside lights the edge fully; a tap lights it for a moment. Reduced motion: the glow follows without easing. Decorative: hidden from screen readers.

Size

edge-glow.js is 1.8 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.