Effects · Gutenberg
Split-Flap Display block for WordPress
Recreate the iconic airport departure-board split-flap animation. Characters roll through the alphabet and settle on the target text. Supports multiple messages, ticker mode, custom colours, and scroll-triggered animation.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Recreate the iconic airport departure-board split-flap animation. Characters roll through the alphabet and settle on the target text. Supports multiple messages, ticker mode, custom colours, and scroll-triggered animation.
Inspector panels on this block: Messages, Character Set & Font, Animation, Layout, Label. Those titles come from index.js, not from a shared template.
Behavior controls: “Character Set” options: Alpha (A–Z + space), Alphanumeric (A–Z, 0–9), Full (A–Z, 0–9, symbols), Numeric only (0–9); “Font Style” options: Monospace, Sans-serif, Slab Serif.
Where to find it
Gutenberg inserter → Effects → search “Split-Flap Display” (block name `blockenberg/split-flap-display` in block.json). Style it in the sidebar after insert.
How to use Split-Flap Display block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Split-Flap Display”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Messages. Set “Row”, “Character Set”, “Font Style”, “Ticker Mode (cycle messages)”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Row | Text field in the inspector. |
| Character Set | Select control; the chosen value is saved on the block. Options: Alpha (A–Z + space); Alphanumeric (A–Z, 0–9); Full (A–Z, 0–9, symbols); Numeric only (0–9). block.json default: alpha. Saved as `charSet`. |
| Font Style | Select control; the chosen value is saved on the block. Options: Monospace; Sans-serif; Slab Serif. block.json default: mono. Saved as `fontFamily`. |
| Ticker Mode (cycle messages) | On/off toggle in the inspector. On by default. Saved as `tickerMode`. |
| Ticker Delay (ms) | Numeric range control in the inspector. Range 1000–10000. block.json default: 3000. Saved as `tickerDelay`. |
| Animate on Scroll Into View | On/off toggle in the inspector. On by default. Saved as `flipOnScroll`. |
| Auto-Play on Load | On/off toggle in the inspector. Off by default. Saved as `autoPlay`. |
| Flip Speed (ms/step) | Numeric range control in the inspector. Range 20–200. block.json default: 60. Saved as `flipSpeed`. |
| Character Stagger (ms) | Numeric range control in the inspector. Range 0–200. block.json default: 30. Saved as `flipStagger`. |
| Char Width (px) | Numeric range control in the inspector. Range 20–120. block.json default: 48. Saved as `charWidth`. |
| Char Height (px) | Numeric range control in the inspector. Range 30–160. block.json default: 64. Saved as `charHeight`. |
| Char Gap (px) | Numeric range control in the inspector. Range 0–20. block.json default: 4. Saved as `charGap`. |
| Row Gap (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `rowGap`. |
| Char Border Radius | Numeric range control in the inspector. Range 0–20. block.json default: 6. Saved as `borderRadius`. |
| Board Padding (px) | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `boardPadding`. |
| Board Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `boardRadius`. |
| Show Board Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Label Text | Text field in the inspector. block.json default: FLIGHT INFORMATION. Saved as `label`. |
| Board Background | Color control in the inspector. block.json default: #1a1a1a. Saved as `boardBg`. |
| Character Background | Color control in the inspector. block.json default: #2a2a2a. Saved as `charBg`. |
| Character Color | Color control in the inspector. block.json default: #f5f5dc. Saved as `charColor`. |
| Divider Line | Color control in the inspector. block.json default: #111111. Saved as `dividerColor`. |
| Label Color | Color control in the inspector. block.json default: #888888. Saved as `labelColor`. |
| Glow Color | Color control in the inspector. Saved as `glowColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Recreate the iconic airport departure-board split-flap animation. Characters roll through the alphabet and settle on the target text. Supports multiple messages, ticker mode, custom colours, and scroll-triggered animation — that is the job of Split-Flap Display, not a generic content block.
- Use it when you need the editor control labeled “Row”, which exists on this block’s inspector.
- It matches pages about split flap, solari, airport.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Split-Flap Display block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Split-Flap Display”. It sits under Effects. After insert, open Messages and set “Row”, “Character Set”, “Font Style”, “Ticker Mode (cycle messages)”.
What makes Split-Flap Display different from other Blockenberg blocks?
Recreate the iconic airport departure-board split-flap animation. Characters roll through the alphabet and settle on the target text. Supports multiple messages, ticker mode, custom colours, and scroll-triggered animation. Inspector labels on this block include “Row”, “Character Set”, “Font Style”, “Ticker Mode (cycle messages)”.
Is the Split-Flap Display Gutenberg block free?
Yes. Split-Flap Display ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Split-Flap Display to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Messages, Character Set & Font, Animation, Layout).
Related effects blocks
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Handwriting Text
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
Kinetic Text
Text characters that scatter outward and snap back on hover with smooth physics animation.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Split Text
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Split-Flap Display from the Gutenberg inserter.