Ghost Cursor
Customize Ghost Cursor
Brightness1.00x
Edge Intensity0.00
Trail Length50
Inertia0.50
Grain Intensity0.05
Bloom Strength0.10
Bloom Radius1.00
Bloom Threshold0.025
Fade Delay1000 ms
Fade Duration1500 ms
Props
| Property | Type | Default | Description |
|---|---|---|---|
| className | string | '' | Optional class name appended to the ghost cursor container. |
| style | React.CSSProperties | {} | Inline styles merged into the absolutely positioned canvas wrapper. |
| trailLength | number | 50 | Number of samples in the motion trail buffer. Larger values create longer ribbons. |
| inertia | number | 0.5 | How strongly the cursor continues drifting after pointer movement stops (0-1). |
| grainIntensity | number | 0.05 | Post-process film grain strength applied to the rendered trail. |
| bloomStrength | number | 0.1 | Intensity for the Unreal Bloom pass producing the glow effect. |
| bloomRadius | number | 1.0 | Bloom kernel radius which widens or tightens the glow spread. |
| bloomThreshold | number | 0.025 | Luminance threshold for bloom activation. Lower values bloom more pixels. |
| brightness | number | 1 | Multiplier applied to the accumulated trail color output. |
| color | string | '#B19EEF' | Base hex color used for the shader tint and bloom. |
| mixBlendMode | React.CSSProperties['mixBlendMode'] | 'screen' | CSS mix-blend-mode applied to the WebGL canvas for compositing. |
| edgeIntensity | number | 0 | Attenuation applied near viewport edges to soften the trail. |
| maxDevicePixelRatio | number | 0.5 | Upper bound for device pixel ratio to manage GPU workload. |
| targetPixels | number | - | Optional pixel budget override for adaptive resolution scaling. |
| fadeDelayMs | number | isTouch ? 500 : 1000 | Delay after pointer idle before the trail begins fading out. |
| fadeDurationMs | number | isTouch ? 1000 : 1500 | Duration of the fade animation once inactivity threshold is reached. |
| zIndex | number | 10 | Stacking context for the absolutely positioned canvas element. |
Dependencies
threethree/examplespostprocessing
Created with ❤️ by Cybershoora