Guía para construir
páginas web

Anima este texto: "[tu texto]" para que se escriba letra por letra como máquina de escribir, con un cursor parpadeante al final, y que se repita en loop cada pocos segundos.

Aplica un degradado animado de color a este título usando [tus colores de marca], que se mueva de izquierda a derecha en loop continuo y lento.

Haz que este título aparezca palabra por palabra, cada una subiendo suavemente con un pequeño retraso entre sí, activado cuando el usuario llega a esa parte al hacer scroll.

Agrega un efecto glitch (temblor digital con desdoblamiento de color cian y magenta) a este título, que se active solo al pasar el cursor por encima.

Agrega un subrayado animado debajo de este enlace/texto que crezca de izquierda a derecha al pasar el cursor, usando [color de marca], y desaparezca al quitar el cursor.

Anima este título letra por letra: cada letra debe entrar con un pequeño rebote (overshoot), una después de otra muy rápido, al cargar la sección o al hacer scroll hasta ella.

Haz que este título empiece mostrando solo su contorno (sin relleno) y se rellene de [color de marca] progresivamente, en loop lento.

Aplica un efecto de letrero de neón a este texto: resplandor constante en [color de marca] con un parpadeo breve y ocasional, como un neón real.

Crea un contador regresivo animado que baje de [10] a 0 segundo a segundo, con un pequeño efecto al cambiar cada número, para usar en una oferta con tiempo límite.

Agrega un resaltado tipo marcador (franja de color de [color de marca] detrás del texto) que se dibuje de izquierda a derecha al entrar en pantalla, como si lo subrayaras a mano.

Haz que este párrafo aparezca línea por línea (no palabra por palabra): cada línea completa sube y se desvanece hacia adentro con un pequeño retraso respecto a la anterior, al entrar en pantalla.

Revela este párrafo línea por línea usando una máscara (clip-path) que sube desde abajo, como si cada línea saliera detrás de una cortina, en vez de solo aparecer con opacidad.

Haz que este párrafo entre con un desenfoque (blur) fuerte y se vaya aclarando hasta quedar completamente nítido, al entrar en pantalla al hacer scroll.

Anima este texto para que cada palabra se ilumine (cambie de color) en secuencia de izquierda a derecha, como una lectura tipo karaoke, en loop continuo.

Anima esta cita/testimonio: una línea vertical de color de marca debe crecer de arriba hacia abajo junto al texto, mientras el texto de la cita se desvanece hacia adentro, al entrar en pantalla.

Agrega una línea ondulada (wavy underline) debajo de este texto que se deslice horizontalmente sin parar, en loop, usando [color de marca].

Anima este texto para que se escriba completo tipo máquina de escribir, se quede visible unos segundos, se borre de derecha a izquierda, y vuelva a escribirse — todo en loop infinito.

Haz que las líneas de este párrafo entren alternando de lado: las líneas pares deslizándose desde la izquierda y las impares desde la derecha, al entrar en pantalla.

Haz que el interlineado (line-height) de este párrafo empiece muy comprimido y se expanda suavemente hasta su valor normal al entrar en pantalla.

Haz que las palabras de este párrafo pasen de gris tenue a color sólido progresivamente, sincronizadas con el scroll de la página (no con un timer), como en las páginas de Apple.

Aplica un efecto Ken Burns a esta imagen: zoom lento y continuo hacia adentro y un leve desplazamiento, en loop suave, sin que se note el corte al reiniciar.

Haz que esta imagen se revele con un efecto de cortina que se abre de derecha a izquierda, activado cuando la imagen entra en pantalla al hacer scroll.

Haz que esta imagen crezca suavemente (zoom) al pasar el cursor por encima, manteniéndose recortada dentro de su marco sin desbordar el diseño.

Crea un efecto paralaje: la imagen de fondo debe moverse más lento que el texto de encima al hacer scroll, para dar sensación de profundidad.

Haz que esta imagen esté en blanco y negro por defecto y recupere su color completo suavemente al pasar el cursor por encima.

Anima el recorte (clip-path) de esta imagen para que pase de círculo a cuadrado con esquinas redondeadas y viceversa, en loop lento y suave.

Crea una galería de [3] imágenes que se desvanezcan una sobre otra automáticamente en loop, sin necesitar flechas ni clic del usuario, cada [3] segundos.

Agrega una capa de color sólido en [color de marca] sobre esta imagen (efecto duotono) que se desvanezca al pasar el cursor, revelando la imagen real por debajo.

Crea un slider de comparación "antes/después" con dos imágenes superpuestas: al mover el cursor horizontalmente sobre el marco, debe revelar una imagen u otra con una línea divisoria que sigue al cursor.

Agrega un borde giratorio en degradado ([tus colores de marca]) alrededor de esta imagen o tarjeta, que gire sin parar en loop, como un marco luminoso en movimiento.

Revela esta imagen con un corte diagonal (no recto) que se abre desde una esquina al entrar en pantalla al hacer scroll.

Haz que esta imagen (más ancha que su marco) se desplace lentamente de izquierda a derecha y de vuelta, en loop suave, sin salirse del marco.

