Zéro dépendance · 5,9 ko gzip · MIT
Affichez du texte comme un tableau de départs
Une librairie qui rend n'importe quelle chaîne de caractères comme un panneau Solari : chaque volet tourne glyphe par glyphe jusqu'à sa cible, exactement comme la mécanique d'origine.
npm install @sn0wfr/split-flap
Ce que ça fait bien
-
Mécanique fidèle
Les volets n'avancent que vers l'avant, glyphe par glyphe, en repassant par le blanc — comme un vrai tableau.
-
Aucune dépendance
Rien à installer d'autre. Le CSS est embarqué dans le bundle et injecté au premier usage.
-
Partout
Un cœur vanilla, un custom element
<split-flap>natif, et un wrapper React. Vue, Svelte et Angular passent par l'élément. -
Accessible
Le texte reste lisible par un lecteur d'écran, les volets sont masqués, et
prefers-reduced-motioncoupe l'animation. -
Thémable
Tout passe par des variables CSS. Un thème, c'est cinq lignes de surcharge — pas un fork.
-
TypeScript
Types fournis, ESM et CJS, plus un build IIFE pour un simple
<script>depuis un CDN.
Démarrer
Trois façons de l'utiliser, selon ce que vous avez sous la main.
Une balise script, et l'élément est disponible. Le texte entre les balises sert de repli sans JavaScript.
<script src="https://unpkg.com/@sn0wfr/split-flap"></script>
<split-flap length="12" chars="letters" theme="airport">
DEPARTURES
</split-flap>
Le cœur est une classe. set() renvoie une promesse
résolue quand tous les volets sont arrivés.
import { SplitFlap } from "@sn0wfr/split-flap";
const board = new SplitFlap("#board", {
length: 12,
chars: "letters",
duration: 110,
stagger: 55,
});
await board.set("BOARDING");
await board.set("GATE 24");
Le composant pilote l'instance : changer value
déclenche l'animation, changer une option reconfigure sur place.
import { SplitFlap } from "@sn0wfr/split-flap/react";
export function Status({ state }) {
return <SplitFlap value={state} length={12} theme="amber" />;
}Bac à sable
Réglez, regardez, puis copiez le code correspondant.
Un vrai tableau de départs
Plusieurs instances côte à côte, rafraîchies comme le ferait un aéroport. Chaque colonne a son propre alphabet et son propre rythme.
Thèmes
Cinq thèmes fournis. Chacun n'est qu'un jeu de variables CSS — le vôtre tient dans un bloc.
.sf--midnight {
--sf-color: #cfe3ff;
--sf-bg-top: #10203a;
--sf-bg-bottom: #0a1729;
--sf-divider: rgba(0, 0, 0, 0.7);
--sf-radius: 0.12em;
}Référence
Options
| Nom | Type | Défaut | Description |
|---|
Méthodes et propriétés
| Nom | Type | Description |
|---|
Événements
| Nom | Detail | Description |
|---|
Variables CSS
| Nom | Défaut | Description |
|---|