Flip Board

The FlipBoard component recreates the tactile, mechanical feel of a classic split-flap display. It rapidly cycles through a standard character set with realistic CSS 3D folding animations until it lands on your target text.

Live Preview

Installation

Props

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { FlipBoard } from "@/components/creative/flip-board";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { FlipBoard } from "@/components/creative/flip-board";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <FlipBoard
        text="example"
        rows{10}
        cols{10}
      />
    </div>
  );
}