const { services, projects, principles, processSteps, fit, faqs, journal: journalEntries } = window.ANSEL_DATA; // ─── Proof: Featured reel — cinematic matted frame ───────────────────── function FeaturedReel() { return (
● SELECTED REEL // N° 044 // RENDERED 2026.03
{/* Subtle moving scan line */}
{/* Play indicator */}
FIRST DAY · 1980

The quietest shot was the hardest to render.

A short narrative built to demonstrate emotional texture, pacing, and restraint — a 1980s opening sequence in grainy 16mm. No performative flourish. Just a lunchbox, a piano note, and a silence we earned.

{[ ['Project', 'N° 044 · First Day'], ['Category', 'Narrative · Brand film'], ['Aspect', '1:1 · 16:9 · 9:16'], ['Direction', 'Ansel Studio'], ['Runtime', '02:14'], ['Status', 'Rendered'], ].map(([k, v]) => (
{k} {v}
))}
); } // ─── Mission — pull quote ───────────────────────────────────────────── function Mission() { return (
— CREDO § 01

“We use AI to compress time — not to remove taste. Infinite reach, with a human touch.”

ADAM COHEN · DIRECTOR // STUDIO NOTE 02
); } // ─── Services — editorial grid ───────────────────────────────────────── function Services() { const [hovered, setHovered] = useState(null); return (
Six ways
we show up.} />

Every engagement is bespoke, but almost all of them sit inside one of these shapes. Scope and price flex; the standard doesn't.

{services.map((s, i) => (
setHovered(i)} onMouseLeave={() => setHovered(null)} style={{ display: 'grid', gridTemplateColumns: '80px 1.2fr 2fr 180px', gap: 40, padding: '36px 0', borderBottom: '1px solid var(--border)', alignItems: 'baseline', background: hovered === i ? 'linear-gradient(90deg, rgba(42,42,40,0.5) 0%, transparent 60%)' : 'transparent', transition: 'background .4s ease', cursor: 'pointer', }} className="svc-row" >
{s.code}

{s.title} {s.sub}

{s.body}

→ {s.output}
))}
); } // ─── Work — selected projects grid ───────────────────────────────────── function Work({ onNav }) { return (
Recent frames
we're proud of.} />
{projects.map((p, i) => (
{p.aspect}
{p.category.toUpperCase()}

{p.title}

{p.summary}

{p.year}
{p.runtime}
{p.client} Read case →
))}
); } // ─── Process ─────────────────────────────────────────────────────────── function Process() { return (
How a project
actually moves.} sub="Five phases across three to six weeks. No magic. No theater. Just an edit bay that happens to run on a different pipeline." />
{processSteps.map((p, i) => (
{p.dur}
{p.n}

{p.t}

{p.d}

 ))}
); } // ─── Principles ──────────────────────────────────────────────────────── function Principles() { return (
Four rules
we work by.} />

A small studio can hold one clear idea. This is ours. These rules decide what we take on, what we refuse, and what we finish.

{principles.map((p, i) => (
{p.num}

{p.t}

{p.d}

 ))}
); } // ─── Fit / Not for everyone ───────────────────────────────────────────── function Fit() { return (
Not for everyone,
and that's the point.} sub="Ansel works best with a small number of serious clients each quarter. Here is how we decide — and how you should." />
WE'RE A FIT IF —
    {fit.yes.map((l, i) => (
  • 0{i + 1} {l}
    • ))}
WE'RE NOT IF
    {fit.no.map((l, i) => (
  • 0{i + 1} {l}
    • ))}
); } // ─── FAQ ─────────────────────────────────────────────────────────────── function FAQ() { const [open, setOpen] = useState(0); return (
Common
objections.} />

Things clients reasonably want to know before sending a brief.

{faqs.map((f, i) => { const isOpen = open === i; return (
{f.a}
); })}
); } // ─── Journal (compact) ───────────────────────────────────────────────── function Journal() { const entries = journalEntries; return (
Notes from
the cutting room.} /> All entries →
{entries.map((e, i) => (
{e.date}//{e.cat}//{e.readTime}

{e.t}

{e.sub}

Read →
))}
); } // ─── Footer ──────────────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { FeaturedReel, Mission, Services, Work, Process, Principles, Fit, FAQ, Journal, Footer });