Materializing stream
Streams a sentence word by word, each word condensing from particles sampled from its own glyphs before resolving into crisp text.
Playground
Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.
<PxMaterialize text="Ultracode runs at xhigh effort and lets Claude plan multi-agent workflows on its own, so big tasks fan out across parallel agents." />
Installation
pnpm dlx shadcn@latest add @lumesec/px-materializeFirst timeRegister the @lumesec registry once, or install by URL+
Adds @lumesec to your components.json:
pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.jsonOr skip the setup and install by URL:
npx shadcn@latest add https://elements.lumesec.ai/r/px-materialize.jsonUsage
import { PxMaterialize } from "@/components/lumesec/px-materialize";
export function Example() {
return (
<PxMaterialize />
);
}Behaviour
Streamed text that condenses out of pixel dust. Every word arrives as a cloud of particles sampled from its own glyphs, springs into shape, then resolves into crisp type.
API reference
Attributes
textReact proptextTypestringDefaultUltracode runs at xhigh effort and lets Claude plan multi-agent workflows on its own, so big tasks fan out across parallel agents.The text to stream. Read when the stream (re)starts: after fonts load, on Replay, on restart() and when the width changes.
Events
Events bubble and cross the shadow boundary unless the description says otherwise.
doneReact proponDoneDetail{}Fires once every word has settled into text.
Methods
Call them on the element, for example through a React ref.
restart()Lays out the current text again and replays the stream from the first word.
Properties
text (read-only)TypestringThe text attribute, or the default sentence.
Accessibility
- The canvas has
role="img"and itsaria-labelis set to the full text. - The status line ("Streaming…", "Done · N words") is an
aria-live="polite"region. - "Replay" is a native button.
- Reduced motion: particles start at their final positions, so each word appears in place and fades to text without flying in.
Theming
The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.
This component reads --foreground, --lumesec and --muted-foreground.
To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-fg and --ui-muted.
Notes
- The canvas is a fixed 128px tall with a 23px line height, which fits about five lines; longer text is clipped.
- Text is set in the host's font family at 15px, weight 500.
Related
Was this page helpful?