Authentication is temporarily unavailable while we optimize our infrastructure.

Typer

A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. A React component.

Made by Axyl

Type that assembles itself, one glyph at a time.

Tweak Props

TyperExample

fps

cycles

stagger

startOnView

true

accent

typer.tsx

Loading code…

A stacked headline that cascades in line by line — scroll into view or refresh to replay.

Usage

import { Typer } from '@/components/sora-ui/texts/typer';

export default function Page() {
  return (
    <Typer
      className="font-semibold text-4xl tracking-tight"
      text="Type that assembles itself."
    />
  );
}

Cascade a stacked block, one line per string:

<Typer
  text={['Type that', 'assembles itself,', 'one glyph at a time.']}
  stagger={0.15}
/>

Trigger declaratively with trigger="in", "out", or "inout":

const [trigger, setTrigger] = useState<'in' | 'out'>('in');

<Typer
  text="Declaratively controlled transition."
  trigger={trigger}
/>
<button onClick={() => setTrigger((prev) => (prev === 'in' ? 'out' : 'in'))}>
  Toggle
</button>

Scramble on hover:

<Typer
  text="Hover over this line to scramble."
  triggerOnHover
/>

Narrow the pool of visual states each character rolls through:

<Typer
  text="Only pills and accents."
  variations={['charFill', 'charAccentInverse', 'charBorder']}
/>

Recolor the fills, accent, and borders through props or CSS variables:

<Typer
  text="Themed reveal."
  fg="#0b0b0c"
  bg="#ffffff"
  accent="#6d28d9"
  accentInk="#ffffff"
  border="#6d28d9"
  radius="8px"
/>

Render as a different element and control it imperatively:

const handle = useRef<TyperHandle>(null);

<Typer ref={handle} as="h1" text="Controlled headline." startOnView={false} />
<button onClick={() => handle.current?.replay()}>Replay</button>
<button onClick={() => handle.current?.out()}>Clear</button>

Props

Prop	Type	Default
`text?`	`string \| string[]`	-
`children?`	`string`	-
`trigger?`	`"in" \| "out" \| "inout"`	-
`triggerOnHover?`	`boolean`	`false`
`triggerOnMount?`	`boolean`	`true`
`startOnView?`	`boolean`	`true`
`initVisible?`	`boolean`	`false`
`variations?`	`TyperVariation[]`	`all six variations`
`cycles?`	`number`	`3`
`cycleLength?`	`number`	`0.5`
`fps?`	`number`	`20`
`delay?`	`number`	`0`
`stagger?`	`number`	`0.15`
`spaceWidth?`	`string`	`"0.5em"`
`fg?`	`string`	`theme --foreground`
`bg?`	`string`	`theme --background`
`accent?`	`string`	`theme --accent`
`accentInk?`	`string`	`theme --foreground`
`border?`	`string`	`theme --foreground`
`radius?`	`string`	`"5px"`
`onComplete?`	`() => void`	-
`as?`	`React.ElementType`	`"div"`
`ref?`	`Ref<TyperHandle>`	-
`className?`	`string`	-

When prefers-reduced-motion: reduce is set, the reveal loop is skipped entirely: each line mounts fully visible as plain text with no state ripple, matching the CSS reduced-motion fallback. Imperative handle methods (play(), replay(), in(), out(), reset()) still resolve safely without driving animations.

Built by Axyl. A motion-first component registry for React.

Last updated: 9/14/2026

Typer

A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. A React component.

Made by Axyl

Type that assembles itself, one glyph at a time.

Tweak Props

TyperExample

fps

cycles

stagger

startOnView

true

accent

typer.tsx

Loading code…

A stacked headline that cascades in line by line — scroll into view or refresh to replay.

Installation

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/texts/typer.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

typer.tsx

Usage

import { Typer } from '@/components/sora-ui/texts/typer';

export default function Page() {
  return (
    <Typer
      className="font-semibold text-4xl tracking-tight"
      text="Type that assembles itself."
    />
  );
}

Cascade a stacked block, one line per string:

<Typer
  text={['Type that', 'assembles itself,', 'one glyph at a time.']}
  stagger={0.15}
/>

Trigger declaratively with trigger="in", "out", or "inout":

const [trigger, setTrigger] = useState<'in' | 'out'>('in');

<Typer
  text="Declaratively controlled transition."
  trigger={trigger}
