# Grid Horizon

Aperveil / Light, shaped for the web.

A perspective grid and striped sun for React. Set the horizon, fog, glow and color palette, then export the WebGPU scene.

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

## What it does

Grid Horizon combines a perspective floor, distance fog and a slitted sun. Grid scale, horizon height and steering shape the view while flow speed advances the scene.

## Choose it for

Set the tone for a music release or game-tool page. Place a short title in the sky above the horizon and keep the grid visible beneath it.

## Limits

The scene is procedural screen-space imagery. It is not a navigable 3D environment, a game level or a model viewer.

## Current look

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

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

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

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

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 GridHorizon from "./GridHorizon";

export default function Hero() {
  return (
    <GridHorizon
      className="hero-shader"
      horizon={0.48} skyTop="#140b2eff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `skyTop`, `skyHorizon`, `sunColor`, `gridColor`, `groundColor`, `horizon`, `gridScale`, `lineWidth`, `fogDistance`, `sunSize`, `slitCount`, `glow`, `flowSpeed`, `steer`, `opacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

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

## Controls

- Sky top (`skyTop`, color): Colour of the sky at the top of the frame.
- Sky horizon (`skyHorizon`, color): Colour of the sky at the horizon, also the haze over the far floor.
- Sun (`sunColor`, color): Colour of the sun and its glow.
- Grid (`gridColor`, color): Colour of the floor's grid lines.
- Ground (`groundColor`, color): Colour of the floor between the grid lines.
- Horizon height (`horizon`, slider): Height of the horizon line in the frame.
- Grid scale (`gridScale`, slider): Density of the grid; higher values give smaller squares.
- Line width (`lineWidth`, slider): In pixels — the width is scaled by how much world space one pixel covers, so distant lines do not alias.
- Fog distance (`fogDistance`, slider): How far the grid stays visible before fading into the horizon haze.
- Sun size (`sunSize`, slider): Size of the sun.
- Sun slits (`slitCount`, slider): Number of horizontal slits cut through the sun; 0 leaves it whole.
- Glow (`glow`, slider): Glow around the sun and along the grid lines.
- Travel speed (`flowSpeed`, slider): How fast the floor rolls toward you; 0 stops it.
- Cursor steer (`steer`, slider): Moves the vanishing point sideways, turning the whole scene.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

## Compatibility

WebGPU rendering requires a supported browser and secure context. 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. Text exports also retain readable HTML typography.

## Performance

0.402 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-02. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Can I move the horizon and resize the sun separately?

Yes. Horizon height and Sun size are independent editor controls; Grid scale, Fog distance and Sun slits let you adjust the surrounding composition.

### Where should I place text over a synthwave grid?

Keep a short HTML headline above the horizon and leave room for the sun. Use the editor to move the horizon or adjust the sun size when fitting your own layout. The exported shader does not contain this page's text or buttons.

### What should I not use Grid Horizon for?

The scene is procedural screen-space imagery. It is not a navigable 3D environment, a game level or a model viewer.

### 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. An alpha access grant is not a purchase or a replacement for those license terms.

## 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. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Starfield](https://www.aperveil.com/shaders/starfield)
- [Iso Grid](https://www.aperveil.com/shaders/iso-grid)
- [Rising Cubes](https://www.aperveil.com/shaders/rising-cubes)