Uilora Logo
Uilora.
Join
Uilora Logo
Uilora.
Join

Void Static

Dark interference pattern with glitch strips creating a void static effect.

Main Features of Void Static

How to Use Void Static in Next.js

Installation Guide for Void Static

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#000000Background color
baseNoiseOpacity
number0.15Base noise opacity
baseNoiseBaseFrequency
string2Base noise frequency
baseNoiseOctaves
number3Base noise octaves
staticLineCount
number20Number of static lines
staticLineColor
string#ffffffStatic line color
staticLineHeight
string2pxStatic line height
staticMinDuration
number0.5Minimum static animation duration
staticMaxDuration
number2Maximum static animation duration
staticMinDelay
number0Minimum static delay
staticMaxDelay
number1Maximum static delay
scanlineOpacity
number0.1Scanline opacity
scanlineColor
string#ffffffScanline color
scanlineWidth
string1pxScanline width
scanlineSpacing
string4pxScanline spacing
scanlineAnimationDuration
number0.1Scanline animation duration
text
stringVoidText label
textColor
string#ffffffText color
className
stringAdditional CSS classes
PreviousPrint Halftone
NextLiquid Fractal

When to Use

Ideal for artistic dark modes, music-related landing pages, and Next.js sites that want a mysterious, 'void' aesthetic. Use this React component for a dark interference effect with randomized glitch strips and high-frequency digital noise.

Best Practices

Maintain consistent spacing within your design system by using this as a background for high-energy narrative sections. Follow React best practices by pairing it with white, high-contrast typography. Optimize for performance by managing the `staticLineCount` to avoid excessive DOM nodes.

Why This Component Matters in Modern UI Development

Void static visuals communicate a sense of signal interference and abstract data. This production-ready component helpsคุณ build an interface that feels edgy and 'unstable' in a controlled, atmospheric way, adding a unique visual identity to your project.

Frequently Asked Questions

QHow random is the glitch?

Each glitch strip moves on an independent path with randomized durations and delays, ensuring the 'static' never repeats a pattern.

QCan I adjust the intensity of the noise?

Yes, the `baseNoiseOpacity` controls the underlying constant grain, while `scanlineOpacity` adds a layer of depth to the signal effect.

QIs it mobile friendly?

Yes, it uses hardware-accelerated transforms for the strip movements, providing a smooth experience even on mobile browsers.

Void Static - React Noise Texture & Grain Effects | Uilora