reflex-reactbits 0.1.1__py3-none-any.whl

reflex_reactbits/components.py

@@ -0,0 +1,2383 @@
+"""React Bits - UI components.
+
+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__ = ['AccordionGallery', 'AnimatedList', 'BorderGlow', 'BounceCards', 'BubbleMenu', 'CardNav', 'CardSwap', 'CardSwapCard', 'Carousel', 'ChromaGrid', 'CircularGallery', 'Counter', 'CurvedInput', 'DecayCard', 'DepthCarousel', 'Dock', 'DomeGallery', 'DriftWall', 'ElasticSlider', 'FlowingMenu', 'FluidGlass', 'FlyingPosters', 'Folder', 'GlassIcons', 'GlassSurface', 'GooeyNav', 'InfiniteMenu', 'InfiniteSpiral', 'Lanyard', 'LineSidebar', 'MagicBento', 'Masonry', 'ModelViewer', 'MorphSlider', 'OptionWheel', 'PillNav', 'PixelCard', 'ProfileCard', 'ReflectiveCard', 'ScrollStack', 'ScrollStackItem', 'SpecularButton', 'SpotlightCard', 'Stack', 'StaggeredMenu', 'Step', 'Stepper', 'TiltedCard', 'accordion_gallery', 'animated_list', 'border_glow', 'bounce_cards', 'bubble_menu', 'card_nav', 'card_swap', 'card_swap_card', 'carousel', 'chroma_grid', 'circular_gallery', 'counter', 'curved_input', 'decay_card', 'depth_carousel', 'dock', 'dome_gallery', 'drift_wall', 'elastic_slider', 'flowing_menu', 'fluid_glass', 'flying_posters', 'folder', 'glass_icons', 'glass_surface', 'gooey_nav', 'infinite_menu', 'infinite_spiral', 'lanyard', 'line_sidebar', 'magic_bento', 'masonry', 'model_viewer', 'morph_slider', 'option_wheel', 'pill_nav', 'pixel_card', 'profile_card', 'reflective_card', 'scroll_stack', 'scroll_stack_item', 'specular_button', 'spotlight_card', 'stack', 'staggered_menu', 'step', 'stepper', 'tilted_card']
+
+
+class AccordionGallery(ReactBitsComponent):
+    """Panels expand on hover or focus, revealing parallax imagery and captions.
+
+    Docs: https://reactbits.dev/components/accordion-gallery
+    """
+
+    tag = "AccordionGallery"
+    alias = "ReactBitsAccordionGallery"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "AccordionGallery"
+    _rb_files = ('AccordionGallery.css', 'AccordionGallery.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    items: rx.Var[list[Any]] = field(
+        doc="The panels to render. Each needs an image, and optionally a label, link and alt text. Default: DEFAULT_ITEMS."
+    )
+    default_index: rx.Var[int | float] = field(
+        doc="Index of the panel that is expanded on load, so the gallery never looks dead. Default: 2."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="Colour of the caption accent bar and the focus ring. Default: '#ffffff'."
+    )
+    overlay_color: rx.Var[str] = field(
+        doc="Colour used for the bottom legibility gradient and the dimming of collapsed panels. Default: '#060010'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Colour of the caption text. Default: '#ffffff'."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Height of the row in pixels (width of the column when vertical). Default: 460."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Gap between panels in pixels. Default: 10."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius of each panel in pixels. Default: 16."
+    )
+    expand_ratio: rx.Var[int | float] = field(
+        doc="Fraction of the row the expanded panel occupies (0.2 \u2013 0.9). Default: 0.52."
+    )
+    orientation: rx.Var[Literal["horizontal", "vertical"]] = field(
+        doc="Lay the accordion out as a row or a column. Default: 'horizontal'."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Duration of the expand / collapse transition in seconds. Default: 0.6."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing used for every transition. Default: 'power3.out'."
+    )
+    parallax: rx.Var[int | float] = field(
+        doc="Strength of the internal image drift as panels resize (0 disables it). Default: 0.5."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Degrees of 3D rotation applied to collapsed panels, easing to flat on the open one. Default: 8."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Delay between the caption bar and text reveal, in seconds. Default: 0.06."
+    )
+    trigger: rx.Var[Literal["hover", "click"]] = field(
+        doc="How a panel expands on pointer devices. Focus and tap always expand too. Default: 'hover'."
+    )
+    show_labels: rx.Var[bool] = field(
+        doc="Whether captions reveal on the expanded panel. Default: true."
+    )
+    grayscale: rx.Var[bool] = field(
+        doc="Desaturate collapsed panels and restore full colour on the expanded one. Default: true."
+    )
+
+
+class AnimatedList(ReactBitsComponent):
+    """List items enter with staggered motion variants for polished reveals.
+
+    Docs: https://reactbits.dev/components/animated-list
+    """
+
+    tag = "AnimatedList"
+    alias = "ReactBitsAnimatedList"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "AnimatedList"
+    _rb_files = ('AnimatedList.css', 'AnimatedList.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    items: rx.Var[list[str]] = field(
+        doc="An array of items to display in the scrollable list. Default: [ 'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item...."
+    )
+    show_gradients: rx.Var[bool] = field(
+        doc="Toggle to display the top and bottom gradient overlays. Default: true."
+    )
+    enable_arrow_navigation: rx.Var[bool] = field(
+        doc="Toggle to enable keyboard navigation via arrow and tab keys. Default: true."
+    )
+    item_class_name: rx.Var[str] = field(
+        doc="Additional CSS class names for each list item."
+    )
+    display_scrollbar: rx.Var[bool] = field(
+        doc="Toggle to display or hide the custom scrollbar. Default: true."
+    )
+    initial_selected_index: rx.Var[int | float] = field(
+        doc="Initial index of the selected item. Set to -1 for no selection. Default: -1."
+    )
+    on_item_select: rx.EventHandler[lambda item, index: [safe(item), safe(index)]] = field(
+        doc="Callback function triggered when an item is selected. Receives the selected item and its index. Handler receives: item, index."
+    )
+
+
+class BorderGlow(ReactBitsComponent):
+    """Glowing mesh-gradient border that follows cursor direction and intensifies near edges.
+
+    Docs: https://reactbits.dev/components/border-glow
+    """
+
+    tag = "BorderGlow"
+    alias = "ReactBitsBorderGlow"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "BorderGlow"
+    _rb_files = ('BorderGlow.css', 'BorderGlow.jsx')
+
+    edge_sensitivity: rx.Var[int | float] = field(
+        doc="How close the pointer must be to the edge for the glow to appear (0-100). Default: 30."
+    )
+    glow_color: rx.Var[str] = field(
+        doc="HSL values for the glow color, as \"H S L\" (e.g. \"40 80 80\"). Default: '40 80 80'."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Background color of the card. Default: '#120F17'."
+    )
+    border_radius: rx.Var[int | float] = field(
+        doc="Corner radius of the card in pixels. Default: 28."
+    )
+    glow_radius: rx.Var[int | float] = field(
+        doc="How far the outer glow extends beyond the card in pixels. Default: 40."
+    )
+    glow_intensity: rx.Var[int | float] = field(
+        doc="Multiplier for glow opacity (0.1-3.0). Default: 1.0."
+    )
+    cone_spread: rx.Var[int | float] = field(
+        doc="Width of the directional cone mask as a percentage (5-45). Default: 25."
+    )
+    animated: rx.Var[bool] = field(
+        doc="Play an intro sweep animation on mount. Default: false."
+    )
+    colors: rx.Var[list[str]] = field(
+        doc="Array of 3 hex colors for the mesh gradient border, distributed across positions. Default: ['#c084fc', '#f472b6', '#38bdf8']."
+    )
+    fill_opacity: rx.Var[int | float] = field(
+        doc="The `fillOpacity` prop. Default: 0.5."
+    )
+
+
+class BounceCards(ReactBitsComponent):
+    """Cards bounce that bounce in on mount.
+
+    Docs: https://reactbits.dev/components/bounce-cards
+    """
+
+    tag = "BounceCards"
+    alias = "ReactBitsBounceCards"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "BounceCards"
+    _rb_files = ('BounceCards.css', 'BounceCards.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    images: rx.Var[list[str]] = field(
+        doc="Array of image URLs to display. Default: []."
+    )
+    container_width: rx.Var[int | float] = field(
+        doc="Width of the container (px). Default: 400."
+    )
+    container_height: rx.Var[int | float] = field(
+        doc="Height of the container (px). Default: 400."
+    )
+    animation_delay: rx.Var[int | float] = field(
+        doc="Delay (in seconds) before the animation starts. Default: 0.5."
+    )
+    animation_stagger: rx.Var[int | float] = field(
+        doc="Time (in seconds) between each card's animation. Default: 0.06."
+    )
+    ease_type: rx.Var[str] = field(
+        doc="Easing function for the bounce. Default: 'elastic.out(1, 0.8)'."
+    )
+    transform_styles: rx.Var[list[str]] = field(
+        doc="Custom transforms for each card position. Default: [ 'rotate(10deg) translate(-170px)', 'rotate(5deg) transl...."
+    )
+    enable_hover: rx.Var[bool] = field(
+        doc="If true, hovering pushes siblings aside and flattens the hovered card's rotation. Default: false."
+    )
+
+
+class BubbleMenu(ReactBitsComponent):
+    """Floating circular expanding menu with staggered item reveal.
+
+    Docs: https://reactbits.dev/components/bubble-menu
+    """
+
+    tag = "BubbleMenu"
+    alias = "ReactBitsBubbleMenu"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "BubbleMenu"
+    _rb_files = ('BubbleMenu.css', 'BubbleMenu.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    logo: rx.Var[rx.Component | str] = field(
+        doc="Logo content shown in the central bubble (string src or JSX). Default: \u2014."
+    )
+    menu_aria_label: rx.Var[str] = field(
+        doc="Accessible aria-label for the toggle button. Default: 'Toggle menu'."
+    )
+    menu_bg: rx.Var[str] = field(
+        doc="Background color for the logo & toggle bubbles and base pill background. Default: '#fff'."
+    )
+    menu_content_color: rx.Var[str] = field(
+        doc="Color for the menu icon lines and default pill text. Default: '#111'."
+    )
+    use_fixed_position: rx.Var[bool] = field(
+        doc="If true positions the menu with fixed instead of absolute (follows viewport). Default: false."
+    )
+    items: rx.Var[list[Any]] = field(
+        doc="Custom menu items; each = { label, href, ariaLabel?, rotation?, hoverStyles?: { bgColor?, textColor? } }. Default: DEFAULT_ITEMS."
+    )
+    animation_ease: rx.Var[str] = field(
+        doc="GSAP ease string used for bubble scale-in animation. Default: 'back.out(1.5)'."
+    )
+    animation_duration: rx.Var[int | float] = field(
+        doc="Duration (s) for each bubble & label animation. Default: 0.5."
+    )
+    stagger_delay: rx.Var[int | float] = field(
+        doc="Base stagger (s) between bubble animations (with slight random variance). Default: 0.12."
+    )
+    on_menu_click: rx.EventHandler[lambda open: [safe(open)]] = field(
+        doc="Callback fired whenever the menu toggle changes; receives open state. Handler receives: open."
+    )
+
+
+class CardNav(ReactBitsComponent):
+    """Expandable navigation bar with card panels revealing nested links.
+
+    Docs: https://reactbits.dev/components/card-nav
+    """
+
+    tag = "CardNav"
+    alias = "ReactBitsCardNav"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "CardNav"
+    _rb_files = ('CardNav.css', 'CardNav.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0', 'react-icons@5.5.0']
+
+    logo: rx.Var[str] = field(
+        doc="URL for the logo image. Default: -."
+    )
+    logo_alt: rx.Var[str] = field(
+        doc="Alt text for the logo image. Default: 'Logo'."
+    )
+    items: rx.Var[list[Any]] = field(
+        doc="Array of navigation items with label, bgColor, textColor, and links. Default: -."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing function for animations. Default: 'power3.out'."
+    )
+    base_color: rx.Var[str] = field(
+        doc="Background color for the navigation container. Default: '#fff'."
+    )
+    menu_color: rx.Var[str] = field(
+        doc="Color for the hamburger menu lines."
+    )
+    button_bg_color: rx.Var[str] = field(
+        doc="Background color for the CTA button. Default: #111."
+    )
+    button_text_color: rx.Var[str] = field(
+        doc="Text color for the CTA button. Default: white."
+    )
+
+
+class CardSwap(ReactBitsComponent):
+    """Cards animate position swapping with smooth layout transitions.
+
+    Docs: https://reactbits.dev/components/card-swap
+    """
+
+    tag = "CardSwap"
+    alias = "ReactBitsCardSwap"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "CardSwap"
+    _rb_files = ('CardSwap.css', 'CardSwap.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    width: rx.Var[int | float | str] = field(
+        doc="Width of the card container. Default: 500."
+    )
+    height: rx.Var[int | float | str] = field(
+        doc="Height of the card container. Default: 400."
+    )
+    card_distance: rx.Var[int | float] = field(
+        doc="X-axis spacing between cards. Default: 60."
+    )
+    vertical_distance: rx.Var[int | float] = field(
+        doc="Y-axis spacing between cards. Default: 70."
+    )
+    delay: rx.Var[int | float] = field(
+        doc="Milliseconds between card swaps. Default: 5000."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Whether to pause animation on hover. Default: false."
+    )
+    skew_amount: rx.Var[int | float] = field(
+        doc="Degree of slope for top/bottom edges. Default: 6."
+    )
+    easing: rx.Var[Literal["linear", "elastic"]] = field(
+        doc="Animation easing type. Default: 'elastic'."
+    )
+    on_card_click: rx.EventHandler[lambda idx: [safe(idx)]] = field(
+        doc="Callback function when a card is clicked Handler receives: idx."
+    )
+
+
+class CardSwapCard(ReactBitsComponent):
+    """A card inside a CardSwap."""
+
+    tag = "Card"
+    alias = "ReactBitsCardSwapCard"
+    is_default = False
+    _rb_category = "Components"
+    _rb_name = "CardSwap"
+    _rb_files = ('CardSwap.css', 'CardSwap.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    custom_class: rx.Var[str] = field(doc="Extra class name for the card.")
+
+
+class Carousel(ReactBitsComponent):
+    """Responsive carousel with touch gestures, looping and transitions.
+
+    Docs: https://reactbits.dev/components/carousel
+    """
+
+    tag = "Carousel"
+    alias = "ReactBitsCarousel"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "Carousel"
+    _rb_files = ('Carousel.css', 'Carousel.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21', 'react-icons@5.5.0']
+
+    items: rx.Var[list[Any]] = field(
+        doc="An array of carousel items. Each item must include title, description, id, and icon. Default: DEFAULT_ITEMS."
+    )
+    base_width: rx.Var[int | float] = field(
+        doc="Total width (in px) of the carousel container. Effective item width is baseWidth minus padding. Default: 300."
+    )
+    autoplay: rx.Var[bool] = field(
+        doc="Enables automatic scrolling to the next item at a fixed interval. Default: false."
+    )
+    autoplay_delay: rx.Var[int | float] = field(
+        doc="Delay in milliseconds between automatic scrolls when autoplay is enabled. Default: 3000."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Pauses the autoplay functionality when the carousel is hovered. Default: false."
+    )
+    loop: rx.Var[bool] = field(
+        doc="When true, the carousel loops seamlessly from the last item back to the first. Default: false."
+    )
+    round: rx.Var[bool] = field(
+        doc="When true, the carousel is rendered with a 1:1 aspect ratio and circular container/items. Default: false."
+    )
+
+
+class ChromaGrid(ReactBitsComponent):
+    """A responsive grid of grayscale tiles. Hovering the grid reaveals their colors.
+
+    Docs: https://reactbits.dev/components/chroma-grid
+    """
+
+    tag = "ChromaGrid"
+    alias = "ReactBitsChromaGrid"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "ChromaGrid"
+    _rb_files = ('ChromaGrid.css', 'ChromaGrid.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    items: rx.Var[list[Any]] = field(
+        doc="Array of ChromaItem objects to display in the grid. Default: Demo []."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Size of the spotlight effect in pixels. Default: 300."
+    )
+    columns: rx.Var[int | float] = field(
+        doc="The `columns` prop. Default: 3."
+    )
+    rows: rx.Var[int | float] = field(
+        doc="The `rows` prop. Default: 2."
+    )
+    damping: rx.Var[int | float] = field(
+        doc="Cursor follow animation duration in seconds. Default: 0.45."
+    )
+    fade_out: rx.Var[int | float] = field(
+        doc="Fade-out animation duration in seconds when mouse leaves. Default: 0.6."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing function for animations. Default: 'power3.out'."
+    )
+
+
+class CircularGallery(ReactBitsComponent):
+    """Circular orbit gallery rotating images.
+
+    Docs: https://reactbits.dev/components/circular-gallery
+    """
+
+    tag = "CircularGallery"
+    alias = "ReactBitsCircularGallery"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "CircularGallery"
+    _rb_files = ('CircularGallery.css', 'CircularGallery.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    items: rx.Var[list[Any]] = field(
+        doc="List of items to display in the gallery. Each item should have an image URL and a text label."
+    )
+    bend: rx.Var[int | float] = field(
+        doc="Determines the curvature of the gallery layout. A negative value bends in one direction, a positive value in the opposite. Default: 3."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Specifies the color of the text labels. Default: '#ffffff'."
+    )
+    border_radius: rx.Var[int | float] = field(
+        doc="Sets the border radius for the media items to achieve rounded corners. Default: 0.05."
+    )
+    font: rx.Var[str] = field(
+        doc="CSS font shorthand (style, weight, size, family) used for the text labels below each card. Default: 'bold 30px Figtree'."
+    )
+    font_url: rx.Var[str] = field(
+        doc="URL of a font to load for the labels. Accepts a stylesheet URL (e.g. a Google Fonts link) or a direct font file (.woff2, .woff, .ttf, .otf). The loaded family overrides the family in `font`."
+    )
+    scroll_speed: rx.Var[int | float] = field(
+        doc="Controls how much the gallery moves per scroll event. Lower values result in slower scrolling, higher values in faster scrolling. Default: 2."
+    )
+    scroll_ease: rx.Var[int | float] = field(
+        doc="Controls the smoothness of scroll transitions. Lower values create smoother, more fluid motion, while higher values make it more responsive. Default: 0.05."
+    )
+
+
+class Counter(ReactBitsComponent):
+    """Flexible animated counter supporting increments + easing.
+
+    Docs: https://reactbits.dev/components/counter
+    """
+
+    tag = "Counter"
+    alias = "ReactBitsCounter"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "Counter"
+    _rb_files = ('Counter.css', 'Counter.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    value: rx.Var[int | float] = field(
+        doc="The numeric value to display in the counter. Default: N/A (required)."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="The base font size used for the counter digits. Default: 100."
+    )
+    padding: rx.Var[int | float] = field(
+        doc="Additional padding added to the digit height. Default: 0."
+    )
+    places: rx.Var[list[int | float]] = field(
+        doc="Defines which digit positions to display. Include whole number and decimal place values (use \".\" for the decimal point). If omitted, place values will be detected automatically. Default: [...value.toString()].map((ch, i, a) => { ch == '.'; if (...."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="The gap (in pixels) between each digit. Default: 8."
+    )
+    border_radius: rx.Var[int | float] = field(
+        doc="The border radius (in pixels) for the counter container. Default: 4."
+    )
+    horizontal_padding: rx.Var[int | float] = field(
+        doc="The horizontal padding (in pixels) for the counter container. Default: 8."
+    )
+    text_color: rx.Var[str] = field(
+        doc="The text color for the counter digits. Default: 'inherit'."
+    )
+    font_weight: rx.Var[int | float | str] = field(
+        doc="The font weight of the counter digits. Default: 'inherit'."
+    )
+    container_style: rx.Var[dict[str, Any]] = field(
+        doc="Custom inline styles for the outer container. Default: {}."
+    )
+    counter_style: rx.Var[dict[str, Any]] = field(
+        doc="Custom inline styles for the counter element. Default: {}."
+    )
+    digit_style: rx.Var[dict[str, Any]] = field(
+        doc="Custom inline styles for each digit container. Default: {}."
+    )
+    gradient_height: rx.Var[int | float] = field(
+        doc="The height (in pixels) of the gradient overlays. Default: 16."
+    )
+    gradient_from: rx.Var[str] = field(
+        doc="The starting color for the gradient overlays. Default: 'black'."
+    )
+    gradient_to: rx.Var[str] = field(
+        doc="The ending color for the gradient overlays. Default: 'transparent'."
+    )
+    top_gradient_style: rx.Var[dict[str, Any]] = field(
+        doc="Custom inline styles for the top gradient overlay."
+    )
+    bottom_gradient_style: rx.Var[dict[str, Any]] = field(
+        doc="Custom inline styles for the bottom gradient overlay."
+    )
+
+
+class CurvedInput(ReactBitsComponent):
+    """Arc-bent input bar with text, caret and submit button all following the curve.
+
+    Docs: https://reactbits.dev/components/curved-input
+    """
+
+    tag = "CurvedInput"
+    alias = "ReactBitsCurvedInput"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "CurvedInput"
+    _rb_files = ('CurvedInput.css', 'CurvedInput.jsx')
+
+    value: rx.Var[str] = field(
+        doc="Controlled value; leave undefined for uncontrolled usage."
+    )
+    default_value: rx.Var[str] = field(
+        doc="Initial value when the input is uncontrolled."
+    )
+    placeholder: rx.Var[str] = field(
+        doc="Placeholder text rendered along the curve when empty. Default: 'Enter your email'."
+    )
+    button_text: rx.Var[str] = field(
+        doc="Label of the curved submit button. Default: 'Get Started'."
+    )
+    type: rx.Var[str] = field(
+        doc="Semantic input type; email/number map to the matching mobile keyboard. Default: 'email'."
+    )
+    name: rx.Var[str] = field(
+        doc="Name attribute forwarded to the underlying input."
+    )
+    aria_label: rx.Var[str] = field(
+        doc="Accessible label; falls back to the placeholder."
+    )
+    theme: rx.Var[Literal["dark", "light"]] = field(
+        doc="Color preset; any explicit color prop overrides its theme value. Default: 'dark'."
+    )
+    width: rx.Var[int | float | str] = field(
+        doc="Width of the input bar (pixels or any CSS width value, e.g. \"100%\"). Default: 450."
+    )
+    bend: rx.Var[int | float] = field(
+        doc="How many pixels the center of the bar arches above its ends; negative bends downward, 0 is flat. Default: 28."
+    )
+    height: rx.Var[int | float] = field(
+        doc="Thickness of the input bar in pixels. Default: 64."
+    )
+    corner_radius: rx.Var[int | float] = field(
+        doc="Corner rounding of the bar; the button rounds proportionally. Default: 18."
+    )
+    border_width: rx.Var[int | float] = field(
+        doc="Outline stroke width in pixels. Default: 1.5."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Font size of the curved text and button label. Default: 16."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Fill color of the input bar; overrides the theme."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Color of the typed text and caret; overrides the theme."
+    )
+    placeholder_color: rx.Var[str] = field(
+        doc="Color of the placeholder text; overrides the theme."
+    )
+    border_color: rx.Var[str] = field(
+        doc="Color of the outline stroke; overrides the theme."
+    )
+    button_color: rx.Var[str] = field(
+        doc="Fill of the submit button, the focus ring and the default icon chip; overrides the theme."
+    )
+    button_text_color: rx.Var[str] = field(
+        doc="Color of the button label; overrides the theme."
+    )
+    icon_color: rx.Var[str] = field(
+        doc="Fill of the icon chip; defaults to the button color."
+    )
+    shadow_size: rx.Var[Literal["none", "sm", "md", "lg"]] = field(
+        doc="Size of the soft drop shadow under the bar. Default: 'md'."
+    )
+    shadow_color: rx.Var[str] = field(
+        doc="Tint of the drop shadow; overrides the theme."
+    )
+    show_button: rx.Var[bool] = field(
+        doc="Render the curved submit button. Default: true."
+    )
+    show_icon: rx.Var[bool] = field(
+        doc="Render the leading icon chip. Default: true."
+    )
+    icon: rx.Var[rx.Component | str] = field(
+        doc="Custom SVG content for the icon, centered at the origin; replaces the default envelope chip."
+    )
+    on_change: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="Called with the new value on every keystroke. Handler receives: value."
+    )
+    on_submit: rx.EventHandler[lambda value: [safe(value)]] = field(
+        doc="Called when the button is pressed or Enter is hit. Handler receives: value."
+    )
+
+
+class DecayCard(ReactBitsComponent):
+    """Hover parallax effect that disintegrates the content of a card.
+
+    Docs: https://reactbits.dev/components/decay-card
+    """
+
+    tag = "DecayCard"
+    alias = "ReactBitsDecayCard"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "DecayCard"
+    _rb_files = ('DecayCard.css', 'DecayCard.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    width: rx.Var[int | float] = field(
+        doc="The width of the card in pixels. Default: 300."
+    )
+    height: rx.Var[int | float] = field(
+        doc="The height of the card in pixels. Default: 400."
+    )
+    image: rx.Var[str] = field(
+        doc="Allows setting the background image of the card. Default: 'https://picsum.photos/300/400?grayscale'."
+    )
+    base_frequency: rx.Var[int | float] = field(
+        doc="Base frequency for the turbulence filter. Lower values create larger, smoother patterns. Default: 0.015."
+    )
+    num_octaves: rx.Var[int | float] = field(
+        doc="Number of octaves for the turbulence filter. Higher values add finer detail. Default: 5."
+    )
+    seed: rx.Var[int | float] = field(
+        doc="Seed value for the turbulence random number generator. Default: 4."
+    )
+    max_displacement: rx.Var[int | float] = field(
+        doc="Maximum displacement scale applied when the cursor moves. Controls the intensity of the decay effect. Default: 400."
+    )
+    movement_bound: rx.Var[int | float] = field(
+        doc="Maximum pixel distance the card can translate from its origin when following the cursor. Default: 50."
+    )
+
+
+class DepthCarousel(ReactBitsComponent):
+    """Cards recede into depth on a 3D rail, with drag, keyboard and auto-advance.
+
+    Docs: https://reactbits.dev/components/depth-carousel
+    """
+
+    tag = "DepthCarousel"
+    alias = "ReactBitsDepthCarousel"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "DepthCarousel"
+    _rb_files = ('DepthCarousel.css', 'DepthCarousel.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    items: rx.Var[list[Any]] = field(
+        doc="Slides to display. Pass image URLs or objects with an image URL and alt text. Default: DEFAULT_ITEMS."
+    )
+    card_width: rx.Var[int | float] = field(
+        doc="Width of each card in pixels. Default: 300."
+    )
+    card_height: rx.Var[int | float] = field(
+        doc="Height of each card in pixels. Default: 380."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner rounding of the cards in pixels. Default: 18."
+    )
+    tint: rx.Var[str] = field(
+        doc="Colour multiplied over cards as they recede, shading the depth of the stack. Default: '#05060a'."
+    )
+    depth: rx.Var[int | float] = field(
+        doc="Z distance in pixels between each card along the depth rail. Higher values push the stack further back. Default: 220."
+    )
+    spread: rx.Var[int | float] = field(
+        doc="Lateral offset in pixels applied per card so the stack fans out to one side. Default: 90."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Degrees each receding card rotates around the vertical axis, revealing its edge. Default: 22."
+    )
+    tilt_direction: rx.Var[Literal["left", "right"]] = field(
+        doc="Which side the stack fans and tilts toward. Default: 'right'."
+    )
+    perspective: rx.Var[int | float] = field(
+        doc="CSS perspective in pixels. Lower values exaggerate the depth foreshortening. Default: 1400."
+    )
+    visible_cards: rx.Var[int | float] = field(
+        doc="How many cards deep remain visible before further ones fade out. Default: 4."
+    )
+    falloff: rx.Var[int | float] = field(
+        doc="How quickly brightness, tint and blur ramp up with depth. Default: 0.2."
+    )
+    blur: rx.Var[int | float] = field(
+        doc="Maximum blur in pixels applied to the furthest visible card. Default: 6."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Length of the advance transition in milliseconds. Default: 700."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing used for navigation transitions. Default: 'power3.out'."
+    )
+    autoplay: rx.Var[bool] = field(
+        doc="Auto-advance the carousel, pausing on hover or focus. Default: false."
+    )
+    autoplay_delay: rx.Var[int | float] = field(
+        doc="Delay between auto-advances in milliseconds. Default: 3200."
+    )
+    loop: rx.Var[bool] = field(
+        doc="Wrap seamlessly from the last card back to the first. Default: true."
+    )
+    show_controls: rx.Var[bool] = field(
+        doc="Show the previous / next arrow buttons. Default: true."
+    )
+    show_indicators: rx.Var[bool] = field(
+        doc="Show the dot indicators. Default: true."
+    )
+    on_change: rx.EventHandler[lambda index, item: [safe(index), safe(item)]] = field(
+        doc="Called whenever the focused card changes. Handler receives: index, item."
+    )
+
+
+class Dock(ReactBitsComponent):
+    """macOS style magnifying dock with proximity scaling of icons.
+
+    Docs: https://reactbits.dev/components/dock
+    """
+
+    tag = "Dock"
+    alias = "ReactBitsDock"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "Dock"
+    _rb_files = ('Dock.css', 'Dock.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    items: rx.Var[list[Any]] = field(
+        doc="Array of dock items. Each item should include an icon, label, onClick handler, and an optional className. Default: []."
+    )
+    spring: rx.Var[dict[str, Any]] = field(
+        doc="Configuration options for the spring animation. Default: { mass: 0.1, stiffness: 150, damping: 12 }."
+    )
+    magnification: rx.Var[int | float] = field(
+        doc="The magnified size (in pixels) applied to a dock item when hovered. Default: 70."
+    )
+    distance: rx.Var[int | float] = field(
+        doc="Pixel distance used to calculate the magnification effect based on mouse proximity. Default: 200."
+    )
+    panel_height: rx.Var[int | float] = field(
+        doc="Height (in pixels) of the dock panel. Default: 68."
+    )
+    dock_height: rx.Var[int | float] = field(
+        doc="Maximum height (in pixels) of the dock container. Default: 256."
+    )
+    base_item_size: rx.Var[int | float] = field(
+        doc="The base size (in pixels) for each dock item. Default: 50."
+    )
+
+
+class DomeGallery(ReactBitsComponent):
+    """Immersive 3D dome gallery projecting images on a hemispheric surface.
+
+    Docs: https://reactbits.dev/components/dome-gallery
+    """
+
+    tag = "DomeGallery"
+    alias = "ReactBitsDomeGallery"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "DomeGallery"
+    _rb_files = ('DomeGallery.css', 'DomeGallery.jsx')
+    lib_dependencies: list[str] = ['@use-gesture/react@10.3.1']
+
+    images: rx.Var[list[Any]] = field(
+        doc="Array of image URLs (strings) or image objects with src and optional alt text. Default: DEFAULT_IMAGES."
+    )
+    fit: rx.Var[int | float] = field(
+        doc="Size factor for the dome radius based on container dimensions. Default: 0.5."
+    )
+    fit_basis: rx.Var[Literal["auto", "min", "max", "width", "height"]] = field(
+        doc="Basis for calculating the dome size. Default: 'auto'."
+    )
+    min_radius: rx.Var[int | float] = field(
+        doc="Minimum radius for the dome in pixels. Default: 600."
+    )
+    max_radius: rx.Var[int | float] = field(
+        doc="Maximum radius for the dome in pixels. Default: Infinity."
+    )
+    pad_factor: rx.Var[int | float] = field(
+        doc="Padding factor for the viewer area. Default: 0.25."
+    )
+    overlay_blur_color: rx.Var[str] = field(
+        doc="Color for the outer portion of the radial overlay blur. Default: '#120F17'."
+    )
+    max_vertical_rotation_deg: rx.Var[int | float] = field(
+        doc="Maximum vertical rotation angle in degrees. Default: DEFAULTS.maxVerticalRotationDeg."
+    )
+    drag_sensitivity: rx.Var[int | float] = field(
+        doc="Sensitivity of drag interactions. Default: DEFAULTS.dragSensitivity."
+    )
+    enlarge_transition_ms: rx.Var[int | float] = field(
+        doc="Duration of image enlargement transition in milliseconds. Default: DEFAULTS.enlargeTransitionMs."
+    )
+    segments: rx.Var[int | float] = field(
+        doc="Number of segments for both X and Y to keep the dome proportional. Default: DEFAULTS.segments."
+    )
+    drag_dampening: rx.Var[int | float] = field(
+        doc="Damping factor for drag inertia (0-1, higher = more damping). Default: 2."
+    )
+    opened_image_width: rx.Var[str] = field(
+        doc="Width of the enlarged image. Default: '400px'."
+    )
+    opened_image_height: rx.Var[str] = field(
+        doc="Height of the enlarged image. Default: '400px'."
+    )
+    image_border_radius: rx.Var[str] = field(
+        doc="Border radius for closed tile images. Default: '30px'."
+    )
+    opened_image_border_radius: rx.Var[str] = field(
+        doc="Border radius for opened/enlarged images. Default: '30px'."
+    )
+    grayscale: rx.Var[bool] = field(
+        doc="Whether to render all images in grayscale. Default: true."
+    )
+
+
+class DriftWall(ReactBitsComponent):
+    """An endless perspective wall of tiles drifting past, lifting on hover.
+
+    Docs: https://reactbits.dev/components/drift-wall
+    """
+
+    tag = "DriftWall"
+    alias = "ReactBitsDriftWall"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "DriftWall"
+    _rb_files = ('DriftWall.css', 'DriftWall.jsx')
+
+    items: rx.Var[list[Any]] = field(
+        doc="Tiles to display. Each item has { image, title?, href? }. Default: DEFAULT_ITEMS."
+    )
+    columns: rx.Var[int | float] = field(
+        doc="Number of drifting columns. Default: 5."
+    )
+    tile_width: rx.Var[int | float] = field(
+        doc="Width of each tile in pixels. Default: 200."
+    )
+    tile_height: rx.Var[int | float] = field(
+        doc="Height of each tile in pixels. Default: 132."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Spacing between tiles and columns in pixels. Default: 18."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius of each tile in pixels. Default: 14."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Perspective pitch of the wall (rotateX, degrees). Default: 16."
+    )
+    turn: rx.Var[int | float] = field(
+        doc="Perspective yaw of the wall (rotateY, degrees). Default: -14."
+    )
+    roll: rx.Var[int | float] = field(
+        doc="In-plane rotation of the wall (rotateZ, degrees). Default: 0."
+    )
+    perspective: rx.Var[int | float] = field(
+        doc="Perspective distance in pixels \u2014 smaller is more dramatic. Default: 1200."
+    )
+    depth: rx.Var[int | float] = field(
+        doc="How far the wall sits back from the viewer in pixels. Default: 120."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Base drift speed in pixels per second. Default: 42."
+    )
+    direction: rx.Var[Literal["up", "down"]] = field(
+        doc="Primary drift direction; columns alternate around it. Default: 'up'."
+    )
+    variance: rx.Var[int | float] = field(
+        doc="How much column speeds differ from each other (0\u20131). Default: 0.45."
+    )
+    parallax: rx.Var[int | float] = field(
+        doc="Pointer-follow tilt strength (0 disables it). Default: 0.6."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Pause the whole wall while the pointer is over it. Default: false."
+    )
+    lift: rx.Var[int | float] = field(
+        doc="How far a hovered tile lifts toward the viewer in pixels. Default: 64."
+    )
+    fade: rx.Var[int | float] = field(
+        doc="Strength of the edge and depth dissolve (0\u20131). Default: 0.6."
+    )
+    dim: rx.Var[int | float] = field(
+        doc="Resting opacity of unhovered tiles (0\u20131). Default: 0.55."
+    )
+    grayscale: rx.Var[bool] = field(
+        doc="Desaturate resting tiles; hover restores colour. Default: false."
+    )
+    overlay_color: rx.Var[str] = field(
+        doc="Tint laid over resting tiles, cleared on hover. Default: '#060010'."
+    )
+
+
+class ElasticSlider(ReactBitsComponent):
+    """Slider handle stretches elastically then snaps with spring physics.
+
+    Docs: https://reactbits.dev/components/elastic-slider
+    """
+
+    tag = "ElasticSlider"
+    alias = "ReactBitsElasticSlider"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "ElasticSlider"
+    _rb_files = ('ElasticSlider.css', 'ElasticSlider.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21', 'react-icons@5.5.0']
+
+    default_value: rx.Var[int | float] = field(
+        doc="The initial value of the slider. It can be less than startingValue or greater than maxValue. Default: 50."
+    )
+    starting_value: rx.Var[int | float] = field(
+        doc="The starting point for the slider's range, e.g., startingValue=100 allows the slider to start at 100. Default: 0."
+    )
+    max_value: rx.Var[int | float] = field(
+        doc="The maximum value the slider can reach. Default: 100."
+    )
+    is_stepped: rx.Var[bool] = field(
+        doc="Enables or disables stepped increments on the slider. Default: false."
+    )
+    step_size: rx.Var[int | float] = field(
+        doc="The size of the increments for the slider when isStepped is enabled. Default: 1."
+    )
+    left_icon: rx.Var[rx.Component | str] = field(
+        doc="Custom JSX or HTML code to display on the left side of the slider. Default: <Icon as={RiVolumeDownFill} />."
+    )
+    right_icon: rx.Var[rx.Component | str] = field(
+        doc="Custom JSX or HTML code to display on the right side of the slider. Default: <Icon as={RiVolumeUpFill} />."
+    )
+
+
+class FlowingMenu(ReactBitsComponent):
+    """Liquid flowing active indicator glides between menu items.
+
+    Docs: https://reactbits.dev/components/flowing-menu
+    """
+
+    tag = "FlowingMenu"
+    alias = "ReactBitsFlowingMenu"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "FlowingMenu"
+    _rb_files = ('FlowingMenu.css', 'FlowingMenu.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    items: rx.Var[list[Any]] = field(
+        doc="An array of objects containing: link, text, image. Default: []."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Duration of the marquee animation in seconds (lower = faster). Default: 15."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Color of the static menu text. Default: '#fff'."
+    )
+    bg_color: rx.Var[str] = field(
+        doc="Background color of the menu container. Default: '#120F17'."
+    )
+    marquee_bg_color: rx.Var[str] = field(
+        doc="Background color of the marquee overlay. Default: '#fff'."
+    )
+    marquee_text_color: rx.Var[str] = field(
+        doc="Text color inside the marquee. Default: '#120F17'."
+    )
+    border_color: rx.Var[str] = field(
+        doc="Color of the dividing lines between menu items. Default: '#fff'."
+    )
+
+
+class FluidGlass(ReactBitsComponent):
+    """Glassmorphism container with animated liquid distortion refraction.
+
+    Docs: https://reactbits.dev/components/fluid-glass
+    """
+
+    tag = "FluidGlass"
+    alias = "ReactBitsFluidGlass"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "FluidGlass"
+    _rb_files = ('FluidGlass.jsx',)
+    lib_dependencies: list[str] = ['@react-three/drei@10.7.6', '@react-three/fiber@9.3.0', 'maath@0.10.8', 'three@0.180.0']
+
+    mode: rx.Var[str] = field(
+        doc="Display mode of the fluid glass effect. Options: 'lens', 'bar', 'cube'. Default: 'lens'."
+    )
+    lens_props: rx.Var[dict[str, Any]] = field(
+        doc="Props specific to lens mode including material properties like ior, thickness, transmission. Default: {}."
+    )
+    bar_props: rx.Var[dict[str, Any]] = field(
+        doc="Props specific to bar mode including navItems array and material properties. Default: {}."
+    )
+    cube_props: rx.Var[dict[str, Any]] = field(
+        doc="Props specific to cube mode including material properties and interaction settings. Default: {}."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Background color rendered behind the glass scene. Default: '#120F17'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Color used for the scene title and navigation labels. Default: '#ffffff'."
+    )
+
+
+class FlyingPosters(ReactBitsComponent):
+    """3D posters rotate on scroll infinitely.
+
+    Docs: https://reactbits.dev/components/flying-posters
+    """
+
+    tag = "FlyingPosters"
+    alias = "ReactBitsFlyingPosters"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "FlyingPosters"
+    _rb_files = ('FlyingPosters.css', 'FlyingPosters.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    items: rx.Var[list[str]] = field(
+        doc="An array of image URLs to be displayed as flying posters. Default: []."
+    )
+    plane_width: rx.Var[int | float] = field(
+        doc="The width of each poster plane in pixels. Default: 320."
+    )
+    plane_height: rx.Var[int | float] = field(
+        doc="The height of each poster plane in pixels. Default: 320."
+    )
+    distortion: rx.Var[int | float] = field(
+        doc="The amount of distortion applied to the posters' movement. Default: 3."
+    )
+    scroll_ease: rx.Var[int | float] = field(
+        doc="The easing factor for smooth scrolling interactions. Default: 0.01."
+    )
+    camera_fov: rx.Var[int | float] = field(
+        doc="The field of view for the camera in degrees. Default: 45."
+    )
+    camera_z: rx.Var[int | float] = field(
+        doc="The Z position of the camera, affecting zoom and perspective. Default: 20."
+    )
+
+
+class Folder(ReactBitsComponent):
+    """Interactive folder opens to reveal nested content smooth motion.
+
+    Docs: https://reactbits.dev/components/folder
+    """
+
+    tag = "Folder"
+    alias = "ReactBitsFolder"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "Folder"
+    _rb_files = ('Folder.css', 'Folder.jsx')
+
+    color: rx.Var[str] = field(
+        doc="The primary color of the folder. Default: '#5227FF'."
+    )
+    size: rx.Var[int | float] = field(
+        doc="Scale factor for the folder size. Default: 1."
+    )
+    items: rx.Var[list[Any]] = field(
+        doc="An array of up to 3 items rendered as papers in the folder. Default: []."
+    )
+
+
+class GlassIcons(ReactBitsComponent):
+    """Icon set styled with frosted glass blur.
+
+    Docs: https://reactbits.dev/components/glass-icons
+    """
+
+    tag = "GlassIcons"
+    alias = "ReactBitsGlassIcons"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "GlassIcons"
+    _rb_files = ('GlassIcons.css', 'GlassIcons.jsx')
+
+    items: rx.Var[list[Any]] = field(
+        doc="Array of items to render. Each item should include: an icon (React.ReactElement), a color (string), a label (string), and an optional customClass (string). Default: []."
+    )
+
+
+class GlassSurface(ReactBitsComponent):
+    """Advanced Apple-style glass surface with real-time distortion + lighting.
+
+    Docs: https://reactbits.dev/components/glass-surface
+    """
+
+    tag = "GlassSurface"
+    alias = "ReactBitsGlassSurface"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "GlassSurface"
+    _rb_files = ('GlassSurface.css', 'GlassSurface.jsx')
+
+    width: rx.Var[int | float | str] = field(
+        doc="Width of the glass surface (pixels or CSS value like '100%'). Default: 200."
+    )
+    height: rx.Var[int | float | str] = field(
+        doc="Height of the glass surface (pixels or CSS value like '100vh'). Default: 80."
+    )
+    border_radius: rx.Var[int | float] = field(
+        doc="Border radius in pixels. Default: 20."
+    )
+    border_width: rx.Var[int | float] = field(
+        doc="Border width factor for displacement map. Default: 0.07."
+    )
+    brightness: rx.Var[int | float] = field(
+        doc="Brightness percentage for displacement map. Default: 50."
+    )
+    opacity: rx.Var[int | float] = field(
+        doc="Opacity of displacement map elements. Default: 0.93."
+    )
+    blur: rx.Var[int | float] = field(
+        doc="Input blur amount in pixels. Default: 11."
+    )
+    displace: rx.Var[int | float] = field(
+        doc="Output blur (stdDeviation). Default: 0."
+    )
+    background_opacity: rx.Var[int | float] = field(
+        doc="Background frost opacity (0-1). Default: 0."
+    )
+    saturation: rx.Var[int | float] = field(
+        doc="Backdrop filter saturation factor. Default: 1."
+    )
+    distortion_scale: rx.Var[int | float] = field(
+        doc="Main displacement scale. Default: -180."
+    )
+    red_offset: rx.Var[int | float] = field(
+        doc="Red channel extra displacement offset. Default: 0."
+    )
+    green_offset: rx.Var[int | float] = field(
+        doc="Green channel extra displacement offset. Default: 10."
+    )
+    blue_offset: rx.Var[int | float] = field(
+        doc="Blue channel extra displacement offset. Default: 20."
+    )
+    x_channel: rx.Var[Literal["R", "G", "B"]] = field(
+        doc="X displacement channel selector. Default: 'R'."
+    )
+    y_channel: rx.Var[Literal["R", "G", "B"]] = field(
+        doc="Y displacement channel selector. Default: 'G'."
+    )
+    mix_blend_mode: rx.Var[str] = field(
+        doc="Mix blend mode for displacement map. Default: 'difference'."
+    )
+
+
+class GooeyNav(ReactBitsComponent):
+    """Navigation indicator morphs with gooey blob transitions between items.
+
+    Docs: https://reactbits.dev/components/gooey-nav
+    """
+
+    tag = "GooeyNav"
+    alias = "ReactBitsGooeyNav"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "GooeyNav"
+    _rb_files = ('GooeyNav.css', 'GooeyNav.jsx')
+
+    items: rx.Var[list[Any]] = field(
+        doc="Array of navigation items. Default: []."
+    )
+    animation_time: rx.Var[int | float] = field(
+        doc="Duration (ms) of the main animation. Default: 600."
+    )
+    particle_count: rx.Var[int | float] = field(
+        doc="Number of bubble particles per transition. Default: 15."
+    )
+    particle_distances: rx.Var[list[int | float]] = field(
+        doc="Outer and inner distances of bubble spread. Default: [90, 10]."
+    )
+    particle_r: rx.Var[int | float] = field(
+        doc="Radius factor influencing random particle rotation. Default: 100."
+    )
+    time_variance: rx.Var[int | float] = field(
+        doc="Random time variance (ms) for particle animations. Default: 300."
+    )
+    colors: rx.Var[list[int | float]] = field(
+        doc="Color indices used when creating bubble particles. Default: [1, 2, 3, 1, 2, 3, 1, 4]."
+    )
+    initial_active_index: rx.Var[int | float] = field(
+        doc="Which item is selected on mount. Default: 0."
+    )
+
+
+class InfiniteMenu(ReactBitsComponent):
+    """Horizontally looping menu effect that scrolls endlessly with seamless wrap.
+
+    Docs: https://reactbits.dev/components/infinite-menu
+    """
+
+    tag = "InfiniteMenu"
+    alias = "ReactBitsInfiniteMenu"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "InfiniteMenu"
+    _rb_files = ('InfiniteMenu.css', 'InfiniteMenu.jsx')
+    lib_dependencies: list[str] = ['gl-matrix@3.4.4']
+
+    items: rx.Var[list[Any]] = field(
+        doc="List of items containing an image, link, title, and description - or just add what you need. Default: []."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Controls camera zoom. Default: 1.0."
+    )
+    background_color: rx.Var[str] = field(
+        doc="Sets the canvas background and the action button outline color. Default: '#000000'."
+    )
+
+
+class InfiniteSpiral(ReactBitsComponent):
+    """An endlessly looping 3D helix of images with customizable motion, depth, spacing and interaction.
+
+    Docs: https://reactbits.dev/components/infinite-spiral
+    """
+
+    tag = "InfiniteSpiral"
+    alias = "ReactBitsInfiniteSpiral"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "InfiniteSpiral"
+    _rb_files = ('InfiniteSpiral.css', 'InfiniteSpiral.jsx')
+
+    items: rx.Var[list[Any]] = field(
+        doc="Images shown in the spiral. Objects may also include alt, href, target, label and id. Default: []."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Automatic travel speed in cards per second and the sensitivity of scroll-controlled motion. Default: 0.55."
+    )
+    direction: rx.Var[Literal["up", "down"]] = field(
+        doc="Vertical travel direction. Default: 'up'."
+    )
+    animation_mode: rx.Var[Literal["auto", "drag", "scroll", "all"]] = field(
+        doc="Selects automatic motion, pointer dragging, page-scroll control or all interactions. Default: 'auto'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Depth radius of the helix in pixels. Default: 170."
+    )
+    card_width: rx.Var[int | float] = field(
+        doc="Card width in pixels. Default: 100."
+    )
+    card_height: rx.Var[int | float] = field(
+        doc="Card height in pixels. Default: 100."
+    )
+    vertical_spacing: rx.Var[int | float] = field(
+        doc="Vertical distance between neighboring cards. Default: 60."
+    )
+    perspective: rx.Var[int | float] = field(
+        doc="CSS perspective applied to the 3D stage. Default: 1000."
+    )
+    cards_per_turn: rx.Var[int | float] = field(
+        doc="Number of cards used for one complete revolution. Default: 7."
+    )
+    rotation: rx.Var[int | float] = field(
+        doc="Global angular offset in degrees. Default: 0."
+    )
+    card_tilt: rx.Var[int | float] = field(
+        doc="Additional clockwise card tilt in degrees. Default: 0."
+    )
+    card_radius: rx.Var[int | float] = field(
+        doc="Card corner radius in pixels. Default: 10."
+    )
+    center_scale: rx.Var[int | float] = field(
+        doc="Scale multiplier for cards nearest the center. Default: 1.2."
+    )
+    edge_fade: rx.Var[int | float] = field(
+        doc="Fraction of the outer travel range used for fading. Default: 0.3."
+    )
+    edge_blur: rx.Var[int | float] = field(
+        doc="Maximum blur applied near the edges. Default: 6."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="Smoothly eases automatic motion to a stop while the gallery is hovered. Default: true."
+    )
+    image_fit: rx.Var[Literal["cover", "contain"]] = field(
+        doc="Object fit used by every image. Default: 'cover'."
+    )
+    grayscale: rx.Var[int | float] = field(
+        doc="Grayscale amount applied to every image, from 0 to 1. Default: 0."
+    )
+
+
+class Lanyard(ReactBitsComponent):
+    """Swinging 3D lanyard / badge card with realistic inertial motion.
+
+    Docs: https://reactbits.dev/components/lanyard
+    """
+
+    tag = "Lanyard"
+    alias = "ReactBitsLanyard"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "Lanyard"
+    _rb_files = ('Lanyard.css', 'Lanyard.jsx', 'card.glb', 'lanyard.png')
+    lib_dependencies: list[str] = ['@react-three/drei@10.7.6', '@react-three/fiber@9.3.0', '@react-three/rapier@2.1.0', 'meshline@3.3.1', 'three@0.180.0']
+
+    position: rx.Var[list[Any]] = field(
+        doc="Initial camera position for the canvas. Default: [0, 0, 30]."
+    )
+    gravity: rx.Var[list[Any]] = field(
+        doc="Gravity vector for the physics simulation. Default: [0, -40, 0]."
+    )
+    fov: rx.Var[int | float] = field(
+        doc="Camera field of view. Default: 20."
+    )
+    transparent: rx.Var[bool] = field(
+        doc="Enables a transparent background for the canvas. Default: true."
+    )
+    front_image: rx.Var[str] = field(
+        doc="Custom image URL for the card's front face. Falls back to the model's built-in texture when not set."
+    )
+    back_image: rx.Var[str] = field(
+        doc="Custom image URL for the card's back face, rendered independently from the front."
+    )
+    image_fit: rx.Var[Literal["cover", "contain"]] = field(
+        doc="How a custom front/back image fits its face. Both preserve aspect ratio; 'cover' fills and crops, 'contain' letterboxes. Default: 'cover'."
+    )
+    lanyard_image: rx.Var[str] = field(
+        doc="Custom image URL for the lanyard band's repeating texture. Falls back to the default band texture when not set."
+    )
+    lanyard_width: rx.Var[int | float] = field(
+        doc="Width of the lanyard band (meshline lineWidth). Increase it to give a custom band image more room and reduce stretching. Default: 1."
+    )
+
+
+class LineSidebar(ReactBitsComponent):
+    """Static list navigation with a cursor-proximity effect that shifts and highlights nearby items.
+
+    Docs: https://reactbits.dev/components/line-sidebar
+    """
+
+    tag = "LineSidebar"
+    alias = "ReactBitsLineSidebar"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "LineSidebar"
+    _rb_files = ('LineSidebar.css', 'LineSidebar.jsx')
+
+    items: rx.Var[list[str]] = field(
+        doc="Labels rendered as the list of sidebar entries. Default: DEFAULT_ITEMS."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="Color items and markers shift toward as the cursor gets close. Default: '#A855F7'."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Resting color of the item labels. Default: '#c4c4c4'."
+    )
+    marker_color: rx.Var[str] = field(
+        doc="Resting color of the leading marker lines. Default: '#6c6c6c'."
+    )
+    show_index: rx.Var[bool] = field(
+        doc="Show the zero-padded index before each label. Default: true."
+    )
+    show_marker: rx.Var[bool] = field(
+        doc="Show the marker lines (and short ticks) beside each item. Default: true."
+    )
+    proximity_radius: rx.Var[int | float] = field(
+        doc="Vertical distance in pixels within which the cursor influences an item. Default: 100."
+    )
+    max_shift: rx.Var[int | float] = field(
+        doc="Maximum horizontal shift in pixels the label slides at full proximity. Default: 30."
+    )
+    falloff: rx.Var[Literal["linear", "smooth", "sharp"]] = field(
+        doc="Curve mapping cursor distance to the proximity effect. Default: 'smooth'."
+    )
+    marker_length: rx.Var[int | float] = field(
+        doc="Length in pixels of the marker line; the in-between ticks scale from this too. Default: 60."
+    )
+    marker_gap: rx.Var[int | float] = field(
+        doc="Gap in pixels between the labels and the markers. Default: 0."
+    )
+    tick_scale: rx.Var[int | float] = field(
+        doc="Length of the in-between ticks as a fraction of markerLength. Default: 0.5."
+    )
+    scale_tick: rx.Var[bool] = field(
+        doc="When true, the in-between ticks also grow with cursor proximity. Default: true."
+    )
+    item_gap: rx.Var[int | float] = field(
+        doc="Vertical gap between items in pixels. Default: 20."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Font size of the labels in rem. Default: 1.1."
+    )
+    smoothing: rx.Var[int | float] = field(
+        doc="Transition duration in milliseconds for the proximity response. Default: 100."
+    )
+    default_active: rx.Var[int | float] = field(
+        doc="Index of the item selected on mount."
+    )
+    on_item_click: rx.EventHandler[lambda index, label: [safe(index), safe(label)]] = field(
+        doc="Called when an item is clicked; the clicked item also becomes active. Handler receives: index, label."
+    )
+
+
+class MagicBento(ReactBitsComponent):
+    """Interactive bento grid tiles expand + animate with various options.
+
+    Docs: https://reactbits.dev/components/magic-bento
+    """
+
+    tag = "MagicBento"
+    alias = "ReactBitsMagicBento"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "MagicBento"
+    _rb_files = ('MagicBento.css', 'MagicBento.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    text_auto_hide: rx.Var[bool] = field(
+        doc="Whether text content should auto-hide on hover. Default: true."
+    )
+    enable_stars: rx.Var[bool] = field(
+        doc="Enable particle star animation effect. Default: true."
+    )
+    enable_spotlight: rx.Var[bool] = field(
+        doc="Enable spotlight cursor following effect. Default: true."
+    )
+    enable_border_glow: rx.Var[bool] = field(
+        doc="Enable border glow effect that follows cursor. Default: true."
+    )
+    disable_animations: rx.Var[bool] = field(
+        doc="Disable all animations (automatically enabled on mobile). Default: false."
+    )
+    spotlight_radius: rx.Var[int | float] = field(
+        doc="Radius of the spotlight effect in pixels. Default: DEFAULT_SPOTLIGHT_RADIUS."
+    )
+    particle_count: rx.Var[int | float] = field(
+        doc="Number of particles in the star animation. Default: DEFAULT_PARTICLE_COUNT."
+    )
+    enable_tilt: rx.Var[bool] = field(
+        doc="Enable 3D tilt effect on card hover. Default: false."
+    )
+    glow_color: rx.Var[str] = field(
+        doc="RGB color values for glow effects (without rgba wrapper). Default: DEFAULT_GLOW_COLOR."
+    )
+    click_effect: rx.Var[bool] = field(
+        doc="Enable ripple effect on card click. Default: true."
+    )
+    enable_magnetism: rx.Var[bool] = field(
+        doc="Enable subtle card attraction to cursor. Default: true."
+    )
+
+
+class Masonry(ReactBitsComponent):
+    """Responsive masonry layout with animated reflow + gaps optimization.
+
+    Docs: https://reactbits.dev/components/masonry
+    """
+
+    tag = "Masonry"
+    alias = "ReactBitsMasonry"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "Masonry"
+    _rb_files = ('Masonry.css', 'Masonry.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    items: rx.Var[list[Any]] = field(
+        doc="Array of items to display in the masonry layout. Each item should have id, img, url, and height properties. Default: required."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing function for animations. Default: 'power3.out'."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Duration of the transition animations in seconds. Default: 0.6."
+    )
+    stagger: rx.Var[int | float] = field(
+        doc="Delay between each item's animation in seconds. Default: 0.05."
+    )
+    animate_from: rx.Var[str] = field(
+        doc="Direction from which items animate in. Options: 'top', 'bottom', 'left', 'right', 'center', 'random'. Default: 'bottom'."
+    )
+    scale_on_hover: rx.Var[bool] = field(
+        doc="Whether items should scale on hover. Default: true."
+    )
+    hover_scale: rx.Var[int | float] = field(
+        doc="Scale value when hovering over items (only applies if scaleOnHover is true). Default: 0.95."
+    )
+    blur_to_focus: rx.Var[bool] = field(
+        doc="Whether items should animate from blurred to focused on initial load. Default: true."
+    )
+    color_shift_on_hover: rx.Var[bool] = field(
+        doc="Whether to show a color overlay effect on hover. Default: false."
+    )
+
+
+class ModelViewer(ReactBitsComponent):
+    """Three.js model viewer with orbit controls and lighting presets.
+
+    Docs: https://reactbits.dev/components/model-viewer
+    """
+
+    tag = "ModelViewer"
+    alias = "ReactBitsModelViewer"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "ModelViewer"
+    _rb_files = ('ModelViewer.jsx',)
+    lib_dependencies: list[str] = ['@react-three/drei@10.7.6', '@react-three/fiber@9.3.0', 'three@0.180.0']
+
+    url: rx.Var[str] = field(
+        doc="URL of the 3D model file (glb/gltf/fbx/obj). Default: -."
+    )
+    width: rx.Var[int | float | str] = field(
+        doc="Width of the canvas container. Default: 400."
+    )
+    height: rx.Var[int | float | str] = field(
+        doc="Height of the canvas container. Default: 400."
+    )
+    model_x_offset: rx.Var[int | float] = field(
+        doc="Horizontal offset of the model. Default: 0."
+    )
+    model_y_offset: rx.Var[int | float] = field(
+        doc="Vertical offset of the model. Default: 0."
+    )
+    default_rotation_x: rx.Var[int | float] = field(
+        doc="Initial rotation on the X axis in degrees. Default: -50."
+    )
+    default_rotation_y: rx.Var[int | float] = field(
+        doc="Initial rotation on the Y axis in degrees. Default: 20."
+    )
+    default_zoom: rx.Var[int | float] = field(
+        doc="Initial zoom distance factor. Default: 0.5."
+    )
+    min_zoom_distance: rx.Var[int | float] = field(
+        doc="Minimum zoom distance. Default: 0.5."
+    )
+    max_zoom_distance: rx.Var[int | float] = field(
+        doc="Maximum zoom distance. Default: 10."
+    )
+    enable_mouse_parallax: rx.Var[bool] = field(
+        doc="Enable mouse-based parallax effect. Default: true."
+    )
+    enable_manual_rotation: rx.Var[bool] = field(
+        doc="Enable manual rotation via drag. Default: true."
+    )
+    enable_hover_rotation: rx.Var[bool] = field(
+        doc="Enable rotation on hover based on cursor. Default: true."
+    )
+    enable_manual_zoom: rx.Var[bool] = field(
+        doc="Enable manual zoom via mouse wheel or gestures. Default: true."
+    )
+    ambient_intensity: rx.Var[int | float] = field(
+        doc="Intensity of ambient light. Default: 0.3."
+    )
+    key_light_intensity: rx.Var[int | float] = field(
+        doc="Intensity of key light. Default: 1."
+    )
+    fill_light_intensity: rx.Var[int | float] = field(
+        doc="Intensity of fill light. Default: 0.5."
+    )
+    rim_light_intensity: rx.Var[int | float] = field(
+        doc="Intensity of rim light. Default: 0.8."
+    )
+    environment_preset: rx.Var[str] = field(
+        doc="Environment preset for scene lighting. Default: 'forest'."
+    )
+    auto_frame: rx.Var[bool] = field(
+        doc="Automatically frame the model in view. Default: false."
+    )
+    placeholder_src: rx.Var[str] = field(
+        doc="Placeholder image source while loading. Default: -."
+    )
+    show_screenshot_button: rx.Var[bool] = field(
+        doc="Show the screenshot button overlay. Default: true."
+    )
+    fade_in: rx.Var[bool] = field(
+        doc="Enable fade-in transition on load. Default: false."
+    )
+    auto_rotate: rx.Var[bool] = field(
+        doc="Enable automatic rotation animation. Default: false."
+    )
+    auto_rotate_speed: rx.Var[int | float] = field(
+        doc="Speed of automatic rotation. Default: 0.35."
+    )
+    on_model_loaded: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback when model finishes loading"
+    )
+
+
+class MorphSlider(ReactBitsComponent):
+    """WebGL slider that melts between images with a displacement transition.
+
+    Docs: https://reactbits.dev/components/morph-slider
+    """
+
+    tag = "MorphSlider"
+    alias = "ReactBitsMorphSlider"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "MorphSlider"
+    _rb_files = ('MorphSlider.css', 'MorphSlider.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0', 'ogl@1.0.11']
+
+    items: rx.Var[list[Any]] = field(
+        doc="Slides to morph between. Each item is an image URL with an optional caption. Default: DEFAULT_ITEMS."
+    )
+    start_index: rx.Var[int | float] = field(
+        doc="Index of the slide shown on mount. Default: 0."
+    )
+    transition: rx.Var[Literal["melt", "ripple", "shear", "swirl"]] = field(
+        doc="Character of the GPU displacement morph between slides. Default: 'melt'."
+    )
+    duration: rx.Var[int | float] = field(
+        doc="Length of a full transition in seconds. Default: 1.1."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing curve used to drive the transition progress. Default: 'power2.inOut'."
+    )
+    intensity: rx.Var[int | float] = field(
+        doc="Strength of the displacement \u2014 how far the images warp during the morph. Default: 0.55."
+    )
+    scale: rx.Var[int | float] = field(
+        doc="Frequency of the procedural noise field (affects the Melt transition most). Default: 2.4."
+    )
+    aberration: rx.Var[int | float] = field(
+        doc="Amount of RGB split that peaks mid-transition and resolves to zero. Default: 0.35."
+    )
+    drift: rx.Var[int | float] = field(
+        doc="Idle drift / breathing applied to the current image so it is never fully static. Default: 0.4."
+    )
+    autoplay: rx.Var[bool] = field(
+        doc="Advance slides automatically; pauses on hover. Default: false."
+    )
+    autoplay_delay: rx.Var[int | float] = field(
+        doc="Seconds each slide holds before autoplay advances. Default: 4."
+    )
+    loop: rx.Var[bool] = field(
+        doc="Wrap around from the last slide back to the first. Default: true."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius of the slider in pixels. Default: 16."
+    )
+    overlay_color: rx.Var[str] = field(
+        doc="Tint used for the subtle edge vignette over the images. Default: '#000000'."
+    )
+    show_captions: rx.Var[bool] = field(
+        doc="Show slide captions that animate in with each transition. Default: true."
+    )
+    show_controls: rx.Var[bool] = field(
+        doc="Show the previous / next arrow buttons. Default: true."
+    )
+    show_indicators: rx.Var[bool] = field(
+        doc="Show the slide indicator dots. Default: true."
+    )
+
+
+class OptionWheel(ReactBitsComponent):
+    """Curved option picker that spins via scroll, drag, or arrow keys, fading and tilting items away from the selection.
+
+    Docs: https://reactbits.dev/components/option-wheel
+    """
+
+    tag = "OptionWheel"
+    alias = "ReactBitsOptionWheel"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "OptionWheel"
+    _rb_files = ('OptionWheel.css', 'OptionWheel.jsx')
+
+    items: rx.Var[list[str]] = field(
+        doc="Labels rendered as the wheel options. Default: DEFAULT_ITEMS."
+    )
+    default_selected: rx.Var[int | float] = field(
+        doc="Index of the option selected on mount. Default: 3."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Resting color of the option labels. Default: '#a6a6a6'."
+    )
+    active_color: rx.Var[str] = field(
+        doc="Color an option blends toward as it reaches the middle of the wheel. Default: '#ffffff'."
+    )
+    side: rx.Var[Literal["left", "right"]] = field(
+        doc="Edge of the container the wheel curves around. Default: 'left'."
+    )
+    font_size: rx.Var[int | float] = field(
+        doc="Font size of the option labels in rem. Default: 3."
+    )
+    spacing: rx.Var[int | float] = field(
+        doc="Vertical distance between options as a multiple of the font size. Default: 1.4."
+    )
+    curve: rx.Var[int | float] = field(
+        doc="Depth of the circular curve; 0 flattens the wheel into a straight list. Default: 1."
+    )
+    tilt: rx.Var[int | float] = field(
+        doc="Angle in degrees between neighboring options; higher values curl the wheel tighter. Default: 6."
+    )
+    blur: rx.Var[int | float] = field(
+        doc="Blur in pixels added per step away from the middle. Default: 2."
+    )
+    fade: rx.Var[int | float] = field(
+        doc="Opacity lost per step away from the middle. Default: 0.25."
+    )
+    min_opacity: rx.Var[int | float] = field(
+        doc="Opacity floor for the furthest options. Default: 0.05."
+    )
+    smoothing: rx.Var[int | float] = field(
+        doc="Easing time constant in milliseconds; higher values feel heavier. Default: 200."
+    )
+    inset: rx.Var[int | float] = field(
+        doc="Padding in pixels between the anchored edge and the centered option. Default: 80."
+    )
+    loop: rx.Var[bool] = field(
+        doc="Wrap around infinitely instead of stopping at the first and last option. Default: false."
+    )
+    draggable: rx.Var[bool] = field(
+        doc="Allow dragging the wheel with a pointer, in addition to scroll and arrow keys. Default: true."
+    )
+    sound_url: rx.Var[str] = field(
+        doc="URL of a short tick sound played when the selection changes; empty disables it."
+    )
+    sound_volume: rx.Var[int | float] = field(
+        doc="Playback volume of the tick sound. Default: 0.5."
+    )
+    on_change: rx.EventHandler[lambda index, item: [safe(index), safe(item)]] = field(
+        doc="Called whenever the wheel settles on a new option. Handler receives: index, item."
+    )
+
+
+class PillNav(ReactBitsComponent):
+    """Minimal pill nav with sliding active highlight + smooth easing.
+
+    Docs: https://reactbits.dev/components/pill-nav
+    """
+
+    tag = "PillNav"
+    alias = "ReactBitsPillNav"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "PillNav"
+    _rb_files = ('PillNav.css', 'PillNav.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    logo: rx.Var[str] = field(
+        doc="URL for the logo image. Default: -."
+    )
+    logo_alt: rx.Var[str] = field(
+        doc="Alt text for the logo image. Default: 'Logo'."
+    )
+    items: rx.Var[list[Any]] = field(
+        doc="Array of navigation items with label, href, and optional ariaLabel. Default: -."
+    )
+    active_href: rx.Var[str] = field(
+        doc="The href of the currently active navigation item."
+    )
+    ease: rx.Var[str] = field(
+        doc="GSAP easing function for animations. Default: 'power3.easeOut'."
+    )
+    base_color: rx.Var[str] = field(
+        doc="Base background color for the navigation. Default: '#fff'."
+    )
+    pill_color: rx.Var[str] = field(
+        doc="Background color for navigation pills. Default: '#120F17'."
+    )
+    hovered_pill_text_color: rx.Var[str] = field(
+        doc="Text color when hovering over pills. Default: '#120F17'."
+    )
+    pill_text_color: rx.Var[str] = field(
+        doc="Text color for navigation pills. Default: baseColor."
+    )
+    initial_load_animation: rx.Var[bool] = field(
+        doc="Enable initial load animation for logo scale and nav items reveal. Default: true."
+    )
+    on_mobile_menu_click: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function triggered when mobile menu button is clicked"
+    )
+
+
+class PixelCard(ReactBitsComponent):
+    """Card content revealed through pixel expansion transition.
+
+    Docs: https://reactbits.dev/components/pixel-card
+    """
+
+    tag = "PixelCard"
+    alias = "ReactBitsPixelCard"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "PixelCard"
+    _rb_files = ('PixelCard.css', 'PixelCard.jsx')
+
+    variant: rx.Var[str] = field(
+        doc="Defines the color scheme and animation style. Default: 'default'."
+    )
+    gap: rx.Var[int | float] = field(
+        doc="Pixel grid gap size in pixels. Default: varies by variant."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Animation speed modifier (lower is slower). Default: varies by variant."
+    )
+    colors: rx.Var[str] = field(
+        doc="Comma-separated list of colors for the pixel effect. Default: \"#f8fafc,#f1f5f9,#cbd5e1\"."
+    )
+    no_focus: rx.Var[bool] = field(
+        doc="If true, prevents animation from triggering on focus. Default: false."
+    )
+
+
+class ProfileCard(ReactBitsComponent):
+    """Animated profile card glare with 3D hover effect.
+
+    Docs: https://reactbits.dev/components/profile-card
+    """
+
+    tag = "ProfileCard"
+    alias = "ReactBitsProfileCard"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "ProfileCard"
+    _rb_files = ('ProfileCard.css', 'ProfileCard.jsx')
+
+    avatar_url: rx.Var[str] = field(
+        doc="URL for the main avatar image displayed on the card. Default: '<Placeholder for avatar URL>'."
+    )
+    icon_url: rx.Var[str] = field(
+        doc="Optional URL for an icon pattern overlay on the card background. Default: '<Placeholder for icon URL>'."
+    )
+    grain_url: rx.Var[str] = field(
+        doc="Optional URL for a grain texture overlay effect. Default: '<Placeholder for grain URL>'."
+    )
+    inner_gradient: rx.Var[str] = field(
+        doc="Custom CSS gradient string for the inner card gradient."
+    )
+    behind_glow_enabled: rx.Var[bool] = field(
+        doc="Toggle the smooth radial glow that follows the cursor behind the card. Default: true."
+    )
+    behind_glow_color: rx.Var[str] = field(
+        doc="CSS color for the behind-the-card glow (e.g. rgba/hsla/hex). Default: \"rgba(125, 190, 255, 0.67)\"."
+    )
+    behind_glow_size: rx.Var[str] = field(
+        doc="Size of the glow as a length/percentage stop in the radial gradient. Default: \"50%\"."
+    )
+    enable_tilt: rx.Var[bool] = field(
+        doc="Enable or disable the 3D tilt effect on mouse hover. Default: true."
+    )
+    enable_mobile_tilt: rx.Var[bool] = field(
+        doc="Enable or disable the 3D tilt effect on mobile devices. Default: false."
+    )
+    mobile_tilt_sensitivity: rx.Var[int | float] = field(
+        doc="Sensitivity of the 3D tilt effect on mobile devices. Default: 5."
+    )
+    mini_avatar_url: rx.Var[str] = field(
+        doc="Optional URL for a smaller avatar in the user info section."
+    )
+    name: rx.Var[str] = field(
+        doc="User's display name. Default: 'Javi A. Torres'."
+    )
+    title: rx.Var[str] = field(
+        doc="User's job title or role. Default: 'Software Engineer'."
+    )
+    handle: rx.Var[str] = field(
+        doc="User's handle or username (displayed with @ prefix). Default: 'javicodes'."
+    )
+    status: rx.Var[str] = field(
+        doc="User's current status. Default: 'Online'."
+    )
+    contact_text: rx.Var[str] = field(
+        doc="Text displayed on the contact button. Default: 'Contact'."
+    )
+    show_user_info: rx.Var[bool] = field(
+        doc="Whether to display the user information section. Default: true."
+    )
+    on_contact_click: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function called when the contact button is clicked"
+    )
+
+
+class ReflectiveCard(ReactBitsComponent):
+    """Card with dynamic webcam reflection and glare effects that respond to cursor movement.
+
+    Docs: https://reactbits.dev/components/reflective-card
+    """
+
+    tag = "ReflectiveCard"
+    alias = "ReactBitsReflectiveCard"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "ReflectiveCard"
+    _rb_files = ('ReflectiveCard.css', 'ReflectiveCard.jsx')
+    lib_dependencies: list[str] = ['lucide-react']
+
+    blur_strength: rx.Var[int | float] = field(
+        doc="The intensity of the blur effect (0-20px). Default: 12."
+    )
+    color: rx.Var[str] = field(
+        doc="The base text color. Default: 'white'."
+    )
+    metalness: rx.Var[int | float] = field(
+        doc="The opacity of the metallic sheen (0-1). Default: 1."
+    )
+    roughness: rx.Var[int | float] = field(
+        doc="The opacity of the noise texture (0-1). Default: 0.4."
+    )
+    overlay_color: rx.Var[str] = field(
+        doc="The color of the overlay tint. Default: 'rgba(255, 255, 255, 0.1)'."
+    )
+    displacement_strength: rx.Var[int | float] = field(
+        doc="Strength of the displacement (how much it warps). Default: 20."
+    )
+    noise_scale: rx.Var[int | float] = field(
+        doc="Scale of the noise texture (size of the ripples). Default: 1."
+    )
+    specular_constant: rx.Var[int | float] = field(
+        doc="Specular constant for the lighting (shininess). Default: 1.2."
+    )
+    grayscale: rx.Var[int | float] = field(
+        doc="Grayscale intensity (0-1). Default: 1."
+    )
+    glass_distortion: rx.Var[int | float] = field(
+        doc="Strength of the glass edge distortion. Default: 0."
+    )
+
+
+class ScrollStack(ReactBitsComponent):
+    """Overlapping card stack reveals on scroll with depth layering.
+
+    Docs: https://reactbits.dev/components/scroll-stack
+    """
+
+    tag = "ScrollStack"
+    alias = "ReactBitsScrollStack"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "ScrollStack"
+    _rb_files = ('ScrollStack.css', 'ScrollStack.jsx')
+    lib_dependencies: list[str] = ['lenis@1.3.13']
+
+    item_distance: rx.Var[int | float] = field(
+        doc="Distance between stacked items in pixels. Default: 100."
+    )
+    item_scale: rx.Var[int | float] = field(
+        doc="Scale increment for each stacked item. Default: 0.03."
+    )
+    item_stack_distance: rx.Var[int | float] = field(
+        doc="Distance between items when they start stacking. Default: 30."
+    )
+    stack_position: rx.Var[str] = field(
+        doc="Position where the stacking effect begins as a percentage of viewport height. Default: '20%'."
+    )
+    scale_end_position: rx.Var[str] = field(
+        doc="Position where the scaling effect ends as a percentage of viewport height. Default: '10%'."
+    )
+    base_scale: rx.Var[int | float] = field(
+        doc="Base scale value for the first item in the stack. Default: 0.85."
+    )
+    scale_duration: rx.Var[int | float] = field(
+        doc="Duration of the scaling animation in seconds. Default: 0.5."
+    )
+    rotation_amount: rx.Var[int | float] = field(
+        doc="Rotation amount for each item in degrees. Default: 0."
+    )
+    blur_amount: rx.Var[int | float] = field(
+        doc="Blur amount for items that are further back in the stack. Default: 0."
+    )
+    use_window_scroll: rx.Var[bool] = field(
+        doc="Whether to use window scroll for the stack. Default: false."
+    )
+    on_stack_complete: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function called when the stack animation is complete."
+    )
+
+
+class ScrollStackItem(ReactBitsComponent):
+    """A card inside a ScrollStack."""
+
+    tag = "ScrollStackItem"
+    alias = "ReactBitsScrollStackItem"
+    is_default = False
+    _rb_category = "Components"
+    _rb_name = "ScrollStack"
+    _rb_files = ('ScrollStack.css', 'ScrollStack.jsx')
+    lib_dependencies: list[str] = ['lenis@1.3.13']
+
+    item_class_name: rx.Var[str] = field(doc="Extra class name for the card.")
+
+
+class SpecularButton(ReactBitsComponent):
+    """Glass button with a shader-driven specular rim light that sweeps around the edge and follows the cursor.
+
+    Docs: https://reactbits.dev/components/specular-button
+    """
+
+    tag = "SpecularButton"
+    alias = "ReactBitsSpecularButton"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "SpecularButton"
+    _rb_files = ('SpecularButton.css', 'SpecularButton.jsx')
+    lib_dependencies: list[str] = ['ogl@1.0.11']
+
+    size: rx.Var[Literal["sm", "md", "lg"]] = field(
+        doc="Preset padding and font size of the button. Default: 'lg'."
+    )
+    radius: rx.Var[int | float] = field(
+        doc="Corner radius in pixels; clamps to a pill automatically. Default: 18."
+    )
+    tint: rx.Var[str] = field(
+        doc="Color of the glass background tint. Default: '#ffffff'."
+    )
+    tint_opacity: rx.Var[int | float] = field(
+        doc="Strength of the glass tint. Default: 0."
+    )
+    blur: rx.Var[int | float] = field(
+        doc="Backdrop blur in pixels behind the button. Default: 0."
+    )
+    text_color: rx.Var[str] = field(
+        doc="Color of the button label. Default: '#f5f5f5'."
+    )
+    line_color: rx.Var[str] = field(
+        doc="Color of the moving specular highlight. Default: '#ffffff'."
+    )
+    base_color: rx.Var[str] = field(
+        doc="Color of the static edge stroke under the highlight. Default: '#525252'."
+    )
+    intensity: rx.Var[int | float] = field(
+        doc="Brightness of the specular highlight. Default: 1."
+    )
+    shine_size: rx.Var[int | float] = field(
+        doc="Angular size in degrees of each shine streak along the edge. Default: 10."
+    )
+    shine_fade: rx.Var[int | float] = field(
+        doc="How gradually each streak fades out at its ends, in degrees. Default: 40."
+    )
+    thickness: rx.Var[int | float] = field(
+        doc="Width of the highlight line in pixels. Default: 1."
+    )
+    speed: rx.Var[int | float] = field(
+        doc="Rotation speed of the sweep when autoAnimate is on. Default: 0.35."
+    )
+    follow_mouse: rx.Var[bool] = field(
+        doc="Point the light toward the cursor. Default: true."
+    )
+    proximity: rx.Var[int | float] = field(
+        doc="Distance in pixels within which the shine fades in as the cursor approaches. Default: 250."
+    )
+    auto_animate: rx.Var[bool] = field(
+        doc="Keep the shine always on with a rotating sweep, regardless of cursor distance. Default: false."
+    )
+    disabled: rx.Var[bool] = field(
+        doc="Disable the button. Default: false."
+    )
+    type: rx.Var[Literal["button", "submit", "reset"]] = field(
+        doc="Native button type. Default: 'button'."
+    )
+
+
+class SpotlightCard(ReactBitsComponent):
+    """Dynamic spotlight follows cursor casting gradient illumination.
+
+    Docs: https://reactbits.dev/components/spotlight-card
+    """
+
+    tag = "SpotlightCard"
+    alias = "ReactBitsSpotlightCard"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "SpotlightCard"
+    _rb_files = ('SpotlightCard.css', 'SpotlightCard.jsx')
+
+    spotlight_color: rx.Var[str] = field(
+        doc="Controls the color of the radial gradient used for the spotlight effect. Default: 'rgba(255, 255, 255, 0.25)'."
+    )
+
+
+class Stack(ReactBitsComponent):
+    """Layered stack with swipe animations, autoplay and smooth transitions.
+
+    Docs: https://reactbits.dev/components/stack
+    """
+
+    tag = "Stack"
+    alias = "ReactBitsStack"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "Stack"
+    _rb_files = ('Stack.css', 'Stack.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    random_rotation: rx.Var[bool] = field(
+        doc="Applies a random rotation to each card for a 'messy' look. Default: false."
+    )
+    sensitivity: rx.Var[int | float] = field(
+        doc="Drag sensitivity for sending a card to the back. Default: 200."
+    )
+    cards: rx.Var[list[Any]] = field(
+        doc="The array of card elements to display in the stack. Default: []."
+    )
+    animation_config: rx.Var[dict[str, Any]] = field(
+        doc="Configures the spring animation's stiffness and damping. Default: { stiffness: 260, damping: 20 }."
+    )
+    send_to_back_on_click: rx.Var[bool] = field(
+        doc="When enabled, the stack also shifts to the next card on click. Default: false."
+    )
+    autoplay: rx.Var[bool] = field(
+        doc="When enabled, the stack automatically cycles through cards. Default: false."
+    )
+    autoplay_delay: rx.Var[int | float] = field(
+        doc="Delay in milliseconds between automatic card transitions. Default: 3000."
+    )
+    pause_on_hover: rx.Var[bool] = field(
+        doc="When enabled, autoplay pauses when hovering over the stack. Default: false."
+    )
+    mobile_click_only: rx.Var[bool] = field(
+        doc="The `mobileClickOnly` prop. Default: false."
+    )
+    mobile_breakpoint: rx.Var[int | float] = field(
+        doc="The `mobileBreakpoint` prop. Default: 768."
+    )
+
+
+class StaggeredMenu(ReactBitsComponent):
+    """Menu with staggered item animations and smooth transitions on open/close.
+
+    Docs: https://reactbits.dev/components/staggered-menu
+    """
+
+    tag = "StaggeredMenu"
+    alias = "ReactBitsStaggeredMenu"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "StaggeredMenu"
+    _rb_files = ('StaggeredMenu.css', 'StaggeredMenu.jsx')
+    lib_dependencies: list[str] = ['gsap@3.13.0']
+
+    position: rx.Var[Literal["left", "right"]] = field(
+        doc="Anchor position for the menu panel (left or right side). Default: 'right'."
+    )
+    colors: rx.Var[list[str]] = field(
+        doc="Colors used for staggered underlay layers. Default: ['#B497CF', '#5227FF']."
+    )
+    items: rx.Var[list[Any]] = field(
+        doc="Menu items rendered inside the panel. Default: []."
+    )
+    social_items: rx.Var[list[Any]] = field(
+        doc="Social links displayed in the menu panel. Default: []."
+    )
+    display_socials: rx.Var[bool] = field(
+        doc="Whether to display the social links section. Default: true."
+    )
+    display_item_numbering: rx.Var[bool] = field(
+        doc="Whether to show numbering for menu items. Default: true."
+    )
+    logo_url: rx.Var[str] = field(
+        doc="Path to the logo image. Default: '/src/assets/logos/reactbits-gh-white.svg'."
+    )
+    menu_button_color: rx.Var[str] = field(
+        doc="Color of the menu toggle button when closed. Default: '#fff'."
+    )
+    open_menu_button_color: rx.Var[str] = field(
+        doc="Color of the menu toggle button when open. Default: '#fff'."
+    )
+    accent_color: rx.Var[str] = field(
+        doc="Hover accent color for menu items. Default: '#5227FF'."
+    )
+    change_menu_color_on_open: rx.Var[bool] = field(
+        doc="Whether to animate the button color when opening/closing. Default: true."
+    )
+    is_fixed: rx.Var[bool] = field(
+        doc="The `isFixed` prop. Default: false."
+    )
+    close_on_click_away: rx.Var[bool] = field(
+        doc="Whether to close the menu when clicking outside. Default: true."
+    )
+    on_menu_open: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function called when menu opens."
+    )
+    on_menu_close: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback function called when menu closes."
+    )
+
+
+class Stepper(ReactBitsComponent):
+    """Animated multi-step progress indicator with active state transitions.
+
+    Docs: https://reactbits.dev/components/stepper
+    """
+
+    tag = "Stepper"
+    alias = "ReactBitsStepper"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "Stepper"
+    _rb_files = ('Stepper.css', 'Stepper.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    initial_step: rx.Var[int | float] = field(
+        doc="The first step to display when the stepper is initialized. Default: 1."
+    )
+    step_circle_container_class_name: rx.Var[str] = field(
+        doc="Custom class name for the container holding the step indicators."
+    )
+    step_container_class_name: rx.Var[str] = field(
+        doc="Custom class name for the row holding the step circles/connectors."
+    )
+    content_class_name: rx.Var[str] = field(
+        doc="Custom class name for the step\u2019s main content container."
+    )
+    footer_class_name: rx.Var[str] = field(
+        doc="Custom class name for the footer area containing navigation buttons."
+    )
+    back_button_props: rx.Var[dict[str, Any]] = field(
+        doc="Extra props passed to the Back button. Default: {}."
+    )
+    next_button_props: rx.Var[dict[str, Any]] = field(
+        doc="Extra props passed to the Next/Complete button. Default: {}."
+    )
+    back_button_text: rx.Var[str] = field(
+        doc="Text for the Back button. Default: 'Back'."
+    )
+    next_button_text: rx.Var[str] = field(
+        doc="Text for the Next button when not on the last step. Default: 'Continue'."
+    )
+    disable_step_indicators: rx.Var[bool] = field(
+        doc="Disables click interaction on step indicators. Default: false."
+    )
+    render_step_indicator: rx.Var[dict[str, Any]] = field(
+        doc="Renders a custom step indicator."
+    )
+    on_step_change: rx.EventHandler[lambda step: [safe(step)]] = field(
+        doc="Callback fired whenever the step changes. Handler receives: step."
+    )
+    on_final_step_completed: rx.EventHandler[no_args_event_spec] = field(
+        doc="Callback fired when the stepper completes its final step."
+    )
+
+
+class Step(ReactBitsComponent):
+    """A single step inside a Stepper; wrap the step content with it."""
+
+    tag = "Step"
+    alias = "ReactBitsStep"
+    is_default = False
+    _rb_category = "Components"
+    _rb_name = "Stepper"
+    _rb_files = ('Stepper.css', 'Stepper.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+
+class TiltedCard(ReactBitsComponent):
+    """3D perspective tilt card reacting to pointer.
+
+    Docs: https://reactbits.dev/components/tilted-card
+    """
+
+    tag = "TiltedCard"
+    alias = "ReactBitsTiltedCard"
+    is_default = True
+    _rb_category = "Components"
+    _rb_name = "TiltedCard"
+    _rb_files = ('TiltedCard.css', 'TiltedCard.jsx')
+    lib_dependencies: list[str] = ['motion@12.23.21']
+
+    image_src: rx.Var[str] = field(
+        doc="The source URL of the image. Default: N/A."
+    )
+    alt_text: rx.Var[str] = field(
+        doc="Alternative text for the image. Default: 'Tilted card image'."
+    )
+    caption_text: rx.Var[str] = field(
+        doc="Text for the tooltip caption."
+    )
+    container_height: rx.Var[str] = field(
+        doc="Height of the overall card container. Default: '300px'."
+    )
+    container_width: rx.Var[str] = field(
+        doc="Width of the overall card container. Default: '100%'."
+    )
+    image_height: rx.Var[str] = field(
+        doc="Height of the inner image. Default: '300px'."
+    )
+    image_width: rx.Var[str] = field(
+        doc="Width of the inner image. Default: '300px'."
+    )
+    scale_on_hover: rx.Var[int | float] = field(
+        doc="Scaling factor applied on hover. Default: 1.1."
+    )
+    rotate_amplitude: rx.Var[int | float] = field(
+        doc="Controls how much the card tilts with mouse movement. Default: 14."
+    )
+    show_mobile_warning: rx.Var[bool] = field(
+        doc="Whether to show a small alert about mobile usage. Default: true."
+    )
+    show_tooltip: rx.Var[bool] = field(
+        doc="Toggles the visibility of the tooltip (figcaption). Default: true."
+    )
+    overlay_content: rx.Var[rx.Component | str] = field(
+        doc="A React node to display as an overlay on the card."
+    )
+    display_overlay_content: rx.Var[bool] = field(
+        doc="Whether to display any overlayContent on top of the image. Default: false."
+    )
+
+
+accordion_gallery = AccordionGallery.create
+animated_list = AnimatedList.create
+border_glow = BorderGlow.create
+bounce_cards = BounceCards.create
+bubble_menu = BubbleMenu.create
+card_nav = CardNav.create
+card_swap = CardSwap.create
+card_swap_card = CardSwapCard.create
+carousel = Carousel.create
+chroma_grid = ChromaGrid.create
+circular_gallery = CircularGallery.create
+counter = Counter.create
+curved_input = CurvedInput.create
+decay_card = DecayCard.create
+depth_carousel = DepthCarousel.create
+dock = Dock.create
+dome_gallery = DomeGallery.create
+drift_wall = DriftWall.create
+elastic_slider = ElasticSlider.create
+flowing_menu = FlowingMenu.create
+fluid_glass = FluidGlass.create
+flying_posters = FlyingPosters.create
+folder = Folder.create
+glass_icons = GlassIcons.create
+glass_surface = GlassSurface.create
+gooey_nav = GooeyNav.create
+infinite_menu = InfiniteMenu.create
+infinite_spiral = InfiniteSpiral.create
+lanyard = Lanyard.create
+line_sidebar = LineSidebar.create
+magic_bento = MagicBento.create
+masonry = Masonry.create
+model_viewer = ModelViewer.create
+morph_slider = MorphSlider.create
+option_wheel = OptionWheel.create
+pill_nav = PillNav.create
+pixel_card = PixelCard.create
+profile_card = ProfileCard.create
+reflective_card = ReflectiveCard.create
+scroll_stack = ScrollStack.create
+scroll_stack_item = ScrollStackItem.create
+specular_button = SpecularButton.create
+spotlight_card = SpotlightCard.create
+stack = Stack.create
+staggered_menu = StaggeredMenu.create
+stepper = Stepper.create
+step = Step.create
+tilted_card = TiltedCard.create