Marquee
Bandeau de contenu defilant en continu pour les badges, les logos et les pastilles de statut. Installez Marquee depuis le registre VLLNT UI avec la CLI shadcn.
Bandeau de contenu defilant en continu pour les badges, les logos et les pastilles de statut. Fait partie de la famille utility dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Marquee a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/marquee.jsonSource
import * as React from "react";
import { cn } from "../../lib/utils";
export type MarqueeSpeed = "fast" | "normal" | "slow";
export type MarqueeProps = React.ComponentPropsWithoutRef<"div"> & {
duration?: number;
fade?: boolean;
gap?: number | string;
pauseOnHover?: boolean;
repeat?: number;
reverse?: boolean;
speed?: MarqueeSpeed;
vertical?: boolean;
};
function getGapValue(gap: number | string): string {
return typeof gap === "number" ? `${gap}px` : gap;
}
function getMaskImage(vertical: boolean): string {
return vertical
? "linear-gradient(to bottom, transparent, black 12%, black 88%, transparent)"
: "linear-gradient(to right, transparent, black 12%, black 88%, transparent)";
}
function getTrackItems(
children: React.ReactNode,
repeat: number,
): React.ReactNode[] {
const items = React.Children.toArray(children);
return Array.from({ length: Math.max(1, repeat) }, (_, copyIndex) =>
items.map((item, itemIndex) => (
<div className="shrink-0" key={`${copyIndex}-${itemIndex}`}>
{item}
</div>
)),
).flat();
}
function getDuration(
duration: number | undefined,
speed: MarqueeSpeed,
): number {
if (duration !== undefined) {
return duration;
}
switch (speed) {
case "fast":
return 10;
case "normal":
return 20;
case "slow":
return 32;
}
}
export const Marquee = ({
children,
className,
duration,
fade = true,
gap = "1rem",
pauseOnHover = false,
ref,
repeat = 1,
reverse = false,
speed = "normal",
style,
vertical = false,
...props
}: MarqueeProps & { ref?: React.Ref<HTMLDivElement> }) => {
const resolvedGap = getGapValue(gap);
const resolvedDuration = getDuration(duration, speed);
const trackItems = getTrackItems(children, repeat);
const animationStyle: React.CSSProperties = {
animationDirection: reverse ? "reverse" : "normal",
animationDuration: `${resolvedDuration}s`,
animationIterationCount: "infinite",
animationName: vertical ? "vllnt-marquee-y" : "vllnt-marquee-x",
animationTimingFunction: "linear",
};
const maskImage = getMaskImage(vertical);
return (
<div
className={cn(
"group relative overflow-hidden",
vertical ? "flex h-full flex-col" : "flex w-full flex-row",
className,
)}
ref={ref}
style={fade ? { ...style, maskImage, WebkitMaskImage: maskImage } : style}
{...props}
>
<div
className={cn(
"flex shrink-0 will-change-transform motion-reduce:animate-none motion-reduce:transform-none",
pauseOnHover && "group-hover:[animation-play-state:paused]",
vertical ? "min-h-full flex-col" : "min-w-full flex-row",
)}
style={animationStyle}
>
{[0, 1].map((groupIndex) => (
<div
aria-hidden={groupIndex === 1}
className={cn(
"flex shrink-0",
vertical ? "flex-col items-stretch" : "flex-row items-center",
)}
key={groupIndex}
style={{ gap: resolvedGap }}
>
{trackItems}
</div>
))}
</div>
</div>
);
};
Marquee.displayName = "Marquee";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.