// Direction 1: "THE REEL" — Netflix-documentary cinematic // Full-bleed autoplaying hero reel; crossfading era panels; bold sans headline. function useIsMobile() { const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia('(max-width: 768px)'); const update = () => setIsMobile(mq.matches); update(); mq.addEventListener('change', update); return () => mq.removeEventListener('change', update); }, []); return isMobile; } function Direction1() { const isMobile = useIsMobile(); const [eraIdx, setEraIdx] = React.useState(0); const [formOpen, setFormOpen] = React.useState(false); const [navOpen, setNavOpen] = React.useState(false); const [soonOpen, setSoonOpen] = React.useState(false); const [muted, setMuted] = React.useState(true); const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Keep muted state synced to every hero video without disturbing play/pause // (the era switcher above is the single source of truth for what plays). React.useEffect(() => { Object.values(videoRefs.current).forEach((v) => { if (v) v.muted = muted; }); }, [muted]); const WA_NUMBER = '4915775234901'; const eras = ['titanic', 'ww2', 'renaissance', 'western']; const DISPLAY_LABELS = { titanic: 'Titanic', ww2: 'World War II', renaissance: 'Renaissance', western: 'Old West' }; const ERA_VIDEOS = { titanic: 'https://media.larsreese.com/reel/Titanic_Teaser.mp4', ww2: 'https://media.larsreese.com/reel/ww2_2.mp4', renaissance: 'https://media.larsreese.com/reel/monalisa.mp4', western: 'https://media.larsreese.com/reel/western.mp4', }; const ERA_POSTERS = { titanic: 'https://media.larsreese.com/reel/Titanic_Teaser-poster.jpg', ww2: 'https://media.larsreese.com/reel/ww2_2-poster.jpg', renaissance: 'https://media.larsreese.com/reel/monalisa-poster.jpg', western: 'https://media.larsreese.com/reel/western-poster.jpg', }; const [durations, setDurations] = React.useState({}); const videoRefs = React.useRef({}); React.useEffect(() => { Object.entries(videoRefs.current).forEach(([key, el]) => { if (!el) return; if (key === eras[eraIdx]) { try { el.currentTime = 0; el.play().catch(() => {}); } catch (_) {} } else { try { el.pause(); } catch (_) {} } }); const dur = durations[eras[eraIdx]]; const ms = dur ? Math.max(3000, Math.round(dur * 1000)) : 15000; const t = setTimeout(() => setEraIdx((i) => (i + 1) % eras.length), ms); return () => clearTimeout(t); }, [eraIdx, durations]); const C = { bg: '#0a0807', fg: '#f4ede0', dim: 'rgba(244,237,224,0.6)', accent: '#e8a156', line: 'rgba(244,237,224,0.12)', sans: '"Geist", "Helvetica Neue", system-ui, sans-serif', serif: '"Spectral", "Times New Roman", serif', mono: '"JetBrains Mono", ui-monospace, monospace', }; // Responsive tokens const R = { pad: isMobile ? '20px' : '56px', padY: isMobile ? '72px' : '140px', padYSm: isMobile ? '48px' : '120px', h1: isMobile ? 52 : 128, h2: isMobile ? 40 : 72, h2Lg: isMobile ? 44 : 104, h3: isMobile ? 32 : 56, heroHeight: isMobile ? '100svh' : 900, gap: isMobile ? 28 : 80, }; return (
{/* NAV */} {/* HERO REEL */}
{eras.map((e, i) => (
{ERA_VIDEOS[e] ? (
))}
{/* HERO COPY */}
NOW REEL · {DISPLAY_LABELS[eras[eraIdx]].toUpperCase()}

Step into
every yesterday.

I build immersive videos from the fragments history leaves behind — blending historical precision with 20 years of experience in documentary filmmaking. For broadcasters, museums, and heritage organisations who want audiences to feel the past, not just see it.

{isMobile && ( )}
{/* mobile era ticker inline — single row */} {isMobile && (
{eras.map((e, i) => ( ))}
)}
{/* Sound toggle — icon-only on mobile (top right below nav), labelled pill on desktop (bottom right) */} {/* era ticker right — desktop only */} {!isMobile && (
{eras.map((e, i) => (
setEraIdx(i)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderTop: `1px solid ${C.line}`, cursor: 'pointer', opacity: i === eraIdx ? 1 : 0.4, transition: 'opacity 0.3s' }}> {String(i + 1).padStart(2, '0')} {DISPLAY_LABELS[e]} {ERA_PALETTES[e].sub.split(' ')[0].replace('c.', '')}
))}
)}
{/* TRUST BAR */}
TRUSTED BY
{['ProSiebenSat.1', 'Florida Entertainment', 'promptr', 'scenery.eu', 'Daiichi Sankyo'].map((l) => (
{l}
))}
{/* CASE STUDIES GRID */}

