# Materializing stream
> Streams a sentence word by word, each word condensing from particles sampled from its own glyphs before resolving into crisp text.
- Element: `<px-materialize>`
- React: `import { PxMaterialize } from "@/components/lumesec/px-materialize"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-materialize.json
- Page: https://elements.lumesec.ai/components/pixel-lab/materialize



Live preview: https://elements.lumesec.ai/view/px-materialize

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-materialize.js"></script>

<px-materialize></px-materialize>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/px-materialize
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-materialize.json
```

## Usage

React:

```tsx
import { PxMaterialize } from "@/components/lumesec/px-materialize";

export function Example() {
  return (
    <PxMaterialize />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-materialize.js"></script>

<px-materialize></px-materialize>
```

## 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

| Attribute | React prop | Type     | Default                                                                                                                              | Description                                                                                                                  |
| --------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| `text`    | `text`     | `string` | `Ultracode 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.

| Event  | React prop | Detail | Description                                  |
| ------ | ---------- | ------ | -------------------------------------------- |
| `done` | `onDone`   | `{}`   | Fires once every word has settled into text. |

### Methods

Call them on the element, for example through a React ref.

| Method      | Description                                                                   |
| ----------- | ----------------------------------------------------------------------------- |
| `restart()` | Lays out the current `text` again and replays the stream from the first word. |

### Properties

| Property           | Type     | Description                                    |
| ------------------ | -------- | ---------------------------------------------- |
| `text` (read-only) | `string` | The `text` attribute, or the default sentence. |

## Accessibility

* The canvas has `role="img"` and its `aria-label` is 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](/docs/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.