TypeFx

Updated: October 14, 2025

TypeFx creates a realistic typewriter animation that types out text character-by-character. When multiple words are provided, it automatically types, holds, deletes, and cycles through them.

TypeFx

Build |

<Row gap="8" vertical="center">
<Text variant="heading-default-l">
  Build
</Text>
<TypeFx
  words={["amazing products", "stunning websites", "modern apps"]}
  speed={80}
  hold={2000}
  trigger="instant"
/>
</Row>

Single word

TypeFx can also display a single word that types out once without looping.

Single word

|

<TypeFx
words="Welcome to the future"
speed={100}
delay={500}
trigger="instant"
/>

Custom trigger

Use the custom trigger to programmatically control when the typing animation starts.

Custom trigger

|

function TypeFxCustomExample() {
const triggerFnRef = useRef<(() => void) | null>(null);

return (
  <>
    <TypeFx
      words={["Click the button", "to start typing", "this animation"]}
      speed={60}
      hold={1500}
      trigger="custom"
      onTrigger={(fn) => {
        triggerFnRef.current = fn;
      }}
    />
    <Button onClick={() => triggerFnRef.current?.()}>
      Start typing
    </Button>
  </>
);
}

API reference

Prop	Type	Default
wordsrequired One string to type, or several to cycle through.	stringstring[]	—
speed Milliseconds per character.	number	100
delay Milliseconds before typing starts.	number	0
hold Milliseconds a finished word stays before the next one.	number	2000
trigger "custom" waits for the function handed to onTrigger.	instantcustom	instant
onTrigger Receives a function that starts it, when trigger is "custom".	(triggerFn: () => void) => void	—
loop Cycle back to the first word instead of stopping.	boolean	true
children Rendered after the typed text.	React.ReactNode	—
…and every TextProps prop	inherited	—

EffectsShineFx

EffectsTiltFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club