How to Use the Typing Animation Component

1. Copy the component link.

2. Paste the copied link onto your Framer Canvas.

3. The Typing Animation component will appear on your Canvas.

Customization Options (Right Sidebar)

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

5. 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)

6. Cursor Options:

   • Toggle cursor visibility

   • Customize cursor character (default: "!")

   • Set cursor color

   • Enable/disable cursor blinking

7. 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)

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