## Marquee  
Create continuous scrolling animation for content  
Category: Miscellaneous  

### Usage

`Marquee` component creates a continuous scrolling animation for its children.
It is commonly used for displaying logos, testimonials, or any repeating content.

Set a width on the Marquee children to ensure smooth scrolling when the content repeats.

```python
import dash_mantine_components as dmc

component = dmc.Marquee(
    children=[
        dmc.Badge("Python", color="red", variant="light", w=80),
        dmc.Badge("Plotly", color="blue", variant="light", w=80),
        dmc.Badge("Dash", color="violet", variant="light", w=80),
        dmc.Badge("Mantine", color="yellow", variant="light", w=80),
        dmc.Badge("React", color="teal", variant="light", w=80),
    ],
    gap="lg"
)
```
### Pause on hover

Set `pauseOnHover` prop to pause the animation when the user hovers over the component:


```python
import dash_mantine_components as dmc


component = dmc.Marquee(
    children=[
        dmc.Badge("Python", color="red", variant="light", w=80),
        dmc.Badge("Plotly", color="blue", variant="light", w=80),
        dmc.Badge("Dash", color="violet", variant="light", w=80),
        dmc.Badge("Mantine", color="yellow", variant="light", w=80),
        dmc.Badge("React", color="teal", variant="light", w=80),
    ],
    pauseOnHover=True,
)
```
### Vertical orientation

Set `orientation="vertical"` to scroll content vertically. Note that you need to set
a fixed height on the container for vertical scrolling:


```python
import dash_mantine_components as dmc


component = dmc.Marquee(
    children=[
        dmc.Badge("Python", color="red", variant="light", w=80),
        dmc.Badge("Plotly", color="blue", variant="light", w=80),
        dmc.Badge("Dash", color="violet", variant="light", w=80),
        dmc.Badge("Mantine", color="yellow", variant="light", w=80),
        dmc.Badge("React", color="teal", variant="light", w=80),
    ],
    h=300,
    orientation="vertical",
)
```
### Multiple rows

You can combine multiple `Marquee` components with different directions to create
more complex layouts:


```python
import dash_mantine_components as dmc

marquee_content = [
    dmc.Badge("Python", color="red", variant="light", w=80),
    dmc.Badge("Plotly", color="blue", variant="light", w=80),
    dmc.Badge("Dash", color="violet", variant="light", w=80),
    dmc.Badge("Mantine", color="yellow", variant="light", w=80),
    dmc.Badge("React", color="teal", variant="light", w=80),
]

component = dmc.Stack([
    dmc.Marquee(marquee_content),
    dmc.Marquee(marquee_content, reverse=True),
])
```
### Fade edges

By default, `Marquee` displays gradient fade on edges to create a smooth transition effect.
You can customize the fade using the following props:

* `fadeEdges` – enables/disables fade gradient (default: `true`)
* `fadeEdgeColor` – color of the fade gradient (default: `var(--mantine-color-body)`)
* `fadeEdgeSize` – size of the fade area (default: `5%`)


```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Box(
            [
                dmc.Text("Default fade (5%)", size="sm", mb="xs"),
                dmc.Marquee(
                    [
                        dmc.Badge("Python", color="red", variant="light", w=80),
                        dmc.Badge("Plotly", color="blue", variant="light", w=80),
                        dmc.Badge("Dash", color="violet", variant="light", w=80),
                        dmc.Badge("pandas", color="yellow", variant="light", w=80),
                    ],
                    gap="lg",
                ),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("Larger fade (15%)", size="sm", mb="xs"),
                dmc.Marquee(
                    [
                        dmc.Badge("Python", color="red", variant="light", w=80),
                        dmc.Badge("Plotly", color="blue", variant="light", w=80),
                        dmc.Badge("Dash", color="violet", variant="light", w=80),
                        dmc.Badge("pandas", color="yellow", variant="light", w=80),
                    ],
                    gap="lg",
                    fadeEdgeSize="15%",
                ),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("Custom fade color", size="sm", mb="xs"),
                dmc.Marquee(
                    [
                        dmc.Badge("Python", color="red", variant="light", w=80),
                        dmc.Badge("Plotly", color="blue", variant="light", w=80),
                        dmc.Badge("Dash", color="violet", variant="light", w=80),
                        dmc.Badge("pandas", color="yellow", variant="light", w=80),
                    ],
                    gap="lg",
                    fadeEdgeColor="var(--mantine-color-red-light)",
                ),
            ]
        ),
        dmc.Box(
            [
                dmc.Text("No fade", size="sm", mb="xs"),
                dmc.Marquee(
                    [
                        dmc.Badge("Python", color="blue", variant="light", w=80),
                        dmc.Badge("Plotly", color="indigo", variant="light", w=80),
                        dmc.Badge("Dash", color="violet", variant="light", w=80),
                        dmc.Badge("pandas", color="teal", variant="light", w=80),
                    ],
                    gap="lg",
                    fadeEdges=False,
                ),
            ]
        ),
    ]
)
```
### Customization

Use the following props to customize the marquee behavior:

* `reverse` – reverses animation direction
* `repeat` – number of times children are repeated (default: 4)
* `duration` – animation duration in ms (default: 100000)
* `gap` – gap between repeated children, key of `theme.spacing` or any valid CSS value


### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.



#### Marquee selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | .mantine-Marquee-root | Root element |
| content | .mantine-Marquee-content | Animated scrolling container |
| group | .mantine-Marquee-group | Repeated children wrapper |

#### Marquee CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root | --marquee-duration | Controls animation duration |
| root | --marquee-gap | Controls gap between items |
| root | --marquee-repeat | Number of times content is repeated |
| root | --marquee-fade-color | Controls the fade edge gradient color |
| root | --marquee-fade-size | Controls the size of the fade gradient |

#### Marquee data attributes

| Selector | Attribute | Condition | Value |
|----------|-----------|-----------|-------|
| root | data-orientation | Value depends on `orientation` prop | horizontal \| vertical |
| root | data-reverse | `reverse` prop is set | - |
| root | data-pause-on-hover | `pauseOnHover` prop is set | - |
| root | data-fade-edges | `fadeEdges` prop is `true` (default) | - |


### Keyword Arguments
#### Marquee

- children (a list of or a singular dash component, string or number; optional):
    Content to scroll.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- duration (number; optional):
    Animation duration in ms, `100000` by default.

- fadeEdgeColor (string; optional):
    Color of the fade gradient, `'var(--mantine-color-body)'` by
    default.

- fadeEdgeSize (string; optional):
    Size of the fade gradient, `'5%'` by default.

- fadeEdges (boolean; optional):
    Whether to show gradient fade on edges, `True` by default.

- gap (number; optional):
    Gap between repeated children, key of `theme.spacing` or any valid
    CSS value, `'md'` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Scroll orientation, `'horizontal'` by default. Set a fixed height
    (e.g. `h=300`) when using `'vertical'`.

- pauseOnHover (boolean; optional):
    Pauses animation on hover, `False` by default.

- repeat (number; optional):
    Number of times children are repeated inline for seamless
    scrolling, `4` by default.

- reverse (boolean; optional):
    Reverses animation direction, `False` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.