/>
<button onClick={() => setTrigger((prev) => (prev === 'in' ? 'out' : 'in'))}>
  Toggle
</button>

Scramble on hover:

<Typer
  text="Hover over this line to scramble."
  triggerOnHover
/>

Narrow the pool of visual states each character rolls through:

<Typer
  text="Only pills and accents."
  variations={['charFill', 'charAccentInverse', 'charBorder']}
/>

Recolor the fills, accent, and borders through props or CSS variables:

<Typer
  text="Themed reveal."
  fg="#0b0b0c"
  bg="#ffffff"
  accent="#6d28d9"
  accentInk="#ffffff"
  border="#6d28d9"
  radius="8px"
/>

Render as a different element and control it imperatively:

const handle = useRef<TyperHandle>(null);

<Typer ref={handle} as="h1" text="Controlled headline." startOnView={false} />
<button onClick={() => handle.current?.replay()}>Replay</button>
<button onClick={() => handle.current?.out()}>Clear</button>

Props

Prop	Type	Default
`text?`	`string \| string[]`	-
`children?`	`string`	-
`trigger?`	`"in" \| "out" \| "inout"`	-
`triggerOnHover?`	`boolean`	`false`
`triggerOnMount?`	`boolean`	`true`
`startOnView?`	`boolean`	`true`
`initVisible?`	`boolean`	`false`
`variations?`	`TyperVariation[]`	`all six variations`
`cycles?`	`number`	`3`
`cycleLength?`	`number`	`0.5`
`fps?`	`number`	`20`
`delay?`	`number`	`0`
`stagger?`	`number`	`0.15`
`spaceWidth?`	`string`	`"0.5em"`
`fg?`	`string`	`theme --foreground`
`bg?`	`string`	`theme --background`
`accent?`	`string`	`theme --accent`
`accentInk?`	`string`	`theme --foreground`
`border?`	`string`	`theme --foreground`
`radius?`	`string`	`"5px"`
`onComplete?`	`() => void`	-
`as?`	`React.ElementType`	`"div"`
`ref?`	`Ref<TyperHandle>`	-
`className?`	`string`	-

Accessibility

Built by Axyl. A motion-first component registry for React.

Last updated: 9/14/2026

Typer

A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. A React component.

Made by Axyl

Type that assembles itself, one glyph at a time.

Tweak Props

TyperExample

fps

cycles

stagger

startOnView

true

accent

typer.tsx

Loading code…

A stacked headline that cascades in line by line — scroll into view or refresh to replay.

Installation

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/texts/typer.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

typer.tsx

Usage

import { Typer } from '@/components/sora-ui/texts/typer';

export default function Page() {
  return (
    <Typer
      className="font-semibold text-4xl tracking-tight"
      text="Type that assembles itself."
    />
  );
}

Cascade a stacked block, one line per string:

<Typer
  text={['Type that', 'assembles itself,', 'one glyph at a time.']}
  stagger={0.15}
/>

Trigger declaratively with trigger="in", "out", or "inout":

const [trigger, setTrigger] = useState<'in' | 'out'>('in');

<Typer
  text="Declaratively controlled transition."
  trigger={trigger}
/>
<button onClick={() => setTrigger((prev) => (prev === 'in' ? 'out' : 'in'))}>
  Toggle
</button>

Scramble on hover:

<Typer
  text="Hover over this line to scramble."
  triggerOnHover
/>

Narrow the pool of visual states each character rolls through:

<Typer
  text="Only pills and accents."
  variations={['charFill', 'charAccentInverse', 'charBorder']}
/>

Recolor the fills, accent, and borders through props or CSS variables:

<Typer
  text="Themed reveal."
  fg="#0b0b0c"
  bg="#ffffff"
  accent="#6d28d9"
  accentInk="#ffffff"
  border="#6d28d9"
  radius="8px"
/>

Render as a different element and control it imperatively:

const handle = useRef<TyperHandle>(null);

<Typer ref={handle} as="h1" text="Controlled headline." startOnView={false} />
<button onClick={() => handle.current?.replay()}>Replay</button>
<button onClick={() => handle.current?.out()}>Clear</button>

Props

