Light column

A swirling pillar of light ignites, leans toward the pointer and surges on a click.

element
webgl
pointer
click
background
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 column 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-column cover></axi0-light-column>

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

<LightColumn />

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

<template>
  <LightColumn />
</template>

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

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

Options

Attribute	Default	What it does
`colors`	`#f6a04d,#8a7dff`	the color at the foot and at the top
`width`	`0.13`	the pillar's width, as a share of the box height
`speed`	`1`	how fast it swirls
`cover`	`false`	fill the nearest positioned parent, behind its content

Decorative: the canvas is hidden from screen readers and takes no pointer events. Frames run only on screen in a visible tab. Reduced motion: the pillar stands lit and still, without the ignition. Without WebGL a soft glow stands in.

Size

light-column.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.