# Airport flap

Subtle web animation sketch from [https://mighil.com/animations](https://mighil.com/animations).

- **Live demo:** https://mighil.com/animations/airport-flap
- **Standalone HTML:** https://mighil.com/animations/airport-flap?download=1
- **This file:** https://mighil.com/animations/airport-flap/airport-flap.md
- **Technique:** `split-flap`

## What it does

Departure-board reels, staggered tile by tile.

## Instructions for AI / coding agents

Implement this micro-interaction in the user's stack (vanilla HTML, React, Vue, Svelte, etc.).

1. Use the **HTML** as the DOM structure (adapt JSX/templates as needed; keep class names and ids).
2. Include the **Theme** CSS (or map the same variables into the host design system). It switches light/dark with `prefers-color-scheme`.
3. Apply the **CSS** as-is when possible. It uses `var(--text-color)`, `var(--heading-color)`, `var(--background-color)`, etc. from the theme so both modes work.
4. Run the **JavaScript** after the markup mounts. Prefer `DOMContentLoaded` or a framework `useEffect` / `onMount`.
5. Keep motion respectful of `prefers-reduced-motion` if the snippet already checks it.
6. Do not depend on mighil.com runtime or fonts. Theme variables are enough for color.
7. If porting to a component, expose the interactive root via a ref and preserve accessibility attributes (`aria-*`, `role`, `button` types).

## Theme (auto light / dark)

```css
/* Auto light / dark — follows prefers-color-scheme */
:root{
  color-scheme: light dark;
  --text-color: hsl(0, 0%, 18%);
  --heading-color: hsl(0, 0%, 18%);
  --background-color: hsl(0, 0%, 99%);
  --bg-color: hsl(0, 0%, 99%);
  --link-color: hsl(0, 0%, 18%);
  --visited-color: hsl(0, 0%, 18%);
  --blockquote-color: hsl(0, 0%, 18%);
  --code-bg-color: hsl(0, 0%, 95%);
  --code-color: hsl(0, 0%, 18%);
  --sub-color: hsl(0, 0%, 29%);
}
@media (prefers-color-scheme: dark){
:root{
  --text-color: hsl(35, 25%, 85%);
  --heading-color: hsl(35.2, 32.6%, 82.5%);
  --background-color: hsl(60, 2.2%, 8.8%);
  --bg-color: hsl(60, 2.2%, 8.8%);
  --link-color: hsl(34.7, 55.3%, 79.8%);
  --visited-color: hsla(34.7, 55.3%, 79.8%, 0.85);
  --blockquote-color: hsl(35, 30%, 75%);
  --code-bg-color: hsl(30, 5%, 7.8%);
  --code-color: limegreen;
  --sub-color: hsla(34.7, 24.7%, 84.9%, 0.78);
}
}
```

## HTML

```html
<div class="flap-board" id="flap-board" aria-live="polite" aria-label="Airport code"></div>
```

## CSS

```css
.flap-board{
  display:inline-flex;gap:5px;font-variant-numeric:tabular-nums;
  perspective:600px;
}

.flap{
  position:relative;width:2rem;height:2.55rem;border-radius:5px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--text-color) 14%,transparent);
  background:color-mix(in srgb,var(--text-color) 5%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text-color) 6%,transparent);
}

.flap::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;z-index:3;pointer-events:none;
  background:color-mix(in srgb,var(--text-color) 22%,transparent);
  box-shadow:0 1px 0 color-mix(in srgb,var(--background-color) 55%,transparent);
}

.flap::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--text-color) 6%,transparent),
    transparent 42%,
    transparent 58%,
    color-mix(in srgb,var(--text-color) 8%,transparent)
  );
}

.flap-reel{
  display:block;will-change:transform;
  transition:transform 1.1s cubic-bezier(.2,.7,.15,1);
}

.flap-reel i{
  display:flex;align-items:center;justify-content:center;
  height:2.55rem;font-style:normal;font-weight:600;font-size:1.2rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.02em;
}

@media (prefers-reduced-motion: reduce){
  .grow-link::after,.wipe,.wipe .b,.shuffle .card,.odo-digit > b,.flap-reel,.step-node,.step-line > i,
  .switch,.switch::after,.copy-btn .c-idle,.copy-btn .c-done,.field label,.tip-bubble,.chip,.like-btn svg,
  .disc-btn svg,.disc-panel,.snack,.save-btn,.ux-box,.seg-pill,.soft-tabs-ink,.list-actions,.success-banner,.search-clear,.pin-btn svg,.submit-ring rect,
  .hold-btn .hold-fill,.toast,.menu-btn .menu-line,.stars button,.conn,.retry-btn,.sort-item,.mute-btn .wave,.mute-btn .x-line,.wizard-dots span,.cart-badge,.range-bubble,
  .filter-list li,.upload-bar > i,.quota-track > i,.quota-tip,.splitbtn-toggle svg,.splitbtn-menu,.presence-dot,
  .draft-banner,.tag-chip,.empty-state,.empty-item,.deadline,.deadline-clock,.deadline-track > i,.edge-fade-mask,.dirty-bar,.seen-ticks path,.nudge-field,.stack-card,
  .blur-line,.xface span,.magnet-chip,.confirm-btn,.confirm-btn span,.offline-banner,.sort-flip-btn svg,.sort-flip-list li,.react-fan,.react-fan button,.sticky-cta,
  .pw-toggle .pw-eye,.pw-toggle .pw-slash,.otp input,.exp-search,.exp-search input,.ok-field input,.ok-field .ok-check,.unread-dot,.unread-check,.unread-row,.sync-label,.sync-btn .sync-arrows,.sync-btn .sync-check,
  .inline-edit .ie-title,.inline-edit .ie-rename,.inline-edit .ie-panel,.inline-edit .ie-input,.inline-edit .ie-bar,
  .ghost-wrap .ghost-hint,.ghost-wrap .ghost-key,.cmd-palette,.cmd-palette li,.cmd-stage::before,.crumb-mid,.crumb-more,.diff-add,.diff-add > .diff-add-inner,.slot > i,.zoom-thumb,.zoom-full,.zoom-caption,
  .bulk-bar,.bulk-check svg,.bulk-row,.env-switch .env-ink,.env-switch button,.invite-btn .invite-idle,.invite-btn .invite-done,.flag-row,.flag-sw,.flag-sw::after,.deploy-node,.deploy-node i,.deploy-wire > b,.ws-ink,.ws-item .ws-check,.thread,.thread-body,.thread-resolve svg,
  .unfurl-card,.unfurl-thumb,.seat,.form-prog-bar > i,.form-prog-field,.form-prog-field svg,.mention b,.glyph-tile path,.glyph-tile line,.glyph-tile circle{transition:none!important}
}
```

## JavaScript

```js
// Airport flap
  const flapBoard = document.getElementById('flap-board');
  const flapAlpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const flapWords = ['SFO', 'TFU', 'CCJ', 'DXB', 'BOM', 'AMS'];
  const FLAP_H = 2.55; // rem — match .flap-reel i height
  let flapWordI = 0;
  function buildFlapBoard() {
    if (!flapBoard) return;
    flapBoard.innerHTML = '';
    for (let c = 0; c < 3; c++) {
      const cell = document.createElement('span');
      cell.className = 'flap';
      const reel = document.createElement('b');
      reel.className = 'flap-reel';
      // two alphabets so we can always roll forward
      for (let pass = 0; pass < 2; pass++) {
        for (let i = 0; i < flapAlpha.length; i++) {
          const ch = document.createElement('i');
          ch.textContent = flapAlpha[i];
          reel.appendChild(ch);
        }
      }
      cell.appendChild(reel);
      cell._flapPos = 0;
      flapBoard.appendChild(cell);
    }
  }
  function runFlap() {
    if (!flapBoard) return;
    flapWordI = (flapWordI + 1) % flapWords.length;
    const word = flapWords[flapWordI];
    const cells = [...flapBoard.querySelectorAll('.flap')];
    cells.forEach((cell, i) => {
      const reel = cell.querySelector('.flap-reel');
      if (!reel) return;
      const idx = Math.max(0, flapAlpha.indexOf(word[i] || 'A'));
      let prev = cell._flapPos == null ? 0 : cell._flapPos;
      if (prev >= 26) {
        prev = prev % 26;
        reel.style.transition = 'none';
        reel.style.transform = 'translateY(-' + (prev * FLAP_H) + 'rem)';
        void reel.offsetWidth;
        reel.style.transition = '';
      }
      let next = prev + ((idx - (prev % 26) + 26) % 26);
      if (next === prev) next += 26;
      const delay = reduce ? 0 : i * 110;
      clearTimeout(cell._flapTimer);
      cell._flapTimer = setTimeout(() => {
        if (reduce) {
          reel.style.transition = 'none';
          reel.style.transform = 'translateY(-' + (idx * FLAP_H) + 'rem)';
          cell._flapPos = idx;
          return;
        }
        reel.style.transform = 'translateY(-' + (next * FLAP_H) + 'rem)';
        cell._flapPos = next;
      }, delay);
    });
  }
  buildFlapBoard();
  // set initial word without animation
  if (flapBoard) {
    const word = flapWords[0];
    [...flapBoard.querySelectorAll('.flap')].forEach((cell, i) => {
      const reel = cell.querySelector('.flap-reel');
      if (!reel) return;
      const idx = Math.max(0, flapAlpha.indexOf(word[i] || 'A'));
      reel.style.transition = 'none';
      reel.style.transform = 'translateY(-' + (idx * FLAP_H) + 'rem)';
      cell._flapPos = idx;
      void reel.offsetWidth;
      reel.style.transition = '';
    });
  }

document.querySelectorAll('[data-act]').forEach((btn) => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      const act = btn.getAttribute('data-act');
      if (act === 'flap') runFlap();
    });
  });
```

---

_Source: https://mighil.com/animations/airport-flap_