Barcelona
- Barcelona
- Lisboa
- Reikiavik
- Marrakech
- Estambul
Split-flap departure board
An airport board whose flaps fall one by one to change destination, with the split line and shadow of the real thing.
Settings
Code
<div class="uvq14-flap"><div class="bd"><div class="hd"><span>Departures</span><span>Gate B7</span></div><p class="row" aria-hidden="true" translate="no"></p><div class="ft"><span class="st">Boarding</span><span>07:45</span></div></div><p class="sr" aria-live="off">Barcelona</p><ul class="ws" hidden><li>Barcelona</li><li>Lisbon</li><li>Reykjavik</li><li>Marrakech</li><li>Istanbul</li></ul><button type="button" class="nx">Next destination</button></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 Text & scroll
See all Text & scrollWhere to use it
Split-flap boards still define train stations and airports, and this block rebuilds one with CSS 3D: every character is a tile with two halves, and the top flap falls to reveal the next letter. It works for travel brands, event countdowns, launch pages or any headline that should feel mechanical and physical.
Write your own destinations in the list, change the letter color with the main color and the status label with the secondary one. The board pauses while the pointer is over it, and the button announces each change to screen readers.