{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "hero-section",
"type": "registry:block",
"title": "Hero section",
"description": "Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a mesh gradient.",
"categories": [
"blocks"
],
"dependencies": [
"lucide-react",
"motion"
],
"registryDependencies": [
"https://irisui.dev/r/foundation.json",
"https://irisui.dev/r/utils.json",
"https://irisui.dev/r/button.json",
"https://irisui.dev/r/copy-button.json",
"https://irisui.dev/r/line-chart.json",
"https://irisui.dev/r/sparkline.json",
"https://irisui.dev/r/segmented-control.json",
"https://irisui.dev/r/avatar.json",
"https://irisui.dev/r/motion-tokens.json"
],
"files": [
{
"path": "src/registry/blocks/hero-section/hero-cadence.tsx",
"content": "\"use client\";\n\nimport { MotionConfig, motion } from \"motion/react\";\nimport { cn } from \"../../lib/utils\";\nimport { ActionLink, heroDescription, heroScreen, heroShell, heroTitle } from \"./hero-content\";\nimport type { HeroAction } from \"./hero-content\";\nimport { HeroMesh } from \"./hero-mesh\";\nimport type { HeroMeshPoint } from \"./hero-mesh\";\nimport { heroGroup, heroRise } from \"./hero-motion\";\n\nexport interface HeroCadenceProps {\n primaryAction?: HeroAction;\n secondaryAction?: HeroAction;\n animateIn?: boolean;\n className?: string;\n}\n\n/** Six points, authored the way the Gradient mesh editor saves them. Colors live in the class list, one palette per theme. */\nconst MESH: HeroMeshPoint[] = [\n { x: 0.1, y: 0.88, spread: 0.72 },\n { x: 0.86, y: 0.12, spread: 0.66 },\n { x: 0.16, y: 0.14, spread: 0.56 },\n { x: 0.62, y: 0.62, spread: 0.5 },\n { x: 0.94, y: 0.92, spread: 0.48 },\n { x: 0.44, y: 0.3, spread: 0.34 },\n];\n/** The mesh is the whole screen, so its palette is authored per theme rather than derived from tokens. */\nconst MESH_COLORS =\n \"-z-1 [--mesh-1:#bdd3ec] [--mesh-2:#c3c6ff] [--mesh-3:#ffd0b0] [--mesh-4:#f6bfd6] [--mesh-5:#cfe8dc] [--mesh-6:#fff3dc] [--mesh-base:#f2ede7] dark:[--mesh-1:#0d3a47] dark:[--mesh-2:#2a2f86] dark:[--mesh-3:#5a2a3c] dark:[--mesh-4:#3a1f5a] dark:[--mesh-5:#7a3a22] dark:[--mesh-6:#12142c] dark:[--mesh-base:#09090f]\";\n\n/** Sibling products, set as text wordmarks. */\nconst PRODUCTS = [\"CapyDB\", \"notdocs\", \"MyRoomie\", \"Meltemi\", \"Entrolytics\", \"Nami\", \"mpath\"];\n\n/** Minimal hero, one full screen: large type over a slowly drifting mesh gradient with grain, and sibling products along the bottom edge. Sample product: Anasa, a local-first notes app. */\nexport function HeroCadence({\n primaryAction = { label: \"Download for Mac\", doneLabel: \"Download started\" },\n secondaryAction = { label: \"Windows and Linux\", doneLabel: \"Opening downloads\" },\n animateIn = true,\n className,\n}: HeroCadenceProps) {\n const item = heroRise;\n const soft = \"text-[color-mix(in_oklab,var(--ink)_62%,transparent)]\";\n // Reduced motion: Motion skips every transform (rise, zoom, tilt entrance); opacity still fades briefly.\n // The scrim under the copy keeps body text above 4.5:1 wherever the mesh drifts.\n return (\n \n \n \n \n \n Your notes, in plain Markdown\n \n
\n \n Anasa keeps every note as a Markdown file in a folder you choose, with links, backlinks, a knowledge graph\n and tasks inside notes. On quieter days the Energy System shows less interface.\n \n \n
\n \n \n
\n
\n The local app is free. Hosted services are optional.\n
\n \n
\n \n
More from the same studio
\n \n {PRODUCTS.map((name) => (\n \n {name}\n \n ))}\n \n \n \n \n \n );\n}\n\nexport default HeroCadence;\n",
"type": "registry:component",
"target": "@components/iris/blocks/hero-section/hero-cadence.tsx"
},
{
"path": "src/registry/blocks/hero-section/hero-content.tsx",
"content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { MotionConfig, motion } from \"motion/react\";\nimport { ArrowRight, ArrowUpRight, Check } from \"lucide-react\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../../button/button\";\nimport { CopyButton } from \"../../copy-button/copy-button\";\nimport { heroGroup, heroRise } from \"./hero-motion\";\n\n/** The shell every hero shares: its own size container named `hero`, the page surface and body type. */\nexport const heroShell = \"relative @container/hero overflow-clip bg-page font-body tracking-body text-ink\";\n/** The designed variants are one full screen each; the small viewport unit keeps them clear of mobile browser bars. */\nexport const heroScreen = \"min-h-svh w-full\";\n/** Display headline. Each design passes its own size first, as `cn(size, heroTitle)`: a later font size would drop the leading. */\nexport const heroTitle = \"m-0 font-display font-medium leading-display tracking-display text-balance\";\nexport const heroDescription = \"m-0 text-lg leading-body text-pretty text-ink-2 @max-[560px]/hero:text-base\";\n\nexport interface HeroAction {\n label: string;\n href?: string;\n onClick?: () => void;\n /** Opens in a new tab and shows an outward arrow. */\n external?: boolean;\n /** Shown in place of the label for a moment after a press, such as \"Trial started\". Buttons only. */\n doneLabel?: string;\n}\n\nexport interface HeroInstallCommand {\n /** Short label, such as npm or pnpm. The first command is shown. */\n label: string;\n command: string;\n}\n\nexport interface HeroContentProps {\n layout: \"centered\" | \"split\" | \"minimal\";\n announcement?: HeroAction | null;\n title: string;\n description?: string;\n primaryAction?: HeroAction | null;\n secondaryAction?: HeroAction | null;\n install?: HeroInstallCommand[] | null;\n media?: ReactNode;\n meta?: string[];\n animateIn?: boolean;\n className?: string;\n}\n\nconst arrow = \"flex-none transition-transform duration-fast ease-standard motion-reduce:transition-none\";\nconst linkKinds = {\n primary: \"bg-ink text-page hover:opacity-90\",\n secondary: \"border-line bg-surface text-ink hover:bg-hover\",\n};\n\n/** A link or button in the shape of a design-system button. Links keep native navigation; a button with `doneLabel` confirms in place. */\nexport function ActionLink({\n action,\n kind,\n className,\n}: {\n action: HeroAction;\n kind: \"primary\" | \"secondary\";\n className?: string;\n}) {\n const [done, setDone] = useState(false);\n useEffect(() => {\n if (!done) return;\n const timer = window.setTimeout(() => setDone(false), 2400);\n return () => window.clearTimeout(timer);\n }, [done]);\n const icon = action.external ? (\n \n ) : kind === \"primary\" ? (\n \n ) : null;\n if (action.href) {\n return (\n \n {action.label}\n {icon}\n \n );\n }\n return (\n {\n action.onClick?.();\n if (action.doneLabel) setDone(true);\n }}\n >\n {done ? (\n <>\n \n {action.doneLabel}\n \n ) : (\n <>\n {action.label}\n {icon}\n \n )}\n \n );\n}\n\nconst announcementClass =\n \"group/action inline-flex min-h-8 max-w-full cursor-pointer items-center gap-1.5 rounded-button border border-line bg-surface px-3 py-1 text-left text-(length:--text-sm) text-ink-2 no-underline transition-[color,border-color] duration-fast ease-standard hover:border-line-strong hover:text-ink motion-reduce:transition-none\";\nconst announcementArrow = cn(arrow, \"group-hover/action:translate-x-0.5\");\n\n/**\n * The hero with your own content: announcement, headline, description, actions, an optional install line, and an\n * optional visual beside the copy. Use it when none of the three designed variants fits the product.\n */\nexport function HeroContent({\n layout,\n announcement,\n title,\n description,\n primaryAction,\n secondaryAction,\n install,\n media,\n meta,\n animateIn = true,\n className,\n}: HeroContentProps) {\n const item = heroRise;\n const command = install?.[0];\n const start = layout !== \"centered\";\n // Reduced motion: Motion skips every transform (rise, zoom, tilt entrance); opacity still fades briefly.\n return (\n \n \n \n \n {announcement && (\n \n {announcement.href ? (\n \n {announcement.label}\n \n \n ) : (\n \n )}\n \n )}\n \n {title}\n \n {description && (\n \n {description}\n \n )}\n {(primaryAction || secondaryAction) && (\n \n {primaryAction && }\n {secondaryAction && }\n \n )}\n {command && (\n \n \n $\n \n \n {command.command}\n \n \n \n )}\n {meta && meta.length > 0 && (\n \n {meta.map((entry) => (\n
{entry}
\n ))}\n \n )}\n \n {media && (\n \n {media}\n \n )}\n \n \n \n );\n}\n\nexport default HeroContent;\n",
"type": "registry:component",
"target": "@components/iris/blocks/hero-section/hero-content.tsx"
},
{
"path": "src/registry/blocks/hero-section/hero-lumen-data.ts",
"content": "import type { LineChartDatum } from \"@/registry/components/line-chart/line-chart\";\n\n/**\n * Sample data for the HeroLumen dashboard: Entrolytics, privacy-first web analytics, across three websites. Every number\n * is composed for the demo. Replace it with your own product's numbers.\n */\n\nexport type LumenRange = \"30d\" | \"90d\" | \"12m\";\n\nexport const lumenRanges: { value: LumenRange; label: string }[] = [\n { value: \"30d\", label: \"30D\" },\n { value: \"90d\", label: \"90D\" },\n { value: \"12m\", label: \"12M\" },\n];\n\n/** A smooth, deterministic walk: a trend, one slow wave, and a little noise that repeats for the same seed. */\nfunction walk(count: number, start: number, end: number, wave: number, seed: number) {\n let s = seed;\n const rand = () => {\n s = (s * 16807) % 2147483647;\n return s / 2147483647 - 0.5;\n };\n return Array.from({ length: count }, (_, i) => {\n const t = i / (count - 1);\n return Math.round(\n start + (end - start) * (t * t * 0.35 + t * 0.65) + Math.sin(t * Math.PI * 2.3) * wave + rand() * wave * 0.6,\n );\n });\n}\n\nconst months = [\"Oct\", \"Nov\", \"Dec\", \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\"];\n\n/** Visitors per day (30D), per week (90D) or per month (12M), against the period before. */\nfunction series(range: LumenRange): LineChartDatum[] {\n if (range === \"12m\") {\n const now = walk(12, 38_000, 78_000, 2_600, 7),\n before = walk(12, 24_000, 51_500, 2_200, 19);\n return months.map((month, i) => ({\n key: `m${i}`,\n label: `${month} ${i < 3 ? 2025 : 2026}`,\n axisLabel: i % 2 === 0 ? month : undefined,\n values: { visitors: now[i], last: before[i] },\n }));\n }\n const days = range === \"30d\" ? 30 : 13;\n const step = range === \"30d\" ? 1 : 7;\n const now = walk(\n days,\n range === \"30d\" ? 1_900 : 14_200,\n range === \"30d\" ? 3_100 : 18_240,\n range === \"30d\" ? 260 : 900,\n range === \"30d\" ? 3 : 11,\n );\n const before = walk(\n days,\n range === \"30d\" ? 1_700 : 12_600,\n range === \"30d\" ? 2_500 : 15_100,\n range === \"30d\" ? 220 : 700,\n 29,\n );\n const end = new Date(Date.UTC(2026, 9, 22));\n return now.map((value, i) => {\n const date = new Date(end.getTime() - (days - 1 - i) * step * 86_400_000);\n const label = date.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"short\", timeZone: \"UTC\" });\n const every = range === \"30d\" ? 7 : 3;\n return {\n key: date.toISOString().slice(0, 10),\n label,\n axisLabel: (days - 1 - i) % every === 0 ? label : undefined,\n values: { visitors: value, last: before[i] },\n };\n });\n}\n\nexport const lumenSeries: Record = {\n \"30d\": series(\"30d\"),\n \"90d\": series(\"90d\"),\n \"12m\": series(\"12m\"),\n};\n\nexport interface LumenKpi {\n id: string;\n label: string;\n tone: \"accent\" | \"success\" | \"warning\" | \"danger\";\n byRange: Record;\n}\n\nexport const lumenKpis: LumenKpi[] = [\n {\n id: \"visitors\",\n label: \"Visitors\",\n tone: \"accent\",\n byRange: {\n \"30d\": { value: \"74.3K\", change: \"+8.2%\", data: walk(12, 66, 74, 4, 5) },\n \"90d\": { value: \"208K\", change: \"+19.9%\", data: walk(12, 52, 74, 6, 9) },\n \"12m\": { value: \"694K\", change: \"+51.7%\", data: walk(12, 38, 78, 8, 13) },\n },\n },\n {\n id: \"pageviews\",\n label: \"Pageviews\",\n tone: \"success\",\n byRange: {\n \"30d\": { value: \"212K\", change: \"+6.4%\", data: walk(12, 196, 212, 6, 17) },\n \"90d\": { value: \"598K\", change: \"+14%\", data: walk(12, 168, 212, 8, 21) },\n \"12m\": { value: \"2.0M\", change: \"+38%\", data: walk(12, 110, 212, 12, 23) },\n },\n },\n {\n id: \"bounce\",\n label: \"Bounce rate\",\n tone: \"success\",\n byRange: {\n \"30d\": { value: \"41%\", change: \"−3 pts\", data: walk(12, 44, 41, 1.2, 31) },\n \"90d\": { value: \"43%\", change: \"−2 pts\", data: walk(12, 45, 43, 1.4, 37) },\n \"12m\": { value: \"44%\", change: \"−6 pts\", data: walk(12, 50, 44, 1.6, 41) },\n },\n },\n {\n id: \"visit\",\n label: \"Median visit\",\n tone: \"success\",\n byRange: {\n \"30d\": { value: \"1 min 48 s\", change: \"+9 s\", data: walk(12, 99, 108, 3, 43) },\n \"90d\": { value: \"1 min 41 s\", change: \"+12 s\", data: walk(12, 89, 101, 3, 47) },\n \"12m\": { value: \"1 min 36 s\", change: \"+21 s\", data: walk(12, 75, 96, 4, 53) },\n },\n },\n];\n\n/** A row in the top pages list: the page, its visitors this period, and the change against the period before. */\nexport interface LumenMover {\n name: string;\n change: string;\n amount: number;\n}\n\nexport const lumenMovers: LumenMover[] = [\n { name: \"capydb.dev/pricing\", change: \"4,210 visitors\", amount: 620 },\n { name: \"capydb.dev/docs/getting-started\", change: \"2,980 visitors\", amount: 410 },\n { name: \"notdocs.dev\", change: \"2,140 visitors\", amount: 380 },\n { name: \"entrolytics.dev/blog\", change: \"1,140 visitors\", amount: -90 },\n { name: \"notdocs.dev/docs/documents\", change: \"860 visitors\", amount: 120 },\n { name: \"capydb.dev/changelog\", change: \"640 visitors\", amount: -60 },\n];\n\nexport const lumenInsight: Record = {\n \"30d\": {\n lead: \"Visitors rose 8.2% this month.\",\n rest: \"Most of the rise landed on capydb.dev/pricing, which drew 4,210 visitors.\",\n },\n \"90d\": {\n lead: \"Visitors rose 19.9% this quarter.\",\n rest: \"The getting started guide is now the second most visited page.\",\n },\n \"12m\": {\n lead: \"Visitors rose 51.7% in twelve months.\",\n rest: \"Desktop still brings 62% of visits; mobile grew faster.\",\n },\n};\n",
"type": "registry:component",
"target": "@components/iris/blocks/hero-section/hero-lumen-data.ts"
},
{
"path": "src/registry/blocks/hero-section/hero-lumen.tsx",
"content": "\"use client\";\n\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { MotionConfig, motion, useReducedMotion } from \"motion/react\";\nimport {\n BarChart3,\n BookOpen,\n ChevronsUpDown,\n Gauge,\n LayoutDashboard,\n LineChart as LineIcon,\n Search,\n Settings,\n Sparkles,\n Users,\n} from \"lucide-react\";\nimport { LineChart } from \"../../line-chart/line-chart\";\nimport { Sparkline } from \"../../sparkline/sparkline\";\nimport SegmentedControl from \"../../segmented-control/segmented-control\";\nimport { Avatar } from \"../../avatar/avatar\";\nimport { motionTokens } from \"../../lib/motion-tokens\";\nimport { cn } from \"../../lib/utils\";\nimport { ActionLink, heroDescription, heroScreen, heroShell, heroTitle } from \"./hero-content\";\nimport type { HeroAction } from \"./hero-content\";\nimport { HeroMesh } from \"./hero-mesh\";\nimport type { HeroMeshPoint } from \"./hero-mesh\";\nimport { heroGroup, heroRise } from \"./hero-motion\";\nimport { lumenInsight, lumenKpis, lumenMovers, lumenRanges, lumenSeries } from \"./hero-lumen-data\";\nimport type { LumenRange } from \"./hero-lumen-data\";\n\n/** A soft mesh across the whole screen: cool tints at the top, a warm one low behind the window, all a few steps off the page. */\nconst MESH: HeroMeshPoint[] = [\n { x: 0.1, y: 0.92, spread: 0.7 },\n { x: 0.92, y: 0.86, spread: 0.66 },\n { x: 0.14, y: 0.08, spread: 0.64 },\n { x: 0.86, y: 0.04, spread: 0.6 },\n { x: 0.5, y: 0.38, spread: 0.46 },\n];\n\n/** The mesh is authored per theme: tints a few steps off the page, so it reads as light rather than color. */\nconst MESH_COLORS =\n \"-z-1 [--mesh-1:#ffe6d8] [--mesh-2:#e3dcff] [--mesh-3:#dbe4ff] [--mesh-4:#f0e0ff] [--mesh-5:#e0eefc] [--mesh-base:var(--page)] dark:[--mesh-1:#2a1822] dark:[--mesh-2:#1c1a44] dark:[--mesh-3:#141c40] dark:[--mesh-4:#231842] dark:[--mesh-5:#0e2133]\";\n\nconst NAV = [\n { label: \"Overview\", icon: Gauge, active: true },\n { label: \"Pageviews\", icon: LineIcon },\n { label: \"Visitors\", icon: Users },\n { label: \"Funnels\", icon: BarChart3 },\n { label: \"Boards\", icon: LayoutDashboard },\n { label: \"Reports\", icon: BookOpen },\n];\nconst SEGMENTS = [\n { label: \"Pricing page visitors\", tone: \"accent\" },\n { label: \"Bounced sessions\", tone: \"danger\" },\n { label: \"Visitors from GR\", tone: \"neutral\" },\n];\n\nconst count = new Intl.NumberFormat(\"en-US\");\nconst compact = (value: number) => (value >= 1000 ? `${+(value / 1000).toFixed(1)}K` : `${value}`);\n\n/** Width the dashboard is designed at, wide and narrow. It is drawn at that size and scaled to fit, like a screenshot. */\nconst WIDE = 1200,\n NARROW = 600;\n\nexport interface HeroLumenProps {\n primaryAction?: HeroAction;\n secondaryAction?: HeroAction;\n animateIn?: boolean;\n className?: string;\n}\n\n/**\n * Centered hero, one full screen: a headline over a drifting mesh, and a live analytics dashboard rising from the bottom edge. The\n * window settles from a tilt as it enters and runs off the bottom of the screen into a fade. It is real markup built from the\n * system's own charts; its range control works.\n */\nexport function HeroLumen({\n primaryAction = { label: \"Add your website\", doneLabel: \"Website added\" },\n secondaryAction = { label: \"See the plans\", doneLabel: \"Opening plans\" },\n animateIn = true,\n className,\n}: HeroLumenProps) {\n const calm = !!useReducedMotion();\n const item = heroRise;\n const stage = useRef(null);\n const [box, setBox] = useState({ width: WIDE, scale: 1 });\n\n useLayoutEffect(() => {\n const node = stage.current;\n if (!node) return;\n const measure = () => {\n const css = getComputedStyle(node);\n const width = node.clientWidth - parseFloat(css.paddingLeft) - parseFloat(css.paddingRight);\n const design = width < 720 ? NARROW : WIDE;\n // On a phone the window keeps a legible size and crops evenly at both edges instead of shrinking to fit.\n setBox({\n width: design,\n scale: design === NARROW ? Math.max(0.6, Math.min(1, width / design)) : Math.min(1, width / design),\n });\n };\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n const narrow = box.width === NARROW;\n const height = narrow ? 700 : 760;\n\n // Reduced motion: Motion skips every transform (rise, zoom, tilt entrance); opacity still fades briefly.\n // The hero is exactly one screen tall (never shorter than 600px); the window takes whatever height the copy leaves.\n return (\n \n \n \n \n \n Web analytics without cookies\n \n \n Entrolytics counts visitors, events and funnels with a script of about 1 KB. No cookies, no consent\n banner, and a dashboard the whole team can read.\n \n \n \n \n \n \n Free for 25,000 pageviews a month. The script loads in under 50 ms.\n \n \n\n \n \n
\n \n {/* The scale is a Motion value rather than a CSS transform, so layout animations inside (the date range highlight)\n are projected through it and slide exactly between options at any screen width. */}\n \n \n \n \n
\n \n \n \n );\n}\n\n/** The Entrolytics app window. Everything is content except the range control, which changes the data the whole screen shows. */\nfunction LumenDashboard({ narrow }: { narrow: boolean }) {\n const [range, setRange] = useState(\"30d\");\n const insight = lumenInsight[range];\n const panel = \"grid min-w-0 content-start gap-3.5 rounded-[12px] border border-line-soft bg-surface px-[18px] py-4\";\n const hint = \"text-(length:--text-xs) text-ink-3\";\n return (\n \n \n \n \n \n \n \n \n entrolytics.dev/overview\n \n \n
\n {!narrow && (\n
\n
Segments
\n
\n {SEGMENTS.map((view) => (\n
\n \n {view.label}\n
\n ))}\n
\n
\n \n \n Clara Weiss\n Data analyst\n \n \n
\n \n )}\n
\n \n
\n
Traffic overview
\n
Live · 847 visitors right now
\n
\n setRange(value as LumenRange)}\n className=\"flex-none\"\n />\n \n\n {/* KPI tiles reuse Sparkline; its caption wraps so the label sits above a larger value. */}\n
\n )}\n \n \n \n \n );\n}\n\nexport default HeroLumen;\n",
"type": "registry:component",
"target": "@components/iris/blocks/hero-section/hero-lumen.tsx"
},
{
"path": "src/registry/blocks/hero-section/hero-mesh.tsx",
"content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\nimport type { CSSProperties } from \"react\";\nimport { useReducedMotion } from \"motion/react\";\nimport { cn } from \"../../lib/utils\";\n\n/**\n * One point of a mesh, in the same model the Gradient mesh editor saves: a position as a fraction of the box (0 to 1 from the\n * top left) and a reach. The color is not given here: it is read from the CSS variable `--mesh-{n}` on the element, so light\n * and dark themes each author their own palette in CSS and the canvas follows a theme switch without a remount.\n */\nexport interface HeroMeshPoint {\n x: number;\n y: number;\n /** Reach of the color as a fraction of the box, 0.15 to 1.2. */\n spread: number;\n}\n\nexport interface HeroMeshProps {\n points: readonly HeroMeshPoint[];\n /** Film grain, 0 to 1. */\n grain?: number;\n /** Drift speed. 1 loops every 20 seconds; 0 holds the mesh still. */\n speed?: number;\n className?: string;\n style?: CSSProperties;\n}\n\ntype Rgb = [number, number, number];\n\n/** Same loop as the Gradient mesh editor: integer frequencies, so the drift is seamless. */\nconst PERIOD = 20,\n TRAVEL = 0.075,\n BREATH = 0.08,\n MAX = 8;\n/** The drift is slow, so thirty frames a second is indistinguishable from sixty and halves the cost. */\nconst FRAME = 1000 / 30;\n\nconst VS = `attribute vec2 a; void main() { gl_Position = vec4(a, 0.0, 1.0); }`;\nconst FS = `\nprecision mediump float;\nuniform vec2 uRes;\nuniform vec3 uBase;\nuniform vec4 uP[${MAX}];\nuniform vec3 uC[${MAX}];\nuniform int uN;\nuniform float uGrain;\nfloat hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * .1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }\nvoid main() {\n vec2 uv = vec2(gl_FragCoord.x / uRes.x, 1.0 - gl_FragCoord.y / uRes.y);\n vec3 col = uBase;\n for (int i = 0; i < ${MAX}; i++) {\n if (i >= uN) break;\n vec4 p = uP[i];\n float d = length((uv - p.xy) / max(p.z, 1e-4));\n col = mix(col, uC[i], 1.0 - smoothstep(0.0, 1.0, d));\n }\n float n = hash(floor(gl_FragCoord.xy)) + hash(floor(gl_FragCoord.xy) + 19.19) - 1.0;\n float lum = dot(col, vec3(.2126, .7152, .0722));\n col += n * (uGrain * .1 * (.55 + 1.8 * lum * (1.0 - lum)) + .6 / 255.0);\n gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}`;\n\nfunction hashOf(text: string) {\n let h = 2166136261;\n for (let i = 0; i < text.length; i++) {\n h ^= text.charCodeAt(i);\n h = Math.imul(h, 16777619);\n }\n return h >>> 0;\n}\n\nconst UNIFORMS = [\"uRes\", \"uBase\", \"uP\", \"uC\", \"uN\", \"uGrain\"] as const;\n\n/** Resolves any CSS color (hex, oklch, color-mix) to sRGB through a one pixel 2D canvas. */\nfunction toRgb(color: string, scratch: CanvasRenderingContext2D): Rgb {\n scratch.clearRect(0, 0, 1, 1);\n scratch.fillStyle = \"#000\";\n scratch.fillStyle = color;\n scratch.fillRect(0, 0, 1, 1);\n const [r = 0, g = 0, b = 0] = scratch.getImageData(0, 0, 1, 1).data;\n return [r / 255, g / 255, b / 255];\n}\n\n/** The static CSS render of the same mesh: shown on the server, before the canvas paints, and when WebGL is missing. */\nfunction cssMesh(points: readonly HeroMeshPoint[]): CSSProperties {\n const stops = [0, 0.2, 0.4, 0.6, 0.8, 1].map((t) => [t, Math.round((1 - t * t * (3 - 2 * t)) * 100)] as const);\n const layers = points.map(\n (p, i) =>\n `radial-gradient(ellipse ${p.spread * 100}% ${p.spread * 100}% at ${p.x * 100}% ${p.y * 100}%, ${stops.map(([t, a]) => `color-mix(in srgb, var(--mesh-${i + 1}) ${a}%, transparent) ${t * 100}%`).join(\", \")})`,\n );\n return { backgroundColor: \"var(--mesh-base)\", backgroundImage: layers.reverse().join(\", \") };\n}\n\n/**\n * A lean, non-editing render of the Gradient mesh: a single WebGL triangle composites each point over the last with the\n * editor's smoothstep falloff and grain, drifting on the editor's seamless loop. It draws at thirty frames a second only while\n * it is on screen and the tab is visible, and draws one still frame under reduced motion.\n */\nexport function HeroMesh({ points, grain = 0.35, speed = 1, className, style }: HeroMeshProps) {\n const root = useRef(null);\n const canvas = useRef(null);\n const reduced = !!useReducedMotion();\n const key = JSON.stringify(points);\n\n useEffect(() => {\n const host = root.current,\n node = canvas.current;\n if (!host || !node) return;\n const gl = node.getContext(\"webgl\", {\n alpha: false,\n antialias: false,\n depth: false,\n stencil: false,\n powerPreference: \"low-power\",\n });\n const scratch = document.createElement(\"canvas\").getContext(\"2d\", { willReadFrequently: true });\n if (!gl || !scratch) return;\n const compile = (type: number, src: string) => {\n const s = gl.createShader(type)!;\n gl.shaderSource(s, src);\n gl.compileShader(s);\n return s;\n };\n const prog = gl.createProgram()!;\n gl.attachShader(prog, compile(gl.VERTEX_SHADER, VS));\n gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FS));\n gl.linkProgram(prog);\n if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return;\n gl.useProgram(prog);\n gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);\n const loc = gl.getAttribLocation(prog, \"a\");\n gl.enableVertexAttribArray(loc);\n gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);\n const u = Object.fromEntries(UNIFORMS.map((name) => [name, gl.getUniformLocation(prog, name)])) as Record<\n (typeof UNIFORMS)[number],\n WebGLUniformLocation | null\n >;\n\n const pts = (JSON.parse(key) as HeroMeshPoint[]).slice(0, MAX);\n const drift = pts.map((_, i) => {\n const h = hashOf(`mesh-${i}`);\n return {\n ph1: (h % 628) / 100,\n ph2: ((h >>> 10) % 628) / 100,\n k1: 1 + ((h >>> 20) % 2),\n k2: 1 + ((h >>> 22) % 2),\n };\n });\n const P = new Float32Array(MAX * 4),\n C = new Float32Array(MAX * 3);\n let base: Rgb = [1, 1, 1];\n\n const readColors = () => {\n const css = getComputedStyle(host);\n base = toRgb(css.getPropertyValue(\"--mesh-base\").trim() || \"#fff\", scratch);\n pts.forEach((_, i) => {\n const c = toRgb(css.getPropertyValue(`--mesh-${i + 1}`).trim() || \"#fff\", scratch);\n C.set(c, i * 3);\n });\n };\n\n let width = 0,\n height = 0;\n const size = () => {\n // The mesh has no detail finer than its grain, so one canvas pixel per CSS pixel is enough on any screen.\n width = Math.max(1, Math.round(host.clientWidth));\n height = Math.max(1, Math.round(host.clientHeight));\n node.width = width;\n node.height = height;\n };\n\n let t = hashOf(key) % PERIOD;\n const draw = () => {\n const a = (2 * Math.PI * t) / PERIOD;\n pts.forEach((p, i) => {\n const d = drift[i]!;\n P[i * 4] = p.x + TRAVEL * Math.sin(a * d.k1 + d.ph1);\n P[i * 4 + 1] = p.y + TRAVEL * Math.cos(a * d.k2 + d.ph2);\n P[i * 4 + 2] = p.spread * (1 + BREATH * Math.sin(a + d.ph1 * 0.7));\n });\n gl.viewport(0, 0, width, height);\n gl.uniform2f(u.uRes, width, height);\n gl.uniform3f(u.uBase, base[0], base[1], base[2]);\n gl.uniform4fv(u.uP, P);\n gl.uniform3fv(u.uC, C);\n gl.uniform1i(u.uN, pts.length);\n gl.uniform1f(u.uGrain, grain);\n gl.drawArrays(gl.TRIANGLES, 0, 3);\n host.dataset.painted = \"\";\n };\n\n readColors();\n size();\n draw();\n\n const moving = !reduced && speed > 0;\n let visible = false,\n frame = 0,\n last = 0;\n const tick = (now: number) => {\n frame = requestAnimationFrame(tick);\n if (now - last < FRAME) return;\n const dt = last ? Math.min(0.1, (now - last) / 1000) : 0;\n last = now;\n t = (t + dt * speed) % PERIOD;\n draw();\n };\n const sync = () => {\n const run = moving && visible && document.visibilityState === \"visible\";\n if (run && !frame) {\n last = 0;\n frame = requestAnimationFrame(tick);\n }\n if (!run && frame) {\n cancelAnimationFrame(frame);\n frame = 0;\n }\n };\n const io = new IntersectionObserver(([entry]) => {\n if (!entry) return;\n visible = entry.isIntersecting;\n sync();\n });\n io.observe(host);\n const ro = new ResizeObserver(() => {\n size();\n draw();\n });\n ro.observe(host);\n const theme = () => {\n readColors();\n draw();\n };\n const mo = new MutationObserver(theme);\n mo.observe(document.documentElement, { attributes: true, attributeFilter: [\"data-theme\", \"data-accent\", \"class\"] });\n const scheme = matchMedia(\"(prefers-color-scheme: dark)\");\n scheme.addEventListener(\"change\", theme);\n document.addEventListener(\"visibilitychange\", sync);\n return () => {\n cancelAnimationFrame(frame);\n io.disconnect();\n ro.disconnect();\n mo.disconnect();\n scheme.removeEventListener(\"change\", theme);\n document.removeEventListener(\"visibilitychange\", sync);\n delete host.dataset.painted;\n };\n }, [key, grain, speed, reduced]);\n\n // The canvas fades in over its own CSS render once it has painted, so the first frame never flashes.\n return (\n \n \n \n );\n}\n\nexport default HeroMesh;\n",
"type": "registry:component",
"target": "@components/iris/blocks/hero-section/hero-mesh.tsx"
},
{
"path": "src/registry/blocks/hero-section/hero-motion.ts",
"content": "import { useSyncExternalStore } from \"react\";\nimport { useReducedMotion } from \"motion/react\";\nimport type { Transition, Variants } from \"motion/react\";\nimport { motionTokens } from \"../../lib/motion-tokens\";\n\nexport type Bezier = [number, number, number, number];\nexport const ease = {\n enter: [...motionTokens.ease.enter] as Bezier,\n standard: [...motionTokens.ease.standard] as Bezier,\n inOut: [...motionTokens.ease.inOut] as Bezier,\n};\n\n/** The one entrance a hero plays: children rise in reading order, once. */\nexport const heroGroup: Variants = {\n hidden: {},\n shown: { transition: { staggerChildren: motionTokens.stagger.line, delayChildren: 0.04 } },\n};\nexport const heroRise: Variants = {\n hidden: { opacity: 0, y: 12, filter: `blur(${motionTokens.blur.subtle}px)` },\n shown: { opacity: 1, y: 0, filter: \"blur(0px)\", transition: { duration: 0.64, ease: ease.enter } },\n};\nexport const heroFade: Variants = {\n hidden: { opacity: 0 },\n shown: { opacity: 1, transition: { duration: motionTokens.duration.standard } },\n};\n\nexport const instant: Transition = { duration: 0 };\n\nconst noop = () => () => {};\n/**\n * Reduced motion, read only after hydration. The server cannot know the preference, so the first client render matches the\n * server's full motion markup and the reduced branch takes over on the next render, before anything has moved.\n */\nexport function useHeroReducedMotion() {\n const hydrated = useSyncExternalStore(\n noop,\n () => true,\n () => false,\n );\n return !!useReducedMotion() && hydrated;\n}\n",
"type": "registry:component",
"target": "@components/iris/blocks/hero-section/hero-motion.ts"
},
{
"path": "src/registry/blocks/hero-section/hero-relay.tsx",
"content": "\"use client\";\n\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { AnimatePresence, MotionConfig, motion } from \"motion/react\";\nimport { Check, FolderOpen, Inbox, Minus, ScanFace, ShieldCheck, Split, Webhook } from \"lucide-react\";\nimport { Button } from \"../../button/button\";\nimport { motionTokens } from \"../../lib/motion-tokens\";\nimport { cn } from \"../../lib/utils\";\nimport { ActionLink, heroDescription, heroScreen, heroShell, heroTitle } from \"./hero-content\";\nimport type { HeroAction } from \"./hero-content\";\nimport { ease, heroGroup, heroRise, useHeroReducedMotion } from \"./hero-motion\";\n\ntype NodeId = \"trigger\" | \"checks\" | \"policy\" | \"queue\" | \"case\" | \"webhook\";\ntype Status = \"idle\" | \"running\" | \"done\" | \"skipped\";\n\n/** Sample OpsisID sessions. Each one runs the same flow; the policy table decides whether a person reviews it. */\nconst EVENTS = [\n {\n purpose: \"rental_lister\",\n country: \"GR\",\n checks: \"3 passed, 1 running\",\n decision: \"Review: property link\",\n routed: true,\n caseId: \"Case 482\",\n total: 412,\n ms: { checks: 118, policy: 2, queue: 164, case: 231, webhook: 58 },\n },\n {\n purpose: \"rental_seeker\",\n country: \"PL\",\n checks: \"Email and phone passed\",\n decision: \"Approved at level 0\",\n routed: false,\n caseId: \"\",\n total: 171,\n ms: { checks: 96, policy: 1, queue: 0, case: 0, webhook: 61 },\n },\n {\n purpose: \"aml_cdd\",\n country: \"GR\",\n checks: \"Sanctions check passed\",\n decision: \"Review: decision case\",\n routed: true,\n caseId: \"Case 483\",\n total: 436,\n ms: { checks: 131, policy: 2, queue: 149, case: 244, webhook: 66 },\n },\n] as const;\ntype RelayEvent = (typeof EVENTS)[number];\n\n/**\n * One run in phases. Odd phases run a step, even phases carry the data along the edges out of it; the last phase holds the\n * finished run on screen before the next event arrives. Durations in milliseconds.\n */\nconst PHASES = [900, 420, 380, 640, 380, 360, 440, 760, 2800];\nconst DONE = PHASES.length - 1;\nconst STEPS: Record = {\n trigger: [1, 2],\n checks: [3, 4],\n policy: [5, 6],\n queue: [7, 8],\n case: [7, 8],\n webhook: [7, 8],\n};\nconst ACTIONS = [\"queue\", \"case\", \"webhook\"] as const;\n\nfunction statusOf(id: NodeId, phase: number, event: RelayEvent): Status {\n const [start, end] = STEPS[id];\n if ((id === \"queue\" || id === \"case\") && !event.routed && phase >= 6) return \"skipped\";\n return phase < start ? \"idle\" : phase < end ? \"running\" : \"done\";\n}\n\n/** The graph is drawn at a fixed size and scaled to its column, like a screenshot, so it never reflows mid run. */\ntype Box = { x: number; y: number; w: number; h: number };\nconst LAYOUTS = {\n wide: {\n width: 640,\n height: 524,\n summary: 480,\n nodes: {\n trigger: { x: 170, y: 0, w: 300, h: 60 },\n checks: { x: 170, y: 112, w: 300, h: 60 },\n policy: { x: 170, y: 224, w: 300, h: 60 },\n queue: { x: 0, y: 356, w: 200, h: 84 },\n case: { x: 220, y: 356, w: 200, h: 84 },\n webhook: { x: 440, y: 356, w: 200, h: 84 },\n } as Record,\n },\n narrow: {\n width: 344,\n height: 316,\n summary: 0,\n nodes: {\n trigger: { x: 0, y: 0, w: 344, h: 52 },\n checks: { x: 0, y: 78, w: 344, h: 52 },\n policy: { x: 0, y: 156, w: 344, h: 52 },\n queue: { x: 0, y: 244, w: 108, h: 72 },\n case: { x: 118, y: 244, w: 108, h: 72 },\n webhook: { x: 236, y: 244, w: 108, h: 72 },\n } as Record,\n },\n};\ntype Layout = (typeof LAYOUTS)[keyof typeof LAYOUTS];\n\nconst EDGES: { from: NodeId; to: NodeId; phase: number }[] = [\n { from: \"trigger\", to: \"checks\", phase: 2 },\n { from: \"checks\", to: \"policy\", phase: 4 },\n { from: \"policy\", to: \"queue\", phase: 6 },\n { from: \"policy\", to: \"case\", phase: 6 },\n { from: \"policy\", to: \"webhook\", phase: 6 },\n];\n\nfunction edgePath(layout: Layout, from: NodeId, to: NodeId) {\n const a = layout.nodes[from],\n b = layout.nodes[to];\n const x1 = a.x + a.w / 2,\n y1 = a.y + a.h,\n x2 = b.x + b.w / 2,\n y2 = b.y;\n const mid = (y2 - y1) / 2;\n return `M ${x1} ${y1} C ${x1} ${y1 + mid} ${x2} ${y2 - mid} ${x2} ${y2}`;\n}\n\nconst RESULTS: Record<(typeof ACTIONS)[number], (event: RelayEvent) => string> = {\n queue: (event) => `Queued in ${event.ms.queue} ms`,\n case: (event) => `${event.caseId} in ${event.ms.case} ms`,\n webhook: (event) => `Delivered in ${event.ms.webhook} ms`,\n};\n\nconst glyph = \"text-ink-2\";\nconst STATUS_LABEL: Record = { idle: \"Waiting\", running: \"Running\", done: \"Done\", skipped: \"Skipped\" };\nconst mono = \"font-code\";\nconst spinner =\n \"block size-[13px] flex-none animate-[spin_.7s_linear_infinite] rounded-full border-[1.5px] border-[color-mix(in_oklab,var(--accent)_22%,transparent)] border-t-accent motion-reduce:animate-none\";\n\nexport interface HeroRelayProps {\n primaryAction?: HeroAction;\n secondaryAction?: HeroAction;\n animateIn?: boolean;\n className?: string;\n}\n\n/**\n * Split hero, one full screen: the copy beside a live flow graph on a dotted canvas. Sample OpsisID sessions arrive on their\n * own and run the flow node by node; the data draws along each edge, the policy table decides which actions run, and every step\n * reports its time. \"Send test session\" runs the next sample at once. The run pauses off screen, and under reduced motion each\n * event shows its finished run without playing.\n */\nexport function HeroRelay({\n primaryAction = { label: \"Ask for a quote\", doneLabel: \"Request sent\" },\n secondaryAction = { label: \"Read the docs\", doneLabel: \"Opening docs\" },\n animateIn = true,\n className,\n}: HeroRelayProps) {\n const item = heroRise;\n const reduced = useHeroReducedMotion();\n const root = useRef(null);\n const stage = useRef(null);\n const [mode, setMode] = useState(\"wide\");\n const [scale, setScale] = useState(1);\n const [run, setRun] = useState({ index: 0, count: 2418, phase: 0 });\n const [visible, setVisible] = useState(false);\n\n useLayoutEffect(() => {\n const node = stage.current;\n if (!node) return;\n const measure = () => {\n const width = node.clientWidth;\n const next = width < 520 ? \"narrow\" : \"wide\";\n setMode(next);\n setScale(Math.min(1, width / LAYOUTS[next].width));\n };\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n // The run only plays while the hero is on screen and the tab is visible.\n useEffect(() => {\n const node = root.current;\n if (!node) return;\n let onScreen = false;\n const sync = () => setVisible(onScreen && document.visibilityState === \"visible\");\n const io = new IntersectionObserver(([entry]) => {\n if (!entry) return;\n onScreen = entry.isIntersecting;\n sync();\n });\n io.observe(node);\n document.addEventListener(\"visibilitychange\", sync);\n return () => {\n io.disconnect();\n document.removeEventListener(\"visibilitychange\", sync);\n };\n }, []);\n\n useEffect(() => {\n if (reduced || !visible) return;\n const timer = window.setTimeout(\n () =>\n setRun((current) =>\n current.phase < DONE\n ? { ...current, phase: current.phase + 1 }\n : { index: (current.index + 1) % EVENTS.length, count: current.count + 1, phase: 0 },\n ),\n PHASES[run.phase],\n );\n return () => window.clearTimeout(timer);\n }, [run.phase, run.index, reduced, visible]);\n\n const sendTest = () =>\n setRun((current) => ({ index: (current.index + 1) % EVENTS.length, count: current.count + 1, phase: 1 }));\n\n const layout = LAYOUTS[mode];\n const event = EVENTS[run.index]!;\n // Reduced motion: every event is shown as its finished run; the button moves to the next one at once.\n const phase = reduced ? DONE : run.phase;\n const status = (id: NodeId) => statusOf(id, phase, event);\n const narrow = mode === \"narrow\";\n\n // Reduced motion: Motion skips every transform (rise, tilt entrance); opacity still fades briefly.\n // The whole hero is a workflow canvas: a dot grid fills the screen, strongest behind the graph, and the copy sits on its quiet side.\n return (\n \n \n
\n \n \n Identity checks, decided by your policy\n \n \n OpsisID verifies people by eID or by ID document and selfie, then your policy table decides. Cases that\n need a person go to your review queue, and every decision returns by signed webhook.\n \n \n \n \n \n \n EU only. A model never decides a case.\n \n \n\n \n
\n \n \n \n \n );\n}\n\nfunction RelayNode({\n box,\n status,\n icon,\n title,\n sub,\n meta,\n compact = false,\n}: {\n box: Box;\n status: Status;\n icon: ReactNode;\n title: string;\n sub: string;\n meta?: string;\n compact?: boolean;\n}) {\n // A node: what the step is, what it found, and its state. The running step takes the accent; compact nodes (the three\n // actions) put the icon and state on top and the name and its result under them.\n return (\n \n {icon}\n \n {title}\n {sub}\n \n \n \n \n {status === \"running\" ? (\n \n ) : status === \"done\" ? (\n <>\n {meta && {meta}}\n \n \n ) : status === \"skipped\" ? (\n \n ) : (\n \n )}\n {STATUS_LABEL[status]}\n \n \n \n \n );\n}\n\nexport default HeroRelay;\n",
"type": "registry:component",
"target": "@components/iris/blocks/hero-section/hero-relay.tsx"
},
{
"path": "src/registry/blocks/hero-section/hero-section.tsx",
"content": "\"use client\";\n\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport SegmentedControl from \"../../segmented-control/segmented-control\";\nimport { HeroLumen } from \"./hero-lumen\";\nimport { HeroRelay } from \"./hero-relay\";\nimport { HeroCadence } from \"./hero-cadence\";\nimport { HeroMesh } from \"./hero-mesh\";\nimport type { HeroMeshPoint } from \"./hero-mesh\";\nimport { HeroContent } from \"./hero-content\";\nimport type { HeroAction, HeroInstallCommand } from \"./hero-content\";\n\nexport { HeroCadence, HeroContent, HeroLumen, HeroMesh, HeroRelay };\nexport type { HeroAction, HeroInstallCommand, HeroMeshPoint };\n\nexport type HeroSectionVariant = \"centered\" | \"split\" | \"minimal\";\n\nexport interface HeroSectionProps {\n /**\n * `centered` is a headline over a drifting mesh with a live dashboard rising from the bottom edge, `split` sets the copy\n * beside a live workflow graph that runs sample events node by node, and `minimal` is large type over a mesh gradient.\n * Each design fills one full screen.\n */\n variant?: HeroSectionVariant;\n /** Plays the entrance once on mount. Defaults to true. */\n animateIn?: boolean;\n /** The main call to action. With `doneLabel` and no `href`, the button confirms in place. */\n primaryAction?: HeroAction | null;\n /** The second call to action. */\n secondaryAction?: HeroAction | null;\n /**\n * Your own headline. When set, the hero renders your content in the chosen layout (see `HeroContent`) instead of the\n * designed sample, together with the props below.\n */\n title?: string;\n description?: string;\n announcement?: HeroAction | null;\n /** Install commands for your own content; the first one is shown with a copy button. */\n install?: HeroInstallCommand[] | null;\n /** A visual beside your own content in the split layout. */\n media?: ReactNode;\n /** Small facts under your own content, such as the version and license. */\n meta?: string[];\n /** Kept for compatibility; highlighted phrases render as plain text. */\n highlight?: string;\n className?: string;\n}\n\n/**\n * A full screen landing page hero in three designs: a product screenshot in perspective over a drifting mesh, a live workflow\n * graph that routes sample events, and editorial type over a mesh gradient.\n */\nexport function HeroSection({\n variant = \"centered\",\n animateIn = true,\n primaryAction,\n secondaryAction,\n title,\n description,\n announcement,\n install,\n media,\n meta,\n className,\n}: HeroSectionProps) {\n if (title)\n return (\n \n );\n const actions = { primaryAction: primaryAction ?? undefined, secondaryAction: secondaryAction ?? undefined };\n if (variant === \"split\") return ;\n if (variant === \"minimal\") return ;\n return ;\n}\n\nconst variantOptions = [\n { value: \"centered\", label: \"Screenshot\" },\n { value: \"split\", label: \"Workflow\" },\n { value: \"minimal\", label: \"Mesh\" },\n];\n\n/**\n * Preview: the hero, full screen, with a small glass switch floating over its top edge. The switch takes no space of its own,\n * so every design fills the screen exactly. Switching replays the entrance.\n */\nexport function HeroSectionBlock({ variant: initial = \"centered\" }: { variant?: HeroSectionVariant }) {\n const [variant, setVariant] = useState(initial);\n return (\n
\n \n \n {/* The segmented control drops its own well; the glass is its surface. */}\n setVariant(value as HeroSectionVariant)}\n className=\"rounded-button border-0 bg-transparent [&_button]:rounded-button\"\n />\n