// About, Motion (YouTube), Services, Shop, Contact footer const { useState: useStateS } = React; function BioProse() { return (

Mapa López es creadora audiovisual especializada en la construcción de narrativas visuales y sonoras que combinan dirección, edición, fotografía y diseño sonoro. Su práctica integra lo técnico y lo creativo para dar forma a piezas donde la imagen, el cuerpo y el contexto dialogan de manera constante.

Desarrolla proyectos colaborativos con un enfoque sensible y contemporáneo, explorando la estética, la memoria y las dinámicas sociales como ejes narrativos. Desde la dirección y la producción hasta el diseño visual, su trabajo busca crear piezas coherentes, expresivas y adaptables a distintos formatos y plataformas.

); } function BioFragments() { return (

Creadora audiovisual. Dirección, edición, fotografía y diseño sonoro.

Narrativas visuales y sonoras donde la imagen, el cuerpo y el contexto dialogan.

Enfoque sensible, contemporáneo. Estética, memoria y dinámicas sociales como ejes.

Piezas coherentes, adaptables a distintos formatos y plataformas.

); } function BioIndex() { return (
01 / PRÁCTICA

Creadora audiovisual especializada en narrativas visuales y sonoras que combinan dirección, edición, fotografía y diseño sonoro. Integra lo técnico y lo creativo para dar forma a piezas donde la imagen, el cuerpo y el contexto dialogan.

02 / ENFOQUE

Proyectos colaborativos con una mirada sensible y contemporánea. Estética, memoria y dinámicas sociales como ejes narrativos. Desde la dirección hasta el diseño visual, un trabajo expresivo y adaptable.

); } function BioDropcap() { return (

Mapa López es creadora audiovisual especializada en la construcción de narrativas visuales y sonoras que combinan dirección, edición, fotografía y diseño sonoro. Su práctica integra lo técnico y lo creativo para dar forma a piezas donde la imagen, el cuerpo y el contexto dialogan de manera constante.

Desarrolla proyectos colaborativos con un enfoque sensible y contemporáneo, explorando la estética, la memoria y las dinámicas sociales como ejes narrativos. Desde la dirección y la producción hasta el diseño visual, su trabajo busca crear piezas coherentes, expresivas y adaptables a distintos formatos y plataformas.

); } function About() { const variant = (typeof document !== "undefined" && document.documentElement.dataset.bio) || "prose"; const [, forceRender] = useStateS(0); // re-render when [data-bio] changes on React.useEffect(() => { const obs = new MutationObserver(() => forceRender((n) => n + 1)); obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-bio"], }); return () => obs.disconnect(); }, []); const current = document.documentElement.dataset.bio || "prose"; const Body = { prose: BioProse, fragments: BioFragments, index: BioIndex, dropcap: BioDropcap, }[current] || BioProse; return (
SOBRE MÍ

Una década documentando el pulso de la música y la memoria colectiva de América Latina.

BIO
); } function MotionThumb({ v, children }) { return (
{v.title} { const img = e.target; if (!img.dataset.fallbackTried) { img.dataset.fallbackTried = "1"; img.src = `https://img.youtube.com/vi/${v.id}/hqdefault.jpg`; } }} fallbackLabel={v.title?.toUpperCase() || "VIDEO"} /> {children}
); } // VARIANT 1 — Grid (refined existing): 2-col grid + description beneath each card function MotionGrid({ items, onPlay }) { return (
{items.map((v, i) => (
onPlay(v)}>
▶ REPRODUCIR
{v.dur}
{String(i + 1).padStart(2, "0")} · {v.title} {v.year}
{v.description && (

{v.description}

)} {v.role && (
{v.role} · {v.location}
)}
))}
); } // VARIANT 2 — Feature: one large "now showing" + a sidebar list of the rest. function MotionFeature({ items, onPlay }) { const [hero, setHero] = useStateS(items[0]); React.useEffect(() => { setHero(items[0]); }, [items]); return (
onPlay(hero)}>
{(hero.tags || []).map((t) => ( {t} ))}
▶ REPRODUCIR · {hero.dur}
{hero.dur}
EN PANTALLA · {hero.year} · {hero.location}

