lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
51 lines • 4.29 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CoolBentoEffect = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const utils_1 = require("@/components/lib/utils");
const images = [
"https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=800&auto=format&fit=crop",
"https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=800&auto=format&fit=crop",
"https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=800&auto=format&fit=crop",
"https://images.unsplash.com/photo-1587620962725-abab7fe55159?q=80&w=800&auto=format&fit=crop",
"https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=800&auto=format&fit=crop",
"https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?q=80&w=800&auto=format&fit=crop",
"https://images.unsplash.com/photo-1531297484001-80022131f5a1?q=80&w=800&auto=format&fit=crop",
"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=800&auto=format&fit=crop",
"https://images.unsplash.com/photo-1504639725590-34d0984388bd?q=80&w=800&auto=format&fit=crop",
];
const CoolBentoEffect = ({ className }) => {
const [activeRow, setActiveRow] = (0, react_1.useState)(1);
const [activeCol, setActiveCol] = (0, react_1.useState)(1);
const gridTemplateRows = [
activeRow === 0 ? "3fr" : "1fr",
activeRow === 1 ? "3fr" : "1fr",
activeRow === 2 ? "3fr" : "1fr",
].join(" ");
const gridTemplateColumns = [
activeCol === 0 ? "3fr" : "1fr",
activeCol === 1 ? "3fr" : "1fr",
activeCol === 2 ? "3fr" : "1fr",
].join(" ");
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex items-center justify-center p-4 w-full h-full min-h-[400px]", className), children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: "grid gap-3 w-full h-full max-w-[900px] max-h-[700px] aspect-[4/3]", animate: {
gridTemplateRows,
gridTemplateColumns,
}, onMouseLeave: () => {
setActiveRow(1);
setActiveCol(1);
}, transition: { type: "spring", stiffness: 300, damping: 30, mass: 0.8 }, children: Array.from({ length: 9 }).map((_, i) => {
const row = Math.floor(i / 3);
const col = i % 3;
const isActive = activeRow === row && activeCol === col;
return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { layout: true, className: (0, utils_1.cn)("relative overflow-hidden rounded-2xl cursor-pointer group border border-zinc-200/50 dark:border-white/10 shadow-lg transition-shadow duration-500", isActive ? "z-20 shadow-2xl scale-[1.02]" : "z-0 opacity-80 grayscale-[0.5] hover:opacity-100 hover:grayscale-0"), onMouseEnter: () => {
setActiveRow(row);
setActiveCol(col);
}, children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.img, { layout: true, src: images[i], alt: `Bento Item ${i}`, className: "absolute inset-0 object-cover w-full h-full transition-transform duration-700 group-hover:scale-110" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-30 transition-opacity duration-500" }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-4 left-4 z-30 translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-white text-[10px] font-black tracking-[0.2em] uppercase mb-1", children: ["Project ", i + 1] }), (0, jsx_runtime_1.jsxs)("h3", { className: "text-white text-sm font-bold truncate max-w-[150px]", children: ["Creative Design ", i + 1] })] }), isActive && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layoutId: "active-glow", className: "absolute inset-0 ring-2 ring-primarylw/50 dark:ring-greedy/50 pointer-events-none" }))] }, i));
}) }) }));
};
exports.CoolBentoEffect = CoolBentoEffect;
exports.default = exports.CoolBentoEffect;
//# sourceMappingURL=cool-bento-effect.js.map