")`, opacity: 0.08, mixBlendMode: 'overlay', zIndex: 10, }} /> ); } function Vignette() { return (

); } // Persistent timeline strip bottom — always visible, progresses through the whole video. function TimelineStrip({ totalDuration, marks }) { const time = useTime(); const progress = clamp(time / totalDuration, 0, 1); return (

{/* Labels row */}

{marks.map((m, i) => { const x = m.pos * 100; const active = time >= m.activateAt; return (

{m.year}

); })}

{/* Track */}

{/* Base line */}

{/* Progress line */}

{/* Dots */} {marks.map((m, i) => { const x = m.pos * 100; const active = time >= m.activateAt; const isPast = time >= m.activateAt + 0.5; return (

); })} {/* Playhead */}

); } // Corner metadata block — date + chapter, always present function ChapterMeta({ chapter, year, subtitle }) { return (

{chapter}

{year}

{subtitle && ( <>

{subtitle}

)}

); } // Title with animated entry: serif display, word-by-word fade/slide-up function AnimatedHeadline({ text, y = 360, x = 80, size = 120, color = COLORS.paper, italic = false, delay = 0, startTime = 0 }) { const { localTime } = useSprite(); const t = localTime - delay; const words = text.split(' '); return (

{words.map((w, i) => { const wDelay = i * 0.08; const wt = clamp((t - wDelay) / 0.6, 0, 1); const eased = Easing.easeOutCubic(wt); return ( {w} ); })}

); } // ─── SCENE 1: Opening / Title card ────────────────────────────────────────── function SceneOpening() { const { localTime, progress } = useSprite(); const bgShift = Easing.easeOutCubic(clamp(localTime / 2, 0, 1)); return ( <> {/* Background building silhouette SVG */}

{/* Eyebrow */}

Emmerske, Tønder

{/* Big title */}

Et hus, et kald,

en skole.

{/* Subtitle */}

Tidslinje over Emmerske Bedehus & Efterskole

{/* Date range */}

1542 — i dag

); } function BuildingSilhouette() { // Hand-drawn SVG of the Emmerske schoolhouse / bedehus return ( ); } // ─── SCENE 2: 1542 — det forsvundne kapel ────────────────────────────────── function Scene1542() { const { localTime } = useSprite(); return ( <> {/* Ruins SVG */}

{/* Right side: text */}

Efter kongeligt dekret forsvinder det middelalderlige kapel i Emmerske. Stedet står tomt. Men landsbyen venter — snart vender det hellige tilbage, denne gang med bøger ved siden af bønnen.

); } // ─── SCENE 3: 1729 — Brorson kaldes ───────────────────────────────────────── function Scene1729() { const { localTime } = useSprite(); const t = localTime; return ( <> {/* Left: portrait placeholder — Brorson */}

{/* Silhouette portrait */} {/* Placeholder tag */}

[ PORTRÆT · PLADSHOLDER ]

{/* Caption */}

Hans Adolph Brorson · 1694–1764

{/* Right: text */}

1729

Provst Schrader og amtmand Holstein opretter et nyt embede i Tønder. Det besættes af en ung pietist og salmedigter —
Hans Adolph Brorson.

); } // ─── SCENE 4: 1730 — bygningen rejses ─────────────────────────────────────── function Scene1730() { const { localTime } = useSprite(); const t = localTime; // Build animation: roof drops in, walls rise, details const wallProg = Easing.easeOutCubic(clamp((t - 0.5) / 1.2, 0, 1)); const roofProg = Easing.easeOutCubic(clamp((t - 1.4) / 0.8, 0, 1)); const windowProg = Easing.easeOutCubic(clamp((t - 2.0) / 0.6, 0, 1)); const stoneProg = Easing.easeOutCubic(clamp((t - 2.6) / 0.6, 0, 1)); return ( <> {/* Large headline left */}

SKOLE · BEDEHUS · LANDSBYENS HJERTE

{/* Stone tablet inscription */}

