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:T38c3,"use client"; import { cn } from "@/lib/utils"; import { type MotionStyle, motion, type TargetAndTransition, type Transition, useReducedMotion, useTransform, } from "motion/react"; import { type AIAmplitude, type AIState, getAIStateMotion, useAmplitudeValue, } from "../ai-core"; const SIZE_THRESHOLD_SMALL = 50; const SIZE_THRESHOLD_TINY = 30; const SIZE_THRESHOLD_MEDIUM = 100; const BLUR_MULTIPLIER_SMALL = 0.008; const BLUR_MIN_SMALL = 1; const BLUR_MULTIPLIER_LARGE = 0.015; const BLUR_MIN_LARGE = 4; const CONTRAST_MULTIPLIER_SMALL = 0.004; const CONTRAST_MIN_SMALL = 1.2; const CONTRAST_MULTIPLIER_LARGE = 0.008; const CONTRAST_MIN_LARGE = 1.5; const DOT_SIZE_MULTIPLIER_SMALL = 0.004; const DOT_SIZE_MIN_SMALL = 0.05; const DOT_SIZE_MULTIPLIER_LARGE = 0.008; const DOT_SIZE_MIN_LARGE = 0.1; const SHADOW_MULTIPLIER_SMALL = 0.004; const SHADOW_MIN_SMALL = 0.5; const SHADOW_MULTIPLIER_LARGE = 0.008; const SHADOW_MIN_LARGE = 2; const MASK_RADIUS_TINY = "0%"; const MASK_RADIUS_SMALL = "5%"; const MASK_RADIUS_MEDIUM = "15%"; const MASK_RADIUS_LARGE = "25%"; const CONTRAST_TINY = 1.1; const CONTRAST_MULTIPLIER_FINAL = 1.2; const CONTRAST_MIN_FINAL = 1.3; /** Loud audio tightens the gradient, which reads as the orb "focusing". */ const AMPLITUDE_BLUR_FALLOFF = 0.45; /** Amplitude adds at most 12% of extra size on top of the state scale. */ const AMPLITUDE_SCALE_GAIN = 0.12; /** Single lateral nudge used to signal `error`, well under 200ms. */ const ERROR_SHAKE_KEYFRAMES = [0, -3, 3, 0]; const ERROR_SHAKE_DURATION = 0.18; const EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const; const GLOW_BLUR_RATIO = 0.28; const GLOW_MAX_OPACITY = 0.7; /** Depth rim, as a fraction of the orb size. */ const RIM_RATIO = 0.06; const RIM_MIN = 1.5; /** Sheen drift period at rest, before the state speed divides it. */ const DRIFT_BASE_SECONDS = 12; /** `idle` breathes: a slow, shallow scale cycle that never draws attention. */ const BREATHE_SCALE = [1, 1.035, 1]; const BREATHE_SECONDS = 5.5; const SPRING_DEFAULT: Transition = { bounce: 0.1, duration: 0.25, type: "spring", }; export interface SiriOrbProps { /** * Live audio level, 0–1. Pass the `MotionValue` from `useAudioAmplitude` so * the signal never re-renders React. */ amplitude?: AIAmplitude; /** Ambient rotation period in seconds, before the state speed multiplier. */ animationDuration?: number; className?: string; colors?: { bg?: string; c1?: string; c2?: string; c3?: string; /** Fourth mesh stop. More stops means fewer visible repeats per rotation. */ c4?: string; }; size?: string; /** Shared AI state driving speed, scale, saturation and reactivity. */ state?: AIState; } const SiriOrb: React.FC = ({ size = "192px", className, colors, animationDuration = 20, amplitude, state = "idle", }) => { const shouldReduceMotion = useReducedMotion(); const amplitudeValue = useAmplitudeValue(amplitude); const stateMotion = getAIStateMotion(state); /** * Higher chroma than the original pastels. * * The first palette sat at chroma 0.12–0.15, which washes out once the mesh is * blurred and the dot pattern is overlaid on top. Pushing to ~0.2 and adding a * saturate() pass to the mesh is what makes the colour survive all that. */ const defaultColors = { bg: "oklch(92% 0.03 300)", c1: "oklch(68% 0.21 350)", // Pink c2: "oklch(70% 0.18 210)", // Blue c3: "oklch(66% 0.2 285)", // Violet c4: "oklch(72% 0.19 325)", // Magenta, the fourth stop for variety }; const finalColors = { ...defaultColors, ...colors }; // The bloom stays in the orb's own palette — see the note in ai-orb-aura. const glowColor = finalColors.c2; // Extract numeric value from size for calculations const sizeValue = Number.parseInt(size.replace("px", ""), 10); // Responsive calculations based on size const blurAmount = sizeValue < SIZE_THRESHOLD_SMALL ? Math.max(sizeValue * BLUR_MULTIPLIER_SMALL, BLUR_MIN_SMALL) // Reduced blur for small sizes : Math.max(sizeValue * BLUR_MULTIPLIER_LARGE, BLUR_MIN_LARGE); const contrastAmount = sizeValue < SIZE_THRESHOLD_SMALL ? Math.max(sizeValue * CONTRAST_MULTIPLIER_SMALL, CONTRAST_MIN_SMALL) // Reduced contrast for small sizes : Math.max(sizeValue * CONTRAST_MULTIPLIER_LARGE, CONTRAST_MIN_LARGE); const dotSize = sizeValue < SIZE_THRESHOLD_SMALL ? Math.max(sizeValue * DOT_SIZE_MULTIPLIER_SMALL, DOT_SIZE_MIN_SMALL) // Smaller dots for small sizes : Math.max(sizeValue * DOT_SIZE_MULTIPLIER_LARGE, DOT_SIZE_MIN_LARGE); const shadowSpread = sizeValue < SIZE_THRESHOLD_SMALL ? Math.max(sizeValue * SHADOW_MULTIPLIER_SMALL, SHADOW_MIN_SMALL) // Reduced shadow for small sizes : Math.max(sizeValue * SHADOW_MULTIPLIER_LARGE, SHADOW_MIN_LARGE); // Adjust mask radius based on size to reduce black center in small sizes const getMaskRadius = (value: number) => { if (value < SIZE_THRESHOLD_TINY) { return MASK_RADIUS_TINY; } if (value < SIZE_THRESHOLD_SMALL) { return MASK_RADIUS_SMALL; } if (value < SIZE_THRESHOLD_MEDIUM) { return MASK_RADIUS_MEDIUM; } return MASK_RADIUS_LARGE; }; const maskRadius = getMaskRadius(sizeValue); // Use more subtle contrast for very small sizes const getFinalContrast = (value: number) => { if (value < SIZE_THRESHOLD_TINY) { return CONTRAST_TINY; // Very subtle contrast for tiny sizes } if (value < SIZE_THRESHOLD_SMALL) { return Math.max( contrastAmount * CONTRAST_MULTIPLIER_FINAL, CONTRAST_MIN_FINAL ); // Reduced contrast for small sizes } return contrastAmount; }; const finalContrast = getFinalContrast(sizeValue); // Reactivity is gated by the state preset: `thinking` barely listens so the // orb keeps churning internally instead of throbbing with room noise. const reactivity = shouldReduceMotion ? 0 : stateMotion.reactivity; const reactiveBlur = useTransform(amplitudeValue, (level) => { const focus = 1 - level * reactivity * AMPLITUDE_BLUR_FALLOFF; return `${blurAmount * focus}px`; }); const reactiveScale = useTransform( amplitudeValue, (level) => stateMotion.scale + level * reactivity * AMPLITUDE_SCALE_GAIN ); const loopDuration = shouldReduceMotion ? animationDuration : animationDuration / stateMotion.speed; // Rim thickness scales with the orb, so the lit edge reads the same at 24px // and at 240px instead of swallowing the small one. const rim = Math.max(sizeValue * RIM_RATIO, RIM_MIN); // The sheen drifts slower than the mesh rotates; a busier state speeds it up // a touch without matching the rotation, which would look mechanical. const driftDuration = (DRIFT_BASE_SECONDS / (1 + stateMotion.speed)) * 2; const getRootAnimate = (): TargetAndTransition => { if (shouldReduceMotion) { return { scale: 1, x: 0 }; } if (state === "error") { return { scale: 1, x: ERROR_SHAKE_KEYFRAMES }; } if (stateMotion.motif === "breathe") { return { scale: BREATHE_SCALE, x: 0 }; } return { scale: 1, x: 0 }; }; const getRootTransition = (): Transition => { if (shouldReduceMotion) { return { duration: 0 }; } if (state === "error") { return { duration: ERROR_SHAKE_DURATION, ease: EASE_IN_OUT }; } if (stateMotion.motif === "breathe") { return { duration: BREATHE_SECONDS, ease: EASE_IN_OUT, repeat: Number.POSITIVE_INFINITY, }; } return SPRING_DEFAULT; }; return ( // The gradient disc clips its own overflow, so the bloom and the status // motif have to live in a wrapper rather than inside it. {/* Bloom tinted by the state's semantic accent. */} {/* Specular sheen and depth rim. The mesh alone reads as a flat blurred disc; a drifting highlight plus a lit top edge and shaded bottom are what make it read as a sphere. */} ); }; export default SiriOrb; 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"}]]}]}]]}],["$","$L50",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/ai-core.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"index.tsx","content":"$52","type":"registry:ui","target":"components/smoothui/siri-orb/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]