d2
componentbento-05source: ok · hit
Bento 05
A four-card studio bento on a masked dot field. Each card is a Figma gradient export carrying its own glass fill and 16px border; an ambilight sampled from the artwork blooms behind the grid as the section scrolls through, and the cards rise and brighten on the same switch. The bolt card lights its own grain with a radar ping, the AI card runs five out-of-phase sweeps down its stripes, and the globe card spins a cobe sphere with projected visitor chips. Below lg the section becomes a still picture — no ambilight, no ripple, no sphere — and the artwork is rasterised to a canvas once instead of re-running eighteen SVG blurs per paint; the globe card swaps the sphere for the stat deck it was carrying. Theme-aware and reduced-motion aware throughout.
npx shadcn add "https://ui.d2studio.dev/r/bento-05.json"free
Where it goes
statsbento-grid
Visual style
bentoglass-blurgradient
Interaction
animated-counter
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumanimationmotion
iconslucide-react
Files14 · source cached 10/8/2026, 1:42:18 PM
registry/default/components/bento-05.tsx
import CardArt1 from "./bento-05/card-art-1";
import CardArt2 from "./bento-05/card-art-2";
import CardArt3 from "./bento-05/card-art-3";
import CardArt4 from "./bento-05/card-art-4";
import CardGlow from "./bento-05/card-glow";
import Flat from "./bento-05/flat";
import Globe from "./bento-05/globe";
import Glow from "./bento-05/glow";
import LoadIn, { LoadInGroup } from "./bento-05/load-in";
import { GLYPH_16, GLYPH_16_AT, GLYPH_AI } from "./bento-05/glyphs";
import "./bento-05/bento-05.css";
// The cards are the Figma exports as-is: each SVG already paints its own glass
// fill and 16px gradient border, so a cell is just a clip + a covering SVG.
// Real shadows are four falloffs, not one: a tight contact line where the card
// meets the page, then progressively softer and more offset layers as the light
// wraps. A single big blur reads as a sticker.
const shadow = [
"shadow-[0_1px_1px_rgba(0,0,0,0.10),0_4px_8px_-2px_rgba(0,0,0,0.10),0_14px_28px_-8px_rgba(0,0,0,0.14),0_36px_64px_-20px_rgba(0,0,0,0.20)]",
"dark:shadow-[0_1px_1px_rgba(0,0,0,0.45),0_4px_8px_-2px_rgba(0,0,0,0.40),0_14px_28px_-8px_rgba(0,0,0,0.50),0_36px_64px_-20px_rgba(0,0,0,0.65)]",
].join(" ");
// 24px to match the Figma frame radius; the SVGs carry the same 24 on their own
// base rect, clip and border stroke, so the clip and the artwork agree.
//
// No content-visibility here. It was worth it when a card off screen was still
// running a ripple and a grain field; below lg none of that exists any more, and
// what is left — painting artwork that is not on screen — a browser skips on its
// own. What it did keep doing was hiding anything inside it from an
// IntersectionObserver, which is a blank card for the price of an optimisation
// that had nothing left to save.
const cell = `absolute inset-0 overflow-hidden rounded-3xl ${shadow}`;
const fill = {
className: "absolute inset-0 h-full w-full",
preserveAspectRatio: "xMidYMid slice",
} as const;
// The ambilight lives in glow.tsx — desktop-only, and its copy of the artwork is
// code-split so the phone never carries it.
// "16+"/"AI" repainted opaque over the export's glass, per the Figma frames:
// F7F7F7 -> DFDFDF -> C3C3C3 with a 2px #FAFAFA rim. The ramp runs to 1.25 of
// the glyph, not 1 — Figma's handle ends well below the baseline (y=210 on a
// 169-tall glyph), so the letters only ever reach the middle of it and bottom
// out at a light grey.
//
// The rim goes under the fill (paintOrder) because the AI path is a union of
// overlapping subpaths — the A's crossbar is a full rectangle buried in its
// legs — so a plain stroke outlines every internal seam and the letter comes
// apart. Painted first, the fill covers the seams and only the outer half of
// the stroke survives, so 4 draws a 2px rim.
//
// slice, like the card art, so it stays welded to the glyph the SVG underneath
// already drew once the card crops.
//
// One ramp for both glyphs. The AI card used to hold its ramp near-solid past
// the crossbar, to keep the A's counter from closing — but the copy block is
// ~45% of the card below sm and the glyph runs 25px into it, so the hold put
// the title on a near-white letter. Held or not the letters cross the copy;
// what makes the "16+" card read is that they are half gone by the time they
// get there. So the AI card gets the same ramp. The crossbar staying legible
// was the underlying export's problem anyway: its outside-stroke rimmed that
// internal seam, and it is the rim, not the fade, that drew a box in the
// counter. That rim is gone from card-art-2 now.
//
// That ramp is anchored to the glyph's own box, which is the right anchor from
// sm up and the wrong one below it: on the 3/2 mobile card the copy takes the
// bottom ~40% and the ramp is only half done by the time it gets there, so the
// letters run through the title at half strength — legible, but the title is
// sitting on them. Hence a second, card-relative fade below sm, finished before
// the copy starts. What is left under the text is the export's own glass glyph,
// which is what it is for.
function Glyph({
d,
id,
transform,
}: {
d: string;
id: string;
transform?: string;
}) {
const [y1, y2] = [0.35, 0.95];
return (
<svg
aria-hidden
viewBox="0 0 672 313"
preserveAspectRatio="xMidYMid slice"
className="pointer-events-none absolute inset-0 h-full w-full max-sm:[mask-image:linear-gradient(to_bottom,#000_22%,transparent_58%)]"
>
<defs>
<linearGradient id={id} x1={0} y1={0} x2={0} y2={1.25}>
<stop offset="0%" stopColor="#F7F7F7" />
<stop offset="50%" stopColor="#DFDFDF" />
<stop offset="100%" stopColor="#C3C3C3" />
</linearGradient>
{/* The letters dissolve into the card's dark bottom rather than
ending on an edge. A mask, not a darker fill, because the rim
has to go with them — and bbox units, so the same ramp fits
either glyph. The rect overhangs the box because the rim is
painted outside it, and anything the rect misses is masked
away: at 1x1 it shaves the rim off the top of every letter. */}
<linearGradient
id={`${id}-fade`}
gradientUnits="userSpaceOnUse"
x1={0}
y1={y1}
x2={0}
y2={y2}
>
<stop offset="0%" stopColor="#fff" />
<stop offset="100%" stopColor="#fff" stopOpacity={0} />
</linearGradient>
<mask id={`${id}-mask`} maskContentUnits="objectBoundingBox">
<rect
x={-0.2}
y={-0.2}
width={1.4}
height={1.4}
fill={`url(#${id}-fade)`}
/>
</mask>
</defs>
<path
d={d}
transform={transform}
fill={`url(#${id})`}
stroke="#FAFAFA"
strokeWidth={4}
paintOrder="stroke"
mask={`url(#${id}-mask)`}
/>
</svg>
);
}
// Copy sits on dark artwork in both themes, so it stays light; the scrim keeps
// it legible where the gradients bloom.
function CardCopy({
title,
sub,
className = "",
}: {
title: string;
sub: string;
className?: string;
}) {
return (
<div
className={`absolute inset-x-0 z-10 flex flex-col gap-1.5 p-5 sm:p-6 lg:p-7 ${className}`}
>
<h3 className="text-balance text-base font-semibold tracking-tight text-white sm:text-lg">
{title}
</h3>
<p className="max-w-[46ch] text-pretty text-xs leading-relaxed text-white/65 sm:text-sm">
{sub}
</p>
</div>
);
}
// The 48px pattern tile is just a 6px cell repeated 8×8: a diamond, a 1×3
// vertical dash and a 3×1 horizontal dash. Drawn as a mask (alpha only) so the
// ink follows the theme instead of shipping a light and a dark copy.
const patternUrl = `url("data:image/svg+xml,${encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="#000"><path d="M5 1h1v3H5z"/><path d="M1 5h3v1H1z"/><path d="M3 2H4V3H3V4H2V3H1V2H2V1H3V2Z"/></svg>',
)}")`;
// Clear over the content, solid past it.
const VIGNETTE =
"radial-gradient(ellipse 70% 60% at 50% 50%, transparent 25%, #000 90%)";
const scrimTop =
"pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-black/55 to-transparent";
const scrimBottom =
"pointer-events-none absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/55 to-transparent";
export default function Bento05() {
return (
// overflow-x-clip, not hidden: the glows sit 40px outside their cards and
// the section padding is only 20px at mobile, so they'd otherwise add a
// strip of horizontal scroll. clip doesn't make this a scroll container, so
// position: sticky anywhere inside still works.
<section className="relative flex w-full items-center justify-center overflow-x-clip bg-[#fafafa] px-5 py-12 sm:p-10 dark:bg-black">
<div
aria-hidden
className="pointer-events-none absolute inset-0 bg-[#1C1F21]/15 dark:bg-white/15"
style={{
maskImage: patternUrl,
WebkitMaskImage: patternUrl,
maskSize: "6px 6px",
WebkitMaskSize: "6px 6px",
}}
/>
{/* The pattern stays at full strength under the content; a page-coloured
scrim, held off the centre by a radial mask, sinks it to a whisper
everywhere else. */}
<div
aria-hidden
className="pointer-events-none absolute inset-0 bg-[#fafafa]/80 dark:bg-black/80"
style={{
maskImage: VIGNETTE,
WebkitMaskImage: VIGNETTE,
}}
/>
<div className="relative flex w-full flex-col items-center gap-10 sm:gap-14">
<header className="max-w-2xl text-center">
{/* pb-1: bg-clip-text paints only inside the padding box, so the
"g" descender needs a sliver of room or it gets sheared off. */}
<h2 className="bg-gradient-to-b from-[#18181B] to-[#71717A] bg-clip-text pb-1 text-3xl font-semibold tracking-tight text-balance text-transparent sm:text-4xl dark:from-[#F9FAFB] dark:to-[#949495]">
An AI-Native Studio, Engineered to Ship
</h2>
<p className="mt-3 text-pretty text-sm text-zinc-500 sm:text-base dark:text-zinc-400">
D2 Studio pairs a real design system with applied AI and a typed,
realtime backend, so an idea reaches production in weeks and stays
cheap to change after launch.
</p>
</header>
{/* The 1049px Figma reference scaled up 15% (1206px); the gutter
follows on the spacing scale, 36 -> 40px, rather than the exact
41px the ratio asks for. At lg the two wide cards stack in
column one and the tall pair spans both rows; below that it
folds to two columns, then one. The SVGs cover, so the tall
cards just crop. */}
<LoadInGroup className="grid w-full max-w-[1206px] grid-cols-1 gap-6 sm:grid-cols-2 sm:gap-8 lg:grid-cols-[672fr_314fr_314fr] lg:gap-10">
{/* One column at mobile: at the Figma 672/313 the card is only ~156px
tall, which the copy alone fills — so it goes to 3/2 and the SVG
crops the sides. The glyph is `slice` too and its ink stops well
inside the 672 box, so it survives the crop. */}
<div className="relative aspect-[3/2] sm:aspect-[672/313] sm:col-span-2 lg:col-span-1">
<Glow delay={0} card={1} />
<LoadIn delay={0} className={cell}>
<Flat>
<CardArt1 {...fill} />
</Flat>
<Glyph d={GLYPH_16} id="glyph-16" transform={GLYPH_16_AT} />
<div className={scrimBottom} />
<CardCopy
className="bottom-0"
title="16+ AI products in Production"
sub="Copilots, retrieval search and agent workflows shipped end to end, from the first Figma frame to the deploy that carries real traffic."
/>
</LoadIn>
</div>
{/* One column, one shape: below sm the tall pair takes the wide
cards' 3/2 so the four read as one stack rather than two
formats. Between sm and lg it is 3/4, not the Figma
314/654: that ratio is for a 314px column, and at half a
tablet it is a 400px column, so the same numbers come out
830px tall — a screen of artwork with the content at
either end. The Figma proportion only applies at lg,
where the pair spans two rows and takes its height from
the grid anyway. */}
<div className="relative aspect-[3/2] sm:aspect-[3/4] lg:row-span-2 lg:aspect-auto">
<Glow delay={0.12} card={3} />
<LoadIn delay={0.12} className={cell}>
{/* Dark, already saturated: light, not colour. */}
<Flat boost="brightness(1.16)">
<CardArt3 {...fill} />
</Flat>
<div className={scrimTop} />
<CardCopy
className="top-0"
title="Global by default"
sub="Realtime Convex data on the edge, so every region reads in milliseconds."
/>
{/* The sphere, or below lg the numbers it carries — it does its
own framing, which is not the same framing in the two
cases. */}
<Globe />
</LoadIn>
</div>
<div className="relative aspect-[3/2] sm:aspect-[3/4] lg:row-span-2 lg:aspect-auto">
<Glow delay={0.24} card={4} />
<LoadIn delay={0.24} className={cell}>
{/* The brightest of the four and the flattest: colour, not light. */}
<Flat boost="saturate(1.35) brightness(1.14)">
<CardArt4 {...fill} />
</Flat>
<CardGlow texture="grain" />
<div className={scrimTop} />
<CardCopy
className="top-0"
title="Zero to production, fast"
sub="Design system, typed API and CI wired up on day one."
/>
</LoadIn>
</div>
<div className="relative aspect-[3/2] sm:aspect-[672/313] sm:col-span-2 lg:col-span-1">
<Glow delay={0.36} card={2} />
<LoadIn delay={0.36} className={cell}>
<Flat boost="saturate(1.12) brightness(1.16)">
<CardArt2 {...fill} />
</Flat>
<CardGlow texture="stripes" />
<Glyph d={GLYPH_AI} id="glyph-ai" />
<div className={scrimBottom} />
<CardCopy
className="bottom-0"
title="AI woven through the stack"
sub="Model routing, evals and guardrails built into the product from day one, not bolted on once it is already live."
/>
</LoadIn>
</div>
</LoadInGroup>
</div>
</section>
);
}
registry/default/components/bento-05/bento-05.css
/* Bento 05 — the ambient card light, and the only CSS in the block that Tailwind
cannot express: registered properties and keyframes. Everything is prefixed
b5- and nothing here is a bare element or utility selector, so dropping the
file into a project touches nothing but this block. Imported by
bento-05.tsx, so it arrives with the component rather than needing a line in
the host's globals.css.
The field decides which of the card's own grain / stripes are lit;
card-glow.tsx supplies the shapes, these move them.
Long loops on purpose — the point is that you never catch the card repeating,
so the periods are deliberately not multiples of each other.
Every card runs two animations, never one: the motion, and an on/off gate
over the top on a period that shares no factor with it. The card lights,
holds, goes dark, comes back somewhere else in the motion loop. That's what
keeps it from reading as a screensaver — and it means the gate is the one
knob for how present a card's light is, independent of how it moves. */
/* Rippling: rings going out from the strike, like a drop landing in water.
The radius is a registered property the gradient reads, rather than the
mask's own size. Two reasons, both of which the size approach fails:
the ring stays a true circle (mask-size would stretch it to the card's
aspect), and the origin holds still at the bolt instead of the card's middle
— a percentage mask-position only stays put at 50% 50%, so a growing box
would drag any other origin along with it.
The layer is a double ring, not a single one: a main front at the radius and
a second behind it at a fixed gap, both in the one gradient. Putting the pair
in a single gradient means they cannot drift out of sync, since there is only
one radius driving them, and it costs one layer's worth of raster for two
circles.
Both are drawn thin and hard-shouldered. This is a signal going out, not
water — an alert ping reads by its edge, and the soft wide crest that made it
look like a drop is exactly what has to go.
Stops are offsets around that radius, not multiples of it, so both fronts
keep one thickness the whole way out. A wave front doesn't get fatter as it
travels; one that does reads as a blur, not a ripple. Soft on both sides,
softer ahead than behind.
Percentages resolve against the distance to the farthest corner, and from an
origin down at 62% that corner is a long way past the near edges — the sides
sit at roughly a third of it. So the front stops at 92%: everything the eye
is actually on has been crossed by then, and the rest of the trip would be
the ring crawling off-card while the period ran out. It scales with the card
either way, which a pixel radius wouldn't.
Eased out, but only moderately. The ping still leaves the origin quicker than
it arrives, which is the character; push the curve any harder and every ring
is at 80%+ within a third of its life, so all four pile up at the rim and the
card reads as one flickering edge instead of a field of rings. The curve has
to leave them spread across the radius.
One wave per cycle, back to back. Travel and fade run the full length of the
period, so the next leaves the pin exactly as the last one clears the card —
no hold, no dead frame. The period is the wave's own crossing time and
nothing more, which is why it's 4.5s: that's how long the crossing took when
there was still silence after it. Same wave, same speed, just no wait. */
@property --b5-r {
syntax: "<percentage>";
initial-value: 0%;
inherits: false;
}
.b5-ripple {
--b5-ox: 54%;
--b5-oy: 62%;
--b5-peak: 0.85;
/* Main ring width, gap back to the second, second ring width. The gap has to
clear both half-widths or the stop list stops being monotonic and the
trough between the two closes up — at these widths that floor is 7.75%. */
--b5-w: 5%;
--b5-g: 11%;
--b5-t: 2.5%;
-webkit-mask-image: radial-gradient(
circle at var(--b5-ox) var(--b5-oy),
transparent calc(var(--b5-r) - var(--b5-g) - var(--b5-t) * 1.2),
rgba(0, 0, 0, 0.32) calc(var(--b5-r) - var(--b5-g) - var(--b5-t) * 0.5),
rgba(0, 0, 0, 0.62) calc(var(--b5-r) - var(--b5-g)),
rgba(0, 0, 0, 0.2) calc(var(--b5-r) - var(--b5-g) + var(--b5-t) * 0.6),
transparent calc(var(--b5-r) - var(--b5-w) * 1.25),
rgba(0, 0, 0, 0.3) calc(var(--b5-r) - var(--b5-w) * 0.66),
rgba(0, 0, 0, 0.85) calc(var(--b5-r) - var(--b5-w) * 0.2),
#000 var(--b5-r),
rgba(0, 0, 0, 0.5) calc(var(--b5-r) + var(--b5-w) * 0.4),
transparent calc(var(--b5-r) + var(--b5-w))
);
mask-image: radial-gradient(
circle at var(--b5-ox) var(--b5-oy),
transparent calc(var(--b5-r) - var(--b5-g) - var(--b5-t) * 1.2),
rgba(0, 0, 0, 0.32) calc(var(--b5-r) - var(--b5-g) - var(--b5-t) * 0.5),
rgba(0, 0, 0, 0.62) calc(var(--b5-r) - var(--b5-g)),
rgba(0, 0, 0, 0.2) calc(var(--b5-r) - var(--b5-g) + var(--b5-t) * 0.6),
transparent calc(var(--b5-r) - var(--b5-w) * 1.25),
rgba(0, 0, 0, 0.3) calc(var(--b5-r) - var(--b5-w) * 0.66),
rgba(0, 0, 0, 0.85) calc(var(--b5-r) - var(--b5-w) * 0.2),
#000 var(--b5-r),
rgba(0, 0, 0, 0.5) calc(var(--b5-r) + var(--b5-w) * 0.4),
transparent calc(var(--b5-r) + var(--b5-w))
);
/* Matches the 0% frame, so the first paint doesn't flash before the animation
takes over. */
opacity: 0;
animation: b5-ripple 4.5s cubic-bezier(0.33, 0.55, 0.45, 1) infinite;
}
@keyframes b5-ripple {
/* Starts at the pin's own radius, not at nothing — the ring leaves the dot
rather than materialising in the middle of it. The wrap back to this frame
is invisible because 100% is already at zero opacity. */
0% {
--b5-r: 6%;
opacity: 0;
}
22% {
opacity: var(--b5-peak);
}
67% {
opacity: calc(var(--b5-peak) * 0.55);
}
100% {
--b5-r: 92%;
opacity: 0;
}
}
/* Sweeping: one band down the length of the stripes. The band is 60% of the
card, so mask-position percentages resolve against the remaining 40% — -150%
puts it fully off the top, 250% fully off the bottom. The easing is the whole
character: slow in, gathering speed through the middle, slow out again, so it
arrives and leaves rather than scrolling past at a constant rate. */
.b5-sweep {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 60%;
mask-size: 100% 60%;
opacity: 0.4;
animation: b5-sweep 6.5s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
@keyframes b5-sweep {
0% {
-webkit-mask-position: 0 -150%;
mask-position: 0 -150%;
}
100% {
-webkit-mask-position: 0 250%;
mask-position: 0 250%;
}
}
/* The stripes' gate. It sits on the group rather than on the layers, because
each layer already carries its own animation-duration for its own sweep and a
second animation there would inherit it. 11s against sweeps of 5.8–9.1s, none
of them factors of it, so the swell lands mid-sweep as often as it lands
between them. It dips rather than closes — the lines never all go out. */
.b5-sweep-gate {
opacity: 0.55;
animation: b5-sweep-gate 11s ease-in-out infinite;
}
@keyframes b5-sweep-gate {
0%,
100% {
opacity: 0.55;
}
20% {
opacity: 1;
}
64% {
opacity: 1;
}
83% {
opacity: 0.65;
}
}
/* The pin. A small soft dot held at the origin, breathing on the same period
the rings leave on — this is the part that makes the card read as marking a
location rather than as rings for their own sake. Rings alone are an effect;
rings with a source are a signal, and the eye goes to the source. It never
goes fully out, because the thing being pointed at doesn't stop existing
between pulses. */
.b5-pin {
-webkit-mask-image: radial-gradient(
circle at var(--b5-ox) var(--b5-oy),
#000 0%,
rgba(0, 0, 0, 0.55) 4%,
transparent 11%
);
mask-image: radial-gradient(
circle at var(--b5-ox) var(--b5-oy),
#000 0%,
rgba(0, 0, 0, 0.55) 4%,
transparent 11%
);
opacity: 0.55;
animation: b5-pin 4.5s ease-in-out infinite;
}
@keyframes b5-pin {
0%,
100% {
opacity: 0.5;
}
22% {
opacity: 0.92;
}
}
/* Still, but not dark: the field parks where it opens, so the texture keeps a
little light instead of the card going flat. */
@media (prefers-reduced-motion: reduce) {
.b5-ripple,
.b5-pin,
.b5-sweep,
.b5-sweep-gate {
animation: none;
opacity: 1;
}
/* The pin stays lit and one ring parks mid-flight around it, so the card
still reads as marking the spot. The other rings would only stack more
light on the same still frame, so they stay out of it. */
.b5-pin {
opacity: 0.7;
}
.b5-ripple {
--b5-r: 55%;
opacity: 0;
}
.b5-ripple:first-of-type {
opacity: 0.6;
}
.b5-sweep {
opacity: 0.4;
-webkit-mask-position: 0 50%;
mask-position: 0 50%;
}
}
registry/default/components/bento-05/card-art-1.tsx
import type { SVGProps } from "react";
const CardArt1 = (props: SVGProps<SVGSVGElement>) => (
<svg
width={672}
height={313}
viewBox="0 0 672 313"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<g clipPath="url(#clip0_1305_19245)">
<rect width={672} height={313} rx={24} fill="#1C1A41" />
<g
filter="url(#filter0_f_1305_19245)"
style={{
mixBlendMode: "darken",
}}
>
<ellipse
cx={153.691}
cy={42.3526}
rx={106.428}
ry={74.6148}
transform="rotate(48.9788 153.691 42.3526)"
fill="#280DD5"
fillOpacity={0.7}
/>
</g>
<g
filter="url(#filter1_f_1305_19245)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={192.13}
cy={-87.0741}
rx={44.389}
ry={77.0077}
transform="rotate(126.764 192.13 -87.0741)"
fill="url(#paint0_linear_1305_19245)"
/>
</g>
<g
filter="url(#filter2_f_1305_19245)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={450.709}
cy={-77.5566}
rx={66.0959}
ry={39.0635}
transform="rotate(144.276 450.709 -77.5566)"
fill="#13BBB3"
/>
</g>
<g filter="url(#filter3_f_1305_19245)">
<path
d="M-32.735 237.675C-30.8394 210.584 26.7188 162.167 241.786 185.225C510.621 214.048 473.272 214.015 544.243 193.878C615.213 173.741 818.761 210.378 774.802 135.305"
stroke="black"
strokeOpacity={0.9}
strokeWidth={70}
/>
</g>
<g
filter="url(#filter4_f_1305_19245)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<path
d="M512.875 316.626C528.477 354.445 512.875 377.327 466.07 385.272C419.265 393.217 375.461 401.162 334.656 409.107C293.852 417.052 259.448 408.631 231.445 383.842C203.442 359.053 166.438 332.199 120.433 303.279C74.4281 274.358 70.8277 243.372 109.632 210.321C148.436 177.269 187.04 154.069 225.444 140.722C263.849 127.374 306.453 109.577 353.258 87.3305C400.063 65.0842 443.268 68.7389 482.872 98.2947C522.477 127.851 533.478 162.173 515.876 201.263C498.274 240.353 497.274 278.808 512.875 316.626Z"
fill="#168FFF"
/>
</g>
<g
filter="url(#filter5_f_1305_19245)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<path
d="M610 240.66C629.635 275.689 610 296.884 551.095 304.243C492.191 311.602 437.063 318.961 385.71 326.321C334.358 333.68 291.061 325.879 255.819 302.918C220.577 279.958 174.007 255.084 116.11 228.296C58.2123 201.509 53.6812 172.808 102.516 142.194C151.352 111.58 199.935 90.0908 248.267 77.7274C296.599 65.3639 350.217 48.8793 409.121 28.2736C468.025 7.6679 522.399 11.0531 572.241 38.4293C622.083 65.8055 635.928 97.5972 613.776 133.804C591.624 170.012 590.365 205.63 610 240.66Z"
fill="#831DC7"
fillOpacity={0.6}
/>
<path
d="M610 240.66C629.635 275.689 610 296.884 551.095 304.243C492.191 311.602 437.063 318.961 385.71 326.321C334.358 333.68 291.061 325.879 255.819 302.918C220.577 279.958 174.007 255.084 116.11 228.296C58.2123 201.509 53.6812 172.808 102.516 142.194C151.352 111.58 199.935 90.0908 248.267 77.7274C296.599 65.3639 350.217 48.8793 409.121 28.2736C468.025 7.6679 522.399 11.0531 572.241 38.4293C622.083 65.8055 635.928 97.5972 613.776 133.804C591.624 170.012 590.365 205.63 610 240.66Z"
fill="#1D8DB2"
fillOpacity={0.6}
/>
</g>
<mask
id="mask0_1305_19245"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-28}
y={-57}
width={728}
height={432}
>
<rect
x={-27.5}
y={-56.5}
width={727}
height={431}
rx={24.5}
fill="url(#paint1_radial_1305_19245)"
/>
<rect
x={-27.5}
y={-56.5}
width={727}
height={431}
rx={24.5}
stroke="white"
/>
</mask>
<g mask="url(#mask0_1305_19245)">
<mask
id="mask1_1305_19245"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-21}
y={-56}
width={715}
height={430}
>
<rect
x={-20.3396}
y={-56}
width={713.419}
height={430}
fill="url(#paint2_linear_1305_19245)"
/>
</mask>
<g mask="url(#mask1_1305_19245)">
<mask
id="mask2_1305_19245"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-43}
y={-76}
width={759}
height={458}
>
<rect
x={-42.5416}
y={-75.1807}
width={757.823}
height={456.763}
rx={24}
fill="#1C1C1C"
/>
</mask>
<g mask="url(#mask2_1305_19245)">
<rect
width={322}
height={702}
transform="translate(-15.9996 313) rotate(-90)"
fill="#7383FD"
/>
<rect
x={-15.9996}
y={313}
width={322}
height={702}
transform="rotate(-90 -15.9996 313)"
fill="url(#pattern0_1305_19245)"
/>
</g>
</g>
</g>
<g filter="url(#filter6_f_1305_19245)">
<path
d="M220.833 83.1958V243.803H186.803V115.427H185.859L149 138.483V108.369L188.846 83.1958H220.833Z"
fill="black"
fillOpacity={0.5}
/>
<path
d="M320.861 245.999C312.583 245.947 304.592 244.561 296.89 241.843C289.241 239.124 282.377 234.706 276.299 228.59C270.221 222.473 265.401 214.369 261.838 204.279C258.328 194.189 256.573 181.798 256.573 167.107C256.625 153.618 258.171 141.568 261.21 130.955C264.301 120.289 268.702 111.245 274.413 103.821C280.176 96.3968 287.066 90.7504 295.083 86.8816C303.099 82.9605 312.085 81 322.04 81C332.781 81 342.264 83.0912 350.49 87.2737C358.716 91.4039 365.318 97.0242 370.295 104.134C375.325 111.245 378.364 119.217 379.412 128.053H345.853C344.543 122.459 341.793 118.067 337.601 114.878C333.41 111.689 328.222 110.094 322.04 110.094C311.561 110.094 303.597 114.643 298.148 123.74C292.751 132.837 290 145.201 289.896 160.833H290.996C293.406 156.076 296.655 152.024 300.741 148.678C304.881 145.28 309.57 142.692 314.809 140.914C320.101 139.084 325.681 138.169 331.549 138.169C341.085 138.169 349.573 140.417 357.013 144.914C364.453 149.358 370.322 155.474 374.618 163.264C378.914 171.054 381.062 179.968 381.062 190.006C381.062 200.881 378.521 210.553 373.439 219.022C368.409 227.492 361.362 234.131 352.298 238.941C343.286 243.699 332.807 246.051 320.861 245.999ZM320.704 219.336C325.943 219.336 330.633 218.081 334.772 215.572C338.911 213.062 342.159 209.664 344.517 205.377C346.875 201.09 348.054 196.28 348.054 190.947C348.054 185.614 346.875 180.831 344.517 176.596C342.212 172.361 339.016 168.989 334.929 166.48C330.842 163.97 326.179 162.715 320.94 162.715C317.01 162.715 313.369 163.447 310.015 164.911C306.714 166.375 303.806 168.414 301.292 171.028C298.829 173.642 296.89 176.674 295.476 180.125C294.061 183.523 293.354 187.157 293.354 191.026C293.354 196.201 294.533 200.933 296.89 205.22C299.301 209.507 302.549 212.931 306.636 215.493C310.775 218.055 315.464 219.336 320.704 219.336Z"
fill="black"
fillOpacity={0.5}
/>
<path
d="M453.289 219.336V108.291H481.425V219.336H453.289ZM411.713 177.851V149.776H523V177.851H411.713Z"
fill="black"
fillOpacity={0.5}
/>
</g>
<path
d="M217.833 62.1958V222.803H183.803V94.4271H182.859L146 117.483V87.3692L185.846 62.1958H217.833Z"
fill="url(#paint3_linear_1305_19245)"
fillOpacity={0.2}
/>
<path
d="M317.861 224.999C309.583 224.947 301.592 223.561 293.89 220.843C286.241 218.124 279.377 213.706 273.299 207.59C267.221 201.473 262.401 193.369 258.838 183.279C255.328 173.189 253.573 160.798 253.573 146.107C253.625 132.618 255.171 120.568 258.21 109.955C261.301 99.2892 265.702 90.2446 271.413 82.8207C277.176 75.3968 284.066 69.7504 292.083 65.8816C300.099 61.9605 309.085 60 319.04 60C329.781 60 339.264 62.0912 347.49 66.2737C355.716 70.4039 362.318 76.0242 367.295 83.1344C372.325 90.2446 375.364 98.2175 376.412 107.053H342.853C341.543 101.459 338.793 97.0673 334.601 93.8782C330.41 90.689 325.222 89.0944 319.04 89.0944C308.561 89.0944 300.597 93.6429 295.148 102.74C289.751 111.837 287 124.201 286.896 139.833H287.996C290.406 135.076 293.655 131.024 297.741 127.678C301.881 124.28 306.57 121.692 311.809 119.914C317.101 118.084 322.681 117.169 328.549 117.169C338.085 117.169 346.573 119.417 354.013 123.914C361.453 128.358 367.322 134.474 371.618 142.264C375.914 150.054 378.062 158.968 378.062 169.006C378.062 179.881 375.521 189.553 370.439 198.022C365.409 206.492 358.362 213.131 349.298 217.941C340.286 222.699 329.807 225.051 317.861 224.999ZM317.704 198.336C322.943 198.336 327.633 197.081 331.772 194.572C335.911 192.062 339.159 188.664 341.517 184.377C343.875 180.09 345.054 175.28 345.054 169.947C345.054 164.614 343.875 159.831 341.517 155.596C339.212 151.361 336.016 147.989 331.929 145.48C327.842 142.97 323.179 141.715 317.94 141.715C314.01 141.715 310.369 142.447 307.015 143.911C303.714 145.375 300.806 147.414 298.292 150.028C295.829 152.642 293.89 155.674 292.476 159.125C291.061 162.523 290.354 166.157 290.354 170.026C290.354 175.201 291.533 179.933 293.89 184.22C296.301 188.507 299.549 191.931 303.636 194.493C307.775 197.055 312.464 198.336 317.704 198.336Z"
fill="url(#paint4_linear_1305_19245)"
fillOpacity={0.2}
/>
<path
d="M450.289 198.336V87.2907H478.425V198.336H450.289ZM408.713 156.851V128.776H520V156.851H408.713Z"
fill="url(#paint5_linear_1305_19245)"
fillOpacity={0.2}
/>
<path
d="M319.04 59C329.91 59 339.552 61.1169 347.938 65.3799C356.302 69.579 363.034 75.3043 368.112 82.5566L368.587 83.2393C373.432 90.3155 376.371 98.2194 377.405 106.936L377.538 108.053H342.06L341.88 107.281C340.618 101.892 337.985 97.7091 333.996 94.6738C330.007 91.6392 325.043 90.0947 319.04 90.0947C308.918 90.0947 301.277 94.4541 296.006 103.254C290.962 111.759 288.241 123.265 287.925 137.849C290.298 133.624 293.359 129.974 297.108 126.904C301.343 123.428 306.139 120.782 311.488 118.967C316.888 117.1 322.578 116.169 328.55 116.169C338.247 116.169 346.916 118.457 354.526 123.055L355.233 123.485C362.495 127.984 368.251 134.089 372.494 141.781C376.882 149.737 379.062 158.821 379.062 169.006C379.062 180.043 376.481 189.897 371.297 198.537C366.169 207.169 358.984 213.933 349.766 218.824L349.764 218.825C340.584 223.672 329.938 226.052 317.856 225.999H317.854C309.466 225.946 301.366 224.542 293.557 221.786L293.555 221.785C285.756 219.013 278.766 214.51 272.59 208.294C266.385 202.05 261.496 193.808 257.895 183.611L257.894 183.607C254.336 173.38 252.573 160.871 252.573 146.107V146.104C252.626 132.543 254.179 120.398 257.248 109.68L257.249 109.676C260.369 98.9124 264.821 89.7503 270.621 82.2109L270.623 82.207C276.474 74.6697 283.482 68.923 291.643 64.9834L292.412 64.6143C300.384 60.8653 309.266 59 319.04 59ZM218.833 61.1963V223.804H182.802V95.6416L146.53 118.331L145 119.288V86.8184L145.466 86.5234L185.312 61.3506L185.556 61.1963H218.833ZM479.425 86.291V127.775H521V157.851H479.425V199.336H449.289V157.851H407.714V127.775H449.289V86.291H479.425ZM317.939 142.716C314.139 142.716 310.636 143.421 307.42 144.824L307.421 144.825C304.239 146.236 301.438 148.201 299.012 150.722C296.641 153.241 294.77 156.166 293.401 159.504L293.399 159.51C292.038 162.78 291.353 166.282 291.353 170.025C291.353 175.039 292.493 179.601 294.761 183.729C297.09 187.872 300.222 191.172 304.162 193.643C308.131 196.099 312.636 197.336 317.704 197.336C322.776 197.336 327.284 196.124 331.254 193.717C335.241 191.299 338.367 188.03 340.641 183.895C342.911 179.768 344.053 175.127 344.053 169.947C344.053 164.767 342.91 160.153 340.643 156.082L340.638 156.074C338.416 151.992 335.343 148.749 331.406 146.332C327.491 143.928 323.012 142.716 317.939 142.716Z"
stroke="#EEEEEE"
strokeOpacity={0.2}
strokeWidth={2}
/>
<g
filter="url(#filter8_f_1305_19245)"
style={{
mixBlendMode: "soft-light",
}}
>
<path
d="M-4.64927 331.935C-4.75784 304.098 41.2375 247.542 226.088 244.01C457.15 239.596 425.302 244.255 484.534 214.824C543.767 185.392 719.659 197.141 677.396 126.184"
stroke="black"
strokeWidth={300}
/>
</g>
<g filter="url(#filter9_f_1305_19245)">
<ellipse
cx={278.5}
cy={295.5}
rx={524.5}
ry={127.5}
fill="url(#paint6_linear_1305_19245)"
/>
</g>
<g
filter="url(#filter10_f_1305_19245)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse cx={279.5} cy={59.5} rx={118.5} ry={58.5} fill="#FDE3E4" />
</g>
<g
opacity={0.6}
filter="url(#filter11_f_1305_19245)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<ellipse
cx={520.204}
cy={15.0977}
rx={26.5118}
ry={166.451}
transform="rotate(48.9788 520.204 15.0977)"
fill="url(#paint7_linear_1305_19245)"
fillOpacity={0.9}
/>
</g>
<g
opacity={0.6}
filter="url(#filter12_f_1305_19245)"
style={{
mixBlendMode: "hard-light",
}}
>
<ellipse
cx={279.594}
cy={41.0225}
rx={26.5118}
ry={194.711}
transform="rotate(63.3725 279.594 41.0225)"
fill="url(#paint8_linear_1305_19245)"
fillOpacity={0.9}
/>
</g>
<g
filter="url(#filter13_f_1305_19245)"
style={{
mixBlendMode: "lighten",
}}
>
<ellipse
cx={289.577}
cy={48.6755}
rx={29.2337}
ry={145.048}
transform="rotate(-47.4152 289.577 48.6755)"
fill="#659BFF"
fillOpacity={0.4}
/>
</g>
<g
filter="url(#filter14_f_1305_19245)"
style={{
mixBlendMode: "screen",
}}
>
<ellipse
cx={150.344}
cy={50.2435}
rx={47.2878}
ry={95.9865}
transform="rotate(150 150.344 50.2435)"
fill="#6F07C4"
/>
</g>
<g
opacity={0.6}
filter="url(#filter15_f_1305_19245)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={406.139}
cy={19.1523}
rx={26.5118}
ry={95.4012}
transform="rotate(48.9788 406.139 19.1523)"
fill="url(#paint9_linear_1305_19245)"
fillOpacity={0.9}
/>
</g>
<g
opacity={0.6}
filter="url(#filter16_f_1305_19245)"
style={{
mixBlendMode: "soft-light",
}}
>
<ellipse
cx={587.378}
cy={77.75}
rx={106.005}
ry={141.561}
transform="rotate(48.9788 587.378 77.75)"
fill="url(#paint10_linear_1305_19245)"
fillOpacity={0.9}
/>
</g>
<g
filter="url(#filter17_f_1305_19245)"
style={{
mixBlendMode: "soft-light",
}}
>
<ellipse
cx={79}
cy={87}
rx={125}
ry={79}
transform="rotate(90 79 87)"
fill="#4685E7"
/>
</g>
<g
filter="url(#filter18_f_1305_19245)"
style={{
mixBlendMode: "soft-light",
}}
>
<ellipse
cx={327.221}
cy={39.5719}
rx={64.7325}
ry={131.396}
transform="rotate(84.2496 327.221 39.5719)"
fill="#16AC28"
fillOpacity={0.7}
/>
</g>
</g>
<rect
x={1}
y={1}
width={670}
height={311}
rx={23}
stroke="url(#paint11_linear_1305_19245)"
strokeWidth={2}
/>
<defs>
<filter
id="filter0_f_1305_19245"
x={3.97449}
y={-111.713}
width={299.432}
height={308.131}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter1_f_1305_19245"
x={64.944}
y={-205.291}
width={254.373}
height={236.434}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter2_f_1305_19245"
x={332.388}
y={-187.509}
width={236.641}
height={219.905}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter3_f_1305_19245"
x={-127.65}
y={57.6193}
width={1003.62}
height={245.929}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter4_f_1305_19245"
x={-67.0002}
y={-77}
width={741}
height={639}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter5_f_1305_19245"
x={-81.0002}
y={-135}
width={855}
height={614}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
{/* Square texture at 0.765 of the Figma export: tile and use-scale move
together, or the 800px image stops filling the tile. */}
<pattern
id="pattern0_1305_19245"
patternContentUnits="objectBoundingBox"
width={1.42309}
height={0.6538463}
>
<use
xlinkHref="#image0_1305_19245"
transform="scale(0.001187892 0.000544872)"
/>
</pattern>
<filter
id="filter6_f_1305_19245"
x={119}
y={51}
width={434}
height={225}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={15}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter8_f_1305_19245"
x={-214.65}
y={-23.7177}
width={1108.55}
height={495.847}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter9_f_1305_19245"
x={-336}
y={78}
width={1229}
height={435}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={45}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter10_f_1305_19245"
x={60.9998}
y={-99}
width={437}
height={317}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={50}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter11_f_1305_19245"
x={313.407}
y={-175.986}
width={413.594}
height={382.166}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter12_f_1305_19245"
x={-94.8774}
y={-249.428}
width={748.943}
height={580.901}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={100}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter13_f_1305_19245"
x={110.946}
y={-121.83}
width={357.263}
height={341.01}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={35}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter14_f_1305_19245"
x={7.25171}
y={-116.203}
width={286.184}
height={332.892}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter15_f_1305_19245"
x={232.072}
y={-146.598}
width={348.135}
height={331.501}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={50}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter16_f_1305_19245"
x={309.897}
y={-194.845}
width={554.961}
height={545.189}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter17_f_1305_19245"
x={-150}
y={-188}
width={458}
height={550}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<filter
id="filter18_f_1305_19245"
x={116.322}
y={-106.18}
width={421.798}
height={291.503}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19245"
/>
</filter>
<linearGradient
id="paint0_linear_1305_19245"
x1={147.741}
y1={-87.0741}
x2={236.519}
y2={-87.0741}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#138CBB" />
<stop offset={1} stopColor="#094055" />
</linearGradient>
<radialGradient
id="paint1_radial_1305_19245"
cx={0}
cy={0}
r={1}
gradientTransform="matrix(13.556 206.971 -349.444 8.02905 322.444 167.029)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C0C0C" />
<stop offset={1} stopColor="#D9D9D9" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_1305_19245"
x1={336.37}
y1={-56}
x2={336.37}
y2={374}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C0C0C" />
<stop offset={1} stopColor="#D9D9D9" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint3_linear_1305_19245"
x1={333}
y1={60}
x2={333}
y2={225}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FBFBFB" />
<stop offset={0.5} stopColor="#EBEBEB" />
<stop offset={1} />
</linearGradient>
<linearGradient
id="paint4_linear_1305_19245"
x1={333}
y1={60}
x2={333}
y2={225}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FBFBFB" />
<stop offset={0.5} stopColor="#EBEBEB" />
<stop offset={1} />
</linearGradient>
<linearGradient
id="paint5_linear_1305_19245"
x1={333}
y1={60}
x2={333}
y2={225}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FBFBFB" />
<stop offset={0.5} stopColor="#EBEBEB" />
<stop offset={1} />
</linearGradient>
<linearGradient
id="paint6_linear_1305_19245"
x1={-246}
y1={295.5}
x2={803}
y2={295.5}
gradientUnits="userSpaceOnUse"
>
<stop />
<stop offset={1} stopColor="#191919" />
</linearGradient>
<linearGradient
id="paint7_linear_1305_19245"
x1={513.653}
y1={167.488}
x2={637.698}
y2={-22.2886}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint8_linear_1305_19245"
x1={273.043}
y1={219.285}
x2={425.925}
y2={19.3379}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint9_linear_1305_19245"
x1={399.588}
y1={106.495}
x2={450.589}
y2={-29.6403}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint10_linear_1305_19245"
x1={561.186}
y1={207.353}
x2={592.605}
y2={-18.6334}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#CEE7FF" />
</linearGradient>
<linearGradient
id="paint11_linear_1305_19245"
x1={126}
y1={210.5}
x2={41.5}
y2={0.00000737284}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#1F1F1F" />
<stop offset={1} stopColor="#D6D8FF" />
</linearGradient>
<clipPath id="clip0_1305_19245">
<rect width={672} height={313} rx={24} fill="white" />
</clipPath>
<image
id="image0_1305_19245"
width={1198}
height={1200}
preserveAspectRatio="none"
xlinkHref="data:image/png;base64,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PvL09fX19fX19fX19fX19fX19fVPVIerpmk+zp2VRew1kvT19fX19fX19fX19fX19fX19fdUh6t5nh9ifxWbSvgxkvT19fX19fX19fX19fX19fX19fdUh6vtVvftdvfy9vAVLCvZ2zVulNfXjyR9fX19fX19fX19fX19fX19AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD2NZd8aRzHm67rXtZ1vS0f+/I6LMvyNAzDZ1yBvr6+vr6+vr6+vr6+vr6+vr7+T9Xhaou2bft+DH43lfhd9s/r60eCvn4k6OtHgr5+JOjrR4K+fiTo60eCvn4k/LXfRkWJPu9EN/22kkWSvr6+vr6+vr6+vr6+vr6+vr7+7u+i7v7cwfHRrix9fX19fX19fX19fX19fX19ff0TlwxX0y9nfeTp6+vr6+vr6+vr6+vr6+vr6+ufqA5XTdN8nDsri9hrJOnr6+vr6+vr6+vr6+vr6+vr6++pDlfzPD/E/io2lfBjJOnr6+vr6+vr6+vr6+vr6+vr6++pDlfbre7b7e7l7eErWFayt2vcKK+vH0n6+vr6+vr6+vr6+vr6+vr6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADsay750jiON13Xvazrels+9uV1WJblaRiGz7gCfX19fX19fX19fX19fX19fX39n6rD1RZt2/b9GPxuKvG77J/X148Eff1I0NePBH39SNDXjwR9/UjQ148Eff1I+Gu/jYoSfd6JbvptJYskfX19fX19fX19fX19fX19fX393d9F3f25g+OjXVn6+vr6+vr6+vr6+vr6+vr6+vonLhmupl/O+sjT19fX19fX19fX19fX19fX19c/UR2umqb5OHdWFrHXSNLX19fX19fX19fX19fX19fX199THa7meX6I/VVsKuHHSNLX19fX19fX19fX19fX19fX199THa62W923293L28NXsKxkb9e4UV5fP5L09fX19fX19fX19fX19fX1AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA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"
/>
</defs>
</svg>
);
export default CardArt1;
registry/default/components/bento-05/card-art-2.tsx
import type { SVGProps } from "react";
const CardArt2 = (props: SVGProps<SVGSVGElement>) => (
<svg
width={672}
height={313}
viewBox="0 0 672 313"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<g clipPath="url(#clip0_1305_19275)">
<rect width={672} height={313} rx={24} fill="#1C1A41" />
<g
filter="url(#filter0_f_1305_19275)"
style={{
mixBlendMode: "darken",
}}
>
<ellipse
cx={153.691}
cy={42.3526}
rx={106.428}
ry={74.6148}
transform="rotate(48.9788 153.691 42.3526)"
fill="#280DD5"
fillOpacity={0.7}
/>
</g>
<g
filter="url(#filter1_f_1305_19275)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={192.13}
cy={-87.0741}
rx={44.389}
ry={77.0077}
transform="rotate(126.764 192.13 -87.0741)"
fill="url(#paint0_linear_1305_19275)"
/>
</g>
<g
filter="url(#filter2_f_1305_19275)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={450.709}
cy={-77.5566}
rx={66.0959}
ry={39.0635}
transform="rotate(144.276 450.709 -77.5566)"
fill="#13BBB3"
/>
</g>
<g filter="url(#filter3_f_1305_19275)">
<path
d="M-32.735 237.675C-30.8394 210.584 26.7188 162.167 241.786 185.225C510.621 214.048 473.272 214.015 544.243 193.878C615.213 173.741 818.761 210.378 774.802 135.305"
stroke="#6B6606"
strokeOpacity={0.9}
strokeWidth={70}
/>
</g>
<g
filter="url(#filter4_f_1305_19275)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<path
d="M512.875 316.626C528.477 354.445 512.875 377.327 466.07 385.272C419.265 393.217 375.461 401.162 334.656 409.107C293.852 417.053 259.448 408.631 231.445 383.842C203.442 359.053 166.438 332.199 120.433 303.279C74.4281 274.358 70.8277 243.372 109.632 210.321C148.436 177.269 187.04 154.069 225.444 140.722C263.849 127.374 306.453 109.577 353.258 87.3305C400.063 65.0842 443.268 68.7389 482.872 98.2948C522.477 127.851 533.478 162.173 515.876 201.263C498.274 240.353 497.274 278.808 512.875 316.626Z"
fill="#923006"
/>
</g>
<g
filter="url(#filter5_f_1305_19275)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<path
d="M610 240.66C629.635 275.689 610 296.884 551.095 304.243C492.191 311.602 437.063 318.961 385.71 326.321C334.358 333.68 291.061 325.879 255.819 302.918C220.577 279.958 174.007 255.084 116.11 228.296C58.2123 201.509 53.6812 172.808 102.516 142.194C151.352 111.58 199.935 90.0908 248.267 77.7274C296.599 65.3639 350.217 48.8793 409.121 28.2736C468.025 7.6679 522.399 11.0531 572.241 38.4293C622.083 65.8055 635.928 97.5972 613.776 133.804C591.624 170.012 590.365 205.63 610 240.66Z"
fill="#831DC7"
fillOpacity={0.6}
/>
<path
d="M610 240.66C629.635 275.689 610 296.884 551.095 304.243C492.191 311.602 437.063 318.961 385.71 326.321C334.358 333.68 291.061 325.879 255.819 302.918C220.577 279.958 174.007 255.084 116.11 228.296C58.2123 201.509 53.6812 172.808 102.516 142.194C151.352 111.58 199.935 90.0908 248.267 77.7274C296.599 65.3639 350.217 48.8793 409.121 28.2736C468.025 7.6679 522.399 11.0531 572.241 38.4293C622.083 65.8055 635.928 97.5972 613.776 133.804C591.624 170.012 590.365 205.63 610 240.66Z"
fill="#FEC268"
fillOpacity={0.6}
/>
</g>
<mask
id="mask0_1305_19275"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-28}
y={-57}
width={728}
height={432}
>
<rect
x={-27.5}
y={-56.5}
width={727}
height={431}
rx={24.5}
fill="url(#paint1_radial_1305_19275)"
/>
<rect
x={-27.5}
y={-56.5}
width={727}
height={431}
rx={24.5}
stroke="white"
/>
</mask>
<g mask="url(#mask0_1305_19275)">
<mask
id="mask1_1305_19275"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-21}
y={-56}
width={715}
height={430}
>
<rect
x={-20.3396}
y={-56}
width={713.419}
height={430}
fill="url(#paint2_linear_1305_19275)"
/>
</mask>
<g mask="url(#mask1_1305_19275)">
<mask
id="mask2_1305_19275"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-43}
y={-76}
width={759}
height={458}
>
<rect
x={-42.5416}
y={-75.1807}
width={757.823}
height={456.763}
rx={24}
fill="#1C1C1C"
/>
</mask>
<g mask="url(#mask2_1305_19275)">
<rect
width={322}
height={702}
transform="translate(-15.9996 313) rotate(-90)"
fill="#7383FD"
/>
<rect
x={-15.9996}
y={313}
width={322}
height={702}
transform="rotate(-90 -15.9996 313)"
fill="url(#pattern0_1305_19275)"
/>
</g>
</g>
</g>
<g filter="url(#filter6_f_1305_19275)">
<path
d="M273.713 234H240.759L290.972 88.5455H330.602L380.744 234H347.79L311.355 121.784H310.219L273.713 234ZM271.653 176.827H349.494V200.832H271.653V176.827ZM425.004 88.5455V234H394.251V88.5455H425.004Z"
fill="#0F0F0F"
fillOpacity={0.5}
/>
</g>
<mask
id="path-15-outside-1_1305_19275"
maskUnits="userSpaceOnUse"
x={227}
y={70}
width={191}
height={150}
fill="black"
>
<rect fill="white" x={227} y={70} width={191} height={150} />
<path d="M263.713 218H230.759L280.972 72.5455H320.602L370.744 218H337.79L301.355 105.784H300.219L263.713 218ZM261.653 160.827H339.494V184.832H261.653V160.827ZM415.004 72.5455V218H384.251V72.5455H415.004Z" />
</mask>
<path
d="M263.713 218H230.759L280.972 72.5455H320.602L370.744 218H337.79L301.355 105.784H300.219L263.713 218ZM261.653 160.827H339.494V184.832H261.653V160.827ZM415.004 72.5455V218H384.251V72.5455H415.004Z"
fill="url(#paint3_linear_1305_19275)"
fillOpacity={0.2}
/>
<path
d="M263.713 218V220H265.166L265.615 218.619L263.713 218ZM230.759 218L228.868 217.347L227.952 220H230.759V218ZM280.972 72.5455V70.5455H279.546L279.081 71.8928L280.972 72.5455ZM320.602 72.5455L322.493 71.8936L322.028 70.5455H320.602V72.5455ZM370.744 218V220H373.549L372.635 217.348L370.744 218ZM337.79 218L335.888 218.618L336.336 220H337.79V218ZM301.355 105.784L303.257 105.166L302.809 103.784H301.355V105.784ZM300.219 105.784V103.784H298.766L298.317 105.165L300.219 105.784ZM263.713 218V216H230.759V218V220H263.713V218ZM230.759 218L232.649 218.653L282.862 73.1981L280.972 72.5455L279.081 71.8928L228.868 217.347L230.759 218ZM280.972 72.5455V74.5455H320.602V72.5455V70.5455H280.972V72.5455ZM320.602 72.5455L318.711 73.1973L368.854 218.652L370.744 218L372.635 217.348L322.493 71.8936L320.602 72.5455ZM370.744 218V216H337.79V218V220H370.744V218ZM337.79 218L339.692 217.382L303.257 105.166L301.355 105.784L299.453 106.402L335.888 218.618L337.79 218ZM301.355 105.784V103.784H300.219V105.784V107.784H301.355V105.784ZM300.219 105.784L298.317 105.165L261.811 217.381L263.713 218L265.615 218.619L302.121 106.403L300.219 105.784ZM415.004 72.5455H417.004V70.5455H415.004V72.5455ZM415.004 218V220H417.004V218H415.004ZM384.251 218H382.251V220H384.251V218ZM384.251 72.5455V70.5455H382.251V72.5455H384.251ZM415.004 72.5455H413.004V218H415.004H417.004V72.5455H415.004ZM415.004 218V216H384.251V218V220H415.004V218ZM384.251 218H386.251V72.5455H384.251H382.251V218H384.251ZM384.251 72.5455V74.5455H415.004V72.5455V70.5455H384.251V72.5455Z"
fill="#ECECEC"
fillOpacity={0.5}
mask="url(#path-15-outside-1_1305_19275)"
/>
<g
filter="url(#filter8_f_1305_19275)"
style={{
mixBlendMode: "soft-light",
}}
>
<path
d="M-4.64927 331.935C-4.75784 304.098 41.2375 247.542 226.088 244.01C457.15 239.596 425.302 244.255 484.534 214.824C543.767 185.392 719.659 197.141 677.396 126.184"
stroke="#860E0E"
strokeWidth={300}
/>
</g>
<g filter="url(#filter9_f_1305_19275)">
<ellipse
cx={278.5}
cy={295.5}
rx={524.5}
ry={127.5}
fill="url(#paint4_linear_1305_19275)"
/>
</g>
<g
filter="url(#filter10_f_1305_19275)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse cx={279.5} cy={59.5} rx={118.5} ry={58.5} fill="#FDE3E4" />
</g>
<g
opacity={0.6}
filter="url(#filter11_f_1305_19275)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<ellipse
cx={520.204}
cy={15.0977}
rx={26.5118}
ry={166.451}
transform="rotate(48.9788 520.204 15.0977)"
fill="url(#paint5_linear_1305_19275)"
fillOpacity={0.9}
/>
</g>
<g
opacity={0.6}
filter="url(#filter12_f_1305_19275)"
style={{
mixBlendMode: "hard-light",
}}
>
<ellipse
cx={279.594}
cy={41.0226}
rx={26.5118}
ry={194.711}
transform="rotate(63.3725 279.594 41.0226)"
fill="url(#paint6_linear_1305_19275)"
fillOpacity={0.9}
/>
</g>
<g
filter="url(#filter13_f_1305_19275)"
style={{
mixBlendMode: "lighten",
}}
>
<ellipse
cx={289.577}
cy={48.6755}
rx={29.2337}
ry={145.048}
transform="rotate(-47.4152 289.577 48.6755)"
fill="#659BFF"
fillOpacity={0.4}
/>
</g>
<g
filter="url(#filter14_f_1305_19275)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<ellipse
cx={150.04}
cy={78.2748}
rx={69.1049}
ry={124.387}
transform="rotate(150 150.04 78.2748)"
fill="#C45612"
/>
</g>
<g
filter="url(#filter15_f_1305_19275)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<ellipse
cx={608.04}
cy={60.2748}
rx={69.1049}
ry={124.387}
transform="rotate(150 608.04 60.2748)"
fill="#C45612"
/>
</g>
<g
opacity={0.6}
filter="url(#filter16_f_1305_19275)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={406.139}
cy={19.1523}
rx={26.5118}
ry={95.4012}
transform="rotate(48.9788 406.139 19.1523)"
fill="url(#paint7_linear_1305_19275)"
fillOpacity={0.9}
/>
</g>
<g
opacity={0.6}
filter="url(#filter17_f_1305_19275)"
style={{
mixBlendMode: "soft-light",
}}
>
<ellipse
cx={587.378}
cy={77.75}
rx={106.005}
ry={141.561}
transform="rotate(48.9788 587.378 77.75)"
fill="url(#paint8_linear_1305_19275)"
fillOpacity={0.9}
/>
</g>
<g
filter="url(#filter18_f_1305_19275)"
style={{
mixBlendMode: "soft-light",
}}
>
<ellipse
cx={79}
cy={87}
rx={125}
ry={79}
transform="rotate(90 79 87)"
fill="#B33737"
/>
</g>
<g
filter="url(#filter19_f_1305_19275)"
style={{
mixBlendMode: "soft-light",
}}
>
<ellipse
cx={327.221}
cy={39.5719}
rx={64.7325}
ry={131.396}
transform="rotate(84.2496 327.221 39.5719)"
fill="#AD3A0C"
/>
</g>
</g>
<rect
x={1}
y={1}
width={670}
height={311}
rx={23}
stroke="url(#paint9_linear_1305_19275)"
strokeWidth={2}
/>
<defs>
<filter
id="filter0_f_1305_19275"
x={3.97449}
y={-111.713}
width={299.432}
height={308.131}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter1_f_1305_19275"
x={64.944}
y={-205.291}
width={254.373}
height={236.434}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter2_f_1305_19275"
x={332.388}
y={-187.509}
width={236.641}
height={219.905}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter3_f_1305_19275"
x={-127.65}
y={57.6193}
width={1003.62}
height={245.93}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter4_f_1305_19275"
x={-67.0002}
y={-76.9999}
width={741}
height={639}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter5_f_1305_19275"
x={-81.0002}
y={-135}
width={855}
height={614}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
{/* Square texture at 0.9 of the Figma export: tile and use-scale move
together, or the 800px image stops filling the tile. */}
<pattern
id="pattern0_1305_19275"
patternContentUnits="objectBoundingBox"
width={1.39752}
height={0.7179489}
>
<use
xlinkHref="#image0_1305_19275"
transform="scale(0.00139752 0.000641026)"
/>
</pattern>
<filter
id="filter6_f_1305_19275"
x={220.759}
y={68.5455}
width={224.246}
height={185.455}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={10}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter8_f_1305_19275"
x={-214.65}
y={-23.7177}
width={1108.55}
height={495.847}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter9_f_1305_19275"
x={-336}
y={78.0001}
width={1229}
height={435}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={45}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter10_f_1305_19275"
x={60.9998}
y={-99}
width={437}
height={317}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={50}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter11_f_1305_19275"
x={313.407}
y={-175.986}
width={413.594}
height={382.166}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter12_f_1305_19275"
x={-94.8774}
y={-249.428}
width={748.943}
height={580.901}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={100}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter13_f_1305_19275"
x={110.946}
y={-121.83}
width={357.263}
height={341.01}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={35}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter14_f_1305_19275"
x={-16.2715}
y={-114.884}
width={332.623}
height={386.317}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter15_f_1305_19275"
x={441.729}
y={-132.884}
width={332.623}
height={386.317}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter16_f_1305_19275"
x={232.072}
y={-146.598}
width={348.135}
height={331.501}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={50}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter17_f_1305_19275"
x={309.897}
y={-194.845}
width={554.961}
height={545.189}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter18_f_1305_19275"
x={-150}
y={-188}
width={458}
height={550}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<filter
id="filter19_f_1305_19275"
x={116.322}
y={-106.18}
width={421.798}
height={291.503}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19275"
/>
</filter>
<linearGradient
id="paint0_linear_1305_19275"
x1={147.741}
y1={-87.0741}
x2={236.519}
y2={-87.0741}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#138CBB" />
<stop offset={1} stopColor="#094055" />
</linearGradient>
<radialGradient
id="paint1_radial_1305_19275"
cx={0}
cy={0}
r={1}
gradientTransform="matrix(13.556 206.971 -349.444 8.02905 322.444 167.029)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C0C0C" />
<stop offset={1} stopColor="#D9D9D9" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_1305_19275"
x1={336.37}
y1={-56}
x2={336.37}
y2={374}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C0C0C" />
<stop offset={1} stopColor="#D9D9D9" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint3_linear_1305_19275"
x1={327}
y1={52}
x2={327}
y2={313.5}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.454619} stopColor="white" />
<stop offset={1} stopColor="#B3B3B3" />
</linearGradient>
<linearGradient
id="paint4_linear_1305_19275"
x1={-246}
y1={295.5}
x2={803}
y2={295.5}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#360808" />
<stop offset={1} />
</linearGradient>
<linearGradient
id="paint5_linear_1305_19275"
x1={513.653}
y1={167.488}
x2={637.698}
y2={-22.2886}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint6_linear_1305_19275"
x1={273.043}
y1={219.285}
x2={425.925}
y2={19.338}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint7_linear_1305_19275"
x1={399.588}
y1={106.495}
x2={450.589}
y2={-29.6402}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint8_linear_1305_19275"
x1={561.186}
y1={207.353}
x2={592.605}
y2={-18.6334}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FF0B0F" />
<stop offset={1} stopColor="#901D28" />
</linearGradient>
<linearGradient
id="paint9_linear_1305_19275"
x1={331.354}
y1={4.64206}
x2={277.646}
y2={343.358}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFE8E8" />
<stop offset={0.488984} stopColor="#1F1F1F" />
</linearGradient>
<clipPath id="clip0_1305_19275">
<rect width={672} height={313} rx={24} fill="white" />
</clipPath>
<image
id="image0_1305_19275"
width={1000}
height={1120}
preserveAspectRatio="none"
xlinkHref="data:image/png;base64,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"
/>
</defs>
</svg>
);
export default CardArt2;
registry/default/components/bento-05/card-art-3.tsx
import type { SVGProps } from "react";
const CardArt3 = (props: SVGProps<SVGSVGElement>) => (
<svg
width={314}
height={654}
viewBox="0 0 314 654"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<g clipPath="url(#clip0_1305_19305)">
<rect
x={314}
y={0.0000137254}
width={672}
height={313}
rx={24}
transform="rotate(90 314 1.37254e-05)"
fill="#1C1A41"
/>
<g
filter="url(#filter0_f_1305_19305)"
style={{
mixBlendMode: "darken",
}}
>
<ellipse
cx={271.647}
cy={153.69}
rx={106.428}
ry={74.6148}
transform="rotate(138.979 271.647 153.69)"
fill="#280DD5"
fillOpacity={0.7}
/>
</g>
<g
filter="url(#filter1_f_1305_19305)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={401.074}
cy={192.13}
rx={44.389}
ry={77.0077}
transform="rotate(-143.236 401.074 192.13)"
fill="url(#paint0_linear_1305_19305)"
/>
</g>
<g
filter="url(#filter2_f_1305_19305)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={391.557}
cy={450.709}
rx={66.0959}
ry={39.0635}
transform="rotate(-125.724 391.557 450.709)"
fill="#13BBB3"
/>
</g>
<g filter="url(#filter3_f_1305_19305)">
<path
d="M76.3254 -32.7352C103.416 -30.8395 151.833 26.7187 128.775 241.786C99.9519 510.621 99.9848 473.272 120.122 544.242C140.259 615.213 103.622 818.761 178.695 774.801"
stroke="black"
strokeOpacity={0.9}
strokeWidth={70}
/>
</g>
<g
filter="url(#filter4_f_1305_19305)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<path
d="M5.89227 802.294C-32.0473 817.478 -55.0023 802.294 -62.9728 756.743C-70.9433 711.192 -78.9138 668.56 -86.8843 628.849C-94.8547 589.137 -86.406 555.655 -61.5381 528.402C-36.6701 501.149 -9.72989 465.137 19.2827 420.364C48.2953 375.591 79.3802 372.087 112.537 409.852C145.695 447.617 168.969 485.187 182.359 522.562C195.749 559.938 213.603 601.401 235.921 646.953C258.238 692.504 254.572 734.551 224.921 773.095C195.271 811.638 160.839 822.345 121.624 805.214C82.409 788.084 43.8318 787.111 5.89227 802.294Z"
fill="#168FFF"
/>
</g>
<g
filter="url(#filter5_f_1305_19305)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<path
d="M186.434 708.883C151.292 721.312 130.03 708.883 122.648 671.595C115.265 634.307 107.882 599.409 100.5 566.902C93.1168 534.394 100.942 506.986 123.976 484.677C147.011 462.368 171.964 432.888 198.837 396.237C225.71 359.586 254.503 356.718 285.215 387.632C315.927 418.546 337.484 449.301 349.887 479.896C362.29 510.491 378.827 544.433 399.499 581.721C420.17 619.009 416.774 653.429 389.311 684.981C361.847 716.532 329.954 725.296 293.631 711.273C257.308 697.251 221.576 696.454 186.434 708.883Z"
fill="#831DC7"
fillOpacity={0.6}
/>
<path
d="M186.434 708.883C151.292 721.312 130.03 708.883 122.648 671.595C115.265 634.307 107.882 599.409 100.5 566.902C93.1168 534.394 100.942 506.986 123.976 484.677C147.011 462.368 171.964 432.888 198.837 396.237C225.71 359.586 254.503 356.718 285.215 387.632C315.927 418.546 337.484 449.301 349.887 479.896C362.29 510.491 378.827 544.433 399.499 581.721C420.17 619.009 416.774 653.429 389.311 684.981C361.847 716.532 329.954 725.296 293.631 711.273C257.308 697.251 221.576 696.454 186.434 708.883Z"
fill="#1D8DB2"
fillOpacity={0.6}
/>
</g>
<mask
id="mask0_1305_19305"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-61}
y={-29}
width={432}
height={729}
>
<rect
x={370.5}
y={-27.5001}
width={727}
height={431}
rx={24.5}
transform="rotate(90 370.5 -27.5001)"
fill="url(#paint1_radial_1305_19305)"
/>
<rect
x={370.5}
y={-27.5001}
width={727}
height={431}
rx={24.5}
transform="rotate(90 370.5 -27.5001)"
stroke="white"
/>
</mask>
<g mask="url(#mask0_1305_19305)">
<mask
id="mask1_1305_19305"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-60}
y={-21}
width={430}
height={715}
>
<rect
x={370}
y={-20.3397}
width={713.419}
height={430}
transform="rotate(90 370 -20.3397)"
fill="url(#paint2_linear_1305_19305)"
/>
</mask>
<g mask="url(#mask1_1305_19305)">
<mask
id="mask2_1305_19305"
style={{
maskType: "alpha",
}}
maskUnits="userSpaceOnUse"
x={-68}
y={-43}
width={458}
height={759}
>
<rect
x={389.181}
y={-42.5417}
width={757.823}
height={456.763}
rx={24}
transform="rotate(90 389.181 -42.5417)"
fill="#1C1C1C"
/>
</mask>
<g mask="url(#mask2_1305_19305)">
<rect
width={322}
height={702}
transform="translate(1.00006 -15.9997)"
fill="#14ABE2"
/>
<rect
x={1.00006}
y={-15.9997}
width={322}
height={702}
fill="url(#pattern0_1305_19305)"
/>
</g>
</g>
</g>
<g filter="url(#filter6_f_1305_19305)">
<ellipse
cx={143.57}
cy={554.638}
rx={224.212}
ry={124.562}
transform="rotate(10.006 143.57 554.638)"
fill="url(#paint3_linear_1305_19305)"
/>
</g>
<g
filter="url(#filter7_f_1305_19305)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={254.5}
cy={279.5}
rx={118.5}
ry={58.5}
transform="rotate(90 254.5 279.5)"
fill="#9F2426"
/>
</g>
<g
opacity={0.6}
filter="url(#filter8_f_1305_19305)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<ellipse
cx={298.902}
cy={520.204}
rx={26.5118}
ry={166.451}
transform="rotate(138.979 298.902 520.204)"
fill="url(#paint4_linear_1305_19305)"
fillOpacity={0.9}
/>
</g>
<g
opacity={0.6}
filter="url(#filter9_f_1305_19305)"
style={{
mixBlendMode: "hard-light",
}}
>
<ellipse
cx={272.977}
cy={279.594}
rx={26.5118}
ry={194.711}
transform="rotate(153.373 272.977 279.594)"
fill="url(#paint5_linear_1305_19305)"
fillOpacity={0.9}
/>
</g>
<g
filter="url(#filter10_f_1305_19305)"
style={{
mixBlendMode: "lighten",
}}
>
<ellipse
cx={265.324}
cy={289.577}
rx={29.2337}
ry={145.048}
transform="rotate(42.5848 265.324 289.577)"
fill="#659BFF"
fillOpacity={0.4}
/>
</g>
<g
filter="url(#filter11_f_1305_19305)"
style={{
mixBlendMode: "screen",
}}
>
<ellipse
cx={263.757}
cy={150.344}
rx={47.2878}
ry={95.9865}
transform="rotate(-120 263.757 150.344)"
fill="#2C0E45"
/>
</g>
<g
opacity={0.6}
filter="url(#filter12_f_1305_19305)"
style={{
mixBlendMode: "overlay",
}}
>
<ellipse
cx={294.848}
cy={406.139}
rx={26.5118}
ry={95.4012}
transform="rotate(138.979 294.848 406.139)"
fill="url(#paint6_linear_1305_19305)"
fillOpacity={0.9}
/>
</g>
<g
opacity={0.6}
filter="url(#filter13_f_1305_19305)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<ellipse
cx={249.681}
cy={624.219}
rx={106.005}
ry={155.929}
transform="rotate(138.979 249.681 624.219)"
fill="url(#paint7_linear_1305_19305)"
fillOpacity={0.9}
/>
</g>
<g
filter="url(#filter14_f_1305_19305)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<ellipse
cx={240}
cy={63}
rx={125}
ry={79}
transform="rotate(-180 240 63)"
fill="#158CC8"
/>
</g>
<g
filter="url(#filter15_f_1305_19305)"
style={{
mixBlendMode: "plus-lighter",
}}
>
<ellipse
cx={240}
cy={63}
rx={125}
ry={79}
transform="rotate(-180 240 63)"
fill="#158CC8"
/>
</g>
<g
filter="url(#filter16_f_1305_19305)"
style={{
mixBlendMode: "soft-light",
}}
>
<ellipse
cx={292.452}
cy={325.797}
rx={64.7325}
ry={131.396}
transform="rotate(174.25 292.452 325.797)"
fill="#097C96"
fillOpacity={0.7}
/>
</g>
<g
filter="url(#filter17_f_1305_19305)"
style={{
mixBlendMode: "soft-light",
}}
>
<path
d="M-8.57956 -15.7667C21.1714 -15.6834 81.9382 31.4284 86.998 219.209C93.3229 453.935 88.1218 421.553 119.99 481.922C151.858 542.29 140.524 720.865 216.068 678.431"
stroke="#072F40"
strokeWidth={100}
/>
</g>
</g>
<rect
x={313}
y={1.00001}
width={652}
height={312}
rx={23}
transform="rotate(90 313 1.00001)"
stroke="url(#paint8_linear_1305_19305)"
strokeWidth={2}
/>
<defs>
<filter
id="filter0_f_1305_19305"
x={117.582}
y={3.97426}
width={308.131}
height={299.432}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter1_f_1305_19305"
x={282.857}
y={64.9437}
width={236.434}
height={254.373}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter2_f_1305_19305"
x={281.604}
y={332.389}
width={219.905}
height={236.641}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter3_f_1305_19305"
x={10.4513}
y={-127.65}
width={245.929}
height={1003.62}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter4_f_1305_19305"
x={-239.786}
y={233.933}
width={640.083}
height={729.188}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter5_f_1305_19305"
x={-52.1884}
y={216.417}
width={615.003}
height={651.328}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
{/* Square texture at 0.9 of the Figma export: tile and use-scale move
together, or the 800px image stops filling the tile. */}
<pattern
id="pattern0_1305_19305"
patternContentUnits="objectBoundingBox"
width={1.118016}
height={0.5128209}
>
<use
xlinkHref="#image0_1305_19305"
transform="scale(0.00139752 0.000641026)"
/>
</pattern>
<filter
id="filter6_f_1305_19305"
x={-168.307}
y={335.898}
width={623.753}
height={437.479}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={45}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter7_f_1305_19305"
x={96}
y={60.9995}
width={317}
height={437}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={50}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter8_f_1305_19305"
x={107.819}
y={313.408}
width={382.166}
height={413.594}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter9_f_1305_19305"
x={-17.4731}
y={-94.8769}
width={580.901}
height={748.943}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={100}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter10_f_1305_19305"
x={94.8195}
y={110.946}
width={341.01}
height={357.263}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={35}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter11_f_1305_19305"
x={97.3104}
y={7.25166}
width={332.892}
height={286.184}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter12_f_1305_19305"
x={129.097}
y={232.072}
width={331.501}
height={348.135}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={50}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter13_f_1305_19305"
x={-30.2108}
y={337.52}
width={559.783}
height={573.397}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter14_f_1305_19305"
x={-35}
y={-166}
width={550}
height={458}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter15_f_1305_19305"
x={-35}
y={-166}
width={550}
height={458}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter16_f_1305_19305"
x={76.7003}
y={44.8977}
width={431.503}
height={561.798}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<filter
id="filter17_f_1305_19305"
x={-73.2631}
y={-125.767}
width={373.818}
height={920.654}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19305"
/>
</filter>
<linearGradient
id="paint0_linear_1305_19305"
x1={356.685}
y1={192.13}
x2={445.463}
y2={192.13}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#138CBB" />
<stop offset={1} stopColor="#094055" />
</linearGradient>
<radialGradient
id="paint1_radial_1305_19305"
cx={0}
cy={0}
r={1}
gradientTransform="matrix(13.556 206.971 -349.444 8.02905 719.444 196.029)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C0C0C" />
<stop offset={1} stopColor="#D9D9D9" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_1305_19305"
x1={726.71}
y1={-20.3397}
x2={726.71}
y2={409.66}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C0C0C" />
<stop offset={1} stopColor="#D9D9D9" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint3_linear_1305_19305"
x1={-80.6428}
y1={554.638}
x2={367.782}
y2={554.638}
gradientUnits="userSpaceOnUse"
>
<stop />
<stop offset={1} stopColor="#191919" />
</linearGradient>
<linearGradient
id="paint4_linear_1305_19305"
x1={292.352}
y1={672.594}
x2={416.396}
y2={482.818}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint5_linear_1305_19305"
x1={266.427}
y1={457.857}
x2={419.308}
y2={257.91}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint6_linear_1305_19305"
x1={288.297}
y1={493.482}
x2={339.297}
y2={357.347}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint7_linear_1305_19305"
x1={223.489}
y1={766.976}
x2={261.455}
y2={519.055}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#CEE7FF" />
</linearGradient>
<linearGradient
id="paint8_linear_1305_19305"
x1={322.272}
y1={-7.52394}
x2={974.459}
y2={249.084}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset={0.52851} stopColor="#414141" />
</linearGradient>
<clipPath id="clip0_1305_19305">
<rect
x={314}
y={0.0000137254}
width={654}
height={314}
rx={24}
transform="rotate(90 314 1.37254e-05)"
fill="white"
/>
</clipPath>
<image
id="image0_1305_19305"
width={800}
height={800}
preserveAspectRatio="none"
xlinkHref="data:image/png;base64,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"
/>
</defs>
</svg>
);
export default CardArt3;
registry/default/components/bento-05/card-art-4.tsx
"use client";
import * as React from "react";
import type { SVGProps } from "react";
import { grainTile } from "./grain";
const CardArt4 = (props: SVGProps<SVGSVGElement>) => {
// Empty through the server render and the hydration that has to match it,
// then filled on the pass straight after. The grain is a whisper over the
// card — it moves the mean luma by about one part in 255 — so arriving a
// frame late costs nothing, where a mismatched href would cost a hydration
// error on every load.
const [grain, setGrain] = React.useState("");
React.useEffect(() => setGrain(grainTile()), []);
return (
<svg
width={314}
height={654}
viewBox="0 0 314 654"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<g clipPath="url(#clip0_1305_19772)">
<rect
x={314}
y={0.0000152588}
width={672}
height={313}
rx={24}
transform="rotate(90 314 1.52588e-05)"
fill="#1C1A41"
/>
<g
filter="url(#filter0_f_1305_19772)"
style={{ mixBlendMode: "darken" }}
>
<ellipse
cx={271.647}
cy={153.69}
rx={106.428}
ry={74.6148}
transform="rotate(138.979 271.647 153.69)"
fill="#280DD5"
fillOpacity={0.7}
/>
</g>
<g
filter="url(#filter1_f_1305_19772)"
style={{ mixBlendMode: "overlay" }}
>
<ellipse
cx={401.074}
cy={192.13}
rx={44.389}
ry={77.0077}
transform="rotate(-143.236 401.074 192.13)"
fill="url(#paint0_linear_1305_19772)"
/>
</g>
<g
filter="url(#filter2_f_1305_19772)"
style={{ mixBlendMode: "overlay" }}
>
<ellipse
cx={391.557}
cy={450.709}
rx={66.0959}
ry={39.0635}
transform="rotate(-125.724 391.557 450.709)"
fill="#13BBB3"
/>
</g>
<g filter="url(#filter3_f_1305_19772)">
<path
d="M76.3254 -32.7355C103.416 -30.8398 151.833 26.7184 128.775 241.786C99.9519 510.62 99.9848 473.272 120.122 544.242C140.259 615.213 103.622 818.761 178.695 774.801"
stroke="black"
strokeOpacity={0.9}
strokeWidth={70}
/>
</g>
<g
filter="url(#filter4_f_1305_19772)"
style={{ mixBlendMode: "plus-lighter" }}
>
<path
d="M5.89231 802.294C-32.0472 817.478 -55.0023 802.294 -62.9728 756.743C-70.9432 711.191 -78.9137 668.56 -86.8842 628.849C-94.8547 589.137 -86.406 555.655 -61.538 528.402C-36.6701 501.149 -9.72985 465.136 19.2828 420.363C48.2953 375.591 79.3803 372.087 112.538 409.852C145.695 447.616 168.969 485.187 182.359 522.562C195.749 559.938 213.603 601.401 235.921 646.952C258.238 692.504 254.572 734.551 224.921 773.094C195.271 811.638 160.839 822.344 121.624 805.214C82.409 788.084 43.8319 787.11 5.89231 802.294Z"
fill="#168FFF"
/>
</g>
<g
filter="url(#filter5_f_1305_19772)"
style={{ mixBlendMode: "plus-lighter" }}
>
<path
d="M186.434 708.883C151.292 721.312 130.03 708.883 122.648 671.595C115.265 634.307 107.882 599.409 100.5 566.901C93.1169 534.394 100.943 506.985 123.977 484.676C147.011 462.367 171.964 432.887 198.837 396.237C225.71 359.586 254.503 356.718 285.215 387.632C315.927 418.546 337.484 449.3 349.887 479.896C362.29 510.491 378.827 544.433 399.499 581.721C420.17 619.009 416.774 653.429 389.311 684.98C361.847 716.532 329.954 725.296 293.631 711.273C257.308 697.25 221.576 696.453 186.434 708.883Z"
fill="#831DC7"
fillOpacity={0.6}
/>
<path
d="M186.434 708.883C151.292 721.312 130.03 708.883 122.648 671.595C115.265 634.307 107.882 599.409 100.5 566.901C93.1169 534.394 100.943 506.985 123.977 484.676C147.011 462.367 171.964 432.887 198.837 396.237C225.71 359.586 254.503 356.718 285.215 387.632C315.927 418.546 337.484 449.3 349.887 479.896C362.29 510.491 378.827 544.433 399.499 581.721C420.17 619.009 416.774 653.429 389.311 684.98C361.847 716.532 329.954 725.296 293.631 711.273C257.308 697.25 221.576 696.453 186.434 708.883Z"
fill="#1D8DB2"
fillOpacity={0.6}
/>
</g>
<mask
id="mask0_1305_19772"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x={-61}
y={-29}
width={432}
height={729}
>
<rect
x={370.5}
y={-27.5002}
width={727}
height={431}
rx={24.5}
transform="rotate(90 370.5 -27.5002)"
fill="url(#paint1_radial_1305_19772)"
/>
<rect
x={370.5}
y={-27.5002}
width={727}
height={431}
rx={24.5}
transform="rotate(90 370.5 -27.5002)"
stroke="white"
/>
</mask>
<g mask="url(#mask0_1305_19772)">
<mask
id="mask1_1305_19772"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x={-60}
y={-21}
width={430}
height={715}
>
<rect
x={370}
y={-20.3398}
width={713.419}
height={430}
transform="rotate(90 370 -20.3398)"
fill="url(#paint2_linear_1305_19772)"
/>
</mask>
<g mask="url(#mask1_1305_19772)">
<mask
id="mask2_1305_19772"
style={{ maskType: "alpha" }}
maskUnits="userSpaceOnUse"
x={-68}
y={-43}
width={458}
height={759}
>
<rect
x={389.181}
y={-42.5418}
width={757.823}
height={456.763}
rx={24}
transform="rotate(90 389.181 -42.5418)"
fill="#1C1C1C"
/>
</mask>
<g mask="url(#mask2_1305_19772)">
<rect
width={322}
height={702}
transform="translate(1.00006 -15.9998)"
fill="#14ABE2"
/>
<rect
x={1.00006}
y={-15.9998}
width={322}
height={702}
fill="url(#pattern0_1305_19772)"
/>
</g>
</g>
</g>
<g
filter="url(#filter6_f_1305_19772)"
style={{ mixBlendMode: "soft-light" }}
>
<path
d="M-17.9346 -4.64969C9.90209 -4.75826 66.4584 41.2371 69.9897 226.087C74.4038 457.15 69.7447 425.302 99.1763 484.534C128.608 543.766 116.859 719.658 187.816 677.395"
stroke="#96500F"
strokeWidth={300}
/>
</g>
<g filter="url(#filter7_f_1305_19772)">
<ellipse
cx={273.235}
cy={698.817}
rx={306.326}
ry={170.181}
transform="rotate(10.006 273.235 698.817)"
fill="url(#paint3_linear_1305_19772)"
/>
</g>
<g
filter="url(#filter8_f_1305_19772)"
style={{ mixBlendMode: "overlay" }}
>
<ellipse
cx={254.5}
cy={279.499}
rx={118.5}
ry={58.5}
transform="rotate(90 254.5 279.499)"
fill="#9F2426"
/>
</g>
<g
opacity={0.6}
filter="url(#filter9_f_1305_19772)"
style={{ mixBlendMode: "plus-lighter" }}
>
<ellipse
cx={298.902}
cy={520.204}
rx={26.5118}
ry={166.451}
transform="rotate(138.979 298.902 520.204)"
fill="url(#paint4_linear_1305_19772)"
fillOpacity={0.9}
/>
</g>
<g
opacity={0.6}
filter="url(#filter10_f_1305_19772)"
style={{ mixBlendMode: "hard-light" }}
>
<ellipse
cx={272.978}
cy={279.594}
rx={26.5118}
ry={194.711}
transform="rotate(153.373 272.978 279.594)"
fill="url(#paint5_linear_1305_19772)"
fillOpacity={0.9}
/>
</g>
<g
filter="url(#filter11_f_1305_19772)"
style={{ mixBlendMode: "lighten" }}
>
<ellipse
cx={265.325}
cy={289.577}
rx={29.2337}
ry={145.048}
transform="rotate(42.5848 265.325 289.577)"
fill="#659BFF"
fillOpacity={0.4}
/>
</g>
<g
filter="url(#filter12_f_1305_19772)"
style={{ mixBlendMode: "screen" }}
>
<ellipse
cx={263.757}
cy={150.343}
rx={47.2878}
ry={95.9865}
transform="rotate(-120 263.757 150.343)"
fill="#2C0E45"
/>
</g>
<g
opacity={0.6}
filter="url(#filter13_f_1305_19772)"
style={{ mixBlendMode: "overlay" }}
>
<ellipse
cx={294.848}
cy={406.139}
rx={26.5118}
ry={95.4012}
transform="rotate(138.979 294.848 406.139)"
fill="url(#paint6_linear_1305_19772)"
fillOpacity={0.9}
/>
</g>
<g
opacity={0.6}
filter="url(#filter14_f_1305_19772)"
style={{ mixBlendMode: "plus-lighter" }}
>
<ellipse
cx={218.319}
cy={61.2185}
rx={106.005}
ry={155.929}
transform="rotate(138.979 218.319 61.2185)"
fill="url(#paint7_linear_1305_19772)"
fillOpacity={0.9}
/>
</g>
<g
filter="url(#filter15_f_1305_19772)"
style={{ mixBlendMode: "plus-lighter" }}
>
<ellipse
cx={188}
cy={326}
rx={125}
ry={79}
transform="rotate(-180 188 326)"
fill="#158CC8"
/>
</g>
<g
filter="url(#filter16_f_1305_19772)"
transform="translate(-54.3 -176.9) scale(1.33)"
>
<path
d="M120.448 656.453L169.34 494.106L85.1645 507.174L228.939 276.129L185.055 438.288L269.228 425.22L120.448 656.453Z"
fill="black"
fillOpacity={0.7}
/>
</g>
<g
filter="url(#filter17_f_1305_19772)"
style={{ mixBlendMode: "soft-light" }}
>
<ellipse
cx={292.452}
cy={325.797}
rx={64.7325}
ry={131.396}
transform="rotate(174.25 292.452 325.797)"
fill="#FF0672"
fillOpacity={0.7}
/>
</g>
<linearGradient
id="bolt_fill_1305_19772"
x1={0}
y1={0}
x2={0}
y2={1.25}
>
<stop offset="0%" stopColor="#F7F7F7" />
<stop offset="50%" stopColor="#DFDFDF" />
<stop offset="100%" stopColor="#C3C3C3" />
</linearGradient>
<linearGradient
id="bolt_fade_1305_19772"
gradientUnits="userSpaceOnUse"
x1={0}
y1={0.35}
x2={0}
y2={0.95}
>
<stop offset="0%" stopColor="#fff" />
<stop offset="100%" stopColor="#fff" stopOpacity={0} />
</linearGradient>
<mask id="bolt_mask_1305_19772" maskContentUnits="objectBoundingBox">
<rect
x={-0.2}
y={-0.2}
width={1.4}
height={1.4}
fill="url(#bolt_fade_1305_19772)"
/>
</mask>
<path
d="M105.36 630.058L154.252 467.711L70.0768 480.78L213.851 249.734L169.968 411.894L254.14 398.826L105.36 630.058Z"
fill="url(#bolt_fill_1305_19772)"
stroke="#FAFAFA"
strokeWidth={2}
opacity={0.7}
mask="url(#bolt_mask_1305_19772)"
transform="translate(-44.7 -160.2) scale(1.33)"
/>
</g>
<rect
x={313}
y={1.00002}
width={652}
height={312}
rx={23}
transform="rotate(90 313 1.00002)"
stroke="url(#paint10_linear_1305_19772)"
strokeWidth={2}
/>
<defs>
<filter
id="filter0_f_1305_19772"
x={117.582}
y={3.97401}
width={308.131}
height={299.432}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter1_f_1305_19772"
x={282.857}
y={64.9435}
width={236.434}
height={254.373}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter2_f_1305_19772"
x={281.604}
y={332.389}
width={219.905}
height={236.641}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter3_f_1305_19772"
x={10.4513}
y={-127.65}
width={245.929}
height={1003.62}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter4_f_1305_19772"
x={-239.786}
y={233.933}
width={640.083}
height={729.187}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter5_f_1305_19772"
x={-52.1882}
y={216.417}
width={615.003}
height={651.328}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
{/* The card's grain, tiled. The export drew its noise at 0.9 user units per
pixel; keeping that ratio, a 256px tile is 230.4 units, so the tile is
230.4/322 by 230.4/702 of the bounding box. The scale on the <use> is
the same px-to-box factor it always was and does not move with the tile
size — 256 x 0.002795031 is this width, as 1024 x it was the old one. */}
<pattern
id="pattern0_1305_19772"
patternContentUnits="objectBoundingBox"
width={0.715528}
height={0.328205}
>
<use
xlinkHref="#image0_1305_19772"
transform="scale(0.002795031 0.00128205)"
/>
</pattern>
<filter
id="filter6_f_1305_19772"
x={-158.129}
y={-214.65}
width={495.847}
height={1108.55}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={30}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter7_f_1305_19772"
x={-119.899}
y={432.929}
width={786.268}
height={531.776}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={45}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter8_f_1305_19772"
x={96}
y={60.9993}
width={317}
height={437}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={50}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter9_f_1305_19772"
x={107.819}
y={313.407}
width={382.166}
height={413.594}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter10_f_1305_19772"
x={-17.473}
y={-94.8772}
width={580.901}
height={748.943}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={100}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter11_f_1305_19772"
x={94.8195}
y={110.945}
width={341.01}
height={357.263}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={35}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter12_f_1305_19772"
x={97.3104}
y={7.25142}
width={332.892}
height={286.184}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={40}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter13_f_1305_19772"
x={129.097}
y={232.072}
width={331.501}
height={348.135}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={50}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter14_f_1305_19772"
x={-61.572}
y={-225.48}
width={559.783}
height={573.397}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter15_f_1305_19772"
x={-87}
y={97}
width={550}
height={458}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter16_f_1305_19772"
x={55.1645}
y={246.129}
width={244.063}
height={440.324}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={15}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<filter
id="filter17_f_1305_19772"
x={76.7003}
y={44.8977}
width={431.503}
height={561.798}
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity={0} result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation={75}
result="effect1_foregroundBlur_1305_19772"
/>
</filter>
<linearGradient
id="paint0_linear_1305_19772"
x1={356.685}
y1={192.13}
x2={445.463}
y2={192.13}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#138CBB" />
<stop offset={1} stopColor="#094055" />
</linearGradient>
<radialGradient
id="paint1_radial_1305_19772"
cx={0}
cy={0}
r={1}
gradientTransform="matrix(13.556 206.971 -349.444 8.02905 719.444 196.029)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C0C0C" />
<stop offset={1} stopColor="#D9D9D9" stopOpacity={0} />
</radialGradient>
<linearGradient
id="paint2_linear_1305_19772"
x1={726.71}
y1={-20.3398}
x2={726.71}
y2={409.66}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C0C0C" />
<stop offset={1} stopColor="#D9D9D9" stopOpacity={0} />
</linearGradient>
<linearGradient
id="paint3_linear_1305_19772"
x1={-33.0905}
y1={698.817}
x2={579.561}
y2={698.817}
gradientUnits="userSpaceOnUse"
>
<stop />
<stop offset={1} stopColor="#191919" />
</linearGradient>
<linearGradient
id="paint4_linear_1305_19772"
x1={292.352}
y1={672.594}
x2={416.396}
y2={482.818}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint5_linear_1305_19772"
x1={266.427}
y1={457.857}
x2={419.309}
y2={257.91}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint6_linear_1305_19772"
x1={288.297}
y1={493.482}
x2={339.297}
y2={357.347}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#7783F3" />
<stop offset={1} stopColor="#2B96F9" />
</linearGradient>
<linearGradient
id="paint7_linear_1305_19772"
x1={192.128}
y1={203.976}
x2={230.094}
y2={-43.945}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#CEE7FF" />
<stop offset={1} stopColor="#F377E6" />
</linearGradient>
<linearGradient
id="paint8_linear_1305_19772"
x1={215.859}
y1={289.516}
x2={103.328}
y2={631.495}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.348437} stopColor="#07FFFF" />
<stop offset={1} stopColor="#0DD5EF" />
</linearGradient>
<linearGradient
id="paint9_linear_1305_19772"
x1={141.642}
y1={307.937}
x2={204.142}
y2={608.937}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#D0E1FF" />
<stop offset={1} stopColor="#0971C1" />
</linearGradient>
<linearGradient
id="paint10_linear_1305_19772"
x1={322.272}
y1={-7.52394}
x2={974.459}
y2={249.084}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset={0.52851} stopColor="#414141" />
</linearGradient>
<clipPath id="clip0_1305_19772">
<rect
x={314}
y={0.0000152588}
width={654}
height={314}
rx={24}
transform="rotate(90 314 1.52588e-05)"
fill="white"
/>
</clipPath>
{/* Generated, not shipped — see grain.ts for what the original image turned
out to be and why it is three lines of arithmetic. */}
<image
id="image0_1305_19772"
width={256}
height={256}
preserveAspectRatio="none"
xlinkHref={grain}
/>
</defs>
</svg>
);
};
export default CardArt4;
registry/default/components/bento-05/card-glow.tsx
"use client";
// Ambient light living in the card's own texture. Not a hover effect — it runs
// on its own, all the time, so the artwork reads as lit material rather than
// flat print.
//
// What lights up is always the texture itself — the grain, the stripes. A soft
// field passes over the card and whichever bits of texture it crosses come up.
// That's why there are two nested layers — the field lives on the outer one, the
// texture on the inner, and nesting intersects them for free. The blend sits
// above the pair so they add to the card as a single thing.
//
// Two fields, picked by texture:
// pin a lit dot held at the centre of the bolt with thin rings breathing
// out of it, holding their thickness and fading as they widen — the
// card marking a location, the way a device pulses on a map
// sweep a band running the length of the stripes, top to bottom, easing slow
// in and slow out so it gathers speed through the middle
//
// The sweep is gated by a cycle on a period that shares no factor with it, so
// how present the light is keeps changing under the motion. The ripple needs no
// gate: each ring carries its own rise and fall, and the rings overlap, so the
// swell is already there in the field itself.
//
// All of it is CSS keyframes — no per-frame JS, no rects, no listeners. The card
// lights itself.
import { useEffect, useState, type CSSProperties } from "react";
import { grainTile } from "./grain";
import { useStill } from "./load-in";
export type Texture = "grain" | "stripes";
// Each lit card is cut by its own texture rather than one house pattern laid
// over both: grain on the bolt, stripes on AI. The 16+ and globe cards stay
// unlit — their artwork carries enough on its own. Measured off the export's own
// pattern images (the alpha profile of one tile, in image pixels), then carried
// through the pattern's scale and the SVG's slice to land on the card at the
// same period the artwork paints:
//
// AI 32px tile, two bars -> 12.5px, vertical (the rect is rotated)
// bolt 256px grain, 0.9u/px -> 428px
//
// Sizes are percentages of the cell, not pixels, so they scale with it the way
// the artwork does. The values below are those measured periods halved — a
// finer texture inside the light than the artwork paints, on purpose.
// Stripes keep 100% on the y axis: that axis is the bar's length, not its
// period, and scaling it would start tiling the bars vertically.
// ponytail: the percentages are anchored to each card's aspect at the desktop
// grid. The wide cards hold everywhere (their slice is width-driven, and so is a
// percentage); the tall pair only drifts if lg:aspect-auto gives them a shape
// the grid doesn't, and a few percent of drift on a texture this fine reads as
// nothing. Re-measure if the layout changes shape.
const tile = (svg: string) =>
`url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
// The bolt's grain is generated, not drawn — and generated once for the page, so
// asking for it again here is a cache read, not a second field.
const GRAIN_SIZE = "79% 36.75%";
// One ping, two circles — a main ring with a second behind it at a fixed gap.
// Both come out of the single gradient in the CSS, so they're one layer and one
// radius: they cannot drift apart, and the card animates one full-card gradient
// per frame per pass instead of two.
//
// One wave at a time, back to back. It leaves the pin, crosses, and the next
// goes the moment it clears — the keyframes fill the whole period, so there's
// no gap to stagger a second layer into. That's why this is a one-element
// array: succession, not overlap.
//
// The origin is the bolt's own centre, not the card's: its path sits at x
// 48.5–293.3, y 172–678 of the 314x654 viewBox once its transform is applied.
// Percentages of the artwork box below, not of the cell, so they hold at every
// aspect the grid gives the card.
const RIPPLE_ORIGIN = { "--b5-ox": "54%", "--b5-oy": "62%" } as const;
// Every layer here is measured against the export's 314x654 frame, so it is laid
// out on a box of that shape rather than on the cell: the smallest 314x654 box
// that covers the cell, centred — which is what the SVG's xMidYMid slice does
// with the artwork. min-w/min-h supply the "covers", aspect-ratio grows the
// other axis, and the cell's own overflow-hidden trims the overhang.
//
// Without it the origin drifts with the cell's aspect. At the mobile 4/5 the
// slice is width-driven and the artwork hangs ~140px past the cell top and
// bottom, which walks the bolt's centre from 62% of the cell to 70% — the rings
// end up a ring and a half above the bolt. The masks below are unaffected either
// way (cover on a box of the same aspect is an exact fit), but they cost nothing
// to move onto it and it keeps every layer in one coordinate space.
const ART =
"absolute top-1/2 left-1/2 aspect-[314/654] min-h-full min-w-full -translate-x-1/2 -translate-y-1/2";
// No delay: the card opens on a wave leaving the pin.
const RIPPLES = ["0s"];
// No cutout for the bolt: the rings run across it, so the light reads as
// sitting on top of the artwork rather than behind it.
//
// But running across it isn't the same as showing on it. The field is added
// light, and the bolt is already near-white — there's no headroom left up
// there, so a front that's obvious against the dark card all but vanishes the
// moment it crosses the metal. The fix is a second pass over the bolt alone,
// multiplying instead of adding: on white, multiply by the brand gradient tints
// where adding did nothing, so the front reads as the wave bending the light
// through it rather than as more light on top. Masked to the bolt, because the
// same multiply over the dark card would just fight the plus-lighter pass and
// muddy it.
//
// The path is card-art-4's bolt with its transform baked in (translate(-44.7
// -160.2) scale(1.33) applied to each point) — a <g> transform can't survive
// the trip into a mask image, so the coordinates carry it instead. The artwork
// fades the bolt out down its lower half and this follows the same ramp: bbox y
// 171.95–677.78, faded across 0.35 to 0.95 of its own height, so y 349 to
// 652.5. Without that the tint would keep going after the bolt had gone.
const BOLT_D =
"M95.43 677.78L160.46 461.86L48.5 479.24L239.72 171.95L181.36 387.62L293.31 370.24Z";
const BOLT_ONLY = tile(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 314 654">' +
'<linearGradient id="f" gradientUnits="userSpaceOnUse" x1="0" y1="349" x2="0" y2="652.5">' +
'<stop offset="0" stop-color="#fff"/>' +
'<stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>' +
`<path d="${BOLT_D}" fill="url(#f)"/></svg>`,
);
// The inverse: everything except the bolt. Same path and same fade ramp, but
// punched out of a full-card rect instead of drawn on its own — which needs the
// rect and the bolt inside an SVG <mask>, since a CSS alpha mask has no way to
// paint transparency over opacity. This is what puts the disc behind the bolt
// without it actually being behind the artwork, where the card's own background
// would swallow it.
const BOLT_HOLE = tile(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 314 654">' +
'<linearGradient id="f" gradientUnits="userSpaceOnUse" x1="0" y1="349" x2="0" y2="652.5">' +
'<stop offset="0" stop-color="#000"/>' +
'<stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient>' +
'<mask id="m"><rect width="314" height="654" fill="#fff"/>' +
`<path d="${BOLT_D}" fill="url(#f)" stroke="url(#f)" stroke-width="7"/></mask>` +
'<rect width="314" height="654" fill="#fff" mask="url(#m)"/></svg>',
);
// cover + center is what xMidYMid slice resolves to, which is how the card
// paints the artwork — so the mask stays registered with the bolt at every
// aspect the grid gives the cell.
const fitToBolt = (mask: string) =>
({
maskImage: mask,
WebkitMaskImage: mask,
maskSize: "cover",
WebkitMaskSize: "cover",
maskPosition: "center",
WebkitMaskPosition: "center",
maskRepeat: "no-repeat",
WebkitMaskRepeat: "no-repeat",
}) as const;
const BOLT_FIT = fitToBolt(BOLT_ONLY);
const HOLE_FIT = fitToBolt(BOLT_HOLE);
// The rings the bolt stands on: four concentric hairlines from the same origin
// the live ripple leaves from, so the moving front travels along the same
// geometry the static ones describe rather than cutting across it.
//
// Four means a plain gradient rather than a repeating one — repeating has no
// count, it just tiles to the corners, so the stops are written out. One
// element either way.
// ponytail: the radii are pixels, per the 24px spec, so unlike the rest of this
// file they don't scale with the cell. At the desktop size that's what was
// asked for; if the card ever gets much larger they'll sit in close to the
// middle and want redoing as percentages of the corner distance.
const RING_GAP = 24;
const RING_HALF = 0.5;
const RINGS = `radial-gradient(circle at ${RIPPLE_ORIGIN["--b5-ox"]} ${RIPPLE_ORIGIN["--b5-oy"]}, ${[
1, 2, 3, 4,
]
.flatMap((n) => {
const r = n * RING_GAP;
return [
`transparent ${r - RING_HALF}px`,
`#f3f3f3 ${r - RING_HALF}px`,
`#f3f3f3 ${r + RING_HALF}px`,
`transparent ${r + RING_HALF}px`,
];
})
.join(", ")}, transparent 100%)`;
// One band, long and soft, running down a line.
const BAND =
"linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.7) 35%, #000 50%, rgba(0,0,0,.7) 65%, transparent 100%)";
// --- the AI card's stripes -------------------------------------------------
//
// Lines light one at a time, not as a wall. Each bar in the pattern is assigned
// to one of five layers, and a layer is a sweep of its own with its own duration
// and phase — so the light is running down some lines while others are still
// dark, and no two lines are ever quite in step. One bar in the repeat is
// assigned to nothing and never lights at all: the dropped line.
//
// Grouped into layers rather than one element per line, because at this period
// the card carries a few hundred bars and a few hundred animating elements is a
// real cost for an effect whose whole job is to look irregular. Eight bars and
// five layers does it with ten elements, and the repeat is long enough that the
// grouping doesn't read as a grouping.
// Even indices are the 1.0-alpha bars, odd the 0.3 ones, so the mapping spreads
// both across the layers — a layer that drew only faint bars would read as a
// sweep that never quite lights rather than as one more line out of step.
const STRIPE_LAYER = [0, 3, 1, 0, 2, 4, -1, 1];
// Deliberately not multiples of each other — shared factors would let the
// layers fall back into step every few cycles, which is exactly the wall the
// individual lines are meant to break up.
const STRIPE_SWEEP = [
{ dur: "6.5s", delay: "0s" },
{ dur: "7.9s", delay: "-2.3s" },
{ dur: "5.8s", delay: "-4.1s" },
{ dur: "9.1s", delay: "-1.2s" },
{ dur: "7.2s", delay: "-5.6s" },
];
// Bar i sits in tile i>>1, at x 6 or 22 within that tile, at alpha 1.0 or 0.3 —
// the pair the export paints, where the pair is the rhythm and a single bar per
// period would read as half the stripes missing. Eight bars is four 32-unit
// tiles, so the repeat is 4x one texture period.
const STRIPE_SIZE = `${1.0715 * 4}% 100%`;
const stripeTile = (layer: number) =>
tile(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 1" preserveAspectRatio="none">' +
STRIPE_LAYER.map((l, i) =>
l === layer
? `<rect x="${(i >> 1) * 32 + (i & 1 ? 22 : 6)}" width="4" height="1" fill="#000"${i & 1 ? ' opacity=".3"' : ""}/>`
: "",
).join("") +
"</svg>",
);
// The artwork is dark in both themes, so the light is added in both — and it is
// the same light in both, the blue ramp.
//
// It used to read --d2-blue-gradient, which looks like the right token and is
// not: the house defines it holographic (purple -> magenta -> orange) at :root
// and blue only under .dark, so the card's waves came up magenta on the pale
// theme and blue on the dark one. The artwork underneath does not change between
// themes, so neither should the light falling on it.
//
// --b5-lit is the override hook instead: block-scoped, unset by default, so a
// project that wants its own ramp sets one value and gets it in both themes
// rather than inheriting a token that flips underneath it.
const lit = {
background:
"var(--b5-lit, linear-gradient(135deg, oklch(0.82 0.105 235.7) 0%, oklch(0.8303 0.1245 219.879) 50%, oklch(0.899 0.059 233.6) 100%))",
} as const;
export default function CardGlow({ texture }: { texture: Texture }) {
// The grain needs a canvas, so it arrives on the pass after mount — the same
// deal the bolt card itself makes for it.
const [grain, setGrain] = useState("");
const still = useStill();
useEffect(() => {
if (texture === "grain" && !still) setGrain(`url("${grainTile()}")`);
}, [texture, still]);
// Every layer here exists to move. Still, the stripes have nothing to show —
// the light is the effect — and the bolt keeps the rings it stands on, which
// are a static gradient and cost a paint once. No grain canvas either.
if (still)
return texture === "stripes" ? null : (
<div
aria-hidden
className={`pointer-events-none opacity-40 mix-blend-overlay ${ART}`}
style={{ ...HOLE_FIT, background: RINGS }}
/>
);
if (texture === "stripes")
return (
<div
aria-hidden
className="b5-sweep-gate pointer-events-none absolute inset-0 mix-blend-plus-lighter"
>
{STRIPE_SWEEP.map((s, i) => (
<div
key={i}
className="b5-sweep absolute inset-0"
style={{
maskImage: BAND,
WebkitMaskImage: BAND,
animationDuration: s.dur,
animationDelay: s.delay,
}}
>
<div
className="absolute inset-0"
style={{
maskImage: stripeTile(i),
WebkitMaskImage: stripeTile(i),
maskSize: STRIPE_SIZE,
WebkitMaskSize: STRIPE_SIZE,
...lit,
}}
/>
</div>
))}
</div>
);
// What every layer lights: the card's own grain. No texture yet means the
// grain hasn't been drawn, and an empty mask-image would paint the field
// solid, so the layer waits a frame for it.
const grainLayer = (
<div
className="absolute inset-0"
hidden={!grain}
style={{
maskImage: grain,
WebkitMaskImage: grain,
maskSize: GRAIN_SIZE,
WebkitMaskSize: GRAIN_SIZE,
...lit,
}}
/>
);
// Both passes draw the same pin and the same rings off the same delays, so
// they stay in step without anything having to keep them there.
const signal = (
<>
{/* The source, first — everything after it is what leaves it. */}
<div
className="b5-pin absolute inset-0"
style={RIPPLE_ORIGIN as CSSProperties}
>
{grainLayer}
</div>
{RIPPLES.map((delay, i) => (
<div
key={i}
className="b5-ripple absolute inset-0"
style={{ ...RIPPLE_ORIGIN, animationDelay: delay } as CSSProperties}
>
{grainLayer}
</div>
))}
</>
);
return (
<>
{/* The rings, under everything. Overlay rather than a flat stroke, so
they lift the artwork they cross instead of drawing a grey line over
it — the card's own colour still reads through each hairline. Held out
of the bolt by the cutout, which is what makes them read as behind. */}
<div
aria-hidden
className={`pointer-events-none opacity-40 mix-blend-overlay ${ART}`}
style={{ ...HOLE_FIT, background: RINGS }}
/>
{/* The card: added light, which is what the dark artwork wants. */}
<div
aria-hidden
className={`pointer-events-none mix-blend-plus-lighter ${ART}`}
>
{signal}
</div>
{/* The bolt: the same fronts, tinting instead of adding. Full strength —
the ring band is thin and the grain inside it is fine, so what lands on
the metal is a swing of about 77/255 at the crest and nothing at all
either side of it. Dialled back it just disappeared into the artwork. */}
<div
aria-hidden
className={`pointer-events-none mix-blend-multiply ${ART}`}
style={BOLT_FIT}
>
{signal}
</div>
</>
);
}
registry/default/components/bento-05/flat.tsx
"use client";
// The card art, below lg, as a bitmap instead of a live filter graph.
//
// Each export is eighteen gaussian blurs and as many blend groups, and those are
// not paid once: a browser re-runs the whole graph every time it re-rasters the
// tile the card sits on, which on a phone is every time the section is scrolled
// away from and back. Measured on the 390px layout, with the grid on screen and
// a re-raster forced each frame: 63ms median and 111ms at the worst live, 13ms
// once it is a bitmap. The draw costs ~20ms, once, and it is the only frame that
// pays it.
//
// Nothing is lost by freezing it. Below lg the artwork never moves — no
// entrance, no ambilight, no ripple — and it is the same dark art in both
// themes, so a still picture of it is the picture. Above lg this is a
// passthrough: the desktop keeps the live SVG, which is what its ambilight
// samples and what its entrance animates.
//
// A canvas rather than an <img> of the same SVG. That was the lazier version and
// it was tried: an SVG image re-runs its filters on every raster too, so it
// measured no better than the inline SVG it replaced. The bitmap is the point.
import { useEffect, useRef, useState, type ReactNode } from "react";
import { useStill } from "./load-in";
// One card rasterises at a time, page-wide. The four hosts observe in the same
// frame, so left alone all four decodes are in flight together and the peak is
// four filter graphs' worth of surfaces rather than one. Sequential costs a few
// frames on a page that is already a still picture, and takes the peak to a
// quarter — which on iOS is the difference between a load and a tab kill.
let queue = Promise.resolve();
// A per-card grade, baked into the bitmap rather than hung off it as a CSS
// filter: the draw happens once, so the card carries a graded picture and the
// compositor never sees a filter at all.
//
// It is a phone-only correction and it is per card because the exports do not
// sit at the same place. Measured off the rasters (mean luma / mean saturation
// over the cell): 16+ 66/0.61, globe 63/0.77, bolt 108/0.42, AI 88/0.59. The
// bolt is the one that reads dullest and it is not dark — it is the brightest of
// the four and the least saturated, so it wants colour, not light. The globe
// wants the opposite. 16+ is the one the eye is happy with, so it is the
// reference and takes nothing.
export default function Flat({
boost,
children,
}: {
boost?: string;
children: ReactNode;
}) {
const host = useRef<HTMLDivElement>(null);
const [flat, setFlat] = useState(false);
const still = useStill();
useEffect(() => {
const box = host.current;
const svg = box?.querySelector<SVGSVGElement>(":scope > svg");
if (!still || !box || !svg) return;
let live = true;
let frame = 0;
let dirty = true;
const canvas = document.createElement("canvas");
canvas.setAttribute("aria-hidden", "true");
canvas.className = "absolute inset-0 h-full w-full";
const img = new Image();
const draw = async () => {
const { width, height } = box.getBoundingClientRect();
if (!width || !height) return;
// 2 is the ceiling on purpose. The art is blurred gradient nearly
// everywhere and blur has no detail to lose; the one crisp thing in it is
// the 1px border, which is all a third device pixel would buy. Four
// canvases at 3x is memory a phone has better uses for.
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const [w, h] = [Math.round(width * dpr), Math.round(height * dpr)];
if (!dirty && canvas.width === w && canvas.height === h) return;
dirty = false;
// xMidYMid slice, by hand: the smallest box of the artwork's own aspect
// that covers the cell, centred — the framing the SVG already does, so the
// crop is the crop it already had.
const art = svg.viewBox.baseVal;
const s = Math.max(w / art.width, h / art.height);
const [dw, dh] = [Math.round(art.width * s), Math.round(art.height * s)];
// Serialised at the size it will be drawn at, not at its natural 672x313.
// An SVG image rasterises at its own width/height and drawImage then
// resamples, which is bilinear mush over a halftone this fine — the dots
// are the one part of this artwork with detail to lose. Sized up front it
// rasterises vector-crisp and the draw is a 1:1 blit.
const clone = svg.cloneNode(true) as SVGSVGElement;
clone.setAttribute("width", `${dw}`);
clone.setAttribute("height", `${dh}`);
img.src =
"data:image/svg+xml;charset=utf-8," +
encodeURIComponent(new XMLSerializer().serializeToString(clone));
await img.decode();
if (!live) return;
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext("2d");
if (ctx) {
// Safari only got ctx.filter in 17. Where it is missing the assignment
// is a no-op and the card draws ungraded, which is the picture this file
// already shipped — so no fallback beyond letting it happen.
if (boost) ctx.filter = boost;
ctx.drawImage(img, (w - dw) / 2, (h - dh) / 2);
}
// Appended before the SVG is hidden, so there is no frame with neither.
if (!canvas.isConnected) box.appendChild(canvas);
setFlat(true);
};
const invalidate = () => {
dirty = true;
cancelAnimationFrame(frame);
frame = requestAnimationFrame(() => {
queue = queue.then(draw).catch(() => {});
});
};
// Fires once on observe, so this is also the initial draw. After that the
// only thing that changes the box is an orientation change, and a frame's
// coalescing keeps a rotation from redrawing four times.
const ro = new ResizeObserver(invalidate);
ro.observe(box);
// The art is not necessarily finished when it first mounts: c4's grain is
// generated in the browser and lands a render later, and rasterising before
// it arrives bakes a card with no grain on it. Watching the subtree catches
// that without this file having to know which card does it. It goes quiet
// once the art settles, and the redraw is the same coalesced one.
// The SVG is hidden by a class on the host rather than by its own style
// attribute, so this observer never sees its own effect.
const mo = new MutationObserver(invalidate);
mo.observe(svg, { attributes: true, childList: true, subtree: true });
return () => {
live = false;
cancelAnimationFrame(frame);
ro.disconnect();
mo.disconnect();
canvas.remove();
setFlat(false);
};
}, [still, boost]);
// position: absolute with z-index auto is not a stacking context, so the
// wrapper is invisible to everything painting over it — the glyph, the scrims
// and the card glow's blends all see the same backdrop they saw before.
//
// max-lg hides the SVG from the document's first paint, not from `flat` — and
// that, not the canvas, is what this file is really for. Freezing the artwork
// saved the re-rasters, but the phone still paid for the live graph once,
// before the canvas landed, at full devicePixelRatio: the exports' filter
// regions run to 3.5x their own viewBox, so on a 390px card at dpr 3 a single
// gaussian is a 4135x1849 surface (~30MB) and the four cards' eighteen come to
// ~680MB of them. iOS kills the tab for it — "A problem repeatedly occurred",
// Safari and Chrome alike, since both are WebKit there. A media query rather
// than `still`, because it has to be right in the server's HTML: any JS-set
// flag is a decision taken after that HTML has already painted.
//
// The serialised clone still rasterises from a display:none source — the
// filters run inside the SVG image, which has its own rendering pass — so the
// canvas is unchanged, and it is drawn at dpr 2, a quarter the area.
//
// Reduced motion on a desktop is `still` too and keeps the live SVG: it is
// above lg, so max-lg does not fire and `flat` swaps it as before.
return (
<div
ref={host}
className={`absolute inset-0 max-lg:[&>svg]:hidden ${flat ? "[&>svg]:hidden" : ""}`}
>
{children}
</div>
);
}
registry/default/components/bento-05/globe.tsx
"use client";
// Cobe globe for the "Global by default" card.
//
// Pinned to cobe 0.6.x, because 2.0.1 renders the sphere but never draws the
// land dots, even on its own README config.
//
// The canvas is `mix-blend-mode: screen` so the globe composites onto the card
// artwork instead of sitting on top of it: the near-black sphere body drops out
// and only the land dots, the terminator and the glow add light to the gradient.
// That only works with a dark render, hence dark:1 + a very low baseColor.
//
// cobe centres and scales the sphere against the width/height it is handed, in
// device pixels, while the backing buffer follows the canvas element's own box.
// The two have to agree: hand it a fixed size and the sphere lands off-centre and
// at the wrong scale. So the element is measured, and re-measured on resize.
import createGlobe from "cobe";
import {
Building2,
Castle,
Drum,
FerrisWheel,
Landmark,
RadioTower,
Sailboat,
Ship,
TowerControl,
TreePalm,
} from "lucide-react";
import {
animate,
useInView,
useMotionValue,
useReducedMotion,
} from "motion/react";
import { useEffect, useRef, useState } from "react";
import { light, useLit, useWide } from "./load-in";
const { sin, cos, sqrt, PI } = Math;
const THETA = 0.2;
const SAMPLES = 16000;
type Vec = [number, number, number];
// cobe's marker vector: lat/lng -> unit sphere, with lng offset by a half turn.
function world(lat: number, lng: number): Vec {
const la = (lat * PI) / 180;
const lo = (lng * PI) / 180 - PI;
const cl = cos(la);
return [-cl * cos(lo), sin(la), cl * sin(lo)];
}
// The shader paints a marker on the nearest dot of its Fibonacci lattice, not at
// the exact lat/lng, so a chip placed on the true coordinate misses the dot it
// belongs to by up to ~5px at this card's globe size. Snap to the same lattice.
//
// One sweep of the lattice for the whole list, not one per city: the lattice
// point is the expensive part (three trig calls) and it does not depend on which
// city is being matched, so walking the cities inside the sweep pays for it once
// instead of ten times. Measured, that is the module's load cost down from 14ms
// to ~2ms — small on a desk, but it is synchronous work on the critical path and
// a phone pays several times that.
function snapAll(targets: Vec[]): Vec[] {
const best = targets.slice();
const bd = targets.map(() => Infinity);
for (let j = 0; j <= SAMPLES; j++) {
const zj = 1 - (2 * j) / SAMPLES;
const l = sqrt(1 - zj * zj);
const k = ((j * 0.618034) % 1) * 2 * PI;
const p: Vec = [cos(k) * l, zj, sin(k) * l];
targets.forEach(([x, y, z], i) => {
const d = (p[0] - x) ** 2 + (p[1] - y) ** 2 + (p[2] - z) ** 2;
if (d < bd[i]) [bd[i], best[i]] = [d, p];
});
}
return best;
}
// The cobe site's "Analytics" showcase: live visitor counts per city with a
// trend delta, green markers. Its own version positions the chips with CSS
// anchor positioning, which needs cobe 2.x and is Chrome-only, so the chips
// here ride the projection below instead.
// London, Paris and Berlin sit within a few degrees of each other, so on a card
// this narrow their chips land on top of one another. Sydney is below the
// card's window entirely. All ten stay as markers; only the ones whose chips
// never collide, checked pairwise over a full rotation, get a chip.
const CITIES = [
{
city: "New York",
icon: Building2,
visitors: 847,
trend: 12,
chip: true,
location: [40.71, -74.01],
},
{
city: "London",
icon: FerrisWheel,
visitors: 623,
trend: -3,
chip: true,
location: [51.51, -0.13],
},
{
city: "Los Angeles",
icon: TreePalm,
visitors: 534,
trend: 7,
chip: true,
location: [34.05, -118.24],
},
{
city: "Mumbai",
icon: Landmark,
visitors: 468,
trend: 21,
chip: true,
location: [19.08, 72.88],
},
{
city: "Tokyo",
icon: RadioTower,
visitors: 412,
trend: 8,
chip: true,
location: [35.68, 139.65],
},
{
city: "Paris",
icon: TowerControl,
visitors: 385,
trend: 5,
chip: false,
location: [48.86, 2.35],
},
{
city: "Singapore",
icon: Sailboat,
visitors: 296,
trend: 4,
chip: true,
location: [1.35, 103.82],
},
{
city: "Lagos",
icon: Drum,
visitors: 224,
trend: 18,
chip: true,
location: [6.52, 3.38],
},
{
city: "Sydney",
icon: Ship,
visitors: 201,
trend: 15,
chip: false,
location: [-33.87, 151.21],
},
{
city: "Berlin",
icon: Castle,
visitors: 178,
trend: -1,
chip: false,
location: [52.52, 13.41],
},
];
const VECS = snapAll(CITIES.map((c) => world(c.location[0], c.location[1])));
// The shader rotates the view ray by mat3 L(theta, phi); applying the same
// rotation forward puts a world point in view space. The sphere fills 0.8 of the
// half-box, and z > 0 is the front hemisphere.
function project([wx, wy, wz]: Vec, phi: number) {
const [ct, st, cp, sp] = [cos(THETA), sin(THETA), cos(phi), sin(phi)];
return {
x: cp * wx + sp * wz,
y: sp * st * wx + ct * wy - cp * st * wz,
z: -sp * ct * wx + st * wy + cp * ct * wz,
};
}
// What the card is actually saying, for a screen that cannot afford to say it
// with a sphere. Booting cobe compiles its fragment shader — ~3s of blocked main
// thread on a browser that has never compiled it, per the note below — onto a
// canvas 2.5x the card, and that is the page's single worst moment on a phone.
// The chips were always the payload; the globe was the frame around them. So
// below lg the frame goes and the chips stay, as a table.
//
// Static: no entrance, no counting up. Same numbers, same mono, same greens as
// the chips the sphere carries, so the two read as one component at two sizes.
function Stats() {
return (
<div
aria-hidden
className="absolute inset-x-4 bottom-4 flex flex-col sm:inset-x-5 sm:bottom-5"
>
{CITIES.filter((c) => c.chip).map((c, i) => (
// A deck, not a table: each row is its own card and each one tucks a
// few pixels under the one before it, so the column reads as cards laid
// down rather than rules drawn across the artwork. The overlap only
// ever eats padding — the extra pt is exactly what the -mt takes back —
// so every row stays clear of the card above it. Later rows paint over
// earlier ones by document order, which is the direction a hand of
// cards fans, so no z-index is needed.
//
// The fill is solid, not glass: no tint over the artwork and no
// backdrop-blur. Seven blurred panels over artwork is the sort of thing
// this section is being pulled back from, and a translucent row picks
// up whatever gradient happens to be behind it, so the deck changed
// colour down its own length. One opaque ramp — the Figma one, EEEEEE
// -> D1D1D1 -> B4B4B4 top to bottom — and every row runs it identically,
// so they read as one stack of the same object lit from above. Dark mode
// runs the same ramp inverted into the card's own blue-black, with the
// shadows opened up: at light-mode alphas they vanish into it.
//
// 8px radius, not the 12 it had: the deck sits 16px inside a card
// rounded at 24, and concentric corners want inner = outer - inset.
//
// Below sm the deck also fans — each row a step wider than the one it
// tucks under, so three rows read as cards laid down in perspective
// rather than a list. Only below sm: from sm up the card is tall and
// carries all seven, and seven steps of that is a wedge.
//
// Nothing here waits for anything, and an entrance was tried and taken
// back out: it started the rows at opacity 0 and turned them on from an
// IntersectionObserver, and that observer sits inside a
// content-visibility: auto subtree, whose contents a browser is free
// not to report. Where it never fired, the starting state was what
// stayed — a blank card. On a screen this size these numbers are the
// card's whole content, so nothing about them is conditional.
// Below sm the card is the wide cards' 3/2 and has room for three, so
// the tail of the list is dropped rather than squeezed — in CSS, since
// the cutoff is the card's shape and nothing else knows it.
<div
key={c.city}
className={`-mt-3 flex items-center gap-2.5 rounded-lg bg-linear-to-b from-[#EEEEEE] via-[#D1D1D1] to-[#B4B4B4] pt-5.5 pr-4 pb-2.5 pl-3 shadow-[-1px_-2px_6px_rgba(0,0,0,0.20),0_2px_4px_-1px_rgba(0,0,0,0.15),0_8px_16px_-4px_rgba(0,0,0,0.21)] first:mt-0 first:pt-2.5 dark:from-[#1F242E] dark:via-[#13171E] dark:to-[#080A0E] dark:shadow-[-1px_-2px_6px_rgba(0,0,0,0.45),0_2px_4px_-1px_rgba(0,0,0,0.35),0_8px_16px_-4px_rgba(0,0,0,0.50)] ${
i > 2 ? "max-sm:hidden" : ["max-sm:mx-6", "max-sm:mx-3", ""][i]
}`}
>
{/* The city, not a status light: a landmark reads at 14px and says
which place the row is without the name having to be read. */}
<c.icon
className="size-3.5 shrink-0 text-[#1C1F21]/45 dark:text-white/45"
strokeWidth={1.75}
/>
<span className="truncate text-xs text-[#1C1F21]/70 dark:text-white/70">
{c.city}
</span>
<span className="ml-auto font-mono text-[0.85rem] leading-none font-semibold tracking-[-0.02em] text-[#1C1F21] dark:text-white">
{c.visitors}
</span>
{/* One pair of greens and reds per theme: the bright ones wash out on
the light ramp, the deep ones go muddy on the dark one. */}
<span
className={`w-11 shrink-0 text-right font-mono text-[0.55rem] leading-none font-medium tracking-[0.02em] ${
c.trend >= 0
? "text-[#059669] dark:text-[#34D399]"
: "text-[#DC2626] dark:text-[#F87171]"
}`}
>
{c.trend >= 0 ? "↑" : "↓"} {Math.abs(c.trend)}%
</span>
</div>
))}
</div>
);
}
// The sphere below lg is never mounted, not hidden: a hidden canvas still boots.
export default function Globe() {
return useWide() ? <Sphere /> : <Stats />;
}
function Sphere() {
const ref = useRef<HTMLCanvasElement>(null);
const labels = useRef<(HTMLDivElement | null)[]>([]);
// Booting the globe compiles cobe's fragment shader, and on a browser that has
// never compiled it that is ~3s of blocked main thread — measured, and paid
// once per profile: every later visit hits Chrome's program cache and boots in
// ~20ms. Left to the card's own crossing, that one stall lands on the exact
// frames the section is scrolling in, which is the worst place in the page for
// it. So it is spent at idle after mount instead, while the reader is still on
// the hero and nothing is moving — a stall nobody is scrolling through.
//
// The viewport gate stays as the backstop: if idle never comes (a busy main
// thread, or a browser without requestIdleCallback past the timeout), the
// approach still boots it. once on both, because a reader scrolling back
// should find it already turning rather than watch it boot a second time.
// "some", not a fraction: the canvas is deliberately far bigger than the card
// and mostly clipped by it, so any percentage of the canvas itself is the
// wrong measure — asking for 30% of it never comes true.
const inView = useInView(ref, {
once: true,
amount: "some",
margin: "100% 0px",
});
const [idle, setIdle] = useState(false);
useEffect(() => {
const ric = window.requestIdleCallback;
if (!ric) {
const t = setTimeout(() => setIdle(true), 1200);
return () => clearTimeout(t);
}
const id = ric(() => setIdle(true), { timeout: 2500 });
return () => window.cancelIdleCallback?.(id);
}, []);
// The sphere is on the same switch as the light: it spins up as the section
// lights and coasts to a stop as the reader leaves, on the glow's curve and
// its two durations. A factor on the step rather than a stop/start, so the
// rotation eases out of its current angle instead of snapping — and the render
// loop keeps running, since the chips still have to be placed at rest.
const lit = useLit();
// Read inside the render loop, which is built once and does not close over
// the light. A zero step alone does not mean "at rest" — it is also what the
// first frame after the light comes on sees, before the ramp has ticked.
const litRef = useRef(lit);
litRef.current = lit;
const still = useReducedMotion();
const spin = useMotionValue(0);
// cobe hands back its Phenomenon, whose render loop is a self-rescheduling rAF
// — it redraws the full canvas forever, on screen or not. Measured: it was
// still drawing ~60 full frames a second with the section a screen and a half
// away, which is the tax every other animation on the page was paying. But
// once the spin has coasted to zero nothing in the frame changes, so the loop
// is redrawing an identical image: park it there (below, in onRender) and wake
// it here when the light comes back. Parking is not a stop/start of the
// globe — no rebuild, no shader recompile, the context stays warm.
// Typed structurally: cobe's own types name Phenomenon, but it is a
// transitive dependency and not resolvable from here.
const globe = useRef<{
toggle: (on: boolean) => void;
destroy: () => void;
} | null>(null);
useEffect(() => {
globe.current?.toggle(true);
const run = animate(spin, lit ? 1 : 0, light(lit, still));
return () => run.stop();
}, [lit, still, spin]);
useEffect(() => {
const canvas = ref.current;
if (!canvas || !(inView || idle)) return;
let phi = 0;
let built = 0;
// The globe's first composite costs in proportion to its pixels, and this
// canvas is deliberately 2.5x the card, so the buffer is the most expensive
// number on the page: measured, halving it took the section's worst frame on
// entry from 3.8s to 0.9s. It was pinned at 2 regardless of the screen, which
// on a 1x display renders four times the pixels that can ever be shown. So
// follow the display, and cap it: past 1.5 the extra pixels land on dots that
// are already sub-pixel, and only the stall grows.
const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
const build = () => {
const size = Math.round(canvas.offsetWidth * dpr);
if (!size || size === built) return;
built = size;
// Fades rather than pops: the first frames land while the section is
// still settling into view.
canvas.style.opacity = "1";
const [w, h] = [canvas.offsetWidth, canvas.offsetHeight];
globe.current?.destroy();
globe.current = createGlobe(canvas, {
devicePixelRatio: dpr,
width: size,
height: size,
phi: 0,
theta: THETA,
dark: 1,
diffuse: 1.2,
mapSamples: SAMPLES,
mapBrightness: 7,
baseColor: [0.08, 0.1, 0.18],
markerColor: [0.3, 0.85, 0.45],
glowColor: [0.14, 0.18, 0.42],
markers: CITIES.map(({ location }) => ({
location: [location[0], location[1]],
size: 0.04,
})),
onRender: (state) => {
state.phi = phi;
const step = still ? 0 : spin.get();
phi += 0.004 * step;
CITIES.forEach((_, i) => {
const el = labels.current[i];
if (!el) return;
const { x, y, z } = project(VECS[i], phi);
// Positioned with a transform, not left/top: percentage offsets are
// laid out, so they snap to whole pixels and the chip shivers as it
// creeps sideways while the canvas marker moves subpixel-smooth.
el.style.transform = `translate3d(${(x * 0.8 + 1) * 0.5 * w}px, ${
(1 - y * 0.8) * 0.5 * h
}px, 0) translate(-50%, -50%)`;
// On the front face, and inside the slice of sphere the card
// actually shows: the globe box is far wider than the card and
// offset right, so the window is the sphere's left side, x in
// [-0.79, -0.22] once the chip's own width is allowed for. The
// box also sits low enough that the copy is clear of the sphere,
// so only the bottom needs a y bound.
// Entry/exit is a CSS transition on the flag, not a per-frame
// opacity: transitions retarget when a marker skims the boundary,
// where a fresh keyframe each frame would restart from zero.
// Written only on change so the loop doesn't touch the DOM 60x/s.
const on = z > 0.12 && x <= -0.22 && x >= -0.79 && y >= -0.49;
if ((el.dataset.on === "true") !== on) el.dataset.on = `${on}`;
});
// Nothing left to move: this frame is the one the next frame would
// draw, so stop after it. Chips included — they are placed from the
// same phi, so a still sphere means still chips. Under reduced motion
// that is true from the first frame; otherwise it is the light being
// out with the spin already coasted to zero. Parking from inside
// onRender is what phenomenon's own loop reads, so the rAF chain ends
// here rather than one frame later.
if (still || (!step && !litRef.current)) globe.current?.toggle(false);
},
});
};
// Fires once on observe, so this is also the initial build.
const ro = new ResizeObserver(build);
ro.observe(canvas);
return () => {
ro.disconnect();
globe.current?.destroy();
globe.current = null;
};
}, [inView, idle, still, spin]);
// Oversized, so the card is a window onto the sphere; pushed half a card-width
// right, so the window lands on the left limb rather than the middle. ml is a
// % of the card, unlike translate which is a % of the (much wider) globe box.
// Down a quarter of the card via top, not mt: percentage margins resolve
// against the container's width even vertically. It lives here rather than in
// the page because it is the sphere's framing, and the card's other occupant
// wants none of it.
return (
<div className="pointer-events-none absolute top-3/4 left-1/2 ml-[50%] aspect-square w-[248%] -translate-x-1/2 -translate-y-1/2">
<canvas
ref={ref}
aria-hidden
className="h-full w-full opacity-0 transition-opacity duration-700 ease-out"
style={{ mixBlendMode: "screen" }}
/>
<div aria-hidden className="pointer-events-none absolute inset-0">
{CITIES.map((c, i) =>
!c.chip ? null : (
<div
key={c.city}
ref={(el) => {
labels.current[i] = el;
}}
data-on="false"
className="group absolute top-0 left-0 will-change-transform"
>
{/* The dot leads in and trails out; the chip follows it and
leaves first, so the pair reads as one thing arriving.
Exits are quicker than entrances, and each span transitions
only the properties it moves — Tailwind v4 compiles scale
and translate to the standalone CSS properties, not to
`transform`, so those are what have to be named. */}
<span className="block size-1.5 scale-50 rounded-full bg-[#4ADE80] opacity-0 shadow-[0_0_9px_2px_rgba(52,211,153,0.7)] transition-[scale,opacity] delay-[90ms] duration-[140ms] ease-[cubic-bezier(0.23,1,0.32,1)] group-data-[on=true]:scale-100 group-data-[on=true]:opacity-100 group-data-[on=true]:delay-0 group-data-[on=true]:duration-200 motion-reduce:scale-100!" />
<span className="absolute bottom-3.5 left-1/2 flex origin-bottom -translate-x-1/2 translate-y-[3px] scale-[0.96] items-baseline gap-1.5 rounded-[4px] bg-black/85 px-2 py-[0.3rem] whitespace-nowrap opacity-0 transition-[scale,translate,opacity] duration-[130ms] ease-[cubic-bezier(0.23,1,0.32,1)] group-data-[on=true]:translate-y-0 group-data-[on=true]:scale-100 group-data-[on=true]:opacity-100 group-data-[on=true]:delay-[70ms] group-data-[on=true]:duration-200 motion-reduce:translate-y-0! motion-reduce:scale-100!">
<span className="font-mono text-[0.85rem] leading-none font-semibold tracking-[-0.02em] text-white">
{c.visitors}
</span>
<span
className={`font-mono text-[0.55rem] leading-none font-medium tracking-[0.02em] ${
c.trend >= 0 ? "text-[#34D399]" : "text-[#F87171]"
}`}
>
{c.trend >= 0 ? "↑" : "↓"} {Math.abs(c.trend)}%
</span>
</span>
</div>
),
)}
</div>
</div>
);
}
registry/default/components/bento-05/glow-art.tsx
"use client";
// The ambilight's copy of the card art, on its own so it can be left behind.
//
// The glow only ever exists above lg, but as children of <Glow> these were
// rendered on the server and serialised into the flight payload regardless — a
// second copy of all four exports, about half the document, which every phone
// downloaded and parsed in order to render none of it. Behind the ssr:false
// dynamic() in glow.tsx it is a chunk the desktop fetches after hydration and
// the phone never asks for.
import CardArt1 from "./card-art-1";
import CardArt2 from "./card-art-2";
import CardArt3 from "./card-art-3";
import CardArt4 from "./card-art-4";
const ART = { 1: CardArt1, 2: CardArt2, 3: CardArt3, 4: CardArt4 };
export type Card = keyof typeof ART;
export default function GlowArt({ card }: { card: Card }) {
const Art = ART[card];
return (
<Art
className="absolute inset-0 h-full w-full"
preserveAspectRatio="xMidYMid slice"
/>
);
}
registry/default/components/bento-05/glow.tsx
"use client";
// Ambilight: the card's own artwork, blown out and blurred behind it, so the
// spill is sampled from the card instead of guessed — a card with a hot
// gradient throws a bright halo, a flat one barely glows. Screen on dark keeps
// only the light; multiply on the pale page leaves a tinted aura instead of a
// grey smudge. Blur is wide enough that the four halos pool across the section.
// It switches on when the section is on screen and off when it leaves — see
// load-in.tsx. The lit opacity is a variable so the animation has something
// theme-aware to land on; the class no longer sets it directly.
//
// will-change is pinned rather than left to Motion, which sets it for the length
// of an animation and drops it after. Dropping it de-promotes the layer, and
// re-rastering a 72px blur over saturated card art — four of them, two of which
// are card-height — is not a frame's worth of work: measured, that de-promotion
// was the section's worst frame at 170ms, and pinning it takes the whole pass to
// 24ms with no dropped frames. The blur radius is not the problem; at 24px it
// still cost 145ms. This is the case will-change is for — a layer whose opacity
// animates every time the reader passes — and the cost is the GPU memory for
// four promoted layers, held for the life of the page.
// ponytail: pinned on all four. If the memory ever matters, render the glow's
// source at a fraction of its size and scale it up — nothing under 72px of
// detail survives the blur anyway.
//
// A client component so the art below can be code-split. LoadIn returns null
// below lg, so GlowArt never renders there and its chunk is never requested.
import dynamic from "next/dynamic";
import LoadIn from "./load-in";
import type { Card } from "./glow-art";
const GlowArt = dynamic(() => import("./glow-art"), { ssr: false });
export default function Glow({ card, delay }: { card: Card; delay: number }) {
return (
<LoadIn
glow
delay={delay}
className="pointer-events-none absolute -inset-10 mix-blend-multiply blur-[72px] saturate-150 will-change-[opacity] [--b5-glow:0.45] dark:mix-blend-screen dark:[--b5-glow:0.5]"
>
<GlowArt card={card} />
</LoadIn>
);
}
registry/default/components/bento-05/glyphs.ts
// Glyph outlines for the "16+" and "AI" cards.
//
// "16+" is the outlined export from Figma, in its own 378x169 box — the union
// already resolved, so it strokes cleanly. It's centred onto the glyph the card
// SVG underneath draws (bbox 146,60 -> 520,225), hence the translate.
//
// "AI" is still lifted from the card SVG, so it's already in the card's
// 672x313 space and needs no transform.
export const GLYPH_16 =
"M175.04 1C185.91 1 195.552 3.11688 203.938 7.37988C212.302 11.579 219.034 17.3043 224.112 24.5566L224.587 25.2393C229.432 32.3155 232.372 40.2194 233.405 48.9355L233.538 50.0527H198.061L197.88 49.2812C196.618 43.8915 193.985 39.7091 189.996 36.6738C186.008 33.6392 181.043 32.0947 175.04 32.0947C164.918 32.0947 157.277 36.4541 152.006 45.2539C146.962 53.7586 144.241 65.2649 143.925 79.8486C146.298 75.6244 149.359 71.9737 153.108 68.9043C157.343 65.4275 162.139 62.7816 167.488 60.9668C172.889 59.1002 178.578 58.1689 184.55 58.1689C194.248 58.169 202.916 60.4571 210.526 65.0547L211.233 65.4854C218.495 69.9844 224.251 76.0886 228.494 83.7812C232.882 91.7371 235.062 100.821 235.062 111.006C235.062 122.043 232.482 131.897 227.297 140.537C222.169 149.169 214.984 155.933 205.767 160.824L205.765 160.825C196.584 165.672 185.938 168.052 173.856 167.999H173.854C165.467 167.946 157.366 166.542 149.558 163.786L149.556 163.785C141.756 161.013 134.766 156.51 128.59 150.294C122.386 144.05 117.496 135.808 113.896 125.611L113.895 125.607C110.336 115.38 108.573 102.871 108.573 88.1074V88.1035C108.626 74.5429 110.179 62.3979 113.248 51.6797L113.249 51.6758C116.369 40.9124 120.821 31.7503 126.621 24.2109L126.623 24.207C132.475 16.6697 139.483 10.923 147.644 6.9834L148.412 6.61426C156.384 2.86527 165.266 1.00001 175.04 1ZM74.833 3.19629V165.804H38.8027V37.6416L2.53027 60.3311L1 61.2881V28.8184L1.46582 28.5234L41.3125 3.35059L41.5566 3.19629H74.833ZM335.425 28.291V69.7754H377V99.8506H335.425V141.336H305.289V99.8506H263.714V69.7754H305.289V28.291H335.425ZM173.939 84.7158C170.139 84.7159 166.636 85.4209 163.42 86.8242L163.421 86.8252C160.239 88.2363 157.438 90.2005 155.013 92.7217C152.641 95.2413 150.77 98.1658 149.401 101.504L149.399 101.51C148.038 104.78 147.354 108.282 147.354 112.025C147.354 117.039 148.493 121.601 150.762 125.729C153.091 129.872 156.222 133.172 160.162 135.643C164.131 138.099 168.636 139.336 173.704 139.336C178.776 139.336 183.284 138.124 187.254 135.717C191.241 133.299 194.367 130.03 196.642 125.895C198.911 121.768 200.054 117.127 200.054 111.947C200.054 106.767 198.91 102.153 196.644 98.082L196.639 98.0742C194.417 93.9923 191.343 90.7495 187.406 88.332C183.491 85.9281 179.012 84.7158 173.939 84.7158Z";
export const GLYPH_16_AT = "translate(144 58)";
export const GLYPH_AI =
"M263.713 218H230.759L280.972 72.5455H320.602L370.744 218H337.79L301.355 105.784H300.219L263.713 218ZM261.653 160.827H339.494V184.832H261.653V160.827ZM415.004 72.5455V218H384.251V72.5455H415.004Z";
registry/default/components/bento-05/grain.ts
"use client";
// The grain the c4 card is dusted with, generated instead of downloaded.
//
// The Figma export shipped it as a 1024² PNG inlined as base64 — 2.1MB of
// string in the page's JS bundle. Nothing could compress it, because the file
// was a field of per-pixel random noise and the bytes *were* the randomness:
// greyscale-lossless still came to 718KB.
//
// So the image was measured rather than re-encoded, and it turned out to be one
// line of arithmetic. Two facts fell out of it:
//
// correlation between neighbouring pixels: -0.0023, i.e. none. There is no
// spatial structure to reproduce, only a distribution — which is why
// feTurbulence is the wrong tool here despite being the obvious one. Perlin
// noise is smooth by construction and tops out near a third of uncorrelated
// noise's per-pixel contrast, so it renders visibly softer than this.
//
// above a floor of zeros, the quantiles are dead linear — 4, 32, 60, 88, 115,
// 143, 171, 199, 227, 255, in steps of 28. A clamped uniform, in other words,
// over a range running below zero, with 43.05% of it landing on the floor.
//
// Solving those two for the range gives the line below, which reproduces the
// original to within 0.07%: mean 72.61 against 72.66, sd 84.09 against 83.94,
// zeros 43.05% against 43.05%.
//
// The image's RGB equalled its alpha exactly, which reads as premultiplied
// white — but PNG is decoded as straight alpha, so what it actually paints is
// grey level `a` at alpha `a`, not white at alpha `a`. That distinction is the
// whole look: white at alpha `a` contributes `a` to the result where this
// contributes `a²/255`, which is a far softer dusting. Setting RGB to full
// white here instead measured 2.06 luma too bright over the card.
const SPAN = 447.8;
const FLOOR = -192.8;
// 256², to tile. The export drew its noise at 0.9 user units per pixel, so this
// spans 230.4 units and repeats about 1.4 times across the card and 3 down —
// invisible in a field this fine, where there is no structure to line up.
const TILE = 256;
// Generated once for the page, not once per card: the export renders twice, as
// the card and again as the blurred glow behind it, and one field does for
// both. Cached at module scope rather than in a hook for the same reason —
// nothing about it depends on a component.
let cached: string | undefined;
export function grainTile(): string {
if (cached !== undefined) return cached;
const canvas = document.createElement("canvas");
canvas.width = canvas.height = TILE;
const image = new ImageData(TILE, TILE);
// One 32-bit write per pixel rather than four byte writes. Measured, that is
// the fill down from 5.6ms to under 2 — worth it for a loop this hot, and the
// packing is the only thing it costs in clarity. Little-endian, so the bytes
// read R,G,B,A but pack as 0xAABBGGRR — and all four channels carry the same
// value, per the note above.
const px = new Uint32Array(image.data.buffer);
for (let i = 0; i < px.length; i++) {
const a = Math.max(0, Math.random() * SPAN + FLOOR) | 0;
px[i] = (a << 24) | (a << 16) | (a << 8) | a;
}
canvas.getContext("2d")!.putImageData(image, 0, 0);
cached = canvas.toDataURL();
return cached;
}
registry/default/components/bento-05/load-in.tsx
"use client";
// The section's entrance. Two shapes of the same beat: the card rises the last
// few pixels into place, the ambilight behind it blooms up and settles, both on
// the cell's own delay.
//
// It fires when the section is scrolled to, not when the page mounts, and the
// whole grid fires off one observer on the group rather than four of its own.
// That is what keeps the stagger a choreography: with an observer per card the
// bottom row would trip a scroll-length after the top one and the beats would
// land in whatever order the reader's scroll happened to produce. The group
// publishes both of its states on context and the cards read them, so one
// observer and one scroll reader drive the whole grid.
//
// The glow is a light switch, not part of the entrance: it comes up when the
// section is on screen and goes out when it leaves, every time — hence a
// separate state from the one-shot entrance, which happens once and stays.
//
// The cards ride the same switch at their own brightness: lit they sit at full
// strength, otherwise they sink to DIM. Same curve and same two durations as the
// glow, so the light and the cards it falls on move as one thing rather than two
// effects that happen to overlap.
//
// The glow animates its own opacity rather than a wrapper's. A wrapper at
// opacity < 1 would isolate the layer into its own stacking context and its
// mix-blend-mode would then blend against nothing instead of the page — which on
// the pale theme means the multiply drops out and the raw gradient flashes
// through for the length of the fade. So this component *is* the layer: it takes
// the layer's className rather than wrapping it.
//
// The resting value is a variable because it differs per theme (0.45 light,
// 0.5 dark); Motion resolves it off the element, so the animation lands on
// whichever value the current theme set.
import {
motion,
useMotionValueEvent,
useReducedMotion,
useScroll,
} from "motion/react";
import { createContext, useContext, useEffect, useRef, useState } from "react";
import type { ReactNode, RefObject } from "react";
type Bezier = [number, number, number, number];
const EASE: Bezier = [0.22, 1, 0.36, 1];
// The glow gets an ease-in-out instead: no edge at either end, so the light
// swells and dies rather than arriving and stopping.
const SOFT: Bezier = [0.33, 0, 0.35, 1];
// 0.15, not "some": on a phone the grid is several screens tall, and a trigger
// on the first pixel would spend the entrance off-screen. once, because a
// reader scrolling back should find the section lit, not watch it switch on
// again.
const VIEWPORT = { once: true, amount: 0.15 } as const;
// The light is on for the middle of the section's pass: 0 is the section's top
// meeting the bottom of the window, 1 its bottom leaving the top. Read as scroll
// progress rather than a visible fraction because on a phone the grid is taller
// than the window, and "40% of it is showing" is then never true.
//
// Both ends are placed by what is left to scroll, not by where the section sits:
// a power-down that starts at 0.8 has a fifth of the pass to play in, which at
// any real scroll speed is less than the ramp takes — so most of it happened to
// an empty screen. Off at 0.68 leaves a third of the pass, and the section
// visibly powers down before it goes. On is early for the same reason from the
// other side: the bloom then overlaps the cards' rise instead of arriving after
// the entrance has already finished.
const [ON, OFF] = [0.34, 0.68];
// How far the cards sink when the light is off. Deep enough to read as the
// section powering down, shallow enough that the copy stays legible on the way
// past.
const DIM = 0.72;
const Stage = createContext({ entered: false, lit: false });
// Everything in this file is a desktop luxury, and the desktop is where it is
// judged. Below lg the section is a still picture: lit cards, no entrance, no
// ambilight, no ripple, no spin. The cost it sheds is not the choreography, it
// is what the choreography keeps touching — four extra copies of artwork
// carrying eighteen SVG blur filters apiece, a 72px blur on a pinned layer, and
// a scroll listener driving all of it.
//
// False until the effect runs, so the server renders the still version. That is
// also what the phone should get first regardless: the animated path server-
// renders its cards at opacity 0, so until JS lands the section is a blank
// screen. Static-first means the artwork arrives with the document.
//
// The desktop upgrade lands a tick after hydration, above the fold of this
// section — the reader is a screen away, and the entrance is keyed to scrolling
// into it, not to mount.
// ponytail: the ambilight's artwork still rides the RSC payload as this
// component's children even where it never renders. Dropping that too means the
// glow importing the four exports itself behind an ssr:false dynamic(), which
// trades document bytes for a lazily-loaded desktop-only chunk.
export const useWide = () => {
const [wide, setWide] = useState(false);
useEffect(() => {
const q = matchMedia("(min-width: 1024px)");
const sync = () => setWide(q.matches);
sync();
q.addEventListener("change", sync);
return () => q.removeEventListener("change", sync);
}, []);
return wide;
};
// The one question the animated parts ask. Reduced motion is folded in here
// rather than checked separately: a reader who asked for less motion and a phone
// that cannot afford it want the same still frame.
// Both hooks called, never short-circuited — || would skip the second one for as
// long as the first is false, and the count would change the moment it flips.
export const useStill = () => {
const wide = useWide();
const reduced = useReducedMotion();
return !wide || !!reduced;
};
// The one switch, and the one shape of its throw: glow, card brightness and the
// globe's spin all run off these so the section powers up and down as a single
// movement. Slow both ways, slower going out.
export const useLit = () => useContext(Stage).lit;
export const light = (lit: boolean, still?: boolean | null) => ({
duration: still ? 0.2 : lit ? 1.44 : 1.98,
ease: SOFT,
});
// The scroll reader, as a child that draws nothing.
//
// useScroll is not free: it listens for scroll and measures its target on every
// event, and on a phone the target is a grid several screens tall. Below lg
// there is no light for it to switch — the callback was already guarded — so all
// of that was measurement in aid of a no-op. Hooks cannot be skipped, so the
// hook moves into a component that is only mounted when something reads it.
//
// A null-rendering child rather than a second branch of the group itself:
// swapping the group would change the element type at the moment `still`
// resolves, and remounting four cards' worth of artwork costs more than the
// listener it saves.
function ScrollLit({
target,
onChange,
}: {
target: RefObject<HTMLDivElement | null>;
onChange: (lit: boolean) => void;
}) {
const { scrollYProgress } = useScroll({
target,
offset: ["start end", "end start"],
});
useMotionValueEvent(scrollYProgress, "change", (p) =>
onChange(p >= ON && p < OFF),
);
return null;
}
export function LoadInGroup({
className,
children,
}: {
className?: string;
children: ReactNode;
}) {
const ref = useRef<HTMLDivElement>(null);
const still = useStill();
const [lit, setLit] = useState(false);
const [entered, setEntered] = useState(false);
// Still means the switch is welded on: everything downstream reads lit and
// entered, so one pair of values makes the whole section a lit still frame
// without a second code path in any of the four cards.
return (
<Stage.Provider value={{ entered: entered || still, lit: lit || still }}>
{/* The entrance observer goes the same way as the scroll reader:
still means `entered` is already true, so the IntersectionObserver
would fire once to set a value nothing reads. Dropped as props
rather than by swapping the element, for the same remount reason. */}
<motion.div
ref={ref}
className={className}
{...(still
? {}
: {
viewport: VIEWPORT,
onViewportEnter: () => setEntered(true),
})}
>
{!still && <ScrollLit target={ref} onChange={setLit} />}
{children}
</motion.div>
</Stage.Provider>
);
}
export default function LoadIn({
className,
delay = 0,
glow = false,
children,
}: {
className?: string;
delay?: number;
glow?: boolean;
children: ReactNode;
}) {
const wide = useWide();
const reduced = useReducedMotion();
const still = !wide || !!reduced;
// Every glow and every card follows the one switch on the group, so the four
// come up together rather than each on its own card's crossing.
const { entered, lit } = useContext(Stage);
const sweep = light(lit, still);
if (glow) {
// No ambilight below lg. Reduced motion keeps it — a halo is not motion,
// its fade is — so it comes on and stays on.
if (!wide) return null;
return still ? (
<div
aria-hidden
className={className}
style={{ opacity: "var(--b5-glow)" }}
>
{children}
</div>
) : (
<motion.div
aria-hidden
className={className}
initial={false}
animate={{ opacity: lit ? "var(--b5-glow)" : 0 }}
transition={sweep}
>
{children}
</motion.div>
);
}
// Lit, in place, and nothing to run.
if (still) return <div className={className}>{children}</div>;
// The rise is the entrance, on the cell's delay; the brightness is the
// switch, on the glow's curve. Separate transitions on the one element
// because they answer to different states.
const rise = still ? { duration: 0.2 } : { duration: 0.7, ease: EASE, delay };
return (
<motion.div
className={className}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: entered ? 1 : 0, y: entered ? 0 : 10 }}
transition={{ opacity: rise, y: rise }}
>
{children}
{/* The dim, as black over the card rather than brightness() on it.
The two are the same arithmetic — brightness(b) scales every
channel by b, and black at 1-b alpha leaves c*b — but a filter
re-rasters what it covers on every frame it changes, and what it
covers here is an export carrying eighteen SVG blur filters. Two
seconds of that, each way, every time the section passes. As an
overlay it is one opacity on its own layer, which is the
compositor's job and nobody else's. Above the copy (z-20), since
brightness() dimmed that too. */}
<motion.div
aria-hidden
className="pointer-events-none absolute inset-0 z-20 bg-black"
initial={{ opacity: 1 - DIM }}
animate={{ opacity: lit ? 0 : 1 - DIM }}
transition={sweep}
/>
</motion.div>
);
}