/* invitation-variants.jsx — two composition variations + closing confetti.
* Composes the shared primitives from invitation-scene.jsx onto a
* 1080x1920 canvas. Both variants share the same timeline beats (T) and
* content (C) but differ in layout / framing.
*/
const { useTime, Easing, clamp } = window;
const { Appear, SkyBackground, Bokeh, Sparkles, Balloon, Dove, Cross, Medallion } = window;
const DURATION = 18;
const T = {
medIn: 2.1,
inviteIn: 3.5, inviteOut: 6.3,
titleIn: 6.2,
doveIn: 7.4,
dateIn: 8.9, timeIn: 9.5, venueIn: 10.1,
rsvpIn: 12.5,
detailsOut: 14.5,
closeIn: 15.1,
confettiAt: 14.8,
};
const C = {
invite: "You're Invited!",
name: 'Pavle',
titleLine: '1st Birthday & Christening',
dateLabel: 'When',
date: 'Sunday · 9th August 2026',
timeLabel: 'Time',
time: '15:00',
venueLabel: 'Where',
venue: 'Conty',
venueAddr: 'Avijatičarska bb, Vršac, Serbia',
rsvp: 'RSVP by 29th July · Anđelina or Miloš',
closing: 'Come celebrate with us!',
};
/* ---- palette ---- */
const INK = '#4B5B53'; // soft sage-ink for body
const INK_SOFT = '#7C8A82';
const SAGE = '#8FA98C';
const goldText = {
background: 'linear-gradient(178deg,#F6E7AE 0%,#E4C572 42%,#C39A3F 78%,#A87E2E 100%)',
WebkitBackgroundClip: 'text', backgroundClip: 'text',
WebkitTextFillColor: 'transparent', color: 'transparent',
filter: 'drop-shadow(0 3px 12px rgba(201,162,75,0.45))',
paddingInline: '0.12em',
};
// clip-safe solid gold (for short values like the time)
const goldSolid = {
color: '#C7A047',
textShadow: '0 2px 12px rgba(201,162,75,0.40)',
};
function Script({ text, size, style = {} }) {
return {text}
;
}
function Serif({ text, size, color = INK, weight = 600, ls = '0.01em', caps = false, style = {} }) {
return (
{text}
);
}
function MiniLabel({ text }) {
return (
{text}
);
}
/* gold hairline divider with a tiny diamond */
function GoldDivider({ width = 320 }) {
return (
);
}
/* ---- shared details stack (centered flex column) ---- */
function DetailsStack({ gap = 26 }) {
return (
);
}
/* ---- closing confetti (gentle swirl, keeps drifting on hold) ---- */
const CONFETTI = (() => {
const cols = ['#A8C3A0', '#E6C875', '#AFC9DE', '#F2C9C2', '#FBF4E7', '#C9A24B'];
const arr = [];
for (let i = 0; i < 46; i++) {
arr.push({
x: (i * 113 + 30) % 1060,
start: (i * 167) % 2200,
fall: 130 + (i % 6) * 34,
sway: 26 + (i % 5) * 16,
swayRate: 0.7 + (i % 4) * 0.25,
rot: (i % 2 ? 1 : -1) * (60 + (i % 5) * 40),
phase: (i * 0.7) % (Math.PI * 2),
size: 12 + (i % 5) * 4,
col: cols[i % cols.length],
round: i % 3 === 0,
});
}
return arr;
})();
function Confetti({ startAt }) {
const t = useTime();
const lt = t - startAt;
if (lt < 0) return null;
const globalIn = clamp(lt / 0.8, 0, 1);
const span = 2300;
return (
{CONFETTI.map((c, i) => {
const y = (((c.start + lt * c.fall) % span) + span) % span - 220;
const x = c.x + Math.sin(lt * c.swayRate + c.phase) * c.sway;
const rot = lt * c.rot + c.phase * 60;
const life = clamp(Math.min((y + 220) / 160, (1920 - y) / 240), 0, 1);
return (
);
})}
{/* rising balloons across the scene */}
{/* balloons bobbing around Pavle */}
{/* "You're Invited!" — above the medallion, early */}
{/* Pavle medallion (center) */}
{/* dove tucked above-right of the medallion */}
{/* title below medallion */}
{/* cross divider + details */}
{/* RSVP */}
{C.rsvp}
{/* closing */}
);
}
/* ============================================================
VARIANT B — Storybook Arch + Card
============================================================ */
function ArchFrame({ children }) {
// a soft cream arched portal with a thin gold border
return (
{/* gold rim */}
{/* inner sky window */}
{/* inner hairline */}
{/* balloons clustered at the top corners, outside the arch */}
{/* a couple rising past the lower card */}
{/* arch portal holding medallion + invite + dove */}
{/* lower card panel with the wording */}
{/* title + cross monogram */}
{/* details inside the card */}
{/* rsvp at card foot */}
{C.rsvp}
{/* closing message replaces card content */}
);
}
Object.assign(window, { VariantA, VariantB, DURATION, INVITE_T: T });