// scenes.jsx — sceny dla wideo 60s
// Wspólna paleta
const PALETTE = {
orange: '#F36B1F', // energetyczny akcent
orangeDeep: '#D0531A',
graphite: '#1E2329',
graphiteMid: '#2A3038',
cream: '#F6F2EB',
white: '#FFFFFF',
red: '#DC3545',
};
const FONT = "'Barlow Condensed', 'Arial Narrow', sans-serif";
const FONT_BODY = "'Inter', system-ui, sans-serif";
const FONT_MONO = "'JetBrains Mono', ui-monospace, monospace";
// ───────────────────────────── HELPERS ─────────────────────────────
function Subtitles({ text, bottom = 80 }) {
if (typeof window !== 'undefined' && window.__SUBS_OFF) return null;
return (
{text}
);
}
function BrandBar() {
const t = useTime();
const pulse = 0.5 + 0.5 * Math.sin(t * 2);
return (
SP im. Janusza Korczaka
Góra
);
}
function TimecodeTicker() {
const t = useTime();
const sec = Math.floor(t);
return (
{String(sec).padStart(2, '0')} / 60
);
}
// Pasek postępu u góry (wizualny rytm)
function ProgressTape() {
const t = useTime();
const progress = clamp(t / 60, 0, 1);
return (
);
}
// ───────────────────────────── SCENA 1: HOOK (0-8s) ─────────────────────────────
function SceneHook() {
return (
{({ localTime }) => {
// Ken Burns na zdjęciu szkoły
const zoom = 1.05 + localTime * 0.015;
const pan = localTime * 6;
// Delikatna winieta — tylko dla czytelności tekstu
const vign = 0.15 + Math.min(0.2, localTime * 0.02);
// Slogan pojawia się po 1.2s
const textOp = clamp((localTime - 1.2) / 0.6, 0, 1);
// Pomarańczowy badge z rokiem 1973 (szkoła im. Korczaka istnieje od dekad — symbol tradycji)
const tagOp = clamp((localTime - 3.5) / 0.4, 0, 1);
const tagScale = 0.7 + 0.3 * Easing.easeOutBack(tagOp);
return (
<>
{/* Subtelny gradient dla czytelności */}
{/* Slogan */}
NASZA SZKOŁA
ROŚNIE RAZEM Z NAMI.
{/* Badge pozytywny */}
Czas na
KOLEJNY KROK
);
}}
);
}
// ───────────────────────────── SCENA 2: LICZBY PROBLEMU (8-18s) ─────────────────────────────
function ProblemStat({ number, label, icon, delay, localTime }) {
const lt = localTime - delay;
const op = clamp(lt / 0.6, 0, 1);
const y = (1 - Easing.easeOutCubic(op)) * 30;
const countProgress = clamp(lt / 1.2, 0, 1);
const numInt = typeof number === 'number' ? Math.round(number * Easing.easeOutCubic(countProgress)) : number;
return (
{numInt}
{typeof number === 'number' && {icon}}
{label}
);
}
function SceneProblem() {
return (
{({ localTime }) => {
return (
<>
{/* Diagonal stripe accent */}
{/* Nagłówek */}
— Nasza szkoła w liczbach
Tyle energii.
Tyle pasji.
Czas na więcej miejsca.
{/* Stats row */}
);
}}
);
}
// ───────────────────────────── SCENA 3: PORÓWNANIE (18-28s) ─────────────────────────────
function SceneComparison() {
return (
{({ localTime }) => {
// Wipe z lewej na prawą — prawa strona się odsłania
const wipe = clamp((localTime - 0.5) / 1.5, 0, 1);
const wipeEased = Easing.easeInOutCubic(wipe);
// Tekst "TERAZ" i "PO ROZBUDOWIE"
const labelOp = clamp((localTime - 1.8) / 0.5, 0, 1);
return (
<>
{/* Base: nowa hala (cel — to ma zostać na końcu) */}
{/* Warstwa: obecna szkoła — schówa się od lewej do prawej, odkrywając nową halę */}
{/* Diagonal divider */}
{/* Gradient overlay bottom */}
{/* DZIŚ label — na lewej stronie, widoczne dopóki stara szkoła jeszcze jest */}
Dziś
NASZA SZKOŁA
Dobra baza · gotowa, by rosła dalej
{/* PO label — na prawej stronie, pojawia się po odkryciu nowej hali */}
Po rozbudowie
NOWA HALA
878 m² · Dwie sale · Trybuny
);
}}
);
}
// ───────────────────────────── SCENA 4: HALA ZEWNĄTRZ (28-36s) ─────────────────────────────
function SceneExterior() {
return (
{({ localTime }) => {
// Ken Burns
const zoom = 1.0 + localTime * 0.025;
const panX = localTime * 5;
return (
<>
{/* subtle bottom gradient */}
{/* Headline */}
— Etap I · Nowa hala sportowa
Nowoczesna hala
na miarę naszych dzieci.
{/* Stats chip na prawo */}
);
}}
);
}
function StatChip({ value, unit, label }) {
return (
);
}
// ───────────────────────────── SCENA 5: HALA WNĘTRZE (36-44s) ─────────────────────────────
function SceneInterior() {
return (
{({ localTime }) => {
const zoom = 1.0 + localTime * 0.02;
// Crossfade między dwoma wnętrzami w połowie
const crossfade = clamp((localTime - 4) / 1.2, 0, 1);
return (
<>
{/* Gradient bottom */}
{/* Headline top-left */}
— Wewnątrz
Koszykówka. Siatkówka.
Piłka ręczna.
{/* Feature strip bottom */}
);
}}
);
}
function FeatureTag({ text, delay, localTime, baseDelay }) {
const lt = localTime - baseDelay - delay;
const op = clamp(lt / 0.4, 0, 1);
return (
{text}
);
}
// ───────────────────────────── SCENA 6: KORZYŚCI (44-52s) ─────────────────────────────
function BenefitRow({ num, title, desc, delay, localTime }) {
const lt = localTime - delay;
const op = clamp(lt / 0.5, 0, 1);
const slide = (1 - Easing.easeOutCubic(op)) * 40;
return (
);
}
function SceneBenefits() {
return (
{({ localTime }) => {
return (
<>
{/* accent stripe */}
{/* thumbnail na prawo */}
{/* kontent */}
— Dlaczego teraz
To nie tylko
sala gimnastyczna.
);
}}
);
}
// ───────────────────────────── SCENA 7: CTA (52-60s) ─────────────────────────────
function SceneCTA() {
return (
{({ localTime }) => {
// Ken Burns na zewnętrzu
const zoom = 1.05 + localTime * 0.02;
const titleOp = clamp((localTime - 0.2) / 0.5, 0, 1);
const ctaOp = clamp((localTime - 1.5) / 0.5, 0, 1);
const ctaScale = 0.9 + 0.1 * Easing.easeOutBack(ctaOp);
// Pulsing arrow
const pulse = 0.85 + 0.15 * Math.sin(localTime * 6);
return (
<>
— Dla naszych dzieci
Poprzyj
rozbudowę szkoły.
{/* CTA box */}
✎
Podpisz petycję
na zebraniu rodziców
);
}}
);
}
// ───────────────────────────── GŁÓWNA KOMPOZYCJA ─────────────────────────────
function Video() {
const t = useTime();
const sec = Math.floor(t);
return (
);
}
Object.assign(window, { Video, PALETTE });
