/* Shared film helpers — Letterbox, FrameSlot, FilmHeader, Timecode, Outro
Depends on: animations.jsx (Stage, Sprite, useTime, Easing, clamp)
Exports: window.FilmShell = { Letterbox, FrameSlot, FilmHeader, Timecode, Outro, GOLD, GOLD_S, PAPER }
*/
const FilmShell = (() => {
const GOLD = '#c4a26b';
const GOLD_S = '#d4b783';
const PAPER = '#f6f3ec';
function Letterbox() {
return (
<>
);
}
function FrameSlot({ x, y, w, h, label, children, style }) {
return (
{label ?
{label}
: null}
{children}
);
}
function FilmHeader({ filmNo, title, runtime = 30 }) {
return (
TAEKWANG GLASS
EST. 1994 · INCHEON · PYEONGTAEK
FILM {filmNo} / {title}
{runtime}s · 1920×1080 · CINEMATIC
);
}
function Timecode({ runtime = 30 }) {
const t = useTime();
const cur = Math.min(t, runtime);
const secs = String(Math.floor(cur)).padStart(2, '0');
const ms = String(Math.floor((cur % 1) * 100)).padStart(2, '0');
const totalSecs = String(runtime).padStart(2, '0');
return (
● REC
TC 00:00:{secs}.{ms}
/ 00:00:{totalSecs}.00
);
}
function CornerBrand() {
return (
ⓒ 2026 TAEKWANG
BUSINESS REG. 122-81-95636
);
}
// Outro scene — accepts start/end + slogan
function Outro({ start, end, slogan = '빛을 설계하고, 공간의 품격을 완성합니다.' }) {
return (
{({ localTime, duration }) => {
const ease = Easing.easeOutCubic;
const tIn = clamp(localTime / 0.5, 0, 1);
const op = ease(tIn);
const linePct = clamp((localTime - 0.3) / 0.6, 0, 1);
return (
TAEKWANG
SAFETY GLASS
{slogan}
T. 032-555-7392
TAEKWANGGLASS.COM
);
}}
);
}
// Title — fade in slogan + product en/ko
function TitleScene({ start, end, filmNo, eyebrow, big, slogan }) {
return (
{({ localTime, duration }) => {
const ease = Easing.easeOutCubic;
const tIn = clamp(localTime / 0.6, 0, 1);
const tOut = clamp((localTime - (duration - 0.6)) / 0.6, 0, 1);
const op = (localTime < 0.6) ? ease(tIn) : (localTime > duration - 0.6 ? 1 - ease(tOut) : 1);
const y = (localTime < 0.6) ? (1 - ease(tIn)) * 20 : 0;
const linePct = clamp((localTime - 0.4) / 1.0, 0, 1);
return (
— Film N° {filmNo}
{big}.
{slogan}
);
}}
);
}
return { GOLD, GOLD_S, PAPER, Letterbox, FrameSlot, FilmHeader, Timecode, CornerBrand, Outro, TitleScene };
})();
window.FilmShell = FilmShell;