列表卡片堆叠切换
Claude、Codex、Grok 三张 SVG 在列表、并排卡片与叠放之间连续移动、缩放和重排。
布局切换六框架TypeScript
演示
点击 List view、Card view 或 Pack view。标签支持方向键、Home 和 End，快速切换时三张图始终保留同一元素身份。
安装
npm install react react-dom gsap@3.12.7将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。
依赖
上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。
npm install react react-dom gsap@3.12.7代码
CollectionLayoutMorph.tsx
正在加载代码…
使用示例
App.tsx
import { CollectionLayoutMorph } from "./CollectionLayoutMorph";
export default function App() {
return <CollectionLayoutMorph />;
}共用原生核心处理交互，各框架独立挂载、更新和销毁实例。
复刻提示词
正在加载提示词…
API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
options.view初始化或运行中切换列表、卡片、叠放布局，三张图像始终保留原节点。 | "list" | "card" | "pack" | "list" |
options.height场景的建议高度，内容较多时布局会相应延展。 | number | 720 |
options.reducedMotion覆盖系统的减少动态效果偏好，同时保留完整交互状态。 | boolean |