INDSKRIFT PÅ STENTAVLEN

»Dieses Haus ist … gebaut 1730 …«

— indviet til undervisning i Gottseligkeit for alle sognebørn.

{/* Right: animated building rising */}

); } // ─── SCENE 5: 1730s — Brorsons salmer ─────────────────────────────────────── function SceneBrorsonSong() { const { localTime } = useSprite(); const t = localTime; return ( <> {/* Ambient musical notes floating */}

FØRSTE GANG SUNGET I EMMERSKE

»Her kommer, Jesus,

dine små«

— Brorson samler sognebørn søndag eftermiddag. Pietismens salmer bliver lyden af Emmerske Bedehus.

); } function FloatingNotes() { const { localTime } = useSprite(); const notes = [ { x: 15, y: 30, delay: 0.2, size: 40 }, { x: 85, y: 25, delay: 0.5, size: 32 }, { x: 10, y: 75, delay: 0.8, size: 28 }, { x: 90, y: 70, delay: 1.1, size: 36 }, { x: 25, y: 85, delay: 1.4, size: 24 }, { x: 75, y: 88, delay: 1.7, size: 30 }, ]; return ( <> {notes.map((n, i) => { const t = localTime - n.delay; if (t < 0) return null; const drift = Math.sin(t * 0.8 + i) * 8; const opacity = Easing.easeOutCubic(clamp(t / 0.8, 0, 1)) * 0.5; return (

♪

); })} ); } // ─── SCENE 6: 1835 — udvidelse ────────────────────────────────────────────── function Scene1835() { const { localTime } = useSprite(); const t = localTime; const extensionProg = Easing.easeOutCubic(clamp((t - 0.8) / 1.0, 0, 1)); return ( <> {/* Left text */}

1835

Ny skolestue
mod øst.

Hundrede år efter indvielsen vokser huset. Årstallet smedes i jern på vestgavlen — og står dér endnu.

{/* Right: diagrammatic building with east extension */}

); } // ─── SCENE 7: 1920 — Genforeningen ────────────────────────────────────────── function Scene1920() { const { localTime } = useSprite(); const t = localTime; const flagProg = Easing.easeOutCubic(clamp((t - 0.6) / 1.0, 0, 1)); return ( <> {/* Giant year on left */}

1920

{/* Flag/cross animation right */}

{/* Text block */}

Emmerske får sit eget kirkedistrikt.

Efter Genforeningen får bedehuset sit eget menighedsråd. Dansk bliver sognets sprog, og Joakim Skovgaards altertavle finder sin plads.

); } // ─── SCENE 8: 1943 + 1970 — krig og lukning ───────────────────────────────── function SceneWarClose() { const { localTime } = useSprite(); const t = localTime; return ( <> {/* Split layout: two half-scenes */} {/* 1943 left */}

1943

Nordfløjen
bygges under krigen.

Selv under besættelsen udvides skolen. En tredje længe rejses mod nord. Huset gror videre.

{/* 1970 right */}

1970

Folkeskolen
lukker.

Efter kommunalreformen er der for få børn. Døren låses. Bænkene står tomme. Huset holder vejret i otte år.

{/* 240 years indicator */}

240 ÅR SOM SKOLE · 1730–1970

); } // ─── SCENE 9: 1978 — Efterskolen åbner ────────────────────────────────────── function Scene1978() { const { localTime } = useSprite(); const t = localTime; return ( <> {/* Big reveal: year pops first */}

EFTER OTTE ÅRS STILHED

1978

Emmerske Efterskole åbner.

En selvejende efterskole for ordblinde unge flytter ind i de gamle skolelokaler. Huset finder en ny grund til at stå op om morgenen.

); } // ─── SCENE 10: 2012 — kirken lukker ───────────────────────────────────────── function Scene2012() { const { localTime } = useSprite(); const t = localTime; return ( <> {/* Candle visual left */}

{/* Right: text */}

2012

