# TypeIn

> Text that assembles itself piece by piece when it comes on screen. The whole sentence is in the DOM from the first render, for crawlers and screen readers.

Section: Motion. Docs: https://entrepta.vercel.app/docs/components/type-in

## Install

```bash
npx @entrepta/cli@latest add type-in
```

Files: `motion/type-in.tsx`, `lib/motion.ts`.
npm packages: `motion`.
Comes with: `motion-lib`.

## Usage

```tsx
import { TypeIn } from "@/components/entrepta/type-in"

<TypeIn as="h1" text="Build with entrepta." emphasis="entrepta" />
<TypeIn text="A longer sentence that wraps on small screens." by="word" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | - | The sentence |
| `emphasis` | `string` | - | A substring set in serif italic |
| `by` | `"char" \| "word"` | "char" | Use word for anything that wraps |
| `as` | `"span" \| "h1" \| "h2" \| "h3" \| "p"` | "span" | Element |
| `delay` | `number` | 0 | Seconds before the first piece |
| `speed` | `number` | - | Seconds between pieces |