Electric edge
Crackling strands of current wrap an element and surge near the pointer.
- enhancer
- 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
Electric edge example
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-electric-edge" data-motion="electric-edge"><b>Electric edge</b><span>Bring the pointer close</span></div>import { ElectricEdge } from "./motion/react/ElectricEdge";
<ElectricEdge>Your content</ElectricEdge><script setup lang="ts">
import ElectricEdge from "./motion/vue/ElectricEdge.vue";
</script>
<template>
<ElectricEdge>Your content</ElectricEdge>
</template>const el = document.querySelector("#title");
el.dataset.motion = "electric-edge";The wrappers: ElectricEdge.tsx (React, TypeScript) and ElectricEdge.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-color | #5cc8ff | the current's color (deepened on light pages) |
data-motion-amount | 1 | how wild the strands are |
data-motion-strands | 3 | how many strands |
data-motion-sparks | true | sparks where the pointer is near |
Accessibility
One canvas around the element, following its rounded corners; frames run only while it is on screen and the tab is visible. Reduced motion: one still frame of the strands, no sparks. Decorative: hidden from screen readers.
Size
electric-edge.js is 2.6 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.