reflex-reactbits 0.1.1__py3-none-any.whl

reflex_reactbits/backgrounds.py

@@ -0,0 +1,3503 @@
+"""React Bits - Animated backgrounds.
+
+AUTO-GENERATED by scripts/generate_wrappers.py - do not edit by hand.
+"""
+
+# ruff: noqa: E501
+from __future__ import annotations
+
+from typing import Any, Literal
+
+import reflex as rx
+from reflex_base.components.component import field
+import json
+
+from reflex.utils.imports import ImportVar
+from reflex.vars.base import VarData
+
+from .source import ASSETS_SUBDIR, ensure_component_source
+
+from .base import ReactBitsComponent, safe
+
+__all__ = ['AcidSquares', 'AeroShards', 'Aurora', 'Balatro', 'Ballpit', 'Beams', 'CRTWarp', 'ColorBends', 'DarkVeil', 'Dither', 'DotField', 'DotGrid', 'EvilEye', 'FaultyTerminal', 'Ferrofluid', 'FloatingLines', 'Galaxy', 'GhostFibers', 'GradientBlinds', 'GradientWaves', 'Grainient', 'GridDistortion', 'GridMotion', 'GridScan', 'Hyperspeed', 'Iridescence', 'LetterGlitch', 'LightPillar', 'LightRays', 'LightTunnel', 'Lightfall', 'Lightning', 'LineWaves', 'LiquidChrome', 'LiquidEther', 'MoltenMetal', 'Orb', 'Particles', 'PixelBlast', 'PixelSnow', 'Plasma', 'PlasmaWave', 'Prism', 'PrismaticBurst', 'Radar', 'RippleGrid', 'Scanner', 'ShapeGrid', 'ShapeWaves', 'SideRays', 'Silk', 'SlicedWaves', 'SoftAurora', 'Threads', 'Topography', 'Waves', 'WebThreads', 'acid_squares', 'aero_shards', 'aurora', 'balatro', 'ballpit', 'beams', 'color_bends', 'crt_warp', 'dark_veil', 'dither', 'dot_field', 'dot_grid', 'evil_eye', 'faulty_terminal', 'ferrofluid', 'floating_lines', 'galaxy', 'ghost_fibers', 'gradient_blinds', 'gradient_waves', 'grainient', 'grid_distortion', 'grid_motion', 'grid_scan', 'hyperspeed', 'iridescence', 'letter_glitch', 'light_pillar', 'light_rays', 'light_tunnel', 'lightfall', 'lightning', 'line_waves', 'liquid_chrome', 'liquid_ether', 'molten_metal', 'orb', 'particles', 'pixel_blast', 'pixel_snow', 'plasma', 'plasma_wave', 'prism', 'prismatic_burst', 'radar', 'ripple_grid', 'scanner', 'shape_grid', 'shape_waves', 'side_rays', 'silk', 'sliced_waves', 'soft_aurora', 'threads', 'topography', 'waves', 'web_threads']
+
+
+class AcidSquares(ReactBitsComponent):
+    """A crystalline corridor of stacked squares receding into depth.
+
+    Docs: https://reactbits.dev/backgrounds/acid-squares
+    """
+
+    tag = "AcidSquares"
+    alias = "ReactBitsAcidSquares"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "AcidSquares"
+    _rb_files = ('AcidSquares.css', 'AcidSquares.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color1: rx.Var[str] = field(
+        doc="Violet core color used for the dim depths of the corridor. Default: '#5227FF'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Pink mid-tone color used for the glowing crystal faces. Default: '#A855F7'."
+    )
+    color3: rx.Var[str] = field(
+        doc="White highlight color used for the hottest edges. Default: '#FFFFFF'."
+    )
+    detail: rx.Var[Literal["low", "medium", "high"]] = field(
+        doc="Raymarch quality tier (20 / 32 / 48 steps). Higher looks richer but costs more. Default: 'medium'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Speed of the forward drift through the lattice. Default: 0.7."
+    )
+    wave_depth: rx.Var[int | float] = field(
+        doc="How far the view gently drifts in and back out as the corridor breathes. 0 holds it still. Default: 1."
+    )
+    zoom: rx.Var[int | float] = field(
+        doc="Field of view into the corridor. Higher zooms in. Default: 1.3."
+    )
+    density: rx.Var[int | float] = field(
+        doc="How tightly the boxes of the lattice are packed. Default: 10.0."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Gain applied to the accumulated light along each ray. Default: 1.0."
+    )
+    exposure: rx.Var[int | float] = field(
+        doc="Tone-mapping exposure. Higher values darken the render. Default: 2700."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="Controls how the ray step grows each iteration; strongly shapes the look. Default: 0.3."
+    )
+    step_size: rx.Var[int | float] = field(
+        doc="Minimum ray step. Larger values thin out the glow. Default: 0.002."
+    )
+    color_shift: rx.Var[int | float] = field(
+        doc="Rate of the gentle brightness shimmer cycling over time. Default: 0."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="Contrast applied around the mid-tones of the final image. Default: 1."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier before tone mapping. Default: 1.0."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect over the transparent background. Default: 1.0."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enables a soft depression that sinks the lattice downward around the pointer. Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="How deeply the cursor presses the lattice down inside the affected area. Default: 0.1."
+    )
+    mouse_radius: rx.Var[int | float] = field(
+        doc="Size of the area around the pointer that collapses, as a fraction of the view height. Default: 0.35."
+    )
+    blur: rx.Var[int | float] = field(
+        doc="Softens the whole effect with a post-process Gaussian blur. 0 is crisp; 1 is a soft haze. Default: 0."
+    )
+    grain: rx.Var[bool] = field(
+        doc="Adds a faint animated film grain over the final image for a subtle analog texture. Default: true."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Amplitude of the grain overlay. 0 disables it entirely. Default: 0.05."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class AeroShards(ReactBitsComponent):
+    """A GPU-driven wind sculpture of folded foil shards with crisp detail, content-safe placements, and responsive pointer interactions.
+
+    Docs: https://reactbits.dev/backgrounds/aero-shards
+    """
+
+    tag = "AeroShards"
+    alias = "ReactBitsAeroShards"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "AeroShards"
+    _rb_files = ('AeroShards.css', 'AeroShards.jsx')
+    lib_dependencies: list[str] = ['vgpu@0.3.1']
+
+    background_color: rx.Var[str] = field(
+        doc="Background behind the wind sculpture. Lighting and bloom adapt automatically to light surfaces. Default: '#120F17'."
+    )
+    shard_color: rx.Var[str] = field(
+        doc="Primary body color for the shards. Default: '#896ABD'."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="Accent color used to derive reflections, depth, and highlights. Default: '#A855F7'."
+    )
+    placement: rx.Var[Literal["right", "left", "center", "full"]] = field(
+        doc="Places the sculpture while preserving a content-safe region. Default: 'full'."
+    )
+    flow: rx.Var[Literal["stream", "vortex", "ribbon"]] = field(
+        doc="Morphs the same shards between a flowing stream, circulating vortex, and twisted ribbon without restarting the animation. Default: 'stream'."
+    )
+    material: rx.Var[Literal["pearl", "chrome", "satin"]] = field(
+        doc="Applies a complete lighting and surface finish. Default: 'pearl'."
+    )
+    detail: rx.Var[Literal["bold", "balanced", "fine"]] = field(
+        doc="Balances shard count and size into a finished visual texture. Default: 'balanced'."
+    )
+    effect: rx.Var[Literal["none", "dither", "ascii"]] = field(
+        doc="Applies ordered color dithering or compact, shape-matched ASCII before postprocessing. Stylized modes use fewer, larger shards for readability; none preserves the original render. Default: 'none'."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zooms the complete shard field without changing its shard count or individual shard size. Default: 1."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="Controls how tightly the shards gather around the flow path. Default: 1."
+    )
+    depth: rx.Var[int | float] = field(
+        doc="Controls front-to-back volume and perspective variation. Default: 1."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Controls the shared travel speed of every shard. Default: 1."
+    )
+    spin: rx.Var[int | float] = field(
+        doc="Controls how quickly shards roll around their direction of travel. Default: 1."
+    )
+    interaction: rx.Var[Literal["none", "repel", "attract"]] = field(
+        doc="Disables interaction or enables damped cursor repulsion/attraction and click ripples across the field. Default: 'repel'."
+    )
+    density: rx.Var[int | float] = field(
+        doc="Fine-tuning multiplier for the shard count selected by detail. Default: 1.5."
+    )
+    shard_size: rx.Var[int | float] = field(
+        doc="Fine-tuning multiplier for the shard size selected by detail. Default: 1.1."
+    )
+    stretch: rx.Var[int | float] = field(
+        doc="Controls shard length without changing their overall count. Default: 1."
+    )
+    turbulence: rx.Var[int | float] = field(
+        doc="Fine-tuning multiplier for the turbulence produced by motion. Default: 1."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Fine-tuning multiplier for emissive edges and reflected highlights. Default: 1."
+    )
+    edge_softness: rx.Var[int | float] = field(
+        doc="Controls analytic antialiasing without blurring the whole image. Default: 2."
+    )
+    bloom: rx.Var[int | float] = field(
+        doc="Adds a soft halo without blurring the shards; on light backgrounds the halo uses the shard and accent colors. Default: 0.5."
+    )
+    grain: rx.Var[int | float] = field(
+        doc="Adds screen-space film grain; set to 0 for a completely clean render. Default: 0.05."
+    )
+    chromatic_aberration: rx.Var[int | float] = field(
+        doc="Adds RGB edge separation; set to 0 for a color-neutral finish. Dither and ASCII use subtler separation to preserve their fine patterns. Default: 0.0075."
+    )
+    transition_duration: rx.Var[int | float] = field(
+        doc="Controls the transition time for placement and flow formation changes. Default: 1."
+    )
+    interaction_radius: rx.Var[int | float] = field(
+        doc="Scales the soft, flow-aligned reach of the cursor interaction. Default: 1.5."
+    )
+    interaction_strength: rx.Var[int | float] = field(
+        doc="Fine-tuning multiplier for the selected interaction force. Default: 0.5."
+    )
+    ripple_intensity: rx.Var[int | float] = field(
+        doc="Strength of the click/release wave and its accent-colored illumination. Set to 0 to disable ripples. Default: 1."
+    )
+    hold_to_gather: rx.Var[bool] = field(
+        doc="Press and hold to gather a softly circulating cloud around the cursor; release to unfurl. Respects interaction=\"none\", pause, and reduced motion. Default: true."
+    )
+    paused: rx.Var[bool] = field(
+        doc="Freezes the shard field. Default: false."
+    )
+    on_error: rx.EventHandler[lambda error: [safe(error)]] = field(
+        doc="Called when WebGPU setup or rendering fails. Handler receives: error."
+    )
+
+
+class Aurora(ReactBitsComponent):
+    """Flowing aurora gradient background.
+
+    Docs: https://reactbits.dev/backgrounds/aurora
+    """
+
+    tag = "Aurora"
+    alias = "ReactBitsAurora"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Aurora"
+    _rb_files = ('Aurora.css', 'Aurora.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color_stops: rx.Var[list[str]] = field(
+        doc="An array of three hex colors defining the aurora gradient. Default: ['#5227FF', '#7cff67', '#5227FF']."
+    )
+    amplitude: rx.Var[int | float] = field(
+        doc="Controls the height intensity of the aurora effect. Default: 1.0."
+    )
+    blend: rx.Var[int | float] = field(
+        doc="Controls the blending of the aurora effect with the background. Default: 0.5."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Controls the animation speed. Higher values make the aurora move faster. Default: 1.0."
+    )
+
+
+class Balatro(ReactBitsComponent):
+    """The balatro shader, fully customizalbe and interactive.
+
+    Docs: https://reactbits.dev/backgrounds/balatro
+    """
+
+    tag = "Balatro"
+    alias = "ReactBitsBalatro"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Balatro"
+    _rb_files = ('Balatro.css', 'Balatro.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    spin_rotation: rx.Var[int | float] = field(
+        doc="Base rotation amount affecting the shader effect. Default: -2.0."
+    )
+    spin_speed: rx.Var[int | float] = field(
+        doc="Speed of the spin animation. Default: 7.0."
+    )
+    offset: rx.Var[list[int | float]] = field(
+        doc="Offset for the shader effect. Default: [0.0, 0.0]."
+    )
+    color1: rx.Var[str] = field(
+        doc="Primary color in HEX format. Default: '#DE443B'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Secondary color in HEX format. Default: '#006BB4'."
+    )
+    color3: rx.Var[str] = field(
+        doc="Tertiary color in HEX format. Default: '#162325'."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="Contrast value affecting color blending. Default: 3.5."
+    )
+    lighting: rx.Var[int | float] = field(
+        doc="Lighting factor affecting brightness. Default: 0.4."
+    )
+    spin_amount: rx.Var[int | float] = field(
+        doc="Amount of spin influence based on UV length. Default: 0.25."
+    )
+    pixel_filter: rx.Var[int | float] = field(
+        doc="Pixel filter factor determining pixelation. Default: 745.0."
+    )
+    spin_ease: rx.Var[int | float] = field(
+        doc="Ease factor for spin. Default: 1.0."
+    )
+    is_rotate: rx.Var[bool] = field(
+        doc="Determines if the shader rotates continuously. Default: false."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enables or disables mouse interaction for rotation. Default: true."
+    )
+
+
+class Ballpit(ReactBitsComponent):
+    """Physics ball pit simulation with bouncing colorful spheres.
+
+    Docs: https://reactbits.dev/backgrounds/ballpit
+    """
+
+    tag = "Ballpit"
+    alias = "ReactBitsBallpit"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Ballpit"
+    _rb_files = ('Ballpit.jsx',)
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    follow_cursor: rx.Var[bool] = field(
+        doc="Enables or disables the sphere following the cursor. Default: true."
+    )
+    count: rx.Var[int | float] = field(
+        doc="Sets the number of balls in the ballpit. Default: 200."
+    )
+    gravity: rx.Var[int | float] = field(
+        doc="Controls the gravity affecting the balls. Default: 0.5."
+    )
+    friction: rx.Var[int | float] = field(
+        doc="Sets the friction applied to the ball movement. Default: 0.9975."
+    )
+    wall_bounce: rx.Var[int | float] = field(
+        doc="Determines how much balls bounce off walls. Default: 0.95."
+    )
+    colors: rx.Var[list[Any]] = field(
+        doc="Defines the colors of the balls. Default: [0, 0, 0]."
+    )
+    ambient_color: rx.Var[int | float] = field(
+        doc="Sets the ambient light color. Default: 16777215."
+    )
+    ambient_intensity: rx.Var[int | float] = field(
+        doc="Controls the intensity of ambient light. Default: 1."
+    )
+    light_intensity: rx.Var[int | float] = field(
+        doc="Sets the intensity of the main light source. Default: 200."
+    )
+    min_size: rx.Var[int | float] = field(
+        doc="Specifies the minimum size of the balls. Default: 0.5."
+    )
+    max_size: rx.Var[int | float] = field(
+        doc="Specifies the maximum size of the balls. Default: 1."
+    )
+    size0: rx.Var[int | float] = field(
+        doc="Initial size value for the cursor ball. Default: 1."
+    )
+    max_velocity: rx.Var[int | float] = field(
+        doc="Limits the maximum velocity of the balls. Default: 0.15."
+    )
+    max_x: rx.Var[int | float] = field(
+        doc="Defines the maximum X-coordinate boundary. Default: 5."
+    )
+    max_y: rx.Var[int | float] = field(
+        doc="Defines the maximum Y-coordinate boundary. Default: 5."
+    )
+    max_z: rx.Var[int | float] = field(
+        doc="Defines the maximum Z-coordinate boundary. Default: 2."
+    )
+
+
+class Beams(ReactBitsComponent):
+    """Crossing animated ribbons with customizable properties.
+
+    Docs: https://reactbits.dev/backgrounds/beams
+    """
+
+    tag = "Beams"
+    alias = "ReactBitsBeams"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Beams"
+    _rb_files = ('Beams.css', 'Beams.jsx')
+    lib_dependencies: list[str] = ['@react-three/drei@10.7.6', '@react-three/fiber@9.3.0', 'three@0.180.0']
+
+    beam_width: rx.Var[int | float] = field(
+        doc="Width of each beam. Default: 2."
+    )
+    beam_height: rx.Var[int | float] = field(
+        doc="Height of each beam. Default: 15."
+    )
+    beam_number: rx.Var[int | float] = field(
+        doc="Number of beams to display. Default: 12."
+    )
+    light_color: rx.Var[str] = field(
+        doc="Color of the directional light. Default: '#ffffff'."
+    )
+    beam_color: rx.Var[str] = field(
+        doc="Base material color of the beams. Default: '#000000'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Canvas background color. Default: '#000000'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Speed of the animation. Default: 2."
+    )
+    noise_intensity: rx.Var[int | float] = field(
+        doc="Intensity of the noise effect overlay. Default: 1.75."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Scale of the noise pattern. Default: 0.2."
+    )
+    rotation: rx.Var[int | float] = field(
+        doc="Rotation of the entire beams system in degrees. Default: 0."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class CRTWarp(ReactBitsComponent):
+    """Full-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.
+
+    Docs: https://reactbits.dev/backgrounds/crt-warp
+    """
+
+    tag = "CRTWarp"
+    alias = "ReactBitsCRTWarp"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "CRTWarp"
+    _rb_files = ('CRTWarp.css', 'CRTWarp.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    color: rx.Var[str] = field(
+        doc="Main phosphor color. Default: '#c755f7'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Canvas background color. Default: '#05010a'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed. Default: 0.5."
+    )
+    curvature: rx.Var[int | float] = field(
+        doc="Strength of the CRT barrel distortion. Default: 0.25."
+    )
+    scanline_strength: rx.Var[int | float] = field(
+        doc="Visibility of the horizontal scanlines. Default: 0.25."
+    )
+    scanline_frequency: rx.Var[int | float] = field(
+        doc="Number of scanline bands across the canvas. Default: 200."
+    )
+    wave_amplitude: rx.Var[int | float] = field(
+        doc="Amount of fluid displacement. Default: 0.3."
+    )
+    wave_frequency: rx.Var[int | float] = field(
+        doc="Density of the plasma waves. Default: 2.5."
+    )
+    bloom: rx.Var[int | float] = field(
+        doc="Intensity of the soft phosphor glow. Default: 1.5."
+    )
+    bloom_radius: rx.Var[int | float] = field(
+        doc="Spread of the glow sampling. Default: 1."
+    )
+    noise: rx.Var[int | float] = field(
+        doc="Fine analog grain amount. Default: 0.1."
+    )
+    vignette: rx.Var[int | float] = field(
+        doc="Edge darkening strength. Default: 0."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall output brightness. Default: 1.25."
+    )
+    pixelation: rx.Var[int | float] = field(
+        doc="Pixel block size; 1 keeps the image smooth. Default: 1."
+    )
+    rgb_shift: rx.Var[int | float] = field(
+        doc="Horizontal phosphor-channel separation. Default: 0.015."
+    )
+    mouse_react: rx.Var[bool] = field(
+        doc="Lets the pointer bend the signal. Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Strength of the pointer distortion. Default: 0.5."
+    )
+    dpr: rx.Var[int | float] = field(
+        doc="Maximum device pixel ratio used by the renderer. Default: 1."
+    )
+    fps: rx.Var[int | float] = field(
+        doc="Maximum render frame rate. Default: 30."
+    )
+    paused: rx.Var[bool] = field(
+        doc="Freezes the animation when true. Default: false."
+    )
+
+
+class ColorBends(ReactBitsComponent):
+    """Vibrant color bends with smooth flowing animation.
+
+    Docs: https://reactbits.dev/backgrounds/color-bends
+    """
+
+    tag = "ColorBends"
+    alias = "ReactBitsColorBends"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "ColorBends"
+    _rb_files = ('ColorBends.css', 'ColorBends.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    rotation: rx.Var[int | float] = field(
+        doc="Base rotation angle in degrees. Default: 90."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation time scale of the shader. Default: 0.2."
+    )
+    colors: rx.Var[list[str]] = field(
+        doc="Palette of up to 8 hex colors used to blend the bends. Default: []."
+    )
+    transparent: rx.Var[bool] = field(
+        doc="Whether the background is transparent (uses alpha). Default: true."
+    )
+    auto_rotate: rx.Var[int | float] = field(
+        doc="Automatic rotation speed in degrees/sec. Default: 0."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zoom factor of the pattern. Default: 1."
+    )
+    frequency: rx.Var[int | float] = field(
+        doc="Wave frequency used in the pattern. Default: 1."
+    )
+    warp_strength: rx.Var[int | float] = field(
+        doc="Amount of warping/distortion applied to waves. Default: 1."
+    )
+    mouse_influence: rx.Var[int | float] = field(
+        doc="How strongly the waves react to pointer movement. Default: 1."
+    )
+    parallax: rx.Var[int | float] = field(
+        doc="Parallax factor shifting content with pointer. Default: 0.5."
+    )
+    noise: rx.Var[int | float] = field(
+        doc="Adds subtle grain. 0 disables noise. Default: 0.15."
+    )
+    iterations: rx.Var[int | float] = field(
+        doc="Number of extra warp passes (1-5). Higher values create more complex patterns. Default: 1."
+    )
+    intensity: rx.Var[int | float] = field(
+        doc="Brightness multiplier for the final color output. Default: 1.5."
+    )
+    band_width: rx.Var[int | float] = field(
+        doc="Controls the width/falloff of each color band. Default: 6."
+    )
+
+
+class DarkVeil(ReactBitsComponent):
+    """Subtle dark background with a smooth animation and postprocessing.
+
+    Docs: https://reactbits.dev/backgrounds/dark-veil
+    """
+
+    tag = "DarkVeil"
+    alias = "ReactBitsDarkVeil"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "DarkVeil"
+    _rb_files = ('DarkVeil.css', 'DarkVeil.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    hue_shift: rx.Var[int | float] = field(
+        doc="Shifts the hue of the entire animation. Default: 0."
+    )
+    noise_intensity: rx.Var[int | float] = field(
+        doc="Intensity of the noise/grain effect. Default: 0."
+    )
+    scanline_intensity: rx.Var[int | float] = field(
+        doc="Intensity of the scanline effect. Default: 0."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Speed of the animation. Default: 0.5."
+    )
+    scanline_frequency: rx.Var[int | float] = field(
+        doc="Frequency of the scanlines. Default: 0."
+    )
+    warp_amount: rx.Var[int | float] = field(
+        doc="Amount of warp distortion applied to the effect. Default: 0."
+    )
+    resolution_scale: rx.Var[int | float] = field(
+        doc="Scale factor for the resolution. Default: 1."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Dither(ReactBitsComponent):
+    """Retro dithered noise shader background.
+
+    Docs: https://reactbits.dev/backgrounds/dither
+    """
+
+    tag = "Dither"
+    alias = "ReactBitsDither"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Dither"
+    _rb_files = ('Dither.css', 'Dither.jsx')
+    lib_dependencies: list[str] = ['@react-three/fiber@9.3.0', '@react-three/postprocessing@3.0.4', 'postprocessing@6.37.8', 'three@0.180.0']
+
+    wave_speed: rx.Var[int | float] = field(
+        doc="Speed of the wave animation. Default: 0.05."
+    )
+    wave_frequency: rx.Var[int | float] = field(
+        doc="Frequency of the wave pattern. Default: 3."
+    )
+    wave_amplitude: rx.Var[int | float] = field(
+        doc="Amplitude of the wave pattern. Default: 0.3."
+    )
+    wave_color: rx.Var[list[int | float]] = field(
+        doc="Color of the wave, defined as an RGB array. Default: [0.5, 0.5, 0.5]."
+    )
+    background_color: rx.Var[list[int | float]] = field(
+        doc="Base canvas color behind the dithered waves. Default: [0, 0, 0]."
+    )
+    color_num: rx.Var[int | float] = field(
+        doc="Number of colors to use in the dithering effect. Default: 4."
+    )
+    pixel_size: rx.Var[int | float] = field(
+        doc="Size of the pixels for the dithering effect. Default: 2."
+    )
+    disable_animation: rx.Var[bool] = field(
+        doc="Disable the wave animation when true. Default: false."
+    )
+    enable_mouse_interaction: rx.Var[bool] = field(
+        doc="Enables mouse interaction to influence the wave effect. Default: true."
+    )
+    mouse_radius: rx.Var[int | float] = field(
+        doc="Radius for the mouse interaction effect. Default: 1."
+    )
+
+
+class DotField(ReactBitsComponent):
+    """Interactive dot grid with cursor bulge, glow, sparkle, and wave effects.
+
+    Docs: https://reactbits.dev/backgrounds/dot-field
+    """
+
+    tag = "DotField"
+    alias = "ReactBitsDotField"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "DotField"
+    _rb_files = ('DotField.css', 'DotField.jsx')
+
+    dot_radius: rx.Var[int | float] = field(
+        doc="Radius of each individual dot in the grid. Default: 1.5."
+    )
+    dot_spacing: rx.Var[int | float] = field(
+        doc="Spacing between dots in the grid. Default: 14."
+    )
+    cursor_radius: rx.Var[int | float] = field(
+        doc="Radius of the cursor interaction area. Default: 500."
+    )
+    cursor_force: rx.Var[int | float] = field(
+        doc="Force applied to dots when not in bulge mode. Default: 0.1."
+    )
+    bulge_only: rx.Var[bool] = field(
+        doc="When true, dots bulge away from cursor. When false, dots are pushed with physics. Default: true."
+    )
+    bulge_strength: rx.Var[int | float] = field(
+        doc="Strength of the bulge effect around the cursor. Default: 67."
+    )
+    glow_radius: rx.Var[int | float] = field(
+        doc="Radius of the SVG glow effect that follows the cursor. Default: 160."
+    )
+    sparkle: rx.Var[bool] = field(
+        doc="When enabled, ~3% of dots randomly sparkle at a larger size. Default: false."
+    )
+    wave_amplitude: rx.Var[int | float] = field(
+        doc="Amplitude of the wave displacement animation applied to dots. Default: 0."
+    )
+    gradient_from: rx.Var[str] = field(
+        doc="Start color of the diagonal gradient applied to dots. Default: 'rgba(168, 85, 247, 0.35)'."
+    )
+    gradient_to: rx.Var[str] = field(
+        doc="End color of the diagonal gradient applied to dots. Default: 'rgba(180, 151, 207, 0.25)'."
+    )
+    glow_color: rx.Var[str] = field(
+        doc="Color of the radial glow effect that follows the cursor. Default: '#120F17'."
+    )
+
+
+class DotGrid(ReactBitsComponent):
+    """Animated dot grid with cursor interactions.
+
+    Docs: https://reactbits.dev/backgrounds/dot-grid
+    """
+
+    tag = "DotGrid"
+    alias = "ReactBitsDotGrid"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "DotGrid"
+    _rb_files = ('DotGrid.css', 'DotGrid.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    dot_size: rx.Var[int | float] = field(
+        doc="Size of each dot in pixels. Default: 16."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Gap between each dot in pixels. Default: 32."
+    )
+    base_color: rx.Var[str] = field(
+        doc="Base color of the dots. Default: '#5227FF'."
+    )
+    active_color: rx.Var[str] = field(
+        doc="Color of dots when hovered or activated. Default: '#5227FF'."
+    )
+    proximity: rx.Var[int | float] = field(
+        doc="Radius around the mouse pointer within which dots react. Default: 150."
+    )
+    speed_trigger: rx.Var[int | float] = field(
+        doc="Mouse speed threshold to trigger inertia effect. Default: 100."
+    )
+    shock_radius: rx.Var[int | float] = field(
+        doc="Radius of the shockwave effect on click. Default: 250."
+    )
+    shock_strength: rx.Var[int | float] = field(
+        doc="Strength of the shockwave effect on click. Default: 5."
+    )
+    max_speed: rx.Var[int | float] = field(
+        doc="Maximum speed for inertia calculation. Default: 5000."
+    )
+    resistance: rx.Var[int | float] = field(
+        doc="Resistance for the inertia effect. Default: 750."
+    )
+    return_duration: rx.Var[int | float] = field(
+        doc="Duration for dots to return to their original position after inertia. Default: 1.5."
+    )
+
+
+class EvilEye(ReactBitsComponent):
+    """Procedural evil eye shader with animated iris, slit pupil, and fiery outer glow.
+
+    Docs: https://reactbits.dev/backgrounds/evil-eye
+    """
+
+    tag = "EvilEye"
+    alias = "ReactBitsEvilEye"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "EvilEye"
+    _rb_files = ('EvilEye.css', 'EvilEye.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    eye_color: rx.Var[str] = field(
+        doc="Primary eye color in HEX format. Default: '#FF6F37'."
+    )
+    intensity: rx.Var[int | float] = field(
+        doc="Brightness / HDR intensity of the eye color. Default: 1.5."
+    )
+    pupil_size: rx.Var[int | float] = field(
+        doc="Size and darkness of the pupil slit. Default: 0.6."
+    )
+    iris_width: rx.Var[int | float] = field(
+        doc="Width of the main iris ring. Default: 0.25."
+    )
+    glow_intensity: rx.Var[int | float] = field(
+        doc="Strength of the outer eye glow. Default: 0.35."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zoom level of the eye. Values > 1 zoom in, < 1 zoom out. Default: 0.8."
+    )
+    noise_scale: rx.Var[int | float] = field(
+        doc="Scale of the fire/noise texture sampling. Default: 1.0."
+    )
+    pupil_follow: rx.Var[int | float] = field(
+        doc="Intensity of pupil cursor tracking. 0 disables it. Default: 1.0."
+    )
+    flame_speed: rx.Var[int | float] = field(
+        doc="Independent flame flicker animation speed. Default: 1.0."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Background color in HEX format. Default: '#000000'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class FaultyTerminal(ReactBitsComponent):
+    """Terminal CRT scanline squares effect with flicker + noise.
+
+    Docs: https://reactbits.dev/backgrounds/faulty-terminal
+    """
+
+    tag = "FaultyTerminal"
+    alias = "ReactBitsFaultyTerminal"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "FaultyTerminal"
+    _rb_files = ('FaultyTerminal.css', 'FaultyTerminal.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    scale: rx.Var[int | float] = field(
+        doc="Controls the zoom/scale of the pattern. Default: 1."
+    )
+    grid_mul: rx.Var[list[Any]] = field(
+        doc="Grid multiplier for glyph density [x, y]. Default: [2, 1]."
+    )
+    digit_size: rx.Var[int | float] = field(
+        doc="Size of individual glyphs. Default: 1.5."
+    )
+    time_scale: rx.Var[int | float] = field(
+        doc="Animation speed multiplier. Default: 0.3."
+    )
+    pause: rx.Var[bool] = field(
+        doc="Pause/resume animation. Default: false."
+    )
+    scanline_intensity: rx.Var[int | float] = field(
+        doc="Strength of scanline effects. Default: 0.3."
+    )
+    glitch_amount: rx.Var[int | float] = field(
+        doc="Glitch displacement intensity. Default: 1."
+    )
+    flicker_amount: rx.Var[int | float] = field(
+        doc="Flicker effect strength. Default: 1."
+    )
+    noise_amp: rx.Var[int | float] = field(
+        doc="Noise pattern amplitude. Default: 1."
+    )
+    chromatic_aberration: rx.Var[int | float] = field(
+        doc="RGB channel separation in pixels. Default: 0."
+    )
+    dither: rx.Var[int | float | bool] = field(
+        doc="Dithering effect intensity. Default: 0."
+    )
+    curvature: rx.Var[int | float] = field(
+        doc="Barrel distortion amount. Default: 0.2."
+    )
+    tint: rx.Var[str] = field(
+        doc="Color tint (hex). Default: '#ffffff'."
+    )
+    mouse_react: rx.Var[bool] = field(
+        doc="Enable/disable mouse interaction. Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Mouse interaction intensity. Default: 0.2."
+    )
+    dpr: rx.Var[Any] = field(
+        doc="The `dpr` prop. Default: Math.min(window.devicePixelRatio || 1, 2)."
+    )
+    page_load_animation: rx.Var[bool] = field(
+        doc="Enable fade-in animation on load. Default: true."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall opacity/brightness control. Default: 1."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Ferrofluid(ReactBitsComponent):
+    """A churning magnetic fluid traced by glowing contour lines, with a cursor magnet.
+
+    Docs: https://reactbits.dev/backgrounds/ferrofluid
+    """
+
+    tag = "Ferrofluid"
+    alias = "ReactBitsFerrofluid"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Ferrofluid"
+    _rb_files = ('Ferrofluid.css', 'Ferrofluid.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    dpr: rx.Var[int | float] = field(
+        doc="Overrides device pixel ratio; lower for performance, higher for sharpness. Default: window.devicePixelRatio."
+    )
+    paused: rx.Var[bool] = field(
+        doc="If true, stops rendering updates (freezing the current frame). Default: false."
+    )
+    colors: rx.Var[list[str]] = field(
+        doc="Array of hex colors (up to 8) used to tint the fluid rim. Colors are spread across the surface by height; a single color makes the whole effect uniform. Default: ['#ffffff', '#ffffff', '#ffffff']."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Multiplier for how fast the fluid churns and flows. Default: 0.5."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Overall feature size. Higher values zoom in for larger, fewer blobs. Default: 1.6."
+    )
+    turbulence: rx.Var[int | float] = field(
+        doc="Amount of domain distortion. Higher values create more chaotic, swirling motion. Default: 1."
+    )
+    fluidity: rx.Var[int | float] = field(
+        doc="Smoothness of the merge between the two fluid layers. Higher = softer, more liquid blending. Default: 0.1."
+    )
+    rim_width: rx.Var[int | float] = field(
+        doc="Thickness of the glowing contour lines tracing the fluid surface. Default: 0.2."
+    )
+    sharpness: rx.Var[int | float] = field(
+        doc="Contrast of the rim highlights. Higher values give crisper, thinner edges. Default: 2.5."
+    )
+    shimmer: rx.Var[int | float] = field(
+        doc="Amount of fine grainy break-up applied to the rim. 0 = smooth lines. Default: 1.5."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier of the rim highlights. Default: 2."
+    )
+    flow_direction: rx.Var[Literal["up", "down", "left", "right"]] = field(
+        doc="Primary direction the fluid surface drifts. Default: 'down'."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall alpha of the rendered canvas. Default: 1."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enables a magnetic spike that rises and glows under the cursor. Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Intensity of the magnetic cursor spike. Default: 1."
+    )
+    mouse_radius: rx.Var[int | float] = field(
+        doc="Falloff radius of the magnetic cursor spike. Default: 0.35."
+    )
+    mouse_dampening: rx.Var[int | float] = field(
+        doc="Easing time constant (seconds) for the cursor to follow the pointer. 0 = immediate. Default: 0.15."
+    )
+    mix_blend_mode: rx.Var[str] = field(
+        doc="CSS mix-blend-mode applied to the canvas (e.g. 'screen', 'lighten')."
+    )
+
+
+class FloatingLines(ReactBitsComponent):
+    """3D floating lines that react to cursor movement.
+
+    Docs: https://reactbits.dev/backgrounds/floating-lines
+    """
+
+    tag = "FloatingLines"
+    alias = "ReactBitsFloatingLines"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "FloatingLines"
+    _rb_files = ('FloatingLines.css', 'FloatingLines.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    lines_gradient: rx.Var[list[str]] = field(
+        doc="Array of hex color strings for gradient coloring of lines (max 8 colors)."
+    )
+    enabled_waves: rx.Var[list[Any]] = field(
+        doc="Which wave layers to display. Can toggle individual waves on/off. Default: ['top', 'middle', 'bottom']."
+    )
+    line_count: rx.Var[int | float | list[int | float]] = field(
+        doc="Number of lines per wave. Single number applies to all waves, or array for per-wave control. Default: [6]."
+    )
+    line_distance: rx.Var[int | float | list[int | float]] = field(
+        doc="Spacing between lines. Single number applies to all waves, or array for per-wave control. Default: [5]."
+    )
+    top_wave_position: rx.Var[dict[str, Any]] = field(
+        doc="Position and rotation settings for the top wave layer."
+    )
+    middle_wave_position: rx.Var[dict[str, Any]] = field(
+        doc="Position and rotation settings for the middle wave layer."
+    )
+    bottom_wave_position: rx.Var[dict[str, Any]] = field(
+        doc="Position and rotation settings for the bottom wave layer. Default: { x: 2.0, y: -0.7, rotate: -1 }."
+    )
+    animation_speed: rx.Var[int | float] = field(
+        doc="Speed multiplier for the wave animation. Default: 1."
+    )
+    interactive: rx.Var[bool] = field(
+        doc="Whether the lines react to mouse/pointer movement. Default: true."
+    )
+    bend_radius: rx.Var[int | float] = field(
+        doc="Radius of the area affected by mouse interaction. Default: 5.0."
+    )
+    bend_strength: rx.Var[int | float] = field(
+        doc="Intensity of the bend effect when interacting with mouse. Default: -0.5."
+    )
+    mouse_damping: rx.Var[int | float] = field(
+        doc="Smoothing factor for mouse movement tracking (0-1). Default: 0.05."
+    )
+    parallax: rx.Var[bool] = field(
+        doc="Enable parallax effect with mouse movement. Default: true."
+    )
+    parallax_strength: rx.Var[int | float] = field(
+        doc="Strength of the parallax effect. Default: 0.2."
+    )
+    mix_blend_mode: rx.Var[str] = field(
+        doc="CSS mix-blend-mode applied to the canvas element. Default: 'screen'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="The `backgroundColor` prop. Default: '#000000'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Galaxy(ReactBitsComponent):
+    """Parallax realistic starfield with pointer interactions.
+
+    Docs: https://reactbits.dev/backgrounds/galaxy
+    """
+
+    tag = "Galaxy"
+    alias = "ReactBitsGalaxy"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Galaxy"
+    _rb_files = ('Galaxy.css', 'Galaxy.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    focal: rx.Var[list[int | float]] = field(
+        doc="Sets the focal point of the galaxy effect as [x, y] coordinates from 0 to 1. Default: [0.5, 0.5]."
+    )
+    rotation: rx.Var[list[int | float]] = field(
+        doc="Controls the rotation matrix of the galaxy as [x, y] rotation values. Default: [1.0, 0.0]."
+    )
+    star_speed: rx.Var[int | float] = field(
+        doc="Controls the speed of star movement and animation. Default: 0.5."
+    )
+    density: rx.Var[int | float] = field(
+        doc="Controls the density of stars in the galaxy. Default: 1."
+    )
+    hue_shift: rx.Var[int | float] = field(
+        doc="Shifts the hue of all stars by the specified degrees (0-360). Default: 140."
+    )
+    disable_animation: rx.Var[bool] = field(
+        doc="When true, stops all time-based animations. Default: false."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Global speed multiplier for all animations. Default: 1.0."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enables or disables mouse interaction with the galaxy. Default: true."
+    )
+    glow_intensity: rx.Var[int | float] = field(
+        doc="Controls the intensity of the star glow effect. Default: 0.3."
+    )
+    saturation: rx.Var[int | float] = field(
+        doc="Controls color saturation of stars (0 = grayscale, 1 = full color). Default: 0.0."
+    )
+    mouse_repulsion: rx.Var[bool] = field(
+        doc="When true, stars are repelled by the mouse cursor. Default: true."
+    )
+    repulsion_strength: rx.Var[int | float] = field(
+        doc="Strength of mouse repulsion effect when mouseRepulsion is enabled. Default: 2."
+    )
+    twinkle_intensity: rx.Var[int | float] = field(
+        doc="Controls how much stars twinkle (0 = no twinkle, 1 = maximum twinkle). Default: 0.3."
+    )
+    rotation_speed: rx.Var[int | float] = field(
+        doc="Speed of automatic galaxy rotation. Default: 0.1."
+    )
+    auto_center_repulsion: rx.Var[int | float] = field(
+        doc="Creates repulsion from center of canvas. Overrides mouse repulsion when > 0. Default: 0."
+    )
+    transparent: rx.Var[bool] = field(
+        doc="Makes the black background transparent, showing only stars. Default: true."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class GhostFibers(ReactBitsComponent):
+    """A deep-blue recursive fiber field with luminous bands, radial twisting and soft atmospheric glow.
+
+    Docs: https://reactbits.dev/backgrounds/ghost-fibers
+    """
+
+    tag = "GhostFibers"
+    alias = "ReactBitsGhostFibers"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "GhostFibers"
+    _rb_files = ('GhostFibers.css', 'GhostFibers.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    line_color: rx.Var[str] = field(
+        doc="Color of the thin fiber cores. Default: '#140E35'."
+    )
+    glow_color: rx.Var[str] = field(
+        doc="Color of the broad luminous bands. Default: '#3437A0'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Master animation speed. Default: 0.2."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zoom level of the field. Default: 2."
+    )
+    rotation: rx.Var[int | float] = field(
+        doc="Static field rotation in degrees. Default: 0."
+    )
+    rotation_speed: rx.Var[int | float] = field(
+        doc="Continuous rotation rate. Default: 0.25."
+    )
+    layers: rx.Var[int | float] = field(
+        doc="Number of cumulative fiber layers, from 1 to 10. Default: 4."
+    )
+    wave_amplitude: rx.Var[int | float] = field(
+        doc="Strength of the recursive wave displacement. Default: 0.015."
+    )
+    wave_frequency: rx.Var[int | float] = field(
+        doc="Frequency of the recursive wave displacement. Default: 3."
+    )
+    wave_speed: rx.Var[int | float] = field(
+        doc="Base speed of the layered waves. Default: 0.15."
+    )
+    layer_speed: rx.Var[int | float] = field(
+        doc="Additional wave speed contributed by each layer. Default: 0.08."
+    )
+    twist: rx.Var[int | float] = field(
+        doc="Angular distortion applied during each iteration. Default: 0.1."
+    )
+    twist_frequency: rx.Var[int | float] = field(
+        doc="Radial frequency of the angular distortion. Default: 5."
+    )
+    twist_speed: rx.Var[int | float] = field(
+        doc="Animation speed of the angular distortion. Default: 1.2."
+    )
+    line_frequency: rx.Var[int | float] = field(
+        doc="Base frequency of the bright fibers. Default: 5."
+    )
+    line_spacing: rx.Var[int | float] = field(
+        doc="Frequency increment applied per layer. Default: 2."
+    )
+    line_sharpness: rx.Var[int | float] = field(
+        doc="Sharpness of the thin fiber cores. Default: 16."
+    )
+    glow_falloff: rx.Var[int | float] = field(
+        doc="Falloff of the broad glowing bands. Default: 10."
+    )
+    glow_intensity: rx.Var[int | float] = field(
+        doc="Brightness multiplier for the broad glow. Default: 1.6."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Exposure used by the final tone mapping. Default: 2."
+    )
+    blue_boost: rx.Var[int | float] = field(
+        doc="Multiplier applied to the final blue channel. Default: 1.25."
+    )
+    vignette: rx.Var[int | float] = field(
+        doc="Strength of the original edge darkening. Default: 0.8."
+    )
+    grain: rx.Var[int | float] = field(
+        doc="Strength of the layered screen-space film grain. Default: 0.05."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="Uses an ink-on-light compositing mode. Default: false."
+    )
+    dpr: rx.Var[int | float] = field(
+        doc="Canvas pixel density, clamped between 0.5 and 2. Default: 1."
+    )
+    fps: rx.Var[int | float] = field(
+        doc="Maximum shader render rate. Default: 60."
+    )
+    paused: rx.Var[bool] = field(
+        doc="Freezes the animation and stops its render loop. Default: false."
+    )
+
+
+class GradientBlinds(ReactBitsComponent):
+    """Layered gradient blinds with spotlight and noise distortion.
+
+    Docs: https://reactbits.dev/backgrounds/gradient-blinds
+    """
+
+    tag = "GradientBlinds"
+    alias = "ReactBitsGradientBlinds"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "GradientBlinds"
+    _rb_files = ('GradientBlinds.css', 'GradientBlinds.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    dpr: rx.Var[int | float] = field(
+        doc="Overrides device pixel ratio; lower for performance, higher for sharpness. Default: window.devicePixelRatio."
+    )
+    paused: rx.Var[bool] = field(
+        doc="If true, stops rendering updates (freezing the current frame). Default: false."
+    )
+    gradient_colors: rx.Var[list[str]] = field(
+        doc="Array of hex colors (up to 8) forming the animated gradient. If one color is provided it is duplicated. Default: ['#FF9FFC', '#5227FF']."
+    )
+    angle: rx.Var[int | float] = field(
+        doc="Rotation of the gradient in degrees (0 = horizontal left\u2192right). Default: 0."
+    )
+    noise: rx.Var[int | float] = field(
+        doc="Strength of per\u2011pixel noise added to the final color (0 = clean). Default: 0.3."
+    )
+    blind_count: rx.Var[int | float] = field(
+        doc="Target number of vertical blinds. Acts as an upper bound when blindMinWidth is set. Default: 16."
+    )
+    blind_min_width: rx.Var[int | float] = field(
+        doc="Minimum pixel width for each blind. Reduces effective blindCount if necessary to satisfy this width. Default: 60."
+    )
+    mouse_dampening: rx.Var[int | float] = field(
+        doc="Easing time constant (seconds) for the spotlight to follow the cursor. 0 = immediate. Default: 0.15."
+    )
+    mirror_gradient: rx.Var[bool] = field(
+        doc="Creates a mirrored ping\u2011pong gradient progression instead of a linear wrap. Default: false."
+    )
+    spotlight_radius: rx.Var[int | float] = field(
+        doc="Normalized spotlight radius relative to the shorter canvas dimension. Default: 0.5."
+    )
+    spotlight_softness: rx.Var[int | float] = field(
+        doc="Falloff exponent for spotlight edge. Higher = sharper edge (values >1 increase contrast). Default: 1."
+    )
+    spotlight_opacity: rx.Var[int | float] = field(
+        doc="Overall intensity multiplier for the spotlight highlight. Default: 1."
+    )
+    distort_amount: rx.Var[int | float] = field(
+        doc="Sin/cos warp intensity applied to UVs for subtle wavy distortion. Default: 0."
+    )
+    shine_direction: rx.Var[Literal["left", "right"]] = field(
+        doc="Flips the bright side of each blind; useful for composition with other elements. Default: 'left'."
+    )
+    mix_blend_mode: rx.Var[str] = field(
+        doc="CSS mix-blend-mode applied to the canvas (e.g. 'screen', 'overlay', 'multiply'). Default: 'lighten'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class GradientWaves(ReactBitsComponent):
+    """Raymarched sine waves rolling toward a soft, hazy horizon.
+
+    Docs: https://reactbits.dev/backgrounds/gradient-waves
+    """
+
+    tag = "GradientWaves"
+    alias = "ReactBitsGradientWaves"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "GradientWaves"
+    _rb_files = ('GradientWaves.css', 'GradientWaves.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    horizon_color: rx.Var[str] = field(
+        doc="Distant haze color the waves fade into. Default: '#5227FF'."
+    )
+    wave_color: rx.Var[str] = field(
+        doc="Mid color of the rolling wave bodies. Default: '#FF9FFC'."
+    )
+    crest_color: rx.Var[str] = field(
+        doc="Highlight color of the nearest wave crests. Default: '#FFFFFF'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed of the undulating wave field. Default: 0.4."
+    )
+    amplitude: rx.Var[int | float] = field(
+        doc="Height of the sine-plasma waves. Default: 2.5."
+    )
+    wave_scale: rx.Var[int | float] = field(
+        doc="Overall spatial frequency of the waves. Default: 0.6."
+    )
+    wave_ratio: rx.Var[int | float] = field(
+        doc="Ratio between the short and long wavelength components. Default: 0.9."
+    )
+    swell: rx.Var[int | float] = field(
+        doc="Large-scale horizontal swell distortion. Default: 35."
+    )
+    turbulence: rx.Var[int | float] = field(
+        doc="Large-scale cross-flow turbulence distortion. Default: 20."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Camera pitch toward the horizon (radians). Default: 1.11."
+    )
+    zoom: rx.Var[int | float] = field(
+        doc="Field-of-view zoom into the wave field. Default: 1.0."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Vertical offset of the horizon line. Default: 5.5."
+    )
+    fog_depth: rx.Var[int | float] = field(
+        doc="Distance over which the waves fade into haze and transparency. Default: 15."
+    )
+    detail: rx.Var[str] = field(
+        doc="Raymarch quality tier: 'low', 'medium', or 'high'. Default: 'medium'."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier for the final color. Default: 1.0."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Global opacity of the effect. Default: 1.0."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enable subtle pointer-driven camera parallax. Default: true."
+    )
+    parallax_strength: rx.Var[int | float] = field(
+        doc="Strength of the cursor parallax drift. Default: 0.5."
+    )
+    grain: rx.Var[bool] = field(
+        doc="Overlay a whisper-subtle animated film grain on the effect. Default: true."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Amplitude of the grain overlay. 0 disables it entirely. Default: 0.05."
+    )
+
+
+class Grainient(ReactBitsComponent):
+    """Grainy gradient swirls with soft wave distortion.
+
+    Docs: https://reactbits.dev/backgrounds/grainient
+    """
+
+    tag = "Grainient"
+    alias = "ReactBitsGrainient"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Grainient"
+    _rb_files = ('Grainient.css', 'Grainient.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    time_speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier for the gradient motion. Default: 0.25."
+    )
+    color_balance: rx.Var[int | float] = field(
+        doc="Shifts the palette balance toward dark or lighter tones. Default: 0.0."
+    )
+    warp_strength: rx.Var[int | float] = field(
+        doc="Strength of the wave warp distortion (0 = none). Default: 1.0."
+    )
+    warp_frequency: rx.Var[int | float] = field(
+        doc="Frequency of the wave warp. Default: 5.0."
+    )
+    warp_speed: rx.Var[int | float] = field(
+        doc="Speed multiplier for the warp animation. Default: 2.0."
+    )
+    warp_amplitude: rx.Var[int | float] = field(
+        doc="Base amplitude for the warp distortion. Default: 50.0."
+    )
+    blend_angle: rx.Var[int | float] = field(
+        doc="Rotation angle for the color blend axis (degrees). Default: 0.0."
+    )
+    blend_softness: rx.Var[int | float] = field(
+        doc="Softens the blend edges between color layers. Default: 0.05."
+    )
+    rotation_amount: rx.Var[int | float] = field(
+        doc="Rotation amount driven by noise. Default: 500.0."
+    )
+    noise_scale: rx.Var[int | float] = field(
+        doc="Scales the noise frequency that drives rotation. Default: 2.0."
+    )
+    grain_amount: rx.Var[int | float] = field(
+        doc="Amount of film grain applied to the gradient. Default: 0.1."
+    )
+    grain_scale: rx.Var[int | float] = field(
+        doc="Scale of the grain pattern. Default: 2.0."
+    )
+    grain_animated: rx.Var[bool] = field(
+        doc="Animate grain over time. Default: false."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="Overall contrast applied to the final color. Default: 1.5."
+    )
+    gamma: rx.Var[int | float] = field(
+        doc="Gamma correction for the final color. Default: 1.0."
+    )
+    saturation: rx.Var[int | float] = field(
+        doc="Saturation amount for the final color. Default: 1.0."
+    )
+    center_x: rx.Var[int | float] = field(
+        doc="Horizontal offset of the gradient center. Default: 0.0."
+    )
+    center_y: rx.Var[int | float] = field(
+        doc="Vertical offset of the gradient center. Default: 0.0."
+    )
+    zoom: rx.Var[int | float] = field(
+        doc="Zoom level for the gradient field. Default: 0.9."
+    )
+    color1: rx.Var[str] = field(
+        doc="Primary light color used in the gradient blend. Default: '#FF9FFC'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Secondary accent color used in the gradient blend. Default: '#5227FF'."
+    )
+    color3: rx.Var[str] = field(
+        doc="Deep base color used in the gradient blend. Default: '#B497CF'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class GridDistortion(ReactBitsComponent):
+    """Warped grid mesh distorts smoothly reacting to cursor.
+
+    Docs: https://reactbits.dev/backgrounds/grid-distortion
+    """
+
+    tag = "GridDistortion"
+    alias = "ReactBitsGridDistortion"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "GridDistortion"
+    _rb_files = ('GridDistortion.css', 'GridDistortion.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    grid: rx.Var[int | float] = field(
+        doc="The number of cells present in the distortion grid. Default: 15."
+    )
+    mouse: rx.Var[int | float] = field(
+        doc="The size of the distortion effect that follows the cursor. Default: 0.1."
+    )
+    strength: rx.Var[int | float] = field(
+        doc="The overall strength of the distortion effect. Default: 0.15."
+    )
+    relaxation: rx.Var[int | float] = field(
+        doc="The speed at which grid cells return to their initial state. Default: 0.9."
+    )
+    image_src: rx.Var[Any] = field(
+        doc="The `imageSrc` prop."
+    )
+
+
+class GridMotion(ReactBitsComponent):
+    """Perspective moving grid lines based on cusror position.
+
+    Docs: https://reactbits.dev/backgrounds/grid-motion
+    """
+
+    tag = "GridMotion"
+    alias = "ReactBitsGridMotion"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "GridMotion"
+    _rb_files = ('GridMotion.css', 'GridMotion.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    items: rx.Var[list[Any]] = field(
+        doc="An array of items to display in the grid. Each item can be a string, JSX element, or an image URL. Default: []."
+    )
+    gradient_color: rx.Var[str] = field(
+        doc="Controls the color of the radial gradient used as the background. Default: 'black'."
+    )
+
+
+class GridScan(ReactBitsComponent):
+    """Animated grid room 3D scan effect and cool interactions.
+
+    Docs: https://reactbits.dev/backgrounds/grid-scan
+    """
+
+    tag = "GridScan"
+    alias = "ReactBitsGridScan"
+    is_default = False
+    _rb_category = "Backgrounds"
+    _rb_name = "GridScan"
+    _rb_files = ('GridScan.css', 'GridScan.jsx')
+    lib_dependencies: list[str] = ['face-api.js@0.22.2', 'postprocessing@6.37.8', 'three@0.180.0']
+
+    enable_webcam: rx.Var[bool] = field(
+        doc="Enable face tracking via webcam. Default: false."
+    )
+    show_preview: rx.Var[bool] = field(
+        doc="Show webcam preview/debug HUD. Default: false."
+    )
+    models_path: rx.Var[str] = field(
+        doc="Path/URL to face-api.js models. Default: 'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.j...."
+    )
+    sensitivity: rx.Var[int | float] = field(
+        doc="Overall responsiveness to input. Default: 0.55."
+    )
+    line_thickness: rx.Var[int | float] = field(
+        doc="Grid line thickness. Default: 1."
+    )
+    lines_color: rx.Var[str] = field(
+        doc="Color of the grid lines. Default: '#2F293A'."
+    )
+    scan_color: rx.Var[str] = field(
+        doc="Color of the scan beam/aura. Default: '#FF9FFC'."
+    )
+    scan_opacity: rx.Var[int | float] = field(
+        doc="Opacity of the scan effect. Default: 0.4."
+    )
+    grid_scale: rx.Var[int | float] = field(
+        doc="Grid spacing scale (smaller = denser). Default: 0.1."
+    )
+    line_style: rx.Var[Literal["solid", "dashed", "dotted"]] = field(
+        doc="Grid line style. Default: 'solid'."
+    )
+    line_jitter: rx.Var[int | float] = field(
+        doc="Animated jitter along the grid lines. Default: 0.1."
+    )
+    scan_direction: rx.Var[Literal["forward", "backward", "pingpong"]] = field(
+        doc="Scan motion. Default: 'pingpong'."
+    )
+    enable_post: rx.Var[bool] = field(
+        doc="Enable post-processing effects. Default: true."
+    )
+    bloom_intensity: rx.Var[int | float] = field(
+        doc="Bloom strength. Default: 0."
+    )
+    bloom_threshold: rx.Var[int | float] = field(
+        doc="Bloom luminance threshold. Default: 0."
+    )
+    bloom_smoothing: rx.Var[int | float] = field(
+        doc="Bloom threshold smoothing. Default: 0."
+    )
+    chromatic_aberration: rx.Var[int | float] = field(
+        doc="Chromatic aberration offset (post). Default: 0.002."
+    )
+    noise_intensity: rx.Var[int | float] = field(
+        doc="Additive film grain intensity. Default: 0.01."
+    )
+    scan_glow: rx.Var[int | float] = field(
+        doc="Relative width/intensity of glow. Default: 0.5."
+    )
+    scan_softness: rx.Var[int | float] = field(
+        doc="Softness of scan band edges. Default: 2."
+    )
+    scan_phase_taper: rx.Var[int | float] = field(
+        doc="Fade-in/out window for the phase. Default: 0.9."
+    )
+    scan_duration: rx.Var[int | float] = field(
+        doc="Duration of a scan cycle (seconds). Default: 2.0."
+    )
+    scan_delay: rx.Var[int | float] = field(
+        doc="Delay between scan cycles (seconds). Default: 2.0."
+    )
+    enable_gyro: rx.Var[bool] = field(
+        doc="Use device orientation for input. Default: false."
+    )
+    scan_on_click: rx.Var[bool] = field(
+        doc="Trigger a scan when clicking. Default: false."
+    )
+    snap_back_delay: rx.Var[int | float] = field(
+        doc="Delay (ms) before input recenters. Default: 250."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Hyperspeed(ReactBitsComponent):
+    """Animated lines continuously moving to simulate hyperspace travel on click hold.
+
+    Docs: https://reactbits.dev/backgrounds/hyperspeed
+    """
+
+    tag = "Hyperspeed"
+    alias = "ReactBitsHyperspeed"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Hyperspeed"
+    _rb_files = ('HyperSpeedPresets.js', 'Hyperspeed.css', 'Hyperspeed.jsx')
+    lib_dependencies: list[str] = ['postprocessing@6.37.8', 'three@0.180.0']
+
+    effect_options: rx.Var[dict[str, Any]] = field(
+        doc="The highly customizable configuration object for the effect, controls things like colors, distortion, line properties, etc. Default: DEFAULT_EFFECT_OPTIONS."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+    @classmethod
+    def create(cls, *children, preset: str | None = None, **props):
+        """Create the component.
+
+        Args:
+            *children: Children (unused).
+            preset: Name of a built-in React Bits preset ("one" .. "six"). Ignored if
+                ``effect_options`` is given.
+            **props: Component props.
+
+        Returns:
+            The component.
+        """
+        if preset is not None and "effect_options" not in props:
+            ensure_component_source(cls._rb_category, cls._rb_name, cls._rb_files)
+            props["effect_options"] = rx.Var(
+                f"hyperspeedPresets[{json.dumps(preset)}]",
+                _var_data=VarData(
+                    imports={
+                        f"$/public/{ASSETS_SUBDIR}/Backgrounds/Hyperspeed/HyperSpeedPresets.js": [
+                            ImportVar(tag="hyperspeedPresets")
+                        ]
+                    }
+                ),
+            )
+        return super().create(*children, **props)
+
+
+class Iridescence(ReactBitsComponent):
+    """Slick iridescent shader with shifting waves.
+
+    Docs: https://reactbits.dev/backgrounds/iridescence
+    """
+
+    tag = "Iridescence"
+    alias = "ReactBitsIridescence"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Iridescence"
+    _rb_files = ('Iridescence.css', 'Iridescence.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color: rx.Var[list[int | float]] = field(
+        doc="Base color as an array of RGB values (each between 0 and 1). Default: [1, 1, 1]."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Speed multiplier for the animation. Default: 1.0."
+    )
+    amplitude: rx.Var[int | float] = field(
+        doc="Amplitude for the mouse-driven effect. Default: 0.1."
+    )
+    mouse_react: rx.Var[bool] = field(
+        doc="Enable or disable mouse interaction with the shader. Default: true."
+    )
+
+
+class LetterGlitch(ReactBitsComponent):
+    """Matrix style letter animation.
+
+    Docs: https://reactbits.dev/backgrounds/letter-glitch
+    """
+
+    tag = "LetterGlitch"
+    alias = "ReactBitsLetterGlitch"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "LetterGlitch"
+    _rb_files = ('LetterGlitch.jsx',)
+
+    glitch_colors: rx.Var[list[str]] = field(
+        doc="Controls the colors of the letters rendered in the canvas. Default: ['#2b4539', '#61dca3', '#61b3dc']."
+    )
+    glitch_speed: rx.Var[int | float] = field(
+        doc="Controls the speed at which letters scramble in the animation. Default: 50."
+    )
+    center_vignette: rx.Var[bool] = field(
+        doc="When true, renders a radial gradient in the center of the container. Default: false."
+    )
+    outer_vignette: rx.Var[bool] = field(
+        doc="When true, renders an inner radial gradient around the edges of the container. Default: true."
+    )
+    smooth: rx.Var[bool] = field(
+        doc="When true, smoothens the animation of the letters for a more subtle feel. Default: true."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+    background_color: rx.Var[Any] = field(
+        doc="The `backgroundColor` prop."
+    )
+    characters: rx.Var[str] = field(
+        doc="String of characters to render in the canvas. Default: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$&*()-_+=/[]{};:<>.,0123456...."
+    )
+
+
+class LightPillar(ReactBitsComponent):
+    """Vertical pillar of light with glow effects.
+
+    Docs: https://reactbits.dev/backgrounds/light-pillar
+    """
+
+    tag = "LightPillar"
+    alias = "ReactBitsLightPillar"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "LightPillar"
+    _rb_files = ('LightPillar.css', 'LightPillar.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    top_color: rx.Var[str] = field(
+        doc="Hex color string for the top gradient color of the light pillar. Default: '#5227FF'."
+    )
+    bottom_color: rx.Var[str] = field(
+        doc="Hex color string for the bottom gradient color of the light pillar. Default: '#FF9FFC'."
+    )
+    intensity: rx.Var[int | float] = field(
+        doc="Controls the overall brightness and intensity of the effect. Default: 1.0."
+    )
+    rotation_speed: rx.Var[int | float] = field(
+        doc="Speed multiplier for the pillar rotation animation. Default: 0.3."
+    )
+    interactive: rx.Var[bool] = field(
+        doc="Enable mouse interaction to control the pillar rotation. Default: false."
+    )
+    glow_amount: rx.Var[int | float] = field(
+        doc="Controls the glow intensity and spread of the light effect. Default: 0.005."
+    )
+    pillar_width: rx.Var[int | float] = field(
+        doc="Width/radius of the light pillar. Default: 3.0."
+    )
+    pillar_height: rx.Var[int | float] = field(
+        doc="Height scaling factor for the pillar distortion. Default: 0.4."
+    )
+    noise_intensity: rx.Var[int | float] = field(
+        doc="Intensity of the film grain noise postprocessing effect. Default: 0.5."
+    )
+    mix_blend_mode: rx.Var[str] = field(
+        doc="CSS mix-blend-mode property to control how the component blends with its background. Default: 'screen'."
+    )
+    pillar_rotation: rx.Var[int | float] = field(
+        doc="Rotation angle of the pillar in degrees (0-360). Default: 0."
+    )
+    quality: rx.Var[Literal["low", "medium", "high"]] = field(
+        doc="Rendering quality level. Lower settings improve performance on mobile devices. Mobile devices automatically downgrade from high to medium. Default: 'high'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class LightRays(ReactBitsComponent):
+    """Volumetric light rays/beams with customizable direction.
+
+    Docs: https://reactbits.dev/backgrounds/light-rays
+    """
+
+    tag = "LightRays"
+    alias = "ReactBitsLightRays"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "LightRays"
+    _rb_files = ('LightRays.css', 'LightRays.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    rays_origin: rx.Var[str] = field(
+        doc="Origin position of the light rays. Options: 'top-center', 'top-left', 'top-right', 'right', 'left', 'bottom-center', 'bottom-right', 'bottom-left'. Default: 'top-center'."
+    )
+    rays_color: rx.Var[str] = field(
+        doc="Color of the light rays in hex format. Default: DEFAULT_COLOR."
+    )
+    rays_speed: rx.Var[int | float] = field(
+        doc="Animation speed of the rays. Default: 1."
+    )
+    light_spread: rx.Var[int | float] = field(
+        doc="How wide the light rays spread. Lower values = tighter rays, higher values = wider spread. Default: 1."
+    )
+    ray_length: rx.Var[int | float] = field(
+        doc="Maximum length/reach of the rays. Default: 2."
+    )
+    pulsating: rx.Var[bool] = field(
+        doc="Enable pulsing animation effect. Default: false."
+    )
+    fade_distance: rx.Var[int | float] = field(
+        doc="How far rays fade out from origin. Default: 1.0."
+    )
+    saturation: rx.Var[int | float] = field(
+        doc="Color saturation level (0-1). Default: 1.0."
+    )
+    follow_mouse: rx.Var[bool] = field(
+        doc="Make rays rotate towards the mouse cursor. Default: true."
+    )
+    mouse_influence: rx.Var[int | float] = field(
+        doc="How much mouse affects rays (0-1). Default: 0.1."
+    )
+    noise_amount: rx.Var[int | float] = field(
+        doc="Add noise/grain to rays (0-1). Default: 0.0."
+    )
+    distortion: rx.Var[int | float] = field(
+        doc="Apply wave distortion to rays. Default: 0.0."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class LightTunnel(ReactBitsComponent):
+    """A radial fibre-optic tunnel with light pulses racing into depth.
+
+    Docs: https://reactbits.dev/backgrounds/light-tunnel
+    """
+
+    tag = "LightTunnel"
+    alias = "ReactBitsLightTunnel"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "LightTunnel"
+    _rb_files = ('LightTunnel.css', 'LightTunnel.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    cable_color: rx.Var[str] = field(
+        doc="Base color of the fibre-optic cables. Default: '#A855F7'."
+    )
+    pulse_color: rx.Var[str] = field(
+        doc="Color of the light pulses travelling along each cable. Default: '#A855F7'."
+    )
+    tunnel_color: rx.Var[str] = field(
+        doc="Tint color of the cable body fill (visible when tunnelOpacity is above 0). Default: '#5227FF'."
+    )
+    tunnel_opacity: rx.Var[int | float] = field(
+        doc="Opacity of the cable body fill. 0 leaves the tunnel see-through so only rims and pulses show. Default: 0."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Overall scroll speed of the pulses down the tunnel. Default: 0.1."
+    )
+    flow_direction: rx.Var[Literal["inward", "outward"]] = field(
+        doc="Whether the light travels toward or away from the vanishing point. Default: 'outward'."
+    )
+    pulse_speed: rx.Var[int | float] = field(
+        doc="Speed multiplier for the individual light pulses. Default: 2."
+    )
+    pulse_length: rx.Var[int | float] = field(
+        doc="Length of the glowing pulse along each cable. Default: 0.28."
+    )
+    pulse_blend: rx.Var[int | float] = field(
+        doc="How softly the pulse fades out at its edges \u2014 low is a crisp packet, high is a long smooth trail. Default: 1."
+    )
+    pulse_width: rx.Var[int | float] = field(
+        doc="How much of the cable cross-section the pulse lights up \u2014 1 fills the cable, lower narrows it to a filament. Default: 1."
+    )
+    cable_count: rx.Var[int | float] = field(
+        doc="Number of cables radiating around the tunnel. Default: 20."
+    )
+    thickness: rx.Var[int | float] = field(
+        doc="Thickness of each cable core. Default: 0.35."
+    )
+    rim_width: rx.Var[int | float] = field(
+        doc="Width of the soft outline glow around each cable. Default: 0.15."
+    )
+    waviness: rx.Var[int | float] = field(
+        doc="Amount of wavy distortion applied along the tunnel depth. Default: 0.3."
+    )
+    sway: rx.Var[int | float] = field(
+        doc="Strength of the gentle rotational sway of the tunnel. Default: 0.5."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Zoom / scale of the tunnel field. Default: 1.0."
+    )
+    center_x: rx.Var[int | float] = field(
+        doc="Horizontal offset of the vanishing point. Default: 0.0."
+    )
+    center_y: rx.Var[int | float] = field(
+        doc="Vertical offset of the vanishing point. Default: 0.0."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Intensity of the cable rim glow. Default: 1.0."
+    )
+    fade_near: rx.Var[int | float] = field(
+        doc="Radius over which the tunnel fades in near the center. Default: 0.5."
+    )
+    fade_far: rx.Var[int | float] = field(
+        doc="Radius at which the tunnel fades out toward the edges. Default: 2."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier of the effect. Default: 1.0."
+    )
+    color_variance: rx.Var[bool] = field(
+        doc="Adds subtle per-cable color variation so cables are not uniform. Default: true."
+    )
+    grain: rx.Var[bool] = field(
+        doc="Adds a whisper-subtle animated film grain to break up banding in the gradients. Default: true."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Amplitude of the grain overlay. 0 disables it entirely. Default: 0.05."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Global opacity of the rendered tunnel. Default: 1.0."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enables gentle parallax of the vanishing point toward the pointer. Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Magnitude of the cursor parallax drift. Default: 0.1."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Lightfall(ReactBitsComponent):
+    """Colorful light streaks raining down a glowing tunnel with a cursor light.
+
+    Docs: https://reactbits.dev/backgrounds/lightfall
+    """
+
+    tag = "Lightfall"
+    alias = "ReactBitsLightfall"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Lightfall"
+    _rb_files = ('Lightfall.css', 'Lightfall.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    dpr: rx.Var[int | float] = field(
+        doc="Overrides device pixel ratio; lower for performance, higher for sharpness. Default: window.devicePixelRatio."
+    )
+    paused: rx.Var[bool] = field(
+        doc="If true, stops rendering updates (freezing the current frame). Default: false."
+    )
+    colors: rx.Var[list[str]] = field(
+        doc="Array of hex colors (up to 8) used to tint the falling light streaks. Each streak is randomly but evenly assigned one of the colors; a single color makes the whole effect uniform. Default: ['#A6C8FF', '#5227FF', '#FF9FFC']."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Hex color of the soft ambient glow behind the streaks. Default: '#0A29FF'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Multiplier for how fast the light streaks fall. Default: 0.5."
+    )
+    streak_count: rx.Var[int | float] = field(
+        doc="Number of streak layers rendered per cell (1\u201316). Higher = busier. Default: 2."
+    )
+    streak_width: rx.Var[int | float] = field(
+        doc="Thickness of each light streak. Default: 1."
+    )
+    streak_length: rx.Var[int | float] = field(
+        doc="Length of the glowing tail trailing each streak. Default: 1."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier applied before tone mapping. Default: 1."
+    )
+    density: rx.Var[int | float] = field(
+        doc="Vertical frequency of streaks. Higher values pack more streaks into view. Default: 0.6."
+    )
+    twinkle: rx.Var[int | float] = field(
+        doc="Amount of per\u2011streak brightness flicker. 0 = constant brightness. Default: 1."
+    )
+    zoom: rx.Var[int | float] = field(
+        doc="Field of view into the tunnel. Higher values zoom further in. Default: 3."
+    )
+    background_glow: rx.Var[int | float] = field(
+        doc="Intensity of the ambient background glow. Default: 0.5."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall alpha of the rendered canvas. Default: 1."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enables a soft light that follows the cursor and flares nearby streaks (no warping). Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Intensity of the cursor light. Default: 0.5."
+    )
+    mouse_radius: rx.Var[int | float] = field(
+        doc="Falloff radius of the cursor light. Default: 1."
+    )
+    mouse_dampening: rx.Var[int | float] = field(
+        doc="Easing time constant (seconds) for the cursor light to follow the pointer. 0 = immediate. Default: 0.15."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+    mix_blend_mode: rx.Var[str] = field(
+        doc="CSS mix-blend-mode applied to the canvas (e.g. 'screen', 'lighten')."
+    )
+
+
+class Lightning(ReactBitsComponent):
+    """Procedural lightning bolts with branching and glow flicker.
+
+    Docs: https://reactbits.dev/backgrounds/lightning
+    """
+
+    tag = "Lightning"
+    alias = "ReactBitsLightning"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Lightning"
+    _rb_files = ('Lightning.css', 'Lightning.jsx')
+
+    hue: rx.Var[int | float] = field(
+        doc="Hue of the lightning in degrees (0 to 360). Default: 230."
+    )
+    x_offset: rx.Var[int | float] = field(
+        doc="Horizontal offset of the lightning in normalized units. Default: 0."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier for the lightning. Default: 1."
+    )
+    intensity: rx.Var[int | float] = field(
+        doc="Brightness multiplier for the lightning. Default: 1."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Scale factor for the bolt size. Default: 1."
+    )
+
+
+class LineWaves(ReactBitsComponent):
+    """Animated line wave pattern with colorful warped distortion.
+
+    Docs: https://reactbits.dev/backgrounds/line-waves
+    """
+
+    tag = "LineWaves"
+    alias = "ReactBitsLineWaves"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "LineWaves"
+    _rb_files = ('LineWaves.css', 'LineWaves.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    speed: rx.Var[int | float] = field(
+        doc="Overall animation speed multiplier. Default: 0.3."
+    )
+    inner_line_count: rx.Var[int | float] = field(
+        doc="Number of lines in the inner (center) wave region. Default: 32.0."
+    )
+    outer_line_count: rx.Var[int | float] = field(
+        doc="Number of lines in the outer (edge) wave region. Default: 36.0."
+    )
+    warp_intensity: rx.Var[int | float] = field(
+        doc="Intensity of the wave distortion effect. Default: 1.0."
+    )
+    rotation: rx.Var[int | float] = field(
+        doc="Rotation of the wave pattern in degrees. Default: -45."
+    )
+    edge_fade_width: rx.Var[int | float] = field(
+        doc="Width of the edge fade between inner and outer regions. Default: 0.0."
+    )
+    color_cycle_speed: rx.Var[int | float] = field(
+        doc="Speed of color cycling animation. Default: 1.0."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier. Default: 0.2."
+    )
+    color1: rx.Var[str] = field(
+        doc="First color channel in HEX format. Default: '#ffffff'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Second color channel in HEX format. Default: '#ffffff'."
+    )
+    color3: rx.Var[str] = field(
+        doc="Third color channel in HEX format. Default: '#ffffff'."
+    )
+    enable_mouse_interaction: rx.Var[bool] = field(
+        doc="Enable cursor-reactive wave distortion. Default: true."
+    )
+    mouse_influence: rx.Var[int | float] = field(
+        doc="Strength of mouse influence on the wave pattern. Default: 2.0."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class LiquidChrome(ReactBitsComponent):
+    """Liquid metallic chrome shader with flowing reflective surface.
+
+    Docs: https://reactbits.dev/backgrounds/liquid-chrome
+    """
+
+    tag = "LiquidChrome"
+    alias = "ReactBitsLiquidChrome"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "LiquidChrome"
+    _rb_files = ('LiquidChrome.css', 'LiquidChrome.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    base_color: rx.Var[list[int | float]] = field(
+        doc="Base color of the component. Specify as an RGB array. Default: [0.1, 0.1, 0.1]."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier. Default: 0.2."
+    )
+    amplitude: rx.Var[int | float] = field(
+        doc="Amplitude of the distortion. Default: 0.3."
+    )
+    frequency_x: rx.Var[int | float] = field(
+        doc="Frequency modifier for the x distortion. Default: 3."
+    )
+    frequency_y: rx.Var[int | float] = field(
+        doc="Frequency modifier for the y distortion. Default: 3."
+    )
+    interactive: rx.Var[bool] = field(
+        doc="Enable mouse/touch interaction. Default: true."
+    )
+
+
+class LiquidEther(ReactBitsComponent):
+    """Interactive liquid shader with flowing distortion and customizable colors.
+
+    Docs: https://reactbits.dev/backgrounds/liquid-ether
+    """
+
+    tag = "LiquidEther"
+    alias = "ReactBitsLiquidEther"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "LiquidEther"
+    _rb_files = ('LiquidEther.css', 'LiquidEther.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+    _rename_props = {'bfecc': 'BFECC'}
+
+    mouse_force: rx.Var[int | float] = field(
+        doc="Strength multiplier applied to mouse / touch movement when injecting velocity. Default: 20."
+    )
+    cursor_size: rx.Var[int | float] = field(
+        doc="Radius (in pixels at base resolution) of the force brush. Default: 100."
+    )
+    is_viscous: rx.Var[bool] = field(
+        doc="Toggle iterative viscosity solve (smoother, thicker motion when enabled). Default: false."
+    )
+    viscous: rx.Var[int | float] = field(
+        doc="Viscosity coefficient used when isViscous is true. Default: 30."
+    )
+    iterations_viscous: rx.Var[int | float] = field(
+        doc="Number of Gauss-Seidel iterations for viscosity (higher = smoother, slower). Default: 32."
+    )
+    iterations_poisson: rx.Var[int | float] = field(
+        doc="Number of pressure Poisson iterations to enforce incompressibility. Default: 32."
+    )
+    dt: rx.Var[int | float] = field(
+        doc="Fixed simulation timestep used inside the advection / diffusion passes. Default: 0.014."
+    )
+    bfecc: rx.Var[bool] = field(
+        doc="Enable BFECC advection (error-compensated) for crisper flow; disable for slight performance gain. Default: true."
+    )
+    resolution: rx.Var[int | float] = field(
+        doc="Simulation texture scale relative to canvas size (lower = better performance, more blur). Default: 0.5."
+    )
+    is_bounce: rx.Var[bool] = field(
+        doc="If true, shows bounce boundaries (velocity clamped at edges). Default: false."
+    )
+    colors: rx.Var[list[str]] = field(
+        doc="Array of hex color stops used to build the velocity-to-color palette. Default: ['#5227FF', '#FF9FFC', '#B497CF']."
+    )
+    auto_demo: rx.Var[bool] = field(
+        doc="Enable idle auto-driving of the pointer when no user interaction. Default: true."
+    )
+    auto_speed: rx.Var[int | float] = field(
+        doc="Speed (normalized units/sec) for auto pointer motion. Default: 0.5."
+    )
+    auto_intensity: rx.Var[int | float] = field(
+        doc="Multiplier applied to velocity delta while in auto mode. Default: 2.2."
+    )
+    takeover_duration: rx.Var[int | float] = field(
+        doc="Seconds to interpolate from auto pointer to real cursor when user moves mouse. Default: 0.25."
+    )
+    auto_resume_delay: rx.Var[int | float] = field(
+        doc="Milliseconds of inactivity before auto mode resumes. Default: 1000."
+    )
+    auto_ramp_duration: rx.Var[int | float] = field(
+        doc="Seconds to ramp auto movement speed from 0 to full after activation. Default: 0.6."
+    )
+    background_color: rx.Var[str] = field(
+        doc="The `backgroundColor` prop. Default: '#FFFFFF'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class MoltenMetal(ReactBitsComponent):
+    """Swirling caustic plasma filaments with molten, white-hot cores.
+
+    Docs: https://reactbits.dev/backgrounds/molten-metal
+    """
+
+    tag = "MoltenMetal"
+    alias = "ReactBitsMoltenMetal"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "MoltenMetal"
+    _rb_files = ('MoltenMetal.css', 'MoltenMetal.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color1: rx.Var[str] = field(
+        doc="Shadow color for the dim caustic glow. Default: '#5227FF'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Midtone color for the flowing filaments. Default: '#FF9FFC'."
+    )
+    color3: rx.Var[str] = field(
+        doc="Highlight color for the hot filament cores. Default: '#FFFFFF'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed of the liquid motion. Default: 0.35."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zoom of the caustic field (higher = more detail on screen). Default: 4."
+    )
+    detail: rx.Var[int | float] = field(
+        doc="Number of domain-folding iterations (1-8). Default: 3."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Gain applied to the accumulated filament glow. Default: 1.6."
+    )
+    core_size: rx.Var[int | float] = field(
+        doc="Thickness of the bright filament cores. Default: 0.1."
+    )
+    swirl: rx.Var[int | float] = field(
+        doc="Amount of rotational swirl across the field. Default: 1."
+    )
+    fold: rx.Var[int | float] = field(
+        doc="Turbulence / fold strength of the iterative warp. Default: -0.2."
+    )
+    black_point: rx.Var[int | float] = field(
+        doc="Raises the dark floor so shadows fade to transparent. Default: 0.05."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness of the effect. Default: 1.3."
+    )
+    color_mode: rx.Var[str] = field(
+        doc="Palette mapping: molten, ember, or frost. Default: 'molten'."
+    )
+    grain: rx.Var[bool] = field(
+        doc="Adds subtle animated film grain. Default: true."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Amplitude of the grain overlay. 0 disables it entirely. Default: 0.05."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enables gentle drift of the field toward the cursor. Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Strength of the cursor drift. Default: 0.3."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect over the page. Default: 1.0."
+    )
+    background_color: rx.Var[str] = field(
+        doc="The `backgroundColor` prop. Default: '#FFFFFF'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Orb(ReactBitsComponent):
+    """Floating energy orb with customizable hover effect.
+
+    Docs: https://reactbits.dev/backgrounds/orb
+    """
+
+    tag = "Orb"
+    alias = "ReactBitsOrb"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Orb"
+    _rb_files = ('Orb.css', 'Orb.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    hue: rx.Var[int | float] = field(
+        doc="The base hue for the orb (in degrees). Default: 0."
+    )
+    hover_intensity: rx.Var[int | float] = field(
+        doc="Controls the intensity of the hover distortion effect. Default: 0.2."
+    )
+    rotate_on_hover: rx.Var[bool] = field(
+        doc="Toggle to enable or disable continuous rotation on hover. Default: true."
+    )
+    force_hover_state: rx.Var[bool] = field(
+        doc="Force hover animations even when the orb is not actually hovered. Default: false."
+    )
+    background_color: rx.Var[str] = field(
+        doc="The background color of the container. Default: '#000000'."
+    )
+
+
+class Particles(ReactBitsComponent):
+    """Configurable particle system.
+
+    Docs: https://reactbits.dev/backgrounds/particles
+    """
+
+    tag = "Particles"
+    alias = "ReactBitsParticles"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Particles"
+    _rb_files = ('Particles.css', 'Particles.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    particle_count: rx.Var[int | float] = field(
+        doc="The number of particles to generate. Default: 200."
+    )
+    particle_spread: rx.Var[int | float] = field(
+        doc="Controls how far particles are spread from the center. Default: 10."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Speed factor controlling the animation pace. Default: 0.1."
+    )
+    particle_colors: rx.Var[list[str]] = field(
+        doc="An array of hex color strings used to color the particles. Default: ['#ffffff']."
+    )
+    move_particles_on_hover: rx.Var[bool] = field(
+        doc="Determines if particles should move in response to mouse hover. Default: false."
+    )
+    particle_hover_factor: rx.Var[int | float] = field(
+        doc="Multiplier for the particle movement when hovering. Default: 1."
+    )
+    alpha_particles: rx.Var[bool] = field(
+        doc="If true, particles are rendered with varying transparency; otherwise, as solid circles. Default: false."
+    )
+    particle_base_size: rx.Var[int | float] = field(
+        doc="The base size of the particles. Default: 100."
+    )
+    size_randomness: rx.Var[int | float] = field(
+        doc="Controls the variation in particle sizes (0 means all particles have the same size). Default: 1."
+    )
+    camera_distance: rx.Var[int | float] = field(
+        doc="Distance from the camera to the particle system. Default: 20."
+    )
+    disable_rotation: rx.Var[bool] = field(
+        doc="If true, stops the particle system from rotating. Default: false."
+    )
+    pixel_ratio: rx.Var[int | float] = field(
+        doc="Sets the pixel ratio for sharper rendering on high-DPI screens. Default: 1."
+    )
+
+
+class PixelBlast(ReactBitsComponent):
+    """Exploding pixel particle bursts with optional liquid postprocessing.
+
+    Docs: https://reactbits.dev/backgrounds/pixel-blast
+    """
+
+    tag = "PixelBlast"
+    alias = "ReactBitsPixelBlast"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "PixelBlast"
+    _rb_files = ('PixelBlast.css', 'PixelBlast.jsx')
+    lib_dependencies: list[str] = ['postprocessing@6.37.8', 'three@0.180.0']
+
+    variant: rx.Var[Literal["square", "circle", "triangle", "diamond"]] = field(
+        doc="Pixel shape variant. Default: 'square'."
+    )
+    pixel_size: rx.Var[int | float] = field(
+        doc="Base pixel size (auto scaled for DPI). Default: 3."
+    )
+    color: rx.Var[str] = field(
+        doc="Pixel color. Default: '#B497CF'."
+    )
+    antialias: rx.Var[bool] = field(
+        doc="The `antialias` prop. Default: true."
+    )
+    pattern_scale: rx.Var[int | float] = field(
+        doc="Noise/pattern scale. Default: 2."
+    )
+    pattern_density: rx.Var[int | float] = field(
+        doc="Pattern density adjustment. Default: 1."
+    )
+    liquid: rx.Var[bool] = field(
+        doc="Enable liquid distortion effect. Default: false."
+    )
+    liquid_strength: rx.Var[int | float] = field(
+        doc="Liquid distortion strength. Default: 0.1."
+    )
+    liquid_radius: rx.Var[int | float] = field(
+        doc="Liquid touch brush radius scale. Default: 1."
+    )
+    pixel_size_jitter: rx.Var[int | float] = field(
+        doc="Random jitter applied to coverage. Default: 0."
+    )
+    enable_ripples: rx.Var[bool] = field(
+        doc="Enable click ripple waves. Default: true."
+    )
+    ripple_intensity_scale: rx.Var[int | float] = field(
+        doc="Ripple intensity multiplier. Default: 1."
+    )
+    ripple_thickness: rx.Var[int | float] = field(
+        doc="Ripple ring thickness. Default: 0.1."
+    )
+    ripple_speed: rx.Var[int | float] = field(
+        doc="Ripple propagation speed. Default: 0.3."
+    )
+    liquid_wobble_speed: rx.Var[int | float] = field(
+        doc="Liquid wobble frequency. Default: 4.5."
+    )
+    auto_pause_offscreen: rx.Var[bool] = field(
+        doc="The `autoPauseOffscreen` prop. Default: true."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation time scale. Default: 0.5."
+    )
+    transparent: rx.Var[bool] = field(
+        doc="Transparent background. Default: true."
+    )
+    edge_fade: rx.Var[int | float] = field(
+        doc="Edge fade distance (0-1). Default: 0.5."
+    )
+    noise_amount: rx.Var[int | float] = field(
+        doc="Post noise amount. Default: 0."
+    )
+
+
+class PixelSnow(ReactBitsComponent):
+    """Falling pixelated snow effect with customizable density and speed.
+
+    Docs: https://reactbits.dev/backgrounds/pixel-snow
+    """
+
+    tag = "PixelSnow"
+    alias = "ReactBitsPixelSnow"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "PixelSnow"
+    _rb_files = ('PixelSnow.css', 'PixelSnow.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    color: rx.Var[str] = field(
+        doc="Color of the snowflakes (hex or CSS color). Default: '#ffffff'."
+    )
+    flake_size: rx.Var[int | float] = field(
+        doc="Size of snowflakes in scene units. Default: 0.01."
+    )
+    min_flake_size: rx.Var[int | float] = field(
+        doc="Minimum flake size in pixels on screen. Default: 1.25."
+    )
+    pixel_resolution: rx.Var[int | float] = field(
+        doc="Pixel resolution - lower values create larger pixels for a more retro look. Default: 200."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier. Default: 1.25."
+    )
+    depth_fade: rx.Var[int | float] = field(
+        doc="Depth fade intensity - higher values make distant flakes fade faster. Default: 8."
+    )
+    far_plane: rx.Var[int | float] = field(
+        doc="Far plane distance for rendering - higher values show more distant flakes. Default: 20."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier. Default: 1."
+    )
+    gamma: rx.Var[int | float] = field(
+        doc="Gamma correction value for final color output. Default: 0.4545."
+    )
+    density: rx.Var[int | float] = field(
+        doc="Probability of snowflakes appearing (0-1) - lower values = fewer flakes. Default: 0.3."
+    )
+    variant: rx.Var[Literal["square", "round", "snowflake"]] = field(
+        doc="Shape of the snowflakes - square, round, or snowflake pattern. Default: 'square'."
+    )
+    direction: rx.Var[int | float] = field(
+        doc="Wind direction angle in degrees (0-360). Default: 125."
+    )
+
+
+class Plasma(ReactBitsComponent):
+    """Organic plasma gradients swirl + morph with smooth turbulence.
+
+    Docs: https://reactbits.dev/backgrounds/plasma
+    """
+
+    tag = "Plasma"
+    alias = "ReactBitsPlasma"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Plasma"
+    _rb_files = ('Plasma.css', 'Plasma.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color: rx.Var[str] = field(
+        doc="Optional hex color to tint the plasma effect. If not provided, uses original colors. Default: '#ffffff'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier. Higher values = faster animation. Default: 1."
+    )
+    direction: rx.Var[Literal["forward", "reverse", "pingpong"]] = field(
+        doc="Animation direction. 'pingpong' oscillates back and forth. Default: 'forward'."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zoom level of the plasma pattern. Higher values zoom in. Default: 1."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect (0-1). Default: 1."
+    )
+    mouse_interactive: rx.Var[bool] = field(
+        doc="Whether the plasma responds to mouse movement. Default: true."
+    )
+    render_scale: rx.Var[int | float] = field(
+        doc="Internal render resolution multiplier. 1 = full res, 0.5 = quarter the pixels. Lower values improve performance. Default: 0.55."
+    )
+    max_dpr: rx.Var[int | float] = field(
+        doc="Hard cap on devicePixelRatio used for rendering. Lower values improve performance on high-DPI screens. Default: 1.5."
+    )
+    target_fps: rx.Var[int | float] = field(
+        doc="Target frame rate for the animation loop. Lower values reduce CPU/GPU load. Default: 60."
+    )
+    iterations: rx.Var[int | float] = field(
+        doc="Raymarch step count \u2014 lower is cheaper but less detailed. Higher values produce smoother plasma. Default: 60."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class PlasmaWave(ReactBitsComponent):
+    """Raymarched plasma waves with dual-wave interference and OGL.
+
+    Docs: https://reactbits.dev/backgrounds/plasma-wave
+    """
+
+    tag = "PlasmaWave"
+    alias = "ReactBitsPlasmaWave"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "PlasmaWave"
+    _rb_files = ('PlasmaWave.css', 'PlasmaWave.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    x_offset: rx.Var[int | float] = field(
+        doc="Horizontal offset of the viewport. Default: 0."
+    )
+    y_offset: rx.Var[int | float] = field(
+        doc="Vertical offset of the viewport. Default: 0."
+    )
+    rotation_deg: rx.Var[int | float] = field(
+        doc="Rotation angle of the scene in degrees. Default: 0."
+    )
+    focal_length: rx.Var[int | float] = field(
+        doc="Focal length of the camera projection. Default: 0.8."
+    )
+    speed1: rx.Var[int | float] = field(
+        doc="Speed of the first plasma wave. Default: 0.05."
+    )
+    speed2: rx.Var[int | float] = field(
+        doc="Speed of the second plasma wave. Default: 0.05."
+    )
+    dir2: rx.Var[int | float] = field(
+        doc="Direction multiplier for the second wave. Use -1 to reverse. Default: 1.0."
+    )
+    bend1: rx.Var[int | float] = field(
+        doc="Bend intensity of the first wave. Default: 1."
+    )
+    bend2: rx.Var[int | float] = field(
+        doc="Bend intensity of the second wave. Default: 0.5."
+    )
+    colors: rx.Var[list[str]] = field(
+        doc="Array of two hex colors \u2014 one for each plasma wave band. Default: ['#A855F7', '#06B6D4']."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Prism(ReactBitsComponent):
+    """Rotating prism with configurable intensity, size, and colors.
+
+    Docs: https://reactbits.dev/backgrounds/prism
+    """
+
+    tag = "Prism"
+    alias = "ReactBitsPrism"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Prism"
+    _rb_files = ('Prism.css', 'Prism.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    height: rx.Var[int | float] = field(
+        doc="Apex height of the prism (world units). Default: 3.5."
+    )
+    base_width: rx.Var[int | float] = field(
+        doc="Total base width across X/Z (world units). Default: 5.5."
+    )
+    animation_type: rx.Var[Literal["rotate", "hover", "3drotate"]] = field(
+        doc="Animation mode: shader wobble, pointer hover tilt, or full 3D rotation. Default: 'rotate'."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Glow/bleed intensity multiplier. Default: 1."
+    )
+    offset: rx.Var[dict[str, Any]] = field(
+        doc="Pixel offset within the canvas (x\u2192right, y\u2192down). Default: { x: 0, y: 0 }."
+    )
+    noise: rx.Var[int | float] = field(
+        doc="Film-grain noise amount added to final color (0 disables). Default: 0.5."
+    )
+    transparent: rx.Var[bool] = field(
+        doc="Whether the canvas has an alpha channel (transparent background). Default: true."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Overall screen-space scale of the prism (bigger = larger). Default: 3.6."
+    )
+    hue_shift: rx.Var[int | float] = field(
+        doc="Hue rotation (radians) applied to final color. Default: 0."
+    )
+    color_frequency: rx.Var[int | float] = field(
+        doc="Frequency of internal sine bands controlling color variation. Default: 1."
+    )
+    hover_strength: rx.Var[int | float] = field(
+        doc="Sensitivity of hover tilt (pitch/yaw amplitude). Default: 2."
+    )
+    inertia: rx.Var[int | float] = field(
+        doc="Easing factor for hover (0..1, higher = snappier). Default: 0.05."
+    )
+    bloom: rx.Var[int | float] = field(
+        doc="Extra bloom factor layered on top of glow. Default: 1."
+    )
+    suspend_when_offscreen: rx.Var[bool] = field(
+        doc="Pause rendering when the element is not in the viewport. Default: false."
+    )
+    time_scale: rx.Var[int | float] = field(
+        doc="Global time multiplier for animations (0=frozen, 1=normal). Default: 0.5."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class PrismaticBurst(ReactBitsComponent):
+    """Burst of light rays with controllable color, distortion, amount.
+
+    Docs: https://reactbits.dev/backgrounds/prismatic-burst
+    """
+
+    tag = "PrismaticBurst"
+    alias = "ReactBitsPrismaticBurst"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "PrismaticBurst"
+    _rb_files = ('PrismaticBurst.css', 'PrismaticBurst.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    intensity: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier applied after accumulation. Default: 2."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Global time multiplier controlling ray motion & distortion. Default: 0.5."
+    )
+    animation_type: rx.Var[Literal["rotate", "rotate3d", "hover"]] = field(
+        doc="Core motion style: planar rotation, full 3D rotation, or pointer hover orbit. Default: 'rotate3d'."
+    )
+    colors: rx.Var[list[str]] = field(
+        doc="Optional array of hex colors used as a gradient (otherwise spectral). Default: []."
+    )
+    distort: rx.Var[int | float] = field(
+        doc="Amount of bend/distortion applied to marching space (adds organic wobble). Default: 0."
+    )
+    paused: rx.Var[bool] = field(
+        doc="Freeze time progression when true (animation stops). Default: false."
+    )
+    offset: rx.Var[dict[str, Any]] = field(
+        doc="Pixel (or CSS length) offset of focal origin from center. Default: { x: 0, y: 0 }."
+    )
+    hover_dampness: rx.Var[int | float] = field(
+        doc="Smoothing factor (0-1) for pointer tracking when animationType='hover'. Default: 0."
+    )
+    ray_count: rx.Var[int | float] = field(
+        doc="If > 0 applies an angular comb filter to produce discrete ray spokes."
+    )
+    mix_blend_mode: rx.Var[str] = field(
+        doc="Canvas CSS mix-blend-mode (e.g. lighten, screen) or 'none' for normal. Default: 'lighten'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Radar(ReactBitsComponent):
+    """Radar sweep effect with concentric rings, radial spokes, and a rotating beam.
+
+    Docs: https://reactbits.dev/backgrounds/radar
+    """
+
+    tag = "Radar"
+    alias = "ReactBitsRadar"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Radar"
+    _rb_files = ('Radar.css', 'Radar.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    speed: rx.Var[int | float] = field(
+        doc="Overall animation speed multiplier. Default: 1.0."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zoom level of the radar pattern. Default: 0.5."
+    )
+    ring_count: rx.Var[int | float] = field(
+        doc="Number of concentric rings. Default: 10.0."
+    )
+    spoke_count: rx.Var[int | float] = field(
+        doc="Number of radial spoke lines. Default: 10.0."
+    )
+    ring_thickness: rx.Var[int | float] = field(
+        doc="Thickness of the concentric ring lines. Default: 0.05."
+    )
+    spoke_thickness: rx.Var[int | float] = field(
+        doc="Thickness of the radial spoke lines. Default: 0.01."
+    )
+    sweep_speed: rx.Var[int | float] = field(
+        doc="Rotation speed of the sweep beam. Default: 1.0."
+    )
+    sweep_width: rx.Var[int | float] = field(
+        doc="Width of the sweep trail (higher = thinner). Default: 2.0."
+    )
+    sweep_lobes: rx.Var[int | float] = field(
+        doc="Number of sweep beams around the radar. Default: 1.0."
+    )
+    color: rx.Var[str] = field(
+        doc="Primary radar color in HEX format. Default: '#9f29ff'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Background color in HEX format. Default: '#000000'."
+    )
+    falloff: rx.Var[int | float] = field(
+        doc="Edge fade intensity based on distance from center. Default: 2.0."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier. Default: 1.0."
+    )
+    enable_mouse_interaction: rx.Var[bool] = field(
+        doc="Enable cursor-reactive center offset. Default: true."
+    )
+    mouse_influence: rx.Var[int | float] = field(
+        doc="Strength of the mouse offset effect. Default: 0.1."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class RippleGrid(ReactBitsComponent):
+    """A grid that continuously animates with a ripple effect.
+
+    Docs: https://reactbits.dev/backgrounds/ripple-grid
+    """
+
+    tag = "RippleGrid"
+    alias = "ReactBitsRippleGrid"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "RippleGrid"
+    _rb_files = ('RippleGrid.css', 'RippleGrid.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    enable_rainbow: rx.Var[bool] = field(
+        doc="Enables rainbow color cycling animation for the grid. Default: false."
+    )
+    grid_color: rx.Var[str] = field(
+        doc="Color of the grid when rainbow mode is disabled. Default: '#ffffff'."
+    )
+    ripple_intensity: rx.Var[int | float] = field(
+        doc="Controls the intensity of the ripple effect from the center. Default: 0.05."
+    )
+    grid_size: rx.Var[int | float] = field(
+        doc="Controls the density/size of the grid pattern. Default: 10.0."
+    )
+    grid_thickness: rx.Var[int | float] = field(
+        doc="Controls the thickness of the grid lines. Default: 15.0."
+    )
+    fade_distance: rx.Var[int | float] = field(
+        doc="Controls how far the fade effect extends from the center. Default: 1.5."
+    )
+    vignette_strength: rx.Var[int | float] = field(
+        doc="Controls the intensity of the vignette (edge darkening) effect. Default: 2.0."
+    )
+    glow_intensity: rx.Var[int | float] = field(
+        doc="Adds a glow effect to the grid lines. Default: 0.1."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the entire effect. Default: 1.0."
+    )
+    grid_rotation: rx.Var[int | float] = field(
+        doc="Rotate the entire grid pattern by degrees. Default: 0."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enable mouse/touch interaction to create ripples. Default: true."
+    )
+    mouse_interaction_radius: rx.Var[int | float] = field(
+        doc="Controls the radius of the mouse interaction effect. Default: 1."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Scanner(ReactBitsComponent):
+    """Calm interference bands sweeping across the screen like an oscilloscope.
+
+    Docs: https://reactbits.dev/backgrounds/scanner
+    """
+
+    tag = "Scanner"
+    alias = "ReactBitsScanner"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Scanner"
+    _rb_files = ('Scanner.css', 'Scanner.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color1: rx.Var[str] = field(
+        doc="Deep violet base color of the scanning field. Default: '#5227FF'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Pink color of the interference bands. Default: '#FF9FFC'."
+    )
+    color3: rx.Var[str] = field(
+        doc="White color used for the brightest signal peaks. Default: '#FFFFFF'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Overall animation speed of the signal. Default: 0.5."
+    )
+    sweep_speed: rx.Var[int | float] = field(
+        doc="Rate of the scan band travelling across the field. Default: 0.25."
+    )
+    sweep_width: rx.Var[int | float] = field(
+        doc="Spacing between successive scan bands. Default: 1.6."
+    )
+    sweep_falloff: rx.Var[int | float] = field(
+        doc="How tightly the sweep concentrates; higher values give a narrower band. Default: 6."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zoom level of the signal field. Default: 1.5."
+    )
+    frequency: rx.Var[int | float] = field(
+        doc="Spatial frequency of the underlying signal that bends the scan lines. Default: 2."
+    )
+    ripple: rx.Var[int | float] = field(
+        doc="How strongly the signal bends the scan lines out of straight. Default: 0.22."
+    )
+    band_density: rx.Var[int | float] = field(
+        doc="Number of scan lines packed across the field. Default: 11."
+    )
+    line_sharpness: rx.Var[int | float] = field(
+        doc="Thins the scan lines into a crisp trace; lower values give a soft glow. Default: 5.5."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Soft fill between the lines, giving the band volume. Default: 0.22."
+    )
+    scan_direction: rx.Var[str] = field(
+        doc="Direction of the scan: 'vertical', 'horizontal', or 'diagonal'. Default: 'vertical'."
+    )
+    color_spread: rx.Var[int | float] = field(
+        doc="Amount of chromatic separation between the violet and pink channels. Default: 0.7."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness of the field. Default: 1.0."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="Contrast between the base tone and the bright peaks. Default: 1.15."
+    )
+    softness: rx.Var[int | float] = field(
+        doc="Anti-alias rolloff; higher values calm high-frequency shimmer. Default: 1.4."
+    )
+    vignette: rx.Var[int | float] = field(
+        doc="Strength of the edge fade around the field. Default: 0.45."
+    )
+    scanline: rx.Var[bool] = field(
+        doc="Overlays fine CRT raster lines across the field. Default: true."
+    )
+    grain: rx.Var[bool] = field(
+        doc="Adds a subtle animated grain. Default: true."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Amplitude of the grain overlay. 0 disables it entirely. Default: 0.05."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect. Default: 1.0."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enables the soft scan focus that follows the pointer. Default: true."
+    )
+    mouse_radius: rx.Var[int | float] = field(
+        doc="Radius of the pointer focus region. Default: 0.5."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Strength of the pointer focus brightening. Default: 0.5."
+    )
+
+
+class ShapeGrid(ReactBitsComponent):
+    """Animated grid with shape variants (square, hexagon, circle, triangle) + direction customization.
+
+    Docs: https://reactbits.dev/backgrounds/shape-grid
+    """
+
+    tag = "ShapeGrid"
+    alias = "ReactBitsShapeGrid"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "ShapeGrid"
+    _rb_files = ('ShapeGrid.css', 'ShapeGrid.jsx')
+
+    direction: rx.Var[str] = field(
+        doc="Direction of square animation. Options: 'diagonal', 'up', 'right', 'down', 'left'. Default: 'right'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier. Default: 1."
+    )
+    border_color: rx.Var[str] = field(
+        doc="Color of the square borders. Default: '#999'."
+    )
+    square_size: rx.Var[int | float] = field(
+        doc="Size of individual squares in pixels. Default: 40."
+    )
+    hover_fill_color: rx.Var[str] = field(
+        doc="Fill color when hovering over squares. Default: '#222'."
+    )
+    shape: rx.Var[str] = field(
+        doc="Shape of the grid tiles. Options: 'square', 'hexagon', 'circle', 'triangle'. Default: 'square'."
+    )
+    hover_trail_amount: rx.Var[int | float] = field(
+        doc="Number of previously hovered shapes to keep visible as a fading trail. 0 disables the trail. Default: 0."
+    )
+
+
+class ShapeWaves(ReactBitsComponent):
+    """A WebGPU field of triangles, circles and squares that brighten and grow along rolling waves, with an optional text cutout the waves flow around.
+
+    Docs: https://reactbits.dev/backgrounds/shape-waves
+    """
+
+    tag = "ShapeWaves"
+    alias = "ReactBitsShapeWaves"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "ShapeWaves"
+    _rb_files = ('ShapeWaves.css', 'ShapeWaves.jsx')
+    lib_dependencies: list[str] = ['vgpu@0.3.1']
+
+    text: rx.Var[str] = field(
+        doc="Optional text carved out of the field. Cells under the glyphs stay empty and the waves flow around them."
+    )
+    font_family: rx.Var[str] = field(
+        doc="CSS font family used to draw the text cutout. Default: 'Geist, \"Geist Sans\", system-ui, sans-serif'."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="Font weight of the text cutout. Default: 500."
+    )
+    text_size: rx.Var[int | float] = field(
+        doc="Text height as a fraction of the container height. Long text shrinks to fit the width. Default: 0.6."
+    )
+    shapes: rx.Var[str] = field(
+        doc="'mixed' draws dark bands as triangles, mid bands as circles and bright bands as squares. 'squares', 'circles' or 'triangles' use one glyph and vary its size per band instead. Default: 'mixed'."
+    )
+    cell_size: rx.Var[int | float] = field(
+        doc="Size of one grid cell in CSS pixels. Default: 10."
+    )
+    dot_size: rx.Var[int | float] = field(
+        doc="Glyph size as a fraction of the cell. Default: 0.75."
+    )
+    color: rx.Var[str] = field(
+        doc="Glyph color. One flat color for the whole field. Default: '#929292'."
+    )
+    hover_color: rx.Var[str] = field(
+        doc="Color the glyphs step towards inside a splash. Default: '#ffffff'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Background color behind the glyphs. Default: '#000000'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="How fast the wave bands morph over time. 0 freezes them. Default: 1."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Size of the wave bands. Larger values give broader, calmer swells. Default: 1."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="How sharply the field is cut into its three bands. Default: 1."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Shifts the balance between dark, mid and bright bands. Default: 0.4."
+    )
+    flow: rx.Var[int | float] = field(
+        doc="Drift speed of the field in cells per second. 0 evolves in place. Default: 0."
+    )
+    direction: rx.Var[int | float] = field(
+        doc="Drift direction in degrees, used when flow is above 0. Default: 0."
+    )
+    fade: rx.Var[int | float] = field(
+        doc="Strength of the radial fade into the background towards the edges. 0 disables it. Default: 0.25."
+    )
+    interactive: rx.Var[bool] = field(
+        doc="Lets the cursor splash into the field, sending ripples that cycle the glyphs and light them up. Default: true."
+    )
+    splash_radius: rx.Var[int | float] = field(
+        doc="Size of a cursor splash in CSS pixels. Default: 40."
+    )
+    splash_strength: rx.Var[int | float] = field(
+        doc="How much energy a splash drops in. Higher values throw wider, brighter ripples. Default: 0.4."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Bloom on lit glyphs. 0 disables the glow pass entirely. Default: 0.35."
+    )
+    intro: rx.Var[bool] = field(
+        doc="Plays a spawn animation on mount: the shapes pop in along a wave that travels from the centre to the corners. Default: true."
+    )
+    intro_duration: rx.Var[int | float] = field(
+        doc="Length of the intro wave in seconds. Default: 1.6."
+    )
+    intro_key: rx.Var[int | float | str] = field(
+        doc="Change this value to replay the intro wave without remounting. Default: 0."
+    )
+    paused: rx.Var[bool] = field(
+        doc="Freezes the wave motion. Splashes keep working. Default: false."
+    )
+    on_error: rx.EventHandler[lambda error: [safe(error)]] = field(
+        doc="Called when WebGPU is unavailable or rendering fails. The background color still shows. Handler receives: error."
+    )
+
+
+class SideRays(ReactBitsComponent):
+    """Animated light rays emanating from the side with customizable colors and speed.
+
+    Docs: https://reactbits.dev/backgrounds/side-rays
+    """
+
+    tag = "SideRays"
+    alias = "ReactBitsSideRays"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "SideRays"
+    _rb_files = ('SideRays.css', 'SideRays.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed of the rays. Default: 2.5."
+    )
+    ray_color1: rx.Var[str] = field(
+        doc="Color of the first ray layer in hex format. Default: '#EAB308'."
+    )
+    ray_color2: rx.Var[str] = field(
+        doc="Color of the second ray layer in hex format. Default: '#96c8ff'."
+    )
+    intensity: rx.Var[int | float] = field(
+        doc="Overall brightness of the rays. Default: 2."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="Angular width of the ray fan \u2014 higher values create a wider spread between the two ray layers. Default: 2."
+    )
+    origin: rx.Var[Literal["top-right", "top-left", "bottom-right", "bottom-left"]] = field(
+        doc="Corner of the canvas from which the rays emerge. Default: 'top-right'."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Rotation of the ray fan in degrees \u2014 positive values tilt clockwise. Default: 0."
+    )
+    saturation: rx.Var[int | float] = field(
+        doc="Color saturation of the rays \u2014 0 renders in grayscale, values above 1 boost color. Default: 1.5."
+    )
+    blend: rx.Var[int | float] = field(
+        doc="Balance between the two ray layers \u2014 0 is all ray 1, 1 is all ray 2. Default: 0.75."
+    )
+    falloff: rx.Var[int | float] = field(
+        doc="How steeply brightness diminishes with distance from the source \u2014 higher = tighter glow. Default: 1.6."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect. Default: 1.0."
+    )
+
+
+class Silk(ReactBitsComponent):
+    """Smooth waves background with soft lighting.
+
+    Docs: https://reactbits.dev/backgrounds/silk
+    """
+
+    tag = "Silk"
+    alias = "ReactBitsSilk"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Silk"
+    _rb_files = ('Silk.jsx',)
+    lib_dependencies: list[str] = ['@react-three/fiber@9.3.0', 'three@0.180.0']
+
+    speed: rx.Var[int | float] = field(
+        doc="Controls the animation speed of the silk effect. Default: 5."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Controls the scale of the silk pattern. Default: 1."
+    )
+    color: rx.Var[str] = field(
+        doc="Hex color code for the silk pattern. Default: '#7B7481'."
+    )
+    noise_intensity: rx.Var[int | float] = field(
+        doc="Controls the intensity of the noise effect. Default: 1.5."
+    )
+    rotation: rx.Var[int | float] = field(
+        doc="Controls the rotation of the silk pattern (in radians). Default: 0."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class SlicedWaves(ReactBitsComponent):
+    """A grid of soft glowing bars rippling like a slatted equalizer.
+
+    Docs: https://reactbits.dev/backgrounds/sliced-waves
+    """
+
+    tag = "SlicedWaves"
+    alias = "ReactBitsSlicedWaves"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "SlicedWaves"
+    _rb_files = ('SlicedWaves.css', 'SlicedWaves.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color1: rx.Var[str] = field(
+        doc="Highlight color for bars at the top of their travel. Default: '#FF9FFC'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Deep color for bars at the bottom of their travel. Default: '#5227FF'."
+    )
+    color3: rx.Var[str] = field(
+        doc="Accent tint blended across the grid. Default: '#B497CF'."
+    )
+    columns: rx.Var[int | float] = field(
+        doc="Number of grid columns. Default: 14."
+    )
+    rows: rx.Var[int | float] = field(
+        doc="Number of grid rows. Default: 8."
+    )
+    bar_thickness: rx.Var[int | float] = field(
+        doc="Thickness of each bar relative to its cell. Default: 0.1."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed of the travelling wave. Default: 0.35."
+    )
+    travel: rx.Var[int | float] = field(
+        doc="How far each bar moves within its cell. Default: 0.7."
+    )
+    wave_spread: rx.Var[int | float] = field(
+        doc="Phase step between columns; controls how tight the wave is. Default: 0.9."
+    )
+    row_offset: rx.Var[int | float] = field(
+        doc="Per-row phase offset that staggers the bars. Default: 1.0."
+    )
+    softness: rx.Var[int | float] = field(
+        doc="Edge softness; higher values turn bars into glowing bands. Default: 0.05."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Soft halo emitted around each bar. Default: 0."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness of the bars. Default: 1.0."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="Color contrast applied to the final render. Default: 1.0."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect. Default: 0.5."
+    )
+    orientation: rx.Var[str] = field(
+        doc="Bar orientation: 'horizontal' slats move vertically, 'vertical' slats move horizontally. Default: 'horizontal'."
+    )
+    alternate: rx.Var[bool] = field(
+        doc="Reverse the travel direction on alternating rows. Default: false."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Enable cursor-proximity brightening and thickening. Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Strength of the cursor-proximity response. Default: 1."
+    )
+    mouse_radius: rx.Var[int | float] = field(
+        doc="Radius of the cursor influence falloff. Default: 0.3."
+    )
+    grain: rx.Var[bool] = field(
+        doc="Adds a subtle animated grain. Default: true."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Amplitude of the grain overlay. 0 disables it entirely. Default: 0.05."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class SoftAurora(ReactBitsComponent):
+    """Soft aurora borealis shader with 3D Perlin noise and cosine gradient palettes.
+
+    Docs: https://reactbits.dev/backgrounds/soft-aurora
+    """
+
+    tag = "SoftAurora"
+    alias = "ReactBitsSoftAurora"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "SoftAurora"
+    _rb_files = ('SoftAurora.css', 'SoftAurora.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    speed: rx.Var[int | float] = field(
+        doc="Overall animation speed multiplier. Default: 0.6."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Scale of the noise pattern. Default: 1.5."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier. Default: 1.0."
+    )
+    color1: rx.Var[str] = field(
+        doc="Tint color for the first aurora layer. Default: '#f7f7f7'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Tint color for the second aurora layer. Default: '#e100ff'."
+    )
+    noise_frequency: rx.Var[int | float] = field(
+        doc="Base frequency of the Perlin noise. Default: 2.5."
+    )
+    noise_amplitude: rx.Var[int | float] = field(
+        doc="Base amplitude of the Perlin noise. Default: 1.0."
+    )
+    band_height: rx.Var[int | float] = field(
+        doc="Vertical position of the aurora band (0-1). Default: 0.5."
+    )
+    band_spread: rx.Var[int | float] = field(
+        doc="Vertical spread of the aurora glow. Default: 1.0."
+    )
+    octave_decay: rx.Var[int | float] = field(
+        doc="Amplitude decay per noise octave. Default: 0.1."
+    )
+    layer_offset: rx.Var[int | float] = field(
+        doc="Time offset between the two aurora layers. Default: 0."
+    )
+    color_speed: rx.Var[int | float] = field(
+        doc="Speed of palette color shifting. Default: 1.0."
+    )
+    enable_mouse_interaction: rx.Var[bool] = field(
+        doc="Enable cursor-reactive aurora offset. Default: true."
+    )
+    mouse_influence: rx.Var[int | float] = field(
+        doc="Strength of the mouse offset effect. Default: 0.25."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Threads(ReactBitsComponent):
+    """Animated pattern of lines forming a fabric-like motion.
+
+    Docs: https://reactbits.dev/backgrounds/threads
+    """
+
+    tag = "Threads"
+    alias = "ReactBitsThreads"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Threads"
+    _rb_files = ('Threads.css', 'Threads.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color: rx.Var[list[int | float]] = field(
+        doc="Customizes the color of the lines (RGB). Default: [1, 1, 1]."
+    )
+    amplitude: rx.Var[int | float] = field(
+        doc="Adjusts the intensity of the wave effect on the lines. Default: 1."
+    )
+    distance: rx.Var[int | float] = field(
+        doc="Controls the spacing between the lines. A value of 0 means no offset. Default: 0."
+    )
+    enable_mouse_interaction: rx.Var[bool] = field(
+        doc="Enables smooth mouse hover effects that modulate the line's movement and amplitude. Default: false."
+    )
+
+
+class Topography(ReactBitsComponent):
+    """A living contour map with glowing, elevation-tinted lines.
+
+    Docs: https://reactbits.dev/backgrounds/topography
+    """
+
+    tag = "Topography"
+    alias = "ReactBitsTopography"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Topography"
+    _rb_files = ('Topography.css', 'Topography.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    low_color: rx.Var[str] = field(
+        doc="Color used for the lowest elevation bands. Default: '#5227FF'."
+    )
+    mid_color: rx.Var[str] = field(
+        doc="Color used for the mid elevation bands. Default: '#FF9FFC'."
+    )
+    high_color: rx.Var[str] = field(
+        doc="Color used for the highest ridge lines. Default: '#FFFFFF'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed of the morphing elevation field. Default: 0.35."
+    )
+    morph_amount: rx.Var[int | float] = field(
+        doc="Amplitude of the field morphing (how much the terrain shifts). Default: 3.0."
+    )
+    morph_speed: rx.Var[int | float] = field(
+        doc="How differently each control point animates over time. Default: 0.05."
+    )
+    bands: rx.Var[int | float] = field(
+        doc="Contour line density (number of elevation bands). Default: 2.0."
+    )
+    thickness: rx.Var[int | float] = field(
+        doc="Thickness of the contour lines. Default: 0.01."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zoom level of the topographic field. Default: 1.0."
+    )
+    pixel_size: rx.Var[int | float] = field(
+        doc="Retro pixelation step (1 = smooth, higher = chunkier). Default: 1.0."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Soft bloom radius around the contour lines. Default: 0.5."
+    )
+    color_mode: rx.Var[str] = field(
+        doc="Line coloring mode: 'elevation', 'uniform', or 'alternating'. Default: 'elevation'."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="Contrast of the line coverage (sharpens or softens lines). Default: 3.0."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness of the contour lines. Default: 1.0."
+    )
+    fill_bands: rx.Var[bool] = field(
+        doc="Softly tint the areas between contour lines by elevation. Default: false."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect. Default: 1.0."
+    )
+    grain: rx.Var[bool] = field(
+        doc="Whisper-subtle animated film grain over the effect. Default: true."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Amplitude of the grain overlay. 0 disables it entirely. Default: 0.05."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Lift the elevation field gently around the cursor. Default: true."
+    )
+    mouse_radius: rx.Var[int | float] = field(
+        doc="Radius of the cursor elevation bump. Default: 0.3."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Strength of the cursor elevation bump. Default: 0.4."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+class Waves(ReactBitsComponent):
+    """Layered lines that form smooth wave patterns with animation.
+
+    Docs: https://reactbits.dev/backgrounds/waves
+    """
+
+    tag = "Waves"
+    alias = "ReactBitsWaves"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "Waves"
+    _rb_files = ('Waves.css', 'Waves.jsx')
+
+    line_color: rx.Var[str] = field(
+        doc="Defines the color of the wave lines drawn on the canvas. Default: 'black'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Sets the background color of the waves container. Default: 'transparent'."
+    )
+    wave_speed_x: rx.Var[int | float] = field(
+        doc="Horizontal speed factor for the wave animation. Default: 0.0125."
+    )
+    wave_speed_y: rx.Var[int | float] = field(
+        doc="Vertical speed factor for the wave animation. Default: 0.005."
+    )
+    wave_amp_x: rx.Var[int | float] = field(
+        doc="Horizontal amplitude of each wave. Default: 32."
+    )
+    wave_amp_y: rx.Var[int | float] = field(
+        doc="Vertical amplitude of each wave. Default: 16."
+    )
+    x_gap: rx.Var[int | float] = field(
+        doc="Horizontal gap between individual wave lines. Default: 10."
+    )
+    y_gap: rx.Var[int | float] = field(
+        doc="Vertical gap between points on each wave line. Default: 32."
+    )
+    friction: rx.Var[int | float] = field(
+        doc="Controls how quickly the cursor effect slows down. Default: 0.925."
+    )
+    tension: rx.Var[int | float] = field(
+        doc="Determines the 'springiness' of the cursor effect on points. Default: 0.005."
+    )
+    max_cursor_move: rx.Var[int | float] = field(
+        doc="Limits how far each point can shift due to cursor movement. Default: 100."
+    )
+
+
+class WebThreads(ReactBitsComponent):
+    """Glowing sine threads woven through a luminous convergence point.
+
+    Docs: https://reactbits.dev/backgrounds/web-threads
+    """
+
+    tag = "WebThreads"
+    alias = "ReactBitsWebThreads"
+    is_default = True
+    _rb_category = "Backgrounds"
+    _rb_name = "WebThreads"
+    _rb_files = ('WebThreads.css', 'WebThreads.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color1: rx.Var[str] = field(
+        doc="Color of the first thread; threads blend from this toward color2. Default: '#5227FF'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Color of the last thread; threads blend toward this hue. Default: '#FF9FFC'."
+    )
+    color3: rx.Var[str] = field(
+        doc="Hot-core color mixed into the brightest parts of the threads. Default: '#FFFFFF'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed of the weaving motion. Default: 0.2."
+    )
+    thread_count: rx.Var[int | float] = field(
+        doc="Number of glowing threads (1\u201310). Default: 6."
+    )
+    frequency: rx.Var[int | float] = field(
+        doc="Number of sine waves across the screen width. Default: 5.0."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="How far the threads fan out away from the pinch point. Default: 0.18."
+    )
+    taper: rx.Var[int | float] = field(
+        doc="Per-thread amplitude growth; higher values fan later threads out more. Default: 1.0."
+    )
+    position: rx.Var[int | float] = field(
+        doc="Vertical position of the woven strand (0 bottom, 1 top). Default: 0.5."
+    )
+    fan_mode: rx.Var[str] = field(
+        doc="Where the threads pinch together: center, left, or right. Default: 'center'."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Brightness of the glow radiating from each thread. Default: 0.02."
+    )
+    falloff: rx.Var[int | float] = field(
+        doc="How tightly the glow hugs the thread (higher = thinner filament). Default: 0.6."
+    )
+    thickness: rx.Var[int | float] = field(
+        doc="Core thickness of each thread. Default: 1.1."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness multiplier. Default: 0.6."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect (0\u20131). Default: 1.0."
+    )
+    mirror: rx.Var[bool] = field(
+        doc="Mirror the wave phase across the pinch point for a woven look. Default: true."
+    )
+    shimmer: rx.Var[bool] = field(
+        doc="Add a subtle per-thread phase shimmer. Default: false."
+    )
+    grain: rx.Var[bool] = field(
+        doc="Overlay a whisper-subtle animated film grain on the threads. Default: true."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Amplitude of the grain overlay. 0 disables it entirely. Default: 0.05."
+    )
+    mouse_interaction: rx.Var[bool] = field(
+        doc="Let the pinch point drift toward the cursor with a soft brightness bloom. Default: true."
+    )
+    mouse_strength: rx.Var[int | float] = field(
+        doc="Strength of the cursor influence on the pinch point and bloom. Default: 0.3."
+    )
+    background_color: rx.Var[str] = field(
+        doc="The `backgroundColor` prop. Default: '#FFFFFF'."
+    )
+    light_mode: rx.Var[bool] = field(
+        doc="The `lightMode` prop. Default: false."
+    )
+
+
+acid_squares = AcidSquares.create
+aero_shards = AeroShards.create
+aurora = Aurora.create
+balatro = Balatro.create
+ballpit = Ballpit.create
+beams = Beams.create
+crt_warp = CRTWarp.create
+color_bends = ColorBends.create
+dark_veil = DarkVeil.create
+dither = Dither.create
+dot_field = DotField.create
+dot_grid = DotGrid.create
+evil_eye = EvilEye.create
+faulty_terminal = FaultyTerminal.create
+ferrofluid = Ferrofluid.create
+floating_lines = FloatingLines.create
+galaxy = Galaxy.create
+ghost_fibers = GhostFibers.create
+gradient_blinds = GradientBlinds.create
+gradient_waves = GradientWaves.create
+grainient = Grainient.create
+grid_distortion = GridDistortion.create
+grid_motion = GridMotion.create
+grid_scan = GridScan.create
+hyperspeed = Hyperspeed.create
+iridescence = Iridescence.create
+letter_glitch = LetterGlitch.create
+light_pillar = LightPillar.create
+light_rays = LightRays.create
+light_tunnel = LightTunnel.create
+lightfall = Lightfall.create
+lightning = Lightning.create
+line_waves = LineWaves.create
+liquid_chrome = LiquidChrome.create
+liquid_ether = LiquidEther.create
+molten_metal = MoltenMetal.create
+orb = Orb.create
+particles = Particles.create
+pixel_blast = PixelBlast.create
+pixel_snow = PixelSnow.create
+plasma = Plasma.create
+plasma_wave = PlasmaWave.create
+prism = Prism.create
+prismatic_burst = PrismaticBurst.create
+radar = Radar.create
+ripple_grid = RippleGrid.create
+scanner = Scanner.create
+shape_grid = ShapeGrid.create
+shape_waves = ShapeWaves.create
+side_rays = SideRays.create
+silk = Silk.create
+sliced_waves = SlicedWaves.create
+soft_aurora = SoftAurora.create
+threads = Threads.create
+topography = Topography.create
+waves = Waves.create
+web_threads = WebThreads.create