{/* spotlight + corner shadow — cinematic */}

{dim &&

} {/* film-edge inner border */}

{icon && (

{icon}

)} {(title || subtitle) && (

{subtitle &&

{subtitle}

} {title &&

{title}

}

)} {badge && (

{badge}

)}

); } // Minimal paper frame: card + shadow. Used for video cards. function PaperFrame({ children, tilt = 0, padding = 0, style = {} }) { return (

{children}

); } // ── Decorative illustrations ────────────────────────────────────── // Hand-drawn-feeling SVG ornaments in sage greens and dusty amber. // Each is a self-contained, scalable component sized via its `height` prop. // A Victorian cast-iron lamp post — modeled on the reference. // Composition (viewBox 200 × 900): finial → low dome cap → SHORT WIDE // frosted globe (≈12% of height) → neck → slender shaft with three // decorative collar bands → flared bell base → ground plinth. // Lit by a warm amber halo from inside the globe. function GasLamp({ height = 640, style = {}, out = false, onGlobeClick }) { // Transition timing: snuff fast (0.3s), reignite a touch slower (0.5s). const halo = { opacity: out ? 0 : 1, transition: `opacity ${out ? 0.3 : 0.5}s ease` }; const darkGlobe = { opacity: out ? 1 : 0, transition: `opacity ${out ? 0.3 : 0.5}s ease` }; return ( ); } // ── Botanical illustrations ────────────────────────────────── // Style: 1800s naturalist field guide. Natural-weight linework, leaves // with visible midribs + lateral veins, asymmetric placement, muted // olive-sage palette, rendered at 50% opacity so they recede into the // dark page as atmospheric accents. // Pseudo-random float in [0,1) keyed by i; deterministic so layouts are // stable between renders. function hash(i) { const x = Math.sin(i * 12.9898 + 78.233) * 43758.5453; return x - Math.floor(x); } // Shared filter / gradient defs for the botanicals — lives inside an // invisible SVG mounted once in Portfolio. Filters defined here are // referenced by `url(#cg-...)` from any SVG in the same document. function BotanicalDefs() { return ( ); } // A single botanical leaf at origin, pointing along +x. // Two styles, matching the reference sheet's hand-drawn vocabulary: // 'solid' — confidently filled almond silhouette (most leaves) // 'outlined' — clean outline almond with a tiny midrib (lighter accents) function Leaf({ L = 20, weight = 0.8, style = 'solid', flipBelly = false }) { // Asymmetric almond — fuller belly, pointy tip. flipBelly mirrors the // asymmetry across the midrib for natural variation. const a = flipBelly ? 0.18 : 0.26; const b = flipBelly ? 0.26 : 0.18; const body = `M 0 0 Q ${L * 0.18} ${-L * a * 0.55}, ${L * 0.42} ${-L * a} Q ${L * 0.70} ${-L * a * 0.85}, ${L * 0.92} ${-L * 0.08} L ${L} 0 L ${L * 0.92} ${L * 0.08} Q ${L * 0.70} ${L * b * 0.85}, ${L * 0.42} ${L * b} Q ${L * 0.18} ${L * b * 0.55}, 0 0 Z`; if (style === 'outlined') { return ( {/* tiny inner midrib — just a hint */} ); } // Solid filled almond — the dominant style on the reference sheet. return ( ); } // A small node-bump at a leaf-stem junction (used by larger sprigs). function StemNode({ cx, cy, size = 1.3 }) { return ( ); } // A small curling tendril — a thin spring of vine. cx,cy is the // attachment point on the main stem. function Tendril({ size = 14, angle = 0, opacity = 0.65 }) { return ( ); } // ── Horizontal trailing sprig ────────────────────────────── // A horizontal stem with solid almond leaves sprouting perpendicular, // alternating top/bottom — modeled on the hand-drawn reference sheet. function IvyVine({ width = 380, opacity = 0.5, style = {}, flip = false }) { // Stem is three Q-bezier segments — evaluate the actual path so leaves // sit exactly on the curve, not on an approximated sine wave. // Path: M 20 40 Q 80 26, 140 42 T 260 38 T 380 40 // T command reflects the previous control point about the join. const segs = [ [[20, 40], [80, 26], [140, 42]], [[140, 42], [200, 58], [260, 38]], [[260, 38], [320, 18], [380, 40]], ]; const stem = (t) => { const i = Math.min(2, Math.floor(t * 3)); const s = t * 3 - i; const [P0, P1, P2] = segs[i]; return [ (1 - s) * (1 - s) * P0[0] + 2 * (1 - s) * s * P1[0] + s * s * P2[0], (1 - s) * (1 - s) * P0[1] + 2 * (1 - s) * s * P1[1] + s * s * P2[1], ]; }; // Tangent at parameter t — sample stem just before/after and atan2. const tangent = (t) => { const [x1, y1] = stem(Math.max(0.0001, t - 0.005)); const [x2, y2] = stem(Math.min(0.9999, t + 0.005)); return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; }; const leaves = []; for (let i = 0; i < 12; i++) { const t = (i + 0.5) / 12; const [x, y] = stem(t); const ang = tangent(t); const side = i % 2 === 0 ? -1 : 1; const L = 18 + (hash(i) - 0.5) * 6; // Perpendicular to the local stem tangent, with a slight tip-ward // tilt and a small per-leaf wobble. const rot = ang + side * 80 + (side === 1 ? -8 : 8) + (hash(i + 4) - 0.5) * 14; leaves.push({ x, y, rot, L, outlined: i % 5 === 4, key: i }); } return ( ); } // ── A loose curling sprig — corner accent ────────────────── function IvyCurl({ size = 140, opacity = 0.5, style = {}, flip = false }) { return ( ); } // ── Hanging vertical frond ───────────────────────────────── // Solid filled leaves alternating along a draping arched stem. function FernFrond({ height = 260, opacity = 0.5, style = {}, flip = false }) { const rachis = (t) => [ 88 * (1-t)**3 + 3 * 100 * (1-t)**2 * t + 3 * 56 * (1-t) * t**2 + 28 * t**3, 6 * (1-t)**3 + 3 * 110 * (1-t)**2 * t + 3 * 220 * (1-t) * t**2 + 300 * t**3, ]; const tangent = (t) => { const [x1, y1] = rachis(Math.max(0, t - 0.005)); const [x2, y2] = rachis(Math.min(1, t + 0.005)); return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; }; const leaves = []; for (let i = 0; i < 11; i++) { const t = 0.05 + (i / 10) * 0.90; const [x, y] = rachis(t); const ang = tangent(t); const side = i % 2 === 0 ? 1 : -1; const rot = ang + side * 80 + (side === 1 ? -12 : 12); const L = 36 * (1 - t * 0.62); leaves.push({ x, y, rot, L, key: i }); } return ( ); } // ── Vertical berry sprig ─────────────────────────────────── function BranchSprig({ size = 140, opacity = 0.55, style = {}, flip = false }) { return ( ); } // ── Horizontal sprawling sprig — corner / edge accent ────── function LooseSprig({ size = 200, opacity = 0.45, style = {}, flip = false }) { return ( ); } // ── BotanicalDivider — vine variant with a centered amber bead ───── function BotanicalDivider({ width = 380, style = {} }) { return (

); } // ── Lantern variants (smaller, reusable) ──────────────────── // Shared gradient defs for the small lantern variants. Mount once per page. function LanternDefs() { return ( ); } // Just the lit cage + cap + acorn pendant (native size 100×80). function LanternHead({ x = 0, y = 0, scale = 1 }) { return ( {/* cap — flat top + low pyramid */} {/* eave + dentils */} {[34, 40, 46, 52, 58, 64].map((bx, i) => ( ))} {/* tapered glass cage */} {/* bottom rim + acorn pendant */} ); } // Hanging lantern (chain from above, lantern head at bottom). function HangingLantern({ height = 260, chainLength = 0.5, style = {} }) { const chainPx = 80 * chainLength; const headTop = chainPx + 10; return ( ); } // Floor lamp (small base + short post + lantern head on top). function FloorLamp({ height = 320, style = {} }) { return ( ); } // ── Raven — cohesive ink-black silhouette, flies in + perches ── // One unified shape (single fill, overlapping parts so there are no seams), // no eye/highlight. Named groups raven-body / raven-head / raven-wing-left / // raven-wing-right / raven-tail carry the animation. Flies in from the upper // left with real wingbeats (~3.6s), brakes, folds, and tucks onto the lamp // cap, then runs a slow idle loop forever. A faint amber rim hugs the belly. function Raven({ flightDur = 3.6, perchedOnly = false, reducedMotion = false, style = {} }) { const d = flightDur; // reducedMotion always settles immediately — flying in is itself motion. const settled = perchedOnly || reducedMotion; const begin = settled ? '0s' : `${d}s`; const INK = '#0a0807'; // Near + far wing path pairs (identical command structure so `d` morphs // cleanly from extended → folded). const nearExt = 'M 2 -8 Q -16 -20 -38 -18 L -32 -13 L -40 -13 L -32 -8 Q -16 -7 2 -4 Z'; const nearHalf = 'M 2 -9 Q -10 -12 -22 -6 L -20 -3 L -24 -1 L -19 1 Q -9 0 3 -4 Z'; const nearFold = 'M 2 -9 Q -2 -2 -5 7 L -6 10 L -7 10 L -6 12 Q -2 6 3 -4 Z'; const farExt = 'M 0 -7 Q -16 -18 -36 -16 L -30 -12 L -38 -12 L -30 -7 Q -16 -6 0 -3 Z'; const farHalf = 'M 0 -8 Q -9 -11 -20 -5 L -18 -2 L -22 0 L -17 1 Q -8 0 1 -3 Z'; const farFold = 'M 0 -8 Q -3 -1 -5 7 L -6 10 L -7 10 L -6 12 Q -2 6 1 -3 Z'; return ( ); } window.CG_MOTIFS = { PhotoPlaceholder, PaperFrame, GasLamp, LampMan, HangingLantern, FloorLamp, LanternDefs, Raven, IvyVine, IvyCurl, FernFrond, BotanicalDivider, BranchSprig, LooseSprig, BotanicalDefs }; // ── Man — spawns, climbs up, and sits on a letter of the name ── // Outer container carries the climb-in travel (set by the caller's class); // this figure is the seated end-pose: perched on a letter edge, legs // dangling and swaying, with a gentle lean and an occasional overhead wave. function LampMan({ height = 74, style = {} }) { const INK = '#0a0807'; return ( ); }