Split Flap Display Web Component

A realistic HTML5 web component that recreates the classic split-flap display (also known as flip-dot or Solari board displays) commonly seen in airports, train stations, and retro displays.

!Split Flap Display Demo

!Digital Clock Example

Features

- 🎯 Authentic Animation: Realistic flip animation with 3D perspective that mimics real split-flap displays
- 🔤 Configurable Alphabet: Support for digits, letters, and special characters via the alphabet attribute
- 🎵 Sound Effects: Authentic embedded flip sound with randomized timing for parallel flips
- ⚡ Sequential Animation: Proper step-by-step progression (e.g., 1→2→3→4→5) just like real displays
- 🎨 Technical Design: Monospace font (JetBrains Mono) with proper character splitting
- 🔧 Web Standards: Built as a standard HTML5 Custom Element - no dependencies
- 📱 Responsive: Works across different screen sizes and devices

Quick Start

1. Include the component script:
``html





`

2. Add the split-flap-digit elements:
`html

`

3. Change values dynamically:
`javascript
document.querySelector('split-flap-digit').setAttribute('value', '7');
`

Examples

$3



`

$3


`

$3

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| value | string | "0" | The character to display |
| alphabet | string | "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ" | The set of characters this display can show |

$3

`javascript
// Change the displayed value
element.setAttribute('value', 'X');

// Change the supported alphabet
element.setAttribute('alphabet', '0123456789ABCDEF');
`

$3

The component doesn't emit custom events, but you can listen for attribute changes:

`javascript
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
console.log('Value changed to:', mutation.target.getAttribute('value'));
}
});
});

observer.observe(element, { attributes: true });
`

Animation Behavior

The split-flap display follows authentic behavior:

1. Sequential Progression: To change from 1 to 5, it animates through 2, 3, 4
2. Realistic Physics: The top half drops down while revealing the new character behind it
3. Sound Timing: Each flip plays a sound with slight randomization for realistic parallel operation
4. Speed: Fast animation (120ms per flip) for snappy response

Demo Pages

This repository includes two demonstration pages:

$3

`css
split-flap-digit {
width: 80px;
height: 100px;
margin: 5px;
}
`

$3

You can modify animation timing in the JavaScript source:

`javascript
// In animateFlip method
topFlap.style.animation = 'flip-top 0.12s ease-in-out forwards'; // Adjust duration
`

$3

Replace the embedded Base64 audio data with your own sound, or modify the audio setup:

`javascript
// In setupAudio method - replace the audioData with your own Base64 encoded sound
const audioData = 'data:audio/mpeg;base64,YOUR_BASE64_DATA_HERE';
this.audio = new Audio(audioData);
this.audio.volume = 0.5; // Adjust volume
`

Implementation Details

$3

`bash


Install dependencies

This creates split-flap-digit.min.js with:
- Compressed and minified code
- Removed comments and whitespace
- ~10% size reduction

$3

`bash
npm run build # Build minified version
npm run build:dev # Build with source maps
npm run dev # Start development server
npm run clean # Clean build files
`

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes to split-flap-digit.js
4. Run npm run build to create the minified version
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature`)
7. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

- Inspired by classic Solari split-flap displays
- Uses JetBrains Mono font for technical appearance
- Sound effect timing inspired by real mechanical displays
- Built with assistance from Claude Code by Anthropic

---

Perfect for retro interfaces, dashboard displays, clocks, counters, and any application requiring that classic split-flap aesthetic.