Box Reveal

An animated box reveal effect with customizable colors, duration, and delay.

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/box-reveal.json"

复制并粘贴以下代码：

BoxReveal.vue

Prop 名称	类型	默认值	描述
`color`	`string`	`"#5046e6"`	Background color of the reveal box.
`duration`	`number`	`0.5`	Duration of the reveal animation in seconds.
`delay`	`number`	`0.25`	Delay before the reveal animation starts in seconds.
`class`	`string`	`""`	Additional CSS classes for custom styling.

Box Reveal Animation: Creates a sliding box reveal effect with smooth transitions.
Customizable Animation: Control the animation timing with the duration and delay props.
Slot-Based Content: Supports default slot content that appears once the reveal animation completes.
Custom Background Color: Easily customize the box's background color using the color prop.

本页