/* global React */ const { useState, useEffect, useRef } = React; // ============================================================ // NAV // ============================================================ function Nav({ route, navigate, onPitch }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.body.classList.toggle('menu-locked', menuOpen); return () => document.body.classList.remove('menu-locked'); }, [menuOpen]); const go = (id) => { setMenuOpen(false); navigate(id); }; return ( ); } // ============================================================ // HERO — cinematic crossfading sizzle-reel // ============================================================ function Hero({ projects, navigate, onPitch, motionLevel = 'on', heroVariant = 'reel' }) { const [idx, setIdx] = useState(0); const [tc, setTc] = useState(0); // fake timecode const dur = motionLevel === 'off' ? 99999 : 6200; useEffect(() => { if (motionLevel === 'off') return; const id = setInterval(() => setIdx(i => (i + 1) % projects.length), dur); return () => clearInterval(id); }, [projects.length, dur, motionLevel]); useEffect(() => { const id = setInterval(() => setTc(t => t + 1), 1000); return () => clearInterval(id); }, []); const current = projects[idx]; const tcMin = String(Math.floor(tc / 60) % 60).padStart(2, '0'); const tcSec = String(tc % 60).padStart(2, '0'); return (
{/* Base layer — looping showreel video */}
{/* Per-project colour wash on top of the video */} {projects.map((p, i) => (
))}
REC • 4K • 24fps SLATE 2026.{String(idx + 1).padStart(2, '0')}
TC {tcMin}:{tcSec}:00 BNE / GC / AU
Now featured — {String(idx + 1).padStart(2, '0')} / {String(projects.length).padStart(2, '0')}

{current.title}

{current.tagline}

{current.year}/ {current.format}/ {current.runtime}/ {current.status}
REEL · 2026
{projects.map((p, i) => (
setIdx(i)}>
))}
{current.title}
); } // ============================================================ // MARQUEE STRIP // ============================================================ function MarqueeStrip() { const items = ['INTERFACE', 'WTFitness', 'TOSKA', 'IN DEVELOPMENT', 'IN DEVELOPMENT', 'OPTIONED', 'IN DEVELOPMENT']; const projects = ['INTERFACE', 'The Blood Countess', 'Those Little White Lines', 'Home Away Al.i.Ce', 'Curse of the Seventh Christmas']; return (
{Array(4).fill(0).flatMap((_, k) => projects.map((p, i) => ( {p} ◆ )))}
); } // ============================================================ // SLATE LIST // ============================================================ function SlateList({ projects, navigate, compact = false }) { const [filter, setFilter] = useState(compact ? 'all' : null); const filters = [ { id: 'all', label: 'All' }, { id: 'Feature', label: 'Features' }, { id: 'Series', label: 'Series' }, { id: 'Podcast', label: 'Podcasts' }, { id: 'Short Film', label: 'Short Films' }, { id: 'Book', label: 'Books' } ]; const shown = projects.filter(p => { if (filter === 'all') return true; if (filter === 'In Development' || filter === 'Optioned') return p.status === filter; return p.tags.includes(filter) || p.format === filter; }).slice().sort((a, b) => { if (compact) return 0; const last = ['toska']; const aL = last.includes(a.id), bL = last.includes(b.id); if (aL !== bL) return aL ? 1 : -1; if (filter === 'all') { const priority = ['little-white-lines', 'interface', 'blood-countess-series', 'home-away-alice', 'blood-countess', 'seventh-christmas', 'baba-yaga', 'wtfitness', 'requiem-broadcast', 'seance-society', 'sirens-beacon', 'creators-champion']; const ai = priority.indexOf(a.id), bi = priority.indexOf(b.id); const ap = ai === -1 ? priority.length : ai; const bp = bi === -1 ? priority.length : bi; if (ap !== bp) return ap - bp; } return (b.year || 0) - (a.year || 0); }); return ( <> {!compact && (
{filters.map(f => ( ))}
)} {!compact && filter === 'Podcast' && (
● Red Empire Originals

{window.RE_PODCAST.tagline}

{window.RE_PODCAST.desc}

)}
{filter === null ? null : shown.map((p, i) => (
navigate('project', { id: p.id })}> {String(i + 1).padStart(2, '0')}
{p.title}
{p.tags.slice(0, 3).map((t, j) => ( {t}{j < Math.min(p.tags.length - 1, 2) ? ' · ' : ''} ))}
{p.tagline}
{p.year} {p.runtime}
{p.status} →
))} {!compact && filter === null && (
Select a category above to view the slate.
)}
); } // ============================================================ // AI SECTION // ============================================================ function AISection({ navigate, compact }) { const [active, setActive] = useState(0); useEffect(() => { const id = setInterval(() => setActive(a => (a + 1) % window.RE_AI_PIPELINE.length), 2200); return () => clearInterval(id); }, []); return (
Red Empire × AI

Tools, never authors.
Cinema, still made by humans.

We embrace AI across the creative and technical pipeline to move faster, explore further {' '}and unlock new possibilities in storytelling. What once took months can now happen in days, allowing our teams to spend less time fighting process and more time creating.

The technology is powerful. The creative vision remains human.

Every frame, every performance and every creative decision is shaped and driven by people. Every project is approved by the storytellers behind it. No exceptions.

{navigate && ( )}
{!compact && (
Our Philosophy · The Red Empire Approach

Human imagination.
Intelligently amplified.

We don't view AI as a replacement for writers, actors, directors or artists.

We view it as a creative accelerator.

Our approach combines traditional filmmaking disciplines with next-generation technologies, allowing creators to iterate faster, visualise earlier and push beyond the limitations of conventional production pipelines.

Every project begins with people.
The technology follows.

)}
RE / HYBRID PIPELINE v2.6
{window.RE_AI_PIPELINE.map((row, i) => (
{String(i + 1).padStart(2, '0')}
{row.phase} {row.tagline} {row.desc}
))}
{!compact && (
Performance-Driven Creation

Any character.
Any location.
Any story.

One of the biggest misconceptions about AI-generated content is that it removes the human element.

Our process does the opposite.

For many hybrid productions, performances are captured first — through actors, voice artists, directors and creators. AI is then used to translate, enhance or transform those performances into new visual forms while preserving the emotional authenticity at their core.

The result is not artificial storytelling.

It's human storytelling expressed through new mediums.

)} {!compact && (
What We Believe

What we don't believe

  • AI replaces writers.
  • AI replaces actors.
  • AI replaces directors.
  • AI replaces creativity.

What we do believe

  • AI expands creative possibilities.
  • AI accelerates production.
  • AI lowers barriers.
  • AI enables new forms of storytelling.

Human creativity remains the driving force.

)}
); } // ============================================================ // FOOTER // ============================================================ function Footer({ navigate, onPitch }) { const B = window.RE_BRAND; return ( ); } // ============================================================ // PITCH MODAL // ============================================================ function PitchModal({ open, onClose }) { const [step, setStep] = useState('form'); useEffect(() => { if (open) setStep('form'); }, [open]); if (!open) return null; return (
e.stopPropagation()}> {step === 'form' && ( <> ● The intake

Pitch us
something dangerous.

One paragraph. One line. One word. Whatever the work needs.