hi@scivi.dev

scivi / open source

splitflap

Animated text like an airport departure board, for React Native, Swift and the web.

A departures board with cities in their own scripts, the four transitions, numbers, emoji, cell widths and all four directions, all moving at once
Emoji: Twemoji, CC-BY 4.0

React NativeExpoiOSAndroid

react-native-splitflap

Split-flap departure-board text for React Native and Expo: every letter rolls, flips or flickers into place, played natively.

  • Four transitions: flip, reel, roll and scramble
  • Any script: Latin, Cyrillic, Greek, Georgian, Hindi, Thai, Japanese, emoji
  • Numbers that hold still: prices, clocks, counters
  • Core Animation on iOS, Canvas on Android, works with Expo
npx expo install @enavermate/react-native-splitflap

GitHub →npm →How it's built →

SwiftiOSiPadOSMac Catalyst

SplitflapKit

The same split-flap board for SwiftUI and UIKit, played by Core Animation on iPhone, iPad and the Mac.

  • Splitflap(text) for SwiftUI, SplitflapView for UIKit
  • Four transitions, any script, numbers that hold still
  • Lays out like a label: Dynamic Type, VoiceOver, … truncation
  • The same plans as react-native-splitflap, checked scenario by scenario
.package(url: "https://github.com/enavermate/SplitflapKit", from: "0.5.3")

GitHub →Swift Package Index →How it's built →

WebHTMLReactVueSvelteAngular

splitflap

The same board for the web: a <split-flap> element for HTML, Vue, Svelte and Angular, a React component, and the player for anything else.

  • Drawn on a canvas, styled with CSS like text
  • The text stays in the DOM for screen readers and search
  • Plain text on the server: Next.js App Router needs nothing extra
  • No dependencies, or one <script> tag from a CDN
npm install @enavermate/splitflap

GitHub →npm →Live demo →How it's built →