reflex-reactbits 0.1.1__py3-none-any.whl

reflex_reactbits/animations.py

@@ -0,0 +1,2128 @@
+"""React Bits - Animations.
+
+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.event import no_args_event_spec
+from reflex_base.components.component import field
+
+from .base import ReactBitsComponent, safe
+
+__all__ = ['AnimatedContent', 'Antigravity', 'BlobCursor', 'ClickSpark', 'Crosshair', 'Cubes', 'CursorGrid', 'ElasticMesh', 'ElectricBorder', 'FadeContent', 'GhostCursor', 'GlareHover', 'GlowCursor', 'GradualBlur', 'HalftoneReveal', 'ImageTrail', 'LaserFlow', 'LogoLoop', 'MagicRings', 'Magnet', 'MagnetLines', 'MetaBalls', 'MetallicPaint', 'Noise', 'OrbitImages', 'PixelSwap', 'PixelTrail', 'PixelTransition', 'Ribbons', 'RippleDistortion', 'ScrollExpand', 'ShapeBlur', 'SplashCursor', 'StarBorder', 'StickerPeel', 'Strands', 'SwarmCursor', 'TargetCursor', 'animated_content', 'antigravity', 'blob_cursor', 'click_spark', 'crosshair', 'cubes', 'cursor_grid', 'elastic_mesh', 'electric_border', 'fade_content', 'ghost_cursor', 'glare_hover', 'glow_cursor', 'gradual_blur', 'halftone_reveal', 'image_trail', 'laser_flow', 'logo_loop', 'magic_rings', 'magnet', 'magnet_lines', 'meta_balls', 'metallic_paint', 'noise', 'orbit_images', 'pixel_swap', 'pixel_trail', 'pixel_transition', 'ribbons', 'ripple_distortion', 'scroll_expand', 'shape_blur', 'splash_cursor', 'star_border', 'sticker_peel', 'strands', 'swarm_cursor', 'target_cursor']
+
+
+class AnimatedContent(ReactBitsComponent):
+    """Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options.
+
+    Docs: https://reactbits.dev/animations/animated-content
+    """
+
+    tag = "AnimatedContent"
+    alias = "ReactBitsAnimatedContent"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "AnimatedContent"
+    _rb_files = ('AnimatedContent.jsx',)
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    container: rx.Var[Any] = field(
+        doc="The scroll container to use for ScrollTrigger. Can be a selector string or an HTMLElement. Defaults to main container. Uses auto-detection (for snap-main-container id) if not provided."
+    )
+    distance: rx.Var[int | float] = field(
+        doc="Distance (in pixels) the component moves during animation. Default: 100."
+    )
+    direction: rx.Var[str] = field(
+        doc="Animation direction. Can be \"vertical\" or \"horizontal\". Default: 'vertical'."
+    )
+    reverse: rx.Var[bool] = field(
+        doc="Whether the animation moves in the reverse direction. Default: false."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Duration of the animation in seconds. Default: 0.8."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing function for the animation. Default: 'power3.out'."
+    )
+    initial_opacity: rx.Var[int | float] = field(
+        doc="Initial opacity before animation begins. Default: 0."
+    )
+    animate_opacity: rx.Var[bool] = field(
+        doc="Whether to animate opacity during transition. Default: true."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Initial scale of the component. Default: 1."
+    )
+    threshold: rx.Var[int | float] = field(
+        doc="Intersection threshold to trigger animation (0-1). Default: 0.1."
+    )
+    delay: rx.Var[int | float] = field(
+        doc="Delay before animation starts (in seconds). Default: 0."
+    )
+    disappear_after: rx.Var[int | float] = field(
+        doc="The `disappearAfter` prop. Default: 0."
+    )
+    disappear_duration: rx.Var[int | float] = field(
+        doc="Duration of the disappearance animation in seconds. Default: 0.5."
+    )
+    disappear_ease: rx.Var[str] = field(
+        doc="GSAP easing function for the disappearance animation. Default: 'power3.in'."
+    )
+    on_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function called when animation completes."
+    )
+    on_disappearance_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function called when disappearance animation completes."
+    )
+
+
+class Antigravity(ReactBitsComponent):
+    """3D antigravity particle field that repels from the cursor with smooth motion.
+
+    Docs: https://reactbits.dev/animations/antigravity
+    """
+
+    tag = "Antigravity"
+    alias = "ReactBitsAntigravity"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "Antigravity"
+    _rb_files = ('Antigravity.jsx',)
+    lib_dependencies: list[str] = ['@react-three/fiber@9.3.0', 'three@0.180.0']
+
+    count: rx.Var[int | float] = field(
+        doc="Number of particles. Default: 300."
+    )
+    magnet_radius: rx.Var[int | float] = field(
+        doc="Radius of the magnetic field. Default: 10."
+    )
+    ring_radius: rx.Var[int | float] = field(
+        doc="Radius of the formed ring. Default: 10."
+    )
+    wave_speed: rx.Var[int | float] = field(
+        doc="Speed of the wave animation. Default: 0.4."
+    )
+    wave_amplitude: rx.Var[int | float] = field(
+        doc="Intensity of the wave (0 for perfect circle). Default: 1."
+    )
+    particle_size: rx.Var[int | float] = field(
+        doc="Scale multiplier for particles. Default: 2."
+    )
+    lerp_speed: rx.Var[int | float] = field(
+        doc="How fast particles move to the ring. Default: 0.1."
+    )
+    color: rx.Var[str] = field(
+        doc="Color of the particles. Default: '#FF9FFC'."
+    )
+    auto_animate: rx.Var[bool] = field(
+        doc="Automatically animate when idle. Default: false."
+    )
+    particle_variance: rx.Var[int | float] = field(
+        doc="Variance in particle size (0-1). Default: 1."
+    )
+    rotation_speed: rx.Var[int | float] = field(
+        doc="Rotation speed of the ring. Default: 0."
+    )
+    depth_factor: rx.Var[int | float] = field(
+        doc="Z-axis depth multiplier. Default: 1."
+    )
+    pulse_speed: rx.Var[int | float] = field(
+        doc="Speed of particle size pulsation. Default: 3."
+    )
+    particle_shape: rx.Var[str] = field(
+        doc="Shape of the particles. Default: 'capsule'."
+    )
+    field_strength: rx.Var[int | float] = field(
+        doc="Tightness of the ring formation. Default: 10."
+    )
+
+
+class BlobCursor(ReactBitsComponent):
+    """Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing.
+
+    Docs: https://reactbits.dev/animations/blob-cursor
+    """
+
+    tag = "BlobCursor"
+    alias = "ReactBitsBlobCursor"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "BlobCursor"
+    _rb_files = ('BlobCursor.css', 'BlobCursor.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    blob_type: rx.Var[Literal["circle", "square"]] = field(
+        doc="Shape of the blobs. Default: 'circle'."
+    )
+    fill_color: rx.Var[str] = field(
+        doc="Background color of each blob. Default: '#5227FF'."
+    )
+    trail_count: rx.Var[int | float] = field(
+        doc="How many trailing blobs. Default: 3."
+    )
+    sizes: rx.Var[list[int | float]] = field(
+        doc="Sizes (px) of each blob. Length must be \u2265 trailCount. Default: [60, 125, 75]."
+    )
+    inner_sizes: rx.Var[list[int | float]] = field(
+        doc="Sizes (px) of inner dots. Length must be \u2265 trailCount. Default: [20, 35, 25]."
+    )
+    inner_color: rx.Var[str] = field(
+        doc="Background color of the inner dot. Default: 'rgba(255,255,255,0.8)'."
+    )
+    opacities: rx.Var[list[int | float]] = field(
+        doc="Opacity of each blob. Length \u2265 trailCount. Default: [0.6, 0.6, 0.6]."
+    )
+    shadow_color: rx.Var[str] = field(
+        doc="Box-shadow color. Default: 'rgba(0,0,0,0.75)'."
+    )
+    shadow_blur: rx.Var[int | float] = field(
+        doc="Box-shadow blur radius (px). Default: 5."
+    )
+    shadow_offset_x: rx.Var[int | float] = field(
+        doc="Box-shadow X offset (px). Default: 10."
+    )
+    shadow_offset_y: rx.Var[int | float] = field(
+        doc="Box-shadow Y offset (px). Default: 10."
+    )
+    filter_id: rx.Var[str] = field(
+        doc="Optional custom filter ID (for multiple instances). Default: 'blob'."
+    )
+    filter_std_deviation: rx.Var[int | float] = field(
+        doc="feGaussianBlur stdDeviation for SVG filter. Default: 30."
+    )
+    filter_color_matrix_values: rx.Var[str] = field(
+        doc="feColorMatrix values for SVG filter. Default: '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10'."
+    )
+    use_filter: rx.Var[bool] = field(
+        doc="Enable the SVG filter. Default: true."
+    )
+    fast_duration: rx.Var[int | float] = field(
+        doc="GSAP duration for the lead blob. Default: 0.1."
+    )
+    slow_duration: rx.Var[int | float] = field(
+        doc="GSAP duration for the following blobs. Default: 0.5."
+    )
+    fast_ease: rx.Var[str] = field(
+        doc="GSAP ease for the lead blob. Default: 'power3.out'."
+    )
+    slow_ease: rx.Var[str] = field(
+        doc="GSAP ease for the following blobs. Default: 'power1.out'."
+    )
+    z_index: rx.Var[int | float] = field(
+        doc="CSS z-index of the whole component. Default: 100."
+    )
+
+
+class ClickSpark(ReactBitsComponent):
+    """Creates particle spark bursts at click position.
+
+    Docs: https://reactbits.dev/animations/click-spark
+    """
+
+    tag = "ClickSpark"
+    alias = "ReactBitsClickSpark"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "ClickSpark"
+    _rb_files = ('ClickSpark.jsx',)
+
+    spark_color: rx.Var[str] = field(
+        doc="Color of each spark line. Default: '#fff'."
+    )
+    spark_size: rx.Var[int | float] = field(
+        doc="Initial length of each spark line. Default: 10."
+    )
+    spark_radius: rx.Var[int | float] = field(
+        doc="How far sparks travel from the click center. Default: 15."
+    )
+    spark_count: rx.Var[int | float] = field(
+        doc="Number of spark lines that appear on each click. Default: 8."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Animation duration in milliseconds. Default: 400."
+    )
+    easing: rx.Var[str] = field(
+        doc="Easing function used for the spark animation. Default: 'ease-out'."
+    )
+    extra_scale: rx.Var[int | float] = field(
+        doc="Additional multiplier for spark distance. Default: 1.0."
+    )
+
+
+class Crosshair(ReactBitsComponent):
+    """Custom crosshair cursor with tracking, and link hover effects.
+
+    Docs: https://reactbits.dev/animations/crosshair
+    """
+
+    tag = "Crosshair"
+    alias = "ReactBitsCrosshair"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "Crosshair"
+    _rb_files = ('Crosshair.jsx',)
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    color: rx.Var[str] = field(
+        doc="Color of the crosshair lines. Default: 'white'."
+    )
+    container_ref: rx.Var[Any] = field(
+        doc="Optional container ref to limit crosshair to specific element. If null, crosshair will be active on entire viewport."
+    )
+
+
+class Cubes(ReactBitsComponent):
+    """3D rotating cube cluster. Supports auto-rotation or hover interaction.
+
+    Docs: https://reactbits.dev/animations/cubes
+    """
+
+    tag = "Cubes"
+    alias = "ReactBitsCubes"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "Cubes"
+    _rb_files = ('Cubes.css', 'Cubes.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    grid_size: rx.Var[int | float] = field(
+        doc="The size of the grid (number of cubes per row/column). Default: 10."
+    )
+    cube_size: rx.Var[int | float] = field(
+        doc="Fixed size of each cube in pixels. If not provided, cubes will be responsive."
+    )
+    max_angle: rx.Var[int | float] = field(
+        doc="Maximum rotation angle for the tilt effect in degrees. Default: 45."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Radius of the tilt effect (how many cubes around the cursor are affected). Default: 3."
+    )
+    easing: rx.Var[str] = field(
+        doc="GSAP easing function for the tilt animation. Default: 'power3.out'."
+    )
+    duration: rx.Var[dict[str, Any]] = field(
+        doc="Animation duration for enter and leave effects. Default: { enter: 0.3, leave: 0.6 }."
+    )
+    cell_gap: rx.Var[int | float | dict[str, Any]] = field(
+        doc="Gap between cubes. Can be a number or object with row/col properties."
+    )
+    border_style: rx.Var[str] = field(
+        doc="CSS border style for cube faces. Default: '1px solid #fff'."
+    )
+    face_color: rx.Var[str] = field(
+        doc="Background color for cube faces. Default: '#120F17'."
+    )
+    shadow: rx.Var[bool | str] = field(
+        doc="Shadow effect for cubes. Can be boolean or custom CSS shadow. Default: false."
+    )
+    auto_animate: rx.Var[bool] = field(
+        doc="Whether to automatically animate when user is idle. Default: true."
+    )
+    ripple_on_click: rx.Var[bool] = field(
+        doc="Whether to show ripple effect on click. Default: true."
+    )
+    ripple_color: rx.Var[str] = field(
+        doc="Color of the ripple effect. Default: '#fff'."
+    )
+    ripple_speed: rx.Var[int | float] = field(
+        doc="Speed multiplier for the ripple animation. Default: 2."
+    )
+
+
+class CursorGrid(ReactBitsComponent):
+    """Canvas grid whose cells light up around the cursor with configurable radius, falloff and click pulses.
+
+    Docs: https://reactbits.dev/animations/cursor-grid
+    """
+
+    tag = "CursorGrid"
+    alias = "ReactBitsCursorGrid"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "CursorGrid"
+    _rb_files = ('CursorGrid.css', 'CursorGrid.jsx')
+
+    cell_size: rx.Var[int | float] = field(
+        doc="Size of each grid cell in pixels. Default: 70."
+    )
+    color: rx.Var[str] = field(
+        doc="Color of the cell strokes, fills and pulses. Default: '#D946EF'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Radius in pixels around the cursor within which cells light up. Default: 140."
+    )
+    falloff: rx.Var[Literal["linear", "smooth", "sharp"]] = field(
+        doc="Curve mapping distance from the cursor to cell brightness. Default: 'smooth'."
+    )
+    hold_time: rx.Var[int | float] = field(
+        doc="How long in milliseconds a cell stays lit before it starts fading. Default: 400."
+    )
+    fade_duration: rx.Var[int | float] = field(
+        doc="How long in milliseconds a fully lit cell takes to fade out. Default: 800."
+    )
+    line_width: rx.Var[int | float] = field(
+        doc="Stroke width of the cell outlines. Default: 1.2."
+    )
+    max_opacity: rx.Var[int | float] = field(
+        doc="Peak opacity of a cell at the cursor position. Default: 1."
+    )
+    fill_opacity: rx.Var[int | float] = field(
+        doc="Translucent fill of lit cells; 0 disables the fill. Default: 0."
+    )
+    grid_opacity: rx.Var[int | float] = field(
+        doc="Opacity of a faint always-visible lattice; 0 hides it. Default: 0."
+    )
+    cell_radius: rx.Var[int | float] = field(
+        doc="Corner radius of the cells in pixels. Default: 0."
+    )
+    click_pulse: rx.Var[bool] = field(
+        doc="Emit an expanding ring of lit cells on click. Default: true."
+    )
+    pulse_speed: rx.Var[int | float] = field(
+        doc="Expansion speed of the click ring in pixels per second. Default: 600."
+    )
+
+
+class ElasticMesh(ReactBitsComponent):
+    """Spring-mesh surface that stretches under the pointer and settles back with damped physics.
+
+    Docs: https://reactbits.dev/animations/elastic-mesh
+    """
+
+    tag = "ElasticMesh"
+    alias = "ReactBitsElasticMesh"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "ElasticMesh"
+    _rb_files = ('ElasticMesh.css', 'ElasticMesh.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    image: rx.Var[str] = field(
+        doc="Optional image URL to warp. When empty, a color gradient surface is rendered instead."
+    )
+    color1: rx.Var[str] = field(
+        doc="Top color of the gradient surface. Default: '#5227FF'."
+    )
+    color2: rx.Var[str] = field(
+        doc="Bottom color of the gradient surface. Default: '#B19EEF'."
+    )
+    highlight: rx.Var[str] = field(
+        doc="Specular highlight color used by the shading. Default: '#ffffff'."
+    )
+    show_grid: rx.Var[bool] = field(
+        doc="Draw the mesh lattice over the surface. Default: true."
+    )
+    grid_density: rx.Var[int | float] = field(
+        doc="Number of lattice cells across the sheet. Default: 20."
+    )
+    grid_opacity: rx.Var[int | float] = field(
+        doc="Opacity of the lattice lines. Default: 0.28."
+    )
+    grid_color: rx.Var[str] = field(
+        doc="Color of the lattice lines. Default: '#ffffff'."
+    )
+    border_radius: rx.Var[int | float] = field(
+        doc="Corner radius of the sheet in pixels. Default: 25."
+    )
+    stiffness: rx.Var[int | float] = field(
+        doc="How hard the mesh springs back to flat. Higher settles faster. Default: 0.05."
+    )
+    damping: rx.Var[int | float] = field(
+        doc="How quickly wobbles die out. Higher damping settles faster with fewer oscillations. Default: 0.2."
+    )
+    grab_radius: rx.Var[int | float] = field(
+        doc="How much of the sheet the pointer grabs (fraction of the surface). Default: 0.6."
+    )
+    pull: rx.Var[int | float] = field(
+        doc="How far the surface stretches toward the pointer. Default: 0.4."
+    )
+    wobble: rx.Var[int | float] = field(
+        doc="Neighbor coupling \u2014 higher spreads the deformation into more visible ripples. Default: 5."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Perspective tilt of the sheet in degrees. Default: 14."
+    )
+    shading: rx.Var[int | float] = field(
+        doc="Fake lighting strength that gives the warp depth. Keep above 0 to read the deformation. Default: 0.5."
+    )
+    resolution: rx.Var[int | float] = field(
+        doc="Mesh grid density (nodes per side). Default: 25."
+    )
+    interaction: rx.Var[Literal["hover", "drag"]] = field(
+        doc="Whether the mesh reacts to hover or only while dragging. Default: 'hover'."
+    )
+    enabled: rx.Var[bool] = field(
+        doc="Enables or disables the pointer interaction. Default: true."
+    )
+
+
+class ElectricBorder(ReactBitsComponent):
+    """Jittery electric energy border with animated arcs, glow and adjustable intensity.
+
+    Docs: https://reactbits.dev/animations/electric-border
+    """
+
+    tag = "ElectricBorder"
+    alias = "ReactBitsElectricBorder"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "ElectricBorder"
+    _rb_files = ('ElectricBorder.css', 'ElectricBorder.jsx')
+
+    color: rx.Var[str] = field(
+        doc="Stroke/glow color. Any CSS color (hex, rgb, hsl). Default: '#5227FF'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier (higher = faster). Default: 1."
+    )
+    chaos: rx.Var[int | float] = field(
+        doc="Distortion intensity (0 = no distortion, higher = more chaotic). Default: 0.12."
+    )
+    border_radius: rx.Var[int | float] = field(
+        doc="Border radius in pixels for the electric border path. Default: 24."
+    )
+
+
+class FadeContent(ReactBitsComponent):
+    """Simple directional fade / slide entrance / exit wrapper with threshold-based activation.
+
+    Docs: https://reactbits.dev/animations/fade-content
+    """
+
+    tag = "FadeContent"
+    alias = "ReactBitsFadeContent"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "FadeContent"
+    _rb_files = ('FadeContent.jsx',)
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    container: rx.Var[Any] = field(
+        doc="The `container` prop."
+    )
+    blur: rx.Var[bool] = field(
+        doc="Enables a blur effect during the animation. Default: false."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Specifies the duration of the fade animation in seconds. Default: 1000."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing function for the fade animation. Default: 'power2.out'."
+    )
+    delay: rx.Var[int | float] = field(
+        doc="Adds a delay in seconds before triggering the animation. Default: 0."
+    )
+    threshold: rx.Var[int | float] = field(
+        doc="IntersectionObserver threshold for triggering the fade animation. Default: 0.1."
+    )
+    initial_opacity: rx.Var[int | float] = field(
+        doc="The starting opacity of the component before it enters the viewport. Default: 0."
+    )
+    disappear_after: rx.Var[int | float] = field(
+        doc="Time in seconds after which the content will start to disappear. Disables if set to 0. Default: 0."
+    )
+    disappear_duration: rx.Var[int | float] = field(
+        doc="Duration of the disappearance animation in seconds. Default: 0.5."
+    )
+    disappear_ease: rx.Var[str] = field(
+        doc="GSAP easing function for the disappearance animation. Default: 'power2.in'."
+    )
+    on_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Fired by the component's onComplete callback."
+    )
+    on_disappearance_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Fired by the component's onDisappearanceComplete callback."
+    )
+
+
+class GhostCursor(ReactBitsComponent):
+    """Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect.
+
+    Docs: https://reactbits.dev/animations/ghost-cursor
+    """
+
+    tag = "GhostCursor"
+    alias = "ReactBitsGhostCursor"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "GhostCursor"
+    _rb_files = ('GhostCursor.css', 'GhostCursor.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    trail_length: rx.Var[int | float] = field(
+        doc="Number of points stored for the cursor trail (longer = longer smear). Default: 50."
+    )
+    inertia: rx.Var[int | float] = field(
+        doc="Velocity retention when the pointer stops. Higher values make the cursor glide longer. Default: 0.5."
+    )
+    grain_intensity: rx.Var[int | float] = field(
+        doc="Strength of the film grain post-processing pass. Default: 0.05."
+    )
+    bloom_strength: rx.Var[int | float] = field(
+        doc="UnrealBloom effect strength. Default: 0.1."
+    )
+    bloom_radius: rx.Var[int | float] = field(
+        doc="UnrealBloom radius controlling spread of glow. Default: 1.0."
+    )
+    bloom_threshold: rx.Var[int | float] = field(
+        doc="UnrealBloom threshold; lower includes more pixels in bloom. Default: 0.025."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Final brightness multiplier applied to the effect color. Default: 1."
+    )
+    color: rx.Var[str] = field(
+        doc="Base color of the ghost cursor effect. Default: '#B497CF'."
+    )
+    mix_blend_mode: rx.Var[str] = field(
+        doc="Blend mode used when compositing with page content. Default: 'screen'."
+    )
+    edge_intensity: rx.Var[int | float] = field(
+        doc="Darkening near edges of the canvas. 0 = none, 1 = strongest. Default: 0."
+    )
+    max_device_pixel_ratio: rx.Var[int | float] = field(
+        doc="Upper cap for devicePixelRatio to control render cost on high-DPR displays. Default: 0.5."
+    )
+    target_pixels: rx.Var[int | float] = field(
+        doc="Pixel budget. Resolution is dynamically scaled to keep total pixel count under this budget. Default: auto (~1.3e6 desktop, ~0.9e6 touch)."
+    )
+    fade_delay_ms: rx.Var[int | float] = field(
+        doc="Idle delay before the trail starts to fade after pointer leaves/stops. Default: auto (1000 desktop, 500 touch)."
+    )
+    fade_duration_ms: rx.Var[int | float] = field(
+        doc="Duration of the trail fade-out once the delay has elapsed. Default: auto (1500 desktop, 1000 touch)."
+    )
+    z_index: rx.Var[int | float] = field(
+        doc="z-index applied to the canvas for layering above/below content. Default: 10."
+    )
+
+
+class GlareHover(ReactBitsComponent):
+    """Adds a realistic moving glare highlight on hover over any element.
+
+    Docs: https://reactbits.dev/animations/glare-hover
+    """
+
+    tag = "GlareHover"
+    alias = "ReactBitsGlareHover"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "GlareHover"
+    _rb_files = ('GlareHover.css', 'GlareHover.jsx')
+
+    width: rx.Var[str] = field(
+        doc="The width of the hover element. Default: '500px'."
+    )
+    height: rx.Var[str] = field(
+        doc="The height of the hover element. Default: '500px'."
+    )
+    background: rx.Var[str] = field(
+        doc="The background color of the element. Default: '#000'."
+    )
+    border_radius: rx.Var[str] = field(
+        doc="The border radius of the element. Default: '10px'."
+    )
+    border_color: rx.Var[str] = field(
+        doc="The border color of the element. Default: '#333'."
+    )
+    glare_color: rx.Var[str] = field(
+        doc="The color of the glare effect (hex format). Default: '#ffffff'."
+    )
+    glare_opacity: rx.Var[int | float] = field(
+        doc="The opacity of the glare effect (0-1). Default: 0.5."
+    )
+    glare_angle: rx.Var[int | float] = field(
+        doc="The angle of the glare effect in degrees. Default: -45."
+    )
+    glare_size: rx.Var[int | float] = field(
+        doc="The size of the glare effect as a percentage (e.g. 250 = 250%). Default: 250."
+    )
+    transition_duration: rx.Var[int | float] = field(
+        doc="The duration of the transition in milliseconds. Default: 650."
+    )
+    play_once: rx.Var[bool] = field(
+        doc="If true, the glare only animates on hover and doesn't return on mouse leave. Default: false."
+    )
+
+
+class GlowCursor(ReactBitsComponent):
+    """Shader-powered light trail that smoothly follows the pointer with customizable glow, color, taper and pulse.
+
+    Docs: https://reactbits.dev/animations/glow-cursor
+    """
+
+    tag = "GlowCursor"
+    alias = "ReactBitsGlowCursor"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "GlowCursor"
+    _rb_files = ('GlowCursor.css', 'GlowCursor.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color: rx.Var[str] = field(
+        doc="Color at the bright head of the trail. Default: '#67E8F9'."
+    )
+    secondary_color: rx.Var[str] = field(
+        doc="Color blended into the end of the trail. Default: '#A78BFA'."
+    )
+    trail_length: rx.Var[int | float] = field(
+        doc="Number of smoothed points used to build the trail, from 2 to 64. Default: 40."
+    )
+    trail_width: rx.Var[int | float] = field(
+        doc="Width of the luminous trail core in pixels. Default: 8."
+    )
+    trail_taper: rx.Var[int | float] = field(
+        doc="How strongly the trail narrows and dims toward its tail. Default: 0.8."
+    )
+    follow_speed: rx.Var[int | float] = field(
+        doc="How quickly the glowing head catches the pointer. Default: 0.16."
+    )
+    glow_intensity: rx.Var[int | float] = field(
+        doc="Strength of the soft inverse-square halo around the trail. Default: 1.9."
+    )
+    glow_spread: rx.Var[int | float] = field(
+        doc="Distance the outer glow spreads from the trail core. Default: 1.2."
+    )
+    hotspot: rx.Var[int | float] = field(
+        doc="Amount of white-hot color added to the brightest part of the trail. Default: 0.65."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Final luminance multiplier for the shader. Default: 1.25."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall trail opacity. Default: 1."
+    )
+    pulse_speed: rx.Var[int | float] = field(
+        doc="Speed of the energy pulse travelling through the trail. Set to 0 to stop it. Default: 1.1."
+    )
+    noise_strength: rx.Var[int | float] = field(
+        doc="Amount of fine animated texture in the glow. Default: 0.035."
+    )
+    idle_fade: rx.Var[bool] = field(
+        doc="Fade the effect when the pointer stops or leaves the container. Default: true."
+    )
+    idle_timeout: rx.Var[int | float] = field(
+        doc="Idle time in milliseconds before fading begins. Default: 700."
+    )
+    fade_duration: rx.Var[int | float] = field(
+        doc="Approximate duration of the idle fade in milliseconds. Default: 900."
+    )
+    blend_mode: rx.Var[Literal["normal", "screen", "plus-lighter"]] = field(
+        doc="CSS blend mode used to composite the canvas over its content. Default: 'screen'."
+    )
+    max_device_pixel_ratio: rx.Var[int | float] = field(
+        doc="Render-resolution cap for balancing sharpness and GPU cost. Default: 1.5."
+    )
+    enabled: rx.Var[bool] = field(
+        doc="Enable or fade out the cursor effect. Default: true."
+    )
+
+
+class GradualBlur(ReactBitsComponent):
+    """Progressively un-blurs content based on scroll or trigger creating a cinematic reveal.
+
+    Docs: https://reactbits.dev/animations/gradual-blur
+    """
+
+    tag = "GradualBlur"
+    alias = "ReactBitsGradualBlur"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "GradualBlur"
+    _rb_files = ('GradualBlur.css', 'GradualBlur.jsx')
+
+    position: rx.Var[Literal["top", "bottom", "left", "right"]] = field(
+        doc="Edge to attach the blur overlay. Default: 'bottom'."
+    )
+    strength: rx.Var[int | float] = field(
+        doc="Base blur strength multiplier (affects each layer). Default: 2."
+    )
+    height: rx.Var[str] = field(
+        doc="Overlay height (for top / bottom positions). Default: '6rem'."
+    )
+    div_count: rx.Var[int | float] = field(
+        doc="Number of stacked blur layers (higher = smoother gradient). Default: 5."
+    )
+    exponential: rx.Var[bool] = field(
+        doc="Use exponential progression for stronger end blur. Default: false."
+    )
+    z_index: rx.Var[int | float] = field(
+        doc="Base z-index (page target adds +100). Default: 1000."
+    )
+    animated: rx.Var[Literal["boolean", "scroll"]] = field(
+        doc="Fade in (true) or reveal on scroll (\"scroll\"). Default: false."
+    )
+    duration: rx.Var[str] = field(
+        doc="Animation duration (when animated). Default: '0.3s'."
+    )
+    easing: rx.Var[str] = field(
+        doc="Animation easing (opacity / backdrop-filter). Default: 'ease-out'."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Opacity applied to each blur layer. Default: 1."
+    )
+    curve: rx.Var[Literal["linear", "bezier", "ease-in"]] = field(
+        doc="Distribution curve applied to layer progression. Default: 'linear'."
+    )
+    responsive: rx.Var[bool] = field(
+        doc="Enable internal responsive recalculation (experimental). Default: false."
+    )
+    target: rx.Var[Literal["parent", "page"]] = field(
+        doc="Position relative to parent container or the entire page (fixed). Default: 'parent'."
+    )
+    width: rx.Var[str] = field(
+        doc="Custom width (optional). Defaults to 100% for vertical positions or matches height for horizontal positions. Default: \u2014."
+    )
+    hover_intensity: rx.Var[int | float] = field(
+        doc="Multiplier applied to strength while hovered. Default: \u2014."
+    )
+    preset: rx.Var[Literal["top", "bottom", "left", "right"]] = field(
+        doc="Apply a predefined configuration bundle. Default: \u2014."
+    )
+    on_animation_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback fired after animated reveal completes."
+    )
+
+
+class HalftoneReveal(ReactBitsComponent):
+    """Print-style halftone dot matrix that resolves into sharp content around the cursor.
+
+    Docs: https://reactbits.dev/animations/halftone-reveal
+    """
+
+    tag = "HalftoneReveal"
+    alias = "ReactBitsHalftoneReveal"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "HalftoneReveal"
+    _rb_files = ('HalftoneReveal.css', 'HalftoneReveal.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    src: rx.Var[str] = field(
+        doc="Image URL rendered as a halftone print. Default: DEFAULT_SRC."
+    )
+    ink_color: rx.Var[str] = field(
+        doc="Colour of the printed dots (hex). Default: '#141414'."
+    )
+    paper_color: rx.Var[str] = field(
+        doc="Colour of the paper behind the ink (hex). Default: '#fff7e6'."
+    )
+    mode: rx.Var[Literal["mono", "duotone", "color"]] = field(
+        doc="Screen model: single ink, two-ink riso, or a CMYK rosette. Default: 'mono'."
+    )
+    dot_size: rx.Var[int | float] = field(
+        doc="Overall scale of each ink dot. Default: 1."
+    )
+    dot_density: rx.Var[int | float] = field(
+        doc="Number of dot cells across the frame. Default: 71."
+    )
+    angle: rx.Var[int | float] = field(
+        doc="Rotation of the halftone screen, in degrees. Default: 45."
+    )
+    shape: rx.Var[Literal["circle", "square", "diamond", "line"]] = field(
+        doc="Shape of each printed dot. Default: 'circle'."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="Tonal contrast applied before screening. Default: 1.15."
+    )
+    invert: rx.Var[bool] = field(
+        doc="Invert the tones (negative print). Default: false."
+    )
+    reveal_radius: rx.Var[int | float] = field(
+        doc="Radius of the sharp loupe around the cursor. Default: 0.4."
+    )
+    edge: rx.Var[int | float] = field(
+        doc="Hardness of the loupe boundary (0 soft, 1 hard). Default: 0.8."
+    )
+    follow: rx.Var[int | float] = field(
+        doc="Loupe follow time in seconds (lower = snappier). Default: 0.37."
+    )
+    idle_reveal: rx.Var[int | float] = field(
+        doc="Baseline sharpness applied everywhere with no cursor. Default: 0."
+    )
+    trigger: rx.Var[Literal["hover", "always", "off"]] = field(
+        doc="When the loupe is active. Default: 'hover'."
+    )
+    border_radius: rx.Var[str] = field(
+        doc="Corner radius of the frame. Default: '16px'."
+    )
+
+
+class ImageTrail(ReactBitsComponent):
+    """Cursor-based image trail with several built-in variants.
+
+    Docs: https://reactbits.dev/animations/image-trail
+    """
+
+    tag = "ImageTrail"
+    alias = "ReactBitsImageTrail"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "ImageTrail"
+    _rb_files = ('ImageTrail.css', 'ImageTrail.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    items: rx.Var[list[str]] = field(
+        doc="An array of image URLs which will be animated in the trail. Default: []."
+    )
+    variant: rx.Var[int | float] = field(
+        doc="A number from 1 to 8 - all different animation styles. Default: 1."
+    )
+
+
+class LaserFlow(ReactBitsComponent):
+    """Dynamic laser light that flows onto a surface, customizable effect.
+
+    Docs: https://reactbits.dev/animations/laser-flow
+    """
+
+    tag = "LaserFlow"
+    alias = "ReactBitsLaserFlow"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "LaserFlow"
+    _rb_files = ('LaserFlow.css', 'LaserFlow.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    wisp_density: rx.Var[int | float] = field(
+        doc="Density of micro-streak wisps. Default: 1."
+    )
+    dpr: rx.Var[int | float] = field(
+        doc="Device pixel ratio override (defaults to window.devicePixelRatio). Default: auto."
+    )
+    mouse_smooth_time: rx.Var[int | float] = field(
+        doc="Pointer smoothing time (seconds). Default: 0.0."
+    )
+    mouse_tilt_strength: rx.Var[int | float] = field(
+        doc="How much mouse x tilts the fog volume. Default: 0.01."
+    )
+    horizontal_beam_offset: rx.Var[int | float] = field(
+        doc="Horizontal offset of the beam (0\u20131 of canvas width). Default: 0.1."
+    )
+    vertical_beam_offset: rx.Var[int | float] = field(
+        doc="Vertical offset of the beam (0\u20131 of canvas height). Default: 0.0."
+    )
+    flow_speed: rx.Var[int | float] = field(
+        doc="Speed of the beam\u2019s flow modulation. Default: 0.35."
+    )
+    vertical_sizing: rx.Var[int | float] = field(
+        doc="Vertical sizing factor of the beam footprint. Default: 2.0."
+    )
+    horizontal_sizing: rx.Var[int | float] = field(
+        doc="Horizontal sizing factor of the beam footprint. Default: 0.5."
+    )
+    fog_intensity: rx.Var[int | float] = field(
+        doc="Overall volumetric fog intensity. Default: 0.45."
+    )
+    fog_scale: rx.Var[int | float] = field(
+        doc="Spatial scale for the fog noise. Default: 0.3."
+    )
+    wisp_speed: rx.Var[int | float] = field(
+        doc="Speed of wisp motion. Default: 15.0."
+    )
+    wisp_intensity: rx.Var[int | float] = field(
+        doc="Brightness of wisps. Default: 5.0."
+    )
+    flow_strength: rx.Var[int | float] = field(
+        doc="Strength of the beam\u2019s flow modulation. Default: 0.25."
+    )
+    decay: rx.Var[int | float] = field(
+        doc="Beam decay shaping for sampling envelope. Default: 1.1."
+    )
+    falloff_start: rx.Var[int | float] = field(
+        doc="Falloff start radius used in inverse-square blending. Default: 1.2."
+    )
+    fog_fall_speed: rx.Var[int | float] = field(
+        doc="Drift speed for the fog field. Default: 0.6."
+    )
+    color: rx.Var[str] = field(
+        doc="Beam color (hex). Default: '#FF79C6'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Canvas background color used for theme-aware compositing. Default: '#000000'."
+    )
+
+
+class LogoLoop(ReactBitsComponent):
+    """Continuously looping marquee of brand or tech logos with seamless repeat and hover pause.
+
+    Docs: https://reactbits.dev/animations/logo-loop
+    """
+
+    tag = "LogoLoop"
+    alias = "ReactBitsLogoLoop"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "LogoLoop"
+    _rb_files = ('LogoLoop.css', 'LogoLoop.jsx')
+
+    logos: rx.Var[list[Any]] = field(
+        doc="Array of logo items to display. Each item can be either a React node or an image src. Default: required."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed in pixels per second. Positive values move based on direction, negative values reverse direction. Default: 120."
+    )
+    direction: rx.Var[Literal["left", "right", "up", "down"]] = field(
+        doc="Direction of the logo animation loop. Supports horizontal (left/right) and vertical (up/down) scrolling. Default: 'left'."
+    )
+    width: rx.Var[int | float | str] = field(
+        doc="Width of the logo loop container. Default: '100%'."
+    )
+    logo_height: rx.Var[int | float] = field(
+        doc="Height of the logos in pixels. Default: 28."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Gap between logos in pixels. Default: 32."
+    )
+    pause_on_hover: rx.Var[Any] = field(
+        doc="The `pauseOnHover` prop."
+    )
+    hover_speed: rx.Var[int | float] = field(
+        doc="Speed when hovering over the component. Set to 0 to pause, or a lower value for deceleration effect. Default: 0."
+    )
+    fade_out: rx.Var[bool] = field(
+        doc="Whether to apply fade-out effect at the edges of the container. Default: false."
+    )
+    fade_out_color: rx.Var[str] = field(
+        doc="Color used for the fade-out effect. Only applies when fadeOut is true."
+    )
+    scale_on_hover: rx.Var[bool] = field(
+        doc="Whether to scale logos on hover. Default: false."
+    )
+    render_item: rx.Var[Any] = field(
+        doc="Custom render function for each logo item. Allows full control over item rendering for animations, tooltips, etc. Pass a JS function with rx.Var('(...) => ...')."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessibility label for the logo loop component. Default: 'Partner logos'."
+    )
+
+
+class MagicRings(ReactBitsComponent):
+    """Interactive magic rings effect with customizable parameters.
+
+    Docs: https://reactbits.dev/animations/magic-rings
+    """
+
+    tag = "MagicRings"
+    alias = "ReactBitsMagicRings"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "MagicRings"
+    _rb_files = ('MagicRings.css', 'MagicRings.jsx')
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    color: rx.Var[str] = field(
+        doc="Hex color for the rings. Default: '#fc42ff'."
+    )
+    color_two: rx.Var[str] = field(
+        doc="Second color \u2014 rings interpolate from color to colorTwo. Default: '#42fcff'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier. Default: 1."
+    )
+    ring_count: rx.Var[int | float] = field(
+        doc="Number of concentric rings to draw (1\u201310). Default: 6."
+    )
+    attenuation: rx.Var[int | float] = field(
+        doc="Glow falloff \u2014 higher values produce tighter glow. Default: 10."
+    )
+    line_thickness: rx.Var[int | float] = field(
+        doc="Thickness of each ring line. Default: 2."
+    )
+    base_radius: rx.Var[int | float] = field(
+        doc="Radius of the innermost ring (normalized). Default: 0.35."
+    )
+    radius_step: rx.Var[int | float] = field(
+        doc="Spacing between successive rings. Default: 0.1."
+    )
+    scale_rate: rx.Var[int | float] = field(
+        doc="How much rings expand over time. Default: 0.1."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect (0\u20131). Default: 1."
+    )
+    blur: rx.Var[int | float] = field(
+        doc="CSS blur in px \u2014 creates a bloom/glow effect. Default: 0."
+    )
+    noise_amount: rx.Var[int | float] = field(
+        doc="Film-grain noise intensity. Default: 0.1."
+    )
+    rotation: rx.Var[int | float] = field(
+        doc="Static rotation of the pattern in degrees. Default: 0."
+    )
+    ring_gap: rx.Var[int | float] = field(
+        doc="Exponential base for angular cutaway per ring. Default: 1.5."
+    )
+    fade_in: rx.Var[int | float] = field(
+        doc="Duration of ring fade-in within cycle. Default: 0.7."
+    )
+    fade_out: rx.Var[int | float] = field(
+        doc="Start time of ring fade-out within cycle. Default: 0.5."
+    )
+    follow_mouse: rx.Var[bool] = field(
+        doc="Rings shift toward the mouse cursor. Default: false."
+    )
+    mouse_influence: rx.Var[int | float] = field(
+        doc="Strength of mouse follow (when followMouse is true). Default: 0.2."
+    )
+    hover_scale: rx.Var[int | float] = field(
+        doc="Scale multiplier on hover. Default: 1.2."
+    )
+    parallax: rx.Var[int | float] = field(
+        doc="Per-ring depth offset based on mouse position. Default: 0.05."
+    )
+    click_burst: rx.Var[bool] = field(
+        doc="Click triggers a brightness flash and scale pulse. Default: false."
+    )
+    alpha_mode: rx.Var[Literal["luminance", "coverage"]] = field(
+        doc="Uses emissive luminance alpha on dark surfaces or geometry coverage alpha for dark colors on light surfaces. Default: 'luminance'."
+    )
+
+
+class Magnet(ReactBitsComponent):
+    """Elements magnetically ease toward the cursor then settle back with spring physics.
+
+    Docs: https://reactbits.dev/animations/magnet
+    """
+
+    tag = "Magnet"
+    alias = "ReactBitsMagnet"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "Magnet"
+    _rb_files = ('Magnet.jsx',)
+
+    padding: rx.Var[int | float] = field(
+        doc="Specifies the distance (in pixels) around the element that activates the magnet pull. Default: 100."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Disables the magnet effect when set to true. Default: false."
+    )
+    magnet_strength: rx.Var[int | float] = field(
+        doc="Controls the strength of the pull; higher values reduce movement, lower values increase it. Default: 2."
+    )
+    active_transition: rx.Var[str] = field(
+        doc="CSS transition applied to the element when the magnet is active. Default: 'transform 0.3s ease-out'."
+    )
+    inactive_transition: rx.Var[str] = field(
+        doc="CSS transition applied when the magnet is inactive (mouse out of range). Default: 'transform 0.5s ease-in-out'."
+    )
+    wrapper_class_name: rx.Var[str] = field(
+        doc="Optional CSS class name for the outermost wrapper element."
+    )
+    inner_class_name: rx.Var[str] = field(
+        doc="Optional CSS class name for the moving (inner) element."
+    )
+
+
+class MagnetLines(ReactBitsComponent):
+    """Animated field lines bend toward the cursor.
+
+    Docs: https://reactbits.dev/animations/magnet-lines
+    """
+
+    tag = "MagnetLines"
+    alias = "ReactBitsMagnetLines"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "MagnetLines"
+    _rb_files = ('MagnetLines.css', 'MagnetLines.jsx')
+
+    rows: rx.Var[int | float] = field(
+        doc="Number of grid rows. Default: 9."
+    )
+    columns: rx.Var[int | float] = field(
+        doc="Number of grid columns. Default: 9."
+    )
+    container_size: rx.Var[str] = field(
+        doc="Specifies the width and height of the entire grid container. Default: '80vmin'."
+    )
+    line_color: rx.Var[str] = field(
+        doc="Color for each line (the <span> elements). Default: '#efefef'."
+    )
+    line_width: rx.Var[str] = field(
+        doc="Specifies each line\u2019s thickness. Default: '1vmin'."
+    )
+    line_height: rx.Var[str] = field(
+        doc="Specifies each line\u2019s length. Default: '6vmin'."
+    )
+    base_angle: rx.Var[int | float] = field(
+        doc="Initial rotation angle (in degrees) before pointer movement. Default: -10."
+    )
+
+
+class MetaBalls(ReactBitsComponent):
+    """Liquid metaball blobs that merge and separate with smooth implicit surface animation.
+
+    Docs: https://reactbits.dev/animations/meta-balls
+    """
+
+    tag = "MetaBalls"
+    alias = "ReactBitsMetaBalls"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "MetaBalls"
+    _rb_files = ('MetaBalls.css', 'MetaBalls.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color: rx.Var[str] = field(
+        doc="The base color of the metaballs. Default: '#ffffff'."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Speed multiplier for the animation. Default: 0.3."
+    )
+    enable_mouse_interaction: rx.Var[bool] = field(
+        doc="Enables or disables the ball following the mouse. Default: true."
+    )
+    hover_smoothness: rx.Var[int | float] = field(
+        doc="Smoothness factor for the cursor ball when following the mouse. Default: 0.05."
+    )
+    animation_size: rx.Var[int | float] = field(
+        doc="The size of the world for the animation. Default: 30."
+    )
+    ball_count: rx.Var[int | float] = field(
+        doc="Number of metaballs rendered. Default: 15."
+    )
+    clump_factor: rx.Var[int | float] = field(
+        doc="Determines how close together the balls are rendered. Default: 1."
+    )
+    cursor_ball_size: rx.Var[int | float] = field(
+        doc="Size of the cursor-controlled ball. Default: 3."
+    )
+    cursor_ball_color: rx.Var[str] = field(
+        doc="Color of the cursor ball. Default: '#ffffff'."
+    )
+    enable_transparency: rx.Var[bool] = field(
+        doc="Enables or disables transparency for the container of the animation. Default: false."
+    )
+
+
+class MetallicPaint(ReactBitsComponent):
+    """Liquid metallic paint shader which can be applied to SVG elements.
+
+    Docs: https://reactbits.dev/animations/metallic-paint
+    """
+
+    tag = "MetallicPaint"
+    alias = "ReactBitsMetallicPaint"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "MetallicPaint"
+    _rb_files = ('MetallicPaint.css', 'MetallicPaint.jsx')
+
+    image_src: rx.Var[str] = field(
+        doc="URL or path to the image used for the metallic paint effect. The image is processed internally. Default: none (required)."
+    )
+    seed: rx.Var[int | float] = field(
+        doc="Random seed for pattern generation. Different values create different pattern variations. Default: 42."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Scale of the metallic pattern. Higher values create more repetitions. Default: 4."
+    )
+    refraction: rx.Var[int | float] = field(
+        doc="Amount of chromatic aberration (color separation). Creates the rainbow edge effect. Default: 0.01."
+    )
+    blur: rx.Var[int | float] = field(
+        doc="Blur amount for the pattern transitions. Higher values create softer gradients. Default: 0.015."
+    )
+    liquid: rx.Var[int | float] = field(
+        doc="Amount of liquid/wavy animation applied to the pattern. Default: 0.75."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed multiplier. Set to 0 to disable animation. Default: 0.3."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Overall brightness of the metallic effect. Values above 1 increase brightness. Default: 2."
+    )
+    contrast: rx.Var[int | float] = field(
+        doc="Color contrast of the effect. Higher values create more distinct light/dark areas. Default: 0.5."
+    )
+    angle: rx.Var[int | float] = field(
+        doc="Rotation angle of the pattern in degrees. Default: 0."
+    )
+    fresnel: rx.Var[int | float] = field(
+        doc="Fresnel effect intensity. Controls edge highlighting based on viewing angle. Default: 1."
+    )
+    light_color: rx.Var[str] = field(
+        doc="Hex color for the bright/highlight areas of the metallic effect. Default: '#ffffff'."
+    )
+    dark_color: rx.Var[str] = field(
+        doc="Hex color for the dark/shadow areas of the metallic effect. Default: '#000000'."
+    )
+    pattern_sharpness: rx.Var[int | float] = field(
+        doc="Controls the sharpness of metallic band transitions. Higher = sharper edges. Default: 1."
+    )
+    wave_amplitude: rx.Var[int | float] = field(
+        doc="Intensity of the wave distortion effect. Default: 1."
+    )
+    noise_scale: rx.Var[int | float] = field(
+        doc="Scale of the noise pattern. Higher = more detailed noise. Default: 0.5."
+    )
+    chromatic_spread: rx.Var[int | float] = field(
+        doc="Multiplier for chromatic aberration spread between RGB channels. Default: 2."
+    )
+    mouse_animation: rx.Var[bool] = field(
+        doc="When true, mouse position controls wave animation instead of auto-loop. Default: false."
+    )
+    distortion: rx.Var[int | float] = field(
+        doc="Amount of noise-based distortion applied to the pattern flow (0-1). Default: 1."
+    )
+    contour: rx.Var[int | float] = field(
+        doc="Intensity of edge contour effect that warps the pattern along shape boundaries (0-1). Default: 0.2."
+    )
+    tint_color: rx.Var[str] = field(
+        doc="Hex color for color burn tint effect. White = no tint. Default: '#feb3ff'."
+    )
+
+
+class Noise(ReactBitsComponent):
+    """Animated film grain / noise overlay adding subtle texture and motion.
+
+    Docs: https://reactbits.dev/animations/noise
+    """
+
+    tag = "Noise"
+    alias = "ReactBitsNoise"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "Noise"
+    _rb_files = ('Noise.css', 'Noise.jsx')
+
+    pattern_size: rx.Var[int | float] = field(
+        doc="Defines the size of the grain pattern. Default: 250."
+    )
+    pattern_scale_x: rx.Var[int | float] = field(
+        doc="Scaling factor for the X-axis of the grain pattern. Default: 1."
+    )
+    pattern_scale_y: rx.Var[int | float] = field(
+        doc="Scaling factor for the Y-axis of the grain pattern. Default: 1."
+    )
+    pattern_refresh_interval: rx.Var[int | float] = field(
+        doc="Number of frames before the grain pattern refreshes. Default: 2."
+    )
+    pattern_alpha: rx.Var[int | float] = field(
+        doc="Opacity of the grain pattern (0-255). Default: 15."
+    )
+
+
+class OrbitImages(ReactBitsComponent):
+    """SVG Path customizable orbiting images effect
+
+    Docs: https://reactbits.dev/animations/orbit-images
+    """
+
+    tag = "OrbitImages"
+    alias = "ReactBitsOrbitImages"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "OrbitImages"
+    _rb_files = ('OrbitImages.css', 'OrbitImages.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    images: rx.Var[list[str]] = field(
+        doc="Array of image URLs to orbit along the path. Default: []."
+    )
+    alt_prefix: rx.Var[str] = field(
+        doc="Prefix for auto-generated alt attributes. Default: 'Orbiting image'."
+    )
+    shape: rx.Var[str] = field(
+        doc="Preset shape: ellipse, circle, square, rectangle, triangle, star, heart, infinity, wave, or custom. Default: 'ellipse'."
+    )
+    custom_path: rx.Var[str] = field(
+        doc="Custom SVG path string (used when shape=\"custom\")."
+    )
+    base_width: rx.Var[int | float] = field(
+        doc="Base width for the design coordinate space used for responsive scaling. Default: 1400."
+    )
+    radius_x: rx.Var[int | float] = field(
+        doc="Horizontal radius for ellipse/rectangle shapes. Default: 700."
+    )
+    radius_y: rx.Var[int | float] = field(
+        doc="Vertical radius for ellipse/rectangle shapes. Default: 170."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Radius for circle, square, triangle, star, heart shapes. Default: 300."
+    )
+    star_points: rx.Var[int | float] = field(
+        doc="Number of points for star shape. Default: 5."
+    )
+    star_inner_ratio: rx.Var[int | float] = field(
+        doc="Inner radius ratio for star (0-1). Default: 0.5."
+    )
+    rotation: rx.Var[int | float] = field(
+        doc="Rotation angle of the entire orbit path in degrees. Default: -8."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Duration of one complete orbit in seconds. Default: 40."
+    )
+    item_size: rx.Var[int | float] = field(
+        doc="Width/height of each orbiting item in pixels. Default: 64."
+    )
+    direction: rx.Var[str] = field(
+        doc="Animation direction: \"normal\" or \"reverse\". Default: 'normal'."
+    )
+    fill: rx.Var[bool] = field(
+        doc="Whether to distribute items evenly around the orbit. Default: true."
+    )
+    width: rx.Var[int | float | str] = field(
+        doc="Container width in pixels or \"100%\". Default: 100."
+    )
+    height: rx.Var[int | float | str] = field(
+        doc="Container height in pixels or \"auto\". Default: 100."
+    )
+    show_path: rx.Var[bool] = field(
+        doc="Whether to show the orbit path for debugging. Default: false."
+    )
+    path_color: rx.Var[str] = field(
+        doc="Stroke color when showPath is true. Default: 'rgba(0,0,0,0.1)'."
+    )
+    path_width: rx.Var[int | float] = field(
+        doc="Stroke width when showPath is true. Default: 2."
+    )
+    easing: rx.Var[str] = field(
+        doc="Animation easing: linear, easeIn, easeOut, easeInOut. Default: 'linear'."
+    )
+    paused: rx.Var[bool] = field(
+        doc="Whether the animation is paused. Default: false."
+    )
+    center_content: rx.Var[rx.Component | str] = field(
+        doc="Custom content rendered at the center of the orbit."
+    )
+    responsive: rx.Var[bool] = field(
+        doc="Enable responsive scaling based on container width. Default: false."
+    )
+
+
+class PixelSwap(ReactBitsComponent):
+    """Pixel fragments assemble into a full cover, swap arbitrary content, then dissolve away with reversible colors and triggers.
+
+    Docs: https://reactbits.dev/animations/pixel-swap
+    """
+
+    tag = "PixelSwap"
+    alias = "ReactBitsPixelSwap"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "PixelSwap"
+    _rb_files = ('PixelSwap.css', 'PixelSwap.jsx')
+
+    first_content: rx.Var[rx.Component | str] = field(
+        doc="Content shown in the initial state. Default: \u2014."
+    )
+    second_content: rx.Var[rx.Component | str] = field(
+        doc="Content revealed after the pixel cover. Default: \u2014."
+    )
+    pixel_size: rx.Var[int | float] = field(
+        doc="Square pixel edge length in pixels. Grown automatically when the grid would exceed 320 pixels. Default: 64."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Space between pixels in pixels. Default: 0."
+    )
+    pixel_radius: rx.Var[int | float] = field(
+        doc="Corner rounding of each pixel as a percentage (0 = square, 50 = circle). Default: 0."
+    )
+    pixel_spin: rx.Var[int | float] = field(
+        doc="Degrees each pixel rotates as it opens. Default: 0."
+    )
+    pixel_scale: rx.Var[int | float] = field(
+        doc="Size each pixel starts at, relative to its final size. Default: 0.35."
+    )
+    fade: rx.Var[bool] = field(
+        doc="Fade each pixel in as it opens. Disable for a hard pixel pop. Default: true."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Total transition duration in milliseconds. Default: 1400."
+    )
+    pixel_duration: rx.Var[int | float] = field(
+        doc="Time a single pixel takes to open, in milliseconds. Default: 450."
+    )
+    pattern: rx.Var[Literal["random", "center", "edges", "left-to-right", "right-to-left", "top-to-bottom", "bottom-to-top", "diagonal", "spiral"]] = field(
+        doc="Order in which pixels animate. Default: 'random'."
+    )
+    randomness: rx.Var[int | float] = field(
+        doc="Noise mixed into the pattern order, from 0 (strict) to 1 (fully scattered). Default: 0."
+    )
+    easing: rx.Var[str] = field(
+        doc="Easing applied to each pixel as it opens. Default: 'cubic-bezier(0.22, 1, 0.36, 1)'."
+    )
+    trigger: rx.Var[Literal["hover", "click", "manual"]] = field(
+        doc="Interaction that requests a content swap. Default: 'hover'."
+    )
+    initial_active: rx.Var[bool] = field(
+        doc="Whether the second content is initially visible. Default: false."
+    )
+    active: rx.Var[bool] = field(
+        doc="Controlled active state. Use with trigger=\"manual\" for external control. Default: \u2014."
+    )
+    aspect_ratio: rx.Var[str] = field(
+        doc="CSS aspect-ratio value for the wrapper. Default: '16 / 10'."
+    )
+    on_active_change: rx.EventHandler[lambda active: [safe(active)]] = field(
+        doc="Called whenever an interaction requests a state change. Handler receives: active."
+    )
+    on_complete: rx.EventHandler[lambda active: [safe(active)]] = field(
+        doc="Called once the incoming content is fully revealed. Handler receives: active."
+    )
+
+
+class PixelTrail(ReactBitsComponent):
+    """Pixelated cursor trail emitting fading squares with retro digital feel.
+
+    Docs: https://reactbits.dev/animations/pixel-trail
+    """
+
+    tag = "PixelTrail"
+    alias = "ReactBitsPixelTrail"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "PixelTrail"
+    _rb_files = ('PixelTrail.css', 'PixelTrail.jsx')
+    lib_dependencies: list[str] = ['@react-three/drei@10.7.6', '@react-three/fiber@9.3.0', 'three@0.180.0']
+
+    grid_size: rx.Var[int | float] = field(
+        doc="Number of pixels in grid. Default: 40."
+    )
+    trail_size: rx.Var[int | float] = field(
+        doc="Size of each trail dot. Default: 0.1."
+    )
+    max_age: rx.Var[int | float] = field(
+        doc="Duration of the trail effect. Default: 250."
+    )
+    interpolate: rx.Var[int | float] = field(
+        doc="Interpolation factor for pointer movement. Default: 5."
+    )
+    easing_function: rx.Var[Any] = field(
+        doc="The `easingFunction` prop. Default: identityEase. Pass a JS function with rx.Var('(...) => ...')."
+    )
+    canvas_props: rx.Var[dict[str, Any]] = field(
+        doc="The `canvasProps` prop. Default: {}."
+    )
+    gl_props: rx.Var[dict[str, Any]] = field(
+        doc="The `glProps` prop. Default: { antialias: false, powerPreference: 'high-performance', ...."
+    )
+    gooey_filter: rx.Var[dict[str, Any]] = field(
+        doc="Configuration for gooey filter. Default: { id: 'custom-goo-filter', strength: 5 }."
+    )
+    color: rx.Var[str] = field(
+        doc="Pixel color. Default: '#ffffff'."
+    )
+
+
+class PixelTransition(ReactBitsComponent):
+    """Pixel dissolve transition for content reveal on hover.
+
+    Docs: https://reactbits.dev/animations/pixel-transition
+    """
+
+    tag = "PixelTransition"
+    alias = "ReactBitsPixelTransition"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "PixelTransition"
+    _rb_files = ('PixelTransition.css', 'PixelTransition.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    first_content: rx.Var[rx.Component | str] = field(
+        doc="Content to show by default (e.g., an <img> or text). Default: \u2014."
+    )
+    second_content: rx.Var[rx.Component | str] = field(
+        doc="Content revealed upon hover or click. Default: \u2014."
+    )
+    grid_size: rx.Var[int | float] = field(
+        doc="Number of rows/columns in the pixel grid. Default: 7."
+    )
+    pixel_color: rx.Var[str] = field(
+        doc="Background color used for each pixel block. Default: 'currentColor'."
+    )
+    animation_step_duration: rx.Var[int | float] = field(
+        doc="Length of the pixel reveal/hide in seconds. Default: 0.3."
+    )
+    once: rx.Var[bool] = field(
+        doc="If true, the transition will not revert on mouse leave or subsequent clicks. Default: false."
+    )
+    aspect_ratio: rx.Var[str] = field(
+        doc="Sets the 'padding-top' (or aspect-ratio) for the container. Default: '100%'."
+    )
+
+
+class Ribbons(ReactBitsComponent):
+    """Flowing responsive ribbons/cursor trail driven by physics and pointer motion.
+
+    Docs: https://reactbits.dev/animations/ribbons
+    """
+
+    tag = "Ribbons"
+    alias = "ReactBitsRibbons"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "Ribbons"
+    _rb_files = ('Ribbons.css', 'Ribbons.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    colors: rx.Var[list[str]] = field(
+        doc="An array of color strings to be used for the ribbons. Default: ['#FC8EAC']."
+    )
+    base_spring: rx.Var[int | float] = field(
+        doc="Base spring factor for the physics controlling ribbon motion. Default: 0.03."
+    )
+    base_friction: rx.Var[int | float] = field(
+        doc="Base friction factor that dampens the ribbon motion. Default: 0.9."
+    )
+    base_thickness: rx.Var[int | float] = field(
+        doc="The base thickness of the ribbons. Default: 30."
+    )
+    offset_factor: rx.Var[int | float] = field(
+        doc="A factor to horizontally offset the starting positions of the ribbons. Default: 0.05."
+    )
+    max_age: rx.Var[int | float] = field(
+        doc="Delay in milliseconds controlling how long the ribbon trails extend. Default: 500."
+    )
+    point_count: rx.Var[int | float] = field(
+        doc="The number of points that make up each ribbon. Default: 50."
+    )
+    speed_multiplier: rx.Var[int | float] = field(
+        doc="Multiplier that adjusts how fast trailing points interpolate towards the head. Default: 0.6."
+    )
+    enable_fade: rx.Var[bool] = field(
+        doc="If true, a fade effect is applied along the length of the ribbon. Default: false."
+    )
+    enable_shader_effect: rx.Var[bool] = field(
+        doc="If true, an additional sine-wave shader effect is applied to the ribbons. Default: false."
+    )
+    effect_amplitude: rx.Var[int | float] = field(
+        doc="The amplitude of the shader displacement effect. Default: 2."
+    )
+    background_color: rx.Var[list[int | float]] = field(
+        doc="An RGBA array specifying the clear color for the renderer. Default: [0, 0, 0, 0]."
+    )
+
+
+class RippleDistortion(ReactBitsComponent):
+    """Pointer-driven water displacement that warps content and leaves a decaying wake.
+
+    Docs: https://reactbits.dev/animations/ripple-distortion
+    """
+
+    tag = "RippleDistortion"
+    alias = "ReactBitsRippleDistortion"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "RippleDistortion"
+    _rb_files = ('RippleDistortion.css', 'RippleDistortion.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    src: rx.Var[str] = field(
+        doc="Image URL the ripples distort. Cover fitted to the container. Default: 'https://images.unsplash.com/photo-1782977389500-dd7adad3...."
+    )
+    brush_size: rx.Var[int | float] = field(
+        doc="Diameter of each ripple the pointer lays down, in px. Default: 150."
+    )
+    strength: rx.Var[int | float] = field(
+        doc="How far the image is pushed, as a fraction of its size. Default: 0.2."
+    )
+    swirl: rx.Var[int | float] = field(
+        doc="Full turns the push direction sweeps through as a ripple builds. 0 gives a flat push, higher folds the image into caustics. Default: 1."
+    )
+    rings: rx.Var[int | float] = field(
+        doc="Concentric swells inside each ripple. 0 is a single plain blob. Default: 4."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="How many times its own size a ripple grows to before it dies. Default: 5."
+    )
+    fade: rx.Var[int | float] = field(
+        doc="How long a ripple survives, in seconds. Default: 3."
+    )
+    spacing: rx.Var[int | float] = field(
+        doc="Pointer travel between ripples, in px. Higher leaves a sparser trail. Default: 15."
+    )
+    dispersion: rx.Var[int | float] = field(
+        doc="Chromatic split between the red and blue channels as they refract. Default: 0."
+    )
+    glint: rx.Var[int | float] = field(
+        doc="Sheen riding the shoulders of each ripple. Default: 0."
+    )
+    tint: rx.Var[str] = field(
+        doc="Colour the disturbed water takes on. Default: '#a855f7'."
+    )
+    tint_amount: rx.Var[int | float] = field(
+        doc="How strongly the tint colours the disturbed water. Default: 0.1."
+    )
+    grayscale: rx.Var[bool] = field(
+        doc="Drain the colour out of the image so the folds read on tone alone. Default: true."
+    )
+    highlight_color: rx.Var[str] = field(
+        doc="Colour of the sheen. Default: '#ffffff'."
+    )
+    trigger: rx.Var[Literal["hover", "click", "both"]] = field(
+        doc="What disturbs the surface: motion, clicks, or both. Default: 'hover'."
+    )
+    click_strength: rx.Var[int | float] = field(
+        doc="How much larger a click ripple starts than a hover one. Default: 2."
+    )
+    quality: rx.Var[Literal["low", "medium", "high"]] = field(
+        doc="Resolution of the displacement buffer. Lower trades crispness for fill rate. Default: 'low'."
+    )
+    enabled: rx.Var[bool] = field(
+        doc="Toggle the effect on or off. Default: true."
+    )
+
+
+class ScrollExpand(ReactBitsComponent):
+    """A rounded media frame that grows to full bleed as it scrolls through the viewport.
+
+    Docs: https://reactbits.dev/animations/scroll-expand
+    """
+
+    tag = "ScrollExpand"
+    alias = "ReactBitsScrollExpand"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "ScrollExpand"
+    _rb_files = ('ScrollExpand.css', 'ScrollExpand.jsx')
+
+    src: rx.Var[str] = field(
+        doc="Image or video URL shown inside the frame."
+    )
+    media_type: rx.Var[Literal["image", "video"]] = field(
+        doc="Whether the source is an image or a looping muted video. Default: 'image'."
+    )
+    poster: rx.Var[str] = field(
+        doc="Poster frame used while a video loads."
+    )
+    alt: rx.Var[str] = field(
+        doc="Alt text for the image."
+    )
+    title: rx.Var[str] = field(
+        doc="Headline held over the frame that lifts away as the media takes over."
+    )
+    scroll_hint: rx.Var[str] = field(
+        doc="Small cue shown under the resting frame that fades away as soon as the scroll begins."
+    )
+    start_width: rx.Var[int | float] = field(
+        doc="Frame width before expanding, as a percentage of the stage. Default: 42."
+    )
+    start_height: rx.Var[int | float] = field(
+        doc="Frame height before expanding, as a percentage of the stage. Default: 58."
+    )
+    start_radius: rx.Var[int | float] = field(
+        doc="Corner radius of the resting frame, in px. Default: 24."
+    )
+    end_radius: rx.Var[int | float] = field(
+        doc="Corner radius once fully expanded, in px. Default: 0."
+    )
+    media_zoom: rx.Var[int | float] = field(
+        doc="How far the media is zoomed in at rest. It eases back to 1 as the frame opens up. Default: 1.35."
+    )
+    scroll_distance: rx.Var[int | float] = field(
+        doc="Scroll length of the expansion, in multiples of the stage height. Default: 1.2."
+    )
+    hold_distance: rx.Var[int | float] = field(
+        doc="Extra scroll the frame stays pinned at full bleed before releasing. Default: 0.35."
+    )
+    smoothing: rx.Var[int | float] = field(
+        doc="Follow time in seconds. 0 locks the frame exactly to the scrollbar. Default: 0.1."
+    )
+    overlay_scrim: rx.Var[int | float] = field(
+        doc="Strength of the gradient scrim that fades in to keep overlay content readable. Default: 0.45."
+    )
+    use_window_scroll: rx.Var[bool] = field(
+        doc="Drive the expansion from the page scroll instead of the component\u2019s own scroller. Default: false."
+    )
+    enabled: rx.Var[bool] = field(
+        doc="Enable or disable the expansion. Default: true."
+    )
+
+
+class ShapeBlur(ReactBitsComponent):
+    """Morphing blurred geometric shape. The effect occurs on hover.
+
+    Docs: https://reactbits.dev/animations/shape-blur
+    """
+
+    tag = "ShapeBlur"
+    alias = "ReactBitsShapeBlur"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "ShapeBlur"
+    _rb_files = ('ShapeBlur.jsx',)
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    variation: rx.Var[int | float] = field(
+        doc="Selects the shape variation (0-3) used by the shader. Default: 0."
+    )
+    pixel_ratio_prop: rx.Var[int | float] = field(
+        doc="Overrides the pixel ratio, typically set to the device pixel ratio. Default: 2."
+    )
+    shape_size: rx.Var[int | float] = field(
+        doc="Controls the size of the shape. Default: 1.2."
+    )
+    roundness: rx.Var[int | float] = field(
+        doc="Determines the roundness of the shape's corners. Default: 0.4."
+    )
+    border_size: rx.Var[int | float] = field(
+        doc="Sets the thickness of the border. Default: 0.05."
+    )
+    circle_size: rx.Var[int | float] = field(
+        doc="Determines the size of the hover circle effect. Default: 0.3."
+    )
+    circle_edge: rx.Var[int | float] = field(
+        doc="Controls the edge softness of the hover circle. Default: 0.5."
+    )
+
+
+class SplashCursor(ReactBitsComponent):
+    """Liquid splash burst at cursor with curling ripples and waves.
+
+    Docs: https://reactbits.dev/animations/splash-cursor
+    """
+
+    tag = "SplashCursor"
+    alias = "ReactBitsSplashCursor"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "SplashCursor"
+    _rb_files = ('SplashCursor.jsx',)
+    _rename_props = {'simResolution': 'SIM_RESOLUTION', 'dyeResolution': 'DYE_RESOLUTION', 'captureResolution': 'CAPTURE_RESOLUTION', 'densityDissipation': 'DENSITY_DISSIPATION', 'velocityDissipation': 'VELOCITY_DISSIPATION', 'pressure': 'PRESSURE', 'pressureIterations': 'PRESSURE_ITERATIONS', 'curl': 'CURL', 'splatRadius': 'SPLAT_RADIUS', 'splatForce': 'SPLAT_FORCE', 'shading': 'SHADING', 'colorUpdateSpeed': 'COLOR_UPDATE_SPEED', 'backColor': 'BACK_COLOR', 'transparent': 'TRANSPARENT', 'rainbowMode': 'RAINBOW_MODE', 'color': 'COLOR'}
+
+    sim_resolution: rx.Var[int | float] = field(
+        doc="Fluid simulation resolution for velocity fields. Default: 128."
+    )
+    dye_resolution: rx.Var[int | float] = field(
+        doc="Resolution of the color/dye texture. Default: 1440."
+    )
+    capture_resolution: rx.Var[int | float] = field(
+        doc="Resolution used for certain capture operations (rarely changed). Default: 512."
+    )
+    density_dissipation: rx.Var[int | float] = field(
+        doc="Rate at which color/density dissipates over time. Default: 3.5."
+    )
+    velocity_dissipation: rx.Var[int | float] = field(
+        doc="Rate at which velocity dissipates over time. Default: 2."
+    )
+    pressure: rx.Var[int | float] = field(
+        doc="Base pressure for the fluid simulation. Default: 0.1."
+    )
+    pressure_iterations: rx.Var[int | float] = field(
+        doc="Number of Jacobi iterations used for the pressure solver. Default: 20."
+    )
+    curl: rx.Var[int | float] = field(
+        doc="Amount of vorticity/curl to apply for swirling effects. Default: 3."
+    )
+    splat_radius: rx.Var[int | float] = field(
+        doc="Radius of the 'splat' effect when user interacts. Default: 0.2."
+    )
+    splat_force: rx.Var[int | float] = field(
+        doc="Force of the fluid 'splat' on each interaction. Default: 6000."
+    )
+    shading: rx.Var[bool] = field(
+        doc="Toggles simple lighting/shading on the fluid. Default: true."
+    )
+    color_update_speed: rx.Var[int | float] = field(
+        doc="Frequency at which pointer colors are re-randomized. Default: 10."
+    )
+    back_color: rx.Var[dict[str, Any]] = field(
+        doc="Base background color for the fluid. Not always used if TRANSPARENT is true. Default: { r: 0.5, g: 0, b: 0 }."
+    )
+    transparent: rx.Var[bool] = field(
+        doc="The `TRANSPARENT` prop. Default: true."
+    )
+    rainbow_mode: rx.Var[bool] = field(
+        doc="When true, uses randomly cycling rainbow colors. When false, uses the COLOR prop. Default: true."
+    )
+    color: rx.Var[str] = field(
+        doc="Hex color for the cursor effect when RAINBOW_MODE is false. Default: '#ff0000'."
+    )
+
+
+class StarBorder(ReactBitsComponent):
+    """Animated star / sparkle border orbiting content with twinkle pulses.
+
+    Docs: https://reactbits.dev/animations/star-border
+    """
+
+    tag = "StarBorder"
+    alias = "ReactBitsStarBorder"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "StarBorder"
+    _rb_files = ('StarBorder.css', 'StarBorder.jsx')
+
+    as_: rx.Var[str] = field(
+        doc="Allows specifying the type of the parent component to be rendered. Default: 'button'."
+    )
+    color: rx.Var[str] = field(
+        doc="Changes the main color of the border (fades to transparent). Default: 'white'."
+    )
+    speed: rx.Var[str] = field(
+        doc="Changes the speed of the animation. Default: '6s'."
+    )
+    thickness: rx.Var[int | float] = field(
+        doc="Controls the thickness of the star border effect. Default: 1."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Background color of the button surface. Default: '#000000'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Text color of the button content. Default: '#ffffff'."
+    )
+    border_color: rx.Var[str] = field(
+        doc="Static border color around the button surface. Default: '#222222'."
+    )
+
+
+class StickerPeel(ReactBitsComponent):
+    """Sticker corner lift + peel interaction using 3D transform and shadow depth.
+
+    Docs: https://reactbits.dev/animations/sticker-peel
+    """
+
+    tag = "StickerPeel"
+    alias = "ReactBitsStickerPeel"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "StickerPeel"
+    _rb_files = ('StickerPeel.css', 'StickerPeel.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    image_src: rx.Var[str] = field(
+        doc="The source URL for the sticker image. Default: required."
+    )
+    rotate: rx.Var[int | float] = field(
+        doc="The rotation angle in degrees when dragging. Default: 30."
+    )
+    peel_back_hover_pct: rx.Var[int | float] = field(
+        doc="Percentage of peel effect on hover (0-100). Default: 30."
+    )
+    peel_back_active_pct: rx.Var[int | float] = field(
+        doc="Percentage of peel effect when active/clicked (0-100). Default: 40."
+    )
+    peel_easing: rx.Var[str] = field(
+        doc="GSAP easing function for peel animations. Default: 'power3.out'."
+    )
+    peel_hover_easing: rx.Var[str] = field(
+        doc="GSAP easing function for hover transitions. Default: 'power2.out'."
+    )
+    width: rx.Var[int | float] = field(
+        doc="Width of the sticker in pixels. Default: 200."
+    )
+    shadow_intensity: rx.Var[int | float] = field(
+        doc="Intensity of the shadow effect (0-1). Default: 0.6."
+    )
+    lighting_intensity: rx.Var[int | float] = field(
+        doc="Intensity of the lighting effect (0-1). Default: 0.1."
+    )
+    initial_position: rx.Var[str | dict[str, Any]] = field(
+        doc="Initial position of the sticker ('center', 'top-left', 'top-right', 'bottom-left', 'bottom-right'). Default: 'center'."
+    )
+    peel_direction: rx.Var[int | float] = field(
+        doc="Direction of the peel effect in degrees (0-360). Default: 0."
+    )
+
+
+class Strands(ReactBitsComponent):
+    """Glowing ribbon-like strands that ripple and weave across a transparent canvas.
+
+    Docs: https://reactbits.dev/animations/strands
+    """
+
+    tag = "Strands"
+    alias = "ReactBitsStrands"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "Strands"
+    _rb_files = ('Strands.css', 'Strands.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    colors: rx.Var[list[str]] = field(
+        doc="Palette of hex colors cycled across the strands. Pass an empty array to use the built-in rainbow spectrum. Default: ['#FF4242', '#7C3AED', '#06B6D4', '#EAB308']."
+    )
+    count: rx.Var[int | float] = field(
+        doc="Number of strands woven through the animation. Default: 3."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="How quickly the strands ripple and flow. Default: 0.5."
+    )
+    amplitude: rx.Var[int | float] = field(
+        doc="Vertical reach of each strand as it waves up and down. Default: 1."
+    )
+    waviness: rx.Var[int | float] = field(
+        doc="Density of the curves along each strand. Default: 1."
+    )
+    thickness: rx.Var[int | float] = field(
+        doc="Width of each glowing strand. Default: 0.7."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Strength of the luminous bloom around the strands. Default: 2.6."
+    )
+    taper: rx.Var[int | float] = field(
+        doc="How sharply the strands fade out toward the edges. Default: 3."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="Separation between strands so they fan out instead of overlapping. Default: 1."
+    )
+    hue_shift: rx.Var[int | float] = field(
+        doc="Rotates the colors around the strands for variation. Default: 0."
+    )
+    intensity: rx.Var[int | float] = field(
+        doc="Overall brightness and energy of the effect. Default: 0.6."
+    )
+    saturation: rx.Var[int | float] = field(
+        doc="Vibrance of the colors. Above 1 makes them more intense, below 1 fades to grayscale. Default: 1.5."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall transparency of the rendered strands. Default: 1."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Zooms the whole effect in or out to make the strands bigger or smaller. Default: 1.5."
+    )
+    glass: rx.Var[bool] = field(
+        doc="Renders the strands inside a refractive glass ball. Default: false."
+    )
+    refraction: rx.Var[int | float] = field(
+        doc="How strongly the glass ball bends the light passing through it. Default: 1."
+    )
+    dispersion: rx.Var[int | float] = field(
+        doc="Amount of rainbow color separation along the edges of the glass ball. Default: 1."
+    )
+    glass_size: rx.Var[int | float] = field(
+        doc="Size of the glass ball relative to the canvas. Default: 1."
+    )
+
+
+class SwarmCursor(ReactBitsComponent):
+    """Flocking particle swarm that chases the pointer, jostles for space and drifts apart at rest.
+
+    Docs: https://reactbits.dev/animations/swarm-cursor
+    """
+
+    tag = "SwarmCursor"
+    alias = "ReactBitsSwarmCursor"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "SwarmCursor"
+    _rb_files = ('SwarmCursor.css', 'SwarmCursor.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    color: rx.Var[str] = field(
+        doc="Base color of the swarm. Default: '#ffffff'."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="Color where the swarm is densest. Default: '#ffffff'."
+    )
+    count: rx.Var[int | float] = field(
+        doc="Number of particles in the swarm. Default: 10."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Radius of each particle, in pixels. Default: 10."
+    )
+    merge: rx.Var[int | float] = field(
+        doc="How readily nearby particles fuse into a single body. Lower is gooier. Default: 0.77."
+    )
+    glow: rx.Var[int | float] = field(
+        doc="Strength of the soft halo around the swarm. Default: 0.75."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Overall opacity of the effect. Default: 1."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="Radius of the cloud the swarm orbits the cursor at. Default: 100."
+    )
+    separation: rx.Var[int | float] = field(
+        doc="How strongly particles push each other apart. Default: 0.15."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Travel speed and turn rate of the swarm, on a 1-10 dial. Default: 2.5."
+    )
+    wander: rx.Var[int | float] = field(
+        doc="How strongly the drifting flow field pulls particles off their chase. Default: 0.25."
+    )
+    trail: rx.Var[int | float] = field(
+        doc="Length of the motion trail each particle leaves behind. Default: 0.75."
+    )
+    scatter_on_click: rx.Var[bool] = field(
+        doc="Burst the swarm outward on click, then let it regroup. Default: true."
+    )
+    enabled: rx.Var[bool] = field(
+        doc="Enable or disable the effect. Default: true."
+    )
+
+
+class TargetCursor(ReactBitsComponent):
+    """A cursor follow animation with 4 corners that lock onto targets.
+
+    Docs: https://reactbits.dev/animations/target-cursor
+    """
+
+    tag = "TargetCursor"
+    alias = "ReactBitsTargetCursor"
+    is_default = True
+    _rb_category = "Animations"
+    _rb_name = "TargetCursor"
+    _rb_files = ('TargetCursor.css', 'TargetCursor.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    target_selector: rx.Var[str] = field(
+        doc="CSS selector for elements that should trigger the cursor targeting effect. Default: '.cursor-target'."
+    )
+    spin_duration: rx.Var[int | float] = field(
+        doc="Duration in seconds for the cursor's spinning animation when not targeting. Default: 2."
+    )
+    hide_default_cursor: rx.Var[bool] = field(
+        doc="Whether to hide the default browser cursor when the component is active. Default: true."
+    )
+    hover_duration: rx.Var[int | float] = field(
+        doc="Duration in seconds for the transition when the cursor locks onto a target. Default: 0.2."
+    )
+    parallax_on: rx.Var[bool] = field(
+        doc="Enables a subtle parallax effect on the corners when moving over a target. Default: true."
+    )
+    cursor_color: rx.Var[str] = field(
+        doc="Color of the cursor dot and corner brackets at rest. Default: '#ffffff'."
+    )
+    cursor_color_on_target: rx.Var[str] = field(
+        doc="Optional color the cursor smoothly transitions to while locked onto a target."
+    )
+
+
+animated_content = AnimatedContent.create
+antigravity = Antigravity.create
+blob_cursor = BlobCursor.create
+click_spark = ClickSpark.create
+crosshair = Crosshair.create
+cubes = Cubes.create
+cursor_grid = CursorGrid.create
+elastic_mesh = ElasticMesh.create
+electric_border = ElectricBorder.create
+fade_content = FadeContent.create
+ghost_cursor = GhostCursor.create
+glare_hover = GlareHover.create
+glow_cursor = GlowCursor.create
+gradual_blur = GradualBlur.create
+halftone_reveal = HalftoneReveal.create
+image_trail = ImageTrail.create
+laser_flow = LaserFlow.create
+logo_loop = LogoLoop.create
+magic_rings = MagicRings.create
+magnet = Magnet.create
+magnet_lines = MagnetLines.create
+meta_balls = MetaBalls.create
+metallic_paint = MetallicPaint.create
+noise = Noise.create
+orbit_images = OrbitImages.create
+pixel_swap = PixelSwap.create
+pixel_trail = PixelTrail.create
+pixel_transition = PixelTransition.create
+ribbons = Ribbons.create
+ripple_distortion = RippleDistortion.create
+scroll_expand = ScrollExpand.create
+shape_blur = ShapeBlur.create
+splash_cursor = SplashCursor.create
+star_border = StarBorder.create
+sticker_peel = StickerPeel.create
+strands = Strands.create
+swarm_cursor = SwarmCursor.create
+target_cursor = TargetCursor.create