# Community Marquee

`{% communityMarquee %}` is a scrolling ticker with extra flair — content
that slides continuously across the row (logos, announcements, a tagline). On top of the
left/right/up/down scroll of the built-in
[`{% marquee %}`](/components/layout/marquee/), this variant adds
isometric and circle layouts, fade-edge modes, repeat control, and 3D tilt/perspective/rotate/skew.

> **A Community Component** — wraps [Marquee](https://gfazioli.github.io/mantine-marquee/) by
> **gfazioli**, **MIT** licensed, npm `@gfazioli/mantine-marquee`.

Because Mantine core already ships a native `Marquee` (the one behind the built-in
`{% marquee %}`), the community variant is registered under the distinct
tag **`communityMarquee`** so the two never collide — both are available.

Use it as `{% communityMarquee %}` in Markdown, or call it from Python
logic (loops, snippets) via `component('aardvark', 'communityMarquee', …)`.

## Demonstrations

### Basic ticker

The block body is the scrolling content. `direction` (left, right, up, down) sets the scroll
axis; `duration` is the seconds for one loop.

Ship docs faster · Built-in components · No JavaScript to write · Markdown all the way down ·

<br>

Source: Markdown

```aardvark
{% communityMarquee duration=20 %}
Ship docs faster · Built-in components · No JavaScript to write · Markdown all the way down ·
{% endCommunityMarquee %}
```


Source: Python

```python
component('aardvark', 'communityMarquee', duration=20,
          children='Ship docs faster · Built-in components · No JavaScript to write ·')
```



### Pause on hover and fade edges

`pauseOnHover` stops the scroll while the pointer is over it; `fadeEdges` softens the edges so
content fades in and out instead of clipping (set it to a bare flag for the default fade, or
name a mode — `linear`, `ellipse`, `rect`).

React · Mantine · Aardvark · Static sites · Islands · Markdown ·

<br>

Source: Markdown

```aardvark
{% communityMarquee duration=25 pauseOnHover=true fadeEdges='linear' %}
React · Mantine · Aardvark · Static sites · Islands · Markdown ·
{% endCommunityMarquee %}
```



### Reverse direction

`direction='right'` scrolls the other way; `direction='up'` / `direction='down'` scroll
vertically.

← scrolling the other way · keep it moving · ← scrolling the other way ·

<br>

Source: Markdown

```aardvark
{% communityMarquee direction='right' duration=20 %}
← scrolling the other way · keep it moving ·
{% endCommunityMarquee %}
```



### Isometric variant

`variant='isometric'` tilts the row into a 3D plane; tune it with `tilt`, `perspective`,
`rotate`, and `skew`.

Isometric · 3D ticker · Tilt and perspective · Isometric · 3D ticker ·

<br>

Source: Markdown

```aardvark
{% communityMarquee variant='isometric' duration=22 tilt=45 %}
Isometric · 3D ticker · Tilt and perspective ·
{% endCommunityMarquee %}
```



## With other components

The scrolling content can be any Aardvark tags, already rendered — here a row of
[Badges](/components/data-display/badge/) glides across as a feature ticker.

Fast Themeable Accessible Open

<br>

Source: Markdown

```aardvark
{% communityMarquee duration=18 gap='1.5rem' %}
{% badge variant='light' color='grape' %}Fast{% endBadge %} {% badge variant='light' color='indigo' %}Themeable{% endBadge %} {% badge variant='light' color='teal' %}Accessible{% endBadge %}
{% endCommunityMarquee %}
```



## Attributes

Omit any attribute to take its default. Bare flags (e.g. `pauseOnHover`, `fadeEdges`) become
`=True`.

| Attribute | Valid values | Description |
| --- | --- | --- |
| `direction` | `left` / `right` / `up` / `down` (default `left`) | Scroll axis and direction. Maps to the package's `vertical` (up/down) + `reverse` (right/down). |
| `variant` | `default` / `isometric` / `circle` | Layout variant. `isometric` and `circle` add a 3D / ring presentation. |
| `duration` | Integer (seconds) | Seconds for one full loop. |
| `gap` | A CSS length (e.g. `2rem`) | Space between the looping copies of the content. |
| `repeat` | Integer | How many times the content is cloned to fill the row. |
| `pauseOnHover` | `true` / `false` (default `false`) | Pause scrolling while the pointer is over the marquee. |
| `fadeEdges` | bare flag / `linear` / `ellipse` / `rect` | Fade the leading/trailing edges. A bare flag uses the default fade; a named value picks the mask shape. |
| `fadeEdgesSize` | `xs`–`xl` or a percentage | Size of the edge fade. |
| `tilt` | Integer (degrees) | 3D tilt angle (isometric variant). |
| `perspective` | Integer (px) | Depth of the 3D scene (3D variants). |
| `rotate` | Integer (degrees) | In-plane rotation (isometric variant). |
| `skew` | Integer (degrees) | Horizontal skew (isometric variant). |
| `attr={…}` | An object of HTML attributes | Forwards raw HTML attributes onto the rendered element (see [Injecting Attributes](#injecting-attributes)). |

## CSS Selector

The mounted island is wrapped in an element carrying `data-aardvark-island="CommunityMarquee"`,
so you can target the whole ticker from your own CSS:

```css
[data-aardvark-island='CommunityMarquee'] {
  margin-block: 2rem;
}
```

The package itself styles the track and fade with its own data-attribute selectors
(`[data-variant]`, `[data-vertical]`, `[data-fade-edges]`) and CSS variables
(`--marquee-gap`, `--marquee-fade-edge-size`, …); the stylesheet ships from
`@gfazioli/mantine-marquee/styles.css`, imported automatically by the island.

## Injecting Attributes

Pass `attr={…}` to forward raw HTML attributes onto the rendered element — useful for `id`,
`data-*` hooks, ARIA, or analytics attributes that aren't component props:

Tagged for analytics · Accessible label · Tagged for analytics ·

<br>

Source: Markdown

```aardvark
{% communityMarquee duration=20 attr={'data-analytics': 'home-ticker', 'aria-label': 'Feature ticker'} %}
Tagged for analytics · Accessible label ·
{% endCommunityMarquee %}
```


Source: Python

```python
component('aardvark', 'communityMarquee', duration=20,
          attr={'data-analytics': 'home-ticker', 'aria-label': 'Feature ticker'},
          children='Tagged for analytics · Accessible label ·')
```