// Annotation Fragments — responsive, with full-width ribbon variant
// -------------------------------------------------------------------
// Torn paper & broken ceramic cards. Each fragment has an irregular clip-path
// (generated from a seed) so no two are identical. Variants:
// • 'card' — original square-ish card (default)
// • 'ribbon' — full-width horizontal strip; edges torn on top/bottom only
const mulberry32 = (a) => () => {
a |= 0; a = (a + 0x6D2B79F5) | 0;
let t = Math.imul(a ^ (a >>> 15), 1 | a);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
// Card-style clip (all four edges torn)
const cardClip = (seed, feel) => {
const rand = mulberry32(seed);
const actualFeel = feel === 'mixed' ? (rand() < 0.5 ? 'torn' : 'ceramic') : feel;
const sides = actualFeel === 'torn' ? 28 : 14;
const jitter = actualFeel === 'torn' ? 2.8 : 4.5;
const inset = 2;
const pts = [];
for (let i = 0; i <= sides; i++) pts.push([(i/sides)*100, Math.max(0, inset + (rand()-0.5)*jitter)]);
for (let i = 1; i <= sides/2; i++) pts.push([Math.min(100, 100-inset+(rand()-0.5)*jitter), (i/(sides/2))*100]);
for (let i = sides; i >= 0; i--) pts.push([(i/sides)*100, Math.min(100, 100-inset+(rand()-0.5)*jitter)]);
for (let i = sides/2; i >= 1; i--) pts.push([Math.max(0, inset+(rand()-0.5)*jitter), (i/(sides/2))*100]);
return `polygon(${pts.map(([x,y])=>`${x.toFixed(2)}% ${y.toFixed(2)}%`).join(', ')})`;
};
// Ribbon clip (only top+bottom edges torn; sides run clean to ±2%)
const ribbonClip = (seed, feel) => {
const rand = mulberry32(seed);
const actualFeel = feel === 'mixed' ? (rand() < 0.5 ? 'torn' : 'ceramic') : feel;
const sides = actualFeel === 'torn' ? 60 : 22;
const jitter = actualFeel === 'torn' ? 2.2 : 3.6;
const pts = [];
for (let i = 0; i <= sides; i++) pts.push([(i/sides)*100, Math.max(0, (rand()-0.5)*jitter + 1.5)]);
pts.push([100, 100]);
for (let i = sides; i >= 0; i--) pts.push([(i/sides)*100, Math.min(100, 100 - (rand()-0.5)*jitter - 1.5)]);
pts.push([0, 0]);
return `polygon(${pts.map(([x,y])=>`${x.toFixed(2)}% ${y.toFixed(2)}%`).join(', ')})`;
};
const fragmentClip = (seed, feel = 'mixed', variant = 'card') =>
variant === 'ribbon' ? ribbonClip(seed, feel) : cardClip(seed, feel);
// Noise texture — resolved ONCE, cached by the browser. Previously inlined
// per-fragment, which meant feTurbulence ran per paint on every card. Now
// it's a single data URL shared across all fragments.
const NOISE_URL =
"url(\"data:image/svg+xml;utf8,\")";
/**
* Fragment — a single torn/ceramic piece.
* Props:
* seed, feel ('torn'|'ceramic'|'mixed'), rotate,
* width (number|string e.g. '100%'),
* variant ('card'|'ribbon'),
* children, style
*/
const Fragment = ({
seed = 1,
feel = 'mixed',
rotate = 0,
width = 'min(480px, 100%)',
variant = 'card',
children,
style = {},
}) => {
const clip = React.useMemo(() => fragmentClip(seed, feel, variant), [seed, feel, variant]);
// Perf notes:
// • `drop-shadow` filters stack poorly under the `mix-blend-mode: difference`
// canvas overlay — every scroll tick forces the browser to recomposite the
// whole stacking context. Dropped in favor of a sibling shadow div with
// the same clip-path (cheaper: own layer, not a filter).
// • The noise overlay previously used inline SVG `feTurbulence` PER fragment.
// feTurbulence is re-evaluated per paint. Now it's a single module-level
// data-URI (resolved once, cached by the browser), and the overlay uses
// a normal `background-image` with no blend mode — the darker paper
// already reads as textured without needing `mix-blend-mode: multiply`.
return (
{/* Shadow layer — replaces drop-shadow filter. Slightly offset + blurred
via a plain box-shadow-on-clipped-shape. Its own compositing layer,
no filter pipeline. */}