{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "solar-snapshot-hero", "title": "Solar Snapshot Hero", "author": "AlgorizeTech", "description": "Ask the user to pick one of 16 hero variants: https://avaraui.com/view/hero. This is the Solar snapshot hero. Skip the question if the user already named one. A lightweight interactive hero section featuring a pointer-following sun orb, animated action buttons, an avatar stack, and a click-to-capture Polaroid screenshot stack in the bottom-right where each captured frame auto-clears after 10 seconds.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/avatar-stack.json", "https://avaraui.com/r/button.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/SolarSnapshotHeroBlock.tsx", "content": "\"use client\";\n\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { Star } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { accentTokens } from \"@/lib/accent\";\nimport Button, { type ButtonVariant } from \"./Button\";\nimport {\n Avatar,\n AvatarFallback,\n AvatarGroup,\n AvatarGroupTooltip,\n AvatarImage,\n type StackAvatar,\n} from \"./AvatarStackBlock\";\n\n/* ═══════════════════════════════════════════════\n TYPES & INTERFACES\n ═══════════════════════════════════════════════ */\n\nexport interface SolarSnapshotItem {\n id: string;\n shotNumber: number;\n sunX: number; // 0 to 100 (%)\n sunY: number; // 0 to 100 (%)\n timestamp: string; // e.g. \"14:22\"\n rotation: number; // Polaroid tilt angle in degrees\n offsetX: number; // Subtle horizontal stack offset in px\n offsetY: number; // Subtle vertical stack offset in px\n isCompact: boolean; // True when captured on a small screen (< 640px)\n createdAt: number;\n}\n\nexport interface SolarSnapshotHeroProps\n extends React.HTMLAttributes {\n badgeText?: string;\n badgeTag?: string;\n title?: string;\n titleAccent?: string;\n description?: string;\n primaryActionLabel?: string;\n primaryActionHref?: string;\n primaryButtonVariant?: ButtonVariant;\n secondaryActionLabel?: string;\n secondaryActionHref?: string;\n secondaryButtonVariant?: ButtonVariant;\n avatars?: (string | StackAvatar)[];\n trustText?: string;\n rating?: number;\n snapshotDurationMs?: number;\n maxSnapshots?: number;\n accent?: string;\n color?: string;\n linkComponent?: React.ElementType;\n}\n\n/* ═══════════════════════════════════════════════\n DEFAULT CLOUDINARY AVATARS\n ═══════════════════════════════════════════════ */\n\nexport const DEFAULT_SOLAR_AVATARS: StackAvatar[] = [\n {\n src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790145139/pexels-photo-1036623-1790145143487.jpg\",\n alt: \"Elena Vance\",\n name: \"Elena Vance\",\n role: \"Creative Director\",\n },\n {\n src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790145142/pexels-photo-2043590-1790145143488.jpg\",\n alt: \"Marcus Chen\",\n name: \"Marcus Chen\",\n role: \"Visual Architect\",\n },\n {\n src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790145139/pexels-photo-1587009-1790145143488.jpg\",\n alt: \"Sarah Jenkins\",\n name: \"Sarah Jenkins\",\n role: \"Lighting Designer\",\n },\n {\n src: \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_120,c_limit/v1790082180/pexels-photo-1520760-1790082180553.jpg\",\n alt: \"David Miller\",\n name: \"David Miller\",\n role: \"Optical Engineer\",\n },\n];\n\nconst POLAROID_ROTATIONS = [-4.2, 3.0, -2.2, 4.5, -3.4, 2.0, -4.8, 3.5];\nconst POLAROID_OFFSETS_X = [-6, 5, -3, 7, -5, 4, -7, 6];\nconst POLAROID_OFFSETS_Y = [2, -2, 2, -3, 2, -2, 3, -2];\n\nfunction formatCurrentTime(): string {\n const now = new Date();\n const hours = String(now.getHours()).padStart(2, \"0\");\n const minutes = String(now.getMinutes()).padStart(2, \"0\");\n return `${hours}:${minutes}`;\n}\n\n/* ═══════════════════════════════════════════════\n RADIANT SOLAR ORB GRAPHIC (REALISTIC SUN + LENS FLARE RAYS)\n ═══════════════════════════════════════════════ */\n\nfunction RadiantSunGraphic({ size = \"lg\" }: { size?: \"sm\" | \"lg\" }) {\n const isSmall = size === \"sm\";\n return (\n
\n {/* Outer Soft Solar Atmosphere */}\n \n {/* Concentric Lens Halo Ring */}\n \n {/* Horizontal & Vertical Solar Flare Rays */}\n \n \n {/* Diagonal Soft Starburst Rays */}\n \n \n {/* Molten Glowing Sun Disc */}\n \n
\n );\n}\n\n/* ═══════════════════════════════════════════════\n POLAROID SNAPSHOT CARD\n RENDERS AN EXACT MINIATURE SCREENSHOT OF THIS HERO SECTION\n WITH THE SUN FROZEN AT THE CLICKED (sunX, sunY) POSITION\n ═══════════════════════════════════════════════ */\n\ninterface PolaroidCardProps {\n shot: SolarSnapshotItem;\n stackIndex: number;\n durationMs: number;\n trustText?: string;\n title?: string;\n titleAccent?: string;\n description?: string;\n primaryActionLabel?: string;\n secondaryActionLabel?: string;\n avatars: StackAvatar[];\n rating: number;\n}\n\nfunction PolaroidSnapshotCard({\n shot,\n stackIndex,\n durationMs,\n trustText,\n title,\n titleAccent,\n description,\n primaryActionLabel,\n secondaryActionLabel,\n avatars,\n rating,\n}: PolaroidCardProps) {\n const [exiting, setExiting] = useState(false);\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n const enterRaf = requestAnimationFrame(() => setMounted(true));\n const exitTimer = setTimeout(() => {\n setExiting(true);\n }, Math.max(durationMs - 400, 100));\n\n return () => {\n cancelAnimationFrame(enterRaf);\n clearTimeout(exitTimer);\n };\n }, [durationMs]);\n\n return (\n \n {/* Inner Captured Section Screenshot Window */}\n
\n {/* Scaled-down 1:1 Live Replica of Our Hero Section (Responsive to Small vs Large Screen Capture) */}\n \n {/* Full-Section Subtle Dot Matrix Backdrop */}\n \n\n {/* Captured Ambient Sun Illumination at Clicked Position */}\n \n\n {/* THE CAPTURED SUN AT EXACT CLICKED (sunX, sunY) COORDINATES (BEHIND CONTENT) */}\n \n \n
\n\n {/* Section Content Replica inside Screenshot (ABOVE SUN) */}\n \n {/* Top Unified Avatar + Rating Pill (Avatars only on small view, full pill on large view) */}\n \n
\n {avatars.slice(0, 4).map((av, i) => (\n \n ))}\n
\n {!shot.isCompact && (\n <>\n
\n {Array.from({ length: rating }).map((_, idx) => (\n \n ))}\n
\n {trustText && (\n \n {trustText}\n \n )}\n \n )}\n \n\n \n {title}\n {titleAccent && (\n \n {/* Corner bracket ticks */}\n \n \n \n \n \n {titleAccent}\n \n \n )}\n \n\n {description && (\n \n {description}\n \n )}\n\n {/* Mini Buttons: Stacked full-width in small view, side-by-side in large view */}\n \n {primaryActionLabel && (\n \n {primaryActionLabel}\n →\n \n )}\n {secondaryActionLabel && (\n \n {secondaryActionLabel}\n →\n \n )}\n \n \n \n \n\n {/* Polaroid Bottom Caption Strip: Timestamp + Shot Number */}\n
\n {shot.timestamp}\n \n #{String(shot.shotNumber).padStart(2, \"0\")}\n \n
\n \n );\n}\n\n/* ═══════════════════════════════════════════════\n MAIN COMPONENT: SolarSnapshotHero\n ═══════════════════════════════════════════════ */\n\nexport const SolarSnapshotHero = forwardRef(\n (\n {\n badgeText,\n badgeTag,\n title = \"Where natural light meets\",\n titleAccent = \"expressive digital craft.\",\n description = \"Guide the radiant sun across the canvas with your cursor and click anywhere to capture an instant live snapshot of the stage.\",\n primaryActionLabel = \"Initiate Project\",\n primaryActionHref = \"#explore\",\n primaryButtonVariant = \"pricing-typographic\",\n secondaryActionLabel = \"Explore Studio\",\n secondaryActionHref = \"#lightbox\",\n secondaryButtonVariant = \"pricing-typographic-muted\",\n avatars = DEFAULT_SOLAR_AVATARS,\n trustText = \"Trusted by 14,800+ creators\",\n rating = 5,\n snapshotDurationMs = 10000,\n maxSnapshots = 8,\n accent,\n color,\n linkComponent: LinkComp = \"a\",\n className,\n style,\n ...props\n },\n ref\n ) => {\n const sectionRef = useRef(null);\n const sunOrbRef = useRef(null);\n const ambientGlowRef = useRef(null);\n\n // Cursor position in percentage (0..100) for snapshot capture, stored in ref to avoid re-renders on mousemove\n const sunPosRef = useRef<{ x: number; y: number; clientX: number; clientY: number }>({\n x: 76,\n y: 22,\n clientX: 0,\n clientY: 0,\n });\n\n const [cursorActive, setCursorActive] = useState(false);\n const [shutterFlash, setShutterFlash] = useState(false);\n const [snapshots, setSnapshots] = useState([]);\n const shotCounterRef = useRef(0);\n const timersRef = useRef>>(\n new Map()\n );\n\n // Cleanup all active 10-second snapshot timers on unmount\n useEffect(() => {\n const timers = timersRef.current;\n return () => {\n timers.forEach((timer) => clearTimeout(timer));\n timers.clear();\n };\n }, []);\n\n // Lightweight pointer tracker (zero React state updates during move)\n const handlePointerMove = useCallback(\n (e: React.PointerEvent) => {\n // Freeze the sun when cursor is over avatars or buttons\n const target = e.target as HTMLElement | null;\n if (target?.closest(\"a, button, [data-no-snapshot]\")) {\n return;\n }\n\n const el = sectionRef.current;\n if (!el) return;\n const rect = el.getBoundingClientRect();\n const relX = e.clientX - rect.left;\n const relY = e.clientY - rect.top;\n const pctX = Math.min(Math.max((relX / rect.width) * 100, 2), 98);\n const pctY = Math.min(Math.max((relY / rect.height) * 100, 2), 98);\n\n sunPosRef.current = {\n x: pctX,\n y: pctY,\n clientX: relX,\n clientY: relY,\n };\n\n if (sunOrbRef.current) {\n sunOrbRef.current.style.transform = `translate3d(${relX}px, ${relY}px, 0)`;\n }\n if (ambientGlowRef.current) {\n ambientGlowRef.current.style.background = `radial-gradient(600px circle at ${relX}px ${relY}px, rgba(251, 191, 36, 0.16), rgba(249, 115, 22, 0.05) 45%, transparent 75%)`;\n }\n },\n []\n );\n\n // Click anywhere in the hero section to capture a live screenshot at the current sun position\n const handleSectionClick = useCallback(\n (e: React.MouseEvent) => {\n // Do not trigger snapshot if user clicked inside an interactive button or link\n const target = e.target as HTMLElement | null;\n if (target?.closest(\"a, button, [data-no-snapshot]\")) {\n return;\n }\n\n const el = sectionRef.current;\n let pctX = sunPosRef.current.x;\n let pctY = sunPosRef.current.y;\n let isCompact = false;\n\n if (el) {\n const rect = el.getBoundingClientRect();\n const relX = e.clientX - rect.left;\n const relY = e.clientY - rect.top;\n pctX = Math.min(Math.max((relX / rect.width) * 100, 5), 95);\n pctY = Math.min(Math.max((relY / rect.height) * 100, 6), 94);\n isCompact = rect.width < 640;\n }\n\n shotCounterRef.current += 1;\n const num = shotCounterRef.current;\n const id = `shot-${Date.now()}-${num}`;\n const idx = (num - 1) % POLAROID_ROTATIONS.length;\n\n const newShot: SolarSnapshotItem = {\n id,\n shotNumber: num,\n sunX: Math.round(pctX * 10) / 10,\n sunY: Math.round(pctY * 10) / 10,\n timestamp: formatCurrentTime(),\n rotation: POLAROID_ROTATIONS[idx],\n offsetX: POLAROID_OFFSETS_X[idx],\n offsetY: POLAROID_OFFSETS_Y[idx],\n isCompact,\n createdAt: Date.now(),\n };\n\n // Trigger camera shutter flash\n setShutterFlash(true);\n setTimeout(() => setShutterFlash(false), 140);\n\n setSnapshots((prev) => [...prev.slice(-(maxSnapshots - 1)), newShot]);\n\n // Schedule individual 10-second auto-removal for THIS snapshot\n const timer = setTimeout(() => {\n setSnapshots((current) => current.filter((item) => item.id !== id));\n timersRef.current.delete(id);\n }, snapshotDurationMs);\n\n timersRef.current.set(id, timer);\n },\n [maxSnapshots, snapshotDurationMs]\n );\n\n const resolvedAvatars: StackAvatar[] = React.useMemo(\n () =>\n avatars.map((a, index) =>\n typeof a === \"string\"\n ? {\n src: a,\n alt: `Creator ${index + 1}`,\n name: `Creator ${index + 1}`,\n }\n : a\n ),\n [avatars]\n );\n\n const customStyle: React.CSSProperties = {\n ...accentTokens(accent || color),\n ...style,\n };\n\n return (\n {\n sectionRef.current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) (ref as any).current = node;\n }}\n onPointerEnter={() => setCursorActive(true)}\n onPointerLeave={() => setCursorActive(false)}\n onPointerMove={handlePointerMove}\n onClick={handleSectionClick}\n style={customStyle}\n className={cn(\n \"relative w-full min-h-[680px] sm:min-h-[740px] lg:min-h-[780px] overflow-hidden bg-background text-foreground select-none cursor-crosshair flex items-center justify-center py-20 sm:py-24\",\n className\n )}\n {...props}\n >\n \n\n {/* ═════════════════════════════════════════\n 1. RADIAL DOT-MATRIX & SOLAR ATMOSPHERE BACKDROP\n ═════════════════════════════════════════ */}\n
\n {/* Full-section radial dot pattern visible subtly across both small & large screens */}\n
\n\n {/* Soft ambient aura */}\n
\n\n {/* Dynamic pointer-following ambient sun illumination */}\n \n
\n\n {/* Camera Shutter Flash Overlay on Click */}\n \n\n {/* ═════════════════════════════════════════\n 2. RADIANT SUN CURSOR ORB WITH LENS FLARE RAYS (z-10: TRAVELS BEHIND TEXT, AVATARS & BUTTONS)\n ═════════════════════════════════════════ */}\n \n \n
\n\n {/* ═════════════════════════════════════════\n 3. VERTICALLY & HORIZONTALLY CENTERED HERO CONTENT\n (EQUAL TOP & BOTTOM GAP)\n ═════════════════════════════════════════ */}\n
\n
\n {/* Top Unified Social Proof Capsule (Avatars only on small screens, full capsule on large screens) */}\n {resolvedAvatars.length > 0 && (\n \n \n {resolvedAvatars.map((avatar, index) => (\n \n \n \n {(avatar.name ?? avatar.alt ?? \"U\").slice(0, 2)}\n \n \n {avatar.name ?? avatar.alt}\n \n \n ))}\n \n\n \n\n
\n
\n {Array.from({ length: rating }).map((_, idx) => (\n \n ))}\n
\n {trustText && (\n \n {trustText}\n \n )}\n
\n
\n )}\n\n {/* Distinctive Geometric Frame Headline */}\n \n {title}\n {titleAccent && (\n \n {/* Precision Corner Frame Ticks */}\n \n \n \n \n \n {titleAccent}\n \n \n )}\n \n\n {/* Framed Editorial Callout Description */}\n {description && (\n
\n

\n {description}\n

\n
\n )}\n\n {/* CTA Buttons from the Last Preview of Button Component */}\n \n {primaryActionLabel && (\n \n \n {primaryActionLabel}\n \n \n )}\n\n {secondaryActionLabel && (\n \n \n {secondaryActionLabel}\n \n \n )}\n
\n
\n \n\n {/* ═════════════════════════════════════════\n 4. BOTTOM-RIGHT POLAROID SNAPSHOT STACK\n (ULTRA-SOFT SHADOW, STACKS IN BOTTOM-RIGHT, CLEARS AFTER 10S)\n ═════════════════════════════════════════ */}\n
\n {snapshots.map((shot, idx) => (\n \n ))}\n
\n \n );\n }\n);\n\nSolarSnapshotHero.displayName = \"SolarSnapshotHero\";\n\nexport default SolarSnapshotHero;\n", "type": "registry:component", "target": "components/custom/blocks/SolarSnapshotHeroBlock.tsx" }, { "path": "src/lib/accent.ts", "content": "import type { CSSProperties } from \"react\";\n\n/**\n * Bridging the docs colour picker into a preview.\n *\n * Most blocks are already written against the `--primary` token (`bg-primary`,\n * `ring-primary/30`, `text-primary-foreground`…). Rather than teaching each one a\n * bespoke `color` prop, a demo can repoint that token for its own subtree and\n * every one of those classes follows along.\n */\n\n/** The swatches the picker offers, as concrete CSS colours. */\nconst PRESET_HEX: Record = {\n lavender: \"#9b8afb\",\n indigo: \"#6366f1\",\n rose: \"#f43f5e\",\n emerald: \"#10b981\",\n zinc: \"#18181b\",\n};\n\n/** True when the picker sits on \"Default\" — the page theme should win. */\nexport function isDefaultAccent(color?: string): boolean {\n return !color || color === \"primary\" || color === \"default\";\n}\n\n/**\n * Turns a picker value into a CSS colour, or null for \"Default\" — meaning\n * nothing should be overridden, so the theme (and the sidebar customizer)\n * keeps control.\n */\nexport function resolveAccent(color?: string): string | null {\n if (isDefaultAccent(color)) return null;\n return PRESET_HEX[color as string] ?? (color as string);\n}\n\n/**\n * The picker value in a form every block accepts. Blocks know the older swatch\n * names but not \"lavender\" — and since that is also a CSS named colour\n * (#e6e6fa), a block that passes unknown names straight through would paint\n * the wrong shade, while others fall back to a different palette. Demos that\n * hand the picker value to such a block run it through this first. Every\n * other value is returned untouched.\n */\nexport function toBlockColor(color: string): string;\nexport function toBlockColor(color: string | undefined): string | undefined;\nexport function toBlockColor(color?: string): string | undefined {\n return color === \"lavender\" ? PRESET_HEX.lavender : color;\n}\n\nfunction parseHex(input: string): [number, number, number] | null {\n const hex = input.trim().replace(/^#/, \"\");\n if (/^[a-f\\d]{3}$/i.test(hex)) {\n const [r, g, b] = hex.split(\"\");\n return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16)];\n }\n if (/^[a-f\\d]{6}$/i.test(hex)) {\n return [\n parseInt(hex.slice(0, 2), 16),\n parseInt(hex.slice(2, 4), 16),\n parseInt(hex.slice(4, 6), 16),\n ];\n }\n return null;\n}\n\n/** Legible foreground for content sitting on a filled `color` swatch. */\nexport function accentForeground(color: string): string {\n const rgb = parseHex(color);\n if (!rgb) return \"#ffffff\";\n const channel = (v: number) => {\n const c = v / 255;\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n };\n const luminance =\n 0.2126 * channel(rgb[0]) +\n 0.7152 * channel(rgb[1]) +\n 0.0722 * channel(rgb[2]);\n return luminance > 0.45 ? \"#09090b\" : \"#ffffff\";\n}\n\n/** The theme tokens a picked accent repoints, as `--name` → value. */\nexport function accentTokens(color?: string): Record {\n const resolved = resolveAccent(color);\n if (!resolved) return {};\n return {\n \"--primary\": resolved,\n \"--primary-foreground\": accentForeground(resolved),\n \"--ring\": resolved,\n };\n}\n\n/**\n * Inline style repointing `--primary` at the picked accent for one subtree.\n * `--primary-foreground` is derived alongside it, otherwise a light pick leaves\n * `text-primary-foreground` content unreadable on its own fill. Returns `{}` on\n * \"Default\" so the page theme still wins.\n */\nexport function accentStyle(color?: string): CSSProperties {\n return accentTokens(color) as CSSProperties;\n}\n", "type": "registry:component", "target": "lib/accent.ts" } ], "docs": "Named exports: SolarSnapshotHero (default), DEFAULT_SOLAR_AVATARS, SolarSnapshotItem, and SolarSnapshotHeroProps.", "categories": [ "marketing", "layout", "media" ], "type": "registry:component" }