scrmbl

four tricks, one component

Hover states, live values, redaction, sequenced reveals — every card is the real library running with different options.

every charset, live

All ten built-in glyph pools, same sample, so you can compare their texture. Click any card to replay it — or pass your own string of characters as charset.

turn the knobs

Every control maps 1:1 to an option. The snippet underneath is copy-paste ready.

<Scramble
  order="start"
  charset="alnum"
  duration={800}
  stagger={20}
>
  {text}
</Scramble>

install

pnpm add scrmbl

same trick, four runtimes

The adapters are thin wrappers over one framework-agnostic controller — every option works identically everywhere.

import { Scramble, useScramble } from "scrmbl/react";

// Component: animates on mount and on change
<Scramble charset="upper" order="random">{title}</Scramble>

// Hook: full control
const { ref, replay } = useScramble({ charset: "hex" });
<h1 ref={ref} onMouseEnter={replay}>C0FFEE</h1>

the whole api

These are props in React, Vue, and Svelte, and an options object in vanilla.