Block Text

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Usage

import { BlockText } from "@/components/block-text";

<BlockText words={["Trick", "Treat", "Boo!"]} theme="halloween" className="text-6xl" />

The block works like a 3D cube that keeps rolling forward. Each side has the same soft, glossy surface as Soft Button: lighter at the top, deeper at the bottom, with a gentle shine. A soft light also sweeps across each word every few seconds, tinted with that block's color. Set shimmer={false} to turn it off. The current word tips away over the top while the next one comes up from the bottom, and the loop goes on forever.

Pick a color set with theme: halloween (pumpkin orange, witch purple and black), classic, ocean, candy or sunset. Each theme also sets a matching text color. The themes are exported as BLOCK_TEXT_THEMES.

To use your own colors, pass colors and textColor. They replace the theme. Each word gets the color at the same position in colors, and if there are fewer colors than words, the colors repeat. The block is as wide as the longest word, so it never jumps in size.

Set the size with a text class in className. Everything else scales with it. To tighten or loosen the space around each word, set --block-px (default 0.55em), for example className="[--block-px:0.3em]". When reduced motion is on, the words swap without the roll and the shimmer is off.

Props