Split Flap

A Solari board. Every cell is a real two-half flap: the top leaf falls about the hinge with rotateX while the next character lands on the bottom leaf, shading as it turns away from the light, and each cell runs through the last few characters of the drum in order until it reaches its target, so a board settles in about a second.

$149 once · every Pro piece

Customize

Text (| cycles)

Hold (ms)

Size (px)

Flap time (ms)

Stagger (ms)

Flip in on mount

Columns start in a stagger with a little randomness per flap, the last flap slaps down with a few degrees of overshoot, and the free edge of a falling leaf catches a glint of light.

Install

npx shadcn@latest add @obsyde/split-flap

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { SplitFlap } from '@/components/obsyde/ember/split-flap/SplitFlap';

export function Example() {
  return (
    <SplitFlap />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/split-flap/SplitFlap.tsxcomponent
ember/split-flap/split-flap-demo.cssstyles
ember/split-flap/split-flap.cssstyles
ember/split-flap/SplitFlapDemo.tsxdemo
ember/type-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`texts`Text (\| cycles)	`string`	`'SPLIT FLAP'`
`hold`Hold (ms)	`number`	`3600`
`size`Size (px)	`number`	`56`
`flip`Flap time (ms)	`number`	`74`
`stagger`Stagger (ms)	`number`	`38`
`intro`Flip in on mount	`boolean`	`true`