Prop	Type	Default
`text?`	`string \| string[]`	-
`children?`	`string`	-
`trigger?`	`"in" \| "out" \| "inout"`	-
`triggerOnHover?`	`boolean`	`false`
`triggerOnMount?`	`boolean`	`true`
`startOnView?`	`boolean`	`true`
`initVisible?`	`boolean`	`false`
`variations?`	`TyperVariation[]`	`all six variations`
`cycles?`	`number`	`3`
`cycleLength?`	`number`	`0.5`
`fps?`	`number`	`20`
`delay?`	`number`	`0`
`stagger?`	`number`	`0.15`
`spaceWidth?`	`string`	`"0.5em"`
`fg?`	`string`	`theme --foreground`
`bg?`	`string`	`theme --background`
`accent?`	`string`	`theme --accent`
`accentInk?`	`string`	`theme --foreground`
`border?`	`string`	`theme --foreground`
`radius?`	`string`	`"5px"`
`onComplete?`	`() => void`	-
`as?`	`React.ElementType`	`"div"`
`ref?`	`Ref<TyperHandle>`	-
`className?`	`string`	-

Accessibility

Built by Axyl. A motion-first component registry for React.

Last updated: 9/14/2026

Typer

A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. A React component.

Made by Axyl

Type that assembles itself, one glyph at a time.

Tweak Props

TyperExample

fps

cycles

stagger

startOnView

true

accent

typer.tsx

Loading code…

A stacked headline that cascades in line by line — scroll into view or refresh to replay.

Installation

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/texts/typer.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

typer.tsx

Usage

import { Typer } from '@/components/sora-ui/texts/typer';

export default function Page() {
  return (
    <Typer
      className="font-semibold text-4xl tracking-tight"
      text="Type that assembles itself."
    />
  );
}

Cascade a stacked block, one line per string:

<Typer
  text={['Type that', 'assembles itself,', 'one glyph at a time.']}
  stagger={0.15}
/>

Trigger declaratively with trigger="in", "out", or "inout":

const [trigger, setTrigger] = useState<'in' | 'out'>('in');

<Typer
  text="Declaratively controlled transition."
  trigger={trigger}
/>
<button onClick={() => setTrigger((prev) => (prev === 'in' ? 'out' : 'in'))}>
  Toggle
</button>

Scramble on hover:

<Typer
  text="Hover over this line to scramble."
  triggerOnHover
/>

Narrow the pool of visual states each character rolls through:

<Typer
  text="Only pills and accents."
  variations={['charFill', 'charAccentInverse', 'charBorder']}
/>

Recolor the fills, accent, and borders through props or CSS variables:

<Typer
  text="Themed reveal."
  fg="#0b0b0c"
  bg="#ffffff"
  accent="#6d28d9"
  accentInk="#ffffff"
  border="#6d28d9"
  radius="8px"
/>

Render as a different element and control it imperatively:

const handle = useRef<TyperHandle>(null);

<Typer ref={handle} as="h1" text="Controlled headline." startOnView={false} />
<button onClick={() => handle.current?.replay()}>Replay</button>
<button onClick={() => handle.current?.out()}>Clear</button>

Props

Prop	Type	Default
`text?`	`string \| string[]`	-
`children?`	`string`	-
`trigger?`	`"in" \| "out" \| "inout"`	-
`triggerOnHover?`	`boolean`	`false`
`triggerOnMount?`	`boolean`	`true`
`startOnView?`	`boolean`	`true`
`initVisible?`	`boolean`	`false`
`variations?`	`TyperVariation[]`	`all six variations`
`cycles?`	`number`	`3`
`cycleLength?`	`number`	`0.5`
`fps?`	`number`	`20`
`delay?`	`number`	`0`
`stagger?`	`number`	`0.15`
`spaceWidth?`	`string`	`"0.5em"`
`fg?`	`string`	`theme --foreground`
`bg?`	`string`	`theme --background`
`accent?`	`string`	`theme --accent`
`accentInk?`	`string`	`theme --foreground`
`border?`	`string`	`theme --foreground`
`radius?`	`string`	`"5px"`
`onComplete?`	`() => void`	-
`as?`	`React.ElementType`	`"div"`
`ref?`	`Ref<TyperHandle>`	-
`className?`	`string`	-

Accessibility

Built by Axyl. A motion-first component registry for React.

Last updated: 9/14/2026

Typer

Installation

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Props

Accessibility

On this page

Typer

Installation

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Props

Accessibility

On this page

Typer

Installation

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Props

Accessibility

On this page

Typer

Installation

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Props

Accessibility

On this page