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:T2bdf,"use client"; import { useEffect, useRef } from "react"; import { animate, motion, useInView, useReducedMotion, type Variants } from "motion/react"; import { Atom, Braces, Component, Sparkles, Wind } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; export type MissionStat = { /** Copy above the number. */ text: React.ReactNode; value: number; decimals?: number; prefix?: string; suffix?: string; label: React.ReactNode; }; export type MissionBentoProps = Omit, "title"> & { eyebrow?: React.ReactNode; /** The quiet first line of the heading. */ lead?: React.ReactNode; /** The bold second line of the heading. */ title?: React.ReactNode; description?: React.ReactNode; /** Small pill above the first stat, e.g. a row of logos and a caption. */ badge?: React.ReactNode; /** Status pill under the second stat. */ status?: React.ReactNode; stats?: [MissionStat, MissionStat]; highlight?: MissionStat; /** Any CSS color for the eyebrow and status accents. */ accent?: string; }; const TOOLS = [ { name: "React", icon: Atom }, { name: "TypeScript", icon: Braces }, { name: "Tailwind CSS", icon: Wind }, { name: "Motion", icon: Sparkles }, { name: "Radix UI", icon: Component }, ]; const DEFAULT_STATS: [MissionStat, MissionStat] = [ { text: "Every component ships fully typed, with props you can read at a glance", value: 100, suffix: "%", label: "TypeScript coverage", }, { text: "Animations tuned for the compositor: transform and opacity only", value: 60, suffix: "fps", label: "Target frame rate", }, ]; const DEFAULT_HIGHLIGHT: MissionStat = { text: "Animated components, blocks and backgrounds, ready to drop into any React project", value: 90, suffix: "+", label: ( <> Ready to install
with the shadcn CLI ), }; // Tiles rise in one after another; reduced motion fades them without moving. const tileVariants: Variants = { hidden: (reduce: boolean) => ({ opacity: 0, transform: reduce ? "none" : "translateY(12px)" }), shown: (reduce: boolean) => ({ opacity: 1, transform: reduce ? "none" : "translateY(0px)", transition: { duration: 0.5, ease: EASE_OUT }, }), }; export function MissionBento({ eyebrow = "Mission", lead = "Our focus is simple", title = "Interfaces that move", description = "Copy a component, own the source and ship something that feels alive.", badge = , status = "Free to use", stats = DEFAULT_STATS, highlight = DEFAULT_HIGHLIGHT, accent = "#0A6EFF", className, style, ...props }: MissionBentoProps) { const ref = useRef(null); const inView = useInView(ref, { once: true, amount: 0.3 }); const reduceMotion = !!useReducedMotion(); const tile = { variants: tileVariants, custom: reduceMotion }; return (

{eyebrow}

{lead} {title}

{description}

{/* Container queries: the bento layout follows the component's width. In two columns the small pills share a short first row, so they never stretch beside a tall stat. */} {badge} {status}

{highlight.text}

{highlight.label}

); } const cardClass = "rounded-2xl border border-black/5 bg-white/70 shadow-[0_1px_2px_rgb(0_0_0/0.04)]"; // A heading line that rises from behind its own mask. function RevealLine({ children, show, reduce, delay = 0, className, }: { children: React.ReactNode; show: boolean; reduce: boolean; delay?: number; className?: string; }) { return ( {children} ); } function StatBody({ stat, show, reduce }: { stat: MissionStat; show: boolean; reduce: boolean }) { return ( <>

{stat.text}

{stat.label}

); } // Counts from zero once in view, writing to the DOM so it never re-renders React. // The server renders the final value, so it reads correctly without JavaScript. function CountUp({ stat, show, reduce }: { stat: MissionStat; show: boolean; reduce: boolean }) { const numberRef = useRef(null); const { value, decimals = 0, prefix = "", suffix = "" } = stat; useEffect(() => { const node = numberRef.current; if (!show || reduce || !node) return; const controls = animate(0, value, { duration: 1.4, ease: EASE_OUT, onUpdate: (latest) => { node.textContent = latest.toFixed(decimals); }, }); return () => controls.stop(); }, [show, reduce, value, decimals]); return ( <> {prefix} {value.toFixed(decimals)} {suffix && {suffix}} ); } // A rising line with an arrowhead that draws itself in behind the dark tile's content. function TrendArrow({ show, reduce }: { show: boolean; reduce: boolean }) { const drawn = reduce || show; return ( ); } // Overlapping icons of the stack, popping in one after another. function ToolStack() { return (

{TOOLS.map(({ name, icon: Icon }) => ( {name} ))}

5 core tools

); } 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","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"}]]}]}],["$","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/mission-bento.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]