Smoke Ring Free WebGPU shader

A quiet center. A restless edge.

A drifting smoke ring for React, with editable position and local pointer disturbance. Shape the torus, density and glow in the WebGPU editor.

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 Smoke Ring.

A bounded torus volume carries rotating multiscale density. Front-to-back transmittance gives depth, while the pointer disturbs a nearby arc without moving the ring center.

Procedural volume integration, not a persistent fluid solver or a combustion simulation.

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

Location

Position the ring without coupling it to the cursor.

Ring radius

Size of the ring.

Ring thickness

Width stays nearly fixed and turbulence modulates density instead — letting churn drive the width ballooned the annulus until the hole closed.

Turbulence

How ragged and full the rolling smoke is.

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

SmokeRing usage

"use client";

import SmokeRing from "./SmokeRing";

export default function Hero() {
  return (
    <SmokeRing
      className="hero-shader"
      radius={0.24} airColor="#08080dff"
      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.

Frame a short statement with a breathing perimeter. Keep the ring center clear and use the surrounding smoke as an accent for an audio or creative studio.