Brick Digits

Component 3

About

A big numeral built from stacked black bricks that slide, split and merge row by row to morph between digits.

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

Code

How Brick Digits 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 { BrickDigits } from "@/components/ui/brick-digits"

export default function BrickDigitsDemo() {
  return (
    <div className="relative h-screen min-h-[560px] w-full" style={{ background: "#a1bdd1" }}>
      <BrickDigits labels={false} />
    </div>
  )
}