# Light Curtain

Aperveil / Light, shaped for the web.

Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon.

A WebGPU curtain of light threads for React: hair-fine lines falling down a wall and turning onto the floor toward you, light running down them.

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

## What it does

Light Curtain hangs hair-fine threads of light down a wall and turns them, over a rounded edge, onto the floor toward you, where perspective fans them wide. Each thread has its own color and brightness. Light runs down them in three ways, as long comets, strings of beads and slow-breathing glows, under a broad swell that rolls along the curtain. Bend sets how gently the wall turns into the floor; Ripple lets the curtain wave. The pointer parts the threads around it.

## Choose it for

Open a music, event or technology page in the dark: the curtain's foot under the headline, its light falling toward the reader.

## Limits

Light Curtain draws its own threads; it is not a particle system and does not follow your scroll or react to sound.

## Current look

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

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

## Landing scene

This preview uses `threads`: 120, `bend`: 1.2. The editor link carries these settings with your Look. Direct editor visits use the product defaults; Reset all restores those defaults.

## Install

Light Curtain is part of Aperveil Shaders and Aperveil Pro, coming soon. Its live demo is open; installation and downloads open in a later release. Free shaders install today: see the [Aperveil integration guide](https://www.aperveil.com/docs).

## Controls

- Main threads (`colorA`, color): Most threads, and the haze behind the curtain.
- Second threads (`colorB`, color): The next most common color.
- Warm threads (`colorC`, color): The warm threads among them.
- Bright threads (`colorD`, color): A few near-white threads.
- Background (`background`, color): The dark ground.
- Threads (`threads`, slider): How many threads hang across the curtain.
- Width (`width`, slider): How wide the curtain is.
- Bend (`bend`, slider): The radius of the edge where the wall turns into the floor.
- Ripple (`wave`, slider): How far the curtain ripples across its threads.
- Height (`horizon`, slider): Where the eye sits: the curtain's foot moves with it.
- Light pulses (`streaks`, slider): How much the light gathers into comets and beads running along the threads, rather than a steady glow.
- Glow (`glow`, slider): The soft glow beside each thread.
- Haze (`haze`, slider): The faint haze behind the curtain.
- Speed (`speed`, slider): How fast the light runs down the threads and the curtain ripples.
- Pointer response (`interaction`, slider): How far the threads part around the pointer.
- Opacity (`opacity`, slider): Opacity of the whole effect, including its background.
- Background opacity (`backgroundOpacity`, slider): Fade the background on its own, for a transparent overlay.

## 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

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

## Questions

### Can the light run more steadily, like rain?

Light pulses sets how much of it gathers into comets and beads; at zero every thread glows steadily. Speed sets how fast the light runs.

### How do I change the shape of the curtain?

Bend sets the radius where the wall turns into the floor, Width how wide the curtain is, Height where the eye sits, and Ripple how much the curtain waves.

### What does the pointer do?

It parts the threads around itself; Pointer response sets how far.

### 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 Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects.

## License

Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects.

## Related shaders

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