{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <educlopez93@gmail.com>","css":{},"dependencies":["lucide-react","motion"],"description":"Interactive 3D grid hero header inspired by rauno.me 2024","devDependencies":[],"files":[{"content":"/**\n * Header 4 - Interactive 3D Grid Hero\n *\n * Inspired by the beautiful interactive grid design from rauno.me 2024 website.\n * Features a 3D-perspective grid with customizable hover colors that respond\n * to user interaction, creating an engaging and modern hero section.\n *\n * @see https://rauno.me\n */\n\n\"use client\";\n\nimport { ExternalLink } from \"lucide-react\";\nimport { useEffect, useRef } from \"react\";\nimport { AnimatedGroup, AnimatedText, Button, HeroHeader } from \"@/components/smoothui/shared\";\nimport styles from \"./hero-grid.module.css\";\n\ninterface InteractiveGridProps {\n  hoverColors?: string | [string, string, string, string];\n}\n\nconst TOTAL_TILES = 1600;\nconst INITIAL_TILE = 1;\nconst TILES_TO_CLONE = TOTAL_TILES - INITIAL_TILE;\n\nfunction InteractiveGrid({ hoverColors }: InteractiveGridProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tileRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!(containerRef.current && tileRef.current)) {\n      return;\n    }\n\n    // Clone the first tile to create a 40x40 grid (1600 tiles total)\n    for (let i = 0; i < TILES_TO_CLONE; i++) {\n      const clonedTile = tileRef.current.cloneNode(true);\n      containerRef.current.appendChild(clonedTile);\n    }\n  }, []);\n\n  // Prepare CSS variables for hover colors\n  const style = hoverColors\n    ? {\n        \"--hero-grid-hover-color-1\": Array.isArray(hoverColors)\n          ? hoverColors[0]\n          : hoverColors,\n        \"--hero-grid-hover-color-2\": Array.isArray(hoverColors)\n          ? (hoverColors[1] ?? hoverColors[0])\n          : hoverColors,\n        \"--hero-grid-hover-color-3\": Array.isArray(hoverColors)\n          ? (hoverColors[2] ?? hoverColors[0])\n          : hoverColors,\n        \"--hero-grid-hover-color-4\": Array.isArray(hoverColors)\n          ? (hoverColors[3] ?? hoverColors[0])\n          : hoverColors,\n      }\n    : undefined;\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={styles.gridContainer}\n      style={style as React.CSSProperties}\n    >\n      <div className={styles.mainGrid} ref={containerRef}>\n        <div className={styles.tile} ref={tileRef} />\n      </div>\n    </div>\n  );\n}\n\ninterface HeroGridProps {\n  hoverColors?: string | [string, string, string, string];\n}\n\nexport function HeroGrid({ hoverColors }: HeroGridProps) {\n  return (\n    <div className=\"relative\">\n      <HeroHeader />\n      <main>\n        <section className=\"relative overflow-hidden py-36\">\n          {/* Interactive animated grid background */}\n          <InteractiveGrid hoverColors={hoverColors} />\n          <AnimatedGroup\n            className=\"pointer-events-none flex flex-col items-center gap-6 text-center\"\n            preset=\"blur-slide\"\n          >\n            <div>\n              <AnimatedText\n                as=\"h1\"\n                className=\"mb-6 text-pretty font-bold text-2xl tracking-tight lg:text-5xl\"\n              >\n                Build your next project with{\" \"}\n                <span className=\"text-brand\">Smoothui</span>\n              </AnimatedText>\n              <AnimatedText\n                as=\"p\"\n                className=\"mx-auto max-w-3xl text-muted-foreground lg:text-xl\"\n                delay={0.15}\n              >\n                Smoothui gives you the building blocks to create stunning,\n                animated interfaces in minutes.\n              </AnimatedText>\n            </div>\n            <AnimatedGroup\n              className=\"pointer-events-auto mt-6 flex justify-center gap-3\"\n              preset=\"slide\"\n            >\n              <Button\n                className=\"shadow-sm transition-shadow hover:shadow\"\n                variant=\"outline\"\n              >\n                Get Started\n              </Button>\n              <Button className=\"group\" variant=\"candy\">\n                Learn more{\" \"}\n                <ExternalLink className=\"ml-2 h-4 transition-transform group-hover:translate-x-0.5\" />\n              </Button>\n            </AnimatedGroup>\n          </AnimatedGroup>\n        </section>\n      </main>\n    </div>\n  );\n}\n\nexport default HeroGrid;\n","path":"index.tsx","target":"components/smoothui/header-4/index.tsx","type":"registry:block"},{"content":"/* @reference \"../../../../app/styles/smoothui.css\"; */\n\n/**\n * Interactive 3D Grid Styles\n *\n * Inspired by rauno.me 2024 website's interactive grid design.\n * Creates a 3D-perspective grid with customizable hover colors.\n */\n\n.gridContainer {\n  --hero-grid-hover-color-1: var(--color-brand);\n  --hero-grid-hover-color-2: var(--color-brand);\n  --hero-grid-hover-color-3: var(--color-brand);\n  --hero-grid-hover-color-4: var(--color-brand);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  perspective: 2000px;\n  perspective-origin: center center;\n}\n\n.mainGrid {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: grid;\n  grid-template-rows: repeat(40, 1fr);\n  grid-template-columns: repeat(40, 1fr);\n  width: 140rem;\n  aspect-ratio: 1;\n  transform: translate(-50%, -50%) rotateX(50deg) rotateY(-5deg) rotateZ(20deg)\n    scale(1.25);\n}\n\n.mainGrid::after {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  pointer-events: none;\n  content: \"\";\n  background: radial-gradient(circle, transparent 25%, rgb(255 255 255) 80%);\n}\n\n:global(.dark).mainGrid::after {\n  background: radial-gradient(\n    circle,\n    transparent 25%,\n    rgb(0 0 0 / 90%) 80%\n  ) !important;\n}\n\n.tile {\n  border: 0.5px solid rgb(0 0 0 / 12%);\n  transition: background-color 1500ms;\n}\n\n:global(.dark).tile {\n  border: 0.5px solid rgb(255 255 255 / 5%);\n}\n\n.tile:hover {\n  transition-duration: 0ms;\n}\n\n.tile:nth-child(4n):hover {\n  background-color: var(--hero-grid-hover-color-1);\n}\n\n.tile:nth-child(4n + 1):hover {\n  background-color: var(--hero-grid-hover-color-2);\n}\n\n.tile:nth-child(4n + 2):hover {\n  background-color: var(--hero-grid-hover-color-3);\n}\n\n.tile:nth-child(4n + 3):hover {\n  background-color: var(--hero-grid-hover-color-4);\n}\n\n.tile:nth-child(7n):hover {\n  background-color: var(--hero-grid-hover-color-2);\n}\n\n.tile:nth-child(7n + 3):hover {\n  background-color: var(--hero-grid-hover-color-3);\n}\n\n.tile:nth-child(7n + 5):hover {\n  background-color: var(--hero-grid-hover-color-4);\n}\n\n.tile:nth-child(7n + 6):hover {\n  background-color: var(--hero-grid-hover-color-1);\n}\n\n.tile:nth-child(11n + 1):hover {\n  background-color: var(--hero-grid-hover-color-1);\n}\n\n.tile:nth-child(11n + 4):hover {\n  background-color: var(--hero-grid-hover-color-2);\n}\n\n.tile:nth-child(11n + 7):hover {\n  background-color: var(--hero-grid-hover-color-3);\n}\n\n.tile:nth-child(11n + 10):hover {\n  background-color: var(--hero-grid-hover-color-4);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mainGrid {\n    transform: translate(-50%, -50%) rotateZ(20deg);\n  }\n\n  .tile {\n    transition: none;\n  }\n}\n\n/* Reduce overlay size of hero text/button containers */\n.heroContent {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  max-width: 600px;\n  padding: 0;\n  margin: 0 auto;\n  background: none;\n  box-shadow: none;\n}\n\n.heroButtons {\n  display: flex;\n  gap: 1rem;\n  width: auto;\n  padding: 0;\n  margin-top: 1.5rem;\n  background: none;\n  box-shadow: none;\n}\n","path":"hero-grid.module.css","target":"components/smoothui/header-4/hero-grid.module.css","type":"registry:block"}],"name":"header-4","registryDependencies":["https://smoothui.dev/r/shared.json","https://smoothui.dev/r/tokens.json"],"title":"Header 4","type":"registry:block"}