# Cursor Comet Aperveil / Light, shaped for the web. 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. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does 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. ## Choose it for Add a small interactive moment to a portfolio opening. Leave the normal cursor visible and keep navigation separate from the decorative trail. ## Limits 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. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/cursor-comet/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 CursorComet from "./CursorComet"; export default function Hero() { return ( } /> ); } // .hero-shader { width: 100%; height: 560px; } ``` Component props: `background`, `headColor`, `tailColor`, `fieldColor`, `headSize`, `tailWidth`, `glow`, `sparkle`, `fieldScale`, `fieldAmount`, `flowSpeed`, `tailLength`, `opacity`, `backgroundOpacity`, `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): Base colour behind the comet. - Head (`headColor`, color): Colour of the comet's head and its sparks. - Tail (`tailColor`, color): Colour of the glowing trail. - Field (`fieldColor`, color): Colour of the faint moving field behind the comet. - Head size (`headSize`, slider): Size of the bright head. - Tail width (`tailWidth`, slider): Width of the trail where it leaves the head; it tapers toward the end. - Head glow (`glow`, slider): Halo around the head and the soft glow beside the trail. - Sparks (`sparkle`, slider): Amount of small sparks flickering along the trail. - Field scale (`fieldScale`, slider): Grain of the background field; higher values make it finer. - Field strength (`fieldAmount`, slider): How visible the background field is; 0 leaves a flat background. - Field drift (`flowSpeed`, slider): How fast the background field drifts and the sparks twinkle. - Tail length (`tailLength`, slider): How much of the recent cursor path remains visible. Zero leaves only the head; higher values retain a longer curved trail. - Opacity (`opacity`, slider): Opacity of the complete effect, including its background. - Background opacity (`backgroundOpacity`, slider): Fade the background independently for transparent overlays. ## 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.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. ## Questions ### Does the comet keep running when I leave the surface? Its local pointer presence fades when the pointer leaves the canvas area. The trail and particles diminish rather than following movement elsewhere on the page. ### Will the trail work as a persistent touch-screen cursor? No. The comet responds to a local pointer and fades when that pointer leaves. On touch screens, keep navigation in ordinary HTML and treat the shader as decoration, not an input affordance. ### What should I not use Cursor Comet for? The trail follows a short cursor history sampled at twelve positions. It is a canvas effect, not a replacement for the operating-system cursor. Its Export Kit includes the same history and fading behavior as the preview. ### 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 - [Dot Grid](https://www.aperveil.com/shaders/dot-grid) - [Neuro Noise](https://www.aperveil.com/shaders/neuro-noise) - [Line Waves](https://www.aperveil.com/shaders/line-waves)