splitflap
Split-flap display animation library for the web. Works with React, Vue, Svelte, or vanilla JS.
A split-flap display (also known as a Solari board) is a mechanical display that cycles through characters on hinged flaps. This library recreates the effect using CSS 3D transforms. No images, no canvas, just DOM elements.
Packages
| Package | Description |
|---|---|
@splitflap/core |
Framework-agnostic vanilla JS |
@splitflap/react |
React wrapper |
@splitflap/vue |
Vue 3 wrapper |
@splitflap/svelte |
Svelte wrapper |
Quick start
# React
npm install @splitflap/react
# Vue
npm install @splitflap/vue
# Svelte
npm install @splitflap/svelte
# Vanilla JS
npm install @splitflap/core
Development
pnpm install
pnpm dev # Start demo dev server
pnpm build:lib # Build all library packages
Attribution
Based on the original jQuery splitFlap plugin by Maxime Cousinou. The core animation logic and CSS 3D transform approach are his work. This project is a migration to modern frameworks done with the help of Claude.
License
MIT
