Scramble Hover

A button that displays text and scrambles it on hover. It uses random characters to create a scrambling effect. It works on hover-enabled devices and respects system motion preferences. Use it for interactive text effects.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/scramble-hover

npx layro-cli add @educlopez/scramble-hover

npx layro-cli add @educlopez/scramble-hover

bunx layro-cli add @educlopez/scramble-hover

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import type React from "react";
import { useEffect, useRef, useState } from "react";

export interface ScrambleHoverProps {
  children: string;
  className?: string;
  duration?: number; // total animation duration in ms
  speed?: number; // interval between scrambles in ms
}

const CHARACTERS =
  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=<>?".split(