Libro + kit para Claude Code · Edición 6.0
- Galería en anillo · G2Las fotos giran en un anillo que se arrastra.
- Texto que se descifra · T2Cada letra pasa por signos hasta quedarse.
- Partículas · R4Miles de puntos de luz que se ponen de acuerdo.
- Vidrio y metal · R1Un objeto 3D que se gira y cambia de materia.
- Haces de luz · W3Luz pintada por la tarjeta gráfica.
Webs con movimiento de estudio. La que tú quieras.
Un libro y un kit para hacer con Claude Code webs como las de Awwwards: 3D, scroll con guion, transiciones y texto que se anima. Claude escribe el código; tú decides qué se ve y cómo se mueve.
IVA incluido · Pago único · Descarga inmediata · Próximas ediciones gratis
Lo que más se pregunta
- ¿Qué compro?
- Un libro de 57 hojas, un bonus de 3D y un kit: 40 técnicas que se mueven, la base de tu web, los prompts y el juez.
- ¿Es una plantilla?
- No. Haces la web que tú quieras. Las técnicas se combinan según tu idea; Noctra es un ejemplo, no un molde.
- ¿Se ve en el móvil?
- Sí. Cada técnica trae su versión para el móvil, y se mide también como un móvil lento.
- ¿Es copiar una web?
- No. De lo que admiras se aprende el porqué; Claude escribe código propio, con tu marca.
- ¿Qué necesito?
- Un ordenador (probado en Windows; en Mac, sin probar) y Claude Pro, unos 20 $ al mes más impuestos.
Lo que vas a poder hacer
Cuarenta técnicas de estudio. En la web que tú quieras.
En nueve familias, cada técnica con su nombre, su ficha y su prompt. Las combinas según tu idea: no hay plantilla que rellenar. Los clips son del muestrario del kit, grabados tal cual.
- Clip del muestrario: T2 · Texto que se descifra.
Texto 4 técnicas
Titulares que suben desde su ranura, letras que se descifran, máquina de escribir y marquesinas que aceleran con el scroll.
- T1
- T2
- T3
- T4
- Clip del muestrario: S3 · Pista horizontal.
Scroll con guion 6 técnicas
Escenas que se quedan fijas y avanzan por pasos, tarjetas que se apilan, una pared que va de lado e imágenes que se destapan.
- S1
- S2
- S3
- S4
- S5
- S6
- Clip del muestrario: R1 · Vidrio y metal.
3D de verdad 5 técnicas
Un objeto de vidrio o metal que se gira con el dedo, texto en 3D, un relieve que se hunde y partículas que cambian de forma.
- R1
- R2
- R3
- R4
- R5
- Clip del muestrario: P5 · Galería con inercia.
Puntero 6 técnicas
Un cursor que dice qué pasará, botones con imán, una luz que sigue al ratón y galerías que se lanzan y frenan solas.
- P1
- P2
- P3
- P4
- P5
- P6
- Clip del muestrario: W3 · Haces de luz y aurora.
Sombreadores 4 técnicas
Luz pintada por la tarjeta gráfica: fondos vivos entre páginas, la estela del ratón, haces de luz y un cristal que dobla la imagen.
- W1
- W2
- W3
- W4
- Clip del muestrario: G2 · Anillo con WebGL.
Galerías en 3D 3 técnicas
Anillos de imágenes que giran y se arrastran, con WebGL o sin él, y un túnel de vídeos que no tiene fondo.
- G1
- G2
- G3
- Clip del muestrario: C1 · Cortina entre páginas.
Pasar de página 5 técnicas
Cortinas, View Transitions, una miniatura que crece hasta ser la página, la precarga con tu marca y el menú a pantalla completa.
- C1
- C2
- C3
- C4
- C5
- Clip del muestrario: V1 · Vídeo de fondo.
Vídeo 3 técnicas
Vídeo de fondo que arranca al verse, vídeo con transparencia y una película que avanza fotograma a fotograma con el scroll.
- V1
- V2
- V3
- Clip del muestrario: M3 · Cifras que ruedan.
Microinteracciones 4 técnicas
Subrayados con carácter, un brillo que recorre el borde, precios que ruedan como un rodillo y sonido, siempre con su botón.
- M1
- M2
- M3
- M4
Cómo funciona
De la idea a la web, como trabaja un estudio.
- 1
Mirar
Leer en cinco minutos qué mueve una web premiada y por qué funciona.
- 2
Idear
Pasar de una idea a un concepto, una dirección de arte y un guion de pantallas.
- 3
Firmar
Inventar la pieza que solo tiene sentido en tu web.
- 4
Mover
Texto, scroll con guion, puntero y cambio de página, cada cosa con su nombre.
- 5
Dar materia
Vídeo, galerías en 3D, modelos, sombreadores y sonido.
- 6
Medir
60 fotogramas, el móvil, el teclado y «menos movimiento». El juez la puntúa.
Cuatro caminos: el exprés (S00 → X1 … X5), recomendado para tu primera web; el completo (S00 → S15), repartido en días; «ya tengo web», para subir de nivel la tuya, y «practicar primero». Cada sesión queda apuntada: paras y sigues otro día.
Cuatro niveles de ambición
Elige el nivel que pide tu idea.
Subir de nivel no hace una web mejor: la hace más cara de hacer, de cargar y de mantener. El libro te dice qué combina cada uno, qué tienes que traer y cuánto cuesta.

