JGuang
EN

旋转文本

Spinning Text · Magic UI

交互预览
npx shadcn@latest add https://jiguang132.com/r/magic-ui/spinning-text.json

部分上游示例使用在线图片、视频或推文；这些内容依赖网络与第三方服务，不代表本地预览加载失败。

旋转文本

Magic UI 的独立组件，请不要替换为 JGuang UI/Base UI 的同名 API。

安装

npx shadcn@latest add https://jiguang132.com/r/magic-ui/spinning-text.json

Registry 将复制可编辑源码和依赖到独立命名空间。检查主题变量与 Tailwind CSS v4 配置；不要覆盖已有的项目组件。

使用与验证

在左侧选择组件，在预览中操作它的状态；使用“查看代码”检查真实源码。安装后执行类型检查和构建，再验证键盘焦点、手机布局与深浅色主题。

来源

https://github.com/magicuidesign/magicui/tree/cdb348cb4c72a9b54b554d8617801e479fbc8714 MIT 许可证；不包括付费内容。下方提供上游英文参考内容，中文使用指南已适配；上游详细参考暂保留英文。

适用场景

将文字环绕成旋转圆形。

示例使用的原生参数

从该组件全部本地示例的 JSX 提取，按导入模块及组件区分；包括复合示例中实际使用的其他 Magic UI 组件。不是全部属性清单，也不是宿主通用 variant API。展开对象需结合示例数据声明；完整类型与默认值见下方源码参考。

所属组件参数说明示例来源
SpinningText.children (spinning-text)原生子内容，保留所属组件对文本/元素的约束。examples/spinning-text-demo.tsx、examples/spinning-text-demo-2.tsx
SpinningText.reverse (spinning-text)反转所属特效的运动方向。examples/spinning-text-demo-2.tsx
SpinningText.className (spinning-text)当前原生组件的样式类，需先配置 Tailwind 与所需 CSS。examples/spinning-text-demo-2.tsx
SpinningText.duration (spinning-text)原生动画时长；数值/CSS 单位随所属组件不同，见源码默认值。examples/spinning-text-demo-2.tsx
SpinningText.radius (spinning-text)圆形字母定位半径，单位 ch。examples/spinning-text-demo-2.tsx

交互与状态检查

  • 旋转文本 · 默认示例 — spinning-text-demo
  • 旋转文本 · 示例 2 — spinning-text-demo-2

这些名称是实际示例入口，不是新增组件属性或独立组件数量。选择对应示例后，检查指针/键盘行为、深浅色、手机尺寸和加载失败；纯装饰特效不应伪造禁用、错误或提交状态。完整示例安装包含其真实依赖闭包。

业务接入边界

radius 使用原生基于 ch 的定位计算；保留可读等效文本，不把必要说明只放在运动圆环上。

宿主与动画配置

初始化 Tailwind CSS v4、语义 CSS 变量及 dark 变体；按本地 Registry 的独立命名空间导入。复用已有 next-themes Provider，不混入 JGuang UI/Base UI/HeroUI API。进入视口再挂载特效，离开后卸载；为 Canvas/WebGL 不可用、网络媒体失败提供静态替代。遵循 prefers-reduced-motion，并验证计时器、RAF、观察器和事件监听已清理；不能仅凭 CSS 停止就宣称引擎已停止。示例不提供后端、登录、支付或真实 AI 流。这里的实用指南为双语，上游详细参考和演示文本仍保留原文。

可用状态与示例

旋转文本 · 默认示例、旋转文本 · 示例 2

组件中的状态与数据为演示用途，不包含后端接口。接入实际项目时请检查源码中的公开参数，再连接业务数据。

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> 
npx shadcn@latest add @magicui/spinning-text
</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Examples

Reverse

Usage

import { SpinningText } from "@/components/ui/spinning-text"

<SpinningText>learn more • earn more • grow more •</SpinningText>

Props

PropTypeDefaultDescription
childrenReactElementThe text content to be animated in a circular motion.
styleCSSProperties{}Custom styles for the text container.
durationnumber10The duration of the full circular rotation animation.
classNamestringA custom class name for the text container.
reversebooleanfalseDetermines if the animation should rotate in reverse.
radiusnumber5The radius of the circular path for the text animation.
transitionTransitionCustom transition effects for the animation.
variants{ container?: Variants; item?: Variants; }Variants for container and item animations.

Credits

完整示例安装

组件安装命令只安装组件；下列示例命令还包含该示例实际导入的其他组件、原生辅助 UI、工具和固定版本依赖。辅助源码不算独立组件。

旋转文本 · 默认示例

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/spinning-text/spinning-text-demo.json

默认导入: @/components/magicui/examples/spinning-text-demo

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

旋转文本 · 示例 2

npx shadcn@latest add https://jiguang132.com/r/magic-ui/examples/spinning-text/spinning-text-demo-2.json

默认导入: @/components/magicui/examples/spinning-text-demo-2

依赖: clsx@2.1.1, motion@12.42.2, tailwind-merge@3.6.0

最小使用与主题

import Demo from '@/components/magicui/examples/spinning-text-demo';
import { ThemeProvider } from 'next-themes';
export default function Example() {
  return <ThemeProvider attribute="class" defaultTheme="system" enableSystem><Demo /></ThemeProvider>;
}

项目须先配置 Tailwind CSS v4、语义颜色变量和 dark 变体。已有 next-themes Provider 时复用它，不要重复嵌套。Next Link 示例需要 Next.js 环境；静态 Vite 项目可保留原生组件代码，并自行将示例的页面链接改为项目路由。部分演示图片、视频和推文依赖网络；示例不包含登录或后端服务。实用指南与示例标签已提供中文，上游详细英文参考及演示数据未宣称全文翻译。

源码参数参考

以下实现签名和类型从本地固定版本源码生成。保留可选属性、原生继承类型、联合分支和 never 限制；不会将其他设计系统的 API 混入。forwardRef 实现中的 ref 属于 React 引用，不是新增业务属性。此区域是原始类型参考，不是上游说明的全文翻译。

SpinningText({
  children,
  duration = 10,
  reverse = false,
  radius = 5,
  transition,
  variants,
  className,
  style,
}: SpinningTextProps)

interface SpinningTextProps extends ComponentPropsWithoutRef<"div"> {
  children: string | string[]
  duration?: number
  reverse?: boolean
  radius?: number
  transition?: Transition
  variants?: {
    container?: Variants
    item?: Variants
  }
}

源码中的解构默认值

只列出直接写在参数或 props 解构中的默认表达式。条件表达式、运行时主题和其他计算值请结合源码；这里不是全部行为的默认值清单。

// SpinningText
duration = 10

// SpinningText
reverse = false

// SpinningText
radius = 5

原生与外部类型

以下外部类型仍由 React 或资源自身依赖定义，没有手工展开为虚构属性。实际可用类型以安装版本的 TypeScript 检查为准。

ComponentPropsWithoutRef<"div">
Transition
Variants