Starfield Free WebGPU shader

Leave a little space.

A WebGPU galaxy background with a moving nebula volume, fine stars and depth-dependent parallax. Tune its palette, travel depth and speed, then export for React.

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 Starfield.

Deep Sky moves through a colored three-dimensional density field sampled along perspective rays. Fine stars approach at different depths, while near and far nebula features shift at different rates. Travel depth blends this spatial view with the quieter flat galaxy field; Star Flight retains the clear outward-travelling stars.

Star positions are procedural, not astronomical data. It is a decorative field rather than a planetarium or a particle system with individually addressable stars.

No published timing sample. Profile this effect on your target devices.

Variant

Deep Sky drifts through stars and a nebula; Star Flight flies forward through layered stars.

Depth layers

Number of depth layers of stars; more layers give a deeper field.

Density

Stars per layer. Higher fills the sky; the cost is one cell lookup either way.

Star chance

Fraction of cells holding a star. Sky is mostly empty, and skipping the rest is what keeps twenty layers affordable.

Color Looks preserve these settings. Open the editor for all 20 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 Starfield.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

Starfield usage

"use client";

import Starfield from "./Starfield";

export default function Hero() {
  return (
    <Starfield
      className="hero-shader"
      layers={12} background="#05070fff"
      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