Primitive / Moleculebeta

Gooey Text Reveal

Heading whose words melt in through a shared SVG goo filter, or morph between phrases.

Edit on GitHub

pnpm dlx @glinui/cli@latest add gooey-text-reveal

New release

Words blur in through one shared goo filter, then settle into crisp type.

Installation

Install from

pnpm dlx @glinui/cli@latest add gooey-text-reveal

Prefer the package?

Usage

Our own design, written from a behavior spec. One SVG filter (a small gaussian blur plus an alpha contrast matrix) is shared by the whole stage, and each word fades and blurs in with a staggered delay, so the soft edges merge like liquid before settling.

The filter is attached only while an animation runs and is removed afterwards, so settled type is always crisp. Every instance gets its own filter id from `useId`.

Pass an array to `text` to morph between phrases in a loop (the loop pauses offscreen and in hidden tabs). SVG filters on large HTML text cost GPU time: keep it to headings and avoid several large instances in the viewport at once. Safari renders CSS filters that reference SVG filters on HTML but can soften text mid animation, which is expected.

Variants

Type treatments for each style.

default

plain

glass

<GooeyTextReveal variant="plain" trigger="mount" text="Liquid type" />

States

Morph between phrases, or tune the blob size and stagger.

Morph between phrases

blur 20, stagger 160ms

<GooeyTextReveal text={["Design", "Build", "Ship"]} />
<GooeyTextReveal text="Bigger blobs" blur={20} stagger={160} />

In a layout

A hero section with the reveal as the headline.

Real text stays in the page for search and screen readers.

<section>
  <GooeyTextReveal as="h2" text="Ship the interface your users remember" />
  <Button>Get started</Button>
</section>

Accessibility

The full text is the element's accessible name through `aria-label`; the animated words and the SVG are `aria-hidden`.
Array text is announced as a comma separated list of every phrase.
The heading level is yours to choose with `as`.
Animation pauses offscreen and while the tab is hidden.

ARIA Attributes

`aria-label` on the root with the full text
`aria-hidden="true"` on the stage and the filter SVG

Reduced Motion

Motion subtle swaps the goo for a plain opacity fade. Under motion none or prefers-reduced-motion the component renders its static frame. The final text is shown with no filter.

Affected properties

blurtranslateopacitygoo filterphrase morph loop

API Reference

Prop	Type	Required	Default	Description
`text`	`string \| string[]`	Yes	`-`	A string reveals word by word. An array of two or more strings morphs between phrases.
`as`	`GooeyTag`	No	`h2`	Element to render.
`variant`	`"default" \| "plain" \| "glass"`	No	`default`	Type treatment. `glass` adds a soft halo for translucent backdrops.
`stagger`	`number`	No	`90`	Milliseconds between words (reveal).
`duration`	`number`	No	`900`	Milliseconds for one word reveal or one morph.
`hold`	`number`	No	`2200`	Milliseconds each phrase rests before morphing (array text).
`blur`	`number`	No	`12`	Starting blur in pixels. Larger values give fatter blobs.
`trigger`	`"mount" \| "view"`	No	`view`	Start on mount or when scrolled into view (string text).
`once`	`boolean`	No	`true`	Reveal once, or replay each time it re-enters the viewport.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { GooeyTextReveal } from "@glinui/ui"

Source Files

gooey-text-reveal.tsx motion-engine.tsx use-playback-active.ts

gooey-text-reveal.test.tsxtest

Dependencies

@glinui/ui@glinui/motionclass-variance-authority

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/gooey-text-reveal.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

GooeyTextRevealProps