Pattern Background

Simple animated pattern background to make your sections stand out.

Grid background with dot

通过 CLI 安装

npm

pnpm

bun

yarn

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

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

PatternBackground.vue

index.ts

Grid background with big dot and ellipse on top

Grid background without animation

Small grid background with animation

Prop 名称	类型	默认值	描述
`animate`	`boolean`	`false`	Set `true` if you want to animate the background.
`direction`	`top` \| `bottom` \| `left` \| `right` \| `top-left` \| `top-right` \| `bottom-left` \| `bottom-right`	`top`	Direction of the animation movement. You can use the const `PATTERN_BACKGROUND_DIRECTION.`
`direction`	`grid` \| `dot`	`grid`	类型 of pattern. You can use the const `PATTERN_BACKGROUND_VARIANT.`
`size`	`xs` \| `sm` \| `md` \| `lg`	`md`	Size of the background pattern.
`mask`	`ellipse` \| `ellipse-top`	`ellipse`	Add a mask over the background pattern. You can use the const `PATTERN_BACKGROUND_MASK.`
`speed`	`number`	`10000`	Duration of the animation in `ms`, the bigger it is, the slower the animation. (`20000` slower than `5000`). You can use the const `PATTERN_BACKGROUND_SPEED.`

You can customize your needs directly within the index.ts file. See code below.

本页