Animated Grid Pattern

Installation

pnpm dlx kliping@latest add animated-grid-pattern

Usage

Letakkan di dalam wadah relative dengan overflow-hidden; polanya mengisi wadah itu. Kotak yang menyala dipilih acak dan berganti tiap duration detik. Pakai mask-* untuk memudarkan tepinya, dan skew-y-* untuk kesan miring.

<script setup lang="ts">
import { AnimatedGridPattern } from '@/components/ui/animated-grid-pattern'
</script>

<template>
  <div class="relative h-72 overflow-hidden">
    <AnimatedGridPattern :num-squares="30" :max-opacity="0.1" />
  </div>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
Files	components/ui/animated-grid-pattern/animated-grid-pattern.vue components/ui/animated-grid-pattern/index.ts

API Reference

Prop	Type	Default	Description
width?	number	40	The width of each grid cell.
height?	number	40	The height of each grid cell.
x?	number	-1	The horizontal offset of the whole pattern.
y?	number	-1	The vertical offset of the whole pattern.
strokeDasharray?	string | number	0	The dash pattern for the grid lines.
numSquares?	number	50	How many squares light up in turn.
maxOpacity?	number	0.5	The maximum opacity of each square.
duration?	number	4	The duration of one flash, in seconds.

Data attribute	Value
[data-slot]	"animated-grid-pattern"

CSS Variables

Variabel khusus komponen ini — bisa ditimpa lewat style atau CSS Anda:

Variable	Value
--grid-square-opacity	dihitung saat runtime

Credits

Berasal dari Magic UI (MIT, Copyright (c) Magic UI). Rantai lengkapnya di Credits.