@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

adithyaakrishna/react-slot

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages