Text Flipping Board

text

Split flap mechanical character board animation.

#text#board#splitflap#mechanical

Live Interactive Preview

Component Source Code

Select language in the dropdown

TextFlippingBoard.tsx

1'use client';
2
3import React, { useState, useEffect } from 'react';
4
5export default function TextFlippingBoard() {
6  const characters = ['A', 'U', 'R', 'E', 'N', 'Z', 'A'];
7  const [activeIdx, setActiveIdx] = useState(0);
8
9  useEffect(() => {
10    const interval = setInterval(() => {
11      setActiveIdx((prev) => (prev + 1) % characters.length);
12    }, 800);
13    return () => clearInterval(interval);
14  }, [characters.length]);
15
16  return (
17    <div className="flex items-center justify-center gap-1.5 sm:gap-2 p-6">
18      {characters.map((char, i) => {
19        const isFlipped = i === activeIdx;
20        return (
21          <div
22            key={i}
23            style={{
24              transform: isFlipped ? 'rotateX(360deg)' : 'rotateX(0deg)',
25              transition: 'transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)'
26            }}
27            className="flex h-12 w-9 sm:h-16 sm:w-12 items-center justify-center rounded-xl border border-slate-700 bg-slate-900 font-mono text-lg sm:text-2xl font-black text-cyan-400 shadow-md [perspective:600px]"
28          >
29            {char}
30          </div>
31        );
32      })}
33    </div>
34  );
35}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/TextFlippingBoard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import TextFlippingBoard from '@/components/text/TextFlippingBoard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <TextFlippingBoard />
7    </main>
8  );
9}