React Text

ARWES provides a few text rendering animation effects. Make sure to read the Text Fundamentals for context.

`<Text>`

The <Text> component can be used to animate simple strings to complex nested HTML elements. It uses the <Animator> component to control the animation flow. If no animator is found, the content is rendered without effects.

import { Animator, Text } from '@arwes/react'

<Animator>
  <Text>
    Text content.
  </Text>
</Animator>

By default, it will dynamically update the parent animator duration settings to match the length of the text content, unless configured with the prop fixed={true} to use the already provided duration by the animator.

Sequence

It can have "manager" effect, the default is 'sequence' which renders character by character forward-to-backward on animator state changes.

import { Animator, Text } from '@arwes/react'

// By default, the duration provided by the animator will be the maximum based on
// the dynamic calculation of the text length.
<Animator duration={{ enter: 2 }}>
  <Text
    as='div' // 'p' by default
    // manager='sequence'
    // Since it has an internal HTML element, pass the 'style: CSSProperties' to it.
    contentStyle={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
    // It also accepts 'contentClassName: string'.
  >
    <h3>Nebula</h3>
    <p>A <b>nebula</b> (<a href="/wiki/Latin_language">Latin</a> for 'cloud, fog'; ...</p>
    <p>Nebulae are often star-forming regions, such as in the ...</p>
    <p>In these regions, the formations of gas, dust, and other materials "clump" together to ...</p>
    <p>The remaining material is then thought to form <a href="/wiki/Planet">planets</a> ...</p>
  </Text>
</Animator>

If the blinking sub-effect is used, the end of line blinking character, there should not be <br> elements since it will disturb the animation.

Dechiper

The manager 'decipher' can be used to decrypt and encrypt the text content on animator state change. This type of animation is recommended for short, or centered, or monospace typograhy texts.

import { Animator, Text } from '@arwes/react'

<Animator duration={{ enter: 1, exit: 1 }}>
  <Text className='text-decipher' manager='decipher' fixed>
    Pillars of Creation
  </Text>
</Animator>

Check out the Playground for more examples.