Marquee

Preview

Source

---
import { Marquee } from '@bejamas/ui/components/marquee';
---

<Marquee class="dark:invert">
  <img src="/demo/logo/sonos.svg" alt="Netflix" class="h-5 self-center mx-10"/>
  <img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10"/>
  <img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10"/>
  <img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10"/>
  <img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10"/>
</Marquee>

Installation

CLI

bun

 bunx bejamas add marquee

npm

 npx bejamas add marquee

pnpm

 pnpm dlx bejamas add marquee

yarn

 yarn dlx bejamas add marquee

Manual

---
/**
 * @component Marquee
 * @title Marquee
 * @description A horizontally auto-scrolling container for repeating content like logos or messages.
 * @status stable
 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2511-7717&t=YFStJ3V8fXEO8QD8-4
 *
 * @preview
 *
 *
 * <Marquee class="dark:invert">
 *   <img src="/demo/logo/sonos.svg" alt="Netflix" class="h-5 self-center mx-10"/>
 *   <img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10"/>
 *   <img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10"/>
 *   <img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10"/>
 *   <img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10"/>
 * </Marquee>
 *
 * @usage
 *
 * ```astro
 * ---
 * import { Marquee } from '@bejamas/ui/components/marquee';
 * ---
 * <Marquee>
 *   <!-- Your content here -->
 * </Marquee>
 * ```
 *
 * @examples
 *
 * ### Direction
 *
 * <div class="flex gap-6 h-60">
 *   <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="top">
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
 *   </Marquee>
 *   <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="bottom">
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
 *     <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
 *   </Marquee>
 * </div>
 */

import { cva } from "class-variance-authority";
import { cn } from "@bejamas/ui/lib/utils";

interface Props {
  direction?: "left" | "right" | "top" | "bottom";
  time?: number | string;
  variant?: "gradient" | "solid";
  class?: string;
  props?: Astro.ComponentProps<"div">;
}

const {
  class: className = "",
  direction = "left",
  time = 30,
  variant = "gradient",
  ...props
} = Astro.props as Props;

const marqueeVariants = cva("relative w-full", {
  variants: {
    variant: {
      gradient:
        "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)]",
      solid: "",
    },
  },
  defaultVariants: {
    variant: "gradient",
  },
});
---

<div
  data-marquee
  data-direction={direction}
  class={cn(
    // container utilities
    "group flex overflow-hidden w-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col",
    marqueeVariants({ variant }),
    className,
  )}
  style={` --duration:${typeof time === "number" ? `${time}s` : time};`}
  {...props}
>
  <div
    class={cn(
      "marquee-content shrink-0 flex justify-around min-w-full will-change-transform whitespace-nowrap [animation:marquee-x_var(--duration,_20s)_linear_infinite] motion-reduce:[animation-play-state:paused] group-data-[direction=right]:[animation-direction:reverse] group-data-[direction=top]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] group-data-[direction=bottom]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] [&[data-direction=top]]:min-h-full [&[data-direction=bottom]]:min-h-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col group-data-[direction=bottom]:[animation-direction:reverse]",
      direction === "top" && "flex-col",
      direction === "bottom" && "flex-col",
    )}
  >
    <slot />
  </div>
  <div
    class={cn(
      "marquee-content shrink-0 flex justify-around min-w-full will-change-transform whitespace-nowrap [animation:marquee-x_var(--duration,_20s)_linear_infinite] motion-reduce:[animation-play-state:paused] group-data-[direction=right]:[animation-direction:reverse] group-data-[direction=top]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] group-data-[direction=bottom]:[animation:marquee-y_var(--duration,_20s)_linear_infinite] [&[data-direction=top]]:min-h-full [&[data-direction=bottom]]:min-h-full [&[data-direction=top]]:flex-col [&[data-direction=bottom]]:flex-col group-data-[direction=bottom]:[animation-direction:reverse]",
      direction === "top" && "flex-col",
      direction === "bottom" && "flex-col",
    )}
    aria-hidden="true"
  >
    <slot />
  </div>
</div>

Usage

---
import { Marquee } from '@bejamas/ui/components/marquee';
---
<Marquee>
  <!-- Your content here -->
</Marquee>

Props

Prop	Type	Default
direction	"left" | "right" | "top" | "bottom"	"left"
time	number | string	30
variant	"gradient" | "solid"	"gradient"
class	string	""
props	Astro.ComponentProps<"div">

Examples

Direction

Preview

Source

---
import { Marquee } from '@bejamas/ui/components/marquee';
---

<div class="flex gap-6 h-60">
  <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="top">
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
  </Marquee>
  <Marquee class="[&_.marquee-content]:space-y-8 space-y-8" direction="bottom">
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/sonos.svg" alt="Sonos" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/uber.svg" alt="Uber" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/visa.svg" alt="Visa" class="h-5 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/coca-cola.svg" alt="Coca-Cola" class="h-6 self-center mx-10 dark:invert"/></div>
    <div class="bg-muted px-10 py-7 rounded-lg flex items-center justify-center"><img src="/demo/logo/nike.svg" alt="Nike" class="h-5 self-center mx-10 dark:invert"/></div>
  </Marquee>
</div>