2. december
— den sidste gudstjeneste.

Emmerske sogn lægges sammen med Tønder. Efter 282 år som bedehus slukkes alterlysene. Men huset bliver stående — nu helt efterskolens.

); } // ─── SCENE 11: I dag ──────────────────────────────────────────────────────── function SceneToday() { const { localTime } = useSprite(); const t = localTime; // Rows of "students" dots const rows = 6, cols = 22; const studentDelay = (r, c) => 0.8 + (r * cols + c) * 0.02; return ( <>

ANNO {new Date().getFullYear()}

{/* Left column: prose */}

I 1985 blev bygningerne fredet. I dag fyldes klasseværelser, gange og gymnastiksal af unge ordblinde, der finder ord, venskaber og selvtillid i de samme sale, Brorson engang sang i.

{/* Right column: stat grid — dots representing students */}

EMMERSKE EFTERSKOLE · NUTID

{Array.from({ length: rows * cols }, (_, i) => { const r = Math.floor(i / cols); const c = i % cols; const d = studentDelay(r, c); const appear = Easing.easeOutBack(clamp((t - d) / 0.4, 0, 1)); return (

); })}

hver prik er en historie, der endnu ikke er skrevet.

); } // ─── SCENE 12: Outro ──────────────────────────────────────────────────────── function SceneOutro() { const { localTime } = useSprite(); const t = localTime; return ( <> {/* Background silhouette */}

1542 · 1730 · 1835 · 1920 · 1943 · 1970 · 1978 · 2012 · I DAG

Næsten 300 år

under det samme tag.

Emmerske Efterskole

); } // ─── Main timeline composition ────────────────────────────────────────────── // Scene schedule (in seconds) — total ~110s const TIMELINE = [ { id: 'opening', start: 0, end: 7, Component: SceneOpening }, { id: '1542', start: 7, end: 15, Component: Scene1542 }, { id: '1729', start: 15, end: 24, Component: Scene1729 }, { id: '1730', start: 24, end: 36, Component: Scene1730 }, { id: 'brorson', start: 36, end: 46, Component: SceneBrorsonSong }, { id: '1835', start: 46, end: 55, Component: Scene1835 }, { id: '1920', start: 55, end: 64, Component: Scene1920 }, { id: 'warclose', start: 64, end: 75, Component: SceneWarClose }, { id: '1978', start: 75, end: 86, Component: Scene1978 }, { id: '2012', start: 86, end: 95, Component: Scene2012 }, { id: 'today', start: 95, end: 106, Component: SceneToday }, { id: 'outro', start: 106, end: 115, Component: SceneOutro }, ]; const TOTAL_DURATION = 115; // Timeline-strip marks (shown from end of opening onward) const MARKS = [ { year: '1542', pos: 0.00, activateAt: 7 }, { year: '1729', pos: 0.10, activateAt: 15 }, { year: '1730', pos: 0.20, activateAt: 24 }, { year: '1732', pos: 0.32, activateAt: 36 }, { year: '1835', pos: 0.43, activateAt: 46 }, { year: '1920', pos: 0.54, activateAt: 55 }, { year: '1943', pos: 0.63, activateAt: 64 }, { year: '1978', pos: 0.75, activateAt: 75 }, { year: '2012', pos: 0.85, activateAt: 86 }, { year: 'I DAG', pos: 1.0, activateAt: 95 }, ]; function TimelineVideo() { const time = useTime(); // Hide chapter strip during opening & outro for cinematic effect const showStrip = time >= 7 && time <= 106; return ( <> {/* Background grain layer */} {/* Scenes */} {TIMELINE.map(({ id, start, end, Component }) => ( ))} {/* Persistent timeline strip */} {showStrip && ( )} {/* Fixed brand mark, bottom right (except opening) */} {time >= 7 && time <= 106 && (

Emmerske Efterskole

)} ); } Object.assign(window, { TimelineVideo, COLORS, FONTS, TOTAL_DURATION, });