# Split Flap Text

A departure board made of flap tiles. Each changed tile flips through a run of random glyphs, one flap at a time, before it lands on the next phrase. The cascade can start from the left, the right, the middle or in a random order. Use the panel to try the board, airport, minimal and clock presets.

<demo-split-flap-text>



</demo-split-flap-text>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/split-flap-text.json"
```

## Usage

```vue
<script setup lang="ts">
  import SplitFlapText from '~/components/ui/split-flap-text/SplitFlapText.vue';
</script>

<template>
  <SplitFlapText
    :words="['BOARDING NOW', 'FINAL CALL', 'GATE OPEN']"
    charset="alpha"
    tile-color="#0a0a0a"
    text-color="#facc15"
    :flip-duration="0.09"
    :stagger="0.035"
    :flips-per-char="12"
    order="random"
    :glare="0.75"
    :depth="0.85"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        words
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        ['LAUNCH READY', 'SYNC ONLINE', 'SIGNAL LIVE']
      </code>
    </td>
    
    <td>
      Phrases to cycle through like a departure board.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        text
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Optional single phrase. It takes precedence over <code>
        words
      </code>
      
      , and changing it flips the board.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flip-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.12
      </code>
    </td>
    
    <td>
      Duration, in seconds, of each flap turn.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.06
      </code>
    </td>
    
    <td>
      Delay, in seconds, between each tile starting its cascade.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cycle-delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2400
      </code>
    </td>
    
    <td>
      Hold time, in milliseconds, before the next phrase.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        charset
      </code>
    </td>
    
    <td>
      <code>
        'alpha' | 'alphanumeric' | 'numeric' | string
      </code>
    </td>
    
    <td>
      <code>
        'alphanumeric'
      </code>
    </td>
    
    <td>
      Characters used for the intermediate flip glyphs.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flips-per-char
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        8
      </code>
    </td>
    
    <td>
      Number of intermediate glyphs each changed tile flips through.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        align
      </code>
    </td>
    
    <td>
      <code>
        'left' | 'center' | 'right'
      </code>
    </td>
    
    <td>
      <code>
        'left'
      </code>
    </td>
    
    <td>
      Where phrases shorter than the board sit on it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tile-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#111827'
      </code>
    </td>
    
    <td>
      Base color of each tile.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        text-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#f8fafc'
      </code>
    </td>
    
    <td>
      Glyph color. <code>
        currentColor
      </code>
      
       follows the surrounding text, useful for the minimal style.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tile-radius
      </code>
    </td>
    
    <td>
      <code>
        number | string
      </code>
    </td>
    
    <td>
      <code>
        8
      </code>
    </td>
    
    <td>
      Corner radius of each tile. Numbers are pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gap
      </code>
    </td>
    
    <td>
      <code>
        number | string
      </code>
    </td>
    
    <td>
      <code>
        6
      </code>
    </td>
    
    <td>
      Space between tiles. Numbers are pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-size
      </code>
    </td>
    
    <td>
      <code>
        number | string
      </code>
    </td>
    
    <td>
      <code>
        52
      </code>
    </td>
    
    <td>
      Tile type size. Numbers are pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        loop
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Repeat the phrase list after the last phrase.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pad-to
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        12
      </code>
    </td>
    
    <td>
      Fixed tile count that keeps the board width stable.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Start blank and flip to the first phrase on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        order
      </code>
    </td>
    
    <td>
      <code>
        'left' | 'right' | 'center' | 'random'
      </code>
    </td>
    
    <td>
      <code>
        'left'
      </code>
    </td>
    
    <td>
      Where the cascade starts.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tile-style
      </code>
    </td>
    
    <td>
      <code>
        'board' | 'minimal'
      </code>
    </td>
    
    <td>
      <code>
        'board'
      </code>
    </td>
    
    <td>
      Mechanical tiles, or bare characters that flip on their own, split by a hinge line.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glare
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Strength, 0 to 1, of the light sheen that sweeps down each tile as its flap falls.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        depth
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How physical the board feels, 0 (flat) to 1: hinge shadow, flap shading, cast shadow, edge.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the root element.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The tiles are `aria-hidden`. A visually hidden span holds the current phrase, so screen readers read words, not glyphs.
- With reduced motion, tiles swap straight to the next phrase with no flips.
- The cycle pauses while the browser tab is hidden.
- Ported from [React Bits](https://reactbits.dev/text-animations/split-flap-text) by David Haz.