@charlie404/marquee-text

A lightweight web component for creating smooth text marquee effects with customizable speed, font size, and direction. Display words from a comma-separated string with responsive typography.

Installation

npm install @charlie404/marquee-text

Usage

Import the component

import { MarqueeText } from "@charlie404/marquee-text";

new MarqueeText();

Add to your HTML

<!-- Example with all props specified -->
<marquee-text
  words="Hello, World, Lorem, Ipsum, Dolor, Sit, Amet"
  speed="100"
  desktop-margin="20"
  tablet-margin="15"
  mobile-margin="10"
  desktop-font-size="48"
  tablet-font-size="36"
  mobile-font-size="24"
  repeat="20"
  reverse
>
</marquee-text>

<!-- Example using cascade (tablet inherits from desktop, mobile from tablet) -->
<marquee-text
  words="Creative, Design, Development, Innovation"
  speed="100"
  desktop-margin="25"
  desktop-font-size="60"
  mobile-font-size="30"
  repeat="15"
>
</marquee-text>

<!-- Minimal example (all margins and font-sizes inherit from desktop) -->
<marquee-text 
  words="Simple, Clean, Elegant" 
  desktop-margin="30" 
  desktop-font-size="40"
>
</marquee-text>

Required CSS

Add this CSS to your stylesheet for proper display:

marquee-text {
  display: block;
  width: 100%;
}

Attributes

| Attribute | Type | Default | Description | | --------------------- | ------- | ------------------- | -------------------------------------------------------- | | words | string | "" | Comma-separated list of words to display | | speed | number | 100 | Animation speed in pixels per second | | desktop-margin | number | 20 | Spacing between words on desktop devices (≥ 1024px) | | tablet-margin | number | desktop-margin | Spacing between words on tablet devices (768px - 1023px) | | mobile-margin | number | tablet-margin | Spacing between words on mobile devices (< 768px) | | desktop-font-size | number | 48 | Font size in pixels on desktop devices (≥ 1024px) | | tablet-font-size | number | desktop-font-size | Font size in pixels on tablet devices (768px - 1023px) | | mobile-font-size | number | tablet-font-size | Font size in pixels on mobile devices (< 768px) | | repeat | number | 10 | Number of times to repeat the word sequence | | reverse | boolean | false | Reverse the animation direction |

Cascade Logic:

• If tablet-margin is not specified, it defaults to desktop-margin
• If mobile-margin is not specified, it defaults to tablet-margin
• If tablet-font-size is not specified, it defaults to desktop-font-size
• If mobile-font-size is not specified, it defaults to tablet-font-size

The marquee height is automatically calculated based on the current font size (font-size × 1.5).

License

MIT