51: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"] 52: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"] 53:Ta9eb,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { animate, motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue, } from "motion/react"; import { cn } from "@/lib/utils"; export const MASCOT_SHAPES = [ "devsloka", "circle", "square", "clover", "flower", "star", "sun", "hexagon", "triangle", "diamond", "pill", "bean", "heart", "cloud", "blob", "ghost", "orb", "bot", "strawberry", "mango", ] as const; export const MASCOT_STATES = ["idle", "working", "sleeping"] as const; export const MASCOT_SHADINGS = ["fabric", "plastic", "crepe", "smooth", "flat", "glass"] as const; export const MASCOT_HATS = ["none", "party", "beanie", "wizard", "tophat"] as const; export const MASCOT_GLASSES = ["none", "round", "square", "sunglasses"] as const; export type MascotShape = (typeof MASCOT_SHAPES)[number]; export type MascotState = (typeof MASCOT_STATES)[number]; export type MascotShading = (typeof MASCOT_SHADINGS)[number]; export type MascotHat = (typeof MASCOT_HATS)[number]; export type MascotGlasses = (typeof MASCOT_GLASSES)[number]; export type FuzzyMascotProps = Omit, "children"> & { shape?: MascotShape; /** Body colour. Defaults to a colour picked for the shape. */ color?: string; state?: MascotState; shading?: MascotShading; hat?: MascotHat; glasses?: MascotGlasses; /** 0 (cropped) to 10 (shaggy). Only affects the fabric shading. */ furLength?: number; /** Rendered size in px. */ size?: number; /** Follow the pointer anywhere on the page with the eyes. */ trackPointer?: boolean; /** Accessible name. Pass "" to mark the mascot decorative. */ label?: string; /** Click (or Enter/Space) makes the mascot hop and spin. */ spinOnClick?: boolean; }; // ─── Geometry ──────────────────────────────────────────────────────────────── // Every shape is a list of points in a 200×200 box. Points (not hand-drawn // paths) let us find the top of the head for hats and keep curves smooth. type Point = [number, number]; const TAU = Math.PI * 2; const SAMPLES = 160; // A closed curve from a radius function, starting at the top and going clockwise. const polar = (radius: (angle: number) => number, stretchX = 1, stretchY = 1): Point[] => Array.from({ length: SAMPLES }, (_, i) => { const angle = (i / SAMPLES) * TAU - Math.PI / 2; const r = radius(angle); return [Math.cos(angle) * r * stretchX, Math.sin(angle) * r * stretchY]; }); const superellipse = (a: number, b: number, exponent: number): Point[] => Array.from({ length: SAMPLES }, (_, i) => { const t = (i / SAMPLES) * TAU; const c = Math.cos(t); const s = Math.sin(t); return [ a * Math.sign(c) * Math.abs(c) ** (2 / exponent), b * Math.sign(s) * Math.abs(s) ** (2 / exponent), ]; }); const polygon = (sides: number, rotation = 0, stretchY = 1): Point[] => Array.from({ length: sides }, (_, i) => { const angle = rotation + (i / sides) * TAU - Math.PI / 2; return [Math.cos(angle), Math.sin(angle) * stretchY]; }); // Chaikin corner cutting: each pass rounds corners a little more. const smooth = (points: Point[], passes: number): Point[] => { let result = points; for (let pass = 0; pass < passes; pass++) { result = result.flatMap((point, i) => { const next = result[(i + 1) % result.length]; return [ [point[0] * 0.75 + next[0] * 0.25, point[1] * 0.75 + next[1] * 0.25], [point[0] * 0.25 + next[0] * 0.75, point[1] * 0.25 + next[1] * 0.75], ] as Point[]; }); } return result; }; // The Devsloka logo's silhouette: straight left edge, round right side, cut bottom-left corner. // Wide shoulders tapering to a soft point, like a strawberry. const strawberry = (): Point[] => smooth( Array.from({ length: SAMPLES }, (_, i) => { const angle = (i / SAMPLES) * TAU - Math.PI / 2; const y = Math.sin(angle); const down = (y + 1) / 2; // 0 at the top, 1 at the bottom return [Math.cos(angle) * (1 - 0.55 * down ** 2.2), y < 0 ? y * 0.82 : y * 1.08] as Point; }), 1 ); // A plump, tilted oval with a gentle dent on one side, like a mango. const mango = (): Point[] => { const tilt = -0.42; return polar( (a) => 1 + 0.1 * Math.sin(a) - 0.07 * Math.exp(-((angleGap(a, Math.PI) / 0.55) ** 2)), 0.86, 1 ).map(([x, y]): Point => [x * Math.cos(tilt) - y * Math.sin(tilt), x * Math.sin(tilt) + y * Math.cos(tilt)]); }; const devsloka = (): Point[] => { const points: Point[] = [[-1, 0.66], [-1, -1], [0, -1]]; for (let i = 1; i < 48; i++) { const angle = -Math.PI / 2 + (i / 48) * Math.PI; points.push([Math.cos(angle), Math.sin(angle)]); } points.push([0, 1], [-0.66, 1]); return smooth(points, 3); }; const ghost = (): Point[] => { const points: Point[] = []; for (let i = 0; i <= 60; i++) { const angle = Math.PI + (i / 60) * Math.PI; // head: left → top → right points.push([Math.cos(angle), Math.sin(angle)]); } for (let i = 1; i <= 12; i++) points.push([1, (i / 12) * 1.05]); // right side for (let i = 1; i < 72; i++) { const x = 1 - (i / 72) * 2; // skirt: three hanging scallops points.push([x, 1.05 + 0.16 * Math.abs(Math.sin(1.5 * Math.PI * (x + 1)))]); } for (let i = 0; i < 12; i++) points.push([-1, 1.05 - (i / 12) * 1.05]); // left side return points; }; const heart = (): Point[] => Array.from({ length: SAMPLES }, (_, i) => { const t = (i / SAMPLES) * TAU; return [ 16 * Math.sin(t) ** 3, -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)), ]; }); // How far an angle sits from a target, wrapped to −π…π. const angleGap = (a: number, b: number) => Math.atan2(Math.sin(a - b), Math.cos(a - b)); type ShapeDefinition = { points: () => Point[]; color: string; /** Moves the face up (−) or down (+) as a share of the body height. */ faceY?: number; /** Signature characters keep their own material, whatever shading is picked. */ material?: "glass" | "ink"; /** A single big eye (centre and radius in the shape's own units), like the Devsloka logo's ring. */ eye?: { x: number; y: number; r: number }; /** Fruit details: skin markings inside the body and a crown on top. */ fruit?: "strawberry" | "mango"; }; const SHAPES: Record = { circle: { points: () => polar(() => 1), color: "#F5A524" }, square: { points: () => superellipse(1, 1, 5), color: "#E46BD1" }, clover: { points: () => polar((a) => 0.8 + 0.2 * Math.abs(Math.cos(2 * (a + Math.PI / 4)))), color: "#3FA7F0" }, flower: { points: () => polar((a) => 0.78 + 0.22 * Math.abs(Math.cos(2.5 * (a + Math.PI / 2)))), color: "#4CC764" }, star: { points: () => polar((a) => 0.56 + 0.44 * ((Math.cos(5 * (a + Math.PI / 2)) + 1) / 2) ** 1.4), color: "#FFC93C", }, sun: { points: () => polar((a) => 0.9 + 0.1 * Math.cos(10 * (a + Math.PI / 2))), color: "#FF8A3D" }, hexagon: { points: () => smooth(polygon(6, Math.PI / 6), 4), color: "#8B7CF6" }, triangle: { points: () => smooth(polygon(3), 5), color: "#2EC4B6", faceY: 0.12 }, diamond: { points: () => smooth(polygon(4, 0, 1.2), 4), color: "#5BC0EB" }, pill: { points: () => superellipse(1.35, 0.82, 2.6), color: "#F25F5C" }, bean: { points: () => polar((a) => 1 - 0.24 * Math.exp(-((angleGap(a, 0) / 0.55) ** 2)), 1.18, 0.95), color: "#9BC53D", }, heart: { points: heart, color: "#FF5C8A", faceY: -0.04 }, cloud: { points: () => polar((a) => 0.84 + 0.18 * ((1 - Math.sin(a)) / 2) * Math.abs(Math.cos(3 * (a + Math.PI / 2))), 1.3, 1), color: "#C9D6F2", }, blob: { points: () => polar((a) => 0.9 + 0.07 * Math.sin(2 * a + 0.5) + 0.05 * Math.sin(3 * a + 1.7) + 0.03 * Math.sin(5 * a + 0.3)), color: "#0A6EFF", }, ghost: { points: ghost, color: "#ECEAF4", faceY: -0.12 }, orb: { points: () => polar(() => 1), color: "#5B4BFF", faceY: -0.08, material: "glass" }, bot: { points: () => polar(() => 1), color: "#111111", faceY: 0, material: "ink" }, devsloka: { points: devsloka, color: "#0A6EFF", eye: { x: -0.06, y: 0.1, r: 0.74 } }, strawberry: { points: strawberry, color: "#F2394B", faceY: -0.08, fruit: "strawberry" }, mango: { points: mango, color: "#FFB627", faceY: -0.02, fruit: "mango" }, }; const BOX = { cx: 100, cy: 110, size: 136 }; type Geometry = { path: string; cx: number; top: number; faceY: number; bottom: number; width: number; bounds: { minX: number; maxX: number; minY: number; maxY: number }; eye?: { x: number; y: number; r: number }; fruit?: "strawberry" | "mango"; }; function buildGeometry(shape: MascotShape): Geometry { const definition = SHAPES[shape]; const raw = definition.points(); const xs = raw.map((p) => p[0]); const ys = raw.map((p) => p[1]); const minX = Math.min(...xs); const maxX = Math.max(...xs); const minY = Math.min(...ys); const maxY = Math.max(...ys); const scale = BOX.size / Math.max(maxX - minX, maxY - minY); // Rounded to one decimal so server and browser produce the same path string. const round = (value: number) => Math.round(value * 10) / 10; const points = raw.map(([x, y]): Point => [ round(BOX.cx + (x - (minX + maxX) / 2) * scale), round(BOX.cy + (y - (minY + maxY) / 2) * scale), ]); const height = (maxY - minY) * scale; const top = Math.min(...points.filter(([x]) => Math.abs(x - BOX.cx) < 12).map(([, y]) => y)); return { path: `M${points.map(([x, y]) => `${x} ${y}`).join("L")}Z`, cx: BOX.cx, top, faceY: BOX.cy + (definition.faceY ?? -0.04) * height, bottom: BOX.cy + height / 2, width: (maxX - minX) * scale, bounds: { minX: Math.min(...points.map(([x]) => x)), maxX: Math.max(...points.map(([x]) => x)), minY: Math.min(...points.map(([, y]) => y)), maxY: Math.max(...points.map(([, y]) => y)), }, fruit: definition.fruit, eye: definition.eye && { x: round(BOX.cx + (definition.eye.x - (minX + maxX) / 2) * scale), y: round(BOX.cy + (definition.eye.y - (minY + maxY) / 2) * scale), r: round(definition.eye.r * scale), }, }; } // ─── Component ─────────────────────────────────────────────────────────────── const EYE_GAP = 19; const EYE_LOOK = 7; // how far pupils travel, in viewBox units const KEYFRAMES = ` @keyframes mascot-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.975) translateY(2%); } } @keyframes mascot-snooze { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, 0.96) translateY(3%); } } @keyframes mascot-bob { from { transform: translateY(0); } to { transform: translateY(-4%); } } @keyframes mascot-z { 0% { opacity: 0; transform: translate(0, 0) scale(0.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -24px) scale(1.1); } } @keyframes mascot-orbit { to { transform: rotate(360deg); } } `; export function FuzzyMascot({ shape = "blob", color, state = "idle", shading = "fabric", hat = "none", glasses = "none", furLength = 5, size = 160, trackPointer = true, label, spinOnClick = true, className, style, ...props }: FuzzyMascotProps) { const rootRef = useRef(null); const reduceMotion = !!useReducedMotion(); // useId returns characters that break url(#id) references in some browsers. const id = useId().replace(/[^a-zA-Z0-9_-]/g, ""); const geometry = useMemo(() => buildGeometry(shape), [shape]); const fill = color ?? SHAPES[shape].color; const seed = MASCOT_SHAPES.indexOf(shape) + 1; const fur = Math.max(0, Math.min(10, furLength)); const asleep = state === "sleeping"; const material: MascotShading | "ink" = SHAPES[shape].material ?? shading; // Eye direction and body lean, smoothed with springs. Motion values, so pointer // moves never re-render React. const lookX = useMotionValue(0); const lookY = useMotionValue(0); const lean = useMotionValue(0); const springConfig = reduceMotion ? { stiffness: 1000, damping: 100 } : { stiffness: 220, damping: 20 }; const eyeX = useSpring(lookX, springConfig); const eyeY = useSpring(lookY, springConfig); const bodyLean = useSpring(lean, springConfig); const eyesTransform = useMotionTemplate`translate(${eyeX}px, ${eyeY}px)`; // The single big eye has room to look further, so its pupil travels twice as far. const bigPupilX = useTransform(eyeX, (v) => v * 2); const bigPupilY = useTransform(eyeY, (v) => v * 2); const bigPupilTransform = useMotionTemplate`translate(${bigPupilX}px, ${bigPupilY}px)`; const leanTransform = useMotionTemplate`rotate(${bodyLean}deg)`; const blink = useMotionValue(1); const blinkTransform = useMotionTemplate`scaleY(${blink})`; // Bot: the whole visor turns toward the pointer, and the eyes drift a little within it. const visorX = useTransform(eyeX, (v) => v * 2.4); const visorY = useTransform(eyeY, (v) => v * 1.6); const visorTransform = useMotionTemplate`translate(${visorX}px, ${visorY}px)`; const pupilX = useTransform(eyeX, (v) => v * 0.5); const pupilY = useTransform(eyeY, (v) => v * 0.4); const pupilTransform = useMotionTemplate`translate(${pupilX}px, ${pupilY}px)`; const antennaLean = useTransform(bodyLean, (v) => v * 3); const antennaTransform = useMotionTemplate`rotate(${antennaLean}deg)`; // Click to spin: a crouch, a hop with a full turn, then a squishy landing. const hopY = useMotionValue(0); const spin = useMotionValue(0); const squashX = useMotionValue(1); const squashY = useMotionValue(1); const hopTransform = useMotionTemplate`translateY(${hopY}px) rotate(${spin}deg)`; const squashTransform = useMotionTemplate`scale(${squashX}, ${squashY})`; const spinning = useRef(false); const [cheering, setCheering] = useState(false); const [burst, setBurst] = useState(0); const celebrate = () => { if (spinning.current) return; spinning.current = true; setCheering(true); if (reduceMotion) { // No hop or turn: a small happy pulse. animate(squashX, [1, 1.06, 1], { duration: 0.3 }); animate(squashY, [1, 1.06, 1], { duration: 0.3 }).then(() => { spinning.current = false; setCheering(false); }); return; } setBurst((n) => n + 1); const duration = 1; const times = [0, 0.14, 0.6, 0.74, 0.88, 1]; const rise = [0.2, 0.8, 0.4, 1] as const; // decelerates up const fall = [0.6, 0, 0.8, 0.3] as const; // speeds up down, like gravity animate(hopY, [0, 0, -size * 0.26, 0, -size * 0.04, 0], { duration, times, ease: ["linear", rise, fall, rise, [0.4, 0, 0.6, 1]], }); animate(squashX, [1, 1.14, 0.9, 1.16, 0.96, 1], { duration, times }); animate(squashY, [1, 0.84, 1.1, 0.86, 1.04, 1], { duration, times }); animate(spin, [0, -10, 360, 360, 360, 360], { duration, times, ease: ["easeOut", [0.3, 0, 0.2, 1], "linear", "linear", "linear"], }).then(() => { spin.jump(0); spinning.current = false; setCheering(false); }); }; useEffect(() => { if (asleep) { lookX.set(0); lookY.set(0); lean.set(0); return; } if (state === "working") { // Heads-down: eyes on the "screen" in front, ignoring the pointer. lookX.set(-2); lookY.set(EYE_LOOK * 0.7); lean.set(0); return; } if (!trackPointer) return; let frame = 0; let pointer: { x: number; y: number } | null = null; const update = () => { frame = 0; const root = rootRef.current; if (!root || !pointer) return; const box = root.getBoundingClientRect(); const dx = pointer.x - (box.left + box.width / 2); const dy = pointer.y - (box.top + box.height / 2); const distance = Math.hypot(dx, dy) || 1; // Full deflection from ~250px away; close in, the eyes move proportionally. const reach = Math.min(1, distance / 250) * EYE_LOOK; lookX.set((dx / distance) * reach); lookY.set((dy / distance) * reach); lean.set(Math.max(-1, Math.min(1, dx / 600)) * 4); }; const handleMove = (event: PointerEvent) => { pointer = { x: event.clientX, y: event.clientY }; if (!frame) frame = requestAnimationFrame(update); }; const handleLeave = (event: PointerEvent) => { if (event.relatedTarget) return; pointer = null; lookX.set(0); lookY.set(0); lean.set(0); }; window.addEventListener("pointermove", handleMove); document.addEventListener("pointerout", handleLeave); return () => { cancelAnimationFrame(frame); window.removeEventListener("pointermove", handleMove); document.removeEventListener("pointerout", handleLeave); }; }, [asleep, state, trackPointer, lookX, lookY, lean]); // Blink every few seconds while awake. useEffect(() => { if (asleep || reduceMotion) return; let timer: ReturnType; const schedule = () => { timer = setTimeout(() => { animate(blink, [1, 0.1, 1], { duration: 0.2, times: [0, 0.45, 1] }); schedule(); }, 2500 + Math.random() * 3500); }; schedule(); return () => clearTimeout(timer); }, [asleep, reduceMotion, blink]); const eyeColor = material === "glass" ? "white" : "#1d1b2e"; const leftEye = geometry.cx - EYE_GAP; const rightEye = geometry.cx + EYE_GAP; const eyeY0 = geometry.faceY; return (

