# Chroma Orbit

Aperveil / Light, shaped for the web.

Collection: Free, available now.

A WebGPU light-ring background for React: paired lights turn round a dark disc and throw shimmering cones of color outward, leaving the middle for your logo.

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

## What it does

Chroma Orbit turns eight paired lights round a dark disc. Each throws a cone of color outward that widens as it goes and, toward its far end, breaks into thin shafts that bend and shimmer. The color belongs to the place on the ring, so a light takes on blue, magenta, orange and green as it passes, and the colors drift very slightly over time. A broad wave of light goes slowly round the ring, so no light blinks on or off. The pointer lights the ring: inside it every light comes up, outside it the lights on its side.

## Choose it for

Frame a logo, a product shot or an event date: put the mark in the dark middle of the ring and let the color turn around it, on a dark page.

## Limits

Chroma Orbit draws its own ring of lights; it does not place or animate your logo, and it is not a particle system or a physical light simulation.

## Current look

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

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

## Landing scene

This preview uses `position`: [0.68,0.55], `radius`: 0.3. The editor link carries these settings with your Look, except the placement: the editor keeps the shader centred. Direct editor visits use the product defaults; Reset all restores those defaults.

## 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 chroma-orbit --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 ChromaOrbit from "./components/aperveil/chroma-orbit/ChromaOrbit";

export default function Hero() {
  return (
    <ChromaOrbit
      className="hero-shader"
      radius={0.358} colorA="#148eff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `colorA`, `colorB`, `colorC`, `colorD`, `colorE`, `colorF`, `background`, `position`, `radius`, `lights`, `pairSpacing`, `litArc`, `coneWidth`, `glow`, `coreSize`, `beams`, `flowSpeed`, `interaction`, `opacity`, `backgroundOpacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

### Vue and Nuxt

```sh
npx @aperveil/cli add shader chroma-orbit --framework vue
```

```vue
<script setup lang="ts">
import ChromaOrbit from "./components/aperveil/chroma-orbit/vue/ChromaOrbit.vue";
</script>

<template>
  <ChromaOrbit class="hero-shader" :radius="0.358" color-a="#148eff">
    <template #fallback><div class="hero-shader-fallback" /></template>
  </ChromaOrbit>
</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-chroma-orbit.js"></script>

<aperveil-chroma-orbit class="hero-shader" radius="0.358" color-a="#148eff">
  <div slot="fallback" class="hero-shader-fallback"></div>
</aperveil-chroma-orbit>

<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-chroma-orbit.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 "Chroma Orbit" block (Design) and place your blocks inside it; in a page builder, use the shortcode:

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

### Framer

Copy `ChromaOrbit.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 Chroma Orbit 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

- Right (`colorA`, color): The color of the wheel to the right of the ring.
- Upper right (`colorB`, color): The color of the wheel up and to the right.
- Upper left (`colorC`, color): The color of the wheel up and to the left.
- Left (`colorD`, color): The color of the wheel to the left.
- Lower left (`colorE`, color): The color of the wheel down and to the left.
- Lower right (`colorF`, color): The color of the wheel down and to the right.
- Background (`background`, color): The ground behind the ring.
- Position (`position`, xy): Where the ring sits in the frame.
- Radius (`radius`, slider): The ring's radius, in frame heights.
- Lights (`lights`, slider): How many paired lights stand round the ring.
- Pair spacing (`pairSpacing`, slider): How far apart the two cores of each light are.
- Lit arc (`litArc`, slider): How much of the ring is lit at a time, in degrees.
- Cone width (`coneWidth`, slider): How widely each light's cone spreads outward.
- Glow (`glow`, slider): How bright the cones of light are.
- Core size (`coreSize`, slider): How large the bright cores are.
- Beams (`beams`, slider): How far each cone breaks into thin, shimmering shafts toward its far end.
- Speed (`flowSpeed`, slider): How fast the lights turn and the lit arc sweeps round.
- Pointer pull (`interaction`, slider): How strongly the pointer lights the ring: inside it every light comes up, outside it the lights on its side.
- 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

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

## Questions

### Can I put my logo in the middle of the ring?

Yes. The disc inside the ring stays dark, so place your logo or product over the shader with ordinary HTML; Position and Radius move and size the ring to fit it.

### Why do the lights change color as they turn?

The color belongs to the place on the ring, not the light: six colors set a wheel round it, and a light takes on each as it passes. The wheel drifts very slightly over time.

### What does the pointer do?

Inside the ring it brings every light up; outside, it lights the lights on its side. Pointer pull 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

- [Prism Halo](https://www.aperveil.com/shaders/prism-halo)
- [Chromatic Eclipse](https://www.aperveil.com/shaders/chromatic-eclipse)
- [Smoke Ring](https://www.aperveil.com/shaders/smoke-ring)