Pattern Background

Simple animated pattern background to make your sections stand out.

Grid background with dot

Install using CLI

npm

pnpm

bun

yarn

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

Copy and paste the following code in the same folder

PatternBackground.vue

index.ts

Grid background with big dot and ellipse on top

Grid background without animation

Small grid background with animation

Prop Name	Type	Default	Description
`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`	Type 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.

On This Page