Lightning

A crackling, branching bolt bends toward the pointer and strikes where you click.

element
webgl
pointer
click
background
electric
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

Lightning 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>

<axi0-lightning cover></axi0-lightning>

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

<Lightning />

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

<template>
  <Lightning />
</template>

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

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

Options

Attribute	Default	What it does
`color`	auto	the bolt's color (blue white, deep blue on light pages)
`rate`	`12`	how many times a second the bolt changes shape
`speed`	`1`	how fast it flickers
`cover`	`false`	fill the nearest positioned parent, behind its content

Decorative: the canvas is hidden from screen readers and takes no pointer events (clicks still reach the content). With no pointer near, the bolt wanders on its own. Frames run only on screen in a visible tab. Reduced motion: one still bolt, no flicker. The flicker stays well under three flashes a second of high contrast at the defaults; keep rate for the bolt's shape, not for flashing.

Size

lightning.js is 1.7 KB gzip, with gl.js 2.1 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.