{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hero-7", "title": "Hero 7: product screen that tilts into view", "author": "Ballmac ", "description": "Centered hero with a browser frame that leans back and settles flat as you scroll. Ships a sample dashboard drawn with theme tokens; swap in a screenshot or your own UI.", "dependencies": [ "lucide-react", "motion@^12" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/browser-frame.json", "https://ui.ballmac.com/r/button.json" ], "files": [ { "path": "registry/ballmac/components/blocks/hero-7/hero-7.tsx", "content": "// Ballmac UI: Hero 7. https://ui.ballmac.com/blocks/hero-7\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, BarChart3, Bell, FileText, Home, Search, Settings, Users } from \"lucide-react\"\nimport { motion, useReducedMotion, useScroll, useTransform } from \"motion/react\"\n\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { BrowserFrame } from \"@/components/ballmac/browser-frame\"\nimport { buttonVariants } from \"@/components/ballmac/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype Action = { label: string; href: string }\n\ntype Hero7Props = Omit, \"title\"> & {\n /** Short label above the headline. */\n eyebrow?: string\n /** The headline. */\n title?: string\n /** One or two sentences under the headline. */\n description?: string\n /** Main call to action. */\n primaryAction?: Action\n /** Secondary call to action. */\n secondaryAction?: Action\n /** Address shown in the browser frame. */\n url?: string\n /** A screenshot of your product. Omit it to show the sample dashboard. */\n screenshot?: { src: string; alt: string }\n /** Your own UI instead of the screenshot or sample dashboard. It is laid out 1180px wide, then scaled to fit. */\n screen?: React.ReactNode\n /** How steeply the frame leans back before it scrolls into place, in degrees. */\n tilt?: number\n}\n\nconst NAV = [\n { label: \"Overview\", icon: Home, active: true },\n { label: \"Reports\", icon: BarChart3 },\n { label: \"Customers\", icon: Users },\n { label: \"Invoices\", icon: FileText },\n { label: \"Settings\", icon: Settings },\n]\n\nconst KPIS = [\n { label: \"Revenue\", value: \"$128,430\", delta: \"+12.4%\" },\n { label: \"Active customers\", value: \"2,847\", delta: \"+4.1%\" },\n { label: \"Avg. invoice\", value: \"$1,260\", delta: \"+2.8%\" },\n { label: \"Paid on time\", value: \"94.2%\", delta: \"+1.3%\" },\n]\n\n/** A sample product screen, drawn with theme tokens. Laid out at 1180 x 700. */\nfunction SampleDashboard() {\n return (\n
\n \n
\n
\n
\n

Overview

\n

Last 30 days, compared to the previous period

\n
\n
\n \n Search\n \n \n \n \n
\n
\n
\n {KPIS.map((k) => (\n
\n

{k.label}

\n

{k.value}

\n

{k.delta}

\n
\n ))}\n
\n
\n
\n
\n

Revenue

\n
\n This period\n Previous\n
\n
\n \n \n \n \n \n \n \n {[55, 110, 165].map((y) => (\n \n ))}\n \n \n \n \n
\n
\n

Recent invoices

\n
    \n {[\n [\"Northwind Studio\", \"$4,200\", \"Paid\"],\n [\"Globex Corp\", \"$12,800\", \"Due\"],\n [\"Initech\", \"$960\", \"Paid\"],\n [\"Umbrella Labs\", \"$3,450\", \"Paid\"],\n ].map(([n, a, s]) => (\n
  • \n
    \n

    {n}

    \n

    {s}

    \n
    \n {a}\n
    • \n ))}\n
\n
\n
\n
\n
\n )\n}\n\nfunction Hero7({\n eyebrow = \"New ยท Reports that write themselves\",\n title = \"See your whole business in one calm view.\",\n description = \"Revenue, customers and invoices in a single dashboard that updates as it happens. No exports, no stale numbers.\",\n primaryAction = { label: \"Start free\", href: \"#\" },\n secondaryAction = { label: \"Book a demo\", href: \"#\" },\n url = \"app.acme.com/overview\",\n screenshot,\n screen,\n tilt = 24,\n className,\n ...props\n}: Hero7Props) {\n const reduce = useReducedMotion()\n const frameRef = React.useRef(null)\n const { scrollYProgress } = useScroll({ target: frameRef, offset: [\"start 98%\", \"start 30%\"] })\n const rotateX = useTransform(scrollYProgress, [0, 1], [reduce ? 0 : tilt, 0])\n const scale = useTransform(scrollYProgress, [0, 1], [reduce ? 1 : 0.92, 1])\n const lift = useTransform(scrollYProgress, [0, 1], [reduce ? 0 : 36, 0])\n\n return (\n
\n
\n
\n
\n {eyebrow}\n

{title}

\n

{description}

\n \n
\n
\n \n
\n \n {screen ?? (screenshot ? null : )}\n \n \n
\n
\n
\n
\n )\n}\n\nexport { Hero7, type Hero7Props }\n", "type": "registry:component", "target": "@components/ballmac/blocks/hero-7/hero-7.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "hero", "product", "screenshot", "scroll", "browser", "dashboard" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "A landing hero that lets the product do the talking. Edit eyebrow, title, description and actions; pass `screenshot` ({ src, alt }) or `screen` (any UI laid out 1180px wide) to replace the sample dashboard.", "whenToUse": [ "Products with a strong UI", "Pages where a first-screen screenshot sells the product" ], "whenNotToUse": [ "Developer tools led by a command (use hero-2)", "Products with no visual UI" ], "composesWith": [ "header-1", "logo-cloud-1", "features-1", "testimonials-1" ], "a11y": [ { "keys": "Scroll", "action": "The tilt is decorative and is turned off for reduced motion; the sample screen is hidden from assistive technology" } ], "customization": [ "tilt: starting lean in degrees (0 for none)", "url: address shown in the browser frame", "screen: any ReactNode, scaled to fit" ] }, "examples": [ "hero-7-demo", "hero-7-custom" ], "url": "https://ui.ballmac.com/components/hero-7" }, "categories": [ "blocks", "hero" ], "type": "registry:block" }