Fiber Optic Free WebGPU shader

Only one depth is sharp.

A WebGPU bundle of side-glow fibres behind a working focal plane: light fades along each strand as it is lost, leaves through a bright cut tip, and runs in pulses from source to end, while depth sets each strand's blur.

Open editor Meet the surface

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Fiber Optic.

Light moves through each strand the way it does through a side-glow fibre. It enters at the source end and is lost along the way, I = I₀ e^−αs, so a strand is brightest where it leaves the bundle and dims toward its tip; what is left at the end leaves through the cut face, which is why each tip is a point brighter than the strand that feeds it. Every strand has its own length, so the tips land at different places, and pulses of light run from the source to the tip, attenuated on the way like the rest. The strands are arcs around a shared origin whose radius breathes with angle, so the bundle braids rather than stacking rings. Each carries a depth: the circle of confusion opens with the distance from the focal plane and the strand's energy is spread across it, so an out-of-focus strand is wide and dim while a focused one stays a bright hairline — and an out-of-focus tip images as a disc, dimming as the square of its blur.

A lit-strand renderer, not a waveguide: there are no modes, no numerical aperture, no total internal reflection and no dispersion. The loss is a single exponential and the side glow is a fixed fraction of the light carried. The depth of field is one circle-of-confusion term, not a lens model with a real focal length, aberration or a shaped iris. The pointer moves the focal plane and nothing else.

6.619 ms GPU timestamp median; p95 6.685 ms. 1440x900 @ dpr 1.5; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-18. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Bundle origin

Point the strands fan out from; it may sit outside the frame.

Bundle spread

How far apart the strands fan out from one another.

Arc sweep

How much of the circle each strand runs through. The sign picks the end the light enters from, so a negative sweep fans the bundle out the other way.

Arc rotation

Turns the whole fan of strands around its origin.

Color Looks preserve these settings. Open the editor for all 25 controls.

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

In Next.js, use a client component and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

Open editor & export

Markdown guide

Usage example — download FiberOptic.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz

FiberOptic usage

"use client";

import FiberOptic from "./FiberOptic";

export default function Hero() {
  return (
    <FiberOptic
      className="hero-shader"
      spread={1.3} colorNear="#3aa0ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }

Download and extract the complete Export Kit first. Run its local package command from the ZIP root, then copy the component into your project. Public npm and CLI distribution is coming soon.

THE SURFACE IN CONTEXT

Made for a real interface.

Open an infrastructure, network or audio product with a layer that has real depth to it. Keep the copy over the dark side of the sweep and let the visitor rack focus across the bundle. The strands stay behind ordinary HTML.