# Spiral

Aperveil / Light, shaped for the web.

A logarithmic spiral background for React with a fixed center and local pointer bending. Tune its arms and falloff, then export the WGSL shader.

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

## What it does

Spiral maps logarithmic radius and angle into winding arms. Integer arm counts keep the polar seam closed, while a configurable center anchors the form.

## Choose it for

Create a focal opening for a motion-design portfolio. Keep the headline off the central pupil and reserve the spiral's strongest contrast for the visual itself.

## Limits

The center is set in the editor rather than attached to the cursor. This is a procedural visual, not an SVG path generator.

## Current look

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

[Open editor](https://www.aperveil.com/shaders/spiral/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 Spiral from "./Spiral";

export default function Hero() {
  return (
    <Spiral
      className="hero-shader"
      bend={1.8} background="#0a0a14ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `background`, `armColor`, `tipColor`, `center`, `bend`, `bendReach`, `arms`, `tightness`, `armSharpness`, `coreSize`, `falloff`, `pupil`, `flowSpeed`, `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

- Background (`background`, color): Colour behind the arms.
- Arms (`armColor`, color): Colour of the spiral arms.
- Highlight (`tipColor`, color): Colour of the arms' bright crests and of the glowing pupil.
- Center (`center`, xy): Where the spiral sits. Fixed — the cursor bends the arms instead of moving the whole figure.
- Arm drag (`bend`, slider): How far the cursor drags the arms it passes.
- Drag reach (`bendReach`, slider): How far from the cursor the arms bend with it.
- Arms (`arms`, slider): Rounded to a whole number: atan2 jumps by 2π on the negative x axis, and only a whole multiplier lands on a full period of the sine. A fraction tears a seam.
- Tightness (`tightness`, slider): How tightly the arms wind around the centre.
- Arm sharpness (`armSharpness`, slider): How thin and crisp the arms are.
- Core clearance (`coreSize`, slider): Keeps the middle from collapsing into a solid disc where every arm meets.
- Edge falloff (`falloff`, slider): How far out the arms reach before fading.
- Pupil (`pupil`, slider): Size of the bright glow at the spiral's centre.
- Spin speed (`flowSpeed`, slider): How fast the spiral turns; 0 holds it still.
- 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.442 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 spiral without moving the cursor?

Yes. Center sets its origin. Bend and Bend reach control how pointer movement locally deforms the pattern around that fixed origin.

### What should I not use Spiral for?

The center is set in the editor rather than attached to the cursor. This is a procedural visual, not an SVG path generator.

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

- [Kaleidoscope](https://www.aperveil.com/shaders/kaleidoscope)
- [Smoke Ring](https://www.aperveil.com/shaders/smoke-ring)
- [Plasma Field](https://www.aperveil.com/shaders/plasma-field)