Grid
A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.
A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.
Follow these simple steps to add the Grid component to your project:
Install Dependencies
pnpm add motion
Create a new file: components/motions/grid.tsx and copy the code below:
"use client";
import React from "react";
import { motion } from "motion/react";
import { twMerge } from "tailwind-merge";
import { fadeUp } from "cnippet-aos";
interface GridProps {
children: React.ReactNode;
className?: string;
}
export const Grid = ({ children, className }: GridProps) => {
return (
<div className={twMerge("py-12 md:px-4")}>
<motion.div
initial="initial"
animate="animate"
transition={{ staggerChildren: 0.05 }}
className={twMerge(
"mx-auto grid grid-flow-dense grid-cols-12 gap-4",
className,
)}
>
{children}
</motion.div>
</div>
);
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const Block = ({ className, ...rest }: any) => {
return (
<motion.div
{...fadeUp({
delay: 0.4,
duration: 0.8,
scroll: true,
once: true,
})}
className={twMerge("col-span-4 p-6", className)}
{...rest}
/>
);
};Adjust the import paths in both files according to your project's structure.