Motion

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.

view .md

Preview

Build with entrepta.

Installation

terminal

bash

npx @entrepta/cli@latest add type-in

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

type-in.tsx

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