# Flipping Word Swap

A word that flips into a second word, one character at a time. The letters of the first word tip back and fade on a top hinge, then the letters of the second word swing up into place from below. Hover it, tab to it or tap it to swap; move away and the flip plays in reverse. Change the words, colors, type and timing in the panel.

<demo-flipping-word-swap>



</demo-flipping-word-swap>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/flipping-word-swap.json"
```

## Usage

```vue
<script setup lang="ts">
  import FlippingWordSwap from '~/components/ui/flipping-word-swap/FlippingWordSwap.vue';
</script>

<template>
  <FlippingWordSwap
    word1="Components"
    word2="Consistency"
    :duration="400"
    :stagger="44"
    class="text-5xl font-bold tracking-tight"
    to-class="text-primary"
  />
</template>
```

The button inherits font, size, weight, line height, letter spacing and color from its parent, so it sits inside a heading or a sentence. Style it with `class` / `style` on the root, or style only the revealed word with `to-class` / `to-style`.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        word1
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      required
    </td>
    
    <td>
      The word or short phrase shown at rest.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        word2
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      required
    </td>
    
    <td>
      The word or short phrase revealed on interaction.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        400
      </code>
    </td>
    
    <td>
      Duration of each character flip in ms (minimum 180).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        44
      </code>
    </td>
    
    <td>
      Delay between neighboring character flips in ms.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Classes for the interactive button.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        to-class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Classes applied only to the revealed word.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        to-style
      </code>
    </td>
    
    <td>
      <code>
        StyleValue
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Inline styles applied only to the revealed word.
    </td>
  </tr>
</tbody>
</table>

Inline `style` falls through to the root button.

## Accessibility

- The root is a native `<button>` with `aria-pressed` and an `aria-label` that names the visible word. The flipping letters are `aria-hidden`.
- Mouse swaps on hover. Touch and pen toggle on tap. Keyboard swaps on `:focus-visible` and swaps back on blur.
- With reduced motion, the words swap at once with no flip.
- Ported from [componentry.fun](https://componentry.dev/docs/components/flipping-word-swap) by Harsh Jadhav.