Warp Background

A container component that applies a warp animation effect to its children

通过 CLI 安装

npm

pnpm

bun

yarn

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

在同一个文件中，复制并粘贴以下代码：

WarpBackground.vue

Beam.vue

Prop 名称	类型	默认值	描述
`perspective`	`number`	`100`	The perspective of the warp animation
`beamsPerSide`	`number`	`3`	The number of beams per side
`beamSize`	`number`	`5`	The size of the beams
`beamDelayMax`	`number`	`3`	The maximum delay of the beams in seconds
`beamDelayMin`	`number`	`0`	The minimum delay of the beams in seconds
`beamDuration`	`number`	`3`	The duration of the beams
`gridColor`	`string`	`"hsl(var(--border))"`	The color of the grid lines

本页