渐变卡片环形轮播

五张渐变卡片沿立体圆环旋转，背面镜像显示，搭配精细粒子图形和边缘弯曲色散拖影。

立体轮播六框架TypeScript

演示

拖动旋转，或用方向键切换卡片；空格暂停，Home 和 End 选择首尾卡片。

npm install react react-dom three@0.185.1 gsap@3.12.7

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom three@0.185.1 gsap@3.12.7

GradientRingCards.tsx

正在加载代码…

App.tsx

import { GradientRingCards } from "./GradientRingCards";

export default function App() {
  return <GradientRingCards />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.active` 初始或更新后的卡片序号，范围 0 至 4。	`number`	`0`
`options.autoRotate` 自动旋转卡片圆环。	`boolean`	`true`
`options.speed` 旋转速度倍数，范围 0 至 3。	`number`	`1`
`options.distortion` 边缘色散强度，范围 0 至 2。	`number`	`1`
`options.onSelect` 用户选择卡片时调用，自动旋转不触发。	`(id: string) => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`1024`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`