Abyss es una página de inicio lista para conversión, diseñada para estudios indie, campañas de Kickstarter de RPG y sitios complementarios de Steam. Colócala, cambia el contenido y tendrás una página promocional digna de un tráiler sin tocar un bundler.
Qué incluye
- 9 secciones completamente diseñadas: navbar fijo con menú hamburguesa, héroe de vista completa con lienzo de partículas animadas + marca de agua oversized, barra de contador de 5 estadísticas con animación al ver, sección de historia dividida con overlay "reproducir tráiler", cuadrícula de 6 tarjetas de características de juego, galería de capturas de pantalla de desplazamiento horizontal, cuadrícula de 4 héroes de personajes con brillos elementales, banner de tráiler cinematográfico con overlay de líneas de barrido, CTA con tratamiento de precio de $49.99, y pie de página minimalista con marca.
- Paleta de fantasía oscura — negro profundo (
#04040a), carmesí distintivo (#e8193c), destacados dorados (#f5a623), y acentos azul eléctrico. Cada color es una propiedad personalizada de CSS; personaliza todo el sitio desde tres variables. - Sistema de tres tipografías — Orbitron (display), Rajdhani (UI/botones), Inter (cuerpo). Cargadas en una única solicitud preconectada desde Google Fonts; cambia a tus propias webfonts editando una sola línea.
- Héroe de partículas en vivo — 80 brasas carmesí y doradas flotantes en un lienzo HTML, respetando preferencias de movimiento reducido. Ligero: ~30 líneas de JavaScript vanilla, sin librerías.
- Contadores activados por desplazamiento — la barra de estadísticas se anima de cero al objetivo en el momento en que entra en la vista. Suave, eficiente, sin librería de gráficos.
- Animaciones de revelación con IntersectionObserver en cada bloque principal — opacidad + translate amigables con GPU, sin reflows de diseño.
- Responsivo hasta 375 px, con tres puntos de quiebre bien pensados (1024, 900, 640). Nav hamburguesa para teléfonos, cuadrícula de historia apilada para tablets, cuadrícula de características contraída para pantallas pequeñas.
- Modal de tráiler con escape para cerrar y clic fuera para descartar. Coloca un
<iframe>de YouTube para entregar.
Por qué vende
Todo juego de fantasía oscura en Kickstarter, Steam Next Fest o Indiegogo necesita una página promocional que se sienta como un tráiler en movimiento. Abyss lo logra desde el inicio — alto contraste, acentos carmesí neón, tipografía de calidad gamer — y se entrega como un archivo único que tu responsable de marketing puede editar sin un dev.
Detalles técnicos
- Archivo HTML único, aproximadamente 1,030 líneas, ~55 KB sin comprimir
- Cero pasos de compilación, cero frameworks, cero dependencias en tiempo de ejecución (fuentes preconectadas desde Google Fonts)
- JavaScript vanilla solo para: nav background activado por desplazamiento, hamburguesa, modal, observador de revelación, animación de contador, bucle de lienzo de partículas
- Completamente semántico —
nav,section,footer, jerarquíah1/h2apropiada, pictogramas descriptivos sin alt mediante emoji para prototipo rápido - Seguro en cada navegador moderno — probado en Chrome, Safari, Firefox, Edge
Para quién es
Estudios de juegos indie preparando una página de lanzamiento, creadores de Kickstarter enviando un RPG, agencias construyendo un micrositio promocional para un cliente en el espacio de juegos, y devs hobbistas que quieren una página "próximamente" pulida que supere plantillas de Unity.
Personalización en menos de una hora
- Cambia las tres variables de color en el bloque
:root— rediseña cada tarjeta, botón, borde y brillo. - Reemplaza los pictogramas emoji con tu propio arte PNG/SVG (son independientes, sin mapas de sprite).
- Cambia los objetivos de estadísticas mediante
data-targeten los números de la barra de estadísticas. - Coloca tu iframe de tráiler de YouTube dentro del modal para reemplazar la tarjeta de marcador de posición.
- Cambia los seis pilares de juego, cuatro personajes y cinco fichas de galería — cada una vive en bloques claramente comentados.
Lo que obtienes
- Demo HTML en vivo encriptado — previsualiza la página completa en el visor del mercado antes de comprar
- Fuente HTML completa sin minificar en la compra
- 12 meses de actualizaciones menores (correcciones de errores, ajustes de compatibilidad de navegador)
- Soporte por correo electrónico en 48 horas
El contenido de demostración es un marcador de posición para un RPG de fantasía oscura ficticio llamado ABYSS. Cada línea — nombre del juego, números de estadísticas, descripciones de personajes, precios — es editable desde el mismo archivo. Trátalo como andamiaje para tu propio lanzamiento.