Split-Flap Display

A web-based split-flap display inspired by the classic Solari boards found in airports and train stations. Features smooth CSS animations, multiple themes, and a real-time clock.

Features

• Authentic flip animation — CSS-powered split-flap mechanics with realistic timing
• Live clock — Real-time HH:MM:SS display with AM/PM indicator
• Dynamic text input — Type any message and watch it flip into place
• 5 built-in themes — Classic, Retro, Hacker, Azula, and Meyer Pink
• Dark/Light mode — Toggle UI brightness while keeping theme styling
• Customizable glyph sets — Letters, numbers, symbols, or custom character sets
• Zero dependencies — Just jQuery and jQuery UI (CDN-linked)
• Responsive design — Works on desktop and tablet screens

Screenshots

Classic Theme	Retro Theme

Hacker Theme	Azula Theme	Meyer Pink Theme

Quick Start

1. Clone this repository:

   git clone https://github.com/qrion25/splitflap.git

2. Open index.html in your browser — no build step required!

3. Or serve it locally:

   # Python 3
   python -m http.server 8000
   
   # Node.js
   npx serve .

Project Structure

splitflap/
├── index.html          # Main demo page
├── css/
│   └── splitflap.css   # Core styles + all themes
├── js/
│   ├── splitflap.js    # jQuery UI widget (the engine)
│   └── app.js          # Demo page behavior
├── images/             # Theme preview images
├── screenshots/        # README screenshots
├── .gitignore
├── LICENSE
└── README.md

Themes

Switch themes via the dropdown in the bottom-left corner, or set programmatically:

// Available: theme-classic, theme-retro, theme-hacker, theme-azula, theme-meyer
document.body.className = 'theme-retro';

Usage

Basic Setup

<link rel="stylesheet" href="css/splitflap.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>
<script src="js/splitflap.js"></script>

<div id="display" class="splitflap"></div>

<script>
  $('#display').splitflap({
    initial: 'hello',
    glyphSet: ' abcdefghijklmnopqrstuvwxyz'
  });
</script>

Update Display Text

$('#display').splitflap('value', 'world');

Available Glyph Sets

$.splitflap.alphabetic   // A-Z + space
$.splitflap.alphanumeric // A-Z, 0-9 + space
$.splitflap.extended     // Alphanumeric + symbols
$.splitflap.huge         // Both cases + numbers + symbols
$.splitflap.digits       // 0-9 + space
$.splitflap.hex          // 0-9, A-F + space
$.splitflap.twelve       // 1-12 (for hours)
$.splitflap.minutes      // 00-59

Custom Glyph Set

$('#display').splitflap({
  glyphSet: ' 0123456789ABCDEF', // hex display
  initial: 'CAFE'
});

Clock Example

$('#clock').splitflap({
  glyphSet: {
    '.hours': $.splitflap.twelve,
    '.minutes': $.splitflap.minutes,
    '.seconds': $.splitflap.minutes
  }
});

Options

Option	Type	Default	Description
initial	String	""	Starting text
glyphSet	String/Array/Object	alphanumeric	Characters the display can show
tickLength	Number	120	Milliseconds per flip step
defaultSegments	Number	5	Number of tiles if not specified

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Arc (latest)

License

MIT License — free to use, modify, and share.

Author

Rigel Leonard — rigelleonard.com

Acknowledgments

Inspired by the iconic Solari departure boards and built upon the original splitflap widget by Conrad Buck.

---

If you use this in a project, I'd love to see it.