// Lumynax brand + UI icons. // All icons are inline SVG so they recolor via currentColor. // Animated Aurora-Halo logo matching the Flutter onboarding logo: // - halo breathes (3.6s scale + opacity) // - star floats (5s up/down) // - star + glow twinkle (2.4s) // CSS keyframes are injected once; toggle `animate` per instance. if (typeof document !== 'undefined' && !document.getElementById('lumynax-logo-keyframes')) { const s = document.createElement('style'); s.id = 'lumynax-logo-keyframes'; s.textContent = ` @keyframes lumy-halo-breathe { 0%,100%{transform:scale(1);opacity:.45} 50%{transform:scale(1.1);opacity:.78} } @keyframes lumy-star-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3%)} } @keyframes lumy-star-twinkle { 0%,100%{opacity:.82;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} } @keyframes lumy-glow-pulse { 0%,100%{opacity:.30} 50%{opacity:.60} } @keyframes lumy-arc-spin { to { transform: rotate(360deg) } } @keyframes lumy-star-fade-a { 0%,100% { opacity: 0.2; transform: scale(0.85) } 50% { opacity: 1; transform: scale(1.15) } } @keyframes lumy-star-fade-b { 0%,100% { opacity: 0.1; transform: scale(0.8) } 50% { opacity: 0.75; transform: scale(1.1) } } @keyframes lumy-star-drift { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } } .lumy-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .lumy-stars .ls { position: absolute; border-radius: 50%; background: white; box-shadow: 0 0 6px 1px rgba(255,255,255,0.45); will-change: transform, opacity; animation: lumy-star-fade-a var(--dur, 5s) ease-in-out infinite, lumy-star-drift calc(var(--dur, 5s) * 3) ease-in-out infinite; animation-delay: var(--delay, 0s); } .lumy-stars .ls.b { background: #C4A8FF; box-shadow: 0 0 8px 1.5px rgba(196,168,255,0.6); animation: lumy-star-fade-b var(--dur, 4s) ease-in-out infinite, lumy-star-drift calc(var(--dur, 4s) * 3) ease-in-out infinite; } .lumy-stars .ls.lg { box-shadow: 0 0 14px 2px rgba(255,255,255,0.55); } .lumy-stars .ls.lg.b { box-shadow: 0 0 16px 2.5px rgba(196,168,255,0.7); } @media (prefers-reduced-motion: reduce) { .lumy-stars .ls { animation: none; opacity: 0.6; } } [data-theme="light"] .lumy-stars { display: none; } .lumy-svg .halo { transform-origin: 50% 50%; animation: lumy-halo-breathe 3.6s ease-in-out infinite; } .lumy-svg .glow { transform-origin: 50% 50%; animation: lumy-glow-pulse 2.4s ease-in-out infinite; } .lumy-svg .float { transform-origin: 50% 50%; animation: lumy-star-float 5.0s ease-in-out infinite; } .lumy-svg .star { transform-origin: 50% 50%; animation: lumy-star-twinkle 2.4s ease-in-out infinite; } .lumy-svg.no-anim .halo, .lumy-svg.no-anim .glow, .lumy-svg.no-anim .float, .lumy-svg.no-anim .star { animation: none; } @media (prefers-reduced-motion: reduce) { .lumy-svg .halo, .lumy-svg .glow, .lumy-svg .float, .lumy-svg .star { animation: none; } } `; document.head.appendChild(s); } const LumynaxMark = ({ size = 28, halo = true, gradient = true, glow = true, animate = true }) => { const id = React.useId().replace(/:/g, ''); return ( ); }; // Inline pure 4-point spark used decoratively const Spark = ({ size = 14, color = 'currentColor', opacity = 1 }) => ( ); // Feature / persona icons drawn in a consistent 24px stroked style const Ic = { Memory: ({ s = 22 }) => ( ), Reminder: ({ s = 22 }) => ( ), Recall: ({ s = 22 }) => ( ), Mood: ({ s = 22 }) => ( ), Voice: ({ s = 22 }) => ( ), Sun: ({ s = 22 }) => ( ), Moon: ({ s = 22 }) => ( ), Gift: ({ s = 22 }) => ( ), Check: ({ s = 14 }) => ( ), Plus: ({ s = 14 }) => ( ), Apple: ({ s = 20 }) => ( ), Play: ({ s = 20 }) => ( ), Globe: ({ s = 16 }) => ( ), Sun2: ({ s = 18 }) => ( ), Moon2: ({ s = 18 }) => ( ), Heart: ({ s = 22 }) => ( ), Rocket: ({ s = 22 }) => ( ), Sparkle: ({ s = 22 }) => ( ), Book: ({ s = 22 }) => ( ), Cake: ({ s = 18 }) => ( ), Briefcase: ({ s = 18 }) => ( ), Tooth: ({ s = 18 }) => ( ), Slides: ({ s = 18 }) => ( ), Pulse: ({ s = 18 }) => ( ), Users: ({ s = 18 }) => ( ), Dots: ({ s = 18 }) => ( ), ChevronDown: ({ s = 18 }) => ( ), }; // Cosmic starfield used as a subtle hero background. // 28 white primary stars + 18 lavender secondary, each is a small glowing // dot (CSS box-shadow) that twinkles + drifts. Hidden on light theme. const Starfield = () => { // [xPercent, yPercent, sizePx, durSec, delaySec] const primary = [ [4, 18, 2.5, 5.2, 0.0], [8, 62, 1.6, 6.0, 1.4], [12, 12, 3.0, 4.8, 0.6], [15, 45, 1.8, 6.2, 2.1], [19, 78, 2.4, 5.6, 0.3], [23, 28, 2.0, 5.0, 1.8], [27, 8, 1.6, 4.6, 0.9], [31, 55, 2.8, 5.4, 2.5], [35, 35, 1.7, 6.4, 1.2], [38, 72, 2.2, 5.8, 0.5], [42, 18, 3.1, 5.0, 1.7], [46, 50, 1.5, 6.2, 2.8], [50, 85, 2.0, 4.8, 0.2], [54, 22, 1.8, 5.6, 1.5], [58, 65, 2.6, 5.2, 2.2], [62, 38, 1.6, 6.0, 0.8], [66, 12, 2.4, 4.6, 1.9], [70, 78, 3.0, 5.4, 0.4], [73, 28, 1.7, 6.2, 1.1], [77, 58, 2.2, 4.8, 2.4], [81, 14, 2.8, 5.8, 0.7], [85, 42, 1.9, 6.0, 1.6], [88, 70, 1.6, 5.0, 2.0], [92, 30, 2.4, 5.4, 0.3], [95, 55, 1.8, 4.6, 1.3], [97, 18, 2.0, 6.2, 2.6], [6, 88, 2.6, 5.0, 0.5], [11, 35, 1.7, 5.6, 1.8], ]; const secondary = [ [10, 25, 1.4, 4.0, 0.1], [17, 88, 2.0, 4.4, 1.6], [25, 60, 1.6, 4.2, 0.7], [33, 18, 2.4, 3.8, 2.0], [40, 90, 1.5, 4.6, 1.0], [48, 30, 1.8, 4.0, 0.4], [56, 72, 2.2, 4.4, 1.9], [64, 50, 1.4, 4.2, 0.6], [71, 14, 2.0, 4.6, 1.4], [79, 84, 1.6, 3.8, 0.2], [87, 30, 2.4, 4.0, 1.7], [94, 75, 1.5, 4.4, 0.8], [3, 50, 1.8, 4.2, 2.1], [19, 8, 2.0, 3.8, 0.9], [44, 65, 1.6, 4.6, 1.3], [60, 8, 2.2, 4.0, 0.5], [76, 42, 1.5, 4.4, 1.8], [90, 92, 1.8, 4.2, 0.3], ]; return ( ); }; Object.assign(window, { LumynaxMark, Spark, Ic, Starfield });