Sitio Web Interactivo Con Claude Fable 5: Revelación de Imagen

Sitio Web Interactivo Con Claude Fable 5: Revelación de Imagen

El efecto que me detuvo en Pinterest era estúpidamente simple. Una foto oscura de una pared de roca. Haces scroll y el césped crece sobre la roca — excepto que no crece, se revela, como si la segunda imagen estuviera escondida detrás de la primera todo el tiempo. Sin video. Sin 3D. Dos imágenes planas y un truco visual.

Hice una captura de pantalla, abrí una terminal y decidí reconstruir todo como un sitio web interactivo con Claude Fable 5 — el héroe, la revelación, el texto animado, todo — sin escribir el CSS yo mismo ni tocar una herramienta de diseño. Cuarenta minutos después tenía una página que parecía hecha por un estudio. Luego publiqué una grabación de pantalla en X, y las respuestas empezaron a hacer la misma pregunta: "espera, ¿cómo?"

Este es el cómo. No la versión pulida donde todo funciona al primer intento — la real, incluyendo la parte donde activé la revelación en el evento equivocado y lo rompí, y la decisión de redimensionar que hizo que todo se sintiera intencional en vez de accidental. Al final podrás construir el mismo efecto, dirigir a Fable para que no ahogue tu diseño en degradados, y convertir el resultado en el tipo de publicación que la gente realmente comparte.

Déjame empezar con lo único que la mayoría de la gente hace mal antes de abrir una herramienta de IA.

Por Qué Construyo Con Claude Fable 5 en la Terminal, No en el Navegador

Este es el error que veo constantemente: la gente intenta construir sitios web interactivos dentro de un chat de IA en el navegador, choca contra una pared en el momento que quiere dos imágenes superpuestas con posicionamiento preciso al píxel, y concluye "la IA no puede hacer diseño real." La herramienta era el problema, no la IA.

Fable 5 es genuinamente capaz de esto. Se lanzó el 9 de junio de 2026 como el modelo más poderoso disponible públicamente de Anthropic — una ventana de contexto de 1M de tokens por defecto, hasta 128k tokens de salida por solicitud, y 80.3% en SWE-Bench Pro con el siguiente mejor modelo rezagado por 11 puntos (según el desglose de benchmarks de TrueFoundry). Ese razonamiento de largo horizonte es exactamente lo que necesita una página interactiva multicapa. Tiene que mantener todo el DOM, el CSS, las matemáticas del scroll y la intención de diseño en su cabeza simultáneamente y mantenerlos consistentes a través de cinco secciones.

Pero necesita un espacio de trabajo real para hacerlo. Lo ejecuto a través de Claude Code en la terminal, apuntando a una carpeta de proyecto real, para que pueda leer archivos, escribir archivos, ver la página completa que está construyendo e iterar sobre un servidor de desarrollo en ejecución. Un chat en el navegador te da un fragmento y olvida que existió. La terminal le da a Fable una memoria del proyecto — y con una ventana de contexto de 1M, esa memoria es todo el código fuente, no un resumen que se desvanece.

También hay una razón de costo para trabajar de esta manera. Fable cobra $10 por millón de tokens de entrada y $50 por millón de salida — el doble de Opus 4.8, el modelo más caro que Anthropic ha lanzado. Fue gratuito en Pro y Max del 9 al 22 de junio de 2026, luego pasó a créditos de uso a tarifas de API. Cuando cada token de salida cuesta dinero, no quieres regenerar una página completa porque el chat perdió contexto. Quieres ediciones quirúrgicas a archivos que ya existen. Profundicé en esas matemáticas de costo en mi construcción Claude Fable AIOS, y la lección se aplica directamente al trabajo de diseño: estructura tu proyecto para que Fable edite, no re-emita.

Así que: descarga Claude Code, crea una carpeta y deja que Fable trabaje donde realmente puede pensar. Ahora la parte divertida — encontrar algo que valga la pena construir.

