{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-with-pixelbackground",
  "type": "registry:block",
  "title": "Hero Section with Pixel Background",
  "description": "A hero-section for modern AI interfaces with motion.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [
    "@scrollxui/pixel-background",
    "@scrollxui/timeline"
  ],
  "dependencies": [],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/hero-sections/hero-with-pixelbackground.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { Timeline, TimelineText } from '@/components/ui/timeline';\nimport PixelBackground from '@/components/ui/pixel-background';\n\nconst Navbar: React.FC = () => (\n  <nav className=\"flex w-full items-center justify-between border-t border-b border-zinc-200 dark:border-zinc-800 px-6 py-4\">\n    <div className=\"flex items-center gap-2\">\n      <div className=\"size-7 rounded-lg bg-yellow-400\" />\n      <h1 className=\"text-base font-bold md:text-xl text-zinc-900 dark:text-white\">\n        ScrollX UI\n      </h1>\n    </div>\n    <button\n      type=\"button\"\n      className=\"rounded-lg bg-neutral-900 dark:bg-white px-4 py-2 text-sm font-medium text-white dark:text-black transition-all duration-300 hover:-translate-y-0.5 hover:bg-zinc-700 dark:hover:bg-zinc-200\"\n    >\n      Get Started\n    </button>\n  </nav>\n);\n\nexport default function HeroSectionwithPixelBackground() {\n  return (\n    <div className=\"relative min-h-screen w-full bg-white dark:bg-[#0a0a0a] overflow-hidden\">\n\n      <div\n        className=\"absolute inset-x-0 top-0 h-64 pointer-events-none\"\n        style={{ maskImage: 'linear-gradient(to bottom, black 0%, transparent 100%)', WebkitMaskImage: 'linear-gradient(to bottom, black 0%, transparent 100%)' }}\n      >\n        <PixelBackground\n          gap={6}\n          speed={60}\n          colors=\"#d4d4d4,#e5e5e5,#c4c4c4,#bababa\"\n          opacity={0.7}\n          direction=\"top\"\n          className=\"w-full h-full dark:[&>canvas]:hidden\"\n        />\n        <PixelBackground\n          gap={6}\n          speed={60}\n          colors=\"#1a1a1a,#2a2a2a,#333333,#111111\"\n          opacity={1}\n          direction=\"top\"\n          className=\"w-full h-full hidden dark:block absolute inset-0\"\n        />\n      </div>\n\n      <div className=\"relative flex min-h-screen flex-col\">\n        <Navbar />\n\n        <div className=\"flex flex-1 flex-col items-center justify-center px-6 py-12\">\n\n          <motion.div\n            initial={{ opacity: 0, y: -16 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}\n            className=\"mb-8 flex items-center gap-2\"\n          >\n            <span className=\"text-[11px] font-semibold uppercase tracking-[0.25em] text-zinc-400 dark:text-zinc-500\">\n              Est. 2026\n            </span>\n            <span className=\"h-px w-8 bg-zinc-300 dark:bg-zinc-700\" />\n            <span className=\"text-[11px] font-semibold uppercase tracking-[0.25em] text-zinc-400 dark:text-zinc-500\">\n              Studio\n            </span>\n          </motion.div>\n\n          <div className=\"flex flex-col items-center gap-1\">\n            <motion.h1\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.6, delay: 0.2, ease: [0.22, 1, 0.36, 1] }}\n              className=\"text-zinc-900 dark:text-white text-4xl md:text-7xl lg:text-9xl font-black tracking-tight leading-none text-center\"\n            >\n              We Design\n            </motion.h1>\n\n            <motion.h1\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.6, delay: 0.32, ease: [0.22, 1, 0.36, 1] }}\n              className=\"text-zinc-900 dark:text-white text-4xl md:text-7xl lg:text-9xl font-black tracking-tight leading-none text-center\"\n            >\n              The Future\n            </motion.h1>\n\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.6, delay: 0.44, ease: [0.22, 1, 0.36, 1] }}\n              className=\"mt-2\"\n            >\n              <Timeline\n                rotation={-1.2}\n                initialLeft={10}\n                minWidth={56}\n                containerClassName=\"bg-white dark:bg-[#0a0a0a]\"\n                handleClassName=\"bg-white dark:bg-[#0a0a0a] border-yellow-400\"\n                handleIndicatorClassName=\"bg-yellow-400\"\n              >\n                <TimelineText className=\"text-yellow-500 dark:text-yellow-400 text-4xl md:text-7xl lg:text-9xl font-black tracking-tight py-3\">\n                  Of Interfaces\n                </TimelineText>\n              </Timeline>\n            </motion.div>\n          </div>\n\n          <motion.p\n            initial={{ opacity: 0, y: 12 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6, delay: 0.5, ease: 'easeOut' }}\n            className=\"mt-12 max-w-md text-center text-sm leading-relaxed text-zinc-500 dark:text-zinc-500\"\n          >\n            Crafting digital experiences that live at the intersection of motion,\n            precision, and uncompromising visual intent.\n          </motion.p>\n\n          <motion.div\n            initial={{ opacity: 0, y: 12 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6, delay: 0.7, ease: 'easeOut' }}\n            className=\"mt-10 flex items-center gap-4\"\n          >\n            <button\n              type=\"button\"\n              className=\"border-2 border-yellow-400 bg-yellow-400 px-8 py-3 text-xs font-bold uppercase tracking-[0.2em] text-black transition-colors duration-300 hover:bg-yellow-300 hover:border-yellow-300\"\n            >\n              Start a Project\n            </button>\n            <button\n              type=\"button\"\n              className=\"border-2 border-zinc-300 dark:border-zinc-700 px-8 py-3 text-xs font-bold uppercase tracking-[0.2em] text-zinc-600 dark:text-zinc-300 transition-colors duration-300 hover:border-zinc-500 dark:hover:border-zinc-400 hover:text-zinc-900 dark:hover:text-white\"\n            >\n              View Work\n            </button>\n          </motion.div>\n\n        </div>\n      </div>\n\n      <div className=\"pointer-events-none absolute bottom-0 left-0 h-px w-full bg-linear-to-r from-transparent via-zinc-300/60 dark:via-zinc-700/40 to-transparent\" />\n    </div>\n  );\n}"
    }
  ]
}