Backgrounds
Pure CSS patterns and mathematical textures for the architectural foundation of the web.
1. Arcade Grid (Ink & Acid)
A living grid with arcade characters that pop up randomly, using a collision system to avoid covering important elements.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| gridColor | string | — | Color of the background grid lines. Default: '#ffffff0a'. |
| ghostColors | string[] | — | Array of colors for the spawning characters. Default: ['#ccff00', '#ff6b6b', '#0057ff', '#ffffff']. |
| spawnInterval | number | — | Time in ms between each character spawn. Default: 2000. |
| maxGhosts | number | — | Maximum number of characters on screen at once. Default: 8. |
| backgroundColor | string | — | Background color of the grid. Default: 'black'. |
2. Dot Matrix (Pop Art)
Polka dot pattern created with a radial gradient. Ideal for dark comic or industrial style backgrounds.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| dotColor | string | — | Color of the dots. Default: '#ffffff15'. |
| backgroundColor | string | — | Background color. Default: 'black'. |
| spacing | number | — | Distance between dots in pixels. Default: 24. |
| dotSize | number | — | Size of the dots in pixels. Default: 1. |
3. TV Noise / Organic Texture (Noise)
Tactile noise texture mathematically generated by an inline SVG. It gives an incredible analog physical touch and adds texture to flat backgrounds.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| noiseOpacity | number | — | Opacity of the mathematical SVG noise. Default: 0.06. |
| backgroundColor | string | — | Background color behind the noise. Default: '#111'. |
| baseFrequency | number | — | Frequency of the fractal noise. Default: 0.85. |
4. Ambient Glow (Static)
Modern minimalist approach with a huge blurred gradient.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| glowColorClass | string | — | Tailwind color classes for the glow. Default: 'bg-[#ccff00]/10 modern:bg-[#E26A4E]/10'. |
| blurSize | number | — | Amount of blur in pixels. Default: 120. |
5. Fluid Aurora (Canvas + Simplex Noise)
2D fluid simulation math engine. Uses Canvas and Simplex Noise to generate vertical animated plasma curtains at 60fps.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | number | — | Speed of the Aurora animation. Default: 0.0015. |
| primaryColorRGB | string | — | RGB string for primary wave colors. Default: '204, 255, 0'. |
| secondaryColorRGBA | string | — | RGBA string for the top overlapping wave. Default: 'rgba(0, 255, 200, 0.5)'. |
Cinematic Starfield (Modern Only)
A highly optimized HTML5 Canvas starfield with procedural generation and mouse tracking parallax. Perfect for dark immersive backgrounds.
Explore the Universe
This starfield runs purely on Canvas 2D, offering 60fps performance without heavy WebGL libraries.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Optional Tailwind classes to style the container. |