4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1038,/** * Header 4 - Interactive 3D Grid Hero * * Inspired by the beautiful interactive grid design from rauno.me 2024 website. * Features a 3D-perspective grid with customizable hover colors that respond * to user interaction, creating an engaging and modern hero section. * * @see https://rauno.me */ "use client"; import SmoothButton from "@/components/smoothui/smooth-button"; import { ExternalLink } from "lucide-react"; import { useEffect, useRef } from "react"; import { AnimatedGroup, AnimatedText, HeroHeader } from "@/components/smoothui/shared"; import styles from "./hero-grid.module.css"; interface InteractiveGridProps { hoverColors?: string | [string, string, string, string]; } const TOTAL_TILES = 1600; const INITIAL_TILE = 1; const TILES_TO_CLONE = TOTAL_TILES - INITIAL_TILE; function InteractiveGrid({ hoverColors }: InteractiveGridProps) { const containerRef = useRef(null); const tileRef = useRef(null); useEffect(() => { if (!(containerRef.current && tileRef.current)) { return; } // Clone the first tile to create a 40x40 grid (1600 tiles total) for (let i = 0; i < TILES_TO_CLONE; i++) { const clonedTile = tileRef.current.cloneNode(true); containerRef.current.appendChild(clonedTile); } }, []); // Prepare CSS variables for hover colors const style = hoverColors ? { "--hero-grid-hover-color-1": Array.isArray(hoverColors) ? hoverColors[0] : hoverColors, "--hero-grid-hover-color-2": Array.isArray(hoverColors) ? (hoverColors[1] ?? hoverColors[0]) : hoverColors, "--hero-grid-hover-color-3": Array.isArray(hoverColors) ? (hoverColors[2] ?? hoverColors[0]) : hoverColors, "--hero-grid-hover-color-4": Array.isArray(hoverColors) ? (hoverColors[3] ?? hoverColors[0]) : hoverColors, } : undefined; return (

); } interface HeroGridProps { hoverColors?: string | [string, string, string, string]; } export function HeroGrid({ hoverColors }: HeroGridProps) { return (

{/* Interactive animated grid background */}

Build your next project with{" "} Smoothui Smoothui gives you the building blocks to create stunning, animated interfaces in minutes.

Get Started Learn more{" "}

); } export default HeroGrid; 51:Tbb1,/* @reference "../../../../app/styles/smoothui.css"; */ /** * Interactive 3D Grid Styles * * Inspired by rauno.me 2024 website's interactive grid design. * Creates a 3D-perspective grid with customizable hover colors. */ .gridContainer { --hero-grid-hover-color-1: var(--color-brand); --hero-grid-hover-color-2: var(--color-brand); --hero-grid-hover-color-3: var(--color-brand); --hero-grid-hover-color-4: var(--color-brand); position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; perspective: 2000px; perspective-origin: center center; } .mainGrid { position: absolute; top: 50%; left: 50%; display: grid; grid-template-rows: repeat(40, 1fr); grid-template-columns: repeat(40, 1fr); width: 140rem; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(50deg) rotateY(-5deg) rotateZ(20deg) scale(1.25); } .mainGrid::after { position: absolute; inset: 0; z-index: 3; pointer-events: none; content: ""; background: radial-gradient(circle, transparent 25%, rgb(255 255 255) 80%); } :global(.dark).mainGrid::after { background: radial-gradient( circle, transparent 25%, rgb(0 0 0 / 90%) 80% ) !important; } .tile { border: 0.5px solid rgb(0 0 0 / 12%); transition: background-color 1500ms; } :global(.dark).tile { border: 0.5px solid rgb(255 255 255 / 5%); } .tile:hover { transition-duration: 0ms; } .tile:nth-child(4n):hover { background-color: var(--hero-grid-hover-color-1); } .tile:nth-child(4n + 1):hover { background-color: var(--hero-grid-hover-color-2); } .tile:nth-child(4n + 2):hover { background-color: var(--hero-grid-hover-color-3); } .tile:nth-child(4n + 3):hover { background-color: var(--hero-grid-hover-color-4); } .tile:nth-child(7n):hover { background-color: var(--hero-grid-hover-color-2); } .tile:nth-child(7n + 3):hover { background-color: var(--hero-grid-hover-color-3); } .tile:nth-child(7n + 5):hover { background-color: var(--hero-grid-hover-color-4); } .tile:nth-child(7n + 6):hover { background-color: var(--hero-grid-hover-color-1); } .tile:nth-child(11n + 1):hover { background-color: var(--hero-grid-hover-color-1); } .tile:nth-child(11n + 4):hover { background-color: var(--hero-grid-hover-color-2); } .tile:nth-child(11n + 7):hover { background-color: var(--hero-grid-hover-color-3); } .tile:nth-child(11n + 10):hover { background-color: var(--hero-grid-hover-color-4); } @media (prefers-reduced-motion: reduce) { .mainGrid { transform: translate(-50%, -50%) rotateZ(20deg); } .tile { transition: none; } } /* Reduce overlay size of hero text/button containers */ .heroContent { display: flex; flex-direction: column; align-items: flex-start; max-width: 600px; padding: 0; margin: 0 auto; background: none; box-shadow: none; } .heroButtons { display: flex; gap: 1rem; width: auto; padding: 0; margin-top: 1.5rem; background: none; box-shadow: none; } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/shared.json","https://smoothui.dev/r/tokens.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"index.tsx","content":"$50","type":"registry:block","target":"components/smoothui/header-4/index.tsx"},{"path":"hero-grid.module.css","content":"$51","type":"registry:block","target":"components/smoothui/header-4/hero-grid.module.css"}],"className":"h-[70svh] min-h-80"}]]}]