Qué obtienes

  • Un componente hero en React controlado por props, con ejemplo de uso
  • El mismo hero como un único archivo HTML sin paso de compilación
  • Tokens de tema claro y oscuro, un fondo de cuadrícula y reglas de movimiento
  • Una ilustración dibujada de respaldo para que el hero luzca terminado sin imagen
  • Imagen hero opcional de PopNow, presupuestada antes de ejecutarse

Ideal para

  • Landing pages de SaaS, apps y servicios
  • Sustituir una primera pantalla plana y estática
  • Páginas de lista de espera y de lanzamiento con una única acción clara

No es para

  • Crear una web completa con muchas secciones
  • Storytelling guiado por scroll o animación intensa
  • Paletas basadas en azul o violeta saturados sin rediseñar el tema

Cómo usarlo

En Claude o ChatGPT

Usa el skill de PopNow «Sección hero animada» (animated-hero-section) para esto: Añade un hero a mi landing page en Next.js: “Planifica viajes fáciles / relajados / compartidos”, con los botones Empezar a planificar y Ver ejemplos.

En un agente de programación

/popnow-animated-hero-section Añade un hero a mi landing page en Next.js: “Planifica viajes fáciles / relajados / compartidos”, con los botones Empezar a planificar y Ver ejemplos.

Luego prueba

Genera una foto panorámica para el marco: una mesa soleada con mapas y café. Dime antes los créditos.

Dame también la versión HTML simple para mi web estática.

Qué tener a mano

  • Una frase de entrada y 3-5 palabras cortas que roten
  • Texto del cuerpo, etiquetas de botones y enlaces
  • Opcional: tu captura de pantalla o foto de producto, o una clave de API de PopNow

Skills similares

Ver todos →

Preguntas

¿Necesito React?

No. El skill elige el componente React cuando tu proyecto usa React y Tailwind, y el archivo HTML simple cuando no hay paso de compilación. Otros frameworks reciben una adaptación del mismo marcado y movimiento.

¿El movimiento es accesible?

La palabra se desliza con una transición corta, se pausa en pestañas ocultas y se detiene por completo cuando el visitante prefiere movimiento reducido. Los lectores de pantalla oyen el titular completo una vez en lugar de una palabra que cambia.

¿Y si no tengo imagen para el hero?

Una lámina dibujada con los colores del tema llena el marco, así que la sección sigue viéndose completa. Puedes añadir tu propia captura más tarde o generar una imagen con PopNow.

¿PopNow hará una captura de mi app?

No. Para software, el skill pide una captura real. PopNow se usa para fotos de escena, fotos de producto sobre un fondo a juego o láminas abstractas.