Territory Intelligence · Laboratorio Motion

Catálogo de experimentos

Cada ejemplo con descripción coloquial (qué es) + técnica (cómo está hecho).
Tipos: HERO composición final · PAG página/sitio · MOCK mockup IA · LIB técnica/librería aislada
🎨 MOCK — mockups de rediseño (concepto IA)
MOCK-01..05
Galería de mockups de páginas
Imágenes de cómo se ven las páginas rediseñadas: Home, mapa Territory, Blog, Listings, Property. Referencia visual.
Imágenes generadas con ChatGPT (gpt-image) · NO es código, es referencia de diseño para construir.
⭐ HERO — composiciones finales (vivas + interactivas)
HERO-34 · HOME HOVER-GLITCH★ recuperado
Como HERO-07 + glitch al hover sobre tu foto
Home con tu recorte de Bacalar; al pasar el cursor SOBRE tu foto se dispara un glitch EN SU LUGAR (RGB-split + cortes, no se mueve). Quita el cursor → limpio. El efecto que querías, ahora guardado.
CSS .figwrap:hover img → @keyframes RGB-split (drop-shadow rojo/cian) + clip-path slices · sin transform (no movimiento) · net 007 + viñeta + copy home exacto.
HERO-33 · PULVERIZA DESDE ORILLAS★ EDGE
Desintegración solo del contorno (orillas)
Detección de bordes real: SOLO el contorno de tu silueta se desprende en partículas hacia afuera; el interior se mantiene íntegro. El "materializando" correcto. Para integrar al home.
Canvas getImageData + edgeness por vecinos transparentes (8 dir) → dirección de salida = opuesta a lo transparente · solo edge particles detach (prob∝edgeness²) + estela + respawn.
HERO-32 · HOME FUSIÓN★★★ EL HOME
360 Cancún + figura glitch+pulveriza + cerebro
La fusión: 360 Puerto Cancún auto de fondo + tu figura BIG semi-transparente (doble exposición) + glitch al cargar → pulverización hacia afuera (materializándote) + cerebro en esquinas autónomo + copy del home intacto. EL home candidato.
Kuula 360 bg (auto) + viñeta + canvas FUI esquinas (órbitas autónomas) + img semi-transparente + PowerGlitch (load burst+ambiente) + canvas dust (getImageData → pulveriza outward post-glitch).
HERO-31 · HOME FUI ESQUINAS★ SPEC
Home real: red FUI en esquinas + viñeta
El home con su copy EXACTO (Real Estate / Territory Intelligence / For the Global Buyer + 4 botones) + red 007 (puntos+líneas que se forman/deshacen) SOLO en esquinas + viñeta oscura para que tu foto resalte.
Canvas red por clusters de esquina (deriva + líneas con alpha pulsante = form/dissolve) z sobre viñeta · viñeta box-shadow inset + radial · figura PNG sobre viñeta.
HERO-30 · SECUENCIA GLITCH+POLVONUEVO
Carga→glitch→desintegra+crece→glitch
Tu figura: al cargar hace glitch, luego se pulveriza creciendo lento (digitalizándose) y dispara glitch aleatorio. Combina partículas + RGB-split.
Canvas partículas (getImageData) edge-disintegration + grow desde centroide + composición offscreen→main con RGB-split+slices en ventanas de glitch (load + random).
HERO-29 · HOME 360 CANCÚN
360 auto-girando + capas + tu foto
360 de Puerto Cancún auto-girando (sin touch) de fondo vivo + humo + mapa internacional (arcos) + tu recorte doble-exposición + CITY CANCÚN. Fondo más que imagen.
Kuula embed (autorotate, controles off, pointer-events:none) + canvas world arcs (screen) + smoke + figura PNG opacity + grade.
HERO-28 · 360 PUERTO CANCÚNNUEVO
Panorama 360 inmersivo (drone) + HUD
Panorama 360 real de Puerto Cancún (drone, Kuula) a pantalla completa + overlay táctico (HUD, coords, título). Arrastra para explorar. Para secciones de destino/propiedad.
Embed Kuula 360 (iframe full-screen) + overlay FUI pointer-events:none (nav/HUD/título) + gradiente noir.
HERO-27 · BIVARIATE MÉXICONUEVO
Mapa de México por 2 variables (interactivo)
Replica del bivariate choropleth (D3) para estados de México, color = 2 variables cruzadas (oro/cian, diseño), responsive, hover + leyenda 3×3, colores que cambian solos.
D3 + GeoJSON estados México (angelnmara) + geoMercator fitSize + paleta bivariada bilineal custom + SVG viewBox responsive + tooltip + transición de color cada 4s.
HERO-26 · TRANSCENDENCE★★ CINE
Tu figura desintegrándose (póster Transcendence)
Figura íntegra y reconocible + stream de partículas tipo ceniza saliendo del borde superior/derecho (como el póster de Johnny Depp). Continuo, cinematográfico, NO depende del cursor. El "becoming digital" elegante.
Canvas partículas (getImageData) · edgeFactor (arriba+derecha) → desprende continuo con prob∝edge + respawn (figura se mantiene) · fade a ceniza clara + estela · cursor acelera local.
HERO-25 · POLVO + RE-ORDENA★ KEV v2
Polvo que se eleva con el cursor y vuelve
Corrige el HERO-24 (que hacía hueco circular). Aquí las partículas se levantan como POLVO (arriba + turbulencia + estela) al pasar el cursor y se re-ordenan a tu forma. Imagen nunca se pierde.
Canvas partículas (getImageData) · cursor = lift hacia arriba + turbulencia (no empuje radial) + estela (clear alpha .30) + spring de regreso · tinte oro/cian al volverse polvo.
HERO-24 · DISPERSA + RE-ORDENA★ KEV
Partículas que se dispersan con el cursor y vuelven
Tu imagen SIEMPRE íntegra; al pasar el cursor las partículas se expanden (teletransportación) y se re-ordenan a tu forma. Empresario digital, imagen nunca se pierde. (Refinamiento de HERO-23.)
Canvas partículas (getImageData) con HOME pos + repulsión radial al cursor + resorte de regreso (spring) + damping · tinte oro/cian solo al dispersarse.
HERO-23 · DESINTEGRACIÓN★ LA DIFERENCIA
Tu figura se disuelve en datos (fusión real)
Tu cuerpo se desintegra en partículas de datos (oro/cian) y se reconstruye — el hombre Y el territorio son UNA señal. Esto es lo de los mockups: no un recorte sólido, sino fusión/disolución.
Canvas: getImageData del recorte → ~10-15k partículas con color original; frente de disolución (sweep+mouse) libera pixeles que derivan y se recolorean oro/cian, luego respawn (loop).
HERO-22 · WAR ROOMMEZCLA
Tú dentro del centro de comando IA
Fondo de war room (IA generada) + tú parado dentro + holograma de datos vivo sobre la mesa + humo + scramble + HUD. Mezcla compleja "agente en su baticueva".
Fondo ChatGPT (Ken Burns+parallax) + figura PNG + canvas red holograma (zona mesa) + smoke + scramble JS + grade CSS.
HERO-21 · SCRAMBLE TEXTNUEVO
Texto que se descifra (digital/IA)
El texto se "descifra" como código desde el centro (scramble) + humo + red. Look experto en tecnología/IA. Pasa el cursor para re-descifrar.
JS scramble vanilla (glyphs cycle, reveal stagger-center) + canvas red 007 + smoke PNG screen · re-trigger hover + cada 9s.
HERO-20 · COMBO 4 CAPASMEZCLA
Combo: figura + cerebro + humo + glitch
4 efectos juntos con tu foto: cerebro 3D denso detrás + tu figura + humo ×2 + glitch (botón) + HUD. Ejemplo de mezcla.
Three.js brain (kNN drawRange) + PowerGlitch (ambiente+manual) + 2 capas smoke screen + figura PNG + scanlines.
HERO-19 · OBJETO GLITCH 3DNUEVO
Objeto 3D que se transforma + glitch
Sólido de lujo (dodecaedro↔icosaedro) que se reconfigura y glitchea, girando. "Análogo→digital". Mueve el cursor.
Shadertoy XtyXzW portado a Three.js ShaderMaterial · raymarching SDF (fGDF dodeca/icosa) + block-swap glitch + lighting recoloreado oro/cian.
HERO-18 · SHADER GLITCH FIGURA
Glitch GLSL real sobre tu figura
Tu figura se desintegra en señal cromática (glitch de cine). El mouse controla la intensidad. Nivel Lusion.
Shadertoy 4dXBW2 (spectrum-offset, 20 samples) en Three.js ShaderMaterial sobre textura de tu figura · iMouse.x = intensidad.
HERO-17 · GALERÍA 3D
Galería 3D "expediente de inteligencia"
Tus imágenes flotando en capas dentro de un espacio 3D, conectadas con líneas, como el reporte de un caso de agente secreto. Orbitas con el cursor.
Three.js · PlaneGeometry con textura por imagen + EdgesGeometry (marco oro) + LineSegments (conexiones cian) + FogExp2 · réplica ligera del look TensorSpace.
HERO-16 · MATRIX
Lluvia de datos Matrix + tu figura
La clásica lluvia de caracteres de Matrix pero en tus colores (oro/cian, sin arcoíris), con tu figura al frente. "El mundo es un flujo de datos."
Canvas 2D · columnas de caracteres cayendo con estela (fillRect alpha) · líder oro + traza cian · figura PNG.
HERO-15 · GLITCH DIGITAL
Tu figura "volviéndose digital" + botón
Tu figura con efecto glitch (se distorsiona como señal digital). Un botón dispara una ráfaga intensa. Base para tu avatar futuro.
PowerGlitch (slice+shake+hueRotate): instancia ambiente 'always' + instancia 'manual' disparada por botón (startGlitch/stopGlitch) · canvas red 007 · scanlines CSS.
HERO-14 · FIGURA + CEREBRO
Home: tú + cerebro de IA detrás
Tú centrado con un cerebro neuronal denso latiendo detrás de ti = "pienso como una IA". Combina tus 2 favoritos.
Three.js Points + LineSegments con edges kNN (drawRange dinámico) + AdditiveBlending + FogExp2 · figura PNG overlay + HUD.
HERO-13 · CEREBRO 3D
Cerebro pensante denso (Iron Man)
Maraña densa de neuronas y sinapsis en 3D que gira y respira, como el cerebro azul de Iron Man.
Three.js · 700 nodos en blob orgánico (ruido 3D + 2 lóbulos) + edges k-vecinos + AdditiveBlending + FogExp2 · gradiente cian↔oro por profundidad.
HERO-12 · MAPA GLITCH
Mapa territorial vectorial con glitch
Mapa del mundo con bordes dorados brillantes + glitch (líneas que se cortan), en tus colores. Estilo análisis territorial.
Canvas · world-atlas borders con shadowBlur (glow) + arcos + RGB-split (drawImage 3x offset) + tajadas (drawImage slices) + scanlines.
HERO-11 · HOME CENTRADO
Home: tú grande y centrado + mundo
Tú de cuerpo entero, grande y al centro, con el mapa del mundo y arcos detrás. Layout balanceado y responsive.
D3 geoNaturalEarth1 (puntos+graticule) + geoInterpolate arcs · canvas red 007 · figura PNG centrada (translateX) · CSS grid responsive (4 breakpoints).
HERO-10 · HOME IA
Red de puntos + meridianos (007)
Red densa de puntos y líneas que sigue tu cursor + mapa de puntos + columnas de código. Estilo agente secreto.
Canvas: mundo en puntos (geoContains sampling) + red con atracción al mouse + columnas de código tipo data-stream + graticule.
HERO-09 · HOME GLOBAL
Skyline + mundo interactivo
Tu skyline de marina abajo + mapa del mundo con arcos entre ciudades + tu figura. Versión "alcance global".
D3 NaturalEarth + arcos a mercados + skyline CSS con Ken Burns + recorte navy · canvas net.
HERO-08 · SATELITAL
Mapa satelital real + radar que revela
Mapa satelital de verdad (movible, con zoom) + contornos de estados + un radar que gira y revela el terreno. Clic en estado = sus datos.
MapLibre GL + ESRI World Imagery (raster) + us-atlas states (feature-state hover/sel) + canvas radar (velo + cuña destination-out conic).
HERO-07 · HOME LÍNEAS
Rostro → mapa de líneas doradas
Tu figura con una red dorada que emerge de ti (doble exposición de "pensamiento").
Canvas red 007 (×2, una enmascarada por silueta) + D3 world mini + máscaras CSS gradiente · mix-blend screen.
HERO-06 · MAPA INTERACTIVO
Territory Intelligence (estados clicables)
Mapa de USA con radar; al pasar/click en un estado se ilumina y el panel muestra sus métricas.
D3 geoAlbersUsa + us-atlas counties/states (geoContains hit-test) + radar conic + métricas deterministas por estado (hash rng).
HERO-05 · HUD TÁCTICO
Pantalla de comando viva (007)
Topografía que deriva + radar girando + ticks que escanean + retículas. Capa táctica de "agente secreto".
Canvas + d3-contours sobre campo de ruido + radar conic gradient + ticks/markers + scanlines.
HERO-04 · BACALAR REAL
Tu foto real de Bacalar viva
Tu cielo real de Bacalar (con zoom lento) + tu recorte + mapa fundido en tu silueta + humo.
CSS Ken Burns (cielo) + D3 map ×2 (fondo + recortado por máscara silueta) + smoke PNG screen + cursor parallax.
HERO-03 · MAPA D3 VIVO
Mapa de condados que se encienden
Mapa D3 real (no imagen) que reacciona al cursor, fundido con la figura. Reconstrucción viva del mockup.
D3 counties choropleth a canvas (lerp hover) + leader lines + red force + parallax · mix-blend screen.
HERO-02 · GLOBO COBE
Globo girando + figura
Globo WebGL girando (el que te encantó) + foto real, marco para ultrawide.
Cobe (WebGL globe, 5kb) + markers de mercados + figura PNG + HUD.
HERO-01 · MAPA PUNTOS
Mapa de puntos + figura (1er ensayo)
Primer ensayo: mapa mundial en puntos + figura. Base de iteración.
D3 world dots + figura PNG. Versión base.
PORTAL · YOUTUBE
Portal de videos (a re-trabajar)
20 videos reales con lightbox. Versión vieja a re-trabajar con motion.
Grid + lightbox (iframe YouTube). Pendiente rediseño motion.
📄 PAG — páginas / sitios completos
PAG-01 · SITIO REAL
/test1 — HOME ensamblado (definitivo)
El sitio real: hero con tu figura centrada + secciones con scroll (Territory→mapas vivos, Real Estate, Originals, Explorer, Register).
Página scroll · IntersectionObserver reveals · hero D3 world+net+figura · secciones con cards/grids · enlaces a heroes vivos · responsive.
PAG-02 · COMPOSICIÓN
Experimento 06 — layouts
Composición de página / layouts.
Layout HTML/CSS de prueba (Motion Sites).
PAG-03 · HOME REAL v1
Home real v1 (Motion Sites)
Versión de home del chat Motion Sites.
Aporte Motion Sites.
🔹 LIB — técnicas / librerías aisladas (Motion Sites)
LIB · GLITCH PIXEL
Cambio de píxeles + glitch
Transición/efecto de píxeles que cambian (tech).
Canvas pixel manipulation + glitch. Aporte Motion Sites.
LIB · MUNDO MARBLE CINE
Mundo mármol cinemático
Globo estilo mármol cinematográfico.
Three.js globe + textura/material mármol.
LIB · MUNDO MARBLE
Mundo mármol
Globo/mundo estilo mármol.
Three.js globe + material mármol.
LIB · DATA-DISEÑO
Artículo data-diseño
El dato como diseño (gráfica de fondo, texto en capas).
D3/charts + scrollytelling. Datos RealtyOS.
LIB · IMAGEN→PARTÍCULAS
Imagen en partículas
Una imagen se vuelve nube de partículas/puntos.
Canvas getImageData → partículas (dispersión).
LIB · SCATTER PAÍSES
Dispersión RE por país
Gráfica de dispersión animada (dato vivo).
D3 scatter animado.
LIB · CEREBRO 2D
Cerebro neuronal (FUI 2D)
Red neuronal 2D estilo Prometheus/Iron Man.
Canvas red neuronal + FUI.
LIB · TACTICAL HUD
HUD táctico (overlay)
Retícula lat/long + puntos + líneas (Bond/militar).
Canvas/SVG HUD overlay.
LIB · GRÁFICA INTERACTIVA
Observable Plot interactivo
Gráfica con tooltip/hover (el dato como diseño).
Observable Plot + interacción.
LIB · WORLD LABS
Embed World Labs
Slot para mundo World Labs/Marble.
Embed iframe.
LIB · LUMA SPLAT
Embed Luma (splat)
Slot para escena Gaussian Splatting de Luma.
Embed Luma.
LIB · KUULA 360
Tour 360
Visor 360 (cambiar por tu tour de Sisal).
Embed Kuula 360.
LIB · GOOGLE 3D TILES
Google 3D Tiles
Ciudades en 3D fotorrealista (volar sobre la zona).
Google Photorealistic 3D Tiles embed/API.
LIB · ESFERA PARTÍCULAS
Esfera de partículas
Globo de partículas abstracto/elegante.
Three.js Points.
LIB · MAPA PINS
Mapa con propiedades
Mapa real con pins de propiedades.
MapLibre + pins. (Buenísimo para sisalbeachrealestate.)
LIB · NEBULOSA ORO
Nebulosa dorada
Polvo/nebulosa de oro, ultra minimal lujo.
Canvas/partículas.
LIB · CONSTELACIÓN
Red de mercados
Red viva como decoración.
Force graph (decorativo).
LIB · SCROLLYTELLING
Vuelo sobre territorios
Globo fijo + texto que pasa (vuela entre mercados).
Scrollytelling + globo.
LIB · CHOROPLETH
Mapa de datos por color
Mapa coloreado por dato.
D3 choropleth.
LIB · MAPA OSCURO
Mapa oscuro interactivo
Mapa real oscuro, layout split.
MapLibre + CARTO dark.
LIB · TERRENO 3D
Terreno/relieve 3D
Terreno 3D ondulante (sensación relieve).
Three.js terrain.
LIB · SATÉLITES
Satélites en órbita
Satélites orbitando (inteligencia desde el espacio).
Three.js órbitas.
LIB · HERO GLOBO
Hero globo de territorios
Globo + arcos oro (mercados reales).
Three.js/D3 globe + arcs.
LIB · OBJETO 3D LUJO
Objeto 3D de lujo
Objeto 3D oro sobre negro, minimal.
Three.js mesh + material.
LIB · CONSTELACIÓN TERR.
Force-graph decorativo
Grafo de fuerza como decoración.
D3 force-directed.
LIB · DOBLE EXPOSICIÓN
Mapa dentro de la figura
Mapa cuadriculado dentro de la silueta (doble exposición).
Choropleth + máscara de silueta.
LIB · GLOBO CHOROPLETH
Globo Choropleth
Globo coloreado por datos.
D3 geo orthographic + choropleth.
★★ Hero Luz Líquida (shader WebGL)
fbm domain-warp reactivo al cursor + tipografía cinética (look moderno tipo Stripe/Unicorn)
★★★ ORBITER — motion 3D salvaje
Modelo 3D PBR real que rota con el scroll + nebulosa + HUD (cualquier tema)