Light streaks

Streaks of light fall down a curved tunnel, bend around the pointer and warp while held.

element
webgl
pointer
background
warp
light
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

Light streaks 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-light-streaks cover></axi0-light-streaks>

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

<LightStreaks />

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

<template>
  <LightStreaks />
</template>

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

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

Options

Attribute	Default	What it does
`colors`	`#f6a04d,#ff6b8b`	the streaks' two colors
`columns`	`70`	how many lanes the streaks fall in
`speed`	`1`	how fast they fall
`cover`	`false`	fill the nearest positioned parent, behind its content

Decorative: the canvas is hidden from screen readers and takes no pointer events, so a held press still reaches the content. Frames run only on screen in a visible tab. Reduced motion: one still frame and no warp.

Size

light-streaks.js is 1.4 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.