50: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"] 51: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"] 52: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"] 53:T12a2,"use client"; import { animate, motion } from "framer-motion"; import { useEffect, useRef } from "react"; const ARCS = [ "M39.2988 65.5331C63.86 60.3869 122.666 55.428 161.403 76.7611", "M37.959 65.001C72.983 40.9725 127.017 25.5341 202.103 38.8672", "M282.356 81.5885C248.321 45.994 228.048 40.9032 203.508 40.2695", "M279.997 80.9713C254.032 52.901 183.156 57.5633 167.016 76.0588", "M279.245 81.4336C241.407 78.1653 214.739 92.2003 200.004 112.551", "M202.807 39.5693C184.562 43.7798 172.632 55.0078 166.316 75.3584", "M101.055 131.498C91.9045 96.3163 73.386 71.2923 36.4941 65.5342", "M101.756 130.795C104.563 121.671 116.493 93.6022 166.317 78.5605", "M200.7 113.252C197.139 104.78 190.909 89.1415 164.209 76.7607", "M199.295 111.848C182.569 108.385 146.48 93.5245 102.455 130.867", "M350.877 151.147C346.578 118.944 317.895 84.4801 282.105 81.793", "M350.874 151.147C341.401 133.114 258.509 108.148 199.297 112.31", "M350.875 151.147C341.644 100.267 321.401 36.0595 203.508 40.27", ]; const CITIES = [ [39, 66], [161, 77], [202, 39], [282, 82], [200, 113], [101, 131], [351, 151], ]; export function Bento54Tile5() { const pathsRef = useRef<(SVGPathElement | null)[]>([]); const dotsRef = useRef<(SVGCircleElement | null)[]>([]); useEffect(() => { const controls = ARCS.map((_, i) => { const path = pathsRef.current[i]; const dot = dotsRef.current[i]; if (!path || !dot) return null; const len = path.getTotalLength(); return animate(0, 1, { duration: 2.6, repeat: Infinity, ease: "easeInOut", delay: i * 0.25, onUpdate: (p) => { const pt = path.getPointAtLength(p * len); dot.setAttribute("cx", `${pt.x}`); dot.setAttribute("cy", `${pt.y}`); dot.style.opacity = `${Math.sin(p * Math.PI)}`; }, }); }); return () => controls.forEach((c) => c?.stop()); }, []); return (

Optimise expense
Management as a team

Bring harmony to team expenses with budget limits and real-time monitiring. Freedom for your staff. Peace of mind for you.

Explore more

); } 4c:["$","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"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcnblocks.com/r/bento-tile-bento54-tile5.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/bento-tile-bento54-tile5","itemId":"@shadcnblocks/bento-tile-bento54-tile5"}],["$","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"}],["$","$L52",null,{"files":[{"path":"example/bento-tile/bento54-tile5.tsx","content":"\"use client\";\n\nimport { Bento54Tile5 } from \"@/components/shadcnblocks/bento-tile/bento54-tile5\";\n\nexport const title = \"Bento 54 tile 5\";\n\nconst Example = () => (\n

\n \n

\n);\n\nexport default Example;\n","type":"registry:block"},{"path":"components/shadcnblocks/bento-tile/bento54-tile5.tsx","content":"$53","type":"registry:component","target":""}]}]]}],"$L54"]}]

Optimise expense Management as a team

Optimise expense
Management as a team

Bento Tile Bento54 Tile 5 Enterprise Finance Bento With Timeline Tile 5

Installation

Files

components

Styles