// Suri — the Sirisora mascot, redesigned as a chubby owl.
// All inline SVG, scalable, several moods.
function Suri({ mood = 'happy', size = 140, color = '#FF6B2C', wave = false, className = '' }) {
// Body color palette derived from `color`
const tint = (mix) => mixColor(color, '#FFFFFF', mix);
const dark = (mix) => mixColor(color, '#1F1A3D', mix);
const belly = '#FFF1DC';
const ink = '#1F1A3D';
const eyeDisc = '#FFFFFF';
const cheek = '#FFB7C8';
const moods = {
happy: { eye: 'open', mouth: 'smile', wingPose: 'rest', browTilt: 0, tear: false, extra: null },
cheer: { eye: 'closed', mouth: 'wide', wingPose: 'up', browTilt: 0, tear: false, extra: null },
wave: { eye: 'open', mouth: 'smile', wingPose: 'wave', browTilt: 0, tear: false, extra: null },
sleepy: { eye: 'sleepy', mouth: 'small', wingPose: 'rest', browTilt: -4, tear: false, extra: null },
thinking: { eye: 'side', mouth: 'tiny', wingPose: 'rest', browTilt: 3, tear: false, extra: null },
proud: { eye: 'closed', mouth: 'smile', wingPose: 'rest', browTilt: 2, tear: false, extra: null },
sad: { eye: 'sad', mouth: 'frown', wingPose: 'down', browTilt: 6, tear: true, extra: null },
dance: { eye: 'open', mouth: 'wide', wingPose: 'flap', browTilt: 0, tear: false, extra: 'notes' },
kiss: { eye: 'wink', mouth: 'pucker', wingPose: 'kiss', browTilt: 0, tear: false, extra: 'heart' },
flex: { eye: 'open', mouth: 'smirk', wingPose: 'flex', browTilt: 2, tear: false, extra: 'sweat' },
wink: { eye: 'wink', mouth: 'smile', wingPose: 'thumbs', browTilt: 0, tear: false, extra: null },
};
const m = moods[mood] || moods.happy;
return (
);
}
function Sparkle({ cx, cy, size }) {
cx = +cx; cy = +cy;
return (
);
}
// Color helper — mix two hex colors
function mixColor(a, b, t) {
const pa = parseHex(a), pb = parseHex(b);
const r = Math.round(pa.r * (1 - t) + pb.r * t);
const g = Math.round(pa.g * (1 - t) + pb.g * t);
const bl= Math.round(pa.b * (1 - t) + pb.b * t);
return `rgb(${r}, ${g}, ${bl})`;
}
function parseHex(h) {
const s = h.replace('#', '');
const n = parseInt(s.length === 3 ? s.split('').map(c => c + c).join('') : s, 16);
return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
// Speech bubble
function SuriBubble({ children, tail = 'left' }) {
return (
);
}
// ── Star characters — little starling buddies with personality ───────────
const STAR_POSES = ['happy', 'wink', 'cheer', 'chill', 'guitar', 'party', 'dance', 'peace', 'sleepy', 'love', 'rockstar', 'flex', 'traveler', 'money', 'yummy'];
function StarChar({ pose = 'happy', size = 40 }) {
const ink = '#1F1A3D';
const body = '#FFD23F';
const bodyShade = '#E0A800';
const blush = '#FFB7C8';
// Body is a 5-point star centered in 80x80 viewBox
return (
);
}
function FaceTongue({ ink, blush }) {
return (
{/* Tongue sticking out */}
);
}
function FaceYummy({ ink, blush }) {
return (
{/* Half-closed satisfied eyes */}
{/* Smiling open mouth with big licking tongue */}
{/* Drool */}
);
}
function FaceMoneyEyes({ ink, blush }) {
return (
{/* $ signs as eyes */}
$
$
);
}
// Big, expressive open-eye face — the default look for most star poses.
// Uses white sclera + dark pupil + a tiny highlight for that "anime sparkle"
// kid characters always have.
function FaceHappy({ ink, blush }) {
return (
{/* Eye whites */}
{/* Pupils (slightly low for a 'looking up' friendly gaze) */}
{/* Sparkle highlights */}
{/* Blush + smile */}
);
}
// Winking face — open right eye matches FaceHappy, left eye closed cute.
function FaceWink({ ink, blush }) {
return (
{/* Closed left eye — happy curve */}
{/* Open right eye matching FaceHappy */}
);
}
// Cheering face — open eyes with raised brows + big laughing mouth.
function FaceCheer({ ink, blush }) {
return (
{/* Raised brows */}
{/* Open eyes with sparkle */}
{/* Wide laughing mouth */}
);
}
function FaceSleepy({ ink, blush }) {
return (
z
);
}
function FaceLove({ ink, blush }) {
return (
{/* Heart eyes */}
);
}
const SPRINKLE_COLORS = ['#FFD23F', '#FF6B2C', '#00C896', '#6979F8', '#FFB7C8', '#C73E8B'];
function sprinkleStars({ count = 36, duration = 2400 } = {}) {
const W = window.innerWidth;
for (let i = 0; i < count; i++) {
const star = document.createElement('div');
star.className = 'sprinkle-star';
const size = 14 + Math.random() * 22;
const color = SPRINKLE_COLORS[Math.floor(Math.random() * SPRINKLE_COLORS.length)];
star.innerHTML = ``;
star.style.left = `${Math.random() * W}px`;
star.style.top = `-40px`;
star.style.setProperty('--drift', `${(Math.random() - 0.5) * 200}px`);
star.style.setProperty('--spin', `${(Math.random() > 0.5 ? 1 : -1) * (360 + Math.random() * 360)}deg`);
star.style.animationDuration = `${duration + Math.random() * 800}ms`;
star.style.animationDelay = `${Math.random() * 400}ms`;
document.body.appendChild(star);
setTimeout(() => star.remove(), duration + 1400);
}
}
function fireConfetti() { sprinkleStars({ count: 36 }); }
function jarMix(hex, mix = '#FFFFFF', weight = 0.35) {
const h = String(hex || '#6979F8').replace('#', '');
if (h.length !== 6) return hex;
const m = mix.replace('#', '');
const ch = (i) => parseInt(h.slice(i, i + 2), 16);
const cm = (i) => parseInt(m.slice(i, i + 2), 16);
const blend = (a, b) => Math.round(a * (1 - weight) + b * weight);
const toHex = (n) => n.toString(16).padStart(2, '0');
return `#${toHex(blend(ch(0), cm(0)))}${toHex(blend(ch(2), cm(2)))}${toHex(blend(ch(4), cm(4)))}`;
}
function JarBabyFace({ mood = 'idle', ink, eyeY = 80 }) {
const eye = (cx, side) => {
const happy = mood === 'happy' || mood === 'excited';
const sad = mood === 'sad';
const envy = mood === 'envy';
if (happy) {
return ;
}
if (sad) {
return (
{side === 'left' && }
);
}
const pupilShift = envy ? 1.8 : 0;
return (
{mood === 'idle' && (
)}
);
};
const mouth = () => {
const my = eyeY + 8;
if (mood === 'happy' || mood === 'excited') {
return ;
}
if (mood === 'sad') {
return ;
}
if (mood === 'envy') {
return ;
}
return ;
};
const blushOpacity = mood === 'sad' ? 0.35 : mood === 'envy' ? 0.55 : 0.82;
return (
{mood === 'idle' && (
)}
{eye(42, 'left')}
{eye(58, 'right')}
{mouth()}
{mood === 'envy' && (
)}
);
}
// Cute cloth-top jar baby — squat glass + fabric cover & twine bow; Sirisora colors via `color`.
function StarJar({ color = '#6979F8', fillPct = 0.5, size = 120, id: jarId, mood = 'idle', emoji }) {
const ink = '#1F1A3D';
const clipId = `jar-clip-${jarId || `${String(color).replace('#', '')}-${size}`}`;
const liquid = jarMix(color, '#FFFFFF', 0.15);
const fabric = color;
const fabricDark = jarMix(color, '#1F1A3D', 0.28);
const fabricLight = jarMix(color, '#FFFFFF', 0.38);
const twine = '#C9A06C';
const twineDark = '#8B6538';
// Squat rounded glass jar — wide & short like the reference
const bodyPath = 'M24 48 C20 48 18 52 18 58 L18 106 C18 117 28 121 50 121 C72 121 82 117 82 106 L82 58 C82 52 80 48 76 48 L72 48 C72 38 62 36 50 36 C38 36 28 38 28 48 Z';
const fillBottom = 119;
const fillTop = 56;
const fillY = fillBottom - (fillBottom - fillTop) * Math.max(0, Math.min(1, fillPct));
const starCount = Math.min(6, Math.max(0, Math.floor(fillPct * 8)));
const showSparkles = mood === 'happy' || mood === 'excited' || fillPct > 0.15;
return (
);
}
Object.assign(window, { Suri, SuriBubble, fireConfetti, sprinkleStars, StarJar, StarChar, STAR_POSES });