4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T2c4c,"use client"; import { animate, motion, useInView, useMotionValue } from "framer-motion"; import { useEffect, useMemo, useRef, useState } from "react"; interface CountUpProps { to: number; duration?: number; prefix?: string; suffix?: string; } function CountUp({ to, duration = 1.2, prefix = "", suffix = "", }: CountUpProps) { const count = useMotionValue(0); const [display, setDisplay] = useState(0); useEffect(() => { const controls = animate(count, to, { duration, ease: "easeOut", onUpdate: (latest) => { setDisplay(latest); }, }); return () => controls.stop(); }, [count, duration, to]); return ( {prefix} {Math.round(display)} {suffix} ); } const inactiveFill = "color-mix(in oklab, var(--chart-1) 25%, transparent)"; const activeFill = "var(--chart-1)"; const staticRingBefore = [ "m444.12 194.72c4.19-0.74 8.2 2.06 8.74 6.27 0.54 4.22-2.64 7.93-6.88 8.27l-42.24 3.4c-2.8 0.23-5.25-1.87-5.6-4.66-0.36-2.79 1.48-5.43 4.25-5.92z", "m437.1 168.52c4-1.45 8.43 0.6 9.69 4.66 1.27 4.06-1.22 8.27-5.33 9.34l-41.01 10.68c-2.72 0.71-5.49-0.93-6.33-3.61-0.84-2.69 0.51-5.61 3.16-6.57z", "m425.64 143.94c3.68-2.13 8.4-0.87 10.35 2.91 1.95 3.77 0.24 8.35-3.63 10.12l-38.53 17.64c-2.56 1.17-5.57 0.04-6.86-2.46-1.29-2.5-0.47-5.62 1.97-7.02z", "m410.08 121.72c3.26-2.73 8.13-2.32 10.7 1.06 2.58 3.39 1.68 8.19-1.82 10.6l-34.88 24.07c-2.31 1.59-5.48 1-7.18-1.23-1.71-2.24-1.44-5.45 0.72-7.26z", "m390.9 102.54c2.73-3.25 7.6-3.69 10.72-0.81 3.13 2.88 3.08 7.77 0.06 10.75l-30.18 29.76c-2 1.97-5.22 1.94-7.29 0.03-2.07-1.9-2.36-5.11-0.55-7.27z", "m368.68 86.98c2.13-3.68 6.84-4.95 10.42-2.66 3.58 2.3 4.38 7.12 1.92 10.58l-24.55 34.55c-1.63 2.29-4.8 2.82-7.17 1.3-2.37-1.52-3.21-4.63-1.81-7.07z", "m344.1 75.52c1.45-3.99 5.88-6.07 9.8-4.43 3.92 1.64 5.55 6.25 3.72 10.09l-18.17 38.28c-1.21 2.54-4.25 3.61-6.84 2.53-2.6-1.09-3.97-4-3-6.65z", "m317.9 68.5c0.74-4.18 4.73-7 8.88-6.06 4.15 0.93 6.55 5.19 5.42 9.28l-11.25 40.86c-0.75 2.71-3.55 4.29-6.3 3.67-2.74-0.61-4.6-3.25-4.11-6.02z", "m290.88 66.14c0-4.25 3.45-7.72 7.69-7.52 4.25 0.2 7.35 3.98 6.95 8.21l-3.98 42.19c-0.27 2.8-2.76 4.84-5.57 4.71-2.81-0.13-5.09-2.4-5.09-5.22z", "m263.86 68.5c-0.74-4.18 2.05-8.2 6.27-8.74 4.22-0.54 7.93 2.64 8.27 6.88l3.4 42.24c0.22 2.8-1.87 5.25-4.66 5.6-2.79 0.36-5.44-1.48-5.92-4.25z", "m237.66 75.52c-1.45-3.99 0.6-8.43 4.66-9.69 4.06-1.27 8.26 1.22 9.34 5.33l10.68 41.01c0.71 2.72-0.93 5.49-3.62 6.33-2.68 0.84-5.6-0.51-6.57-3.16z", "m213.08 86.98c-2.13-3.68-0.88-8.4 2.9-10.35 3.78-1.95 8.35-0.23 10.12 3.63l17.64 38.53c1.17 2.56 0.04 5.57-2.46 6.86-2.5 1.29-5.61 0.47-7.02-1.97z", "m190.86 102.54c-2.74-3.25-2.32-8.12 1.06-10.7 3.38-2.57 8.18-1.68 10.6 1.82l24.06 34.88c1.6 2.32 1.01 5.48-1.23 7.18-2.24 1.71-5.45 1.44-7.25-0.72z", ] as const; const staticRingAfter = "m446.49 221.74c4.25 0 7.71 3.45 7.51 7.69-0.2 4.25-3.97 7.36-8.2 6.96l-42.19-3.99c-2.81-0.27-4.85-2.75-4.72-5.56 0.13-2.81 2.4-5.1 5.22-5.1z"; type BeamLineProps = { id: string; d: string; delay: number; }; const beamDuration = 2.35; const beamRepeatDelay = 1.2; const SEGMENTS = 20; const SEGMENT_SPACING = 0.008; function BeamLine({ id, d, delay }: BeamLineProps) { const motionId = `${id}-motion-0`; const begin = `${delay}s; ${motionId}.end+${beamRepeatDelay}s`; return ( <> {Array.from({ length: SEGMENTS }).map((_, i) => { const t = i / (SEGMENTS - 1); const opacity = Math.pow(t, 2.2); const segDelay = SEGMENT_SPACING * (SEGMENTS - 1 - i); const segMotionId = `${id}-motion-${i}`; const segBegin = i === 0 ? begin : `${delay + segDelay}s; ${motionId}.end+${beamRepeatDelay + segDelay}s`; return ( ); })} ); } const activeParts = [ { id: "countup-part-1", d: "m137.64 248.76c-4.19 0.74-8.2-2.05-8.74-6.27-0.54-4.21 2.64-7.93 6.87-8.27l42.24-3.4c2.81-0.22 5.25 1.87 5.61 4.66 0.36 2.79-1.48 5.44-4.25 5.93z", }, { id: "countup-part-2", d: "m135.27 221.74c-4.25 0-7.71-3.44-7.51-7.69 0.2-4.25 3.97-7.35 8.2-6.95l42.19 3.99c2.8 0.26 4.85 2.75 4.72 5.56-0.14 2.81-2.41 5.09-5.22 5.09z", }, { id: "countup-part-3", d: "m137.64 194.72c-4.19-0.74-7-4.73-6.07-8.88 0.94-4.14 5.19-6.55 9.29-5.42l40.86 11.25c2.71 0.75 4.29 3.55 3.67 6.3-0.62 2.75-3.25 4.6-6.02 4.11z", }, { id: "countup-part-4", d: "m144.66 168.52c-4-1.45-6.07-5.88-4.43-9.8 1.64-3.92 6.24-5.54 10.08-3.72l38.29 18.18c2.54 1.2 3.61 4.24 2.52 6.83-1.08 2.6-4 3.97-6.64 3.01z", }, { id: "countup-part-5", d: "m156.12 143.94c-3.68-2.13-4.96-6.84-2.66-10.42 2.29-3.58 7.12-4.38 10.58-1.92l34.54 24.55c2.3 1.63 2.82 4.81 1.3 7.17-1.52 2.37-4.62 3.21-7.06 1.81z", }, { id: "countup-part-6", d: "m171.68 121.72c-3.26-2.73-3.7-7.6-0.81-10.72 2.88-3.12 7.76-3.08 10.75-0.05l29.75 30.17c1.98 2 1.95 5.22 0.04 7.29-1.91 2.07-5.11 2.36-7.27 0.55z", }, ]; type RingSegment = { id: string; d: string; }; // Progress fills clockwise from the left arc (bottom-left → up → over top → right). const ringSegmentsInFillOrder: RingSegment[] = [ ...activeParts.map((part) => ({ id: part.id, d: part.d, })), ...[...staticRingBefore].reverse().map((d, index) => ({ id: `ring-static-${index}`, d, })), { id: "ring-static-after", d: staticRingAfter, }, ]; export function Bento3Tile1() { const containerRef = useRef(null); const isInView = useInView(containerRef, { once: true, amount: 0.15 }); const percentage = 30; const filledSegments = useMemo( () => Math.max(1, Math.round((percentage / 100) * ringSegmentsInFillOrder.length)), [percentage], ); return (

Accessibility rate

); }4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","framer-motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://shadcnblocks.com/r/bento-tile-bento-tile-countup-1.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/bento-tile-bento-tile-countup-1","itemId":"@shadcnblocks/bento-tile-bento-tile-countup-1"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"example/bento-tile/bento-tile-countup-1.tsx","content":"\"use client\";\n\nimport { Bento3Tile1 } from \"@/components/shadcnblocks/bento-tile/bento3-tile1\";\n\nexport const title = \"Count-up gauge tile\";\n\nconst Example = () => (\n

\n \n

\n);\n\nexport default Example;\n","type":"registry:block"},{"path":"components/shadcnblocks/bento-tile/bento3-tile1.tsx","content":"$51","type":"registry:component","target":""}]}]]}],"$L52"]}]

Bento Tile Countup 1 Count Up Gauge Tile

Installation

Files

components

Styles