MagicMarquee

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

Preview

Magic as a Service™Vue Equipment

Magic as a Service™Vue Equipment

Code

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

Overview

• Overview
• Anatomy
• Installation
• Peer Dependencies
• API Reference
• Examples

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

pnpm install @maas/vue-equipment

npm

npm install @maas/vue-equipment

yarn

yarn add @maas/vue-equipment

bun

bun install @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'

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'

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

function handleClick() {
  play()
}

TIP

If you have installed the marquee as a Nuxt module, the composable will be auto-imported and is automatically available in your Nuxt app.

Peer Dependencies

If you haven’t installed the required peer dependencies automatically, you’ll need to install the following packages manually.

Package
@nuxt/kit
@vueuse/core
defu

Installation

pnpm

pnpm install @nuxt/kit @vueuse/core defu

npm

npm install @nuxt/kit @vueuse/core defu

yarn

yarn add @nuxt/kit @vueuse/core defu

bun

bun install @nuxt/kit @vueuse/core defu

API Reference

Props

Prop	Type	Required
id	MaybeRef<string>	true
options	MagicMenuOptions	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

Preview

Magic as a Service™Vue Equipment

Magic as a Service™Vue Equipment

Code

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

    <div class="flex gap-2 w-full max-w-xs">
      <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 '@maas/mirror/vue'
import { useMagicMarquee } from '@maas/vue-equipment/plugins'

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

Playback Speed

Preview

Magic as a Service™Vue Equipment

Magic as a Service™Vue Equipment

Code

<template>
  <div class="flex flex-col items-center justify-center gap-8">
    <magic-marquee
      id="magic-marquee-playback-speed-demo"
      class="bg-surface-elevation-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 '@maas/mirror/vue'
import { useMagicMarquee } from '@maas/vue-equipment/plugins'

const factor = ref(1)

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