### Development Server Start Command

Source: https://github.com/tol-is/use-scramble/blob/main/README.md

Command to start the development server for the use-scramble project. This will launch the playground minisite and build the library in watch mode, enabling live updates during development.

```bash
yarn dev
```

--------------------------------

### Install use-scramble Hook

Source: https://github.com/tol-is/use-scramble/blob/main/README.md

Install the use-scramble package into your React application using npm. This is the first step to integrating the text animation hook.

```bash
npm install use-scramble
```

--------------------------------

### Comprehensive use-scramble Configuration Example (React)

Source: https://context7.com/tol-is/use-scramble/llms.txt

Provides a full example of the use-scramble hook, showcasing all available configuration options. This includes playOnMount, speed, tick, step, scramble, seed, chance, range, overdrive, overflow, ignore characters, and lifecycle callbacks like onAnimationStart, onAnimationFrame, and onAnimationEnd.

```tsx
import { useScramble } from 'use-scramble';
import React, { useState } from 'react';

const FullConfigExample = () => {
  const [animating, setAnimating] = useState(false);

  const { ref, replay } = useScramble({
    playOnMount: true,
    text: 'Full configuration demonstration',
    speed: 0.85,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 2,
    chance: 0.85,
    range: [65, 125],
    overdrive: 95,
    overflow: true,
    ignore: [' ', '.', ','],
    onAnimationStart: () => setAnimating(true),
    onAnimationFrame: (result) => {
      // Access current frame result
    },
    onAnimationEnd: () => setAnimating(false),
  });

  return (
    <div>
      <p ref={ref} />
      <button onClick={replay} disabled={animating}>
        {animating ? 'Animating...' : 'Replay'}
      </button>
    </div>
  );
};

export default FullConfigExample;
```

--------------------------------

### Disable Overflow for Empty String Start in React

Source: https://context7.com/tol-is/use-scramble/llms.txt

Disables overflow to start animations from an empty string instead of overlaying previous text content. This ensures a clean slate for each new animation.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const OverflowExample = () => {
  const { ref } = useScramble({
    text: 'This starts from empty',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 1,
    overflow: false, // Animation starts from empty string
  });

  return <p ref={ref} />;
};

export default OverflowExample;
```

--------------------------------

### Basic useScramble Hook Implementation

Source: https://github.com/tol-is/use-scramble/blob/main/README.md

Import and call the useScramble hook in your React component. The returned ref object should be attached to the target DOM element to initiate the animation. This example demonstrates setting the text and animation parameters.

```jsx
import { useScramble } from 'use-scramble';

export const App = () => {
  const { ref } = useScramble({
    text: 'Achilles next, that nimble runner, swift on his feet as the wind',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 0,
  });

  return <p ref={ref} />;
};
```

--------------------------------

### Control Animation Speed with Speed and Tick in React

Source: https://context7.com/tol-is/use-scramble/llms.txt

Fine-tunes animation pacing by combining speed and tick parameters for precise control over framerate and step intervals. This example creates a very slow animation.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const SpeedControlExample = () => {
  const { ref } = useScramble({
    text: 'Very slow animation',
    speed: 0.3, // 30% of 60fps = 18fps
    tick: 5, // Advance every 5 ticks
    step: 1,
    scramble: 3,
    seed: 1,
  });

  return <p ref={ref} />;
};

export default SpeedControlExample;
```

--------------------------------

### Manual Replay of Animation

Source: https://github.com/tol-is/use-scramble/blob/main/README.md

This example shows how to manually trigger the text animation using the `replay` function returned by the useScramble hook. It also demonstrates disabling the animation on initial mount by setting `playOnMount` to false, and triggering the replay on mouse events.

```jsx
import { useScramble } from 'use-scramble';

export const App = () => {
  const { ref, replay } = useScramble({
    text: 'Achilles next, that nimble runner, swift on his feet as the wind',
    playOnMount: false
  });

  return <p ref={ref} onMouseOver={replay} onMouseOut={replay} />;
};
```

--------------------------------

### Fast Text Appearance with Increased Step in React

Source: https://context7.com/tol-is/use-scramble/llms.txt

Increases the step parameter to reveal multiple characters per tick for faster text appearance. This example shows text appearing quickly.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const FastStepExample = () => {
  const { ref } = useScramble({
    text: 'This text appears quickly with multiple characters per step',
    speed: 0.8,
    tick: 1,
    step: 5, // Reveal 5 characters at once
    scramble: 2,
    seed: 3,
  });

  return <p ref={ref} />;
};

