UI kit reference

motion/title-text

import { … } from 'zidane-ui'ui/src/motion/title-text.tsx

Components#

`TitleText`Component#

Renders a title that writes itself in when it changes: the new title appears word by word, each word sharpening out of a soft blur. It stays inline text, so a truncating parent keeps working. The first render, a change of scope and reduced or off motion show the title as it is.

TypeScript

function TitleText(props: TitleTextProps): Element

Parameters

Parameters
Name	Type	Description
props	`TitleTextProps`	Component props.

Returns

Element

Props

TitleText props
Name	Type	Description
display?	`ReactNode`	What to show for it, when not the plain text.
scope?	`unknown`	What the title belongs to (a session id): a change of scope never animates.
text	`string`	The title; a change of it is what animates.

ui/src/motion/title-text.tsx:39

Interfaces#

`TitleTextProps`Interface#

Props for TitleText.

TypeScript

interface TitleTextProps

Properties

TitleTextProps properties
Name	Type	Description
display?	`ReactNode`	What to show for it, when not the plain text.
scope?	`unknown`	What the title belongs to (a session id): a change of scope never animates.
text	`string`	The title; a change of it is what animates.

ui/src/motion/title-text.tsx:22