How to Use the Typing Animation Component

• Copy the component link.

• Paste the copied link onto your Framer Canvas.

• The Typing Animation component will appear on your Canvas.

Customization Options

• Words: Add the text strings you want to display in sequence. Default is ["Eat", "Sleep", "Code", "Repeat"].

• Font Settings:

  • Choose font style, weight, and family

  • Set text color

  • Select HTML tag (p, h1-h6, span)

  • Adjust padding

  • Set horizontal alignment (Left, Center, Right)

  • Set vertical alignment (Left, Center, Right)
    
    

• Cursor Options:

  • Toggle cursor visibility

  • Customize cursor character (default: "!")

  • Set cursor color

  • Enable/disable cursor blinking
    
    

• Animation Settings:

  • RepeatType: Choose between Infinite loop or Specific number of repetitions

  • RepeatValue: Set number of repetitions (visible when RepeatType is "Specific")

  • Type Speed: Adjust character typing speed in milliseconds (default: 80ms)

  • Delete Speed: Set character deletion speed in milliseconds (default: 50ms)

  • Delay: Configure pause time between words in milliseconds (default: 1000ms)
    
    

• Preview your animation to ensure it matches your design requirements.