Spiral Free WebGPU shader

Draw the eye inward.

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

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

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

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

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.

Center

Where the spiral sits. Fixed — the cursor bends the arms instead of moving the whole figure.

Arm drag

How far the cursor drags the arms it passes.

Drag reach

How far from the cursor the arms bend with it.

Arms

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.

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

Spiral usage

"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; }

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

Made for a real interface.

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.