Matchlight

New

Strike a match and carry its flame to read words hidden in the dark

$ npx @hritik-sharmaa/repeat-ui add text-effect-matchlight
Category
Text Effect
Added
Nov 2, 2026
Version
1.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview

Some things are only seen up close

Strike the match on the box

Customize
34px
460px
360px
150px
9s
0.035
import TextEffectMatchlight from "@/components/repeat-ui/text-effect-matchlight/preview";

<TextEffectMatchlight text="Some things are only seen up close" boxLabel="Repeat" />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add text-effect-matchlight --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/text-effect-matchlight/.

    import TextEffectMatchlight from "@/components/repeat-ui/text-effect-matchlight/preview";

export default function Page() {
  return <TextEffectMatchlight />;
}

Props

PropTypeDefaultDescription
textstring"Some things are only seen up close"The words hidden in the dark.
fontSizenumber34Text size in pixels.
widthnumber460Width in pixels.
heightnumber360Height in pixels.
lightRadiusnumber150How far the flame lights, in pixels.
burnTimenumber9Seconds a match burns before it goes out.
lightColorstring"#ffa94d"Colour of the flame and its glow.
textColorstring"#fff1d6"Colour of the words where the light is brightest.
backgroundstring"#0b0908"Colour of the dark room.
boxColorstring"#b4332a"Colour of the matchbox.
boxLabelstring"Repeat"Word printed on the matchbox.
hiddenOpacitynumber0.035How visible the words are in the dark, from 0 (not at all) to 1.
onIgnite() => void-Called when a match is struck.
onBurnOut() => void-Called when a match burns out.
classNamestring""Extra classes for the root element.

More text effect

See all
Flipping TextText that flips between different words
Flow TextSmooth flowing text animation
Pop TextText that pops with scale animations