R
视觉与动效GravityLetters物理拖拽可玩

重力字母

一个可玩的引力场：字母、数字、emoji，或者任何你传入的组件都会真实下落并堆叠起来。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/gravity-letters.tsx。

npx shadcn@latest add swamimalode07/rare-ui/gravity-letters

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

gravity-letters.tsx
import GravityLetters from "@/components/ui/gravity-letters"


export function Demo() {
  return (
    <GravityLetters
      type="both"
      size={30}
      maxGlyphs={90}
      color="#fc4c01"
      className="h-[420px] rounded-3xl border"
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
type"letters" | "numbers" | "both""letters"内置字形池。
itemsReactNode[]—自定义掉落内容，会覆盖 type。
gravitynumber—重力强度。
sizenumber—单个字形字号。
colorstring—字形颜色。
maxGlyphsnumber—场上最大字形数量。
deviceTiltboolean—移动端跟随设备倾斜。