Componentticket-stub0.49 KB gzipZero dependencies

WaxSeal

Circular wax blob with a pressed-in monogram entrance and an optional cracked break state.

Preview

Live Preview

Installation

Tokens guide →

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

npx bigbullui add wax-seal

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { WaxSeal } from "@/components/ui/wax-seal";

<WaxSeal letter="B" onBreak={() => setOpen(false)} />

Usage guidance

Use WaxSeal when a ticket stub surface needs Circular wax blob with a pressed-in monogram entrance and an optional cracked break state. Keep props minimal and prefer composition with sibling stubs.

Avoid WaxSeal for long form flows or dense data grids where a dedicated layout block fits better.

Source code

wax-seal.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 WaxSealProps {
  letter: string;
  broken?: boolean;
  onBreak?: () => void;
}

export function WaxSeal({ letter, broken = false, onBreak }: WaxSealProps) {
  return (
    <div
      className={cn(
        "relative size-24 rounded-full border border-dashed border-border/50 bg-card motion-reduce:transition-none",
        "group"
      )}
    >
      <div className="absolute inset-0 rounded-full bg-gradient-to-b from-accent to-destructive opacity-80 filter blur-sm" />
      <div
        className="absolute inset-0 flex items-center justify-center text-2xl font-bold text-white"
      >
        {letter}
      </div>
      <div className="absolute inset-0 ring-2 ring-white/20 blur-md" />
      <style>{`
        @keyframes waxSealPress {
          from { transform: scale(1); }
          to { transform: scale(0.9) rotate(-5deg); }
        }
      `}</style>
    </div>
  );
}

Props

Prop	Type	Description
letter	string
broken?	boolean
onBreak?	() => void