Cursor Comet Free WebGPU shader

Make movement leave a trace.

A glowing comet trail for React with a soft head, tapered tail and small particles. Tune the local pointer effect and export its WebGPU source.

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 Cursor Comet.

Cursor Comet records a bounded cursor history and samples twelve positions by age. A narrowing luminous trail follows the actual bends of that path, with small sparks and a soft head. Tail length controls how much history remains visible, rather than stretching a straight line beyond the cursor.

This is a short procedural light trail, not a particle physics simulation or a replacement for the operating-system cursor. Raw WGSL needs the pointer history uniforms; the React Export Kit includes the motion kernel that supplies them.

0.983 ms GPU timestamp median; p95 1.638 ms. 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-05. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Head size

Size of the bright head.

Tail width

Width of the trail where it leaves the head; it tapers toward the end.

Head glow

Halo around the head and the soft glow beside the trail.

Sparks

Amount of small sparks flickering along the trail.

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

CursorComet usage

"use client";

import CursorComet from "./CursorComet";

export default function Hero() {
  return (
    <CursorComet
      className="hero-shader"
      headSize={0.012} background="#070912ff"
      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