React Dark Veil Background
React dark veil background with WebGL rendering. Features neural network-generated patterns, scanline effects, and customizable distortion using OGL.
Creating immersive neural backgrounds?
Join our Discord community for help from other developers working with WebGL shaders.
Remember those old CRT monitors that would flicker with mysterious patterns when tuned between channels? The ones where organic, almost alien-like textures would emerge from digital noise, creating landscapes that seemed to pulse with their own life? Most backgrounds today feel sterile and predictable—simple gradients or repeating patterns. This React component captures that raw, neural aesthetic with AI-generated textures that shift and evolve, combined with authentic scanline effects and customizable distortion that makes your interface feel alive and otherworldly.
Neural patterns with vintage scanlines
Watch AI-generated textures morph through space with authentic CRT-style scanlines:
Built for React applications with TypeScript and Next.js. Uses WebGL through OGL for hardware-accelerated neural pattern rendering that maintains 60fps with complex CPPN (Compositional Pattern Producing Networks) calculations. The scanline system recreates authentic CRT monitor effects while hue shifting creates dynamic color evolution. Perfect for cyberpunk interfaces, sci-fi applications, or any design that needs to feel futuristic and organic. Seamless integration with shadcn/ui design systems.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/dark-veil-background.jsonnpx shadcn@latest add https://www.shadcn.io/registry/dark-veil-background.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/dark-veil-background.jsonbunx shadcn@latest add https://www.shadcn.io/registry/dark-veil-background.jsonWhy static backgrounds feel lifeless
Developers create a dark background, maybe add a subtle texture, and consider the mood complete. The problem? Static patterns don't evolve. They don't create the sense that something intelligent is happening beneath the surface of your interface.
Neural-generated patterns change everything. They tap into our fascination with emergence—the way complex, beautiful structures can arise from simple mathematical rules. The organic textures feel almost biological, like looking at microscopic life or neural networks firing. The scanlines add nostalgic authenticity that connects cutting-edge AI aesthetics with retro-futurism.
This component handles the complex CPPN neural network calculations automatically. Multiple processing layers, sigmoid activation functions, and hue space transformations all work together to create patterns that feel genuinely intelligent and alive.
Features
- Neural pattern generation using CPPN (Compositional Pattern Producing Networks) for organic textures
- Authentic CRT scanlines with customizable frequency and intensity for vintage monitor effects
- Dynamic hue shifting through YIQ color space for smooth color transitions
- Procedural distortion with sine wave warping for fluid motion effects
- Adjustable noise layers for film grain and texture enhancement
- Performance optimization with configurable resolution scaling
- Real-time animation with customizable speed controls
- Hardware acceleration using WebGL shaders for 60fps rendering
- TypeScript support with complete prop forwarding and type safety
API Reference
DarkVeilBackground
| Prop | Type | Default | Description |
|---|---|---|---|
hueShift | number | 0 | Degrees of hue rotation for color shifting (-360 to 360) |
noiseIntensity | number | 0 | Film grain intensity (0.0 to 1.0) |
scanlineIntensity | number | 0 | CRT scanline darkness (0.0 to 1.0) |
speed | number | 0.5 | Animation speed multiplier |
scanlineFrequency | number | 0 | Scanline density (0 = no scanlines, higher = more lines) |
warpAmount | number | 0 | Distortion intensity (0.0 to 2.0) |
resolutionScale | number | 1 | Render resolution multiplier for performance tuning |
className | string | - | Additional CSS classes for the container |
...props | HTMLAttributes<HTMLDivElement> | - | All standard div props supported |
Effect Combinations
The component layers multiple effects for rich visual complexity:
| Effect Layer | Purpose | Performance Impact | Visual Result |
|---|---|---|---|
| CPPN Neural Network | Base pattern generation | High | Organic, evolving textures |
| Hue Rotation | Color space transformation | Low | Smooth color transitions |
| Scanline Overlay | CRT monitor simulation | Medium | Authentic retro display effect |
| Noise Addition | Film grain texture | Low | Analog imperfection |
| Warp Distortion | Fluid motion | Medium | Dynamic spatial transformation |
Style Examples
// Cyberpunk aesthetic
<DarkVeilBackground
hueShift={180}
scanlineIntensity={0.3}
scanlineFrequency={4.0}
warpAmount={1.5}
/>
// Subtle organic texture
<DarkVeilBackground
hueShift={45}
noiseIntensity={0.1}
warpAmount={0.5}
/>
// High-performance mode
<DarkVeilBackground
resolutionScale={0.5}
speed={0.2}
/>
// Full retro CRT experience
<DarkVeilBackground
scanlineIntensity={0.4}
scanlineFrequency={6.0}
noiseIntensity={0.2}
hueShift={90}
/>Neural network details
CPPN Architecture: The component uses a Compositional Pattern Producing Network with 8 processing layers and multiple matrix transformations. Each layer applies weighted connections and sigmoid activation functions to generate complex, organic patterns from simple coordinate inputs.
Real-time Processing: All neural calculations happen in GPU shaders, allowing for real-time pattern evolution. The network takes spatial coordinates and time as inputs, producing RGB color outputs that create seamless, infinite textures.
Mathematical Foundation: The pattern generation uses advanced linear algebra with 4x4 transformation matrices, distance functions, and trigonometric operations to create patterns that exhibit both structure and organic randomness.
Performance considerations
Resolution Scaling: Use resolutionScale={0.5} on mobile devices or lower-end hardware. This reduces GPU load significantly while maintaining visual quality for most use cases.
Neural Complexity: The CPPN network is computationally intensive. Consider reducing speed or using fewer effect layers on devices with limited GPU capabilities.
Scanline Optimization: High scanlineFrequency values can impact performance on some devices. Test different values to find the optimal balance between visual fidelity and frame rate.
Memory Management: The component automatically handles WebGL context cleanup to prevent memory leaks during component mounting/unmounting in SPAs.
Common gotchas
Container Sizing: The canvas adapts to its parent container dimensions. Ensure the parent has explicit width/height or the background may not render visibly.
Color Space Transformations: Hue shifting uses YIQ color space for perceptually uniform transitions. Extreme hueShift values (>180) may produce unexpected colors due to color space limitations.
Scanline Timing: Scanlines are calculated per pixel in real-time. Very high scanlineFrequency values (>10) may cause visual artifacts on some displays with specific pixel densities.
Animation Continuity: The neural network generates deterministic patterns based on time input. Pausing and resuming animation will maintain pattern continuity, but rapid prop changes might cause brief visual discontinuities.
Browser Compatibility: Requires WebGL support. Very old browsers may not render the effect, though the component gracefully handles WebGL initialization failures.
You might also like
Prism Background
3D crystalline structures with prismatic lighting effects
Hexagon Background
Geometric honeycomb patterns with depth effects
Aurora Background
Northern lights effect with flowing gradient animations
Noise Background
Procedural noise patterns with customizable parameters
Questions developers actually ask
React Background Circles
React animated circles background with orbital rotation. Mandala-inspired patterns with 8 color themes, TypeScript, and shadcn/ui design.
React Dither Background
React dithered background with Three.js rendering. Features wave patterns, Bayer matrix dithering, and retro pixelated aesthetics.