export default FastStepExample;
```

--------------------------------

### Dynamic Text Updates with useScramble

Source: https://context7.com/tol-is/use-scramble/llms.txt

Demonstrates updating the 'text' prop dynamically to trigger new animations. This example uses React state to change the text content, causing the scramble animation to re-run.

```tsx
import { useScramble } from 'use-scramble';
import React, { useState } from 'react';

const DynamicTextExample = () => {
  const [text, setText] = useState('Initial text');

  const { ref } = useScramble({
    text: text,
    speed: 0.8,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 2,
  });

  const messages = [
    'First message',
    'Second message',
    'Third message',
  ];

  return (
    <div>
      <p ref={ref} />
      {messages.map((msg, i) => (
        <button key={i} onClick={() => setText(msg)}>
          Show Message {i + 1}
        </button>
      ))}
    </div>
  );
};

export default DynamicTextExample;
```

--------------------------------

### Custom Unicode Character Range for Scramble Animation

Source: https://context7.com/tol-is/use-scramble/llms.txt

Customizes the random characters used during scrambling by specifying a unicode range via the 'range' prop. This example limits randomization to digits 0-9.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const CustomRangeExample = () => {
  const { ref } = useScramble({
    text: 'Custom character range example',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 5,
    seed: 1,
    range: [48, 57], // Only digits 0-9 (unicode 48-57)
  });

  return <p ref={ref} />;
};

export default CustomRangeExample;
```

--------------------------------

### Implement Animation Callbacks in React with use-scramble

Source: https://context7.com/tol-is/use-scramble/llms.txt

Uses lifecycle callbacks (onAnimationStart, onAnimationFrame, onAnimationEnd) to track animation state and perform actions during animation phases. This example logs status changes and provides a replay button.

```tsx
import { useScramble } from 'use-scramble';
import React, { useState } from 'react';

const CallbacksExample = () => {
  const [status, setStatus] = useState('idle');

  const { ref, replay } = useScramble({
    text: 'Animation with callbacks',
    speed: 0.6,
    scramble: 4,
    onAnimationStart: () => {
      setStatus('animating');
      console.log('Animation started');
    },
    onAnimationFrame: (result) => {
      console.log('Current frame:', result);
    },
    onAnimationEnd: () => {
      setStatus('complete');
      console.log('Animation ended');
    },
  });

  return (
    <div>
      <p ref={ref} />
      <p>Status: {status}</p>
      <button onClick={replay}>Replay</button>
    </div>
  );
};

export default CallbacksExample;
```

--------------------------------

### Specific Character Set for Scramble Animation

Source: https://context7.com/tol-is/use-scramble/llms.txt

Uses an array of specific unicode values in the 'range' prop to limit randomization to exact characters, instead of a continuous range. This example uses brackets and braces.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const SpecificCharsExample = () => {
  const { ref } = useScramble({
    text: 'Only brackets and braces',
    speed: 0.7,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 1,
    range: [91, 93, 123, 125], // [ ] { } characters
  });

  return <p ref={ref} />;
};

export default SpecificCharsExample;
```

--------------------------------

### Enable Overdrive Mode with Default Character in React

Source: https://context7.com/tol-is/use-scramble/llms.txt

Enables overdrive mode to display a character (default underscore) ahead of the animation step for an enhanced visual effect. This example uses React and the use-scramble hook.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const OverdriveExample = () => {
  const { ref } = useScramble({
    text: 'Overdrive mode enabled',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 3,
    seed: 2,
    overdrive: true, // Uses underscore (95) by default
  });

  return <p ref={ref} />;
};

export default OverdriveExample;
```

--------------------------------

### Preserve Characters with Ignore List in React

Source: https://context7.com/tol-is/use-scramble/llms.txt

Preserves specific characters during animation by adding them to the ignore list to maintain text structure. This example ignores spaces, commas, colons, and exclamation marks.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const IgnoreExample = () => {
  const { ref } = useScramble({
    text: 'Keep: punctuation, and spaces!',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 1,
    ignore: [' ', ',', ':', '!'], // Don't scramble these characters
  });

  return <p ref={ref} />;
};

