Reveal card

揭示卡片

白色内容层缓缓下移，露出流动线条的卡片。

JungUI

Take your time.

留一点空间，让内容慢慢出现。

浏览组件

交互方式

进入视野后，白色内容层下移，文字逐渐清晰。

使用示例

import { RevealCard } from "@/components/ui/reveal-card"

export function Demo() {
  return <RevealCard title="Take your time." brand="JungUI"><p>自己的内容。</p></RevealCard>
}

参数

参数	类型 / 默认值	说明
`title`	`ReactNode`	卡片标题。
`children`	`ReactNode`	卡片正文。
`brand`	`ReactNode`	上方标识。
`action`	`ReactNode`	正文后的行动入口。
`background`	`ReactNode`	替换默认的流动线条。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

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

clsxmotiontailwind-merge

components/ui/reveal-card.css
components/ui/reveal-card.tsx
components/ui/ripple-field.tsx
lib/utils.ts