d-ui logod-ui
テキスト

Shimmer Text

CSS グラデーションアニメーションでキラキラと光るシマーエフェクトのテキストコンポーネント。

インストール

npx shadcn add https://d-ui.daigo-suhara.com/registry/shimmer-text.json

サンプル

シマーエフェクト

使い方

import { ShimmerText } from "@/components/ui/shimmer-text"

export default function Example() {
  return (
    <ShimmerText as="h1" className="text-4xl font-bold">
      Hello World
    </ShimmerText>
  )
}

プロパティ

speed任意
"slow" | "normal" | "fast"

アニメーション速度

デフォルト:"normal"
colors必須
string

Tailwindのグラデーションクラス（from-* via-* to-*）

as任意
"span" | "h1" | "h2" | "h3" | "p"

レンダリングするHTML要素

デフォルト:"span"
className必須
string

追加のCSSクラス

ソースコード

import * as React from "react";
import { cn } from "@/lib/utils";

interface ShimmerTextProps extends React.HTMLAttributes<HTMLSpanElement> {
  speed?: "slow" | "normal" | "fast";
  colors?: string;
  as?: "span" | "h1" | "h2" | "h3" | "p";
}

const speeds = {
  slow: "3s",
  normal: "2s",
  fast: "1s",
};

export function ShimmerText({
  className,
  speed = "normal",
  colors = "from-foreground via-foreground/40 to-foreground",
  as: Tag = "span",
  style,
  children,
  ...props
}: ShimmerTextProps) {
  return (
    <Tag
      className={cn(
        "inline-block bg-gradient-to-r bg-clip-text text-transparent bg-[length:200%_auto]",
        "animate-[shimmer_var(--shimmer-speed)_linear_infinite]",
        colors,
        className
      )}
      style={{
        "--shimmer-speed": speeds[speed],
        ...style,
      } as React.CSSProperties}
      {...props}
    >
      {children}
    </Tag>
  );
}