EMBER.dsgn

Recreation Prompt
Build a fullscreen split-panel hero section for "EMBER.dsgn" — a digital design studio. Single-page React app, no routing.

Stack & dependencies
React 19 + TypeScript + Vite 6
Tailwind CSS 4 via @tailwindcss/vite
motion (framer-motion v12 successor — import from motion/react)
lucide-react for icons (ArrowUpRight, Menu, X)
hls.js for HLS video playback
Vite dev script: vite --port=3000 --host=0.0.0.0
Global styles (src/index.css)
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}

body {
  @apply antialiased overflow-hidden;
}
Root container


 with: relative h-screen w-full font-sans text-white selection:bg-white/20 overflow-hidden bg-black. Three stacked layers inside (z-index order: video bg → split panels → nav → mobile menu overlay).

1. Background video (z-0)
Absolute, inset-0, full-cover
HLS stream URL: https://stream.mux.com/Q3hYHAcLU82ceOUgwDeO4HiwOc3WZn9JD02PugwzxHOI.m3u8
 attrs: muted loop playsInline autoPlay, classes absolute inset-0 w-full h-full object-cover scale-x-[-1] (horizontally mirrored)
In useEffect: if Hls.isSupported(), create new Hls(), loadSource, attachMedia, on MANIFEST_PARSED set playbackRate = 0.7 and call .play(). Cleanup with hls.destroy(). Safari fallback: set video.src directly and use loadedmetadata listener with same playback rate.
2. Split panels (z-10)
Outer wrapper: absolute inset-0 flex flex-col lg:flex-row z-10 pointer-events-none overflow-y-auto lg:overflow-hidden scrollbar-hide

Left panel — "EMBER" cutout effect
relative w-full lg:w-1/2 min-h-screen lg:h-full flex flex-col pointer-events-auto overflow-hidden border-b lg:border-b-0 lg:border-r border-white/5
Blur layer: absolute inset-0, backgroundColor: rgba(131, 131, 131, 0.3), backdropFilter: blur(20px) (+ webkit prefix), with maskImage: url(#emberMask) so the EMBER letters cut a clear hole through the blur revealing the video.
SVG mask def:  with . White rect 100%×100%, then black-fill EMBER text in two responsive variants:
Mobile: 
Desktop: 
Text element: x=0 y=115 textLength="100%" lengthAdjust="spacingAndGlyphs", classes font-[900] tracking-tighter, inline fontSize: 130px, fill="black"
Content stack (z-20, pt-[12vh] lg:pt-[8vh] px-6 md:px-12):
Spacer matching the EMBER SVG: h-[20vh] lg:h-[25vh]
Vertical line: flex-grow flex flex-col pt-4 min-h-[100px] containing w-[1px] h-full bg-white/20
Footer block (pb-12 flex flex-col gap-6 pt-4):
"ABOUT" eyebrow: text-[10px] font-bold tracking-[0.3em] uppercase text-white/40
Heading: text-xl md:text-2xl font-normal leading-[1.3] text-white/90 — copy: "We shape striking digital identities through bold contrasts and meaningful motion." 
 "Our design process transforms the primal into the powerful."
Bottom row: flex flex-col sm:flex-row justify-between items-start sm:items-end border-t border-white/10 pt-8 w-full gap-8 — three cells:
"Double Click and" caption + Explore Our Work link with 
Social links (Instagram, Telegram) — each with a w-1 h-1 bg-white rounded-full opacity-50 bullet
Address (hidden on mobile): 23 Industrial Lane, Unit 5 / London, UK, E2 8AA
All small-text uses text-[10px] font-bold uppercase tracking-widest; eyebrows use text-[9px]
Right panel — "STUDIO" word
relative w-full lg:w-1/2 min-h-[50vh] lg:h-full flex flex-col justify-end pb-8 lg:pb-2 pointer-events-auto overflow-hidden
Two concentric circles (decorative, centered, z-0): wrapper absolute inset-0 z-0 pointer-events-none flex justify-center → inner relative h-full aspect-square flex flex-col items-center containing two divs:
Circle 1: absolute top-[-10vh] lg:top-[-25vh] w-[40vh] lg:w-[60vh] h-[40vh] lg:h-[60vh] border border-white/20 lg:border-white/35 rounded-full
Circle 2: same size, top-[30vh] lg:top-[18vh]
STUDIO wordmark (z-10, relative w-full mb-1 px-6 md:px-[5%]):  with STUDIO
3. Navigation (z-50, fixed)
fixed top-0 left-0 w-full z-50 flex items-center justify-between px-6 md:px-12 py-6 lg:py-8 pointer-events-none — two pointer-events-auto groups.

Left group:

Logo: 2×2 grid of w-2 md:w-2.5 h-2 md:h-2.5 bg-[#FF5C35] squares (gap-0.5) + EMBER.dsgn text (text-lg md:text-xl font-black tracking-tighter)
Desktop nav links (hidden lg:flex items-center gap-6 text-[10.5px] uppercase font-medium tracking-[0.2em] text-white/70): WORKS, SERVICES, ABOUT, TEAM — each with a w-1 h-1 bg-white rounded-full opacity-50 bullet, hover:text-white transition-colors
Right group:

Language pill (hidden sm:flex border border-white/20 rounded-full px-4 py-1.5 text-[10.5px] font-medium tracking-widest uppercase items-center gap-3 bg-white/5 backdrop-blur-sm): EN | RU with separator at text-white/20
Mobile burger button (lg:hidden p-2) with , opens menu
Contacts pill (hidden sm:block border border-white/20 rounded-full px-6 py-2 text-[10.5px] font-medium tracking-widest uppercase hover:bg-white hover:text-black transition-all bg-white/5 backdrop-blur-sm) with bullet + CONTACTS
4. Mobile menu overlay
State: isMenuOpen (useState boolean). Wrap in ; render  with:

initial={{ opacity: 0, x: "100%" }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: "100%" }}
transition={{ type: "spring", damping: 25, stiffness: 200 }}
Classes: fixed inset-0 z-[100] bg-black pointer-events-auto lg:hidden flex flex-col
Layout:

Header row: same logo + close button ()
Center links (flex-grow flex flex-col justify-center px-12 gap-8): map ['WORKS', 'SERVICES', 'ABOUT', 'TEAM', 'CONTACTS'] to  with initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 + i * 0.05 }}, classes text-4xl font-bold tracking-tighter hover:text-[#FF5C35] transition-colors
Footer (p-12 border-t border-white/10 flex justify-between items-center): EN | RU toggle + UKRAINE / LONDON label
Color tokens
Brand orange: #FF5C35
All whites use opacity variants: white/5 white/10 white/20 white/35 white/40 white/70 white/90
Page background: pure black
Behavior summary
Video plays muted, looped, mirrored, at 0.7× speed
EMBER letters appear as a clear-glass cutout in a 20px backdrop-blur layer
STUDIO is solid white wordmark
Both wordmarks scale to fill their column via SVG textLength="100%" lengthAdjust="spacingAndGlyphs" with Inter weight 900
Mobile (