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.
v265 · HOME — LOADER-GATE: la materialización ES la carga★★★ HOME ACTUAL
Te ensamblas por glitch (lento, por partes) MIENTRAS carga todo, con barra de progreso (en no-PC o si tarda); las nubes ABREN solo al 100% → arranca fluido sin tirones. Figura más ABAJO en celular (título/botones arriba). Splat con fallback a pano/imagen.
Gate: barra de progreso rastrea figura+mapa+splat; openClouds() al 100% (mín 2.8s, máx 12s); el reloj del mapa arranca ~3s tras abrir. matProg topado a 0.92 hasta cargar. Celular: figura anclada al fondo + .hero/.btns al top. Sobre v264.
v264 · HOME — materialización GLITCH restaurada★★★ HOME ACTUAL
La figura ya NO se desliza desde abajo ni hace fade lento: aparece EN SU LUGAR materializándose por GLITCH (líneas/puntos por partes, como antes). Conserva los 3 tiers (PC/laptop/tablet/celular), opacidad sólida por tiempo y splat en todos.
riseY=0 (sin slide); opacidad rápida ~0.55s; glitch protagonista durante 2s. Sobre v263.
v263 · HOME — 3 TIERS adaptativos (PC/laptop/tablet/celular)★★★ HOME ACTUAL
Una sola URL que se adapta al dispositivo: splat de Luma en TODOS los tiers, pero partículas y mapa escalados (PC 41.5k · laptop 22k · tablet 10k · celular 5k). Opacidad de la figura por TIEMPO (ya no sale transparente en tablet). Pano des-volteado solo si la red es muy mala. Preload del splat detrás del blanco.
Arreglos: PC siempre splat; opacidad time-based (sólido en 2s reales aunque vaya lento); partículas/DPR/mapa por TIER; perímetro y agua simplificados en móvil; menos etiquetas. Override ?tier=pc/laptop/tablet/cel · ?bg=splat/pano. Sobre v262.
v262 · HOME — 1ª VERSIÓN MÓVIL + tier de conexión★★★ HOME ACTUAL
Primera versión pensada para celular/tablet: detecta el dispositivo y usa el PANO 360 Kuula de 351KB (paneo lento) en vez del splat de 11MB → carga ligero en datos. En desktop/WiFi sigue el splat 3D. DPR del mapa a 1.5 en móvil (más fluido). Override ?bg=splat / ?bg=pano. Conserva todo v261.
Tier por ancho (<1100px o pointer:coarse → pano). Banner de versión oculto en móvil. Sobre v261.
v261 · HOME — zoom más cercano + polígono más animado★★★ HOME ACTUAL
Sobre v260: ZOOM MÁS CERCANO a Puerto Cancún (la zona se ve más GRANDE detrás de ti, ~6.9x) + POLÍGONO MÁS ANIMADO (draw-on + marching-ants en el borde + pulso de escaneo que viaja por el perímetro). Conserva: mapa al seg 15 tenue/progresivo, marina a los costados, contorno amarillo del perímetro, data real (40 proyectos/5 zonas/TRACKING SYSTEM).
Cámara hold zh 0.088 (vs 0.106). Polígono: tras draw-on, dashes animados (lineDashOffset) + dot glow recorriendo el perímetro por longitud de arco. Sobre v260.
v260 · HOME — el mapa aparece al SEG 15★★★ HOME ACTUAL
Igual que v259 (secuencia cinemática: aparición progresiva, marina a los costados, polígono draw-on, contorno amarillo del perímetro) pero el mapa de líneas entra al SEGUNDO 15 — antes deja que el splat Luma tome color y la escena se disfrute ~10s.
t0clock a 15s; el mapa sube de opacidad 0→0.96 y se dibuja a partir del seg 15. Sobre v259.
v259 · HOME — SECUENCIA CINEMÁTICA (guion completo)★★★ HOME ACTUAL
Splat Luma materializa a COLOR → beat ~1.2s a color → el mapa entra TENUE y PROGRESIVO dibujándose poco a poco. Marina a los COSTADOS (no detrás). Polígono rojo que se DIBUJA. Contorno AMARILLO del perímetro trazándose + ubicaciones.
Sobre v258 (territory data analysis: 40 proyectos reales / 5 zonas / landmarks por estado / TRACKING SYSTEM). Aplica el guion de tu video: aparición progresiva del mapa tras el beat de color, aéreo a color durante la aparición (atenuado sólo al cerrar), marina flanqueando la figura, polígono y perímetro amarillo con draw-on. Calibración tecla G · ?clean=1.
Reveal t0clock 5s; cv.opacity=clamp((ts-1.2)/2.8); ai gated (ts-4.5)/1.5; polígono draw-on pdraw=(tl-9.5)/1.9; perímetro=WATER.poly más grande con draw-on. Sobre v258.
v257 · HOME — TERRITORY INTELLIGENCE: proyectos REALES + web de análisis★★★ HOME ACTUAL
El look del mockup: marcadores de proyectos REALES de Puerto Cancún con su CATEGORÍA de inteligencia (ASSET TRACKING / HIGH-VALUE ZONE / HOTEL ZONE / COASTAL MONITORING / MARINA ZONE), unidos por una WEB de líneas punteadas animadas, + panel TRACKING SYSTEM (SAT-0237 · DRONE FEED · GEOLOCK · AI ANALYSIS RUNNING). Parece que vas en el dron analizando el territorio.
Sobre v256. Proyectos reales con coordenadas geo-precisas de OSM: Shark Tower, Alba, Allure, Port Marina, Novo Cancún, Grand Hyatt, SLS, Renaissance, Marina Condos — cada uno con corchetes de encuadre + categoría de territorio (estilo mockup Real Estate · Territory Intelligence) + datos (niveles/unidades/m²). WEB de líneas punteadas animadas conectando los marcadores = análisis de territorio. Panel TRACKING SYSTEM abajo-izquierda con SAT/DRONE/GEOLOCK/AI parpadeando. Encima de: cámara 3D que aterriza en las curvas de la marina (agua real OSM) + casing oscuro + oscurecimiento suave del aéreo. Los ~895 POIs reales (hoteles/restaurantes/avenidas) siguen apareciendo por cercanía con scramble. Próximo: datos de proyectos del scraper #5 caen en la misma estructura. Calibración tecla G · ?clean=1.
CITY.hero[] con cat (categoría) + coords reales OSM. Render: web punteada (setLineDash + lineDashOffset animado) entre marcadores visibles; categoría en label de 2 líneas; panel TRACKING SYSTEM con blink en AI ANALYSIS. Sobre v256.
v256 · HOME — CÁMARA 3D ATERRIZA en la pose + CURVAS de la marina (agua real)★★★ HOME ACTUAL
El mapa aterriza y SOSTIENE la pose de tu 2ª URL (rumbo ~115° / tilt 37°, más zoom) con las CURVAS de los canales de Puerto Cancún GRANDES y transparentes detrás de ti — mar abajo, ciudad arriba. Ahora con el AGUA real de OpenStreetMap (190 polígonos de canales/dársenas) que antes faltaba.
Sobre v255. Dos avances: (1) la cámara ahora ATERRIZA y hace HOLD ~6s en la pose exacta de tu captura de Google Maps 3D (curvas de la marina llenando el centro), luego orbita viva con leve drift de rumbo y vuelve a centrar antes del pull-back; (2) DATA-FIX clave: el mapa tenía 4,318 calles pero solo 9 costas y 2 cuerpos de agua → las curvas (que son CANALES de agua) no salían. Traje de OpenStreetMap/Overpass los 190 polígonos de agua de la marina (pcwater-pc.json) y los dibujo como contornos blanco-cyan + relleno sutil — solo dársenas chicas se tintan; el mar/laguna grandes NO (se sigue viendo el vuelo de dron). Tilt bajado de 43°→37° para que las curvas llenen sin dejar espacio muerto. Conserva casing oscuro + calibración (tecla G, ?clean=1, lector con RUMBO°/TILT°). PLANTILLA por ciudad ahora = 3 archivos: calles + POIs + agua.
proj() heading+pitch+perspectiva. Keyframes con LAND+HOLD en la pose URL. Agua: fetch Overpass natural=water/waterway/coastline en el bbox → normalizado [dx,dy] → pcwater-pc.json {poly,line}; render con proj() por vértice, fill rgba(30,90,140,.18) solo si <160 pts, stroke cyan + casing oscuro. Verificado headless sobre aéreo brillante SIMULADO. Sobre v255.
v255 · HOME — CÁMARA 3D: GIRO + INCLINACIÓN del mapa★★★ HOME ACTUAL
El mapa ahora GIRA (rumbo 104°) y se INCLINA (tilt 43°) como la pose de tu URL de Google Maps → mar abajo, ciudad arriba, marina grande detrás de ti. Líneas con casing oscuro que se leen sobre el aéreo. Oscurecimiento MUY suave (se disfruta el vuelo de dron).
Sobre v254. Tu URL (255.86h/43.38t) traducida a cámara real: el satélite desciende NORTE-ARRIBA y se ORIENTA girando a rumbo 104° + inclinándose a 43° para encuadrar la marina de Puerto Cancún con el Caribe hacia abajo y la península (torres/golf/plaza) hacia arriba — exactamente tu encuadre. Proyección 3D real (heading + pitch + perspectiva), no solo zoom plano: las calles convergen al horizonte como en GEOlayers. El polígono ROJO y los edificios se ven en perspectiva. Dos correcciones del video: (1) el aéreo Luma ya NO se apaga (brillo 0.80, scrim 0.30) — se sigue viendo el vuelo de dron; (2) CASING OSCURO bajo cada línea/etiqueta blanca → se leen sobre el aéreo brillante sin tener que oscurecerlo (truco GEOlayers). Conserva calibración (cronómetro+cuadrícula+marcadores; ahora el lector también muestra RUMBO° y TILT°). Tecla G oculta · ?clean=1 graba limpio.
cam() interpola hd (rumbo) y pt (tilt) por keyframe; proj(dx,dy)=rotación 2D por hd + perspectiva 1/(1-ry·sin(pt)·k) + squash vertical cos(pt). A hd=0/pt=0 ≡ cenital original (compatible). Keyframes: t0 norte-arriba casi cenital → t11 pose URL (104°/43°) → orbita con leve drift 104↔108 barriendo el polígono IZQ↔DER a mis costados → t38 se reendereza (loop). Culling de vías expandido para la vista rotada. Graticule DMS se oculta al inclinar (>14°). Casing: shadowColor oscuro en líneas + texto. Verificado headless sobre fondo brillante SIMULADO (no forzado oscuro) confirmando legibilidad.
v254 · HOME — MAPA TERRITORY INTELLIGENCE + MODO ANÁLISIS★★★ HOME ACTUAL
Como satélite en modo análisis: al acercar el mapa, el aéreo Luma se oscurece y desatura para que las líneas/polígono/headlines salten nítidos, y vuelve a color al alejar
Igual que v253 (mapa Territory Intelligence notorio + POIs REALES + headlines scramble + polígono ROJO barriendo + calibración) pero resuelve el lavado que se vio en el video real: sobre el aéreo Luma vivo (verdes/azules) las líneas blancas se perdían. Ahora MODO ANÁLISIS: cuando la cámara desciende a analizar, el aéreo se oscurece (brillo 0.38) y desatura (0.26) con un scrim radial, los headlines suben de opacidad, y al hacer pull-back el aéreo regresa a todo color — como un satélite que entra en modo análisis y sale. Conserva el MODO CALIBRACIÓN (cronómetro+cuadrícula+marcadores+estado del motor; tecla G, ?clean=1).
En frame(): intensidad análisis ai=smoothstep((0.62-zh)/(0.62-0.205)) → #amode opacity ai*0.82 + #bg360 filter brightness(1-0.62ai) saturate(1-0.74ai); headlines alpha 0.16→+0.16ai. Verificado headless sobre fondo brillante SIMULADO (no forzado oscuro) confirmando que el mapa salta cuando el aéreo se atenyúa. Sobre v253.
v253 · HOME — MAPA TERRITORY INTELLIGENCE + CALIBRACIÓN★★★ HOME ACTUAL
Intro de video analizando Puerto Cancún: líneas blancas notorias + POIs REALES con datos + headlines scramble detrás de ti
El home película: cámara satélite que desciende y barre la MARINA de Puerto Cancún sobre un mapa de calles blancas (más notorio, opacidad 0.84). Marca ubicaciones REALES de Google Maps con sus datos de análisis — Shark Tower (38 niveles · 142 unidades · 24,800 m²), Port Marina, Allure, Novo Cancún, SLS, Marina Condos, Renaissance — más ~895 POIs reales (plazas, hoteles, avenidas, edificios) que aparecen con efecto scramble por cercanía a la cámara, con sus coordenadas DMS. Headlines GRANDES con scramble detrás de tu figura (PUERTO CANCÚN · ANÁLISIS DE TERRITORIO · MARINA·GOLF·BEACH CLUB · 3.5 km²·2,800 UNIDADES). Polígono ROJO latiendo = zona prioritaria (único color). Retícula de coordenadas DMS móvil + barrido de scan + consola IA contando edificios. Es la PLANTILLA por ciudad: cambiar de ciudad = nuevo objeto CITY + 2 archivos de datos (calles + POIs).
CITY config (bbox/cámara/hero/headlines/stats) + pcmap-pc.json (4,318 calles OSM) + pcpoi-pc.json (895 POIs reales Overpass). Cámara keyframes con smoothstep, proyección uniforme S=H/2zh + parallax. Líneas blancas por tono según longitud · costa con glow · retícula DMS 30 arc-seg · scramble canvas por glyph · culling por bbox/vía. Líneas blancas +15% opacidad/grosor + grosor que ESCALA con el zoom (al acercar se ven gruesas). Cámara con ZOOM PROFUNDO (zh 0.11) y paneo que barre el polígono ROJO por las 4 columnas IZQ↔DER a los costados de la figura (ya no lo tapa). MODO CALIBRACIÓN (para grabar y mostrar cómo se ve en cada escritorio): cronómetro desde la carga + cuadrícula 4 columnas + marcadores de esquina de color + lector del estado interno del motor quemado en el frame → puedo cronometrar y ubicar comportamientos desde tus videos. Tecla G oculta · ?clean=1 graba limpio · ?mapnow=SEGUNDOS. Sobre v252.
HERO-193 · ARRANQUE CONTINUO (sin bocanada)🔥 NUEVO
El 191 que te gustó, pero el inicio ya NO es bocanada de buzo + más comido + más partículas
Corrige SOLO el arranque del 191 (el estado estable que te encanta queda igual): ya no sale un grupo grande de golpe que flota como burbujas de buzo y deja un hueco vacío. Ahora las partículas PELAN del borde lento y dispersas desde el frame 1, emisión CONTINUA que crece parejo (paulatino), sin hueco. Activación de cada zona suave (no se prende de golpe), velocidad escalada por el avance, vida con mucha variación (no mueren todas juntas), emisión repartida por toda la orilla. + borde más despedazado + más partículas (30k).
act ramp *2.5 (era *6) · speed×launch(0.30→1) escalado por emitProg · ld×(0.55-1.5) variación · rate LINEAL 460·emitProg (era cuadrática) · phase vSweep0.42+cluster0.30 · erosión D>n*0.46 · pow(D,1.05) · target 30k. ?pano=1 panorama · ?white=1
HERO-192 · CIUDAD DUBAI NUBE DE PUNTOS🔥 NUEVO
Skyline Dubai PROCEDURAL en puntos detrás + piso data-grid + fog programado (no foto)
Ciudad estilo Dubai (Burj + Marina) recreada 100% en código como NUBE DE PUNTOS que titilan, sobre un piso data-grid en perspectiva con rutas de datos glow — look internacional “celebrity real estate”. Niebla VOLUMÉTRICA programada (no foto) de la que emergen los edificios. Parallax con el cursor. Mantiene el sujeto pulverizándose del 191 enfrente. Varias versiones en una: normal = niebla media · ?fog=0 cielo despejado · ?fog=2 edificios entre nubes densas · ?pano=1 usa el panorama 360 en vez de la ciudad · ?white=1 comparación.
26 torres con silueta gaussiana (pico izq-centro=Burj) · rejilla de ventanas como puntos (lit/gold/edge, twinkle) · piso perspectiva al horizonte + quad-curves glow · fog = radial-gradients que derivan + banda base · DPR canvas propio z1 detrás del figc. ?fog=0/1/2 ?pano=1
HERO-191 · BORDE COMIDO + 3× + SIN MANCHAS🔥 NUEVO
Lo mejor del 185 (borde despedazado) + lo mejor del 190 (partículas perfectas) = polvo de roca
Toma el BORDE MUY COMIDO del 185 pero con huecos ANGULARES (no redondos “queso de ratón”) en la forma de los puntos, y conserva tamaño/dirección/color de partícula del 190 (de lujo). 3× partículas (24k) = polvo de roca denso como meteorito desintegrándose. SIN manchas blancas (nebulosa eliminada). Sin hueco al inicio: el polvo aparece PEGADO al borde comido = la FOTO se pulveriza ahí mismo.
huecos polígono 5-9 vértices · umbral D>n*0.55 (más comido) · reveal cap 1.0 · target 24k/9k · ramp prox 2-3px (sin gap) · alpha 0.38 (menos glitter) · transform inline cos/sin (sin save/restore) · nebula=[]. ?white=1
HERO-190 · COLOR REAL + GRADUAL🔥 NUEVO
Color del saco (la FOTO se pulveriza, no glitter) + arranque gradual
Clave: las partículas ahora llevan el COLOR REAL del saco (teal/navy ×1.25, casi sin brillar) en vez de glitter cian → parece que la FOTO se pulveriza, no brillantina de otro color. Más a la DERECHA + más vida + más expansión (deriva constante, menos drag, ld 0.0006). Arranque GRADUAL cuadrático desde banda ancha del hombro (poco a poco, sin el bloque concentrado).
dark color rc*1.25+6 · vx deriva +0.08 const · drag 0.998 · ld 0.0006 · rt 0.92-1.12 · phase vSweep banda hombro · rate=emitProg² · ?white=1
HERO-189 · BARRIDO HOMBRO🔥 NUEVO
Arranca en la esquina del hombro y baja por partes + contorno cara derecha
Afina 188: la desfragmentación ya NO arranca pareja por todos lados — ahora es un BARRIDO radial desde la ESQUINA DEL HOMBRO que se expande al brazo en PARCHES esporádicos (phase=distancia al hombro + parches baja frecuencia, ramp más lento, activación marcada). Agrega un POQUITO en el filo derecho de la cara + cuello (ojos/cara core intactos).
phase=dist(esquina hombro)·0.74 + clusterNoise·0.40 · emitProg 0.0026 · act×6 · faceEdge skin 0.10 en filo derecho · 6 capas erosión sync.
HERO-188 · PROGRESIVO + NUBE VIVA🔥 NUEVO
Erosión progresiva desde el borde + arranca en glitch + polvo que vive más
Arregla el arranque: la erosión ya NO deja el brazo hueco de golpe — se desfragmenta por CAPAS de fase (borde primero → adentro) en sync con las partículas, y arranca DURANTE el glitch (~1s). Partículas viven MÁS (nube grande que no desaparece), más cantidad (9500), hombro va arriba y brazo/mano más a la derecha.
6 capas de erosión por fase espacial (depth desde borde+ruido) reveladas con emitProg · ld 0.0009 (vida larga) · target 9500 · wind por ny (hombro up / brazo right) · revealed=1050ms.
HERO-187 · CONTORNO + RITMO🔥 NUEVO
Cabeza solo contorno (no bloque) + emisión escalonada por ritmos
Afina 186: la CABEZA ya no pierde un bloque de la cara — banda fina solo en el contorno (bandHead 0.05 vs cuerpo 0.18) + caja de cara más amplia. Y la INTRO ya no desmiembra el brazo de golpe: emisión ESCALONADA (cada zona activa en distinto momento vía phase + emitProg) y con RITMO propio por zona (pulse), tamaños variados en el tiempo.
bandHead/bandBody según ny · buildCum 1×/frame (act=emitProg-phase, pulse=sin(ph2)) + pickEm busca binaria · emitProg ramp ~3s · rate escala con emitProg.
HERO-186 · ROCK SHARDS🔥 NUEVO
Fragmentos angulares de roca (no burbujas) + contorno cara/cabello/cuello
Corrige 185: partículas ANGULARES irregulares (6-10 caras, puntiagudas, tipo polvo de roca) en vez de círculos/burbujas. MÁS densidad (8800). Disolución pico en HOMBRO (no tira pegada al brazo). Agrega un POQUITO de desprendimiento en cabello/contorno de cara/cuello/hombro (vía contorno superior topY) manteniendo la cara core intacta. Color real + drift derecha.
verts 6-10 con picos · topY contorno superior (Dt ligero) · vy pico hombro ny0.32 · skin graduado (cara0/cuello0.14/mano0.30) · spatter clustering · target 8800. ?white=1
HERO-185 · SPATTER + COLOR REAL🔥 RECOMENDADO
Clustering tipo brocha Photoshop + polvo = pedazos reales de ti
Salto de realismo sobre 184: (1) CAMPO DE SPATTER (textura de gotas/clusters generada en código) controla dónde sale el polvo → distribución orgánica en grumos como brocha de Photoshop, no pareja. (2) Color REAL muestreado del traje (navy/azul/blanco) en vez de paleta abstracta → el polvo parece pedazos de él; brillado para glow en oscuro, real en ?white=1. Mantiene encuadre + rostro blindado + mano del 184.
buildSpatterField 560x820 (clusters de gotas) → spatterAt(nx,ny) modula D · color=pxData real (×2.2 dark / ×0.85 white) · arc nítido. Compara: ?white=1
HERO-184 · CRISP FIX🔥 NUEVO
Corrige el retroceso del 183: encuadre fijo + puntos nítidos densos
El 183 falló (figura gigante/cabeza cortada + puntos suaves lavados). 184 corrige: encuadre desktop v6 anclado abajo centro-derecha (cabeza visible, sin zoom) + puntos NÍTIDOS redondos (arc=antialias pero opacos/visibles, no cuadrados ni blobs lavados). Mantiene rostro blindado + mano 30% + v6 responsive. Compara ?white=1.
desktop FH=0.92H anclado abajo FX centro 0.57 · render arc opaco con paleta CYAN(oscuro)/NAVY(blanco) · resto = modelo borde-derecho×oscuridad del 182/183.
HERO-183 · V6 RESPONSIVE + SUAVE🔥 NUEVO
Una sola imagen v6 (limpia) + partículas SUAVES + mano · ?white=1
Usa SOLO v6 (recorte limpio sin sofá) para escritorio y móvil = responsive simple y mejor detección de borde. Partículas ahora SUAVES (gradiente radial, antialias = no pixeladas) con variedad de tamaños visible (0.7-9px) + nebulosa. Rostro blindado por caja de cabeza; la MANO tiene poca descomposición (30%) como la ref.
kev-saco-v6.png 1080x1590 para todo · desktop anclado centro-derecha · soft-dot radial palette (navy en white / cian en dark) · skin: cara protegida, mano skinMul 0.30 · sz=0.7+pow(u,2.9)*8.5 · zonas re-tuneadas a v6.
HERO-182 · ROSTRO BLINDADO🔥 NUEVO
Rostro 90% intacto (skin detect) + nube densa finísima · ?white=1
Corrige 181: detección de PIEL (r>g>b cálido) protege rostro/cuello/manos sin importar posición + caja de cabeza amplia → la cara NO se deshace. Densidad MUY alta (6800 pts) de polvo atomizado finísimo (sub-1.5px), plume más alto up-right. Compara con ?white=1.
skin r0>g0>=b0 & r0-b0>14 & r0>95 = continue · caja nx0.44-0.72 ny0.03-0.31 · sz=0.4+pow(u,3.4)*4.2 · target 6800 · speed bajo=densidad · wind 0.78/-0.58.
HERO-181 · FINE EDGE + MODO BLANCO🔥 NUEVO
Solo borde derecho (navy se deshace, camisa NO) + polvo finísimo · ?white=1
Reescribe el modelo: disolución medida desde el BORDE DERECHO (rightX) × OSCURIDAD → el saco navy se disuelve y la camisa blanca/piel RESISTEN (centro limpio, ya no riega el pecho). Partículas atomizadas finísimas (0.4-6px, sin blobs). AGREGA modo comparación: abre con ?white=1 → fondo claro + partículas navy OSCURAS = misma prueba que la ref de ChatGPT.
rightX por fila + bandW 0.15·IW · dark=(0.60-L)/0.40 (camisa resiste) · sz=0.4+pow(u,3)*5.6 · WHITE: source-over + color real del traje oscurecido + oculta panorama/nav/texto, HUD navy. Comparar: hero-lab-181-fine-edge.html?white=1
HERO-180 · FIGURA + CIUDAD🔥 COMPUESTO
Tú desintegrándote + Dubái en nube de puntos detrás
El compuesto: figura del 179 (splatter de tinta + nebulosa) AL FRENTE + ciudad de Dubai Marina como nube de puntos Gaussian-splatting DETRÁS (sin cielo, se construye de abajo→arriba, mismo estilo de partículas cian). Capa de ciudad atenuada (DIM 0.5) para que la figura resalte. El cielo queda libre para otra capa.
canvas cityc z2 detrás de figura z5 · point-cloud dubai-marina.jpg con detector de cielo · ~13k pts bottom-up + twinkle · IIFE independiente · parallax mouse propio · figura 179 intacta encima.
HERO-179 · INK SPLATTER + NEBULA🔥 NUEVO
Polvo cósmico: splatter de tinta + nebulosa + brazo derecho
Afina 178: sprites de SALPICÓN de tinta irregulares (blob+gotas satélite) en vez de puntos redondos, tamaño CONTINUO ley de potencia (0.5→27px), color AZUL del traje + cian + highlights, capa de NEBULOSA difusa (polvo cósmico flotando entre partículas), y la eliminación concentrada en el BRAZO derecho (como la ref). Cara/torso/izquierda intactos.
8 sprites splatter ×4 colores · sz=0.5+pow(u,3.2)*27 · nebula = 22 radial-gradients drifting · D con boost brazo nx>0.6 · erosión spatter umbral 0.82 · titileo cósmico · ~4200 pts.
HERO-178 · TUNED🔥 EL BUENO
Afinado a la foto ref: banda vertical derecha + nube densa
Afina 177: disolución en BANDA VERTICAL del lado derecho (baja por solapa/brazo a la mano), camisa/pecho centro LIMPIOS. Densidad alta cerca del cuerpo que se adelgaza, gradiente de tamaño (flecks grandes pegados al cuerpo, polvo fino lejos), profundidad volumétrica (brillo variable), plume barre arriba-derecha despejando la cara. Ref canónica: _REFERENCIA-desintegracion-canonica.png
D=rampa nx0.54-0.74 × plateau vertical ny0.10-0.74, gamma 1.7 (centro limpio) · ~3600 pts · tipo escala con Deff (trozos grandes en borde sólido) · bright 0.55-1.0 = volumen · viento 0.74/-0.52 + streamers + drag 0.996.
HERO-177 · FRAY DISSOLVE🔥 NUEVO
La tela se desmorona en polvo fino (clavando Transcendence)
Corrige 176: campo de disolución D(nx,ny) concentrado en lado derecho+cabeza (como foto saco azul). La TELA misma se desmorona (huecos spatter donde D>ruido = fray orgánico, no borde limpio). Granos finísimos REDONDOS (mayoría 1px, no cuadrados). Plume densa que se expande arriba-derecha. Cara/pecho/izquierda intactos para siempre.
D=rampa derecha × envolvente vertical, cara protegida · edgeDist 5 anillos → borde se deshace más · huecos arc destination-out alpha 0.92 (gradiente sólido→polvo) · ~2800 pts redondos (arc), 62% sub-2px · viento up-right + streamers + drag ligero = plume largo.
HERO-176 · EDGE SPRAY🔥 NUEVO
Solo el CONTORNO se vuelve polvo (estilo Transcendence)
Corrige 174 según anotación Photoshop de Kev: SOLO la orilla del cuerpo se desintegra en puntos tipo espray/brocha (no cristales), tamaños variados, que FLOTAN y se expanden hacia afuera. El core (pecho/tronco) queda 100% sólido para siempre — el sujeto nunca desaparece. Irregular: más en hombro/cabeza.
Emisión por proximidad al borde-alpha (anillos 10/26/46px) → core sin transparente cerca = protegido · filtro ny<0.64 + luminancia<0.6 (excluye sofá) · ruido+clump+boost hombro · puntos suaves (no polígonos) · velocidad outward desde centroide + drag = flota · edgeMask destination-out CONSTANTE (rim polvoso, no come cuerpo).
HERO-175 · CITY POINT CLOUD🔥 NUEVO
Foto de Dubái → nube de puntos que se reconstruye
Foto real de Dubai Marina convertida a ~17k puntos en CÓDIGO (estilo Gaussian Splatting). El cielo se descarta, los edificios se construyen de abajo→arriba con puntos que titilan (ruido), y las cimas se desintegran en puntos que vuelan a la derecha. Grade holográfico cian + acentos oro.
getImageData + detector de cielo (azul brillante/nube) → muestreo a puntos · typed arrays · canvas lighter (aditivo) · reveal por delay=(1-ny) · twinkle sin(seed) · floaters de silueta superior con drift+respawn · parallax mouse.
HERO-174 · HOLES + SHARDSNUEVO
Desintegración lado derecho: huecos reales + cristales
Corrige 172: el cuerpo AHORA tiene huecos (destination-out) donde se desprenden los píxeles, fragmentos son polígonos irregulares (rombos/triángulos, no cuadrados) y vuelan hacia la DERECHA. Centro del pecho protegido.
holeMask 700 rects rotados + destination-out proporcional a revProg · shards = polígonos 3-5 vértices generados en spawn · velocidad horizontal derecha · color cuerpo boosteado.
HERO-173 · CITY WIREFRAME 3DNUEVO
Ciudad estilo Dubái en líneas que se construye sola
Skyline 3D generado en código (no foto): 35 edificios wireframe que crecen de abajo→arriba como construcción holográfica + paquetes de datos subiendo + nodos en las cimas. Cámara orbita al terminar.
Three.js · BoxGeometry+EdgesGeometry+AdditiveBlending · scale.y animado por delay · grid de suelo · Points data-packets + glow nodes · FogExp2 + parallax cámara.
HERO-172 · CLOUD FULL🔥 NUEVO
Desintegración completa lado derecho · 1800 partículas
Todo el lado derecho se disintegra: 72% polvo cósmico brillante + 23% copos + 4% chunks + 1% fragmentos. Blending aditivo (lighter): densidad = glow cian. Lado izquierdo 100% sólido.
dustc globalCompositeOperation=lighter · emitters interior nx>0.42 · target 1800 · velocity UP + rightDrift · dust rgb(110-185,165-215,225-245) visible en fondo oscuro · ramp [6,8,12,16]px.
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.