50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T6b21,"use client" import * as React from "react" import { Github } from "lucide-react" import { AnimatePresence, motion, useReducedMotion, type Transition, } from "motion/react" import { cn } from "@/lib/utils" /* ============================================================================= * GitHubSky — Motoko UI * * A dark glass card with an interactive night sky. One real star hides among * hundreds of dim twinkles. Discovering it reveals a calm star-on-GitHub CTA. * ============================================================================= */ export interface GitHubSkyProps extends Omit< React.ComponentPropsWithoutRef<"div">, "children" > { /** Repository URL opened when the user stars. */ href: string /** Main headline shown after discovering the real star. */ headline?: string /** Supporting line under the headline. */ description?: string /** Label for the primary CTA. */ buttonLabel?: string /** Quiet prompt shown before the real star is found. */ hint?: string /** Number of background stars (clamped to 150–300). */ starCount?: number /** Seed for deterministic star placement. */ seed?: number /** Skip the discovery sequence and show content immediately. */ initiallyRevealed?: boolean /** Called when the star CTA is activated (before navigation). */ onStar?: () => void /** Open the link in a new tab. Defaults to true. */ openInNewTab?: boolean } type StarData = { id: number x: number y: number size: number baseOpacity: number twinkleSpeed: number twinklePhase: number isReal: boolean } type Phase = "idle" | "near" | "discovered" | "starring" | "done" type FlightState = { fromX: number fromY: number toX: number toY: number } type PointerState = { x: number y: number inside: boolean } type RippleState = { active: boolean t: number x: number y: number } type CardSize = { width: number height: number } type StarField = { stars: StarData[] realStar: StarData } const STAR_COUNT_MIN = 150 const STAR_COUNT_MAX = 300 const STAR_COUNT_DEFAULT = 220 const NEAR_RADIUS = 0.14 const HOVER_RADIUS = 0.028 const PARALLAX_RADIUS = 0.22 const PARALLAX_STRENGTH = 3.5 const NEAR_DIM_RADIUS = 0.2 const RIPPLE_DURATION = 1.4 const FLIGHT_MS = 1000 const EASE_OUT: Transition = { duration: 0.7, ease: [0.16, 1, 0.3, 1], } const CONTENT_EASE: Transition = { duration: 0.85, ease: [0.16, 1, 0.3, 1], } const STAR_FLIGHT: Transition = { duration: 0.95, ease: [0.22, 1, 0.36, 1], } function clamp(n: number, min: number, max: number): number { return Math.min(max, Math.max(min, n)) } function mulberry32(seed: number): () => number { let t = seed >>> 0 return () => { t += 0x6d2b79f5 let r = Math.imul(t ^ (t >>> 15), 1 | t) r ^= r + Math.imul(r ^ (r >>> 7), 61 | r) return ((r ^ (r >>> 14)) >>> 0) / 4294967296 } } function generateStars(count: number, seed: number): StarField { const rand = mulberry32(seed) const stars: StarData[] = [] const realIndex = Math.floor(rand() * count) let realStar: StarData | undefined for (let i = 0; i < count; i++) { const isReal = i === realIndex // Keep the real star away from edges so discovery feels natural. const margin = isReal ? 0.18 : 0.04 const star: StarData = { id: i, x: margin + rand() * (1 - margin * 2), y: margin + rand() * (1 - margin * 2), size: isReal ? 3.2 + rand() * 0.5 : 0.7 + rand() * 1.4, baseOpacity: isReal ? 0.55 + rand() * 0.15 : 0.15 + rand() * 0.45, twinkleSpeed: 0.35 + rand() * 1.1, twinklePhase: rand() * Math.PI * 2, isReal, } stars.push(star) if (isReal) realStar = star } if (!realStar) { throw new Error("GitHubSky: failed to place the real star") } return { stars, realStar } } function isRevealedPhase(phase: Phase): boolean { return phase === "discovered" || phase === "starring" || phase === "done" } function openHref(href: string, openInNewTab: boolean): void { if (openInNewTab) { window.open(href, "_blank", "noopener,noreferrer") return } window.location.assign(href) } function GitHubSky({ href, headline = "Every project starts with one star.", description = "Maybe this one belongs to you.", buttonLabel = "⭐ Star on GitHub", hint = "Find the one real star.", starCount = STAR_COUNT_DEFAULT, seed = 42, initiallyRevealed = false, onStar, openInNewTab = true, className, style, ...props }: GitHubSkyProps) { const reduceMotion = useReducedMotion() const count = clamp(Math.round(starCount), STAR_COUNT_MIN, STAR_COUNT_MAX) const { stars, realStar } = React.useMemo( () => generateStars(count, seed), [count, seed] ) const cardRef = React.useRef(null) const atmosphereRef = React.useRef(null) const skyRef = React.useRef(null) const starElsRef = React.useRef<(HTMLSpanElement | null)[]>([]) const realStarRef = React.useRef(null) const realCoreRef = React.useRef(null) const realBloomRef = React.useRef(null) const githubIconRef = React.useRef(null) const pointerRef = React.useRef({ x: -1, y: -1, inside: false, }) const rippleRef = React.useRef({ active: false, t: 0, x: 0, y: 0, }) const cardSizeRef = React.useRef({ width: 1, height: 1 }) const phaseRef = React.useRef("idle") const nearAmountRef = React.useRef(0) const skyDimRef = React.useRef(0) const flightTimeoutRef = React.useRef | null>( null ) const hrefRef = React.useRef(href) const onStarRef = React.useRef(onStar) const openInNewTabRef = React.useRef(openInNewTab) const [phase, setPhase] = React.useState(() => initiallyRevealed || reduceMotion ? "discovered" : "idle" ) const [flight, setFlight] = React.useState(null) hrefRef.current = href onStarRef.current = onStar openInNewTabRef.current = openInNewTab React.useEffect(() => { phaseRef.current = phase }, [phase]) React.useEffect(() => { if (reduceMotion && (phase === "idle" || phase === "near")) { setPhase("discovered") } }, [reduceMotion, phase]) React.useEffect(() => { return () => { if (flightTimeoutRef.current !== null) { clearTimeout(flightTimeoutRef.current) } } }, []) // Cache card metrics so the rAF loop never calls getBoundingClientRect. React.useEffect(() => { const card = cardRef.current if (!card) return const updateSize = () => { const rect = card.getBoundingClientRect() cardSizeRef.current = { width: rect.width || 1, height: rect.height || 1, } } updateSize() const observer = new ResizeObserver(updateSize) observer.observe(card) return () => observer.disconnect() }, []) const setPhaseSafe = React.useCallback((next: Phase) => { if (phaseRef.current === next) return phaseRef.current = next setPhase(next) }, []) // Direct-DOM star updates — keeps 200+ nodes off the React render path. React.useEffect(() => { if (reduceMotion) return let raf = 0 let last = performance.now() let cancelled = false const tick = (now: number) => { if (cancelled) return const dt = Math.min(0.05, (now - last) / 1000) last = now const { width: w, height: h } = cardSizeRef.current const ptr = pointerRef.current const px = ptr.inside ? ptr.x / w : -1 const py = ptr.inside ? ptr.y / h : -1 const currentPhase = phaseRef.current const discovered = isRevealedPhase(currentPhase) const rx = realStar.x const ry = realStar.y let distToReal = 1 if (ptr.inside) { const dx = px - rx const dy = py - ry distToReal = Math.sqrt(dx * dx + dy * dy) } const nearT = ptr.inside ? clamp(1 - distToReal / NEAR_RADIUS, 0, 1) : 0 nearAmountRef.current += (nearT - nearAmountRef.current) * 0.08 if (!discovered && ptr.inside) { if (distToReal < HOVER_RADIUS) { setPhaseSafe("discovered") rippleRef.current = { active: true, t: 0, x: rx, y: ry } skyDimRef.current = 1 } else if (nearT > 0.35 && currentPhase === "idle") { setPhaseSafe("near") } else if (nearT < 0.15 && currentPhase === "near") { setPhaseSafe("idle") } } if (rippleRef.current.active) { rippleRef.current.t += dt if (rippleRef.current.t > RIPPLE_DURATION) { rippleRef.current.active = false } } if (skyDimRef.current > 0) { skyDimRef.current = Math.max(0, skyDimRef.current - dt * 0.45) } const dim = skyDimRef.current if (atmosphereRef.current) { atmosphereRef.current.style.opacity = String(1 - dim * 0.35) } if (skyRef.current) { skyRef.current.style.opacity = String(1 - dim * 0.28) } // Continuously ramp the real star glow as the cursor approaches. if (!discovered && realCoreRef.current && realBloomRef.current) { const glow = nearAmountRef.current const scale = 1 + glow * 0.15 realCoreRef.current.style.transform = `scale(${scale})` realCoreRef.current.style.opacity = String(0.55 + glow * 0.45) realBloomRef.current.style.opacity = String(glow * 0.55) realBloomRef.current.style.transform = `scale(${0.6 + glow * 0.5})` } const nearAmt = nearAmountRef.current const time = now / 1000 const els = starElsRef.current for (let i = 0; i < stars.length; i++) { const star = stars[i] if (!star || star.isReal) continue const el = els[i] if (!el) continue const twinkle = 0.55 + 0.45 * Math.sin(time * star.twinkleSpeed * Math.PI * 2 + star.twinklePhase) let opacity = star.baseOpacity * twinkle let tx = 0 let ty = 0 let scale = 1 if (ptr.inside) { const dx = star.x - px const dy = star.y - py const dist = Math.sqrt(dx * dx + dy * dy) const influence = clamp(1 - dist / PARALLAX_RADIUS, 0, 1) if (dist > 0.001) { const parallax = influence * PARALLAX_STRENGTH tx = (dx / dist) * parallax ty = (dy / dist) * parallax } opacity *= 1 + influence * 0.55 scale = 1 + influence * 0.12 if (nearAmt > 0) { const toReal = Math.hypot(star.x - rx, star.y - ry) if (toReal < NEAR_DIM_RADIUS) { opacity *= 1 - nearAmt * 0.55 * (1 - toReal / NEAR_DIM_RADIUS) } } } if (rippleRef.current.active) { const rt = rippleRef.current.t const radius = rt * 0.55 const toRipple = Math.hypot( star.x - rippleRef.current.x, star.y - rippleRef.current.y ) const ring = Math.abs(toRipple - radius) if (ring < 0.04) { opacity *= 1 + (1 - ring / 0.04) * 0.9 * (1 - rt / RIPPLE_DURATION) } else if (toRipple < radius) { opacity *= 0.75 + 0.25 * (rt / RIPPLE_DURATION) } } if (discovered) { opacity *= 0.72 } el.style.opacity = String(clamp(opacity, 0.04, 1)) el.style.transform = `translate3d(calc(-50% + ${tx}px), calc(-50% + ${ty}px), 0) scale(${scale})` } raf = requestAnimationFrame(tick) } raf = requestAnimationFrame(tick) return () => { cancelled = true cancelAnimationFrame(raf) } }, [stars, realStar, reduceMotion, setPhaseSafe]) const onPointerMove = React.useCallback( (e: React.PointerEvent) => { const card = cardRef.current if (!card) return const rect = card.getBoundingClientRect() // Keep size in sync with pointer sampling (covers transform/scroll cases). cardSizeRef.current = { width: rect.width || 1, height: rect.height || 1, } pointerRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top, inside: true, } }, [] ) const onPointerLeave = React.useCallback(() => { pointerRef.current = { x: -1, y: -1, inside: false } }, []) const revealFromKeyboard = React.useCallback(() => { if (phaseRef.current === "idle" || phaseRef.current === "near") { setPhaseSafe("discovered") rippleRef.current = { active: !reduceMotion, t: 0, x: realStar.x, y: realStar.y, } if (!reduceMotion) skyDimRef.current = 1 } }, [realStar.x, realStar.y, reduceMotion, setPhaseSafe]) const handleStarClick = React.useCallback( (e: React.MouseEvent) => { e.preventDefault() if (phaseRef.current === "starring" || phaseRef.current === "done") return onStarRef.current?.() const navigate = () => { openHref(hrefRef.current, openInNewTabRef.current) } if (reduceMotion) { setPhaseSafe("done") navigate() return } const realEl = realStarRef.current const iconEl = githubIconRef.current const card = cardRef.current if (!realEl || !iconEl || !card) { setPhaseSafe("done") navigate() return } const cardRect = card.getBoundingClientRect() const from = realEl.getBoundingClientRect() const to = iconEl.getBoundingClientRect() setFlight({ fromX: from.left + from.width / 2 - cardRect.left, fromY: from.top + from.height / 2 - cardRect.top, toX: to.left + to.width / 2 - cardRect.left, toY: to.top + to.height / 2 - cardRect.top, }) setPhaseSafe("starring") if (flightTimeoutRef.current !== null) { clearTimeout(flightTimeoutRef.current) } flightTimeoutRef.current = setTimeout(() => { flightTimeoutRef.current = null setPhaseSafe("done") setFlight(null) navigate() }, FLIGHT_MS) }, [reduceMotion, setPhaseSafe] ) const showContent = isRevealedPhase(phase) const hideRealStar = phase === "starring" || phase === "done" || flight !== null return (

{/* Atmosphere */}

{/* Star field */}

{stars.map((star, i) => { if (star.isReal) return null return ( { starElsRef.current[i] = el }} className="absolute rounded-full bg-white will-change-transform" style={{ left: `${star.x * 100}%`, top: `${star.y * 100}%`, width: star.size, height: star.size, opacity: reduceMotion ? star.baseOpacity : star.baseOpacity * 0.7, transform: "translate3d(-50%, -50%, 0)", boxShadow: star.size > 1.6 ? `0 0 ${star.size * 1.5}px rgba(255,255,255,0.25)` : undefined, }} /> ) })}

{/* Soft vignette */}

{/* Real star — focusable discovery target */} {!hideRealStar && ( )} {/* Flying star + trail */} {flight && ( )} {/* Content */}

{showContent && ( {headline} {description} {phase === "done" && ( )} {buttonLabel} )} {!showContent && ( {hint} )}

{/* Screen-reader always-available CTA */} Star this project on GitHub

) } GitHubSky.displayName = "GitHubSky" export { GitHubSky } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@motokoui","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/motokoui/github-sky.tsx","content":"$52","type":"registry:ui","target":"components/ui/github-sky.tsx"}],"className":"h-[70svh] min-h-80"}]]}]