# Light Streaks

Aperveil / Light, shaped for the web.

Collection: Free, available now.

A long-exposure light background for React: glossy rods of light and shade with soft shadows sweep across a pale ground, rendered live in WebGPU.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

Light Streaks lays a satin sheet of color along one direction and gathers it on one side of the frame, leaving the other side clear for copy. Across it, streaks lie like rods: rods of light in the sheen color that glow, and rods of shade in the deep color, each lit from the upper left with a fine bright line and laying a soft shadow on the sheet. Every streak brightens and fades along its length, so the light seems dragged through a long exposure. The pointer is a lamp held over the exposure: as it passes, the fine bright lines slide across the rods and the rods of light near it glow brighter.

## Choose it for

Open a product launch, a SaaS hero or a portfolio on a pale ground with energy along one side: the streaks gather where you set the field, and the clear side holds a heading and a call to action.

## Limits

Light Streaks is drawn, not filmed: it does not blur your own images or video, and its streaks run in one direction at a time. It is not a photograph or a motion-blur pass.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/light-streaks/edit?look=default)

## Install

Install editable source with the CLI; it installs shared dependencies automatically. Free needs no login. ZIP Export Kits are also available.

```sh
npx @aperveil/cli add shader light-streaks --framework react
```

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.

```tsx
"use client";

import LightStreaks from "./components/aperveil/light-streaks/LightStreaks";

export default function Hero() {
  return (
    <LightStreaks
      className="hero-shader"
      angle={48} colorA="#ffc964"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `colorA`, `colorB`, `colorC`, `colorD`, `sheenColor`, `background`, `angle`, `coverage`, `edgeSoftness`, `streaks`, `width`, `softness`, `sheen`, `flowSpeed`, `drift`, `interaction`, `opacity`, `backgroundOpacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

### Vue and Nuxt

```sh
npx @aperveil/cli add shader light-streaks --framework vue
```

```vue
<script setup lang="ts">
import LightStreaks from "./components/aperveil/light-streaks/vue/LightStreaks.vue";
</script>

<template>
  <LightStreaks class="hero-shader" :angle="48" color-a="#ffc964">
    <template #fallback><div class="hero-shader-fallback" /></template>
  </LightStreaks>
</template>

<!-- .hero-shader { width: 100%; height: 560px; } -->
```

Vue 3.5 or newer, Nuxt included: it renders an empty canvas on the server and starts in the browser, so it needs no <ClientOnly>. Same props as the React component.

### Plain HTML

```html
<script type="module" src="./aperveil-light-streaks.js"></script>

<aperveil-light-streaks class="hero-shader" angle="48" color-a="#ffc964">
  <div slot="fallback" class="hero-shader-fallback"></div>
</aperveil-light-streaks>

<style>
  .hero-shader { display: block; width: 100%; height: 560px; }
</style>
```

No install and no build step: keep the two files of the kit's html folder together.

### WordPress

Download `aperveil-shader-light-streaks.zip` from the editor (Install, then WordPress) and upload it under Plugins, Add New, Upload Plugin. WordPress 6.5 or newer: a plugin with a block that holds your own content in front of the shader, and a shortcode for page builders. In the block editor, add the "Light Streaks" block (Design) and place your blocks inside it; in a page builder, use the shortcode:

```html
[aperveil_light_streaks height="560px" overlay="20"]
  <h2>Your headline</h2>
  <p>Your text, in front of the shader.</p>
[/aperveil_light_streaks]
```

### Framer

Copy `LightStreaks.tsx` from the editor (Install, then Framer); it opens on the values you chose. In Framer, add a new code file (Assets, Code), replace its sample code with the copy, then drag Light Streaks onto the canvas: its Color Looks and every control are in the property panel. [Framer guide](https://www.aperveil.com/docs/framer).

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- First color (`colorA`, color): The palest streaks, at the edge of the field.
- Second color (`colorB`, color): The streaks further in.
- Third color (`colorC`, color): Deeper still.
- Deep color (`colorD`, color): The darkest bands, deep in the field.
- Sheen (`sheenColor`, color): The fine bright lines of the exposure.
- Background (`background`, color): The clear ground the streaks fade into.
- Angle (`angle`, slider): The direction the streaks run, in degrees from horizontal.
- Coverage (`coverage`, slider): How much of the frame the colored field fills, from a narrow band at the edge to all of it.
- Edge softness (`edgeSoftness`, slider): How gently the field fades into the clear ground.
- Streaks (`streaks`, slider): How many streaks cross the field.
- Width (`width`, slider): How broad the streaks are.
- Blur (`softness`, slider): How motion-blurred the streaks are across their width.
- Sheen (`sheen`, slider): How bright the fine lines of light are.
- Speed (`flowSpeed`, slider): How fast the light travels along the streaks.
- Drift (`drift`, slider): How far the streaks drift across the frame.
- Pointer light (`interaction`, slider): How strongly the pointer lights the exposure, like a lamp held over it: the fine lines slide across the rods as it passes and the rods of light near it glow.
- Opacity (`opacity`, slider): default 1
- Background opacity (`backgroundOpacity`, slider): Fade the background independently for transparent overlays.

## Compatibility

WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout.

## Performance

3.539 ms GPU timestamp median; p95 8.323 ms. 1440x900 @ dpr 1.25; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-18. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Can I keep one side of the frame clear for text?

Yes. Coverage sets how much of the frame the streaks fill and Edge softness how gently they fade into the ground; Angle turns the whole sweep. The clear side stays the plain background color.

### What makes the streaks look three-dimensional?

Each streak is lit as a rod: one side catches a light from the upper left with a fine bright line, the other falls off, and it lays a soft shadow on the satin sheet beneath. Sheen sets how brightly the rods of light glow.

### What does the pointer do?

It is a lamp held over the exposure: near it the light comes from the pointer, so the fine bright lines slide across the rods as it passes and the rods of light near it glow. Pointer light sets how strongly.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

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. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects.

## License

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. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects.

## Related shaders

- [God Rays](https://www.aperveil.com/shaders/god-rays)
- [Light Seam](https://www.aperveil.com/shaders/light-seam)
- [Fiber Optic](https://www.aperveil.com/shaders/fiber-optic)