Qué obtienes
- El héroe completo como un único archivo HTML que funciona desde disco o en un iframe
- El motor como módulo ES más un componente de React y Next.js
- Cinco temas de color y una tabla de ajustes de densidad, atracción y anillos
- Gestión integrada del táctil, el movimiento reducido, las pestañas ocultas y lo que queda fuera de pantalla
- Placa de vídeo o imagen de producto de PopNow opcional, presupuestada antes de ejecutar
Ideal para
- Herramientas para desarrolladores, productos de IA y páginas de lanzamiento
- Aperturas de portafolios y eventos que invitan a jugar
- Sustituir un vídeo de fondo en bucle por algo más ligero
No es para
- Marcas claras o pastel que necesitan un fondo pálido
- Páginas muy serenas, como formularios de salud o finanzas
- Relatos largos con desplazamiento
Cómo usarlo
En Claude o ChatGPT
Usa el skill de PopNow «Héroe con cuadrícula interactiva» (interactive-grid-hero) para esto: Haz la primera pantalla de la web de mi herramienta CLI: 'Previews de despliegue con un solo comando', cuadrícula ámbar, botones Instalar y Leer la documentación.
En un agente de programación
/popnow-interactive-grid-hero Haz la primera pantalla de la web de mi herramienta CLI: 'Previews de despliegue con un solo comando', cuadrícula ámbar, botones Instalar y Leer la documentación.
Luego prueba
Haz la cuadrícula más calmada y algo más dispersa.
Añade bajo la cuadrícula un vídeo muy oscuro y con humo y dime antes los créditos.
Qué tener a mano
- Un titular corto, una o dos frases y los enlaces de tus botones
- Un tema o el color de acento de tu marca
- Opcional: pistas de capacidades y nombres que puedas mostrar en una fila de prueba
Skills similares
Ver todos →Creador de avatares 3D
+3Crea un adorable personaje 3D de peluche en tu navegador y guárdalo como PNG transparente o como página 3D.
Mapa de calor de calendario
+3Un año de actividad diaria en una cuadrícula de calendario sombreada, con rachas, totales y acceso por teclado.
Landing page de SaaS con IA
+3Papel arena cálido y guías finas alrededor de un tablero kanban en vivo donde un asistente planifica tareas.
Sección hero animada
+3Un hero de landing page con una palabra del titular que rota suavemente, dos botones y un marco ancho para imagen.
Web de agencia creativa con héroe shader
+3Un héroe shader vivo en naranja tras un titular anclado abajo, navegación en píldora y casos en cuadrícula.
Landing page SaaS oscura
+3Una web de marketing oscura y llena de movimiento para un producto de software, entregada como un único archivo HTML autónomo.
Web de portafolio para diseñadores
+3Seis tarjetas inclinadas flotan alrededor de un titular que se desvanece, con una tarjeta de retrato roja.
Web de portfolio para desarrolladores
+3Una web personal oscura para ingenieros con casos de estudio, artículos, charlas, currículum y formulario de contacto.
Web SaaS de estilo editorial
+3Héroe dividido en azul marino, titular serif junto a una foto documental y un acento cobalto.
Plantilla web de glassmorphism
+3Píldoras de cristal esmerilado sobre fondo casi negro, titular serif enorme y captura de correo.
Web de producto de hardware
+3Nombres de modelo enormes y finos sobre fotos de estudio plateadas y tarjetas de especificaciones.
Diagrama de arquitectura interactivo
+3Un diagrama de sistema offline y clicable, creado a partir de un modelo JSON validado, con la evidencia detrás de cada caja.
Explorador de grafos de conocimiento
+3Convierte notas de proyecto en un grafo offline y con búsqueda donde cada afirmación enlaza con su línea de origen.
Plantilla de panel de KPIs
+3Cuatro KPIs con indicadores de cambio, gráfico de líneas, desglose y barras de objetivo.
Landing page desde maquetas de IA
+3Ve tres diseños de página completa primero, elige uno y tu agente lo construye como código limpio y adaptable.
Plantilla web para revistas
+3Una web de revista con calidad de imprenta, con artículos, temas, una pequeña tienda y suscripciones, en un único archivo HTML.
Héroe con animación de partículas
+3Texto sobre papel cálido junto a una esfera de puntos que cambia con cada idea.
Web de marca personal
+3Retrato fundido con papel cálido bajo un corchete fino, con afirmaciones a cada lado.
Página de lanzamiento de producto cinematográfica
+3Página oscura con iluminación de cine: titular serif, escena nocturna y formulario de reserva.
Plantilla de dashboard de administración
+3Una consola de back office funcional con gráficos, tablas, kanban y calendario, en un único archivo HTML offline.
Plantilla de landing page SaaS
+3Una web de marketing tranquila y luminosa para un producto de software, con consola de producto funcional, precios y registro.
Web de portfolio estilo scrapbook
+3Un CV online de varias páginas hecho con objetos de papel, con casos de estudio y un currículum imprimible.
Plantilla web de tienda de zapatillas
+3Una tienda completa de calzado o ropa con catálogo, páginas de producto, cesta y checkout de demostración en un único HTML.
Landing page de automatización de flujos
+3Página grafito, titular pequeño y un grafo de nodos en vivo que ejecuta, reintenta y transmite registros.
Preguntas
¿Necesita una librería o WebGL?
No. El efecto es JavaScript sencillo sobre un canvas 2D, unas 300 líneas, sin dependencias. La plantilla funciona sin conexión y dentro de un iframe aislado.
¿Qué pasa en los teléfonos?
Un toque envía un anillo y un arrastre lateral mueve la cuadrícula, mientras que los deslizamientos verticales siguen desplazando la página. Antes de que nadie la toque, una deriva lenta mantiene la cuadrícula en movimiento.
¿Puedo usar el color de mi marca?
Sí, como color de acento y de anillo sobre uno de los fondos oscuros. El efecto depende de que las líneas tenues se iluminen, así que el fondo se mantiene muy oscuro; las marcas en blanco y negro usan el tema monocromo.
¿Es accesible?
El texto, los enlaces y los botones son HTML normal sobre el canvas y mantienen sus estilos de foco. Con el movimiento reducido activado, la cuadrícula es un fotograma fijo, y el bucle se pausa en las pestañas ocultas y cuando se sale de la vista.