SCRAMBL

Scrambl is a versatile library designed to create captivating text scramble effects without any dependencies. It supports a variety of character sets including blocks, braille, symbols, binary, hex, kana, and allows for custom strings, making it suitable for diverse design needs. The library ensures a stable layout by auto-aligning cells for mixed content like symbols, braille, and CJK characters, maintaining visual consistency during animations.

With an intuitive API, developers can easily implement scramble effects with options for direction, duration, perturbation, and render modes. It offers a playground for testing different configurations, such as changing character sets, directions, and durations, providing a hands-on experience to fine-tune animations.

Scrambl supports multiline text, preserving line breaks and ensuring stable final frames for repeated playbacks. Its width-aware cells handle CJK and Latin glyphs seamlessly, preventing layout shifts. The library's 60fps engine ensures smooth animations, with controls for play, pause, and restart.

Framework integrations include React hooks and Vue composables, enabling easy incorporation into modern frameworks. The library is built with TypeScript, ensuring type safety and ease of use. Its small size (~3KB gzipped) and pure TypeScript implementation make it an efficient choice for adding engaging text effects to any web project.