// florals.jsx — fine line floral decorations inspired by Natacha's book // All florals use currentColor so they can be tinted via parent color. const FloralBranch1 = ({ className = "", style = {} }) => ( {/* small berries */} {/* leaf cluster 1 */} {/* small flower */} {[0,1,2,3,4,5].map(i => ( ))} {/* berries cluster */} {/* leaves */} {/* tiny 4-petal flower */} {[0,1,2,3].map(i => ( ))} {/* end leaves */} ); const FloralCornerTL = ({ className = "", style = {} }) => ( {/* big flower */} {[0,1,2,3,4,5,6,7].map(i => ( ))} {/* leaves along stem */} {/* small flower */} {[0,1,2,3,4].map(i => ( ))} {/* berries */} ); const FloralCornerBR = ({ className = "", style = {} }) => ( {[0,1,2,3,4,5,6,7].map(i => ( ))} {[0,1,2,3,4].map(i => ( ))} ); const FloralSprig = ({ className = "", style = {}, seed = 0 }) => { const rot = seed * 37 % 360; return ( {[0,1,2,3,4,5].map(i => ( ))} ); }; const FloralWreath = ({ className = "", style = {} }) => ( {[0,1,2,3,4,5,6,7].map(i => { const a = (i / 8) * Math.PI * 2; const x = 100 + Math.cos(a) * 70; const y = 100 + Math.sin(a) * 70; const rot = (a * 180 / Math.PI) + 90; return ( ); })} ); const FloralDivider = ({ className = "", style = {} }) => ( {[0,1,2,3,4,5,6,7].map(i => ( ))} {/* end leaves */} ); // flower pattern background tile (very subtle) const FloralPattern = ({ opacity = 0.06 }) => ( {[0,1,2,3,4,5].map(i => ( ))} ); // soft paper grain const PaperGrain = ({ opacity = 0.5 }) => (
); // ─── New minimalist motifs (inspired by qi87 + user ref) ────────────── // 4-point sparkle star — used like sparkles/glitter const Sparkle = ({ size = 16, color = "currentColor", style = {} }) => ( ); // Daisy — 5 rounded petals, flat fill const Daisy = ({ size = 36, color = "currentColor", centerColor, style = {} }) => ( {[0,1,2,3,4].map(i => ( ))} ); // Tiny line-art flower (5 petals, outline only) const TinyFlower = ({ size = 24, color = "currentColor", style = {} }) => ( {[0,1,2,3,4].map(i => ( ))} ); // Eucalyptus branch — alternating rounded leaves const EucalyptusBranch = ({ className = "", style = {} }) => ( {[20, 50, 80, 110, 140, 170].map((x, i) => { const top = i % 2 === 0; const cy = top ? 28 : 52; const ry = 7; return ( ); })} {[35, 65, 95, 125, 155].map((x, i) => { const top = i % 2 === 0; const cy = top ? 30 : 50; return ( ); })} ); // Fern frond — thin spine with paired pinnae const FernLeaf = ({ className = "", style = {} }) => ( {Array.from({length: 12}).map((_, i) => { const y = 20 + i * 14; const len = 26 - i * 1.6; const skew = 8 - i * 0.5; return ( ); })} ); // Small sun — circle with rays const SunBurst = ({ size = 32, color = "currentColor", style = {} }) => ( {[0,1,2,3,4,5,6,7].map(i => { const a = (i / 8) * Math.PI * 2; const x1 = 20 + Math.cos(a) * 10; const y1 = 20 + Math.sin(a) * 10; const x2 = 20 + Math.cos(a) * 15; const y2 = 20 + Math.sin(a) * 15; return ; })} ); // Scattered sparkles container — uses absolute positioning const SparkleField = ({ count = 10, color = "currentColor", opacity = 0.6, seed = 0 }) => { const items = React.useMemo(() => { const rand = (i) => { const x = Math.sin(i * 12.9898 + seed * 78.233) * 43758.5453; return x - Math.floor(x); }; return Array.from({length: count}).map((_, i) => ({ top: rand(i*3) * 100 + '%', left: rand(i*3+1) * 100 + '%', size: 8 + rand(i*3+2) * 14, opacity: 0.4 + rand(i*5) * 0.6, })); }, [count, seed]); return (
{items.map((p, i) => ( ))}
); }; // Animated blob shape (organic background element) const SoftBlob = ({ size = 400, color = "currentColor", opacity = 0.12, style = {} }) => ( ); Object.assign(window, { FloralBranch1, FloralCornerTL, FloralCornerBR, FloralSprig, FloralWreath, FloralDivider, FloralPattern, PaperGrain, SoftBlob, Sparkle, Daisy, TinyFlower, EucalyptusBranch, FernLeaf, SunBurst, SparkleField });