Community

About

The Split-Flap Display Simulator is a web application that replicates the classic mechanical split-flap displays commonly found in train stations and airports. The app allows users to input custom messages, which are then animated to simulate the flipping action of the display. To use the app, users can type their desired message into a text input field and submit it. The application processes the input, converting it into a format suitable for display, including support for color panels and hex color codes. Once submitted, the message is displayed across a grid of cells, each of which animates to show the transition from the current character to the new one. The application is built using React, TypeScript, and Tailwind CSS. It leverages the Radix UI library for accessible tab components and includes custom hooks for managing textarea resizing. The animation is achieved through CSS keyframes that create a realistic flipping effect, with each cell managing its own animation state. Key features of the app include: - A responsive and user-friendly interface for inputting messages. - Support for color panels, allowing users to display messages in various colors. - A dynamic animation system that simulates the mechanical flipping of characters. - The ability to clear the display and reset the input field. - A dropdown menu to switch between "Classic" and "Colorful" display modes, affecting how spaces are handled in the input. Overall, the Split-Flap Display Simulator combines modern web technologies with a nostalgic design, providing an engaging way to display messages with a unique visual flair.