reflex-reactbits 0.1.1__py3-none-any.whl

reflex_reactbits/text_animations.py

@@ -0,0 +1,1629 @@
+"""React Bits - Text 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__ = ['ASCIIText', 'BlurText', 'CircularText', 'CountUp', 'CurvedLoop', 'DecryptedText', 'DepthText', 'EchoText', 'FallingText', 'FoldText', 'FuzzyText', 'GlitchText', 'GradientText', 'MaskedHeading', 'ParticleText', 'RotatingText', 'ScrambledText', 'ScrollFloat', 'ScrollReveal', 'ScrollVelocity', 'ShinyText', 'Shuffle', 'SplitFlapText', 'SplitText', 'StrokeText', 'TextCursor', 'TextLoop', 'TextPressure', 'TextType', 'TrueFocus', 'VariableProximity', 'WarpText', 'ascii_text', 'blur_text', 'circular_text', 'count_up', 'curved_loop', 'decrypted_text', 'depth_text', 'echo_text', 'falling_text', 'fold_text', 'fuzzy_text', 'glitch_text', 'gradient_text', 'masked_heading', 'particle_text', 'rotating_text', 'scrambled_text', 'scroll_float', 'scroll_reveal', 'scroll_velocity', 'shiny_text', 'shuffle', 'split_flap_text', 'split_text', 'stroke_text', 'text_cursor', 'text_loop', 'text_pressure', 'text_type', 'true_focus', 'variable_proximity', 'warp_text']
+
+
+class ASCIIText(ReactBitsComponent):
+    """Renders text with an animated ASCII background for a retro feel.
+
+    Docs: https://reactbits.dev/text-animations/ascii-text
+    """
+
+    tag = "ASCIIText"
+    alias = "ReactBitsASCIIText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "ASCIIText"
+    _rb_files = ('ASCIIText.jsx',)
+    lib_dependencies: list[str] = ['three@0.180.0']
+
+    text: rx.Var[str] = field(
+        doc="The text displayed on the plane in the ASCII scene. Default: 'David!'."
+    )
+    ascii_font_size: rx.Var[int | float] = field(
+        doc="Size of the ASCII glyphs in the overlay. Default: 8."
+    )
+    text_font_size: rx.Var[int | float] = field(
+        doc="Pixel size for the text that's drawn onto the plane texture. Default: 200."
+    )
+    text_color: rx.Var[str] = field(
+        doc="The color of the text drawn onto the plane texture. Default: '#fdf9f3'."
+    )
+    plane_base_height: rx.Var[int | float] = field(
+        doc="How tall the plane is in 3D. The plane width is auto-based on text aspect. Default: 8."
+    )
+    enable_waves: rx.Var[bool] = field(
+        doc="If false, disables the wavy text animation. Default: true."
+    )
+
+
+class BlurText(ReactBitsComponent):
+    """Text starts blurred then crisply resolves for a soft-focus reveal effect.
+
+    Docs: https://reactbits.dev/text-animations/blur-text
+    """
+
+    tag = "BlurText"
+    alias = "ReactBitsBlurText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "BlurText"
+    _rb_files = ('BlurText.jsx',)
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    text: rx.Var[str] = field(
+        doc="The text content to animate."
+    )
+    delay: rx.Var[int | float] = field(
+        doc="Delay between animations for each word/letter (in ms). Default: 200."
+    )
+    animate_by: rx.Var[str] = field(
+        doc="Determines whether to animate by 'words' or 'letters'. Default: 'words'."
+    )
+    direction: rx.Var[str] = field(
+        doc="Direction from which the words/letters appear ('top' or 'bottom'). Default: 'top'."
+    )
+    threshold: rx.Var[int | float] = field(
+        doc="Intersection threshold for triggering the animation. Default: 0.1."
+    )
+    root_margin: rx.Var[str] = field(
+        doc="Root margin for the intersection observer. Default: '0px'."
+    )
+    animation_from: rx.Var[Any] = field(
+        doc="The `animationFrom` prop."
+    )
+    animation_to: rx.Var[Any] = field(
+        doc="The `animationTo` prop."
+    )
+    easing: rx.Var[Any] = field(
+        doc="The `easing` prop. Default: t => t. Pass a JS function with rx.Var('(...) => ...')."
+    )
+    step_duration: rx.Var[int | float] = field(
+        doc="The time taken for each letter/word to animate (in seconds). Default: 0.35."
+    )
+    on_animation_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function triggered when all animations complete."
+    )
+
+
+class CircularText(ReactBitsComponent):
+    """Layouts characters around a circle with optional rotation animation.
+
+    Docs: https://reactbits.dev/text-animations/circular-text
+    """
+
+    tag = "CircularText"
+    alias = "ReactBitsCircularText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "CircularText"
+    _rb_files = ('CircularText.css', 'CircularText.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    text: rx.Var[str] = field(
+        doc="The text to display in a circular layout."
+    )
+    spin_duration: rx.Var[int | float] = field(
+        doc="The duration (in seconds) for one full rotation. Default: 20."
+    )
+    on_hover: rx.Var[Literal["slowDown", "speedUp", "pause", "goBonkers"]] = field(
+        doc="Specifies the hover behavior variant. Options include 'slowDown', 'speedUp', 'pause', and 'goBonkers'. Default: 'speedUp'."
+    )
+
+
+class CountUp(ReactBitsComponent):
+    """Animated number counter supporting formatting and decimals.
+
+    Docs: https://reactbits.dev/text-animations/count-up
+    """
+
+    tag = "CountUp"
+    alias = "ReactBitsCountUp"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "CountUp"
+    _rb_files = ('CountUp.jsx',)
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    to: rx.Var[int | float] = field(
+        doc="The target number to count up to. Default: \u2014."
+    )
+    from_: rx.Var[int | float] = field(
+        doc="The initial number from which the count starts. Default: 0."
+    )
+    direction: rx.Var[str] = field(
+        doc="Direction of the count; can be \"up\" or \"down\". When this is set to \"down\", \"from\" and \"to\" become reversed, in order to count down. Default: 'up'."
+    )
+    delay: rx.Var[int | float] = field(
+        doc="Delay in seconds before the counting starts. Default: 0."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Duration of the count animation - based on the damping and stiffness configured inside the component. Default: 2."
+    )
+    start_when: rx.Var[bool] = field(
+        doc="A boolean to control whether the animation should start when the component is in view. It basically works like an if statement, if this is true, the count will start. Default: true."
+    )
+    separator: rx.Var[str] = field(
+        doc="Character to use as a thousands separator in the displayed number."
+    )
+    on_start: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function that is called when the count animation starts."
+    )
+    on_end: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function that is called when the count animation ends."
+    )
+
+
+class CurvedLoop(ReactBitsComponent):
+    """Flowing looping text path along a customizable curve with drag interaction.
+
+    Docs: https://reactbits.dev/text-animations/curved-loop
+    """
+
+    tag = "CurvedLoop"
+    alias = "ReactBitsCurvedLoop"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "CurvedLoop"
+    _rb_files = ('CurvedLoop.css', 'CurvedLoop.jsx')
+
+    marquee_text: rx.Var[str] = field(
+        doc="The text to display in the curved marquee."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed of the marquee text. Default: 2."
+    )
+    curve_amount: rx.Var[int | float] = field(
+        doc="Amount of curve in the text path. Default: 400."
+    )
+    direction: rx.Var[Literal["left", "right"]] = field(
+        doc="Initial direction of the marquee animation. Default: 'left'."
+    )
+    interactive: rx.Var[bool] = field(
+        doc="Whether the marquee can be dragged by the user. Default: true."
+    )
+
+
+class DecryptedText(ReactBitsComponent):
+    """Hacker-style decryption cycling random glyphs until resolving to real text.
+
+    Docs: https://reactbits.dev/text-animations/decrypted-text
+    """
+
+    tag = "DecryptedText"
+    alias = "ReactBitsDecryptedText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "DecryptedText"
+    _rb_files = ('DecryptedText.jsx',)
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    text: rx.Var[str] = field(
+        doc="The text content to decrypt."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Time in ms between each iteration. Default: 50."
+    )
+    max_iterations: rx.Var[int | float] = field(
+        doc="Max # of random iterations (non-sequential mode). Default: 10."
+    )
+    sequential: rx.Var[bool] = field(
+        doc="Whether to reveal one character at a time in sequence. Default: false."
+    )
+    reveal_direction: rx.Var[Literal["start", "end", "center"]] = field(
+        doc="From which position characters begin to reveal in sequential mode. Default: 'start'."
+    )
+    use_original_chars_only: rx.Var[bool] = field(
+        doc="Restrict scrambling to only the characters already in the text. Default: false."
+    )
+    characters: rx.Var[str] = field(
+        doc="The `characters` prop. Default: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$...."
+    )
+    parent_class_name: rx.Var[str] = field(
+        doc="CSS class for the main characters container."
+    )
+    encrypted_class_name: rx.Var[str] = field(
+        doc="CSS class for encrypted characters."
+    )
+    animate_on: rx.Var[Literal["view", "hover", "inViewHover", "click"]] = field(
+        doc="Trigger scrambling on hover or scroll-into-view. Default: 'hover'."
+    )
+    click_mode: rx.Var[Literal["once", "toggle"]] = field(
+        doc="Controls click behavior; only applies when animateOn is \"click\". Default: 'once'."
+    )
+
+
+class DepthText(ReactBitsComponent):
+    """Layered extruded type with parallax that shifts against the pointer.
+
+    Docs: https://reactbits.dev/text-animations/depth-text
+    """
+
+    tag = "DepthText"
+    alias = "ReactBitsDepthText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "DepthText"
+    _rb_files = ('DepthText.css', 'DepthText.jsx')
+
+    text: rx.Var[str] = field(
+        doc="The word or short phrase rendered as extruded type. Default: 'Elevate'."
+    )
+    layers: rx.Var[int | float] = field(
+        doc="Number of stacked copies that form the extrusion. Clamped to protect the DOM. Default: 34."
+    )
+    depth: rx.Var[int | float] = field(
+        doc="Spacing in pixels between each layer of the extrusion. Default: 2.4."
+    )
+    face_color: rx.Var[str] = field(
+        doc="Color of the crisp front face of the text. Default: '#f8fafc'."
+    )
+    depth_color: rx.Var[str] = field(
+        doc="Tint used for the back of the extrusion and its shadow. Default: '#7c3aed'."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Maximum pointer-driven rotation in degrees. Default: 7.5."
+    )
+    pointer_tracking: rx.Var[bool] = field(
+        doc="Enables smoothed pointer parallax on fine pointer devices. Default: true."
+    )
+    smoothing: rx.Var[int | float] = field(
+        doc="Damping amount used to ease rotation toward the pointer target. Default: 0.14."
+    )
+    perspective: rx.Var[int | float] = field(
+        doc="Perspective distance in pixels for the 3D stack. Default: 900."
+    )
+    auto_orbit: rx.Var[bool] = field(
+        doc="Adds a subtle orbit when pointer tracking is unavailable or idle. Default: true."
+    )
+    orbit_speed: rx.Var[int | float] = field(
+        doc="Speed of the fallback orbit in cycles per second. Default: 0.35."
+    )
+    font_size: rx.Var[str] = field(
+        doc="CSS font-size value for the display word. Default: 'clamp(3rem, 12vw, 7rem)'."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="Font weight used for every layer. Default: 900."
+    )
+    shadow: rx.Var[bool] = field(
+        doc="Adds a soft colored drop shadow to the front face. Default: true."
+    )
+
+
+class EchoText(ReactBitsComponent):
+    """Ghosted copies trail behind the text and settle into a single word.
+
+    Docs: https://reactbits.dev/text-animations/echo-text
+    """
+
+    tag = "EchoText"
+    alias = "ReactBitsEchoText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "EchoText"
+    _rb_files = ('EchoText.css', 'EchoText.jsx')
+
+    text: rx.Var[str] = field(
+        doc="Text rendered by the crisp front copy and every echo layer. Default: 'Motion Echo'."
+    )
+    echoes: rx.Var[int | float] = field(
+        doc="Number of ghost copies behind the front text. Default: 12."
+    )
+    lag: rx.Var[int | float] = field(
+        doc="How slowly deeper echoes chase the current target. Default: 0.24."
+    )
+    offset: rx.Var[int | float] = field(
+        doc="Pixel travel used by the entrance spread and pointer response. Default: 36."
+    )
+    direction: rx.Var[Literal["right", "left", "up", "down", "diagonal"]] = field(
+        doc="Direction the entrance trail collapses from. Default: 'right'."
+    )
+    fade: rx.Var[int | float] = field(
+        doc="Opacity falloff applied from one echo to the next. Default: 0.72."
+    )
+    blur: rx.Var[int | float] = field(
+        doc="Maximum blur in pixels on the deepest echo. Default: 3."
+    )
+    tint: rx.Var[bool | str] = field(
+        doc="Optional chromatic tint blended into the echo layers. Default: '#7dd3fc'."
+    )
+    mode: rx.Var[Literal["entrance", "pointer", "both"]] = field(
+        doc="Whether to run the entrance, pointer smear, or both. Default: 'both'."
+    )
+    cursor_radius: rx.Var[int | float] = field(
+        doc="Distance in pixels over which the cursor pulls the text to full offset. Larger values react from further away and arrive later. Default: 320."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Entrance convergence duration in milliseconds. Default: 900."
+    )
+    ease: rx.Var[Literal["linear", "ease-out", "ease-in-out", "snappy"]] = field(
+        doc="Timing curve used for the entrance convergence. Default: 'ease-out'."
+    )
+    font_size: rx.Var[int | float | str] = field(
+        doc="Font size applied to the text stack. Default: 'clamp(3rem, 9vw, 7rem)'."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="Font weight applied to all copies. Default: 800."
+    )
+    color: rx.Var[str] = field(
+        doc="Color of the crisp front copy. Default: '#f8fafc'."
+    )
+
+
+class FallingText(ReactBitsComponent):
+    """Characters fall with gravity + bounce creating a playful entrance.
+
+    Docs: https://reactbits.dev/text-animations/falling-text
+    """
+
+    tag = "FallingText"
+    alias = "ReactBitsFallingText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "FallingText"
+    _rb_files = ('FallingText.css', 'FallingText.jsx')
+    lib_dependencies: list[str] = ['matter-js@0.20.0']
+
+    text: rx.Var[str] = field(
+        doc="The text content to display and eventually animate."
+    )
+    highlight_words: rx.Var[list[str]] = field(
+        doc="List of words or substrings to apply a highlight style. Default: []."
+    )
+    highlight_class: rx.Var[str] = field(
+        doc="CSS class name for highlighted words. Default: 'highlighted'."
+    )
+    trigger: rx.Var[Literal["click", "hover", "auto", "scroll"]] = field(
+        doc="Defines how the falling effect is activated. Default: 'auto'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Canvas background color for the physics world. Default: 'transparent'."
+    )
+    wireframes: rx.Var[bool] = field(
+        doc="Whether to render the physics bodies in wireframe mode. Default: false."
+    )
+    gravity: rx.Var[int | float] = field(
+        doc="Vertical gravity factor for the physics engine. Default: 1."
+    )
+    mouse_constraint_stiffness: rx.Var[int | float] = field(
+        doc="Stiffness for the mouse drag constraint. Default: 0.2."
+    )
+    font_size: rx.Var[str] = field(
+        doc="Font size applied to the text before it falls. Default: '1rem'."
+    )
+
+
+class FoldText(ReactBitsComponent):
+    """Lines unfold into place like creased paper opening flat.
+
+    Docs: https://reactbits.dev/text-animations/fold-text
+    """
+
+    tag = "FoldText"
+    alias = "ReactBitsFoldText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "FoldText"
+    _rb_files = ('FoldText.css', 'FoldText.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    text: rx.Var[str] = field(
+        doc="The text content to split and fold into place. Default: 'Design unfolds'."
+    )
+    split_by: rx.Var[Literal["char", "word", "line"]] = field(
+        doc="Controls whether each character, word, or explicit line folds as a panel. Default: 'char'."
+    )
+    hinge: rx.Var[Literal["top", "bottom", "left", "right"]] = field(
+        doc="The edge that acts as the 3D fold hinge. Default: 'top'."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Duration in seconds for each panel to unfold. Default: 0.65."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Delay in seconds between panels; 0.03\u20130.08 keeps the cascade crisp. Default: 0.045."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing curve used by the unfold timeline. Default: 'power3.out'."
+    )
+    perspective: rx.Var[int | float] = field(
+        doc="Perspective distance applied to each panel parent. Default: 700."
+    )
+    crease_shading: rx.Var[int | float] = field(
+        doc="Strength of the gradient shade while panels are folded. Default: 0.55."
+    )
+    trigger: rx.Var[Literal["mount", "hover", "scroll", "loop"]] = field(
+        doc="Determines when the unfold animation starts. Default: 'mount'."
+    )
+    font_size: rx.Var[int | float | str] = field(
+        doc="Font size applied to the root text. Default: 80."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="Font weight applied to the root text. Default: 800."
+    )
+    color: rx.Var[str] = field(
+        doc="Text color of the folded panels. Default: '#f7f2e8'."
+    )
+
+
+class FuzzyText(ReactBitsComponent):
+    """Vibrating fuzzy text with controllable hover intensity.
+
+    Docs: https://reactbits.dev/text-animations/fuzzy-text
+    """
+
+    tag = "FuzzyText"
+    alias = "ReactBitsFuzzyText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "FuzzyText"
+    _rb_files = ('FuzzyText.jsx',)
+
+    font_size: rx.Var[int | float | str] = field(
+        doc="Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels). Default: 'clamp(2rem, 8vw, 8rem)'."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="Specifies the font weight of the text. Default: 900."
+    )
+    font_family: rx.Var[str] = field(
+        doc="Specifies the font family of the text. 'inherit' uses the computed style from the parent. Default: 'inherit'."
+    )
+    color: rx.Var[str] = field(
+        doc="Specifies the text color. Default: '#fff'."
+    )
+    enable_hover: rx.Var[bool] = field(
+        doc="Enables the hover effect for the fuzzy text. Default: true."
+    )
+    base_intensity: rx.Var[int | float] = field(
+        doc="The fuzz intensity when the text is not hovered. Default: 0.18."
+    )
+    hover_intensity: rx.Var[int | float] = field(
+        doc="The fuzz intensity when the text is hovered. Default: 0.5."
+    )
+    fuzz_range: rx.Var[int | float] = field(
+        doc="Maximum pixel displacement for the fuzzy effect. Default: 30."
+    )
+    fps: rx.Var[int | float] = field(
+        doc="Frame rate cap for the animation. Lower values reduce CPU usage. Default: 60."
+    )
+    direction: rx.Var[Literal["horizontal", "vertical", "both"]] = field(
+        doc="The axis/axes for the fuzzy displacement effect. Default: 'horizontal'."
+    )
+    transition_duration: rx.Var[int | float] = field(
+        doc="Number of frames to ease between intensity states for smooth transitions. Default: 0."
+    )
+    click_effect: rx.Var[bool] = field(
+        doc="Enables a momentary burst of maximum intensity on click. Default: false."
+    )
+    glitch_mode: rx.Var[bool] = field(
+        doc="Enables periodic random intensity spikes for a glitch effect. Default: false."
+    )
+    glitch_interval: rx.Var[int | float] = field(
+        doc="Milliseconds between glitch bursts when glitchMode is enabled. Default: 2000."
+    )
+    glitch_duration: rx.Var[int | float] = field(
+        doc="Milliseconds duration of each glitch burst. Default: 200."
+    )
+    gradient: rx.Var[list[str]] = field(
+        doc="Array of colors to create a gradient text effect (e.g. [\"#ff0000\", \"#00ff00\"])."
+    )
+    letter_spacing: rx.Var[int | float] = field(
+        doc="Extra pixels between characters. Default: 0."
+    )
+
+
+class GlitchText(ReactBitsComponent):
+    """RGB split and distortion glitch effect with jitter effects.
+
+    Docs: https://reactbits.dev/text-animations/glitch-text
+    """
+
+    tag = "GlitchText"
+    alias = "ReactBitsGlitchText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "GlitchText"
+    _rb_files = ('GlitchText.css', 'GlitchText.jsx')
+
+    speed: rx.Var[int | float] = field(
+        doc="Multiplier for the animation speed. Higher values slow down the glitch effect. Default: 0.5."
+    )
+    enable_shadows: rx.Var[bool] = field(
+        doc="Toggle the colored text shadows on the glitch pseudo-elements. Default: true."
+    )
+    enable_on_hover: rx.Var[bool] = field(
+        doc="If true, the glitch animation is only activated on hover. Default: false."
+    )
+
+
+class GradientText(ReactBitsComponent):
+    """Animated gradient sweep across live text with speed and color control.
+
+    Docs: https://reactbits.dev/text-animations/gradient-text
+    """
+
+    tag = "GradientText"
+    alias = "ReactBitsGradientText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "GradientText"
+    _rb_files = ('GradientText.css', 'GradientText.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    colors: rx.Var[list[str]] = field(
+        doc="Array of colors for the gradient effect. Default: ['#5227FF', '#FF9FFC', '#B497CF']."
+    )
+    animation_speed: rx.Var[int | float] = field(
+        doc="Duration of one animation cycle in seconds. Default: 8."
+    )
+    show_border: rx.Var[bool] = field(
+        doc="Displays a gradient border around the text. Default: false."
+    )
+    direction: rx.Var[Literal["horizontal", "vertical", "diagonal"]] = field(
+        doc="Direction of the gradient animation. Default: 'horizontal'."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Pauses the animation when hovering over the text. Default: false."
+    )
+    yoyo: rx.Var[bool] = field(
+        doc="Reverses animation direction at the end instead of looping. Default: true."
+    )
+
+
+class MaskedHeading(ReactBitsComponent):
+    """A large headline with a drifting colour mesh or image showing through the glyphs, revealed word by word.
+
+    Docs: https://reactbits.dev/text-animations/masked-heading
+    """
+
+    tag = "MaskedHeading"
+    alias = "ReactBitsMaskedHeading"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "MaskedHeading"
+    _rb_files = ('MaskedHeading.css', 'MaskedHeading.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    text: rx.Var[str] = field(
+        doc="Heading copy. Default: 'Designed in the details'."
+    )
+    tag_: rx.Var[str] = field(
+        doc="Element the heading renders as, so it can carry the right semantics. Default: 'h2'."
+    )
+    media_type: rx.Var[Literal["image", "video"]] = field(
+        doc="Whether the source showing through the letters is an image or a looping muted video. Default: 'image'."
+    )
+    src: rx.Var[str] = field(
+        doc="Image or video URL."
+    )
+    poster: rx.Var[str] = field(
+        doc="Poster frame used while a video loads."
+    )
+    fill_scale: rx.Var[int | float] = field(
+        doc="How far the media is zoomed past the heading. The overscan is what parallax travels into. Default: 1.25."
+    )
+    parallax: rx.Var[int | float] = field(
+        doc="How far the media slides under the letters as the pointer moves, in px. Default: 26."
+    )
+    drift: rx.Var[int | float] = field(
+        doc="Amplitude of the slow idle motion, in px. 0 holds the media still. Default: 18."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Brightness of the media. Default: 1."
+    )
+    saturation: rx.Var[int | float] = field(
+        doc="Saturation of the media. Default: 1."
+    )
+    grayscale: rx.Var[bool] = field(
+        doc="Render the media in black and white. Default: false."
+    )
+    reveal: rx.Var[Literal["rise", "wipe", "fade", "none"]] = field(
+        doc="Entrance style: words rise into place, a wipe sweeps across, or the whole block fades up. Default: 'rise'."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Entrance duration, in seconds. Default: 1.1."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Delay between words, in seconds. Used by the rise reveal. Default: 0.09."
+    )
+    trigger: rx.Var[Literal["view", "mount", "hover"]] = field(
+        doc="When the entrance runs. Default: 'view'."
+    )
+    align: rx.Var[Literal["left", "center", "right"]] = field(
+        doc="Text alignment. Default: 'center'."
+    )
+    weight: rx.Var[int | float] = field(
+        doc="Font weight. Default: 700."
+    )
+    tracking: rx.Var[int | float] = field(
+        doc="Letter spacing, in em. Default: -0.03."
+    )
+    line_height: rx.Var[int | float] = field(
+        doc="Line height. Default: 1.06."
+    )
+    text_scale: rx.Var[int | float] = field(
+        doc="Type size as a fraction of the container width, so the heading stays responsive. Default: 0.115."
+    )
+
+
+class ParticleText(ReactBitsComponent):
+    """Text assembles from drifting particles that scatter and reform on demand.
+
+    Docs: https://reactbits.dev/text-animations/particle-text
+    """
+
+    tag = "ParticleText"
+    alias = "ReactBitsParticleText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "ParticleText"
+    _rb_files = ('ParticleText.css', 'ParticleText.jsx')
+
+    text: rx.Var[str] = field(
+        doc="The words sampled into particle targets. Default: 'React Bits'."
+    )
+    particle_size: rx.Var[int | float] = field(
+        doc="Rendered size of each particle in CSS pixels. Default: 2."
+    )
+    density: rx.Var[int | float] = field(
+        doc="Pixel sampling step for the offscreen glyph canvas. Lower values create more particles. Default: 4."
+    )
+    color: rx.Var[str] = field(
+        doc="Primary particle color. Default: '#ffffff'."
+    )
+    highlight_color: rx.Var[str] = field(
+        doc="Secondary color blended through the particle field. Default: '#8b5cf6'."
+    )
+    scatter: rx.Var[int | float] = field(
+        doc="How far particles begin from their final glyph targets. Default: 180."
+    )
+    gather_duration: rx.Var[int | float] = field(
+        doc="Milliseconds for particles to converge into the text. Default: 1600."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Maximum per-particle delay in milliseconds before gathering. Default: 420."
+    )
+    pointer_repel: rx.Var[int | float] = field(
+        doc="Strength of the cursor pushback. Default: 40."
+    )
+    repel_radius: rx.Var[int | float] = field(
+        doc="Cursor influence radius in pixels. Default: 120."
+    )
+    idle_drift: rx.Var[int | float] = field(
+        doc="Subtle resting motion after the text has formed. Default: 0.7."
+    )
+    trigger: rx.Var[Literal["mount", "hover", "click"]] = field(
+        doc="How the scatter-and-reform sequence can replay after the first formation. Default: 'mount'."
+    )
+    font_size: rx.Var[int | float | str] = field(
+        doc="Canvas text size used for glyph sampling. Default: 'clamp(3rem, 12vw, 8rem)'."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="Font weight used for sampling. Default: 800."
+    )
+    font_family: rx.Var[str] = field(
+        doc="Font family used for sampling. Inherit waits for the surrounding font before sampling. Default: 'inherit'."
+    )
+    glow: rx.Var[bool] = field(
+        doc="Adds a soft particle bloom in the highlight color. Default: true."
+    )
+
+
+class RotatingText(ReactBitsComponent):
+    """Cycles through multiple phrases with 3D rotate / flip transitions.
+
+    Docs: https://reactbits.dev/text-animations/rotating-text
+    """
+
+    tag = "RotatingText"
+    alias = "ReactBitsRotatingText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "RotatingText"
+    _rb_files = ('RotatingText.css', 'RotatingText.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    texts: rx.Var[list[str]] = field(
+        doc="An array of text strings to be rotated. Default: []."
+    )
+    transition: rx.Var[dict[str, Any]] = field(
+        doc="Transition settings for the animations. Default: { type: 'spring', damping: 25, stiffness: 300 }."
+    )
+    initial: rx.Var[dict[str, Any]] = field(
+        doc="Initial animation state for each element. Default: { y: '100%', opacity: 0 }."
+    )
+    animate: rx.Var[dict[str, Any]] = field(
+        doc="Animation state when elements enter. Default: { y: 0, opacity: 1 }."
+    )
+    exit: rx.Var[dict[str, Any]] = field(
+        doc="Exit animation state for elements. Default: { y: '-120%', opacity: 0 }."
+    )
+    animate_presence_mode: rx.Var[str] = field(
+        doc="Mode for AnimatePresence; for example, 'wait' to finish exit animations before entering. Default: 'wait'."
+    )
+    animate_presence_initial: rx.Var[bool] = field(
+        doc="Determines whether the AnimatePresence component should run its initial animation. Default: false."
+    )
+    rotation_interval: rx.Var[int | float] = field(
+        doc="The interval (in milliseconds) between text rotations. Default: 2000."
+    )
+    stagger_duration: rx.Var[int | float] = field(
+        doc="Delay between each character's animation. Default: 0."
+    )
+    stagger_from: rx.Var[str] = field(
+        doc="Specifies the order from which the stagger starts. Default: 'first'."
+    )
+    loop: rx.Var[bool] = field(
+        doc="Determines if the rotation should loop back to the first text after the last one. Default: true."
+    )
+    auto: rx.Var[bool] = field(
+        doc="If true, the text rotation starts automatically. Default: true."
+    )
+    split_by: rx.Var[str] = field(
+        doc="Determines how the text is split into animatable elements (e.g., by characters, words, or lines). Default: 'characters'."
+    )
+    main_class_name: rx.Var[str] = field(
+        doc="Additional class names for the main container element."
+    )
+    split_level_class_name: rx.Var[str] = field(
+        doc="Additional class names for the container wrapping each split group (e.g., a word)."
+    )
+    element_level_class_name: rx.Var[str] = field(
+        doc="Additional class names for each individual animated element."
+    )
+    on_next: rx.EventHandler[lambda new_index: [safe(new_index)]] = field(
+        doc="Callback function invoked when the text rotates to the next item. Handler receives: new_index."
+    )
+
+
+class ScrambledText(ReactBitsComponent):
+    """Detects cursor position and applies a distortion effect to text.
+
+    Docs: https://reactbits.dev/text-animations/scrambled-text
+    """
+
+    tag = "ScrambledText"
+    alias = "ReactBitsScrambledText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "ScrambledText"
+    _rb_files = ('ScrambledText.css', 'ScrambledText.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    radius: rx.Var[int | float] = field(
+        doc="The radius around the mouse pointer within which characters will scramble. Default: 100."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="The duration of the scramble effect on a character. Default: 1.2."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="The speed of the scramble animation. Default: 0.5."
+    )
+    scramble_chars: rx.Var[str] = field(
+        doc="The characters used for scrambling. Default: '.:'."
+    )
+
+
+class ScrollFloat(ReactBitsComponent):
+    """Text gently floats / parallax shifts on scroll.
+
+    Docs: https://reactbits.dev/text-animations/scroll-float
+    """
+
+    tag = "ScrollFloat"
+    alias = "ReactBitsScrollFloat"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "ScrollFloat"
+    _rb_files = ('ScrollFloat.css', 'ScrollFloat.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    scroll_container_ref: rx.Var[Any] = field(
+        doc="Optional ref to the scroll container. Defaults to window if not provided. Default: window."
+    )
+    container_class_name: rx.Var[str] = field(
+        doc="Additional Tailwind classes for the container element."
+    )
+    text_class_name: rx.Var[str] = field(
+        doc="Additional Tailwind classes for the text element."
+    )
+    animation_duration: rx.Var[int | float] = field(
+        doc="Duration (in seconds) of the animation. Default: 1."
+    )
+    ease: rx.Var[str] = field(
+        doc="Easing function used for the animation. Default: 'back.inOut(2)'."
+    )
+    scroll_start: rx.Var[str] = field(
+        doc="The scroll trigger start position. Default: 'center bottom+=50%'."
+    )
+    scroll_end: rx.Var[str] = field(
+        doc="The scroll trigger end position. Default: 'bottom bottom-=40%'."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Delay between the animation start of each character. Default: 0.03."
+    )
+
+
+class ScrollReveal(ReactBitsComponent):
+    """Text gently unblurs and reveals on scroll.
+
+    Docs: https://reactbits.dev/text-animations/scroll-reveal
+    """
+
+    tag = "ScrollReveal"
+    alias = "ReactBitsScrollReveal"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "ScrollReveal"
+    _rb_files = ('ScrollReveal.css', 'ScrollReveal.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    scroll_container_ref: rx.Var[Any] = field(
+        doc="Optional ref for the scroll container. If provided, GSAP will use this container for scroll triggers; otherwise, it defaults to the window. Default: window."
+    )
+    enable_blur: rx.Var[bool] = field(
+        doc="Enables the blur animation effect on the words. Default: true."
+    )
+    base_opacity: rx.Var[int | float] = field(
+        doc="The initial opacity value for the words before the animation. Default: 0.1."
+    )
+    base_rotation: rx.Var[int | float] = field(
+        doc="The starting rotation (in degrees) for the container before it animates to 0. Default: 3."
+    )
+    blur_strength: rx.Var[int | float] = field(
+        doc="The strength of the blur effect (in pixels) applied at the start of the animation. Default: 4."
+    )
+    container_class_name: rx.Var[str] = field(
+        doc="Additional CSS class(es) to apply to the container element."
+    )
+    text_class_name: rx.Var[str] = field(
+        doc="Additional CSS class(es) to apply to the text element."
+    )
+    rotation_end: rx.Var[str] = field(
+        doc="The scroll trigger end point for the container rotation animation. Default: 'bottom bottom'."
+    )
+    word_animation_end: rx.Var[str] = field(
+        doc="The scroll trigger end point for the word opacity and blur animations. The animation will complete when the bottom of the text reaches the bottom of the container. Default: 'bottom bottom'."
+    )
+
+
+class ScrollVelocity(ReactBitsComponent):
+    """Text marquee animatio - speed and distortion scale with user's scroll velocity.
+
+    Docs: https://reactbits.dev/text-animations/scroll-velocity
+    """
+
+    tag = "ScrollVelocity"
+    alias = "ReactBitsScrollVelocity"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "ScrollVelocity"
+    _rb_files = ('ScrollVelocity.css', 'ScrollVelocity.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    scroll_container_ref: rx.Var[Any] = field(
+        doc="Optional ref for a custom scroll container to track scroll position."
+    )
+    texts: rx.Var[list[Any]] = field(
+        doc="Array of items to display as scrolling content. Accepts strings, JSX elements, icons, or any valid React node. Default: []."
+    )
+    velocity: rx.Var[int | float] = field(
+        doc="Base velocity for scrolling; sign is flipped for odd indexed texts. Default: 100."
+    )
+    damping: rx.Var[int | float] = field(
+        doc="Damping value for the spring animation. Default: 50."
+    )
+    stiffness: rx.Var[int | float] = field(
+        doc="Stiffness value for the spring animation. Default: 400."
+    )
+    num_copies: rx.Var[int | float] = field(
+        doc="Number of copies of the text rendered for a continuous scrolling effect. Default: 6."
+    )
+    velocity_mapping: rx.Var[list[Any]] = field(
+        doc="Mapping from scroll velocity to a movement multiplier for dynamic scrolling. Default: { input: [0, 1000], output: [0, 5] }."
+    )
+    parallax_class_name: rx.Var[str] = field(
+        doc="CSS class for the parallax container. Default: 'parallax'."
+    )
+    scroller_class_name: rx.Var[str] = field(
+        doc="CSS class for the scroller container. Default: 'scroller'."
+    )
+    parallax_style: rx.Var[dict[str, Any]] = field(
+        doc="Inline styles for the parallax container."
+    )
+    scroller_style: rx.Var[dict[str, Any]] = field(
+        doc="Inline styles for the scroller container."
+    )
+
+
+class ShinyText(ReactBitsComponent):
+    """Metallic sheen sweeps across text producing a reflective highlight.
+
+    Docs: https://reactbits.dev/text-animations/shiny-text
+    """
+
+    tag = "ShinyText"
+    alias = "ReactBitsShinyText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "ShinyText"
+    _rb_files = ('ShinyText.css', 'ShinyText.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    text: rx.Var[str] = field(
+        doc="The text to be displayed with the shiny effect. Default: -."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Disables the shiny effect when set to true. Default: false."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Duration of one animation cycle in seconds. Default: 2."
+    )
+    color: rx.Var[str] = field(
+        doc="The base color of the text. Default: '#b5b5b5'."
+    )
+    shine_color: rx.Var[str] = field(
+        doc="The color of the shine/highlight effect. Default: '#ffffff'."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="The angle (in degrees) of the gradient spread. Default: 120."
+    )
+    yoyo: rx.Var[bool] = field(
+        doc="If true, the animation reverses direction instead of looping. Default: false."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Pauses the animation when the user hovers over the text. Default: false."
+    )
+    direction: rx.Var[Literal["left", "right"]] = field(
+        doc="The direction the shine moves across the text. Default: 'left'."
+    )
+    delay: rx.Var[int | float] = field(
+        doc="Pause duration (in seconds) between animation cycles. Default: 0."
+    )
+
+
+class Shuffle(ReactBitsComponent):
+    """Animated text reveal where characters shuffle before settling.
+
+    Docs: https://reactbits.dev/text-animations/shuffle
+    """
+
+    tag = "Shuffle"
+    alias = "ReactBitsShuffle"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "Shuffle"
+    _rb_files = ('Shuffle.css', 'Shuffle.jsx')
+    lib_dependencies: list[str] = ['@gsap/react@2.1.2', 'gsap@3.13.0']
+
+    text: rx.Var[str] = field(
+        doc="The text content to shuffle."
+    )
+    shuffle_direction: rx.Var[Literal["left", "right", "up", "down"]] = field(
+        doc="Direction the per-letter strip slides to reveal the final character. Default: 'right'."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Duration (s) of the strip slide per letter. Default: 0.35."
+    )
+    max_delay: rx.Var[int | float] = field(
+        doc="Max random delay per strip when animationMode = \"random\". Default: 0."
+    )
+    ease: rx.Var[Any] = field(
+        doc="GSAP ease for sliding and color tween. Default: 'power3.out'."
+    )
+    threshold: rx.Var[int | float] = field(
+        doc="Portion of the element that must enter view before starting. Default: 0.1."
+    )
+    root_margin: rx.Var[str] = field(
+        doc="ScrollTrigger start offset (px, %, etc.). Default: '-100px'."
+    )
+    tag_: rx.Var[Literal["h1", "h2", "h3", "h4", "h5", "h6", "p", "span"]] = field(
+        doc="HTML tag to render for the text container. Default: 'p'."
+    )
+    text_align: rx.Var[str] = field(
+        doc="Text alignment applied via inline style. Default: 'center'."
+    )
+    shuffle_times: rx.Var[int | float] = field(
+        doc="How many interim scrambled glyphs to scroll past before the final char. Default: 1."
+    )
+    animation_mode: rx.Var[Literal["evenodd", "random"]] = field(
+        doc="Odd/even staggered strips or random per-strip delays. Default: 'evenodd'."
+    )
+    loop: rx.Var[bool] = field(
+        doc="Repeat the shuffle indefinitely. Default: false."
+    )
+    loop_delay: rx.Var[int | float] = field(
+        doc="Delay (s) between loop repeats. Default: 0."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Stagger (s) for strips in \"evenodd\" mode. Default: 0.03."
+    )
+    scramble_charset: rx.Var[str] = field(
+        doc="Characters to use for interim scrambles; empty keeps original copies."
+    )
+    color_from: rx.Var[str] = field(
+        doc="Optional starting text color while shuffling."
+    )
+    color_to: rx.Var[str] = field(
+        doc="Optional final text color to tween to."
+    )
+    trigger_once: rx.Var[bool] = field(
+        doc="Auto-run only on first scroll into view. Default: true."
+    )
+    respect_reduced_motion: rx.Var[bool] = field(
+        doc="Skip animation if user prefers reduced motion. Default: true."
+    )
+    trigger_on_hover: rx.Var[bool] = field(
+        doc="Allow re-playing the animation on hover after it completes. Default: true."
+    )
+    on_shuffle_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Called after a full run completes (and on each loop repeat)."
+    )
+
+
+class SplitFlapText(ReactBitsComponent):
+    """Mechanical split-flap departure board that clacks through to each new phrase.
+
+    Docs: https://reactbits.dev/text-animations/split-flap-text
+    """
+
+    tag = "SplitFlapText"
+    alias = "ReactBitsSplitFlapText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "SplitFlapText"
+    _rb_files = ('SplitFlapText.css', 'SplitFlapText.jsx')
+
+    words: rx.Var[list[str]] = field(
+        doc="Phrases to cycle through like a departure board. Default: ['LAUNCH READY', 'SYNC ONLINE', 'SIGNAL LIVE']."
+    )
+    text: rx.Var[str] = field(
+        doc="Optional single phrase. When set, it takes precedence over words."
+    )
+    flip_duration: rx.Var[int | float] = field(
+        doc="Duration, in seconds, of each individual flap turn. Default: 0.12."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Delay, in seconds, between each tile starting its cascade. Default: 0.06."
+    )
+    cycle_delay: rx.Var[int | float] = field(
+        doc="Hold time, in milliseconds, before cycling to the next phrase. Default: 2400."
+    )
+    charset: rx.Var[str] = field(
+        doc="Characters used for the intermediate flip glyphs. Default: 'alphanumeric'."
+    )
+    flips_per_char: rx.Var[int | float] = field(
+        doc="Number of intermediate glyphs each changed tile flips through. Default: 8."
+    )
+    tile_color: rx.Var[str] = field(
+        doc="Base color of each mechanical tile. Default: '#111827'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Color of the glyphs on every flap. Default: '#f8fafc'."
+    )
+    tile_radius: rx.Var[int | float | str] = field(
+        doc="Corner radius for each tile. Default: 8."
+    )
+    gap: rx.Var[int | float | str] = field(
+        doc="Space between adjacent flap tiles. Default: 6."
+    )
+    font_size: rx.Var[int | float | str] = field(
+        doc="Tile type size. Numeric values are treated as pixels. Default: 52."
+    )
+    loop: rx.Var[bool] = field(
+        doc="Whether the phrase array repeats after the final phrase. Default: true."
+    )
+    pad_to: rx.Var[int | float] = field(
+        doc="Fixed tile count used to keep the board width stable. Default: 12."
+    )
+
+
+class SplitText(ReactBitsComponent):
+    """Splits text into characters / words for staggered entrance animation.
+
+    Docs: https://reactbits.dev/text-animations/split-text
+    """
+
+    tag = "SplitText"
+    alias = "ReactBitsSplitText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "SplitText"
+    _rb_files = ('SplitText.jsx',)
+    lib_dependencies: list[str] = ['@gsap/react@2.1.2', 'gsap@3.13.0']
+
+    text: rx.Var[str] = field(
+        doc="The text content to animate."
+    )
+    delay: rx.Var[int | float] = field(
+        doc="Delay between animations for each letter (in ms). Default: 50."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Duration of each letter animation (in seconds). Default: 1.25."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing function for the animation. Default: 'power3.out'."
+    )
+    split_type: rx.Var[str] = field(
+        doc="Split type: \"chars\", \"words\", \"lines\", or \"words, chars\". Default: 'chars'."
+    )
+    from_: rx.Var[dict[str, Any]] = field(
+        doc="Initial GSAP properties for each letter/word. Default: { opacity: 0, y: 40 }."
+    )
+    to: rx.Var[dict[str, Any]] = field(
+        doc="Target GSAP properties for each letter/word. Default: { opacity: 1, y: 0 }."
+    )
+    threshold: rx.Var[int | float] = field(
+        doc="Intersection threshold to trigger the animation (0-1). Default: 0.1."
+    )
+    root_margin: rx.Var[str] = field(
+        doc="Root margin for the ScrollTrigger. Default: '-100px'."
+    )
+    text_align: rx.Var[str] = field(
+        doc="Text alignment: 'left', 'center', 'right', etc. Default: 'center'."
+    )
+    tag_: rx.Var[str] = field(
+        doc="HTML tag to render: \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", \"p\",. Default: 'p'."
+    )
+    on_letter_animation_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function when all animations complete."
+    )
+
+
+class StrokeText(ReactBitsComponent):
+    """Outlined letterforms draw themselves on, then flood with fill.
+
+    Docs: https://reactbits.dev/text-animations/stroke-text
+    """
+
+    tag = "StrokeText"
+    alias = "ReactBitsStrokeText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "StrokeText"
+    _rb_files = ('StrokeText.css', 'StrokeText.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    text: rx.Var[str] = field(
+        doc="The heading copy rendered as measured SVG glyphs. Default: DEFAULT_TEXT."
+    )
+    stroke_color: rx.Var[str] = field(
+        doc="Color used for the drawing outline. Default: '#A78BFA'."
+    )
+    fill_color: rx.Var[str] = field(
+        doc="Color that floods into the glyphs after the outline draw. Default: '#F8FAFC'."
+    )
+    stroke_width: rx.Var[int | float] = field(
+        doc="Width of the SVG text outline. Default: 1.4."
+    )
+    draw_duration: rx.Var[int | float] = field(
+        doc="Seconds each character outline spends drawing on. Default: 1.6."
+    )
+    fill_delay: rx.Var[int | float] = field(
+        doc="Seconds to wait after the outline draw before the fill begins. Default: 0.2."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Delay in seconds between each character animation. Default: 0.05."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing used for the outline draw. Default: 'power2.out'."
+    )
+    trigger: rx.Var[Literal["mount", "hover", "scroll", "loop"]] = field(
+        doc="Chooses when the draw timeline starts. Default: 'mount'."
+    )
+    fill_mode: rx.Var[Literal["fade", "wipe", "none"]] = field(
+        doc="Controls whether fill appears with a fade, left-to-right wipe, or not at all. Default: 'wipe'."
+    )
+    font_size: rx.Var[int | float | str] = field(
+        doc="SVG font size before the responsive viewBox scales the wordmark. Default: 128."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="Weight of the rendered letterforms. Default: 800."
+    )
+    letter_spacing: rx.Var[int | float | str] = field(
+        doc="Tracking applied during measurement and rendering. Default: -4."
+    )
+    reverse: rx.Var[bool] = field(
+        doc="Draws the stagger from the final character back to the first. Default: false."
+    )
+
+
+class TextCursor(ReactBitsComponent):
+    """Make any text element follow your cursor, leaving a trail of copies behind it.
+
+    Docs: https://reactbits.dev/text-animations/text-cursor
+    """
+
+    tag = "TextCursor"
+    alias = "ReactBitsTextCursor"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "TextCursor"
+    _rb_files = ('TextCursor.css', 'TextCursor.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    text: rx.Var[str] = field(
+        doc="The text string to display as the trail. Default: '\u269b\ufe0f'."
+    )
+    spacing: rx.Var[int | float] = field(
+        doc="The spacing in pixels between each trail point. Default: 100."
+    )
+    follow_mouse_direction: rx.Var[bool] = field(
+        doc="If true, each text rotates to follow the mouse direction. Default: true."
+    )
+    random_float: rx.Var[bool] = field(
+        doc="If true, enables random floating offsets in position and rotation for a dynamic effect. Default: true."
+    )
+    exit_duration: rx.Var[int | float] = field(
+        doc="The duration in seconds for the exit animation of each trail item. Default: 0.5."
+    )
+    removal_interval: rx.Var[int | float] = field(
+        doc="The interval in milliseconds between removing trail items when the mouse stops moving. Default: 30."
+    )
+    max_points: rx.Var[int | float] = field(
+        doc="The maximum number of trail points to display. Default: 5."
+    )
+
+
+class TextLoop(ReactBitsComponent):
+    """A seamless text marquee that flows along curved SVG paths.
+
+    Docs: https://reactbits.dev/text-animations/text-loop
+    """
+
+    tag = "TextLoop"
+    alias = "ReactBitsTextLoop"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "TextLoop"
+    _rb_files = ('TextLoop.css', 'TextLoop.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    text: rx.Var[str] = field(
+        doc="The phrase repeated along the curve. Default: 'React \u2726 Bits'."
+    )
+    shape: rx.Var[Literal["wave", "circle", "infinity", "arch", "line"]] = field(
+        doc="Built-in curve the text flows along. Default: 'wave'."
+    )
+    path: rx.Var[str] = field(
+        doc="Custom SVG path data, drawn in a 1200x400 viewBox. Overrides shape when provided."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Travel speed along the path, in units per second. Default: 90."
+    )
+    direction: rx.Var[Literal["forward", "reverse"]] = field(
+        doc="Direction the text scrolls around the curve. Default: 'forward'."
+    )
+    separator: rx.Var[str] = field(
+        doc="Glyph placed between each repetition. Default: '\u2726'."
+    )
+    curviness: rx.Var[int | float] = field(
+        doc="Amplitude of the wave, or the radius of the closed shapes. Default: 90."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Font size of the looping text. Default: 46."
+    )
+    font_weight: rx.Var[int | float] = field(
+        doc="Font weight of the looping text. Default: 800."
+    )
+    letter_spacing: rx.Var[int | float] = field(
+        doc="Extra tracking between letters. Default: 2."
+    )
+    uppercase: rx.Var[bool] = field(
+        doc="Renders the phrase in uppercase. Default: true."
+    )
+    color: rx.Var[str] = field(
+        doc="Fill color of the text. Default: '#ffffff'."
+    )
+    ribbon: rx.Var[bool] = field(
+        doc="Draws a solid band behind the text along the path. Default: true."
+    )
+    ribbon_color: rx.Var[str] = field(
+        doc="Color of the band behind the text. Default: '#5227FF'."
+    )
+    ribbon_width: rx.Var[int | float] = field(
+        doc="Thickness of the band behind the text. Default: 86."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Pauses the loop while the pointer is over it. Default: true."
+    )
+
+
+class TextPressure(ReactBitsComponent):
+    """Characters scale / warp interactively based on pointer pressure zone.
+
+    Docs: https://reactbits.dev/text-animations/text-pressure
+    """
+
+    tag = "TextPressure"
+    alias = "ReactBitsTextPressure"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "TextPressure"
+    _rb_files = ('TextPressure.jsx',)
+
+    text: rx.Var[str] = field(
+        doc="Text content that will be displayed and animated. Default: 'Compressa'."
+    )
+    font_family: rx.Var[str] = field(
+        doc="Name of the variable font family. Default: 'Roboto Flex'."
+    )
+    font_url: rx.Var[str] = field(
+        doc="URL for the variable font file (needed). Default: 'https://fonts.googleapis.com/css2?family=Roboto+Flex:ops...."
+    )
+    width: rx.Var[bool] = field(
+        doc="If true, varies the variable-font \"width\" axis. Default: true."
+    )
+    weight: rx.Var[bool] = field(
+        doc="If true, varies the variable-font \"weight\" axis. Default: true."
+    )
+    italic: rx.Var[bool] = field(
+        doc="If true, varies the variable-font \"italics\" axis. Default: true."
+    )
+    alpha: rx.Var[bool] = field(
+        doc="If true, applies an opacity effect based on cursor distance. Default: false."
+    )
+    flex: rx.Var[bool] = field(
+        doc="Whether the characters are spaced using flex layout. Default: true."
+    )
+    stroke: rx.Var[bool] = field(
+        doc="If true, adds a stroke effect around characters. Default: false."
+    )
+    scale: rx.Var[bool] = field(
+        doc="If true, vertically scales the text to fill its container height. Default: false."
+    )
+    text_color: rx.Var[str] = field(
+        doc="The fill color of the text. Default: '#FFFFFF'."
+    )
+    stroke_color: rx.Var[str] = field(
+        doc="The stroke color that will be applied to the text when \"stroke\" is set to true. Default: '#FF0000'."
+    )
+    min_font_size: rx.Var[int | float] = field(
+        doc="Sets a minimum font-size to avoid overly tiny text on smaller screens. Default: 24."
+    )
+
+
+class TextType(ReactBitsComponent):
+    """Typewriter effect with blinking cursor and adjustable typing cadence.
+
+    Docs: https://reactbits.dev/text-animations/text-type
+    """
+
+    tag = "TextType"
+    alias = "ReactBitsTextType"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "TextType"
+    _rb_files = ('TextType.css', 'TextType.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    text: rx.Var[str | list[str]] = field(
+        doc="Text or array of texts to type out. Default: -."
+    )
+    as_: rx.Var[rx.Component | str] = field(
+        doc="HTML tag to render the component as. Default: 'div'."
+    )
+    typing_speed: rx.Var[int | float] = field(
+        doc="Speed of typing in milliseconds. Default: 50."
+    )
+    initial_delay: rx.Var[int | float] = field(
+        doc="Initial delay before typing starts. Default: 0."
+    )
+    pause_duration: rx.Var[int | float] = field(
+        doc="Time to wait between typing and deleting. Default: 2000."
+    )
+    deleting_speed: rx.Var[int | float] = field(
+        doc="Speed of deleting characters. Default: 30."
+    )
+    loop: rx.Var[bool] = field(
+        doc="Whether to loop through texts array. Default: true."
+    )
+    show_cursor: rx.Var[bool] = field(
+        doc="Whether to show the cursor. Default: true."
+    )
+    hide_cursor_while_typing: rx.Var[bool] = field(
+        doc="Hide cursor while typing. Default: false."
+    )
+    cursor_character: rx.Var[rx.Component | str] = field(
+        doc="Character or React node to use as cursor. Default: '|'."
+    )
+    cursor_class_name: rx.Var[str] = field(
+        doc="Optional class name for cursor styling."
+    )
+    cursor_blink_duration: rx.Var[int | float] = field(
+        doc="Animation duration for cursor blinking. Default: 0.5."
+    )
+    text_colors: rx.Var[list[str]] = field(
+        doc="Array of colors for each sentence. Default: []."
+    )
+    variable_speed: rx.Var[dict[str, Any]] = field(
+        doc="Random typing speed within range for human-like feel."
+    )
+    start_on_visible: rx.Var[bool] = field(
+        doc="Start typing when component is visible in viewport. Default: false."
+    )
+    reverse_mode: rx.Var[bool] = field(
+        doc="Type backwards (right to left). Default: false."
+    )
+    on_sentence_complete: rx.EventHandler[lambda sentence, index: [safe(sentence), safe(index)]] = field(
+        doc="Callback fired after each sentence is finished Handler receives: sentence, index."
+    )
+
+
+class TrueFocus(ReactBitsComponent):
+    """Applies dynamic blur / clarity based over a series of words in order.
+
+    Docs: https://reactbits.dev/text-animations/true-focus
+    """
+
+    tag = "TrueFocus"
+    alias = "ReactBitsTrueFocus"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "TrueFocus"
+    _rb_files = ('TrueFocus.css', 'TrueFocus.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    sentence: rx.Var[str] = field(
+        doc="The text to display with the focus animation. Default: 'True Focus'."
+    )
+    separator: rx.Var[str] = field(
+        doc="Optional string used to separate words in the sentence. Default: ' '."
+    )
+    manual_mode: rx.Var[bool] = field(
+        doc="Disables automatic animation when set to true. Default: false."
+    )
+    blur_amount: rx.Var[int | float] = field(
+        doc="The amount of blur applied to non-active words. Default: 5."
+    )
+    border_color: rx.Var[str] = field(
+        doc="The color of the focus borders. Default: 'green'."
+    )
+    glow_color: rx.Var[str] = field(
+        doc="The color of the glowing effect on the borders. Default: 'rgba(0, 255, 0, 0.6)'."
+    )
+    animation_duration: rx.Var[int | float] = field(
+        doc="The duration of the animation for each word. Default: 0.5."
+    )
+    pause_between_animations: rx.Var[int | float] = field(
+        doc="Time to pause between focusing on each word (in auto mode). Default: 1."
+    )
+
+
+class VariableProximity(ReactBitsComponent):
+    """Letter styling changes continuously with pointer distance mapping.
+
+    Docs: https://reactbits.dev/text-animations/variable-proximity
+    """
+
+    tag = "VariableProximity"
+    alias = "ReactBitsVariableProximity"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "VariableProximity"
+    _rb_files = ('VariableProximity.css', 'VariableProximity.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    label: rx.Var[str] = field(
+        doc="The text content to display."
+    )
+    from_font_variation_settings: rx.Var[str] = field(
+        doc="The starting variation settings. Default: 'wght' 400, 'opsz' 9."
+    )
+    to_font_variation_settings: rx.Var[str] = field(
+        doc="The variation settings to reach at cursor proximity. Default: 'wght' 800, 'opsz' 40."
+    )
+    container_ref: rx.Var[Any] = field(
+        doc="Reference to container for relative calculations."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Proximity radius to influence the effect. Default: 50."
+    )
+    falloff: rx.Var[Literal["linear", "exponential", "gaussian"]] = field(
+        doc="Type of falloff for the effect. Default: 'linear'."
+    )
+
+
+class WarpText(ReactBitsComponent):
+    """WebGL warp that bends and refracts the text around the pointer.
+
+    Docs: https://reactbits.dev/text-animations/warp-text
+    """
+
+    tag = "WarpText"
+    alias = "ReactBitsWarpText"
+    is_default = True
+    _rb_category = "TextAnimations"
+    _rb_name = "WarpText"
+    _rb_files = ('WarpText.css', 'WarpText.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    text: rx.Var[str] = field(
+        doc="The headline text rendered into the WebGL texture. Default: 'Bend the moment'."
+    )
+    color: rx.Var[str] = field(
+        doc="Text fill color before the glass refraction pass. Default: '#f8f5ff'."
+    )
+    warp_strength: rx.Var[int | float] = field(
+        doc="Amount of ambient glass distortion at rest. Default: 0.08."
+    )
+    warp_scale: rx.Var[int | float] = field(
+        doc="Size of the moving distortion cells. Default: 1.7."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Speed of the ambient undulation. Default: 0.55."
+    )
+    pointer_influence: rx.Var[int | float] = field(
+        doc="Radius of the cursor lensing area. Default: 0.42."
+    )
+    pointer_strength: rx.Var[int | float] = field(
+        doc="Strength of cursor-driven bending and magnification. Default: 0.38."
+    )
+    refraction: rx.Var[int | float] = field(
+        doc="Subtle RGB channel split for the glass edge. Default: 0.018."
+    )
+    ripple: rx.Var[bool] = field(
+        doc="Adds a soft ripple to the pointer lens. Default: true."
+    )
+    font_size: rx.Var[int | float | str] = field(
+        doc="Canvas raster font size. Numbers are pixels. Default: 'clamp(3rem, 10vw, 9rem)'."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="Font weight used when rasterising the text texture. Default: 800."
+    )
+    font_family: rx.Var[str] = field(
+        doc="Font family used when rasterising the text texture. Default: 'inherit'."
+    )
+    letter_spacing: rx.Var[int | float | str] = field(
+        doc="Tracking applied while drawing the text into the texture. Default: '-0.06em'."
+    )
+    line_height: rx.Var[int | float | str] = field(
+        doc="Line height for multi-line text. Default: 0.9."
+    )
+
+
+ascii_text = ASCIIText.create
+blur_text = BlurText.create
+circular_text = CircularText.create
+count_up = CountUp.create
+curved_loop = CurvedLoop.create
+decrypted_text = DecryptedText.create
+depth_text = DepthText.create
+echo_text = EchoText.create
+falling_text = FallingText.create
+fold_text = FoldText.create
+fuzzy_text = FuzzyText.create
+glitch_text = GlitchText.create
+gradient_text = GradientText.create
+masked_heading = MaskedHeading.create
+particle_text = ParticleText.create
+rotating_text = RotatingText.create
+scrambled_text = ScrambledText.create
+scroll_float = ScrollFloat.create
+scroll_reveal = ScrollReveal.create
+scroll_velocity = ScrollVelocity.create
+shiny_text = ShinyText.create
+shuffle = Shuffle.create
+split_flap_text = SplitFlapText.create
+split_text = SplitText.create
+stroke_text = StrokeText.create
+text_cursor = TextCursor.create
+text_loop = TextLoop.create
+text_pressure = TextPressure.create
+text_type = TextType.create
+true_focus = TrueFocus.create
+variable_proximity = VariableProximity.create
+warp_text = WarpText.create