Smart Grids
Intelligence-driven layouts that fluidly adapt to any screen environment.
Installation
1. Install the following packages
npm
npm install motion2. Copy and paste the following code into your project
layout.tsx
1"use client";
2
3import { motion } from "motion/react";
4import { useEffect, useState } from "react";
5
6const LayoutAnimation = () => {
7 const [layout, setLayout] = useState(0);
8
9 useEffect(() => {
10 const interval = setInterval(() => {
11 setLayout((prev) => (prev + 1) % 3);
12 }, 3000);
13 return () => clearInterval(interval);
14 }, []);
15
16 const layouts = ["grid-cols-2 grid-rows-2", "grid-cols-3 grid-rows-1", "grid-cols-1 grid-rows-3"];
17
18 return (
19 <div className="h-full p-2 flex items-center justify-center">
20 <motion.div className={`grid ${layouts[layout]} gap-3 w-full max-w-[200px]`} layout transition={{ duration: 0.7, ease: [0.23, 1, 0.32, 1] }}>
21 {[1, 2, 3].map((i) => (
22 <motion.div
23 key={i}
24 className="bg-primary/20 rounded-md min-h-[30px] border border-primary/10 dark:bg-primary/20 dark:border-primary/10"
25 layout
26 initial={{ opacity: 0, scale: 0.9 }}
27 whileInView={{ opacity: 1, scale: 1 }}
28 transition={{ duration: 0.5, ease: "easeOut" }}
29 />
30 ))}
31 </motion.div>
32 </div>
33 );
34};
35
36export function Layout() {
37 return (
38 <motion.div
39 className="bg-white/50 dark:bg-black/40 rounded-md p-8 border border-gray-200/50 dark:border-white/10 min-h-[300px] flex flex-col shadow-[inset_-12px_-8px_40px_#46464620] max-w-[400px]"
40 initial={{ opacity: 0, y: 30 }}
41 whileInView={{ opacity: 1, y: 0 }}
42 viewport={{ once: true }}
43 transition={{ duration: 0.4, ease: "circOut" }}
44 data-clickable
45 >
46 <div className="flex-1">
47 <LayoutAnimation />
48 </div>
49 <div className="mt-6 flex flex-col">
50 <h3 className="font-semibold text-lg text-black dark:text-white">Smart Grids</h3>
51 <p className="text-muted-foreground text-sm">Intelligence-driven layouts that fluidly adapt to any screen environment.</p>
52 </div>
53 </motion.div>
54 );
55}
56