Shimmer Text
Texte avec une bande de lumiere vive qui le balaie. Installez Shimmer Text depuis le registre VLLNT UI avec la CLI shadcn.
Texte avec une bande de lumiere vive qui le balaie. Fait partie de la famille content 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 Shimmer Text 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/shimmer-text.jsonSource
import * as React from "react";
import { cn } from "../../lib/utils";
/** Props for {@link ShimmerText}. */
export type ShimmerTextProps = React.ComponentPropsWithoutRef<"span"> & {
/** Content shown muted with a bright band passing across it. */
children: React.ReactNode;
/** Seconds for one light-band pass. Defaults to `3`. */
duration?: number;
};
/**
* Muted text with a brighter light band that sweeps across on a loop.
*
* Respects `prefers-reduced-motion`: the band holds still.
*
* @example
* ```tsx
* <ShimmerText>Loading your workspace</ShimmerText>
* ```
*/
export const ShimmerText = ({
children,
className,
duration = 3,
ref,
style,
...props
}: ShimmerTextProps & { ref?: React.Ref<HTMLSpanElement> }) => {
return (
<span
className={cn("relative inline-block text-muted-foreground", className)}
ref={ref}
{...props}
>
{children}
<span
aria-hidden="true"
className="absolute inset-0 animate-[vllnt-text-shimmer_linear_infinite] bg-clip-text text-transparent motion-reduce:animate-none"
style={{
animationDuration: `${duration}s`,
background:
"linear-gradient(90deg, transparent 0%, oklch(var(--foreground)) 50%, transparent 100%)",
backgroundSize: "200% auto",
...style,
}}
>
{children}
</span>
</span>
);
};
ShimmerText.displayName = "ShimmerText";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.