// Alban — editorial portfolio const { useState, useEffect, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "accentHue": 35, "ballStyle": "solid" }/*EDITMODE-END*/; // ---- Data ---- const PROJECTS = [ { n: "01", year: "2026", title: "Moment.AI", priority: true, featured: true, desc: "AI-led contextual advertising built on emotional peaks, delivering 800+ integrations and measurable brand lift", videoUrl: "https://www.youtube.com/embed/qpPkGJRLYX4?autoplay=1", thumb: "https://img.youtube.com/vi/qpPkGJRLYX4/maxresdefault.jpg", cs: { problem: "Brand integrations were static and disconnected from narrative context.", approach: "Built an AI-led system using Gemini and worked across data science, traffic, and presentation teams to control the end-to-end integration pipeline. AI identified emotional peaks across GEC content, generating ~80 daily opportunities, from which high-impact moments were curated and executed.", outcome: [ "800+ integrations delivered in one month", "Turnaround reduced from ~15 days to under 8 hours", "1.4x awareness, 1.6x recall, 1.9x purchase intent", ], }, }, { n: "02", year: "2023", title: "Disney Delicious (IKEA)", priority: true, desc: "Content-commerce IP for IKEA leveraging co-viewing, driving 270M+ views and household influence", videoUrl: "https://www.youtube.com/embed/txLwvdXAeDk?autoplay=1", thumb: "https://img.youtube.com/vi/txLwvdXAeDk/maxresdefault.jpg", cs: { problem: "IKEA needed to drive consideration for modular kitchens in a new market.", approach: "Built a content-commerce IP leveraging kids' content and co-viewing behaviour of mothers to influence household decision-making.", outcome: [ "270M+ views across platforms", "Promax Asia Gold and Kyoorius Purple Elephant winner", "Positioned kids' content as an entry point into household consideration", ], }, }, { n: "03", year: "2022", title: "Don't Bite Your Nails Campaign", priority: true, desc: "Short-form behavioural storytelling designed for high recall and habit disruption", videoUrl: "https://www.youtube.com/embed/-Qarp3gcNlc?autoplay=1", thumb: "https://img.youtube.com/vi/-Qarp3gcNlc/maxresdefault.jpg", cs: { problem: "Health messaging for kids often lacks retention and recall.", approach: "Created short-form behavioural storytelling with strong visual hooks and tight pacing designed for high recall.", outcome: [ "High recall-driven content designed for behaviour change", "Award-winning short-form impact storytelling", ], }, }, { n: "04", year: "2016", title: "Toonami Launch Campaign", desc: "₹5 Cr multi-platform launch with celebrity-led promos and nationwide reach", videoUrl: "https://www.youtube.com/embed/MWOtUjBKvko?autoplay=1", thumb: "https://img.youtube.com/vi/MWOtUjBKvko/maxresdefault.jpg", cs: { problem: "Needed to relaunch a youth-focused animation block as a full channel.", approach: "Built a multi-platform campaign using celebrity-led promos and high-frequency rollout strategy.", outcome: [ "₹5 Cr campaign executed across TV and 500 cinema screens", "Strong youth reach and brand recall", ], }, }, { n: "05", year: "2025", title: "Star Parivaar Awards", desc: "Large-scale brand integrations within flagship GEC property, balancing storytelling with sponsor visibility", videoUrl: "https://www.youtube.com/embed/3agXoC2DzxU?autoplay=1", thumb: "https://img.youtube.com/vi/3agXoC2DzxU/maxresdefault.jpg", cs: { problem: "Integrating brands into a large-format GEC property without disrupting storytelling.", approach: "Designed narrative-aligned integrations within key emotional moments of the show.", outcome: [ "Delivered 120% of revenue target", "Scaled brand presence within high-engagement television", ], }, }, { n: "06", year: "2025", title: "Quick Style Crew Integration", desc: "Executed international talent integration within 3 days, converting deal into high-impact on-air moment", videoUrl: "https://www.youtube.com/embed/OBdpSPLtdBc?autoplay=1", thumb: "https://img.youtube.com/vi/OBdpSPLtdBc/maxresdefault.jpg", cs: { problem: "Brand required a high-impact integration within tight turnaround timelines.", approach: "Executed international talent integration within 3 days by aligning production, brand, and on-ground execution.", outcome: [ "Delivered a high-impact on-air performance moment", "Became a viral moment reshared by Quick Style Crew and multiple digital platforms", ], }, }, { n: "07", year: "2022", title: "Bhaagam Bhaag", desc: "Original kids IP scaled to 72 episodes with strong TV performance and digital traction", videoUrl: "https://www.youtube.com/embed/Av2YljfnMlM?autoplay=1", thumb: "https://img.youtube.com/vi/Av2YljfnMlM/maxresdefault.jpg", cs: { problem: "Need for a scalable original kids IP with consistent engagement.", approach: "Built and produced a 72-episode animated series, collaborating with leading creators Vaibhav Kumaresh and Arnab Choudhary, along with top studios including Cosmos Maya and Toonz.", outcome: [ "Strong TV performance and digital traction", "Established as a repeatable and scalable IP", ], }, }, { n: "08", year: "2013", title: "MTV Coke Studio Season 2", desc: "Assistant direction on one of India's most iconic music formats, supporting multi-artist production at scale", videoUrl: "https://www.youtube.com/embed/1gukvtH_a3I?autoplay=1", thumb: "https://img.youtube.com/vi/1gukvtH_a3I/maxresdefault.jpg", cs: { problem: "Managing multi-artist production for a high-profile music format.", approach: "Supported direction, rehearsals, and live shoot coordination across episodes, working with multiple artists and production teams.", outcome: [ "Contributed to one of India's most iconic music seasons with enduring recall", ], }, }, ]; const BRANDS = [ { name: "Coca-Cola", src: "assets/logos/coca-cola.png", h: 56 }, { name: "Cadbury", src: "assets/logos/cadbury.png", h: 76 }, { name: "HUL", src: "assets/logos/hul.png", h: 70 }, { name: "Colgate", src: "assets/logos/colgate.svg", h: 52 }, { name: "Garnier", src: "assets/logos/garnier.png", h: 64 }, { name: "Tata Sky", src: "assets/logos/tata-sky.png", h: 60 }, { name: "Lifebuoy", src: "assets/logos/lifebuoy.png", h: 64 }, { name: "Whisper", src: "assets/logos/whisper.webp", h: 56 }, { name: "IKEA", src: "assets/logos/ikea logo.png", h: 56 }, { name: "ITC", src: "assets/logos/ITC_Limited_Logo.svg.png", h: 60 }, { name: "Kelloggs", src: "assets/logos/Kellogg's-Logo.svg", h: 64 }, { name: "Nivea", src: "assets/logos/Nivea_Logo.png", h: 52 }, ]; const EXPERIENCE = [ { co: "JioStar", period: "2023 — Present", role: "Ad Innovation Lead", summary: "Driving product-led monetization across a ₹3000 Cr+ ecosystem", bullets: [ "Built and scaled AI-led formats like MegaBlast and Moment.AI", "Delivered measurable brand outcomes through contextual integrations and improved purchase intent", ], }, { co: "Disney", period: "2018 — 2023", role: "Branded Content & Partnerships", summary: "Led branded content and integrations across multi-genre network", bullets: [ "Delivered 120%+ revenue on flagship properties", "Built partnerships with Coca-Cola, Mondelez, HUL", ], }, { co: "Turner", period: "2013 — 2018", role: "Content & Campaigns", summary: "Built content and campaigns across leading kids IPs", bullets: [ "Led Toonami launch campaign (~₹5 Cr budget)", "Won APAC Innovation Challenge and secured $10,000 seed funding", ], }, ]; const THINK = [ { n: "01", title: "The problem with first episodes", hero: "The audience decides in minutes whether to care.", body: `Most shows do not lose you because the story is weak. They lose you because they ask for patience you did not agree to. It is like meeting someone who says, I am interesting, just give me time. You will not. Everything after that just confirms the decision.`, }, { n: "02", title: "People do not fit into segments. They leak.", hero: "Taste travels. Behaviour overlaps.", body: `We like clean buckets. Gen Z. Millennials. Separate, defined. Real life does not work like that. People borrow from each other. What looks like noise in data is usually just life refusing to be sorted.`, }, { n: "03", title: "Placement is like background music", hero: "Advertising works the same way.", body: `You do not notice the music in a café until it matches your mood. That is when it lands. Not when it appears. When it aligns with what you are already feeling. Everything else is interruption wearing better clothes.`, }, { n: "04", title: "Big brands do not introduce themselves", hero: "The product earns the trust.", body: `Nobody says, I trust Procter and Gamble. They say, I use Vicks. Or I buy Tide. The parent stays invisible. Like a good host, you do not notice them, but the room works because of them.`, }, ]; const GLOBE_PINS = [ { key: "jiostar", label: "JioStar", lon: 78.96, lat: 20.59, co: "JioStar", period: "2023 — Present", role: "Ad Innovation Lead", summary: "Driving product-led monetization across a ₹3000 Cr+ ecosystem. Built and scaled AI-led formats like MegaBlast and Moment.AI.", }, { key: "disney", label: "Disney", lon: -100, lat: 38, co: "Disney", period: "2018 — 2023", role: "Branded Content & Partnerships", summary: "Led branded content and integrations across a multi-genre network. Delivered 120%+ revenue on flagship properties.", }, { key: "turner", label: "Turner", lon: 114.17, lat: 22.32, co: "Turner", period: "2013 — 2018", role: "Content & Campaigns", summary: "Built content and campaigns across leading kids IPs. Led Toonami launch and won APAC Innovation Challenge.", }, ]; // Shared land geo cache — fetched once, reused by all globe instances let _landCache = null; let _landPromise = null; function getLandGeo() { if (_landCache) return Promise.resolve(_landCache); if (!_landPromise) { _landPromise = fetch("https://unpkg.com/world-atlas@2.0.2/countries-110m.json") .then(r => r.json()) .then(t => { _landCache = window.topojson.feature(t, t.objects.land); return _landCache; }) .catch(() => null); } return _landPromise; } const THINK_TILTS = [ "perspective(800px) rotateY(-4deg) rotateX(2deg) translateY(-6px)", "perspective(800px) rotateY(4deg) rotateX(-1deg) translateY(-6px)", "perspective(800px) rotateY(-3deg) rotateX(-2deg) translateY(-6px)", "perspective(800px) rotateY(3deg) rotateX(1deg) translateY(-6px)", ]; // ---- Reveal hook ---- function useReveal() { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const rect = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (rect.top < vh && rect.bottom > 0) { setSeen(true); return; } const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: 0, rootMargin: "0px 0px -10% 0px" }); io.observe(el); return () => io.disconnect(); }, []); return [ref, seen]; } function Reveal({ children, delay = 0, className = "", as = "div", ...rest }) { const [ref, seen] = useReveal(); const Tag = as; return ( {children} ); } // ---- Loader ---- function Loader() { const [pct, setPct] = useState(0); const [done, setDone] = useState(false); const [gone, setGone] = useState(false); useEffect(() => { let v = 0; const iv = setInterval(() => { v += Math.random() * 22 + 10; if (v >= 100) { v = 100; clearInterval(iv); setTimeout(() => setDone(true), 200); setTimeout(() => setGone(true), 800); } setPct(Math.floor(v)); }, 70); return () => clearInterval(iv); }, []); if (gone) return null; return (
{pct}
); } // ---- Cursor ---- function useCursor() { useEffect(() => { const c = document.getElementById("cursor"); if (!c) return; const move = (e) => { c.style.left = e.clientX + "px"; c.style.top = e.clientY + "px"; }; const over = (e) => { if (e.target.closest("a, button, [data-cursor-big]")) c.classList.add("big"); else c.classList.remove("big"); }; window.addEventListener("mousemove", move); window.addEventListener("mouseover", over); return () => { window.removeEventListener("mousemove", move); window.removeEventListener("mouseover", over); }; }, []); } // ---- Active section ---- function useActiveSection(ids) { const [active, setActive] = useState(ids[0]); useEffect(() => { const handler = () => { for (let i = ids.length - 1; i >= 0; i--) { const el = document.getElementById(ids[i]); if (!el) continue; if (el.getBoundingClientRect().top <= 100) { setActive(ids[i]); return; } } setActive(ids[0]); }; window.addEventListener("scroll", handler, { passive: true }); return () => window.removeEventListener("scroll", handler); }, []); return active; } // ---- Underline scribble ---- const UnderlineSVG = () => ( ); // ---- Floating balloon ball (scroll-driven) ---- const NOISE_URI = "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E\")"; function FloatingBall() { const outerRef = useRef(null); useEffect(() => { const SIZE = 300; // base px (we scale via transform) let sv = 0; let rafId = null; const easeInOut = (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; const render = () => { rafId = null; const el = outerRef.current; if (!el) return; const maxS = document.documentElement.scrollHeight - window.innerHeight; const p = maxS > 0 ? Math.max(0, Math.min(1, sv / maxS)) : 0; // Fade: invisible during hero, fades in as you scroll away const fadeIn = p < 0.06 ? 0 : p < 0.12 ? (p - 0.06) / 0.06 : 1; // Fade out near bottom const fadeOut = p > 0.92 ? 1 - (p - 0.92) / 0.08 : 1; // Hide while Work section is in viewport const vh = window.innerHeight; const workEl = document.getElementById("work"); let workFade = 1; if (workEl) { const wTop = workEl.offsetTop; const wBot = wTop + workEl.offsetHeight; const TRANS = 140; const hideStart = wTop - vh - TRANS; const hideEnd = wTop - vh + TRANS; const showStart = wBot - TRANS; const showEnd = wBot + TRANS; if (sv <= hideStart) workFade = 1; else if (sv <= hideEnd) workFade = 1 - (sv - hideStart) / (2 * TRANS); else if (sv <= showStart) workFade = 0; else if (sv <= showEnd) workFade = (sv - showStart) / (2 * TRANS); else workFade = 1; workFade = Math.max(0, Math.min(1, workFade)); } const opacity = fadeIn * fadeOut * workFade * 0.88; if (opacity <= 0) { el.style.opacity = 0; return; } // Lissajous-like path — feels like a balloon drifting // X: oscillates across the right 60-90% of the screen, 3 full sweeps const xPct = 75 + Math.sin(p * Math.PI * 5) * 16; // Y: slower vertical drift with a cosine wave, 2 sweeps const yPct = 30 + Math.cos(p * Math.PI * 3.5) * 22 + p * 14; const vw = window.innerWidth; const px = (xPct / 100) * vw - SIZE / 2; const py = (yPct / 100) * vh - SIZE / 2; // Scale: large early (1.0), shrinks as you go deeper (min 0.22) const scale = Math.max(0.22, 1 - p * 0.78); // Rotation: slow spin (1.5 full turns) const rot = p * 540; el.style.transform = `translate3d(${px}px, ${py}px, 0) rotate(${rot}deg) scale(${scale})`; el.style.opacity = opacity; }; const onScroll = () => { sv = window.scrollY; if (!rafId) rafId = requestAnimationFrame(render); }; window.addEventListener("scroll", onScroll, { passive: true }); render(); return () => { window.removeEventListener("scroll", onScroll); if (rafId) cancelAnimationFrame(rafId); }; }, []); return (
{/* light radial sheen */}
{/* grain texture */}
); } // ---- Hero Globe (auto-rotate + drag + location pins) ---- function HeroGlobe() { const svgRef = useRef(null); const landRef = useRef(null); const gratRef = useRef(null); const pinRefs = useRef([]); const [hoveredPin, setHoveredPin] = useState(null); // Animation state — all mutable, no re-renders const st = useRef({ rot: [20, -12, 0], dragging: false, pinHovered: false, lx: 0, ly: 0, vx: 0, vy: 0, proj: null, geoPath: null, grat: null, rafId: null, }); // Keep hoveredPin accessible in animation loop without stale closure const hovPinRef = useRef(null); const setHovPin = (pin) => { hovPinRef.current = pin; st.current.pinHovered = !!pin; setHoveredPin(pin); }; useEffect(() => { const s = st.current; const svgEl = svgRef.current; const landEl = landRef.current; const gratEl = gratRef.current; if (!svgEl || !landEl || !gratEl || !window.d3 || !window.topojson) return; s.proj = window.d3.geoOrthographic().scale(140).translate([200, 200]).clipAngle(90).precision(0.6); s.geoPath = window.d3.geoPath(s.proj); s.grat = window.d3.geoGraticule10(); const draw = () => { s.proj.rotate(s.rot); gratEl.setAttribute('d', s.geoPath(s.grat) || ''); if (s.landGeo) landEl.setAttribute('d', s.geoPath(s.landGeo) || ''); updatePins(); }; const updatePins = () => { GLOBE_PINS.forEach((pin, idx) => { const el = pinRefs.current[idx]; if (!el) return; const projected = s.proj([pin.lon, pin.lat]); // Smooth fade near limb via great-circle distance const viewCenter = [-s.rot[0], -s.rot[1]]; const dist = window.d3.geoDistance(viewCenter, [pin.lon, pin.lat]); const LIMB = Math.PI / 2; const opacity = projected === null ? 0 : dist > LIMB - 0.18 ? Math.max(0, (LIMB - dist) / 0.18) : 1; if (opacity <= 0.01) { el.style.opacity = '0'; el.style.pointerEvents = 'none'; } else { el.style.opacity = String(opacity); el.style.pointerEvents = 'auto'; el.style.left = (projected[0] / 400 * 100) + '%'; el.style.top = (projected[1] / 400 * 100) + '%'; } }); }; // Load land geo (cached) getLandGeo().then(geo => { if (geo) { s.landGeo = geo; draw(); } }); draw(); // --- Animation loop: auto-rotate + inertia --- const AUTO = 0.035; const SENS = 0.38; const DAMP = 0.91; const loop = () => { if (!s.dragging && !s.pinHovered) { if (Math.abs(s.vx) > 0.04 || Math.abs(s.vy) > 0.04) { s.vx *= DAMP; s.vy *= DAMP; s.rot[0] += s.vx * SENS; s.rot[1] = Math.max(-89, Math.min(89, s.rot[1] - s.vy * SENS)); } else { s.vx = 0; s.vy = 0; s.rot[0] += AUTO; } draw(); } s.rafId = requestAnimationFrame(loop); }; s.rafId = requestAnimationFrame(loop); // --- Drag handlers --- const xy = (e) => e.touches ? { x: e.touches[0].clientX, y: e.touches[0].clientY } : { x: e.clientX, y: e.clientY }; const onDown = (e) => { s.dragging = true; const p = xy(e); s.lx = p.x; s.ly = p.y; s.vx = 0; s.vy = 0; svgEl.style.cursor = 'grabbing'; }; const onMove = (e) => { if (!s.dragging) return; const p = xy(e); s.vx = p.x - s.lx; s.vy = p.y - s.ly; s.lx = p.x; s.ly = p.y; s.rot[0] += s.vx * SENS; s.rot[1] = Math.max(-89, Math.min(89, s.rot[1] - s.vy * SENS)); draw(); }; const onUp = () => { if (!s.dragging) return; s.dragging = false; svgEl.style.cursor = 'grab'; // inertia handled by loop }; svgEl.addEventListener('mousedown', onDown); window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); svgEl.addEventListener('touchstart', onDown, { passive: true }); window.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('touchend', onUp); svgEl.style.cursor = 'grab'; return () => { cancelAnimationFrame(s.rafId); svgEl.removeEventListener('mousedown', onDown); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); svgEl.removeEventListener('touchstart', onDown); window.removeEventListener('touchmove', onMove); window.removeEventListener('touchend', onUp); }; }, []); return ( <> {/* SVG globe */} {/* Location pins — positioned as % of SVG viewBox, updated by D3 loop */} {GLOBE_PINS.map((pin, idx) => (
pinRefs.current[idx] = el} onMouseEnter={() => setHovPin(pin)} onMouseLeave={() => setHovPin(null)} onClick={() => { setHovPin(null); const el = document.getElementById('exp-' + pin.key); if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'center' }); el.classList.add('exp-highlight'); setTimeout(() => el.classList.remove('exp-highlight'), 2400); } }} style={{ position: 'absolute', opacity: 0, pointerEvents: 'none', transform: 'translate(-50%, calc(-100% - 4px))', zIndex: 10, userSelect: 'none', }} > {/* Chip label */}
{pin.label}
{/* Stem */}
{/* Dot */}
))} {/* Hover card — fixed center of screen */} {hoveredPin && } ); } // ---- Globe Pin Card ---- function GlobePinCard({ pin }) { return (