Nivel 0: Sin 3D
Vídeo, texto que entra, scroll con guion, puntero y cortina. Va en cualquier móvil y es donde empieza cualquier web.
V1 · T1 · S1 · S2 · S5 · P1 · P4 · C1 · S6
- Esfuerzo
- El menor: el kit lo trae casi todo.
- Peso
- Poco; lo que más pesa es el vídeo.

Nivel 1: Un modelo 3D
Lo anterior y un objeto en 3D que se toca: tu producto, tu marca o un símbolo de tu idea, de vidrio o de metal.
R1 · R2 · R5 · C4
- Esfuerzo
- Medio: el modelo es el trabajo; montarlo, no.
- Peso
- Medio: el modelo, comprimido, y el 3D de la base.

Nivel 2: Sombreadores
La web parece hecha de luz: un fondo que respira, una estela, fotos que se curvan y miles de puntos. Sin ningún modelo.
W1 · W2 · W3 · W4 · S4 · R3 · R4
- Esfuerzo
- Alto en ajuste: mucho «más lento, menos brillo».
- Peso
- Poco en descarga, mucho para la tarjeta gráfica.

Nivel 3: Película por capítulos
El scroll avanza la web fotograma a fotograma, o pasa de una escena 3D a otra con transiciones y sonido.
V3 · S1 · T1 · M4 · C1
- Esfuerzo
- El mayor: es un proyecto, no una tarde.
- Peso
- Mucho: se carga por partes y a niveles.
El nivel no es la nota: lo que puntúa es la idea, la firma, el ritmo y el acabado. Y cada nivel lleva su versión para el móvil y su foto de repuesto.
Un ejemplo, desmontado
Noctra: una empresa de IA que no existe.
La web de ejemplo del libro, publicada y con su código entero en el ZIP. La idea: el turno de noche. Todo pasa a oscuras, la luz es lima y el trabajo se hace solo. Cada animación sale de ahí, y el libro cuenta cómo se pidió y lo que no salió a la primera.
Ver Noctra en vivo ↗


Los agentes Diez agentes en un anillo que gira.

Tarjetas con luz Cada una se ilumina donde está el ratón.

Cómo funciona El trabajo se ordena solo: la firma de Noctra.

El pie Una linterna lima rellena «noctra».
Medido con el kit, en una tarjeta gráfica: el fotograma más lento, 7,1 ms en el ordenador y 19,1 ms como un móvil lento. Nada salta: 0. En el ZIP, noctra/ trae su código y ANIMACIONES.md: cada animación y el prompt con que se hizo. Noctra es inventada.
En el móvil
Se ve en el móvil. Y se toca.
Cada técnica trae su versión para el móvil: con el dedo, con el teclado y para quien pide menos movimiento. Se midieron también como un móvil lento, a 390 × 844 y con la CPU cuatro veces más lenta.
- Tarjetas que suben y se apilan al bajar, en el móvilTarjetas que se apilan · S2
- Noctra, la web de ejemplo

- Una galería en anillo que se arrastra con el dedoGalería en anillo · G2
- La base de tu web, ya moviéndose