export default IgnoreExample;
```

--------------------------------

### Distributed Scramble Effect with High Seed in React

Source: https://context7.com/tol-is/use-scramble/llms.txt

Increases the seed value to scramble more characters ahead of the current position for a distributed animation effect. This example shows characters scrambling ahead of the animation step.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const HighSeedExample = () => {
  const { ref } = useScramble({
    text: 'Characters scramble ahead of the animation step',
    speed: 0.7,
    tick: 1,
    step: 1,
    scramble: 3,
    seed: 8, // Scramble 8 random positions ahead
  });

  return <p ref={ref} />;
};

export default HighSeedExample;
```

--------------------------------

### Set Custom Overdrive Character with Unicode Value in React

Source: https://context7.com/tol-is/use-scramble/llms.txt

Sets overdrive to a specific unicode value to use a custom character in overdrive mode. This example demonstrates how to use a pipe character (|) by passing its unicode value.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const CustomOverdriveExample = () => {
  const { ref } = useScramble({
    text: 'Custom overdrive character',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 3,
    seed: 2,
    overdrive: 124, // Pipe character |
  });

  return <p ref={ref} />;
};

export default CustomOverdriveExample;
```

--------------------------------

### Manual Replay and PlayOnMount

Source: https://github.com/tol-is/use-scramble/blob/main/README.md

Demonstrates how to manually trigger the animation and disable it on initial mount.

```APIDOC
## Manual Replay and PlayOnMount

### Description

This section illustrates how to control the animation's playback manually using the `replay` function and how to prevent it from playing automatically when the component mounts using `playOnMount: false`.

### Method

`useScramble` hook configuration

### Endpoint

N/A (Client-side hook)

### Parameters

#### Hook Configuration Parameters

- **playOnMount** (boolean) - Optional (default: `true`) - If set to `false`, the animation will not play automatically when the component first mounts.
- **text** (string) - Required - The text content to be animated.

#### Return Values

- **ref** (React.RefObject) - Ref to be attached to the target element.
- **replay** (function) - A function to manually trigger the animation.

### Request Example

```jsx
import { useScramble } from 'use-scramble';

export const App = () => {
  const { ref, replay } = useScramble({
    text: 'Achilles next, that nimble runner, swift on his feet as the wind',
    playOnMount: false // Animation does not play on mount
  });

  // Trigger replay on mouse events
  return <p ref={ref} onMouseOver={replay} onMouseOut={replay} />;
};
```

### Response

No direct API response, but the hook returns `ref` and `replay`.
```

--------------------------------

### Basic Text Scramble Animation with useScramble Hook

Source: https://context7.com/tol-is/use-scramble/llms.txt

Demonstrates the basic usage of the useScramble hook to animate text with default parameters. It returns a ref for the target element and an optional replay function.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const BasicExample = () => {
  const { ref, replay } = useScramble({
    text: 'Achilles next, that nimble runner, swift on his feet as the wind',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 0,
  });

  return <p ref={ref} />;
};

export default BasicExample;
```

--------------------------------

### useScramble Hook Parameters

Source: https://github.com/tol-is/use-scramble/blob/main/README.md

The useScramble hook accepts a configuration object with various parameters to customize the text animation.

```APIDOC
## useScramble Hook Parameters

### Description

The `useScramble` hook allows for highly customizable text animations within React applications. You can control various aspects of the animation, from speed and timing to the characters used and animation behavior.

### Parameters

#### Hook Configuration Parameters

- **playOnMount** (boolean) - Optional (default: `true`) - Skip the animation on the first mount.
- **text** (string) - Required - Set the text value for the animation. The animation starts automatically when `text` is provided.
- **speed** (number) - Optional (default: `1`) - Controls the internal clock framerate. `1` ticks 60 times per second. `0` pauses the animation.
- **tick** (number) - Optional (default: `1`) - Determines how many ticks pass for each animation redraw. Combined with `speed`, this controls the animation pace.
- **step** (number) - Optional (default: `1`) - Controls the animation step. On each redraw, the algorithm progresses by `step` characters.
- **scramble** (number) - Optional (default: `1`) - Controls how many times each character is randomized. A value of `0` emulates a typewriter effect.
- **seed** (number) - Optional (default: `1`) - Adds randomized characters ahead of the animation step, animating characters across the entire text block.
- **chance** (number) - Optional (default: `1`) - Chance of scrambling a character (0 to 1). `0` means no chance, `1` means 100% chance.
- **range** (number[]) - Optional (default: `[65, 125]`) - Unicode character range to select random characters from.
- **overdrive** (boolean, number) - Optional (default: `true`) - Defaults to the underscore (95) unicode character, or provide a custom unicode value.
- **overflow** (boolean) - Optional (default: `true`) - If `true`, animates over the previous text. If `false`, resets text and restarts animation from an empty string.
- **ignore** (string[]) - Optional (default: `[" "]`) - Ignores specific characters during animation. By default, only spaces are ignored to maintain text shape.
- **onAnimationStart** (function) - Optional - Callback invoked when the animation begins playing.
- **onAnimationEnd** (function) - Optional - Callback invoked when the animation finishes.
- **onAnimationFrame** (function) - Optional - Callback invoked on every redraw.

### Request Example

```jsx
import { useScramble } from 'use-scramble';