Selected work

{/* BEFORE / AFTER SPLIT */}
THE METHOD

One image becomes a{isMobile ?
: ' '}world you can step into.

With historical precision, the world around a single photograph or painting is rebuilt — revealing what was never captured, and telling the fascinating stories behind it.

{[ { n: '240+', l: 'Scenes reconstructed' }, { n: '90%', prefix: 'up to', l: isMobile ? 'Cheaper than\nclassical prod.' : 'Cheaper than\ntraditional productions' }, { n: '10×', l: 'Faster delivery' }, ].map((s) => (
{s.prefix && {s.prefix}} {s.n}
{s.l}
))}
{/* PROCESS STRIP */}
HOW IT WORKS

From one image
to an entire film.

{[ { n: '01', t: 'Archive Dive', d: 'Source images, maps, diaries, and period catalogues. Historical accuracy is the contract.', img: 'https://media.larsreese.com/stills/process1.png' }, { n: '02', t: 'Restoration', d: 'Restore, colorize, and upscale what exists. Then use the material as seed for the storyboard.', img: 'https://media.larsreese.com/stills/process2.png' }, { n: '03', t: 'Storyboarding', d: 'Layout the story frame by frame. Extend it to a full world: streets, weather, crowds, faces, inventory.', img: 'https://media.larsreese.com/stills/process3.png' }, { n: '04', t: 'Cinematography', d: 'Bring the storyboard to life — make the camera film in the built world, in broadcast-ready quality.', img: 'https://media.larsreese.com/stills/process4.png' }, ].map((s) => (
{s.n}
{s.t}

{s.d}

))}
{/* FINAL CTA */}
START A PROJECT

What century
would you like to walk through?

{isMobile ? 'WHATSAPP' : 'TEXT ME ON WHATSAPP'} {isMobile ? 'EMAIL' : 'work@larsreese.de'}
{formOpen && setFormOpen(false)} waNumber={WA_NUMBER} C={C} isMobile={isMobile} />} {soonOpen && (
setSoonOpen(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(10,8,7,0.85)', backdropFilter: 'blur(6px)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
e.stopPropagation()} style={{ position: 'relative', background: '#14110d', border: `1px solid ${C.line}`, padding: isMobile ? '40px 32px' : '56px 64px', textAlign: 'center', maxWidth: 440, width: '100%' }}>
INSTAGRAM

Coming soon.

)}
); } function StartProjectModal({ onClose, waNumber, C, isMobile }) { const [name, setName] = React.useState(''); const [org, setOrg] = React.useState(''); const [contact, setContact] = React.useState(''); const [msg, setMsg] = React.useState(''); const canSend = name.trim() && contact.trim() && msg.trim(); const send = (e) => { e.preventDefault(); if (!canSend) return; const text = `Hi Lars,\n\nI'm ${name}${org ? ` from ${org}` : ''}.\nContact: ${contact}\n\n${msg}`; const url = `https://wa.me/${waNumber}?text=${encodeURIComponent(text)}`; window.open(url, '_blank', 'noopener'); onClose(); }; const inputStyle = { width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${C.line}`, padding: '14px 0', fontSize: 16, fontFamily: C.sans, color: C.fg, outline: 'none', fontWeight: 300 }; const labelStyle = { fontFamily: C.mono, fontSize: 10, letterSpacing: 2, color: C.dim, display: 'block' }; return (
e.stopPropagation()} onSubmit={send} style={{ width: '100%', maxWidth: 520, background: '#14110d', border: `1px solid ${C.line}`, padding: isMobile ? '36px 24px' : '48px 44px', color: C.fg, position: 'relative' }}>
START A PROJECT

Tell me about your project.

Leave your details and a short note. I usually reply within a day.

setName(e.target.value)} placeholder="Your name" autoFocus />
setOrg(e.target.value)} placeholder="Optional" />
setContact(e.target.value)} placeholder="How should I reach you?" />