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:T135d,"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 Bento44Tile1() { 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 (

Mobile

Optimized Layouts

Crafted to adapt beautifully across screen sizes—fluid, responsive, and consistent wherever you go.

); } 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-bento44-tile1.json","proxyUrl":"https://shadcnregistry.com/r/shadcnblocks/bento-tile-bento44-tile1","itemId":"@shadcnblocks/bento-tile-bento44-tile1"}],["$","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/bento44-tile1.tsx","content":"\"use client\";\n\nimport { Bento44Tile1 } from \"@/components/shadcnblocks/bento-tile/bento44-tile1\";\n\nexport const title = \"Bento 44 tile 1\";\n\nconst Example = () => (\n

\n \n

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

Bento Tile Bento44 Tile 1 Mobile Collaboration Bento With World Map Tile 1

Installation

Files

components

Styles