Agrega una textura granulada (ruido/grain) sobre esta imagen que se desvanezca al entrar en pantalla, revelando la imagen limpia por debajo, como una revelación fotográfica.

Agrega un resplandor (box-shadow) pulsante en [color de marca] alrededor de esta imagen o tarjeta, que crezca y se apague suavemente en loop.

Haz que las imágenes de esta galería en mosaico aparezcan en cascada (una después de otra, con escala y opacidad) al entrar en pantalla, en vez de aparecer todas de golpe.

Haz que esta insignia o sello circular gire sin parar sobre su propio eje, lento y constante, en loop infinito (como un sello de garantía girando).

Crea una insignia circular con dos anillos concéntricos: el exterior sólido girando en sentido horario y el interior punteado girando en sentido antihorario, ambos lento y en loop.

Crea una insignia circular de "verificado" (checkmark) en [color de marca] que pulse suavemente de tamaño en loop, sin necesitar interacción del usuario.

Crea un anillo de carga (spinner) circular con una sección coloreada en [color de marca] que gire rápido y sin parar mientras algo carga.

Crea una insignia tipo medalla: un sello circular en degradado de marca con una cinta de dos puntas debajo (como listón), flotando suavemente arriba y abajo en loop.

Haz que esta imagen (por ejemplo un producto o mockup) flote suavemente arriba y abajo unos pocos píxeles, en loop lento e infinito.

Agrega una línea de luz horizontal que recorra esta imagen de arriba hacia abajo en loop, como un efecto de escáner o de "cargando reconocimiento".

Agrega un degradado a esta imagen que vaya de transparente en la parte de arriba a opaco (color de fondo de la página) en la parte de abajo, para que se funda suavemente con lo que viene después, en vez de terminar en un corte recto.

Agrega una viñeta a esta imagen: los bordes deben oscurecerse suavemente con un degradado radial, dejando el centro sin cambios, para dirigir la atención hacia el centro de la imagen.

Agrega un elemento decorativo (insignia, ícono o etiqueta pequeña) que sobresalga de la esquina de esta imagen, superpuesto por encima del borde (no dentro del recuadro), flotando suavemente arriba y abajo en loop.

Agrega un degradado a esta imagen que vaya de opaco (color de fondo de la página) en la parte de arriba a transparente en la parte de abajo, para que se funda con el contenido que viene antes de ella.

Agrega un degradado horizontal a esta imagen que vaya de transparente en la mitad izquierda a [color de marca] sólido en el lado derecho, creando un panel de color donde pueda ir texto legible encima.

Agrega un degradado radial a esta imagen: el centro debe verse nítido y los bordes desvanecerse hacia el color de fondo de la página en todas direcciones, como si la imagen "flotara" sin bordes definidos.

Agrega un tinte de [color de marca] en diagonal desde la esquina superior izquierda de esta imagen, que se desvanezca hacia transparente antes de llegar a la mitad, dejando el resto de la imagen sin cambios.

Crea un fondo de sección con un degradado animado entre [colores de marca] que se mueva lentamente en loop infinito (cambiando la posición del degradado), para usar detrás de un hero o una sección destacada, en vez de un fondo estático.

Haz que este [bloque/tarjeta/imagen] aparezca con una animación de opacidad y un leve desplazamiento hacia arriba cuando entre en pantalla al hacer scroll, y que se active solo una vez.

Agrega una barra de progreso fina y fija en la parte superior de la página que se llene proporcionalmente a lo que el usuario ha hecho scroll, usando [color de marca].

Haz que el encabezado/menú superior reduzca su altura y padding suavemente después de que el usuario haga scroll más de [80px], y vuelva a su tamaño normal al subir arriba de nuevo.

Haz que el color de fondo de la página cambie suavemente entre [color 1, color 2, color 3] según en qué sección se encuentre el usuario al hacer scroll.

Haz que este [título/menú/CTA] se quede fijo (position: sticky) en la parte superior mientras el usuario hace scroll dentro de esta sección, y deje de estar fijo al salir de ella.

Crea una transición de cortina en [color de marca] que cubra toda la pantalla y luego se retire hacia un lado, para revelar la siguiente sección al cambiar de vista.

Haz que este número suba animado desde 0 hasta [valor final, ej. 250] en aproximadamente 1.5 segundos, activado cuando la sección de estadísticas entra en pantalla al hacer scroll.

Convierte esta sección en un acordeón: al hacer clic en el título, el contenido debajo se expande o se contrae con una transición suave de altura y opacidad.

Haz que este elemento crezca de escala (scale) en proporción directa a cuánto ha hecho scroll el usuario en esta sección, sin usar un timer — ligado al scroll real.

Haz que este elemento rote en proporción directa a cuánto ha hecho scroll el usuario en esta sección, ligado al scroll real (no a un timer).

Haz que esta imagen pase de borrosa a nítida en proporción directa a cuánto ha hecho scroll el usuario, ligado al scroll real (no a un timer ni a un solo disparo).

