---
title: Text
description: "Shows or hides a block of laid-out text tiles."
---

```tsx
import { Text, textTiles } from 'filedom';

const banner = textTiles(['YOU WIN'], { kind: 'sliced' }, iconSize);

<Text tiles={banner} at={won ? { x: 480, y: 320 } : null} />
```

Render Text inside a [Stage](/docs/reference/components/stage). Text only handles layout.
[textTiles](/docs/reference/react-api#asset-authoring-toolkit) decides what the tiles
are, and `Text` places them around an origin as ordinary [Sprites](/docs/reference/components/sprite).

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `tiles` | `TextBlock` | - | A laid-out block from textTiles or stripTiles. |
| `at` | `StagePoint \| null` | - | Block center; null hides it. |
| `anchor?` | `"center" \| "bottom"` | - | What `at` names: the block center (default) or the center of its bottom edge. |
| `onDemand?` | `boolean` | - | Create the tiles on show so they draw over user-dragged icons, instead of minting them at mount. See Sprite. |

## Shapes

`textTiles(lines, shape, iconSize)` returns `{ tiles, width, height }`. The
`glyphs` and `sliced` shapes uppercase the text. The shape sets how large the
text reads and how many files it costs:

| Shape | Tiles | Reads |
| --- | --- | --- |
| `{ kind: 'sliced', charsPerTile? }` | one per 3 characters, or `charsPerTile` | a kerned line, used for banners and help |
| `{ kind: 'glyphs', boxed? }` | one per character | largest and widest |
| `{ kind: 'grid', charsPerCell, linesPerCell, paintedFraction? }` | one per cell | a dense block, fewest files |

`stripTiles(rows, iconSize)` lays out tiles you baked yourself, one array per line.

## Tiles own their files

Every tile is a [`static` sprite](/docs/reference/components/sprite#where-a-sprites-file-comes-from)
with one file of its own, minted at mount in the order the tiles are written
(row-major). A block's overlaps, such as the boxed band or the grid's bleed,
depend on that creation order. Pooled files of one face are created together and
handed out in any order, so a repeated letter or a blank cell could get an older
file and have its ink covered by a neighbour.

Text needs no `prebake` entry, since `prebake` only sizes pooled piles.

`onDemand` controls z. Static tiles are minted at mount, so an icon the user
drags later draws over them. On-demand tiles are created at their positions on
every show (about 15ms a tile), so they are the newest files on the desktop.
Use `onDemand` in drag-driven games. With `at={null}`, static tiles wait at the
park and on-demand tiles are deleted.

## Anchoring

`anchor="bottom"` puts the center of the block's bottom edge on `at`. Use it to
pin a help panel clear of a play area:

```tsx
<Text
  tiles={textTiles(lines, { kind: 'grid', charsPerCell: 3, linesPerCell: 2 }, iconSize)}
  anchor="bottom"
  at={showHelp ? { x: width / 2, y: height - iconSize * 0.7 } : null}
/>
```