{hero.title}

{hero.synopsis}

{hero.role}
); } // VARIANT 3 — Index: editorial filmography. Numbered rows, hover reveals thumb. function MotionIndex({ items, onPlay }) { const [hover, setHover] = useStateS(null); return (
N° TÍTULO AÑO LOCACIÓN DUR. CRÉDITO
{items.map((v, i) => (
onPlay(v)} onMouseEnter={() => setHover(v)} onMouseLeave={() => setHover((h) => (h && h.id === v.id ? null : h))} > {String(i + 1).padStart(2, "0")}

{v.title}

{v.description}

{v.year} {v.location} {v.dur} {v.role} ▶
))} {hover && (
{hover.title} {hover.title}
)}
); } // VARIANT 4 — Reel: horizontal cinemascope strip with description block per item. function MotionReel({ items, onPlay }) { const [idx, setIdx] = useStateS(0); const v = items[idx] || items[0]; return (
onPlay(v)}>
▶ REPRODUCIR
{v.dur}
FILM N° {String(idx + 1).padStart(2, "0")} /{" "} {String(items.length).padStart(2, "0")} {v.year} · {v.location}

{v.title}

{v.synopsis}

{(v.tags || []).map((t) => ( {t} ))}
{v.role}
{items.map((it, i) => ( ))}
); } // VARIANT 5 — Editorial stack: full-width rows, image alternates left/right. // Inspired by editorial "Minimal / Building future" layout with serif title, // label kicker, body text, outline CTA and a small accent rule. function MotionStack({ items, onPlay }) { return (
{items.map((v, i) => { const reverse = i % 2 === 1; return (
onPlay(v)}>
▶ REPRODUCIR
{v.dur}
FILM N° {String(i + 1).padStart(2, "0")} — {v.year} ·{" "} {v.location}

{v.title}

{(v.tags && v.tags[0]) || "PIEZA AUDIOVISUAL"}
); })}
); } const MOTION_VARIANT_NAME = { GRID: "grid", FEATURE: "feature", INDEX: "index", REEL: "reel", STACK: "stack", }; const MOTION_VARIANTS = [ { id: MOTION_VARIANT_NAME.GRID, label: "GRID" }, { id: MOTION_VARIANT_NAME.FEATURE, label: "EN PANTALLA" }, { id: MOTION_VARIANT_NAME.INDEX, label: "ÍNDICE" }, { id: MOTION_VARIANT_NAME.REEL, label: "ROLLO" }, { id: MOTION_VARIANT_NAME.STACK, label: "EDITORIAL" }, ]; const DEFAULT_MOTION_VARIANT = MOTION_VARIANT_NAME.STACK; function Motion({ items }) { const [active, setActive] = useStateS(null); const [variant, setVariant] = useStateS(() => { return ( (typeof document !== "undefined" && document.documentElement.dataset.motionLayout) || DEFAULT_MOTION_VARIANT ); }); // sync from data attr (in case Tweaks change it) React.useEffect(() => { const obs = new MutationObserver(() => { const v = document.documentElement.dataset.motionLayout || DEFAULT_MOTION_VARIANT; setVariant(v); }); obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-motion-layout"], }); return () => obs.disconnect(); }, []); const Body = variant === "feature" ? MotionFeature : variant === "index" ? MotionIndex : variant === "reel" ? MotionReel : variant === "stack" ? MotionStack : MotionGrid; const setVariantPersist = (v) => { document.documentElement.dataset.motionLayout = v; setVariant(v); if (window.parent) { window.parent.postMessage( { type: "__edit_mode_set_keys", edits: { motionLayout: v } }, "*", ); } }; return (
CINE / VIDEO — {items.length} PIEZAS
{MOTION_VARIANTS.map((mv) => ( ))}
{/* {active && (
setActive(null)}>
e.stopPropagation()} >