Scroll card stack

滚动翻牌

随页面滚动翻转、逐张抽离的叙事卡片堆。

在预览中滚动，或点击工具栏全屏体验。

交互方式

向下滚动，封面居中并翻转，卡片依次向上抽离。向上滚动可以回看。

使用示例

import { ScrollCardStack } from "@/components/ui/scroll-card-stack"

export function Demo() {
  return <ScrollCardStack cover={<h2>开始探索</h2>} items={[
    { id: "one", background: "#2668fd", color: "white", content: <h2>第一张</h2> },
    { id: "two", content: <h2>第二张</h2> }
  ]} />
}

参数

参数	类型 / 默认值	说明
`items`	`ScrollStackItem[]`	带唯一 id、content 的卡片，可设置 background、color、rotation。
`cover`	`ReactNode`	翻转前的封面内容。
`background`	`string`"#a7eb98"	整个滚动段落的底色。
`children`	`ReactNode`	可选的背景装饰。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxgsaptailwind-merge

components/ui/scroll-card-stack.css
components/ui/scroll-card-stack.tsx
lib/utils.ts

来源

参考已有 Maxima Therapy 滚动卡片收藏，保留翻转与抽离动画曲线。