}
/>
);
}
```
### Word ticker
A fixed length keeps the cell count steady while words change. The letters-only drum spins less than the full one.
```tsx
"use client";
import * as React from "react";
import { TrainFront } from "@/components/ui/icons";
import { SplitFlap } from "@/components/ui/split-flap";
const stops = ["SHIBUYA", "HARAJUKU", "YOYOGI", "SHINJUKU", "TAKADANOBABA", "IKEBUKURO", "OTSUKA", "UENO", "AKIHABARA"];
export default function SplitFlapTicker() {
const [stop, setStop] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setStop((index) => (index + 1) % stops.length), 4200);
return () => clearInterval(id);
}, []);
return (
// Hung from the left like a platform sign, so the name reads from the same edge every stop.
Next stop
);
}
```
### Counter
A digits-only charset makes each digit step to its neighbour, like a mechanical tally.
```tsx
"use client";
import * as React from "react";
import { SplitFlap } from "@/components/ui/split-flap";
// A fixed sequence of arrivals, so server and client agree and every run looks the same.
const bursts = [1, 3, 1, 2, 1, 1, 4, 2, 1, 3];
export default function SplitFlapCounter() {
const [count, setCount] = React.useState(48_206);
React.useEffect(() => {
let tick = 0;
const id = setInterval(() => {
setCount((value) => value + bursts[tick++ % bursts.length]);
}, 1800);
return () => clearInterval(id);
}, []);
return (
Passengers through gate B today
);
}
```
### Type to flip
Every change spins each cell forward through the drum. Characters that aren't on it drop straight in with one flip.
```tsx
"use client";
import * as React from "react";
import { Input } from "@/components/ui/input";
import { SplitFlap } from "@/components/ui/split-flap";
export default function SplitFlapPlayground() {
const [text, setText] = React.useState("GATE CHANGE");
return (