{pin.co}

{pin.role}
Click to view in Experience ↓
); } // ---- Mini Globe (contact links) ---- function MiniGlobe({ href }) { const svgRef = useRef(null); const landRef = useRef(null); const gratRef = useRef(null); const [hov, setHov] = useState(false); const st = useRef({ rot: [Math.random() * 360, -20, 0], proj: null, geoPath: null, grat: null, rafId: null, }); useEffect(() => { const s = st.current; const svgEl = svgRef.current; const landEl = landRef.current; const gratEl = gratRef.current; if (!svgEl || !landEl || !gratEl || !window.d3 || !window.topojson) return; s.proj = window.d3.geoOrthographic().scale(140).translate([200, 200]).clipAngle(90).precision(1.2); s.geoPath = window.d3.geoPath(s.proj); s.grat = window.d3.geoGraticule10(); const draw = () => { s.proj.rotate(s.rot); gratEl.setAttribute('d', s.geoPath(s.grat) || ''); if (s.landGeo) landEl.setAttribute('d', s.geoPath(s.landGeo) || ''); }; getLandGeo().then(geo => { if (geo) { s.landGeo = geo; draw(); } }); draw(); const loop = () => { s.rot[0] += 0.22; draw(); s.rafId = requestAnimationFrame(loop); }; s.rafId = requestAnimationFrame(loop); return () => cancelAnimationFrame(s.rafId); }, []); return ( setHov(true)} onMouseLeave={() => setHov(false)} style={{ position: 'relative', display: 'inline-flex', width: 88, height: 88, borderRadius: '50%', overflow: 'hidden', cursor: 'pointer', flexShrink: 0, border: '1px solid oklch(0.62 0.16 var(--accent-h) / 0.3)', transition: 'border-color 0.3s ease, box-shadow 0.3s ease', boxShadow: hov ? '0 0 0 3px oklch(0.62 0.16 var(--accent-h) / 0.22)' : 'none', }} > {/* Hover overlay */}
open
); } // ---- Accent Ball Link ---- function BallLink({ href, label }) { const [hov, setHov] = useState(false); return ( setHov(true)} onMouseLeave={() => setHov(false)} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 92, height: 92, borderRadius: "50%", background: "var(--accent)", color: "#fff", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", transition: "transform 0.4s cubic-bezier(0.2,0.8,0.2,1)", transform: hov ? "scale(1.12) rotate(12deg)" : "scale(1)", textDecoration: "none", flexShrink: 0, position: "relative", overflow: "hidden", }} > {label} ); } // ---- Nav ---- function Nav() { const sections = ["work", "thinking", "experience", "brands", "about", "contact"]; const labels = ["Work", "Thinking", "Experience", "Brands", "About", "Contact"]; const active = useActiveSection(sections); return ( ); } // ---- Hero ---- function Hero() { const ballRef = useRef(null); const mouse = useRef({ x: 0, y: 0 }); const scrollYRef = useRef(0); const applyHeroBall = () => { const el = ballRef.current; if (!el) return; const sy = scrollYRef.current; const opacity = Math.max(0, 1 - sy / 320); const mx = mouse.current.x; const my = mouse.current.y; el.style.opacity = opacity; // Keep globe centred in name block; offsets for parallax on top el.style.transform = `translate(calc(-50% + ${mx}px), calc(-50% + ${sy * 0.08 + my}px))`; }; useEffect(() => { const onScroll = () => { scrollYRef.current = window.scrollY; applyHeroBall(); }; const onMouse = (e) => { const cx = window.innerWidth / 2; const cy = window.innerHeight / 2; mouse.current = { x: (e.clientX - cx) / cx * 14, y: (e.clientY - cy) / cy * 9 }; applyHeroBall(); }; window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("mousemove", onMouse, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("mousemove", onMouse); }; }, []); return (
{/* Globe: absolutely centred over both words, behind text */}
{/* Text rows — in front of globe */}
Alban
Amikat

Building products and integrations that convert attention into measurable revenue

Scroll
); } // ---- Marquee ---- function Marquee({ items, italicEvery = 2 }) { const all = [...items, ...items, ...items]; return (
{all.map((t, i) => ( {t} ))}
); } // ---- Stats ---- function Stats() { const stats = [ { n: "13", l: "Years" }, { n: "₹3000 Cr+", l: "Business environment" }, { n: "40+", l: "Awards across projects" }, ]; return (
— By the numbers
{stats.map((s, i) => (
{s.n}
{s.l}
 ))}
); } // ---- Video Modal ---- function VideoModal({ project, onClose, onCaseStudy }) { useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, []); return (
e.stopPropagation()} style={{ position: "relative", width: "90vw", maxWidth: 920 }}>