const DS = window.AIProductionStudioDesignSystem_16a811; const { Button, GlassButton, GlassPanel, IconButton, Badge, Card, Icon } = DS; const Slideshow = DS.Slideshow || function SlideshowFallback({ items = [], ratio = '16 / 9' }) { return (
{items.slice(0, 2).map((s, i) => (
{s.video && {s.title &&
{s.title}{s.meta}
}
))}
); }; const REEL = [ { title: 'Marakkar', meta: 'Feature film · VFX', src: 'assets/film-marakkar.jpg' }, { title: 'Thug Life', meta: 'Feature film · VFX', src: 'assets/film-thuglife.jpg' }, { title: 'Hair-detail roto', meta: 'Rotoscopy breakdown', src: 'assets/work-reel.png' }, { title: 'Why Won’t They Stop?', meta: 'Explainer video', src: 'assets/explainer-thumb.png' }, ]; // Hero carousel — the four portfolio disciplines, each a door into the filtered portfolio function HeroCarousel({ onNav }) { const slides = Object.entries(window.PF_CATS || {}).map(([k, c]) => { const ps = (window.PF_PROJECTS || []).filter((p) => p.cat === k); return { k, ...c, n: ps.length, cover: (ps.find((p) => p.after) || {}).after }; }); const [i, setI] = React.useState(0); const [paused, setPaused] = React.useState(false); const DUR = ((window.GS_T && window.GS_T.slideSec) || 5.5) * 1000, W = 100, GAP = 24; const go = (d) => setI((n) => (n + d + slides.length) % slides.length); React.useEffect(() => { if (paused || !slides.length) return; const t = setTimeout(() => go(1), DUR); return () => clearTimeout(t); }, [i, paused, slides.length]); if (!slides.length) return null; return (
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
{slides.map((s, n) => ( ))}
{slides.map((s, n) => ( ))}
go(-1)} /> go(1)} />
); } function Hero({ onNav }) { return (
{/* the supplied frame keeps its own white studio ground; the left of the screen is that white */}
{/* right third falls to page black, so the hero carries the full white → black sweep */}
{/* headline sits on the white ground, left of the face, just below the eye line */}

{/* stacked: a huge upright AI, a small italic "with", then Human Touch filling the line */} AI with Human Touch.

{['AI Video Production', 'VFX Services'].map((t, n) => ( {n > 0 && }{t} ))}

); } function Marks() { return (
{[['20+', 'Years in the craft'], ['50+', 'Trusted worldwide'], ['TPN', 'Data content security']].map(([n, l]) => (
{n} {l}
))}
); } function Reel({ onNav }) { return (
); } function Focus() { const core = [ { icon: 'sparkles', t: 'AI video production', d: 'SaaS explainers, product explainers and UGC.' }, { icon: 'wand-sparkles', t: 'VFX services', d: 'Rotoscopy, wire removal, rig removal, prep/paint and compositing.' }, ]; const other = [ { icon: 'spline', t: 'Rotoscopy' }, { icon: 'cable', t: 'Wire removal' }, { icon: 'construction', t: 'Rig removal' }, { icon: 'eraser', t: 'Prep / Paint' }, { icon: 'layers', t: 'Compositing' }, { icon: 'crosshair', t: 'Track / Matchmove' }, { icon: 'type', t: 'Motion Graphics' }, { icon: 'scan-face', t: 'Beauty fix' }, { icon: 'monitor-play', t: 'SaaS explainer videos' }, { icon: 'box', t: 'Product explainer videos' }, { icon: 'smartphone', t: 'UGC' }, ]; return (
{core.map((c) => (

{c.t}

{c.d}

 ))}
Services
{other.map((o) => ( {o.t} ))}
); } function PlayerBand() { return (
Showreel placeholder
Play
00:42 / 01:48
); } function Why() { const pillars = [ ['users', 'Scalable teams', 'Flexible resources to handle projects of any scale, from indie to blockbuster.'], ['shield-check', 'Data content security', 'TPN-standard data content security policies with 24/7 CCTV monitoring.'], ['clock', 'Prompt delivery', 'Trusted by production houses for prompt delivery with quality.'], ]; return (

Our work is designed to be invisible, enhancing the story without distracting from it.

With years of experience in film and OTT, our team combines artistic sensibility with technical precision. Every frame matters.

From independent films to major studio productions, we bring the same level of dedication and quality to every project.

{pillars.map(([i, t, d]) => (

{t}

{d}

))}
); } function CTA({ onNav }) { return (

Bringing your vision to life

Goldshine Media — bringing your vision to life
); } function HomeScreen({ onNav }) { return (
); } Object.assign(window, { HomeScreen });