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:T9da9,"use client"; import * as React from "react"; const beamDuration = 2.35; const beamRepeatDelay = 1.2; const SEGMENTS = 20; const SEGMENT_SPACING = 0.008; type BeamLineProps = { id: string; d: string; delay: number; colorClass: string; }; function BeamLine({ id, d, delay, colorClass }: 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 ( ); })} ); } function processSvg(svg: string, prefix: string) { return svg .replace(/id="([^"]+)"/g, `id="${prefix}-$1"`) .replace(/url$#([^)]+)$/g, `url(#${prefix}-$1)`) .replace(/class="s(\d+)"/g, 'class="bento4s$1"') .replace(/\.s(\d+)/g, ".bento4s$1") .replace( new RegExp(`id="${prefix}-bento4line16"`, "g"), `id="${prefix}-bento4line6"` ) .replaceAll("#181818", "#0a0a0a") .replaceAll("#121212", "#171717") .replaceAll("#282828", "#262626") .replaceAll("#f8f8f8", "#fafafa"); } const RAW_SVG = String.raw` `; const beamLines = [ { id: "beam-line1", delay: 0, colorClass: "fill-chart-1", d: "m238.74 379.26h-102.27c-3.21 0-6.28-1.28-8.55-3.54l-23.14-23.14c-2.26-2.27-5.34-3.54-8.54-3.54h-76.59", }, { id: "beam-line2", delay: 0.55, colorClass: "fill-chart-2", d: "m1.51 414.01h72.91c3.15 0 6.17-1.23 8.43-3.43l22.42-21.85c2.26-2.2 5.29-3.43 8.44-3.43h125.03", }, { id: "beam-line3", delay: 1.1, colorClass: "fill-chart-3", d: "m1.51 420.05h141.06c3.5 0 6.83-1.51 9.13-4.16l17.7-20.38c2.29-2.65 5.62-4.16 9.12-4.16h60.22", }, { id: "beam-line4", delay: 1.65, colorClass: "fill-chart-4", d: "m750.97 349.79h-141.06c-3.5 0-6.83 1.52-9.12 4.17l-17.7 20.38c-2.3 2.64-5.63 4.16-9.13 4.16h-60.22", }, { id: "beam-line5", delay: 2.2, colorClass: "fill-chart-5", d: "m750.97 355.84h-72.9c-3.15 0-6.18 1.23-8.44 3.43l-22.42 21.85c-2.26 2.2-5.29 3.43-8.44 3.43h-125.03", }, { id: "beam-line6", delay: 2.75, colorClass: "fill-chart-1", d: "m513.74 390.59h102.27c3.21 0 6.28 1.27 8.55 3.54l23.14 23.14c2.27 2.27 5.34 3.54 8.55 3.54h76.59", }, ] as const; export function Bento4Tile1() { const reactId = React.useId().replace(/:/g, ""); const prefix = `bento4-${reactId}`; const processedSvg = React.useMemo(() => { return processSvg(RAW_SVG, prefix); }, [prefix]); return (

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

\n \n

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

Bento Tile Bento4 Tile 1 Intelligent Data Analysis

Installation

Files

components

Styles