Veil
A silky veil of light drifts through the dark and bends around the pointer.
- element
- webgl
- pointer
- background
- silk
- hero
- 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
Veil 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-veil cover></axi0-veil>import { Veil } from "./motion/react/Veil";
<Veil /><script setup lang="ts">
import Veil from "./motion/vue/Veil.vue";
</script>
<template>
<Veil />
</template>const fx = document.createElement("axi0-veil");
document.querySelector("#hero").append(fx);The wrappers: Veil.tsx (React, TypeScript) and Veil.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
colors | #6d5dfc,#2bb5ff,#ff7ad9 | left, right and the folds |
speed | 1 | how fast it drifts |
bend | 1 | how far it bends around the pointer |
cover | false | fill the nearest positioned parent, behind its content |
Accessibility
Decorative: the canvas is hidden from screen readers and takes no pointer events. Frames run only on screen in a visible tab. Reduced motion: one still frame. Without WebGL a soft glow stands in.
Size
veil.js is 1.2 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.