Amanecer en el puerto
Café de las ocho
Ruta en bici por la costa
Nuevo mural en el barrio
Pan recién hecho
Último baño del año
Lluvia en la ventana
Concierto en el parque
Full-screen story viewer
Tap an avatar and its story grows to fill the screen, with progress bars, side taps to skip and hold to pause.
Settings
Code
<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="Stories"><div class="cd"><div class="sc" data-s="sun" style="--g1:#fb923c;--g2:#6d28d9"><p>Sunrise at the harbour</p></div><div class="sc" data-s="cup" style="--g1:#7c2d12;--g2:#f59e0b"><p>Eight o'clock coffee</p></div><div class="sc" data-s="hill" style="--g1:#0ea5e9;--g2:#16a34a"><p>Bike ride along the coast</p></div><div class="sc" data-s="dots" style="--g1:#db2777;--g2:#facc15"><p>New mural in the neighbourhood</p></div><div class="sc" data-s="sun" style="--g1:#92400e;--g2:#fde68a"><p>Freshly baked bread</p></div><div class="sc" data-s="wave" style="--g1:#0e7490;--g2:#67e8f9"><p>Last swim of the year</p></div><div class="sc" data-s="rain" style="--g1:#1e293b;--g2:#64748b"><p>Rain on the window</p></div><div class="sc" data-s="dots" style="--g1:#4c1d95;--g2:#f472b6"><p>Concert in the park</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="Pause" 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="Close"><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="Previous story"></button><button type="button" class="nv nx" aria-label="Next story"></button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Stories are now a pattern of their own, and this overlay rebuilds the whole viewer. The card grows out of the tapped avatar, segmented bars fill over time, tapping the right or left side jumps forward or back, holding pauses and hides the interface, and swiping down closes it. Each scene is painted with CSS gradients. It fits social apps, product updates and event recaps.
The two colors paint the unseen ring around each avatar. Replace the scenes with images or video, keep two stories per person or extend the bars, and use the arrow keys, the pause button and Escape from the keyboard.