MazTicker

MazTicker is a scrolling ticker component that continuously animates content in a loop with configurable speed, direction, pause controls, and gradient overlays

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

Vue 3Nuxt 3TypeScriptTailwindCSSMaz UI

vue

<template>
  <MazTicker>
    <span>Vue 3</span>
    <span>Nuxt 3</span>
    <span>TypeScript</span>
    <span>TailwindCSS</span>
    <span>Maz UI</span>
  </MazTicker>
</template>

<script lang="ts" setup>
  import MazTicker from 'maz-ui/components/MazTicker'
</script>

Screenshots gallery

A vertical ticker with images, similar to a screenshot showcase. Uses orientation="vertical" with pause-on-hover for user-friendly browsing.

vue

<template>
  <div class="maz-flex maz-gap-4 maz-overflow-hidden" style="height: 300px">
    <MazTicker
      orientation="vertical"
      :overlay="false"
      :duration="30"
      pause-on-hover
    >
      <img
        v-for="i in 4"
        :key="i"
        :src="`https://picsum.photos/seed/maz-ticker-${i}/400/225`"
        :alt="`Screenshot ${i}`"
        class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
        style="width: 400px; height: 225px"
      />
    </MazTicker>
    <MazTicker
      orientation="vertical"
      :overlay="false"
      :duration="30"
      reverse
      pause-on-hover
    >
      <img
        v-for="i in 4"
        :key="i"
        :src="`https://picsum.photos/seed/maz-ticker-${i + 4}/400/225`"
        :alt="`Screenshot ${i + 4}`"
        class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
        style="width: 400px; height: 225px"
      />
    </MazTicker>
    <MazTicker
      class="maz-hidden md:maz-flex"
      orientation="vertical"
      :overlay="false"
      :duration="30"
      pause-on-hover
    >
      <img
        v-for="i in 4"
        :key="i"
        :src="`https://picsum.photos/seed/maz-ticker-${i + 8}/400/225`"
        :alt="`Screenshot ${i + 8}`"
        class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
        style="width: 400px; height: 225px"
      />
    </MazTicker>
  </div>
</template>

<script lang="ts" setup>
  import MazTicker from 'maz-ui/components/MazTicker'
</script>

3D Screenshots showcase

Create an eye-catching 3D perspective effect with tilted vertical tickers, inspired by the Nuxt UI Marquee screenshots demo.

vue

<template>
  <div
    class="maz-overflow-hidden maz-rounded-lg maz-bg-gray-100 dark:maz-bg-gray-800"
    style="height: 400px; perspective: 1500px"
  >
    <div
      class="maz-flex maz-gap-4"
      style="height: 900px; margin-top: -300px; margin-left: -150px; transform: rotateX(55deg) rotateZ(30deg); transform-origin: center center"
    >
      <MazTicker
        reverse
        orientation="vertical"
        :overlay="false"
        :duration="40"
        style="width: 300px; flex-shrink: 0"
      >
        <img
          v-for="i in 4"
          :key="i"
          :src="`https://picsum.photos/seed/maz-3d-${i}/460/258`"
          :alt="`Screenshot ${i}`"
          width="460"
          height="258"
          loading="lazy"
          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
          style="width: 300px; height: 168px"
        />
      </MazTicker>
      <MazTicker
        orientation="vertical"
        :overlay="false"
        :duration="40"
        style="width: 300px; flex-shrink: 0"
      >
        <img
          v-for="i in 4"
          :key="i"
          :src="`https://picsum.photos/seed/maz-3d-${i + 4}/460/258`"
          :alt="`Screenshot ${i + 4}`"
          width="460"
          height="258"
          loading="lazy"
          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
          style="width: 300px; height: 168px"
        />
      </MazTicker>
      <MazTicker
        reverse
        orientation="vertical"
        :overlay="false"
        :duration="40"
        style="width: 300px; flex-shrink: 0"
      >
        <img
          v-for="i in 4"
          :key="i"
          :src="`https://picsum.photos/seed/maz-3d-${i + 8}/460/258`"
          :alt="`Screenshot ${i + 8}`"
          width="460"
          height="258"
          loading="lazy"
          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
          style="width: 300px; height: 168px"
        />
      </MazTicker>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import MazTicker from 'maz-ui/components/MazTicker'
</script>

Orientation

Horizontal (default)

By default, the ticker will scroll horizontally.

Item 1Item 2Item 3

Vertical

Otherwise, the ticker will scroll vertically.

Item 1

Item 2

Item 3

vue

<template>
  <div style="height: 100px">
    <MazTicker orientation="vertical">
      <div class="maz-py-2">Item 1</div>
      <div class="maz-py-2">Item 2</div>
      <div class="maz-py-2">Item 3</div>
    </MazTicker>
  </div>
</template>

Reverse direction

Normal direction

Reverse direction

Speed control

Control the animation speed with the duration prop (in seconds). Lower values = faster.

Fast (5s)

Normal (20s)

Slow (40s)

vue

<template>
  <MazTicker :duration="5">
    <span>Fast (5s)</span>
  </MazTicker>
  <MazTicker :duration="20">
    <span>Normal (20s)</span>
  </MazTicker>
  <MazTicker :duration="40">
    <span>Slow (40s)</span>
  </MazTicker>
</template>