Robar de la Manera Correcta: De Pinterest a una Imagen Fuente en Modo Oscuro

No empiezo desde un prompt en blanco. Empiezo desde una referencia, porque "constrúyeme un héroe genial" te da la mediana de todo lo que Fable ha visto, y la mediana es olvidable.

Pinterest es mi fuente. Busco la mecánica que quiero, no el tema — "scroll reveal landing page," "split image hover," "minimal dark hero" — y guardo cualquier cosa donde la interacción hable por sí misma. La imagen de roca y césped era un solo pin estático. La interacción no estaba en la imagen en absoluto. Estaba ingeniería inversa a partir de una vibra.

Dos cosas importan cuando tomas una referencia:

Hazlo oscuro primero. La mayoría de los pines son brillantes. Un fondo de sitio web necesita estar en modo oscuro — no porque el modo oscuro esté de moda, sino porque los fondos oscuros ocultan las costuras. Cuando superpones dos imágenes y revelas una sobre la otra, un fondo negro hace que la transición se lea como contraste intencional en lugar de un borde de edición visible. Le pido a Fable en su paso de imagen (o a un modelo de imagen dedicado) que tome la referencia y produzca una versión más oscura y de mayor contraste: "Convierte esto en una escena de modo oscuro atmosférica, fondo casi negro, conserva la textura de la roca, reduce el brillo general aproximadamente un 40%, sin césped añadido."

Genera dos imágenes, no una. Este es todo el truco, y vale la pena ir despacio.

La Revelación de Imagen en Capas: Dos Fotos Fingiendo Ser Una

La ilusión son dos imágenes apiladas perfectamente centradas, una encima de la otra, con la de arriba progresivamente recortada a medida que haces scroll. Debajo está el "después." Encima está el "antes."

Para mi construcción eso significó:

• Base (capa superior): la pared de roca, desnuda, oscura.
• Revelación (capa inferior): la misma roca, ahora con césped — mismo ángulo de cámara, misma iluminación, mismo recorte.

Las dos imágenes tienen que coincidir perfectamente excepto por lo único que cambia. Ahí es donde la generación de imágenes por IA se gana su lugar. Generé la roca desnuda primero, luego pedí: "Misma escena, mismo ángulo e iluminación, añade césped exuberante creciendo sobre la superficie de la roca, mantén el fondo oscuro idéntico." Generar la variación a partir del original — en lugar de dos imágenes independientes — es lo que mantiene los bordes alineados para que la revelación no salte.

Luego la revelación en sí. La mayoría de los tutoriales recurren a GSAP ScrollTrigger, y eso funciona, pero para un solo héroe dejé que Fable lo hiciera con CSS puro clip-path impulsado por scroll — más ligero, sin biblioteca, y bordes nítidos. La técnica: la imagen superior comienza completamente visible, y a medida que haces scroll, un clip-path: inset(...) progresivamente la oculta desde un lado, exponiendo la imagen del césped debajo. Los recortes ganan a las máscaras aquí porque los clip paths son vectoriales y producen bordes nítidos mientras que las máscaras son más pesadas en memoria y computación.

Aquí está el núcleo de lo que Fable escribió, limpio:

.reveal-stack {
  position: relative;
  display: grid;
  place-items: center;
}

/* ambas imágenes ocupan la misma celda del grid, centradas */
.reveal-stack img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

/* la imagen "antes" se sitúa encima y se recorta al hacer scroll */
.reveal-stack .top {
  z-index: 2;
  /* --p se actualiza de 0 a 1 mientras la sección se desplaza por la vista */
  clip-path: inset(0 0 calc(var(--p) * 100%) 0);
}

