{/* drop shadow */}
);
}
// HorseShape — cleaner cartoon horse. Head is a distinct oval ON TOP of a tall
// curved neck. Body is a bean. Legs are thin spread-out strokes in gallop pose.
// viewBox-local: head at top (y≈-110), body at center, feet at y≈80.
function HorseShape({ color, fillOpacity = 1 }) {
const stroke = COLORS.ink;
const sw = 7;
return (
{/* TAIL — thick flowing stroke off the back */}
{/* LEGS — 4 in flying-gallop pose */}
{/* back stretched */}
{/* back bent */}
{/* front bent */}
{/* front stretched */}
{/* BODY — wide bean, tilted slightly up at front */}
{/* NECK — tall S-curve connecting front of body up to head base */}
{/* HEAD — clear elongated oval, tilted forward */}
{/* EARS — two pointed triangles on top of head */}
{/* MANE — bold flowing stroke down the back of the neck */}
{/* EYE + nostril on the head */}
{/* speed lines behind */}
);
}
function Horses({ time }) {
// shrink + recentre when transitioning into Share/Print
const shrink = range(time, T.shrinkArt, Easing.easeInOutCubic);
const baseScale = lerp(1, 0.62, shrink);
const baseY = lerp(0, -60, shrink);
return (
);
}
// Share button + cursor + icons
function ShareScene({ time }) {
const btnIn = range(time, T.shareBtnIn, Easing.easeOutBack);
const btnOut = range(time, T.shareBtnOut, Easing.easeInCubic);
const btnY = lerp(80, 0, btnIn) + btnOut * -40;
const btnOpacity = btnIn * (1 - btnOut);
// press animation
const pressed = range(time, T.cursorClick, Easing.easeInOutCubic);
const scale = lerp(1, 0.92, pressed > 0.4 ? 1 : pressed * 2.5);
if (btnOpacity <= 0.01) return null;
return (
{/* shadow */}
SHARE
{/* paper-airplane icon */}
{/* click ripple */}
);
}
function ClickRipple({ time }) {
const t = range(time, [T.cursorClick[0]+0.05, T.iconsFan[0]+0.15], Easing.easeOutCubic);
if (t <= 0 || t >= 1) return null;
const r = lerp(20, 220, t);
return ;
}
function Cursor({ time }) {
const inAmt = range(time, T.cursorIn, Easing.easeOutCubic);
const outAmt = range(time, T.cursorOut, Easing.easeInQuad);
if (inAmt <= 0 || outAmt >= 1) return null;
// travel: from off-screen right to share button at (960, 820)
const targetX = 960 + 80;
const targetY = 820 - 20;
const startX = 1680, startY = 320;
const x = lerp(startX, targetX, inAmt);
const y = lerp(startY, targetY, inAmt);
// click pulse
const clickT = range(time, T.cursorClick, Easing.easeInOutQuad);
const scale = 1 - (clickT > 0.5 ? (1 - clickT) : clickT) * 0.18;
return (
);
}
function ShareIcons({ time }) {
const fan = range(time, T.iconsFan, Easing.easeOutBack);
const out = range(time, T.iconsOut, Easing.easeInQuad);
const opacity = fan * (1 - out);
if (opacity <= 0.01) return null;
// 3 icons fan out from button center
const items = [
{ angle: -50, label: 'link', draw:
{items.map((it, i) => {
const rad = (it.angle * Math.PI) / 180;
const x = Math.sin(rad) * radius;
const y = -Math.abs(Math.cos(rad)) * radius - 80;
return (
{/* paper chip */}
{it.draw}
);
})}
);
}
function LinkIcon(){return (
);}
function MailIcon(){return (
);}
function GramIcon(){return (
);}
// Wall + nail (Print scene)
function Wall({ time }) {
const inAmt = range(time, T.wallIn, Easing.easeOutCubic);
if (inAmt <= 0) return null;
return (
{/* warm wall wash */}
);
}
// Wooden frame snapping around the artwork + hang on wall.
// Built as HTML divs (not SVG) so the embedded painting ![]()
renders reliably.
function FramedPainting({ time }) {
const snap = range(time, T.frameSnap, Easing.easeOutBack);
const hang = range(time, T.hangDrop, Easing.easeOutBack);
if (snap <= 0) return null;
const frameW = 760, frameH = 570;
const cx = 960;
const startCY = 480;
const endCY = 540;
const cy = lerp(startCY, endCY, hang);
const wobble = Math.sin(hang * Math.PI * 2.2) * (1 - hang) * 3.5;
const scale = lerp(0.94, 1, snap);
const mat = 28;
return (
);}
function HorsesStatic(){
const horses = [
{x:-160,y:-30,s:2.4,c:COLORS.walnut},
{x: 60, y: 20,s:2.1,c:COLORS.terracotta},
{x: 220,y:-20,s:1.9,c:COLORS.gold},
];
return (
{horses.map((h,i)=>(
))}
);
}
// Paper background texture (subtle horizontal striations for warmth)
function Paper() {
const tw = useTweaks_();
const paper = tw.paperColor || COLORS.paper;
return (
{[...Array(8)].map((_,i)=>(
);
}
// Section label captions at the bottom-left (small Caveat handwritten note)
function Caption({ time }) {
const tw = useTweaks_();
if (tw.showCaption === false) return null;
let label = '';
if (time < 4.0) label = '01 · Create';
else if (time < 6.1) label = '02 · Share';
else label = '03 · Print';
return (
{label}
);
}
// Tagline that appears under the Create title in a handwritten font
// ────────────────────────────────────────────────────────────────────
// MAIL DELIVERY — a cartoon contour mailbox slides in on a wooden post.
// An envelope (with a mini horse painting peek) flies from the framed
// print across to the mailbox; the flag flips up to confirm "sent".
// ────────────────────────────────────────────────────────────────────
const MAILBOX = { x: 1520, y: 760 }; // mailbox base position
const PAINTING_HANG = { x: 960, y: 540 }; // framed painting centre when hung
function Mailbox({ time }) {
const tw = useTweaks_();
if (tw.showMail === false) return null;
const slideIn = range(time, T.mailboxIn, Easing.easeOutBack);
if (slideIn <= 0) return null;
const tx = lerp(500, 0, slideIn); // slides in from right
// flag raise
const flag = range(time, T.flagRaise, Easing.easeOutBack);
const flagAngle = lerp(-90, 0, flag); // -90 = horizontal (down), 0 = vertical (up)
const stroke = COLORS.ink;
const sw = 5;
return (
{/* wooden post */}
{/* main box (rounded top) */}
{/* mail slot */}
{/* flag on the side — pivots at base */}
{/* flag pole */}
{/* flag fabric */}
{/* tiny grass/ground at base */}
);
}
function FlyingEnvelope({ time }) {
const tw = useTweaks_();
if (tw.showMail === false) return null;
const peel = range(time, T.envelopePeel, Easing.easeOutCubic);
const fly = range(time, T.envelopeFly, Easing.easeInOutCubic);
const done = range(time, [T.envelopeFly[1], T.envelopeFly[1] + 0.15], Easing.easeInQuad);
if (peel <= 0 || done >= 1) return null;
// start: painting centre → end: mailbox slot
const sx = PAINTING_HANG.x;
const sy = PAINTING_HANG.y;
const ex = MAILBOX.x - 40;
const ey = MAILBOX.y - 130;
const cx = (sx + ex) / 2;
const cy = Math.min(sy, ey) - 280; // arc high
const t = fly;
const u = 1 - t;
const px = u*u*sx + 2*u*t*cx + t*t*ex;
const py = u*u*sy + 2*u*t*cy + t*t*ey;
// peel-out: envelope grows from painting before flying
const scale = lerp(0.4, 1, peel) * lerp(1, 0.65, fly);
// rotation along arc (tangent)
const dxdt = 2*u*(cx-sx) + 2*t*(ex-cx);
const dydt = 2*u*(cy-sy) + 2*t*(ey-cy);
const angle = fly > 0.02 ? Math.atan2(dydt, dxdt) * 180 / Math.PI : 0;
// tilt envelope slightly during flight (paper airplane style)
const tilt = lerp(-5, 8, fly);
const opacity = peel * (1 - done);
return (
{/* envelope back */}
F
{/* motion trail dots behind envelope */}
{fly > 0.1 && fly < 0.95 && (
)}
);
}
// Final callout: "Sent." caption above mailbox after the flag flips
function MailSentCallout({ time }) {
const tw = useTweaks_();
if (tw.showMail === false) return null;
const inAmt = range(time, [T.flagRaise[1] - 0.2, T.flagRaise[1] + 0.1], Easing.easeOutBack);
if (inAmt <= 0) return null;
const tilt = -4 + Math.sin(time * 3) * 1.5;
return (
sent!
{/* underline scribble */}
);
}
// Tweaks-aware tagline
function CreateTagline({ time }) {
const tw = useTweaks_();
if (tw.showTagline === false) return null;
const inAmt = range(time, T.taglineIn, Easing.easeOutBack);
const outAmt = range(time, T.createOut, Easing.easeInCubic);
const opacity = inAmt * (1 - outAmt);
if (opacity <= 0.01) return null;
const ty = lerp(20, 0, inAmt) + outAmt * -16;
// gentle drift
const drift = Math.sin(time * 2.2) * 1.5;
return (
{tw.taglineText || 'images with words'}
{/* tiny squiggle accent */}
);
}
// ── MASTER COMPOSITION ──────────────────────────────────────────────────────
function FeoraVideo({ tweaks = {} }) {
const time = useTime();
// update timestamp label on root for comment context
React.useEffect(()=>{
const r = document.querySelector('[data-screen-label]');
if (r) {
const t = Math.floor(time*100)/100;
r.setAttribute('data-screen-label', `t=${t.toFixed(2)}s`);
}
}, [time]);
return (
{/* Back layer — SVG: paper background, wall, prompt box, paint splashes */}
{/* Painting layer — HTML img with brush-wipe reveal */}
{/* Framed print — HTML divs (replaces raw painting once frame snaps in) */}
{/* Front layer — SVG: share UI, cursor, mail delivery, titles, caption */}
);
}
// expose to global scope (Babel scopes per
0 ? `0 ${10*settle}px ${40*settle}px rgba(29,27,24,${0.18*settle})` : 'none'
}}/>
{/* the painting itself, clip-wiped from the left */}
{/* leading brush-stroke band */}
{reveal < 1 && reveal > 0 && (
)}
{/* subtle border once settled */}
{settle > 0.3 && (
)}
);
}
// Static painting used inside the framed print scene (absolute-positioned img).
function PaintingStatic({ left, top, width, height }){
return (
{/* leading brush-stroke band */}
{reveal < 1 && reveal > 0 && (
)}
{/* subtle border once settled */}
{settle > 0.3 && (
)}
);
}
// HorseShape — cleaner cartoon horse. Head is a distinct oval ON TOP of a tall
// curved neck. Body is a bean. Legs are thin spread-out strokes in gallop pose.
// viewBox-local: head at top (y≈-110), body at center, feet at y≈80.
function HorseShape({ color, fillOpacity = 1 }) {
const stroke = COLORS.ink;
const sw = 7;
return (
{/* drop shadow on wall */}
{/* outer walnut frame */}
);
}
// static (non-time-driven) versions used inside the framed picture
function PaintSplashesStatic(){return (
{/* gold bevel highlight */}
{/* cream mat with painting inside */}
