MagicMarquee

MagicMarquee is a flexible, unstyled, CSS driven marquee component.

Magic as a Service™Vue Equipment

DefaultDemo.vue

<template>
  <magic-marquee
    id="magic-marquee-demo"
    class="bg-surface-base text-surface py-6"
  >
    <span>Magic as a Service™</span>
    <span>Vue Equipment</span>
  </magic-marquee>
</template>

Anatomy

<template>
  <magic-marquee>
    <!-- your content -->
  </magic-marquee>
</template>

<script setup>
const { play } = useMagicMarquee('your-marquee-id')
</script>

Installation

CLI

Add @maas/vue-equipment to your dependencies.

pnpm add @maas/vue-equipment

Vue

If you are using Vue, import and add MagicMarqueePlugin to your app.

import { createApp } from 'vue'
import { MagicMarqueePlugin } from '@maas/vue-equipment/plugins/MagicMarquee'

const app = createApp({})

app.use(MagicMarqueePlugin)

Nuxt

The marquee is available as a Nuxt module. In your Nuxt config file add @maas/vue-equipment/nuxt to your modules and add MagicMarquee to the plugins in your configuration.

export default defineNuxtConfig({
  modules: ['@maas/vue-equipment/nuxt'],
  vueEquipment: {
    plugins: ['MagicMarquee'],
  },
})

Composable

In order to interact with the marquee from anywhere within your app, we provide a useMagicMarquee composable. Import it directly when needed.

import { useMagicMarquee } from '@maas/vue-equipment/plugins/MagicMarquee'

const { play } = useMagicMarquee('your-marquee-id')

function handleClick() {
  play()
}

Peer Dependencies

MagicMarquee has no optional peer dependencies. It only relies on the core peer dependencies, which npm, pnpm and bun install automatically.

API Reference

Props

Prop	Type	Required
`id`	`MaybeRef<string>`	`true`
`options`	`MagicMarqueeOptions`	`false`

Options

Option	Type	Default
`direction`	`string`	`normal`
`speed`	`number`	`1`

CSS Variables

Variable	Default
`--magic-marquee-justify-content`	`flex-start`
`--magic-marquee-align-items`	`baseline`
`--magic-marquee-gap`	`1rem`
`--magic-marquee-content-width`	`unset`

Examples

Play Pause

Magic as a Service™Vue Equipment

PlayPauseDemo.vue

<template>
  <div class="flex flex-col items-center gap-8">
    <magic-marquee
      id="magic-marquee-play-pause-demo"
      class="bg-surface-base text-surface rounded-surface-sm py-6"
    >
      <span>Magic as a Service™</span>
      <span>Vue Equipment</span>
    </magic-marquee>

    <div class="flex w-full max-w-xs gap-2">
      <m-button v-if="!isPlaying" block @click="play">Play</m-button>
      <m-button v-else-if="isPlaying" block @click="pause">Pause</m-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicMarquee } from '@maas/vue-equipment/plugins/MagicMarquee'

const { play, pause, isPlaying } = useMagicMarquee(
  'magic-marquee-play-pause-demo'
)
</script>

Playback Speed

Magic as a Service™Vue Equipment

PlaybackSpeedDemo.vue

<template>
  <div class="flex flex-col items-center justify-center gap-8">
    <magic-marquee
      id="magic-marquee-playback-speed-demo"
      class="bg-surface-base text-surface rounded-surface-sm py-6"
    >
      <span>Magic as a Service™</span>
      <span>Vue Equipment</span>
    </magic-marquee>

    <div class="flex w-full max-w-xs gap-2">
      <m-button block @click="decreaseSpeed(factor)">Slower</m-button>
      <m-button block @click="increaseSpeed(factor)">Faster</m-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { MButton } from 'mirror-compat'
import { useMagicMarquee } from '@maas/vue-equipment/plugins/MagicMarquee'

const factor = ref(1)

const { increaseSpeed, decreaseSpeed } = useMagicMarquee(
  'magic-marquee-playback-speed-demo'
)
</script>