Agrega un riel vertical fijo al lado del contenido con un punto que suba proporcionalmente a cuánto ha avanzado el usuario en la página, como indicador de progreso de lectura.

En esta lista de pasos, resalta con opacidad completa el ítem que esté más centrado en pantalla mientras el usuario hace scroll, y atenúa (opacidad baja) los demás.

Agrega un contador "paso X de Y" que actualice el número X según en qué sección o paso se encuentre el usuario mientras hace scroll por la lista.

Crea una línea de tiempo vertical donde la línea que conecta los pasos se va "dibujando" (creciendo en altura) a medida que el usuario hace scroll por la sección.

Haz que esta tarjeta se voltee en 3D (efecto flip) mostrando su reverso, activado cuando llega al centro de la pantalla al hacer scroll.

Agrega un patrón de fondo (puntos o cuadrícula) que se desplace lentamente en sincronía con el scroll de la página, dando sensación de profundidad sutil.

Fija esta tarjeta en el centro de la pantalla con position: sticky mientras el usuario hace scroll dentro de la sección. Cuando el scroll avance lo suficiente, haz que la siguiente tarjeta aparezca de golpe (sin transición) tapando exactamente a la anterior en el mismo lugar, como si reemplazara una diapositiva.

Fija esta tarjeta en el centro con scroll-pin. A medida que el usuario avanza el scroll, la tarjeta actual debe subir y desvanecerse (translateY negativo + opacity 0) mientras la siguiente entra desde abajo hacia el centro (translateY de +26px a 0 + opacity de 0 a 1), como capas de papel deslizándose. El movimiento debe ser proporcional al progreso del scroll, no un salto.

Cada vez que el scroll avance un paso dentro de esta sección, haz que la tarjeta visible desaparezca y la siguiente aparezca con un fade rápido (0.15s), sin animación de movimiento ni desplazamiento — el efecto más simple y liviano, sin necesidad de calcular el progreso del scroll.

Fija esta tarjeta con scroll-pin. En lugar de que la siguiente tarjeta suba por arriba, haz que la actual se deslice hacia la izquierda mientras se desvanece, y la siguiente entre desde la derecha (translateX en vez de translateY), como si pasaras las hojas de un carrusel horizontal usando scroll vertical.

Crea una lista numerada de proyectos donde al hacer clic en un ítem se resalte como activo, se actualice la imagen/información mostrada al lado, y un contador tipo "02 / 05" indique cuál está seleccionado.

Crea un grupo de 3 estadísticas (ej. servicios, proyectos, reseñas) que cuenten hacia arriba todas al mismo tiempo y a la misma velocidad cuando el bloque entra en pantalla, no una después de otra.

Haz que este botón se mueva levemente en dirección al cursor cuando el mouse esté cerca de él (efecto magnético), y vuelva a su posición original al alejar el cursor.

Aplica una inclinación 3D sutil a esta tarjeta que siga la posición del cursor al pasar por encima, y que vuelva a plano al quitar el cursor.

Agrega un resplandor suave en [color de marca] que siga la posición del cursor dentro de esta tarjeta, apagándose cuando el cursor sale de ella.

Agrega un efecto ripple (onda circular que se expande y desvanece) que nazca exactamente en el punto donde el usuario hace clic sobre este botón.

Crea un estado de carga tipo "esqueleto" con barras grises que simulan el contenido, con un brillo que se desliza de izquierda a derecha en loop, para mostrar mientras carga la información real.

Crea un interruptor (toggle switch) donde el círculo interior se deslice suavemente de un lado a otro y cambie de color de fondo al hacer clic para encender o apagar.

Convierte el ícono del menú hamburguesa en una X animada al hacer clic: las líneas superior e inferior deben rotar y encontrarse en el centro, y la del medio desaparecer.

Crea una notificación tipo "toast" que entre deslizándose desde la esquina inferior derecha, se quede visible unos 3 segundos, y luego se deslice hacia afuera y desaparezca sola.

Haz que este contador tipo badge/notificación haga un pequeño rebote de escala (bump) cada vez que su número cambia, para llamar la atención sin ser molesto.

Crea un loader de tres puntos que rebotan en secuencia (uno después de otro) en loop infinito, para mostrar mientras algo carga en la página.

Agrega un tooltip que aparezca con un pequeño rebote (overshoot) al pasar el cursor sobre este elemento, y se desvanezca suavemente al quitar el cursor.

Crea un botón circular flotante fijo en la esquina inferior derecha (tipo WhatsApp/chat) con un anillo que pulsa hacia afuera en loop suave para llamar la atención, y un badge pequeño con un número de notificación en la esquina.

Debajo de esta imagen/tarjeta, agrega una fila de etiquetas cortas (chips) que aparezcan en cascada, una después de otra con un pequeño rebote, en vez de aparecer todas de golpe.

En esta tarjeta de testimonio, haz que las 5 estrellas de calificación se enciendan una por una (con un pequeño rebote de escala) en vez de aparecer todas a la vez, justo antes de mostrar el texto de la reseña.