Text treatments

Pro

Text effects such as scramble and highlight for emphasis.

Installs components/ui/text-treatments.tsxDepends on none beyond ReactMotion honours reduced motion

pnpm dlx shadcn@latest add @caliper/text-treatments

Ship without the late-night rollbacks, and keep the audit trail your security team asks for. Manual approvals.

Plan

When to use #

Use it for

Drawing attention to a word in a heading.
A short, one-off reveal.

Skip it when

Body copy.
More than one effect on a page.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/text-treatments

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from TextScramble and Highlight.

example.tsx

import { TextScramble, Highlight } from "@/components/ui/text-treatments"

The worked example comes with Pro

The 30-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

TextScramble

component

PropTypeDefault

text *string—

hoverbooleantrue

durationnumber800

classNamestring—

Highlight

component

PropTypeDefault

children *ReactNode—

variant"marker" | "underline" | "strike""marker"

tone1 | 2 | 3 | 4 | 5 | 61