Skip to content
caliper ui docs
DemoSign inGet Pro

Components

Sparkle text

Text with small four-point stars that bloom, turn and fade around it at uneven moments, for the one word that should feel special: a reward, a new plan, a finished setup.

Free
pnpm dlx shadcn@latest add @caliper/sparkle-text

Upgrade complete

Receipt sent to billing@ostra.co

You’re on Team now.

Ten seats, the shared library and every Pro part are ready for your workspace.

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

When to use

Use it for

  • A single word or short phrase in a celebration or upgrade moment.
  • Marketing headlines with one highlighted word.

Skip it when

  • Body text, buttons and anything people read for long.
  • More than one place on a page.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Uneven rhythm
A new star appears every 90 to 480ms at a random place and size, which reads as glitter instead of a loop.
Only while seen
Stars stop while the text is off screen and never appear under reduced motion; the text itself is all that is read.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/sparkle-text

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

This is the code behind the preview above.

example.tsx
import { type ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { SparkleText } from "@/components/ui/sparkle-text"

function Panel({ title, context, className = "max-w-md", children }: { title: string; context: string; className?: string; children: ReactNode }) {
  return (
    <section className={`grid w-full gap-5 rounded-overlay border border-border bg-background p-6 shadow-resting max-sm:p-4 ${className}`}>
      <div className="grid gap-1">
        <p className="font-medium">{title}</p>
        <p className="text-sm text-muted-foreground">{context}</p>
      </div>
      {children}
    </section>
  );
}

const CONFETTI = ["oklch(0.8 0.15 82)", "oklch(0.7 0.18 2)", "oklch(0.68 0.17 295)", "oklch(0.7 0.14 230)"];

export function SparkleTextDemo() {
  return (
    <Panel title="Upgrade complete" context="Receipt sent to billing@ostra.co" className="max-w-sm">
      <p className="text-3xl font-semibold tracking-tight">
        You’re on <SparkleText color={CONFETTI}>Team</SparkleText> now.
      </p>
      <p className="text-sm text-muted-foreground">Ten seats, the shared library and every Pro part are ready for your workspace.</p>
      <Button className="justify-self-start">Invite your team</Button>
    </Panel>
  );
}

API reference

SparkleText

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
disabledbooleanfalseTurns the sparkles off without changing the text.

Accessibility

It is built on native elements and keeps aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.

All Text motion examples