Type It

Potion Pack addon stack

Add animated, typed out phrases to your site. A great way to create interest within your banners, for instance.

  • Add up to 8 different phrases to the rotation of phrases
  • Loop through phrases or make it a once through event
  • Opt to shuffle the phrase order
  • Include pre- and post-phrase text
  • Style it to match your site
  • Set the typing and backspace speeds independently
  • Add a start and pause delay to you phrase rotation
  • Set the header tage type for your phrases
  • Choose to bold the phrase to make it stand out

Example

Below is a Type It stack that rotates through a series of phrases to give you an idea of how the stack works. It is a great addition to a banner.

Build the best website ever!

Using Type It

General

Dark Mode
When enabled you'll be given additional options throughout the Type It stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.

  • Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.

Typing Speed
This is the speed at which the faux typing animation occurs.

Backspace Speed
The speed at which the faux backspace animation occurs.

Start Delay
The amount of time to pause before the typing animation begins.

Pause Between
The amount of time for the stack to pause between finishing the typing animation and when the backspace animation begins.

Loop Phrases
When enabled the phrases will restart again at the beginning. If disabled when the last phrase is reached it will stop and no longer animate through the other phrases. The last phrase will been shown from here on out until the page is loaded again.

Show Cursor
Turn this feature on to show the faux cursor when the typing and backspace animations occur.

Shuffle Phrase Order
Randomize the order in which your phrases are shown.

Tag
Choose which tag should be associated with your phrase. HTML uses a series of specialized tags relating to headers. This option allows you to select the right tag for your particular use. The more important the information on the page the larger the header should be.

  • H1: Page Title
  • H2: Sub Title
  • H3: Section
  • H4: Sub Section
  • H5: Small
  • H6: Smallest

Alignment
Allows you to align the header, which contains the pre-phrase text, the phrase, and the post-phrase text. You can choose to align it to the left, center or right.

Phrases

Pre-Phrase Text
When enabled you may enter a small bit of text that will go in front of your Phrases.

Phrase 1-8
You can enter up to 8 different phrases for the Type It stack to rotate through.

Post-Phrase Text
When enabled you may enter a small bit of text that will go after your Phrases.

Bold Phrase
Enable this option to make the Phrases within your Type It stack bold.

Styling

Pre- and Post-
Set the color of the Pre- and Post-Phrase text using a color picker.

Style
Set the styling of your Phrase text. You can use one of the Foundry Preset Colors or opt to choose a custom color using a color picker.

Cursor
Set the color of the faux cursor.

Insight
Phrases

Type It offers up to 8 different phrases for the stack to cycle through. You can even randomize the order they're displayed in.