{ if (event.key === "Enter" || event.key === " ") { event.preventDefault(); celebrate(); } } : undefined } style={{ width: size, height: size, ...style }} className={cn( "relative inline-block shrink-0 select-none", spinOnClick && "cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[#0A6EFF] focus-visible:ring-offset-4 focus-visible:ring-offset-transparent", className )} {...props} > {burst > 0 && }

{/* Body layer: filters and shading. It never changes while the eyes move. */} {geometry.fruit && hat === "none" && } {/* Face layer: eyes, glasses and state effects, repainted on its own. */}

); } // ─── Body & shading ────────────────────────────────────────────────────────── function BodyDefs({ id, geometry, fur, seed }: { id: string; geometry: Geometry; fur: number; seed: number }) { return ( {/* Volume: a soft top-left light and a bottom-right shade make the flat shape read as plump. */} {/* Fabric: noise pushes edge pixels outward into fibres; the length sets how far. */} {/* Fine fibre grain laid over the fabric body. */} {/* Crêpe: stretched noise, lit from the top-left, multiplied into the body. */} ); } function Body({ id, geometry, fill, shading, fur, }: { id: string; geometry: Geometry; fill: string; shading: MascotShading | "ink"; fur: number; }) { const skin = geometry.fruit ? : null; const shape = ( {skin} ); const volume = ( ); switch (shading) { case "flat": return shape; case "ink": // A faint rim: invisible on light backgrounds, enough to outline the head on dark ones. return ( {shape} ); case "glass": return ( {/* Light spilling onto the floor beneath a glowing glass body. */} {skin} {/* A soft bright rim, as light catches the edge of the glass. */} ); case "smooth": return ( {shape} {volume} ); case "plastic": return ( {shape} {volume} {/* A broad soft sheen plus a sharp hot spot: the two marks of a glossy surface. */} ); case "crepe": return ( {shape} {volume} ); case "fabric": default: return ( 0 ? `url(#${id}-fur)` : undefined}> {shape} {volume} ); } } // ─── Fruit ─────────────────────────────────────────────────────────────────── // Markings on the fruit's skin, drawn inside the body so the shading (and fur) covers them. function FruitSkin({ id, geometry }: { id: string; geometry: Geometry }) { const { bounds, cx, faceY } = geometry; if (geometry.fruit === "mango") { return ( ); } // Strawberry seeds on a staggered grid, leaving the face clear. const seeds: Point[] = []; for (let row = 0, y = bounds.minY + 24; y < bounds.maxY - 8; row++, y += 14) { for (let x = bounds.minX + (row % 2 ? 14 : 7); x < bounds.maxX; x += 14) { if (Math.abs(x - cx) < 34 && Math.abs(y - faceY) < 22) continue; seeds.push([x, y]); } } return ( {seeds.map(([x, y]) => ( ))} ); } // The leafy crown of a strawberry, or a mango's stem and leaf. function FruitCrown({ kind, x, y }: { kind: "strawberry" | "mango"; x: number; y: number }) { if (kind === "mango") { return ( ); } // Leaves splay out over the shoulders from a short stem. const leaves = [150, 175, 212, 328, 5, 30]; return ( {leaves.map((deg) => { const radians = (deg * Math.PI) / 180; return ( ); })} ); } // ─── Faces ─────────────────────────────────────────────────────────────────── // The Devsloka logo come alive: its white ring is the eye, the dark centre is the pupil. function CyclopsEye({ eye, state, cheering, glasses, pupilTransform, blinkTransform, }: { eye: { x: number; y: number; r: number }; state: MascotState; cheering: boolean; glasses: MascotGlasses; pupilTransform: MotionValue; blinkTransform: MotionValue; }) { const { x, y, r } = eye; const pupil = r * 0.64; const ink = "#0B1530"; const monocle = glasses === "none" ? null : glasses === "sunglasses" ? ( ) : ( // One eye, so glasses become a monocle on a little chain. ); if (cheering || state === "sleeping") { // Happy ^ while celebrating; a closed lid while asleep. const d = cheering ? `M${x - r * 0.62} ${y + r * 0.22} q${r * 0.62} ${-r * 0.95} ${r * 1.24} 0` : `M${x - r * 0.62} ${y} q${r * 0.62} ${r * 0.55} ${r * 1.24} 0`; return ( {monocle} ); } return ( {/* The logo's pupil: a round centre with a small tail at the bottom right. */} {monocle} ); } function Eyes({ left, right, y, state, cheering, color, pill, }: { left: number; right: number; y: number; state: MascotState; cheering: boolean; color: string; pill: boolean; }) { // Happy ^ ^ while celebrating; closed arcs while asleep. if (cheering || state === "sleeping") { const arc = cheering ? "q9.5 -11 19 0" : "q9.5 8 19 0"; return ( ); } return ( {[left, right].map((x) => pill ? ( ) : ( ) )} ); } function BotFace({ id, geometry, state, cheering, showAntenna, visorTransform, pupilTransform, blinkTransform, antennaTransform, }: { id: string; geometry: Geometry; state: MascotState; cheering: boolean; showAntenna: boolean; visorTransform: MotionValue; pupilTransform: MotionValue; blinkTransform: MotionValue; antennaTransform: MotionValue; }) { const { cx, faceY: y, top } = geometry; const ink = "#111111"; const eyes = [cx - 38, cx - 10]; return ( {showAntenna && ( )} {/* The visor slides toward the pointer and is clipped by the round head. */} {cheering || state === "sleeping" ? ( {eyes.map((x) => ( ))} ) : ( {eyes.map((x) => ( ))} )} {/* A little cheek line, like a smile seen side-on. */} ); } // A small burst of sparkles when the mascot is clicked. Re-mounted per click. function Sparkles({ color, size }: { color: string; size: number }) { const sparks = [-150, -115, -80, -45, -10, 25]; return (

{sparks.map((deg, i) => { const radians = (deg * Math.PI) / 180; const distance = size * (0.42 + (i % 2) * 0.12); return ( ); })}

); } // ─── Accessories ───────────────────────────────────────────────────────────── function Hat({ kind, x, y }: { kind: MascotHat; x: number; y: number }) { if (kind === "none") return null; // Hats sit on the top of the head with a jaunty tilt. const place = `translate(${x + 4} ${y + 6}) rotate(-10)`; switch (kind) { case "party": return ( ); case "beanie": return ( ); case "wizard": return ( ); case "tophat": return ( ); } } function Glasses({ kind, left, right, y }: { kind: MascotGlasses; left: number; right: number; y: number }) { if (kind === "none") return null; const stroke = { stroke: "#1d1b2e", strokeWidth: 3.2, strokeLinecap: "round" as const }; const bridge = ; switch (kind) { case "round": return ( {bridge} ); case "square": return ( {bridge} ); case "sunglasses": return ( {bridge} ); } } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/ui/fuzzy-mascot.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]