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-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-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-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-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-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-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).
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.