@a7sc11u/scramble
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.6 • Public • Published

    Scramble

    A scramble text UI component for react.

    The animation maintains an internal ticking clock, that runs up to 60 times per second, or once per animation frame. The animation starts from the beginning of the text, and scrambles until the end of the input, given a set of parameters that allow you to control how many characters are added and over how many ticks, and how many times each character is randomized.

    Live demo at https://scramble.vercel.app/

    Props

    Property type default description
    as string - polymorphic tag
    play boolean true start/stop animation
    text string - text to scramble.
    speed number 0.4 0-1 range that determines the ticking speed. 1 means 1 tick per frame
    scramble number 8 how many times each character will randomize
    step number 1 how many characters are added to the scramble on each tick
    stepInterval number 1 how many ticks it requires to increment the step index
    seed number 3 adds random characters to the scramble, ahead of the ticking loop
    seedInterval number 10 ticks required to seed more random characters
    onComplete function - callback invoked on completion

    Installation

      yarn add @a7sc11u/scramble
      //or
      npm install @a7sc11u/scramble

    Usage

    import { TextScramble } from '@a7sc11u/scramble';
    
    export const App = () => {
    
      const elRef = React.useRef<HTMLDivElement>(null);
    
      const handleComplete = () => {
        console.log('scramble is done');
      }
    
      return (
        <TextScramble 
          ref={elRef}
          as="div"
          play={true}
          speed={0.4}
          scramble={8}
          step={1}
          stepInterval={1}
          seed={3}
          seedInterval={10}
          onComplete={handleComplete}
          text="Fugiat ullamco non magna dolor excepteur." 
        />
      );
    };

    Install

    npm i @a7sc11u/scramble

    DownloadsWeekly Downloads

    11

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    45.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • a7sc11u