Math Scramble

Heroes 8

$Math Scramble preview$ Preview

About

Centred lines of quiet grey words that break into coloured math symbols, some in thin boxes, wherever the pointer passes, then settle back letter by letter.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Math Scramble to your project and fits it to your theme.

Code

How Math Scramble is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { MathScramble } from "@/components/ui/math-scramble";

/** Math Scramble filling the preview. Move the pointer over the words to scramble them. */
export default function MathScrambleDemo() {
  return (
    <main className="relative h-screen min-h-[340px] w-full overflow-hidden" style={{ backgroundColor: "#000000" }}>
      <MathScramble autoplay style={{ width: "100%", height: "100%" }} />
    </main>
  );
}