// impulsar --p desde la posición de scroll de la sección
const stack = document.querySelector('.reveal-stack');
const onScroll = () => {
  const rect = stack.getBoundingClientRect();
  const progress = 1 - Math.min(Math.max(rect.bottom / window.innerHeight, 0), 1);
  stack.style.setProperty('--p', progress.toFixed(3));
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();

La imagen del césped se revela de abajo hacia arriba a medida que --p sube de 0 a 1. Intercambia la dirección del inset y revelas desde un borde diferente. Ese es todo el mecanismo. Todo lo demás es decoración.

Y aquí está el error que prometí. Mi primera versión activaba la revelación con hover del ratón, porque eso es lo que el pin original de Pinterest implicaba. Se sentía barato — tenías que encontrar la imagen y mover tu cursor sobre ella, y en móvil no hacía nada. Cambiar a scroll cambió toda la sensación. Ahora la revelación es parte de la narrativa de la página: haces scroll, el mundo cambia, sigues haciendo scroll. El scroll es una historia que ya estás leyendo. El hover es un juguete que tienes que descubrir. Para narrativa visual, el scroll gana siempre — y funciona en teléfonos, donde vive la mayor parte de tu tráfico.

Me apoyo constantemente en la interacción impulsada por scroll; desglosé la versión más profunda en mi artículo sobre construcción de animaciones 3D de scroll estilo Apple con IA, y el mismo instinto se aplica aquí — vincula el efecto a la única entrada que cada visitante ya usa.

Un movimiento más antes de dejar la revelación: le pedí a Fable que redujera ambas imágenes aproximadamente un 20%. A sangre completa el efecto era abrumador y la costura era más fácil de notar. Reducido un 20%, enmarcado por espacio negativo oscuro, de repente parecía compuesto — como una pieza de galería en lugar de un protector de pantalla. Ese único cambio de tamaño es la diferencia entre "truco ingenioso" y "esto parece diseñado."

Si quieres ayuda construyendo estas interacciones de revelación en una página real para clientes en lugar de una demo, este es exactamente el tipo de construcción que acepto a través de mi perfil de Fiverr — feliz de hacerlo contigo o por ti.

Ahora la revelación vive en un vacío. Necesita un héroe a su alrededor.

Construyendo el Héroe: Cómo Le Pido a Fable Que Deje de Añadir Basura

Dejado a sus propios instintos, Fable te dará un héroe "completo": un fondo de video en bucle, tres tarjetas de características, un degradado de malla, un testimonio y un pie de página. Todo compite con tu única buena idea. La habilidad no es lograr que la IA añada — es lograr que se contenga.

Mi prompt para el héroe es principalmente una lista de sustracciones:

"Construye una sección héroe. Fondo negro puro, sin degradados, sin malla, sin fondo de video. Mantén solo: una barra de navegación superior minimalista y una línea de texto héroe grande y animado. Elimina cualquier sección decorativa, tarjetas o imágenes que normalmente añadirías. El texto animado debe reaccionar al scroll — desplazarse hacia abajo y desvanecerse ligeramente mientras el usuario hace scroll. Conserva la familia de fuentes, el peso y el tamaño que usaste; quiero que sea consistente en cada sección que construyamos después."

Esa última oración hace trabajo real. La razón por la que las páginas construidas por IA se ven desarticuladas es que cada sección generada reinventa la tipografía. Al decirle a Fable desde el principio que bloquee los estilos y tamaños de fuente y los lleve adelante, cada sección posterior hereda el mismo sistema tipográfico. La consistencia es lo que se lee como "un diseñador hizo esto."

El texto reactivo al scroll es el segundo pequeño golpe de dopamina en la página. La revelación maneja el centro; el texto del héroe maneja la parte superior. A medida que haces scroll, el titular se desplaza hacia abajo y se atenúa, cediendo el escenario al efecto de roca y césped debajo. Dos momentos vinculados al scroll, apilados, para que el primer gesto que hace un visitante sea recompensado.

Revisión rápida antes de continuar: fondo negro, una navegación, una línea de texto animado, nada más. Si tu héroe tiene más que eso, tienes más que un héroe — tienes desorden usando la ropa de un héroe. Escribí un artículo completo sobre construcción de secciones héroe animadas con IA si quieres el menú más amplio de efectos, pero para esta construcción, la contención es toda la estética.

Ahora extiéndelo — sin dejar que Fable olvide lo que acaba de construir.

Extendiendo la Página: 3–4 Secciones Que No Compiten Entre Sí

Un héroe solo no es una landing page. Le pido a Fable tres o cuatro secciones más, y el prompt está diseñado para preservar todo lo que ya funciona:

"Añade 3–4 secciones debajo del héroe. Restricciones, no negociables: mismo fondo negro puro, sin degradados en ninguna parte, reutiliza exactamente la misma familia de fuentes y tamaños del héroe, mantén los diseños simples y centrados en texto — sin imágenes de stock. Cada sección debe sentirse como la misma página, no una plantilla nueva. Limpio, moderno, mucho espacio negativo."

La frase "no negociables" importa más de lo que debería. Fable, con un contexto largo, trata las restricciones explícitas como barandillas que defiende activamente — y con una ventana de 1M de tokens puede mantener cada sección anterior a la vista mientras escribe la siguiente, así que "reutiliza exactamente la fuente" no es una esperanza, es algo que puede verificar contra los archivos ya en disco. La orientación vaga ("hazlo consistente") se desvía. Las reglas duras ("sin degradados en ninguna parte") se mantienen.

Lo que obtienes es una página donde el ojo nunca tropieza. Mismo negro. Misma tipografía. Mismo espaciado generoso. El efecto de revelación es el único momento de movimiento, y porque todo a su alrededor está calmado, ese momento golpea más fuerte. La contención no es la ausencia de diseño — es el marco que hace legible tu única elección audaz.

Como Fable escribió esto como HTML semántico real y CSS en una carpeta de proyecto — no como una plantilla bloqueada — es responsivo por defecto. Flexbox, grid, unidades relativas y un par de media queries que el modelo añade sin que se lo pidan. Probé el mío a 375px y 1440px; la revelación se escaló, el texto se redistribuyó, nada se rompió. Ese es el beneficio silencioso de construir en código en lugar de un constructor drag-and-drop: la responsividad móvil viene gratis porque el diseño nunca estuvo fijado a píxeles absolutos. Para la capa de analítica y experimentación sobre páginas como esta, documenté mi pipeline completo de landing page con MCPs por separado — ahí es donde viven las pruebas A/B.

La página está terminada. Ahora viene la parte que decide si alguien la ve alguna vez.

Convirtiendo la Construcción en una Publicación Que la Gente Realmente Comparte

Una página hermosa que nadie ve es una entrada de diario. El efecto de revelación está hecho para ser compartido — es un antes/después en un solo gesto — así que la distribución debe ser tan deliberada como la construcción.

Esto es lo que he aprendido publicando esto en X:

Publica el video, nunca la captura de pantalla. Todo el valor está en el movimiento. Una imagen fija de una roca oscura no es nada; el clip de tres segundos del césped subiendo por la roca mientras haces scroll es todo el gancho. El video y los primeros tres segundos de movimiento son exactamente lo que el algoritmo de X de 2026 recompensa, y la plataforma ahora pondera las respuestas aproximadamente 150 veces más que los likes — así que un clip que hace que la gente pregunte "¿cómo hiciste esto?" supera cualquier cosa pasiva.

Lidera con la velocidad y el gesto. Mis publicaciones que funcionan abren con la versión sin fricción de la historia: "Construí esta revelación por scroll con Claude Fable 5 en un solo prompt 👇" luego el clip. La gente responde para preguntar cómo. Esas respuestas alimentan el algoritmo, que lo muestra a más personas, que responden para preguntar cómo. La mecánica es el marketing.

Personaliza cada recurso para que el tuyo sea único. Esto importa más de lo que parece. Si todos publican la misma roca, el efecto deja de ser novedoso para el martes. Cambia las imágenes. Cambia el titular. Construye la revelación alrededor de tu propio tema — un producto, un rostro, un horizonte urbano. La unicidad es lo que mantiene algo compartible después de que la tendencia alcanza su pico, porque la técnica es la tendencia, y un tema fresco lo hace sentir nuevo otra vez.

Nombra la herramienta. "Claude Fable 5" es un término de búsqueda activo ahora mismo — ha sido cubierto en todas partes desde TechCrunch hasta el propio blog de Azure de Microsoft desde el lanzamiento del 9 de junio. Poner el nombre de la herramienta en tendencia en la publicación conecta con una audiencia que ya la está buscando. No estás luchando por atención; estás parado donde la atención ya apunta.

Etiqueta a las personas que les importaría. Etiqueta al creador cuyo pin desarmaste. Etiqueta cuentas de herramientas. No para rogar — para invitar. La mitad de mis mejores colaboraciones empezaron como una respuesta en una publicación donde etiqueté a alguien y me respondieron. Los ejemplos de prompts y recursos reutilizables flotan por comunidades como motionsites.ai; el punto es entrar en la conversación, no transmitir hacia ella.

El patrón más profundo: construye algo cuyo valor sea visible en tres segundos de movimiento, luego deja que el formato haga la venta. Mantengo todo un flujo de trabajo para esto — convertir construcciones en distribución — en mis notas sobre automatizar SEO y redes sociales con Claude.

Lo Que Este Enfoque Hace Mal (La Parte Honesta)

Dos cosas, porque pretender lo contrario haría de esto otra publicación de hype.

La revelación es un truco, y los trucos tienen fecha de caducidad. La primera vez que alguien ve césped crecer sobre una roca al hacer scroll, es magia. La cuadragésima vez, es un cliché. No estoy construyendo mis productos reales alrededor de esto — lo estoy usando como gancho para atraer a la gente hacia trabajo que tiene sustancia debajo. Si la revelación es la única idea en tu página, has construido un truco de magia, no un producto. Úsalo como puerta, no como habitación.

"Un prompt" es mayormente una historia de marketing. Digo "un prompt" en mis publicaciones porque es contundente y más o menos cierto para el primer borrador. La realidad es que la primera generación me llevó al 70%, y el 30% restante — arreglar el disparador hover-vs-scroll, el redimensionamiento del 20%, matar los degradados que Fable seguía colando — tomó una docena de iteraciones. Cualquiera que prometa output perfecto al primer intento te está vendiendo la demo, no el flujo de trabajo. La iteración es donde vive el gusto, y el gusto todavía es tuyo. La IA es manos rápidas; el ojo eres tú. Argumenté eso extensamente en por qué el diseño web con IA aún necesita supervisión humana.

También está el muro de costos. Construye esto durante una ventana gratuita y se siente sin fricción; constrúyelo con créditos a $50 por millón de tokens de salida y cada regeneración tiene un precio. Lo cual nos regresa a trabajar en la terminal con ediciones quirúrgicas en lugar de re-emisiones de página completa — no es una preferencia de estilo, es una de presupuesto.

Entonces, ¿qué deberías esperar realmente si intentas esto?

Qué Esperar Realistamente Cuando Construyas Esto

Un sitio interactivo limpio, responsivo, de una sola página con una revelación de scroll funcional, un héroe animado y tres o cuatro secciones consistentes — en bastante menos de una hora una vez que lo has hecho antes. La primera vez tomará más tiempo; estás aprendiendo dónde Fable entrega de más y dónde necesita restricciones duras.

La página será responsiva sin que escribas media queries a mano, porque es código real, no una plantilla fija. Se verá como si un estudio pequeño la hiciera, porque la contención más un movimiento audaz se lee como intención.

Lo que no prometeré: números virales. He tenido clips de revelación que van bien y otros que caen planos la misma semana con el mismo efecto. La viralidad no es un resultado garantizado de una buena construcción — es una probabilidad que aumentas publicando video, liderando con el gesto, nombrando la herramienta y personalizando el recurso para que el tuyo destaque. Haz esas cuatro cosas consistentemente y las matemáticas eventualmente te favorecen. Hazlas una vez y espera, y estás tirando dados.

Mide lo correcto también. No likes — respuestas y guardados. En el algoritmo de X de 2026 esas son las señales que realmente se acumulan, y una respuesta de "¿cómo construiste esto?" vale cien likes silenciosos. Si la gente está preguntando cómo, construiste lo correcto.

Preguntas Frecuentes

¿Cómo se crea un efecto de revelación de imagen con scroll?

Apila dos imágenes coincidentes perfectamente centradas, luego recorta la de arriba con CSS clip-path: inset() impulsado por la posición del scroll. La imagen inferior se revela a medida que la superior se oculta progresivamente. Los clip paths dan bordes nítidos y no necesitan una biblioteca de animación JS para un solo héroe — mira la sección de imagen en capas arriba para el CSS y el manejador de scroll exactos.

¿Puede Claude Fable 5 construir un sitio web interactivo completo?

Sí. Claude Fable 5 construye sitios interactivos responsivos completos — héroe, efectos de scroll, múltiples secciones — especialmente cuando se ejecuta a través de Claude Code en una terminal donde puede leer y editar archivos del proyecto. Su contexto de 1M de tokens le permite mantener toda la página consistente. Trabajar en una carpeta real supera a un chat en el navegador que olvida el contexto entre mensajes.

¿Un sitio web construido con Claude Fable 5 es responsivo para móviles?

Generalmente sí, porque Fable escribe HTML semántico real y CSS con flexbox, grid y unidades relativas en lugar de plantillas de píxeles fijos. La responsividad viene del método de diseño, no del ajuste manual. Probé el mío a 375px y 1440px y tanto la revelación como la tipografía se escalaron limpiamente. Siempre verifica en un dispositivo real.

¿Por qué usar scroll en lugar de hover para el efecto de revelación?

Los disparadores de scroll funcionan en móvil, donde el hover no hace nada, y pliegan el efecto en la narrativa natural de la página. El hover requiere que el visitante descubra y apunte al elemento; el scroll recompensa un gesto que cada visitante ya hace. Para narrativa visual y tráfico móvil, el scroll es el disparador más fuerte.

¿Qué hace que un sitio web construido con IA se vuelva viral en X?

Publica un video de la interacción (no una captura de pantalla), lidera con el gesto en los primeros tres segundos, nombra la herramienta en tendencia y personaliza tus recursos para que el efecto se sienta fresco. El algoritmo de X de 2026 pondera las respuestas muy por encima de los likes, así que un clip que hace que la gente pregunte "¿cómo?" supera una imagen pasiva cada vez.

La Verdadera Conclusión

Ese pin de Pinterest era una imagen estática de una roca. Sin código, sin interacción, sin instrucciones — solo una vibra que tuve que descomponer mediante ingeniería inversa. Cuarenta minutos y una tarde obstinada después, era una página en vivo, con scroll, responsiva, a la que extraños estaban respondiendo.

La lección no es "la IA construye sitios web ahora." Es que la brecha entre ver algo y publicarlo se ha colapsado a aproximadamente una hora — si traes el gusto. Fable proporciona infinitas manos rápidas. El ojo que dice "redúcelo 20%," "mata el degradado," "actívalo con scroll, no con hover" — ese sigues siendo tú. Ese sigue siendo todo el trabajo.

Así que aquí está tu próxima hora: encuentra un pin donde la interacción hable por sí misma. Abre Claude Code. Reconstrúyelo. Luego publica el clip y mira quién pregunta cómo. La primera persona que responda "espera, ¿cómo hiciste esto?" es el momento en que entenderás lo que acaba de cambiar.

Trabajemos Juntos

¿Buscas construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudar.

• Fiverr (construcciones personalizadas e integraciones): fiverr.com/s/EgxYmWD