Repeat

The repeat prop controls how many times the content is duplicated to create a seamless loop. The default value is 4. Increase it when your content is short to avoid visible gaps during the animation.

Repeat 2

Repeat 10

Custom gap

Small gap

Large gap

Overlay

Without overlay

You can disable the overlay by setting the overlay prop to false.

No gradient overlay

Custom overlay size

You can change the size of the overlay by setting the overlay-size prop to a CSS value.

Small overlay (10%)

Large overlay (50%)

vue

<template>
  <MazTicker overlay-size="10%" :repeat="10">
    <span>Small overlay (10%)</span>
  </MazTicker>
  <MazTicker overlay-size="50%" :repeat="10">
    <span>Large overlay (50%)</span>
  </MazTicker>
</template>

Pause controls

Pause on hover

When a child element is hovered, the animation will pause.

Hover me to pause

Pause on focus

When a child element is focused, the animation will pause.

Focusable link 1 Focusable link 2 Focusable link 3

Programmatic pause

You can control the animation programmatically with the paused prop.

Controlled by button

vue

<template>
  <MazBtn size="sm" @click="isPaused = !isPaused">
    {{ isPaused ? 'Resume' : 'Pause' }}
  </MazBtn>
  <MazTicker :paused="isPaused">
    <span>Controlled by button</span>
  </MazTicker>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import MazTicker from 'maz-ui/components/MazTicker'
  import MazBtn from 'maz-ui/components/MazBtn'

  const isPaused = ref(false)
</script>

Custom content

MazTicker accepts any HTML content, not just text.

Vue 3Nuxt 3TypeScriptTailwindCSSMaz UI

vue

<template>
  <MazTicker pause-on-hover :duration="15">
    <MazBadge color="primary">Vue 3</MazBadge>
    <MazBadge color="success">Nuxt 3</MazBadge>
    <MazBadge color="info">TypeScript</MazBadge>
    <MazBadge color="warning">TailwindCSS</MazBadge>
    <MazBadge color="accent">Maz UI</MazBadge>
  </MazTicker>
</template>

<script lang="ts" setup>
  import MazTicker from 'maz-ui/components/MazTicker'
  import MazBadge from 'maz-ui/components/MazBadge'
</script>

Slots

Before and after

Replace the default before and after slots with custom content.

Latest:

Breaking news item

End

vue

<template>
  <MazTicker>
    <template #before>
      <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">Latest:</div>
    </template>
    <span>Breaking news item</span>
    <template #after>
      <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">End</div>
    </template>
  </MazTicker>
</template>

Timing function

Linear (default)

Ease in out

vue

<template>
  <MazTicker animation-timing-function="linear" :repeat="10">
    <span>Linear (default)</span>
  </MazTicker>
  <MazTicker animation-timing-function="ease-in-out" :repeat="10">
    <span>Ease in out</span>
  </MazTicker>
</template>

Props

Name	Description	Type	Required	Default	Possible values
orientation	Scrolling direction	`MazTickerOrientation`	No	`horizontal`	`'horizontal' \| 'vertical'`
reverse	Reverse the scrolling direction	`boolean`	No	`false`	-
duration	Duration of one full animation cycle in seconds	`number`	No	`20`	-
gap	Gap between repeated content blocks (CSS value)	`TSLiteralType \| TSLiteralType \| TSLiteralType \| TSLiteralType \| TSLiteralType \| TSLiteralType`	No	`1rem`	-
repeat	Number of times the content is duplicated for seamless looping	`number`	No	`4`	-
pause-on-hover	Pause animation on mouse hover	`boolean`	No	`false`	-
pause-on-focus	Pause animation when a child element receives focus	`boolean`	No	`false`	-
paused	Programmatic pause control - takes precedence over pauseOnHover and pauseOnFocus	`boolean`	No	`false`	-
overlay	Show gradient overlays on edges to fade content in/out	`boolean`	No	`true`	-
overlay-size	Size of the gradient overlay zones (CSS value)	`string`	No	`33%`	-
animation-timing-function	CSS animation timing function	`string`	No	`linear`	-

Slots

Name	Description	Bindings
before	Static content before the scrolling area
overlay-start	Custom overlay for the start edge (left in horizontal, top in vertical). Replaces default gradient.
default	Content to scroll (repeated for seamless animation)
overlay-end	Custom overlay for the end edge (right in horizontal, bottom in vertical). Replaces default gradient.
after	Static content after the scrolling area

MazTicker ​

Basic usage ​

Screenshots gallery ​

3D Screenshots showcase ​

Orientation ​

Horizontal (default) ​

Vertical ​

Reverse direction ​

Speed control ​

Repeat ​

Custom gap ​

Overlay ​

Without overlay ​

Custom overlay size ​

Pause controls ​

Pause on hover ​

Pause on focus ​

Programmatic pause ​

Custom content ​

Slots ​

Before and after ​

Timing function ​

Props ​

Slots ​

MazTicker

Basic usage

Screenshots gallery

3D Screenshots showcase

Orientation

Horizontal (default)

Vertical

Reverse direction

Speed control

Repeat

Custom gap

Overlay

Without overlay

Custom overlay size

Pause controls

Pause on hover

Pause on focus

Programmatic pause

Custom content

Slots

Before and after

Timing function

Props

Slots