Fiber tunnel
Comets of light race down a swirling tunnel of fibers that the pointer steers.
- element
- webgl
- pointer
- background
- tunnel
- 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
Fiber tunnel 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-fiber-tunnel cover></axi0-fiber-tunnel>import { FiberTunnel } from "./motion/react/FiberTunnel";
<FiberTunnel /><script setup lang="ts">
import FiberTunnel from "./motion/vue/FiberTunnel.vue";
</script>
<template>
<FiberTunnel />
</template>const fx = document.createElement("axi0-fiber-tunnel");
document.querySelector("#hero").append(fx);The wrappers: FiberTunnel.tsx (React, TypeScript) and FiberTunnel.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
colors | #5cc8ff,#8a7dff | the fibers' two colors |
fibers | 40 | how many fibers run round the tunnel |
twist | 1.1 | how much the tunnel swirls with depth |
speed | 1 | how fast the comets race |
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. Strong depth motion can bother some people: the reduced-motion setting stops it entirely.
Size
fiber-tunnel.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.