Salidas
Split-flap board tabs
Choosing a tab makes a station departure board spin its flaps letter by letter until it spells the section name.
Settings
Code
<div class="uvq12-fb"><div class="bd"><p class="hd"><span>Departures</span><time>10:45</time></p><div class="rw" aria-hidden="true"><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span><span class="cl a"> </span></div><div class="pn" role="tabpanel" id="uvq12-fb-p0" aria-labelledby="uvq12-fb-t0">Platform 2</div><div class="pn" role="tabpanel" id="uvq12-fb-p1" aria-labelledby="uvq12-fb-t1" hidden>12 lines</div><div class="pn" role="tabpanel" id="uvq12-fb-p2" aria-labelledby="uvq12-fb-t2" hidden>Every 8 min</div><div class="pn" role="tabpanel" id="uvq12-fb-p3" aria-labelledby="uvq12-fb-t3" hidden>From €1.50</div></div><div role="tablist" aria-label="Departures"><button type="button" role="tab" id="uvq12-fb-t0" aria-selected="true" aria-controls="uvq12-fb-p0" tabindex="0">Home</button><button type="button" role="tab" id="uvq12-fb-t1" aria-selected="false" aria-controls="uvq12-fb-p1" tabindex="-1">Routes</button><button type="button" role="tab" id="uvq12-fb-t2" aria-selected="false" aria-controls="uvq12-fb-p2" tabindex="-1">Timetable</button><button type="button" role="tab" id="uvq12-fb-t3" aria-selected="false" aria-controls="uvq12-fb-p3" tabindex="-1">Fares</button></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 Navigation
See all NavigationWhere to use it
Tabs paired with a station departure board: when you pick one, every cell of the board flips through random characters and settles on the section name, one cell after another, with the clock ticking in the corner. A line underneath gives a short detail for each tab. The letters come from the tab text, so they follow the language of the page.
The main color sets the characters and the secondary color the board. Ten cells fit most words; raise the count in the data for longer names and keep the details to a few words.