// scenes.jsx — scene komponente za Lukinu animiranu pozivnicu
// Ovisi o animations.jsx (Stage, useTime, interpolate, animate, Easing, clamp)
const C = {
six:'#ffd23f', sixGlow:'#ffb800', sixShadow:'#b87f00',
seven:'#38e1ff', sevenGlow:'#00b4e6', sevenShadow:'#0077a3',
ink:'#fff7ea', bg:'#0a0618', bg0:'#160b33',
};
const W = 1080, H = 1920;
// ── helperi ────────────────────────────────────────────────
const endFade = (t) => 1; // bez loop-a: ništa se ne gasi na kraju
const introFade = (t) => clamp(t / 0.6, 0, 1); // ulaz iz crnog
// ── zvjezdice (fiksni raspored, CSS treperenje) ────────────
const STARS = Array.from({length:30}, (_,i) => ({
left: Math.random()*100,
top: Math.random()*92,
size: 4 + Math.random()*7,
delay: Math.random()*3.4,
dur: 2.8 + Math.random()*2,
}));
function Stars(){
const t = useTime();
// zvjezdice nestaju kad krene priča (oko 3.4s)
const op = (1 - clamp((t - 3.2)/1.0, 0, 1)) * introFade(t);
return (
);
}
// ── pozadina + glow ────────────────────────────────────────
function Backdrop(){
const t = useTime();
const glow = animate({from:0, to:1, start:6.2, end:9, ease:Easing.easeInOutCubic})(t) * endFade(t);
return (
{/* eksplozivni obojeni sjaj koji raste prema finalu */}
🤫
Želim vam otkriti jednu tajnu!
pssst…
);
}
// ── natpisi (gornja zona) ──────────────────────────────────
function Caption({text, start, end, color}){
const t = useTime();
if (t < start - 0.1 || t > end + 0.6) return null;
const inT = Easing.easeOutBack(clamp((t - start)/0.5, 0, 1));
const outT = Easing.easeInCubic(clamp((t - end)/0.5, 0, 1));
const op = clamp((t-start)/0.4,0,1) * (1 - outT) * endFade(t);
const ty = (1 - inT) * -40 + outT * -20;
return (
{text}
);
}
// ── veliki broj ────────────────────────────────────────────
function BigNumber({value, color, glow, shadow, appearAt, fadeDur=0.5, xFn, settleAt, wigPhase}){
const t = useTime();
if (t < appearAt - 0.01) return null;
const op = clamp((t - appearAt)/fadeDur, 0, 1) * endFade(t);
// ulaz: blagi scale dok klizi s ruba
const enter = Easing.easeOutCubic(clamp((t - appearAt)/0.7, 0, 1));
const baseScale = 0.86 + 0.14*enter;
// horizontalni položaj (klizanje s ruba na svoje mjesto)
const x = xFn(t);
// mirno lebdenje nakon slijeganja
const settle = clamp((t - settleAt)/0.5, 0, 1);
const bob = Math.sin(t*2.0 + wigPhase) * 22 * settle;
const wig = Math.sin(t*1.6 + wigPhase) * 4 * settle;
const breathe = Math.sin(t*2.0 + wigPhase) * 0.02 * settle;
return (
{value}
);
}
// ── poziv na skrol (zadnja sekunda) ───────────────────────
function ScrollHint(){
const t = useTime();
const inT = Easing.easeOutBack(clamp((t - 12.4)/0.7, 0, 1));
if (inT <= 0) return null;
const op = clamp((t - 12.4)/0.5, 0, 1) * endFade(t);
return (
);
}
// ── finale natpis ──────────────────────────────────────────
function Finale(){
const t = useTime();
const inT = Easing.easeOutBack(clamp((t - 8.5)/0.6, 0, 1));
if (inT <= 0) return null;
const op = clamp((t-8.5)/0.4,0,1) * endFade(t);
return (
to je moja tajna! 🎉
);
}
// ── konfeti (deterministički, vezan uz vrijeme) ────────────
const CONF_COLORS = ['#ffd23f','#38e1ff','#ff4fd8','#7cff5a','#ff8a3d','#ffffff'];
const PARTICLES = Array.from({length:170}, () => {
const ang = (-Math.PI/2) + (Math.random()-0.5)*Math.PI*0.95;
const spd = 900 + Math.random()*1500;
return {
x0: W/2 + (Math.random()-0.5)*180,
y0: H*0.40 + (Math.random()-0.5)*120,
vx: Math.cos(ang)*spd,
vy: Math.sin(ang)*spd,
g: 1500 + Math.random()*500,
size: 16 + Math.random()*22,
rot0: Math.random()*6.28,
vr: (Math.random()-0.5)*10,
color: CONF_COLORS[(Math.random()*CONF_COLORS.length)|0],
delay: Math.random()*0.5,
life: 2.6 + Math.random()*1.4,
};
});
function Confetti({start}){
const t = useTime();
const ref = React.useRef(null);
React.useEffect(()=>{
const cv = ref.current; if(!cv) return;
const ctx = cv.getContext('2d');
ctx.clearRect(0,0,W,H);
const base = t - start;
if (base < 0) return;
for (const p of PARTICLES){
const lt = base - p.delay;
if (lt < 0) continue;
if (lt > p.life) continue;
const x = p.x0 + p.vx*lt;
const y = p.y0 + p.vy*lt + 0.5*p.g*lt*lt;
if (y > H + 60) continue;
const alpha = clamp(1 - lt/p.life, 0, 1) * endFade(t);
if (alpha <= 0) continue;
const rot = p.rot0 + p.vr*lt;
ctx.save();
ctx.translate(x, y);
ctx.rotate(rot);
ctx.globalAlpha = alpha;
ctx.fillStyle = p.color;
ctx.fillRect(-p.size/2, -p.size/2, p.size, p.size*0.62);
ctx.restore();
}
}, [t, start]);
return ;
}
// ── ruke koje "drže" 6 i 7 (gore/dolje u suprotnim smjerovima) ──
function Hands(){
const t = useTime();
const appearAt = 8.2;
const a = clamp((t - appearAt)/0.6, 0, 1);
if (a <= 0) return null;
const op = a * endFade(t);
const ease = Easing.easeOutBack(a);
const entryY = (1 - ease) * 70; // uklize odozdo
const amp = 52;
const osc = Math.sin(t * 2.3); // zajednički ritam
const leftY = -osc * amp; // lijeva gore…
const rightY = osc * amp; // …desna dolje (suprotno)
const w = 470, h = Math.round(w * 348/688);
const top = Math.round(H * 0.685);
const filt = 'invert(1) drop-shadow(0 8px 16px rgba(0,0,0,.55))';
return (
);
}
// ── ROOT ───────────────────────────────────────────────────
function Invitation(){
const t = useTime();
// data-screen-label za komentiranje po sekundi
React.useEffect(()=>{
const el = document.getElementById('vidroot');
if (el) el.setAttribute('data-screen-label', 't=' + t.toFixed(1) + 's');
}, [t]);
return (
Više neću imati 6 godina…}
start={3.7} end={6.0}/>
…jer uskoro punim 7!}
start={6.8} end={999}/>
);
}
window.Invitation = Invitation;
