Neuro Noise
A luminous web of fluid lines for atmospheric AI and technology surfaces.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/neuro-noiseUsage
Give the parent element an explicit size. The shader fills the available width and height without taking ownership of positioning or page layout.
import { NeuroNoise } from "@/components/effects/neuro-noise"
export function NeuroNoiseExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<NeuroNoise
colorFront="#f4efff"
colorMid="#8b5cf6"
colorBack="#070511"
brightness={0.12}
contrast={0.42}
speed={0.18}
/>
</div>
)
}API reference
The wrapper adds playback and accessible runtime defaults while preserving
the complete Paper NeuroNoise API. This includes frame, scale, rotation,
offsets, fit controls, pixel-ratio controls, styles, and every shader-specific
prop. See the
Paper Neuro Noise reference for the
full upstream prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport; paused fixes the effective speed at zero. |
colorFront | string | "#b8f3ff" | Sets the highlight color at the brightest line intersections. |
colorMid | string | "#7357ff" | Sets the main color of the fluid line structure. |
colorBack | string | "#09081a" | Sets the background color. The curated default uses a near-black violet. |
brightness | number | 0.08 | Controls luminosity at crossing points from 0 to 1. |
contrast | number | 0.45 | Controls the sharpness of bright-to-dark transitions from 0 to 1. |
speed | number | 0.2 | Sets the base animation rate. Playback can resolve the effective speed to zero without changing this value. |
scale | number | 0.85 | Sets the default zoom level while remaining fully overridable through the Paper API. |
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Accessibility
The shader is decorative by default: it is hidden from assistive technology and does not receive pointer events. Do not use its color or motion as the only way to communicate information. When placing copy over the shader, add a local scrim when necessary and verify text contrast against every animation frame.
playback="auto" honors the user's reduced-motion preference by rendering a
stable frame. Use playback="always" only when continuous motion is essential
to the intended experience.
Performance
The default maxPixelCount limits rendering to approximately 1080p, and the
automatic playback policy pauses work once the component is more than 200px
outside the viewport. Prefer one prominent live shader per viewport and use
static posters for dense cards or component grids.
Browser fallback
The component renders a palette-matched CSS background during server rendering and while capability detection runs. It mounts Paper only when WebGL2 is available; unsupported browsers keep the static fallback instead of showing an empty or broken canvas.
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. vivid-layer supplies the React adapter, defaults, playback policy, fallback, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.