Three.js@react-three/fiber@react-three/postprocessing
Moss Grid
Backgrounds
Overview
Creepy Background transforms a dark canvas into a constantly evolving field of liquid-like patterns. Vibrant purple and fiery orange formations spread across the screen, folding into irregular waves, swirling shapes, and deep black pockets.
The animation resembles a shifting mixture of smoke, molten material, and psychedelic fluid. Its unpredictable movement creates an unsettling yet visually captivating atmosphere, while the contrast between luminous colours and dark negative space adds depth.
Built using Three.js WebGPU and TSL, the effect uses shader-oriented mathematical and noise functions to create its abstract appearance. It works particularly well for creative portfolios, experimental brands, entertainment websites, and immersive hero sections.
Usage Code
page
import CreepyBackground from '@/components/effects/creepy-background' const page = () => { return ( <div className="h-screen w-full"> <CreepyBackground /> </div> )} export default pageExample Production Use Case
Consider a creative studio launching a website for an experimental digital art exhibition. The homepage opens with a bold exhibition title surrounded by slowly shifting purple and orange fluid patterns.
As visitors explore the page, the background continues transforming, creating an atmosphere that feels mysterious and alive. The dark central space provides contrast for the heading and primary call to action.
The result is a distinctive visual introduction that establishes the exhibition's identity without requiring conventional photography or illustrations.
Best Used For
- Experimental creative agency websites.
- Digital art and immersive exhibition pages.
- Horror, mystery, and entertainment campaigns.
- Music and underground culture websites.
- Futuristic and unconventional brand identities.
- Cinematic hero sections and landing pages.
- Interactive storytelling experiences.
Not For
Creepy Background is less suitable for corporate dashboards, financial applications, checkout flows, and content-heavy interfaces where clarity and restrained visuals are essential. Its high-contrast movement can compete with text and interactive controls.
Avoid combining it with several other intensive animated backgrounds or complex WebGL scenes. The effect works best as a primary atmospheric element with minimal competing motion.
Performance Budget
Keep shader calculations efficient and control the rendering resolution to reduce GPU load. Procedural noise and screen-space effects can become expensive at high resolutions, so test performance across different hardware capabilities.
On mobile and lower-powered devices, reduce rendering quality or animation complexity where necessary. Pause offscreen rendering and provide a static fallback when continuous animation is unnecessary or unsupported.
Accessibility and Mobile
Keep headings, navigation, and interactive elements in accessible HTML above the animated canvas. Maintain sufficient contrast as bright fluid patterns move behind the content.
On mobile, preserve the overall composition without letting high-contrast movement overwhelm smaller screens. Respect prefers-reduced-motion by pausing the shader animation or displaying a static frame.
Common Mistakes
- Excessive colour intensity that overwhelms foreground content.
- Heavy procedural noise calculations that reduce rendering performance.
- Poor contrast between animated patterns and text.
- High rendering resolutions on low-powered devices.
- Abrupt animation movement that disrupts the fluid appearance.
- Running continuous shader updates when the effect is offscreen.
- Missing WebGPU compatibility handling or fallback visuals.
- Ignoring reduced-motion preferences.
Changelog
Initial release
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 0.15 | How fast the clouds crawl and fold into new shapes. |
warp | number | 2.5 | How much the clouds twist into each other. Higher is stranger. Not used when Cursor only is on. |
scale | number | 1.1 | Size of the pattern. Lower values give bigger clouds. Not used when Cursor only is on. |
voidSize | number | 0.65 | Size of the dark, empty area that drifts around the middle. 0 fills the screen. Not used when Cursor only is on. |
cursorOnly | boolean | false | Hides the background clouds so only the colour from the cursor shows on the background colour. |
mouseInteractive | boolean | true | The cursor leaves coloured smoke that spreads out and fades over the clouds. |
mouseStrength | number | 1 | How much colour the cursor releases as it moves. Needs Mouse on. |
mouseSize | number | 1 | Width of the smoke trail the cursor leaves. Needs Mouse on. |
trailLength | number | 2 | How long the smoke lingers and spreads before it fades, in seconds. Needs Mouse on. |
heat | number | 2.2 | How far the clouds burn from blue into orange and red cores. Not used when Cursor only is on. |
grain | number | 0.5 | Strength of the speckled film grain inside the clouds. |
backgroundColor | color | #000000 | Colour of the empty space behind the clouds. |
coolColor | color | #2a1aff | Colour of the thin outer edges of the clouds. |
midColor | color | #e04cff | Colour of the denser middle of the clouds. |
warmColor | color | #ffa01e | Colour of the hot areas near the cores. |
hotColor | color | #d0101a | Colour of the hottest cores. |