export const App = () => {
  const {
    ref,
    replay,
    // other return values if any
  } = useScramble({
    text: 'Achilles next, that nimble runner, swift on his feet as the wind',
    speed: 0.6,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 0,
    playOnMount: true,
    chance: 0.8,
    range: [65, 90], // A-Z
    overdrive: '_',
    overflow: false,
    ignore: [' '],
    onAnimationStart: () => console.log('Animation Started'),
    onAnimationEnd: () => console.log('Animation Ended'),
    onAnimationFrame: () => console.log('Animation Frame'),
  });

  return <p ref={ref} />;
};
```

### Return Values

- **ref** (React.RefObject) - A ref object that must be applied to the target DOM node to enable the animation.
- **replay** (function) - A function that can be called to manually restart the animation.
```

--------------------------------

### useScramble Hook Return Values

Source: https://github.com/tol-is/use-scramble/blob/main/README.md

Illustrates the return values of the useScramble hook, specifically the `ref` for the target element and the `replay` function to restart the animation. This snippet shows how to bind the `replay` function to a click event.

```jsx
const { ref, replay } = useScramble({ text: 'your_text' });

return <p ref={ref} onclick={replay} />;
```

--------------------------------

### Control Scramble Probability with Chance Parameter (React)

Source: https://context7.com/tol-is/use-scramble/llms.txt

Demonstrates how to use the 'chance' parameter in use-scramble to control the probability of individual characters being scrambled. This allows for variable animation effects where only a subset of characters animates.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const ChanceExample = () => {
  const { ref } = useScramble({
    text: 'Only some characters scramble',
    speed: 0.7,
    tick: 1,
    step: 1,
    scramble: 4,
    seed: 2,
    chance: 0.5, // 50% chance each character scrambles
  });

  return <p ref={ref} />;
};

export default ChanceExample;
```

--------------------------------

### Manual Replay Text Scramble Animation

Source: https://context7.com/tol-is/use-scramble/llms.txt

Shows how to disable automatic animation on mount and trigger animations manually using the 'replay' function. This is useful for user-initiated animations.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const ManualReplayExample = () => {
  const { ref, replay } = useScramble({
    text: 'Achilles next, that nimble runner, swift on his feet as the wind',
    playOnMount: false,
    speed: 0.8,
    scramble: 5,
  });

  return (
    <div>
      <p ref={ref} />
      <button onClick={replay}>Replay Animation</button>
    </div>
  );
};

export default ManualReplayExample;
```

--------------------------------

### Typewriter Effect Animation with useScramble

Source: https://context7.com/tol-is/use-scramble/llms.txt

Creates a typewriter effect by setting the 'scramble' parameter to 0, which disables character randomization. This results in text appearing character by character.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const TypewriterExample = () => {
  const { ref } = useScramble({
    text: 'This text appears like a typewriter',
    speed: 0.5,
    tick: 2,
    step: 1,
    scramble: 0, // No scrambling creates typewriter effect
    seed: 0,
  });

  return <p ref={ref} />;
};

export default TypewriterExample;
```

--------------------------------

### Interactive Hover Text Scramble Animation

Source: https://context7.com/tol-is/use-scramble/llms.txt

Implements text scramble animations triggered by mouse events (onMouseOver and onMouseOut). This creates an interactive effect where text animates on hover.

```tsx
import { useScramble } from 'use-scramble';
import React from 'react';

const HoverExample = () => {
  const { ref, replay } = useScramble({
    text: 'Achilles next, that nimble runner, swift on his feet as the wind',
    playOnMount: false,
    speed: 0.7,
    tick: 1,
    step: 2,
    scramble: 3,
  });

  return (
    <p
      ref={ref}
      onMouseOver={replay}
      onMouseOut={replay}
      style={{ cursor: 'pointer' }}
    />
  );
};

export default HoverExample;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.