Handle Reel

Buttons 4

About

A kinetic slot-machine style reel that tumbles vertically through a list of usernames or handles past a fixed prefix before decelerating and settling on a target name, with an optional inline-editable landing slot.

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

Code

How Handle Reel 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 { HandleReel } from "@/components/ui/handle-reel";
import { Button } from "@/components/ui/handle-reel-utils/button-squircle";
import { IconRotateDot } from "@tabler/icons-react";

const CREATIVE_ROLES = [
  "engineer",
  "designer",
  "architect",
  "builder",
  "founder",
  "creator",
  "developer",
  "maker",
];

export default function Demo() {
  const [trigger, setTrigger] = React.useState(0);
  const [finalRole, setFinalRole] = React.useState("creator");

  const handleRoll = () => {
    const nextRoles = CREATIVE_ROLES.filter((r) => r !== finalRole);
    const randomNext = nextRoles[Math.floor(Math.random() * nextRoles.length)];
    setFinalRole(randomNext);
    setTrigger((t) => t + 1);
  };

  return (
    <div className="flex h-full min-h-130 w-full flex-col items-center justify-center gap-8 bg-background p-6">
      <HandleReel
        prefix="ryna.me/"
        names={CREATIVE_ROLES}
        finalName={finalRole}
        trigger={trigger}
        highlightColor="oklch(0.7 0.2 150)"
      />

      <Button
        variant="default"
        size="sm"
        whileTap
        asPointer
        onClick={handleRoll}
        className="flex items-center gap-2"
      >
        <IconRotateDot size={16} />
        <span>Roll Handle</span>
      </Button>
    </div>
  );
}