Grabaciones del muestrario del kit y capturas del libro, a 390 × 844. Los negocios de las demos y de Noctra son inventados.
Mira por dentro
El libro, tal cual te llega.
Seis hojas del PDF, sin retocar: técnicas con su nombre, los niveles, el juez y la web de ejemplo desmontada. Tócalas para verlas en grande.
Qué es estoLo que vas a saber hacer y lo que va en el ZIP, en una hoja.
El scroll con guionSeis técnicas con su ID: cómo se ven, qué hacen y cómo se piden.
3D de verdadUn objeto que se gira, una palabra que se hincha y miles de puntos de luz.
Niveles 0 y 1Qué combina cada nivel, qué tienes que traer, el esfuerzo y el peso.
El juezTu web medida como la mediría un jurado: 53 medidas y una nota con pruebas.
Noctra, la portadaLa web de ejemplo, desmontada: qué es cada animación y cómo se pidió.
Qué trae el ZIP
Todo en un ZIP de 39 MB.
libro.pdf57 hojasEl libro: de mirar una web premiada como un jurado a publicar la tuya. Empieza por «Lo que necesitas» y «Cómo empezar».
bonus-3d.pdf17 hojas«El 3D cuando la idea lo pide»: tu objeto con Claude en Blender, un modelo con licencia o el «3D falso».
_piezas/40 técnicasEl muestrario: cuarenta técnicas moviéndose, cada una con su ficha y el prompt para pedírsela a Claude.
empieza-aqui/la baseLa base de tu web, ya montada y moviéndose. Lleva Next.js, React, Tailwind, GSAP, Lenis y three.js: los usa Claude, tú no los tocas.
prompts/S00–S15 · X1–X5El método completo, el camino exprés, los ejercicios de ojo y los sueltos («pon una pieza», «juzga mi web», «arregla»).
_herramientas/53 medidasEl juez, que mide tu web como la mediría un jurado, y lo que hace capturas, fotogramas y vídeo.
noctra/el ejemploLa web de ejemplo del capítulo 9, con su código entero y cada animación con el prompt con que se hizo.
LEEME.txt · FUNDAMENTOS.mdpara empezarPor dónde se empieza, y los fundamentos para mirar y para pedir, con sus ejercicios.
Para quién es
Para quien quiere una web que se recuerde.
Tu primera web de estudio
El camino exprés, de S00 a X5, es el recomendado: las mismas decisiones en menos pasos.
Ya tienes web y quieres subirla de nivel
Primero el juez la mide; luego, lo que pida: arreglos y piezas nuevas.
Haces webs para otros
Las webs que hagas son tuyas, y lo que lleva el kit permite el uso comercial, también para un cliente.
Nunca has usado Claude Code
El libro te enseña a instalarlo y empiezas practicando: tres cambios pequeños a la base y deshacerlos.
No es para quien busca una plantilla que rellenar ni la promesa de un premio.
Qué hace falta
- Claude Pro
- Una suscripción de Claude que incluya Claude Code: unos 20 $ al mes, más impuestos. El plan gratuito no lo trae.
- Un ordenador
- Con Windows y Chrome. En Mac debería ir igual, pero está sin probar. Unos 2 GB libres en el disco.
- Un móvil
- Para probar tu web de verdad, con el dedo.
- Cuando haga falta
- Una cuenta de Vercel para publicarla; Blender, gratis, si tu web lleva un objeto 3D a medida, y ffmpeg, opcional.
El tiempo: el primer prompt, unos 45 minutos. La web entera, de 8 a 10 horas tuyas repartidas en días; es una estimación, aún sin medir con alguien que empieza de cero.
Precio
Un pago. El kit entero.
Sin suscripción. Sin versión Pro. El kit es el kit.
- Libro, bonus 3D y kit, en descarga inmediata
- Las próximas ediciones, gratis
- Para tus webs y las de tus clientes
- 14 días para pedir el reembolso
Las próximas ediciones
Las próximas ediciones te llegan gratis.
Suscríbete para recibirlas. Pagas una vez y cada edición nueva te llega al correo. Shopify solo me deja escribir a quien se suscribe: si compras y no te apuntas, no te puedo avisar.
- 5.0 La anterior
- 6.0 La de ahora
- La próxima Gratis, a tu correo
Gratis
Llévate gratis una muestra.
El principio del libro 6.0 en PDF: qué es, el índice entero, lo que necesitas, cómo empezar y una hoja de técnicas, «El scroll con guion». Te la descargas al momento.
¿Qué compro exactamente?
Un libro en PDF de 57 hojas, el bonus «El 3D cuando la idea lo pide» (17 hojas) y un ZIP de 39 MB con el kit: el muestrario de 40 técnicas que se mueven, cada una con su ficha y su prompt; la base de tu web, ya montada; los prompts del método (S00 a S15) y del exprés (X1 a X5); el juez, que mide tu web con 53 medidas, y Noctra, una web de ejemplo con su código entero.
¿Quién escribe el código?
Claude. Claude escribe el código; tú decides qué se ve y cómo se mueve. El libro te enseña a mirar una web como la mira un estudio y a pedir cada técnica por su nombre. Por dentro van Next.js, React, Tailwind, GSAP, Lenis y three.js, pero no hace falta que sepas qué son.
¿Es una plantilla?
No. Haces la web que tú quieras: tu idea, tu concepto, tu marca y tu firma, la interacción que solo tiene sentido en tu web. Las técnicas se combinan según lo que pida tu idea, en uno de los cuatro niveles de ambición. Noctra es un ejemplo desmontado, no un molde.
¿Esto es copiar webs?
No. De las webs que admiras se aprende el porqué: qué se mueve, qué lo dispara y su ritmo. Sus textos, imágenes, vídeos, modelos, letras y código son de sus autores: ni se descargan ni se pegan. De las técnicas del muestrario se toma el mecanismo, nunca la forma: Claude escribe código propio, con tu marca, tus colores y tus letras.
¿Se ve en el móvil?
Sí. Cada técnica del muestrario trae su versión para el móvil, y el libro la pide desde el principio: con el dedo, con el teclado y para quien pide menos movimiento. Las técnicas se midieron con una tarjeta gráfica también como un móvil lento (390 × 844 y la CPU cuatro veces más lenta), y el juez mide tu web igual.
¿Sirve para webs de clientes? ¿Es segura?
Sí. Las webs que hagas son tuyas, también las de tus clientes. Lo que lleva el kit (Next.js, React, three.js, GSAP, Lenis y las letras) tiene licencias que permiten el uso comercial; el libro trae el anexo «Licencias». La web sale estática: una carpeta de HTML, CSS y JavaScript, sin base de datos, sin contraseñas y sin panel. Para publicarla, la cuenta gratuita de Vercel es para webs personales; la de un cliente va en un plan de pago. Lo que no se puede es revender ni compartir el kit.
¿Tengo que saber 3D o Blender?
No. El nivel 0 no lleva 3D: vídeo, texto que entra, scroll con guion, puntero y cortina. Si tu idea pide un objeto, el bonus te enseña tres caminos: hacerlo con Claude en Blender, un modelo con licencia o el «3D falso».
¿Qué necesito?
Un ordenador con Windows y Chrome, y una suscripción de Claude que incluya Claude Code: Claude Pro, unos 20 $ al mes más impuestos (el plan gratuito no lo trae). Node.js y Git: el primer prompt mira si los tienes y, si falta alguno, te dice cómo instalarlo. Unos 2 GB libres en el disco y un móvil para probarla. Para publicarla, una cuenta de Vercel.
¿Funciona en Mac?
Está probado en Windows. En Mac debería ir igual, pero está sin probar. Si lo pruebas y algo falla, escríbeme.
¿Cuánto tarda?
El primer prompt, S00, lleva unos 45 minutos. La web entera, de 8 a 10 horas tuyas repartidas en días: es una estimación, aún sin medir con alguien que empieza de cero. Cada sesión es acotada y queda apuntada, así que puedes parar y seguir otro día.
¿Me garantiza un premio?
No. El juez mide tu web hasta el nivel de una mención de honor, con pruebas, pero esa nota la estima Claude: el jurado de verdad son personas. Awwwards es el listón, no una promesa.
¿Cómo lo recibo? ¿Y las próximas ediciones?
Al pagar aparece el enlace de descarga y te llega también por correo. Las próximas ediciones te llegan gratis por correo si estás suscrito: apúntate en codebyrivera.com/actualizaciones con el correo de tu compra.
Ya lo compré antes. ¿Me llega la 6.0?
Sí, gratis. Si no te ha llegado al correo, escríbeme a peperiveralozano@gmail.com con tu número de pedido y te la mando. Para recibir las siguientes, suscríbete en codebyrivera.com/actualizaciones.
¿Sirve con otra IA que no sea Claude Code?
Está escrito y probado con Claude Code. Con otras herramientas no se ha probado.
¿Y si no es lo que esperaba?
Escríbeme a peperiveralozano@gmail.com en los 14 días siguientes a la compra, con el número de pedido, y te devuelvo el importe íntegro.
La próxima web de estudio es la tuya.
Conseguir el kit · 19 €Muestra gratis · El principio del libro 6.0 en PDF, con el índice entero. del libro, en PDF.
La quiero
