open-index/open-npm huggingface dataset:
npm package: @splitflap/core
Description: Split-flap display animation component. Framework-agnostic vanilla JS.
Latest version: 0.1.1

# @splitflap/core

Split-flap display animation component. Framework-agnostic vanilla JS.

A [split-flap display](https://en.wikipedia.org/wiki/Split-flap_display) (also known as a Solari board) is a mechanical display that cycles through characters on hinged flaps. This library recreates the effect using CSS 3D transforms. No images, no canvas, just DOM elements.

## Install

```bash
npm install @splitflap/core
```

## Usage

```js
import { SplitFlap } from "@splitflap/core";

const board = new SplitFlap(document.getElementById("board"), {
  text: "Hello",
  speed: 4,
  onComplete: () => console.log("done"),
});

// Update text (animates to new value)
board.setText("World");

// Clean up
board.destroy();
```

## Framework wrappers

If you use a framework, use the wrapper instead of core directly:

- **React**: [`@splitflap/react`](https://www.npmjs.com/package/@splitflap/react)
- **Vue**: [`@splitflap/vue`](https://www.npmjs.com/package/@splitflap/vue)
- **Svelte**: [`@splitflap/svelte`](https://www.npmjs.com/package/@splitflap/svelte)

## Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `text` | string | (required) | Target text to display |
| `textInit` | string | random | Starting text before animation |
| `autoplay` | boolean | true | Start flipping on creation |
| `speed` | number | 3 | Flips per second per letter |
| `speedVariation` | number | 2 | Random speed variation per letter |
| `charWidth` | number | 50 | Tile width in px |
| `charHeight` | number | 100 | Tile height in px |
| `stagger` | number | 0 | Delay (seconds) between each letter starting |
| `maxFlips` | number | - | Cap intermediate flips before landing |
| `textColor` | string | #ffffff | Character color |
| `charBackground` | string | #222222 | Tile background |
| `dividerColor` | string | #000000 | Line between upper/lower halves |
| `onComplete` | () => void | - | Called when all letters settle |

## Attribution

Based on the original [jQuery splitFlap plugin](https://www.jqueryscript.net/text/Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap.html) by Maxime Cousinou.

## License

MIT
npm package: @splitflap/react
Description: Split-flap display animation component for React.
Latest version: 0.1.1

# @splitflap/react

Split-flap display animation component for React.

A [split-flap display](https://en.wikipedia.org/wiki/Split-flap_display) (also known as a Solari board) is a mechanical display that cycles through characters on hinged flaps. This library recreates the effect using CSS 3D transforms. No images, no canvas, just DOM elements.

## Install

```bash
npm install @splitflap/react
```

## Usage

```jsx
import { SplitFlap } from "@splitflap/react";

function App() {
  return (
    <SplitFlap
      text="Hello"
      speed={4}
      onComplete={() => console.log("done")}
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `text` | string | (required) | Target text to display |
| `textInit` | string | random | Starting text before animation |
| `autoplay` | boolean | true | Start flipping on mount |
| `speed` | number | 3 | Flips per second per letter |
| `speedVariation` | number | 2 | Random speed variation per letter |
| `charWidth` | number | 50 | Tile width in px |
| `charHeight` | number | 100 | Tile height in px |
| `stagger` | number | 0 | Delay (seconds) between each letter starting |
| `maxFlips` | number | - | Cap intermediate flips before landing |
| `textColor` | string | #ffffff | Character color |
| `charBackground` | string | #222222 | Tile background |
| `dividerColor` | string | #000000 | Line between upper/lower halves |
| `onComplete` | () => void | - | Called when all letters settle |

## Other frameworks

- **Vanilla JS**: [`@splitflap/core`](https://www.npmjs.com/package/@splitflap/core)
- **Vue**: [`@splitflap/vue`](https://www.npmjs.com/package/@splitflap/vue)
- **Svelte**: [`@splitflap/svelte`](https://www.npmjs.com/package/@splitflap/svelte)

## Attribution

Based on the original [jQuery splitFlap plugin](https://www.jqueryscript.net/text/Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap.html) by Maxime Cousinou.

## License

MIT
npm package: @splitflap/svelte
Description: Split-flap display animation component for Svelte.
Latest version: 0.1.1

# @splitflap/svelte

Split-flap display animation component for Svelte.

A [split-flap display](https://en.wikipedia.org/wiki/Split-flap_display) (also known as a Solari board) is a mechanical display that cycles through characters on hinged flaps. This library recreates the effect using CSS 3D transforms. No images, no canvas, just DOM elements.

## Install

```bash
npm install @splitflap/svelte
```

## Usage

```svelte
<script>
  import { SplitFlap } from "@splitflap/svelte";
</script>

<SplitFlap
  text="Hello"
  speed={4}
  onComplete={() => console.log("done")}
/>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `text` | string | (required) | Target text to display |
| `textInit` | string | random | Starting text before animation |
| `autoplay` | boolean | true | Start flipping on mount |
| `speed` | number | 3 | Flips per second per letter |
| `speedVariation` | number | 2 | Random speed variation per letter |
| `charWidth` | number | 50 | Tile width in px |
| `charHeight` | number | 100 | Tile height in px |
| `stagger` | number | 0 | Delay (seconds) between each letter starting |
| `maxFlips` | number | - | Cap intermediate flips before landing |
| `textColor` | string | #ffffff | Character color |
| `charBackground` | string | #222222 | Tile background |
| `dividerColor` | string | #000000 | Line between upper/lower halves |
| `onComplete` | () => void | - | Called when all letters settle |

## Other frameworks

- **Vanilla JS**: [`@splitflap/core`](https://www.npmjs.com/package/@splitflap/core)
- **React**: [`@splitflap/react`](https://www.npmjs.com/package/@splitflap/react)
- **Vue**: [`@splitflap/vue`](https://www.npmjs.com/package/@splitflap/vue)

## Attribution

Based on the original [jQuery splitFlap plugin](https://www.jqueryscript.net/text/Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap.html) by Maxime Cousinou.

## License

MIT
npm package: @splitflap/vue
Description: Split-flap display animation component for Vue 3.
Latest version: 0.1.1

# @splitflap/vue

Split-flap display animation component for Vue 3.

A [split-flap display](https://en.wikipedia.org/wiki/Split-flap_display) (also known as a Solari board) is a mechanical display that cycles through characters on hinged flaps. This library recreates the effect using CSS 3D transforms. No images, no canvas, just DOM elements.

## Install

```bash
npm install @splitflap/vue
```

## Usage

```vue
<script setup>
import { SplitFlap } from "@splitflap/vue";
</script>

<template>
  <SplitFlap
    text="Hello"
    :speed="4"
    @complete="() => console.log('done')"
  />
</template>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `text` | string | (required) | Target text to display |
| `textInit` | string | random | Starting text before animation |
| `autoplay` | boolean | true | Start flipping on mount |
| `speed` | number | 3 | Flips per second per letter |
| `speedVariation` | number | 2 | Random speed variation per letter |
| `charWidth` | number | 50 | Tile width in px |
| `charHeight` | number | 100 | Tile height in px |
| `stagger` | number | 0 | Delay (seconds) between each letter starting |
| `maxFlips` | number | - | Cap intermediate flips before landing |
| `textColor` | string | #ffffff | Character color |
| `charBackground` | string | #222222 | Tile background |
| `dividerColor` | string | #000000 | Line between upper/lower halves |

## Events

| Event | Description |
|-------|-------------|
| `complete` | Emitted when all letters settle |

## Other frameworks

- **Vanilla JS**: [`@splitflap/core`](https://www.npmjs.com/package/@splitflap/core)
- **React**: [`@splitflap/react`](https://www.npmjs.com/package/@splitflap/react)
- **Svelte**: [`@splitflap/svelte`](https://www.npmjs.com/package/@splitflap/svelte)

## Attribution

Based on the original [jQuery splitFlap plugin](https://www.jqueryscript.net/text/Airport-Like-Text-Flip-Animation-with-jQuery-CSS3-splitFlap.html) by Maxime Cousinou.

## License

MIT