// Mika — SVG attempt at the ink-line + watercolor + gold-rim aesthetic. // This is a different art direction from the earlier flat-wash cats. Goals: // - Ink outline (wavering, hand-drawn feel via turbulence-displaced stroke) // - Watercolor wash underneath with soft bleeds, not flat fills // - Rim light: warm gold glow along the edge that faces the light source // - Gold dust: small particles scattered along the rim, fading outward // - Interaction with layout: cats reach / look / gesture, not just pose // // SVG honestly tops out around 60-70% of a Midjourney result for this style // — real watercolor paintings have hundreds of micro-variations we can't // economically fake. But we can get the FEELING right with: // (1) layered washes via feTurbulence + opacity // (2) ink lines drawn with variable-width handdrawn s on top // (3) a gold glow filter (saturated warm + blur) masked to the light edge // (4) deterministic scattered gold particles with feGaussianBlur // // Shared palette stays in the Mika奶茶 family. const INK = { paper: '#faf7f0', wash: '#f3ede1', // lightest body wash midTone: '#c8b89a', // watercolor mid shade — saturated for visible layering deepTone: '#8a7a5a', // wet-into-wet dark — deeper brown for layering ink: '#4a3a28', gold: '#d4a94e', goldHi: '#f5d68a', goldDeep: '#8a6620', amber: '#b88838', earPink: '#c78a7a', nose: '#a66e5e', }; // Shared defs — one set per instance id. const InkDefs = ({ id }) => ( {/* Wavery ink — warps line work just enough to look hand-drawn. */} {/* Soft watercolor bleed. */} {/* Wet-edge halo. */} {/* Gold rim glow — heavy blur + saturated gold stays just inside the composited result. Used as a stroke glow. */} {/* Paper grain — multiplied on the wash. */} {/* Watercolor wash gradient for rim light side — warm glow building up. */} ); // ─── Gold dust sprinkle — tiny blurred dots along a path region ─── // Placed deterministically by index so re-renders don't reshuffle. Each // particle is a small circle with the gold glow filter. const GoldDust = ({ points, id, sizeRange = [1, 3], opacityRange = [0.7, 1] }) => ( {points.map((p, i) => { const seed = (i * 9301 + 49297) % 233280; const rnd = seed / 233280; const r = sizeRange[0] + rnd * (sizeRange[1] - sizeRange[0]); const op = opacityRange[0] + ((seed >> 3) % 100) / 100 * (opacityRange[1] - opacityRange[0]); return ; })} ); // ══════════════════════════════════════════════════════════════ // MikaSleeping — curled, profile, rim-lit from upper-right. // Less "interaction" here since she's asleep — the interaction is that her // tail curls toward the text column as if she's leaning into it. // ══════════════════════════════════════════════════════════════ window.MikaSleepingNoGold = function MikaSleeping({ size = 280, style }) { const id = "slp"; return ( ); }; // ══════════════════════════════════════════════════════════════ // MikaPointing — sitting, front paw raised pointing up-left (toward text). // This is the "interactive" pose — she's directing your eye to the tagline. // Used in Hero B in place of the earlier "peeking" pose. // ══════════════════════════════════════════════════════════════ window.MikaPeekingNoGold = function MikaPointing({ size = 260, style }) { const id = "pnt"; return ( ); }; // ══════════════════════════════════════════════════════════════ // MikaSitting — profile portrait, looking up/out toward light. For Hero C. // Heavy rim light on the right side where the window is. The most "reading // with you" pose — she sits companion-style, gaze lifted. // ══════════════════════════════════════════════════════════════ window.MikaSittingNoGold = function MikaSitting({ size = 260, style }) { const id = "sit"; return ( ); };