Mockline v0.19.0

Page Marquee

A component for creating smooth, animated scrolling content in horizontal or vertical directions.

Overview

The Page Marquee component creates an infinite scrolling animation effect for content, perfect for displaying announcements, social media feeds, or any repeating content. It supports both horizontal and vertical orientations, with customizable animation settings.

Usage

Basic Example

<template>
  <MPageMarquee>
    <Icon name="i-simple-icons-github" class="size-10 shrink-0" />
    <Icon name="i-simple-icons-discord" class="size-10 shrink-0" />
    <Icon name="i-simple-icons-x" class="size-10 shrink-0" />
  </MPageMarquee>
</template>

Reverse Direction

<template>
  <MPageMarquee reverse>
    <Icon name="i-simple-icons-github" class="size-10 shrink-0" />
    <Icon name="i-simple-icons-discord" class="size-10 shrink-0" />
    <Icon name="i-simple-icons-x" class="size-10 shrink-0" />
  </MPageMarquee>
</template>

Vertical Orientation

<template>
  <MPageMarquee orientation="vertical">
    <Icon name="i-simple-icons-github" class="size-10 shrink-0" />
    <Icon name="i-simple-icons-discord" class="size-10 shrink-0" />
    <Icon name="i-simple-icons-x" class="size-10 shrink-0" />
  </MPageMarquee>
</template>

With Text Content

Vue

React

Angular

Svelte

Vue

React

Angular

Svelte

Vue

React

Angular

Svelte

Vue

React

Angular

Svelte

<template>
  <MPageMarquee>
    <span class="text-xl font-bold px-4">Vue</span>
    <span class="text-xl font-bold px-4">React</span>
    <span class="text-xl font-bold px-4">Angular</span>
    <span class="text-xl font-bold px-4">Svelte</span>
  </MPageMarquee>
</template>

Props

orientation
'horizontal' | 'vertical'

The direction of the marquee animation.

pauseOnHover
boolean

Whether to pause the animation when hovering over the marquee.

reverse
boolean

Whether to reverse the animation direction.

repeat
number

The number of times to repeat the content.

overlay
boolean

Whether to show a gradient overlay at the edges.

class
string

Additional classes to apply to the marquee container.

Slots

default
any

The content to be displayed in the marquee. Can include any valid HTML, components, or text.

Best Practices

  1. Content Spacing:
    • Ensure consistent spacing between items
    • Use appropriate padding and margins
    • Consider the content size relative to the container
  2. Animation Performance:
    • Keep content lightweight to maintain smooth animations
    • Use appropriate image sizes and optimizations
    • Consider reducing repeat count for heavy content
  3. Accessibility:
    • Provide alternative ways to access the content
    • Consider users who may be sensitive to motion
    • Use appropriate ARIA labels when needed
  4. Responsive Design:
    • Test the marquee at different screen sizes
    • Adjust content size and spacing for mobile devices
    • Consider orientation changes on different devices
PageBody
A component for wrapping and structuring the main content area of a page with consistent spacing and layout.
PageSection
A versatile section component for creating visually appealing content blocks with support for headlines, titles, descriptions, and flexible layouts.