Flip board

A split-flap board: every tile clacks through the letters to the next phrase.

enhancer
loop
letters
board
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Flip board example

NOW BOARDING

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<p class="demo-big" data-motion="flip-board" data-motion-words="NOW BOARDING|GATE 12 ON TIME|SMALL AND FAST">NOW BOARDING</p>

import { FlipBoard } from "./motion/react/FlipBoard";

<FlipBoard>Your content</FlipBoard>

<script setup lang="ts">
import FlipBoard from "./motion/vue/FlipBoard.vue";
</script>

<template>
  <FlipBoard>Your content</FlipBoard>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "flip-board";

The wrappers: FlipBoard.tsx (React, TypeScript) and FlipBoard.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-words`	auto	More phrases, separated by \|
`data-motion-interval`	`3400`	Time on each phrase
`data-motion-speed`	`75`	Time per flip
`data-motion-steps`	`12`	Most flips per change
`data-motion-stagger`	`24`	Delay between tiles
`data-motion-tile`	`#17171c`	Tile color
`data-motion-ink`	`#f5f5f7`	Letter color

The board is drawn over the element's own line, which keeps its place (invisible), so nothing reflows; it is as wide as the longest phrase, centered or aligned like the text, so leave room around it. Screen readers hear every phrase once; the tiles are aria-hidden. Text on screen at load starts on its first phrase; reduced motion shows the first phrase still. The loop stops off screen and in hidden tabs.

Size

flip-board.js is 2.0 KB gzip, with text-kit.js 2.6 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.