Command Palette

Search for a command to run...

0
博客
PreviousNext

闪烁文字

平滑的、文字上光扫过的闪烁动画。

Loading…
import { ShimmeringText } from "@/components/shimmering-text"
 
export function ShimmeringTextDemo1() {
  return (
    <ShimmeringText className="text-2xl font-medium" text="Shimmering Text" />
  )
}

安装

$ pnpm dlx shadcn@latest add @ncdai/shimmering-text

用法

import { ShimmeringText } from "@/components/shimmering-text"
<ShimmeringText text="滑动解锁" />

API 参考

ShimmeringText

Prop

Type

示例

自定义颜色

Loading…
import { ShimmeringText } from "@/components/shimmering-text"
 
export function ShimmeringTextDemo2() {
  return (
    <ShimmeringText
      className="font-medium [--color:#fbbf24] [--shimmering-color:#ca8a04] dark:[--color:#f59e0b] dark:[--shimmering-color:#fcd34d]"
      text="Processing your request with AI ..."
    />
  )
}

CSS 变量说明:

  • --color:基础文字颜色(文字的默认/静止状态)
  • --shimmering-color:峰值高亮颜色(闪烁效果中文字过渡到的明亮颜色)