@adikris/react-slot

A React component library inspired by vintage split-flap display boards, like those classic railway station information boards. Built with TypeScript, GSAP animations, and modern React patterns.

Installation

npm install @adikris/react-slot
# or
yarn add @adikris/react-slot

Features

• 🎨 Customizable split-flap animations
• 🔄 Smooth GSAP-powered transitions
• 📱 Responsive design
• 🌗 Light/Dark/System theme support
• 🎛️ Configurable board and line properties
• 🔧 TypeScript support

Basic Usage

import { FlipBoard } from '@adikris/react-slot';

function App() {
  return (
    <FlipBoard
      lines={[
        {
          text: "Hello World",
          color: "white",
          alignment: "left",
          length: 10
        }
      ]}
      theme="dark"
    />
  );
}

Props

FlipBoard Props

Prop	Type	Default	Description
lines	LineConfig[]	[]	Array of line configurations
boardBackground	string	'hsl(0 0% 15%)'	Board background color
gap	string	'0.5ch'	Gap between lines
padding	string	'6px'	Board padding
perspective	number	1	3D perspective effect
theme	'light' | 'dark' | 'system'	'dark'	Color theme

LineConfig Props

Prop	Type	Default	Description
text	string	''	Text to display
characters	string	'a-z'	Available characters
padAmount	number	0	Animation padding
alignment	'left' | 'right'	'left'	Text alignment
color	string	'black'	Text color
fontSize	string	'2.5rem'	Font size
slotWidth	string	'1.5ch'	Character slot width
length	number	10	Line length
backgroundColor	string	'hsl(0 0% 92%)'	Slot background

Demo Component

The library includes a demo component with a full UI for testing all features:

import { FlipBoardDemo } from '@adikris/react-slot';

function App() {
  return <FlipBoardDemo />;
}

The demo provides controls for:

• Adding/removing lines
• Modifying text and characters
• Adjusting animations and padding
• Changing colors and themes
• Configuring layout properties

Animation Details

The component uses GSAP for smooth flip animations with configurable properties:

• Character-by-character flipping
• Configurable flip speed
• Customizable padding between flips
• 3D perspective effects

Browser Support

Supports all modern browsers with CSS transform and custom properties support.

License

MIT