SplitFlap

A retro split-flap display that animates each character independently when the value changes. Inspired by airport departure boards and stock tickers.

Stock ticker

Click the button to shuffle the ticker and watch each flap rotate into place.

Flight board

Use shorter labels for a status board feel.

Usage

import { SplitFlap } from "@mantleui/react/motion";
import { useState } from "react";

function Ticker() {
  const [value, setValue] = useState("AAPL 185.42");
  return (
    <>
      <SplitFlap value={value} length={11} />
      <button onClick={() => setValue("MSFT 378.91")}>Update</button>
    </>
  );
}

Props