Components
Animated Grid
The component features a customizable grid with color interpolation and staggered border-radius animations. You can adjust the grid size, cell dimensions, and animation timing through props, making it flexible for different use cases.
import { AnimatedGrid } from "@/components/ui/animated-grid";
export default function DemoOne() {
return (
<div className= "relative flex h-screen w-full flex-col items-center justify-center overflow-hidden rounded-xl" >
<AnimatedGrid
startColor={[255, 0, 0]}
endColor={[255, 0, 255]}
animationStartColor={[255, 0, 0]}
animationEndColor={[255, 0, 255]}
rows={10}
cols={15}
cellSize="6rem"
animationDuration="2s"
/>
<span className="pointer-events-none absolute z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap" >
Animated Grid
< /span>
< /div>
)
}