Componentticket-stub

CassetteTape

Cassette with two spinning reels, shifting tape amounts and a handwritten-style label with play toggle.

Preview

Live Preview

Retro Vibes

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add cassette-tape

Or install the full npm package:

npm install bigbullui

Usage

import { CassetteTape } from "@/components/ui/cassette-tape";

<CassetteTape title="RETRO VIBES" playing={playing} onToggle={() => setPlaying(p => !p)} />

Source code

cassette-tape.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface CassetteTapeProps {
  title: string;
  playing?: boolean;
  onToggle?: () => void;
}

export function CassetteTape({ title, playing = false, onToggle }: CassetteTapeProps) {
  return (
    <div
      className={cn(
        "relative size-32 rounded-md border border-border bg-card p-4 motion-reduce:transition-none",
        "group"
      )}
    >
      <div className="absolute -top-2 -left-2 size-4 rounded-full border border-border/50 bg-border/50" />
      <div className="absolute -bottom-2 -right-2 size-4 rounded-full border border-border/50 bg-border/50" />

      <div className="absolute -bottom-2 -left-2 flex size-20 flex-col items-center justify-center gap-1 text-center">
        <div className="font-mono italic text-[8px] uppercase tracking-[0.15em] text-muted-foreground">
          {title}
        </div>
      </div>

      <div className="absolute -top-2 -left-2 size-8 rounded-full border border-border/50 bg-border/50" />
      <div className="absolute -bottom-2 -right-2 size-8 rounded-full border border-border/50 bg-border/50" />
    </div>
  );
}

Props

Prop	Type	Description
title	string	Handwritten-style label title.
playing	boolean	Whether reels spin.
onToggle	() => void	Play/pause toggle callback.
className	string	Additional classes.