SplitFlap React Component

A production-quality, reusable React component that recreates the look and mechanical behavior of a classic split-flap / Solari display.

Installation

npm install react-solari-display

(Note: If using this locally, simply copy the src/components/SplitFlap directory into your project)

Basic Usage

import { SplitFlap } from "./components/SplitFlap/SplitFlap";

function App() {
  return <SplitFlap value="HELLO" />;
}

Digital Clock

import { useState, useEffect } from "react";
import { SplitFlap } from "./components/SplitFlap/SplitFlap";
import { CHARSETS } from "./constants/charsets";

function Clock() {
  const [time, setTime] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      const d = new Date();
      setTime(
        `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}`,
      );
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <SplitFlap value={time} characters={CHARSETS.numbers + ":"} minLength={8} />
  );
}

Airport Board

The SplitFlapBoard component can be used to render multiple rows and columns easily.

import { SplitFlapBoard } from "./components/SplitFlapBoard/SplitFlapBoard";
import { CHARSETS } from "./constants/charsets";

<SplitFlapBoard
  rows={[
    ["AI129", "MUMBAI   ", "BOARDING"],
    ["6E204", "DELHI    ", "DELAYED "],
  ]}
  characters={CHARSETS.airport}
  colSpacing={24}
  boardSpacing={12}
/>;

Each cell is its own SplitFlap, so pad every column with spaces to give it a fixed width.

Character Sets

Built-in character sets are available via the CHARSETS object:

• numbers: "0123456789"
• uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
• lowercase: "abcdefghijklmnopqrstuvwxyz"
• alphanumeric: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
• punctuation: " .,!?/:;-_+()[]"
• airport: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 .:-/"

You can also pass any custom string:

<SplitFlap value="12:45" characters={CHARSETS.numbers + ":"} />

Styling

The component uses CSS variables for easy styling without needing to override classes. You can pass these via props.

| Prop | Type | Default | Description | | ----------------- | ------------- | --------- | ------------------------------------------------------------------------------- | | textColor | string | #f3efe4 | Color of the text | | background | string | #191b1a | Background color of the flaps | | borderColor | string | #0b0c0c | Border color of the flaps | | spacing | number/string | 4 | Gap between characters | | characterWidth | number/string | 48 | Width of a single character | | characterHeight | number/string | 64 | Height of a single character. Font size, hinge and 3D perspective scale with it |

The flap font defaults to Barlow Condensed and falls back to Arial Narrow. Override it with the --sf-font-family CSS variable. --sf-font-size, --sf-font-weight, --sf-border-radius, --sf-border-width and --sf-shadow are also available.

Layout

| Prop | Type | Default | Description | | -------------- | ------ | ---------- | --------------------------------- | | minLength | number | 0 | Minimum number of flaps to render | | maxLength | number | Infinity | Maximum number of flaps to render | | paddingLeft | number | 0 | Empty flaps to add to the left | | paddingRight | number | 0 | Empty flaps to add to the right |

Sound

To enable mechanical flap sounds, pass the sound prop.

<SplitFlap value="18:43" sound soundVolume={0.25} />

Note: Browsers block autoplaying audio until the user has interacted with the document. The component automatically initializes the audio context upon the first click or keypress on the page when sound is enabled.

Accessibility

The component respects the prefers-reduced-motion CSS media query. If reduced motion is requested, the 3D flipping animation is replaced with a simple fade transition.

When reduced motion is requested, flaps also skip the cycling through the character set and go straight to their target.

The root container also exposes the fully rendered text to screen readers using aria-label and role="img", while individual animated flaps are marked with aria-hidden="true".

API Reference

Imperative API

You can control the component imperatively via a React ref.

const displayRef = useRef();
<SplitFlap ref={displayRef} value="HELLO" />;

// Later
displayRef.current.setValue("WORLD");