HTML + CSSOverlays

Visor de historias a pantalla completa

Tocas un avatar y su historia crece hasta llenar la pantalla, con barras de progreso, toques a los lados y pausa al mantener.

Ajustes

16px
1x

Código

<div class="uvq13-sty"><div class="tray"><button type="button" class="av" style="--a:#f97316" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">L</b></span><small>Lucía</small></button><button type="button" class="av" style="--a:#0ea5e9" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">M</b></span><small>Marco</small></button><button type="button" class="av" style="--a:#a855f7" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">I</b></span><small>Inés</small></button><button type="button" class="av" style="--a:#22c55e" aria-haspopup="dialog"><span class="rg"><b aria-hidden="true">T</b></span><small>Teo</small></button></div><div class="fd" aria-hidden="true"><i class="ph"></i><i></i><i class="s"></i></div><div class="vw" role="dialog" aria-modal="true" aria-label="Historias"><div class="cd"><div class="sc" data-s="sun" style="--g1:#fb923c;--g2:#6d28d9"><p>Amanecer en el puerto</p></div><div class="sc" data-s="cup" style="--g1:#7c2d12;--g2:#f59e0b"><p>Café de las ocho</p></div><div class="sc" data-s="hill" style="--g1:#0ea5e9;--g2:#16a34a"><p>Ruta en bici por la costa</p></div><div class="sc" data-s="dots" style="--g1:#db2777;--g2:#facc15"><p>Nuevo mural en el barrio</p></div><div class="sc" data-s="sun" style="--g1:#92400e;--g2:#fde68a"><p>Pan recién hecho</p></div><div class="sc" data-s="wave" style="--g1:#0e7490;--g2:#67e8f9"><p>Último baño del año</p></div><div class="sc" data-s="rain" style="--g1:#1e293b;--g2:#64748b"><p>Lluvia en la ventana</p></div><div class="sc" data-s="dots" style="--g1:#4c1d95;--g2:#f472b6"><p>Concierto en el parque</p></div><div class="bars" aria-hidden="true"><i><b></b></i><i><b></b></i></div><div class="hd"><span class="ua" aria-hidden="true"></span><b class="un"></b><small>2 h</small><button type="button" class="pz" aria-label="Pausar" aria-pressed="false"><svg class="i1" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="i2" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14M16 5v14" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg></button><button type="button" class="x" aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div><button type="button" class="nv pv" aria-label="Historia anterior"></button><button type="button" class="nv nx" aria-label="Historia siguiente"></button></div></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Overlays

Ver todos: Overlays

Dónde usarlo

Las historias ya son un patrón propio, y este overlay reconstruye el visor entero. La tarjeta crece desde el avatar pulsado, las barras segmentadas se llenan con el tiempo, un toque a la derecha o a la izquierda avanza o retrocede, mantener pausa y esconde la interfaz y deslizar hacia abajo cierra. Cada escena está pintada con degradados CSS. Encaja en apps sociales, novedades de producto y resúmenes de eventos.

Los dos colores pintan el anillo de las historias sin ver. Cambia las escenas por imágenes o vídeo, deja dos historias por persona o añade más barras, y usa las flechas, el botón de pausa y Escape desde el teclado.