Encrypted

A text component that reveals the text gradually, gibberish effect.

Installation
Props

Installation

To install, just include the following JavaScript somewhere on your page:

<!-- Load the core file first -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft-core.iife.js"
></script>

<!-- Load the component -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft/text-encrypted.iife.js"
></script>

Important notes

Make sure your project is using either Frankenstyle or FrankenstyleKit.
The order of JavaScript loading is important. The ft-core.iife.js file must be loaded before any other components.
When using multiple Frankternity components, the core file only needs to be loaded once.

Props

To pass props, include them as JSON inside a <script> tag with the data-fn="props" attribute.

Note The data-ft-* attribute determines which Frankternity component is mounted and should be replaced with the component name.

Prop	Type	Default	Description	Required
`text`	`string`	-	The text to be encrypted and revealed.	Yes
`className`	`string`	-	Additional CSS classes to apply to the component.	No
`stl`	`object`	`{}`	Additional inline styles to be applied to the component.
`revealDelayMs`	`number`	`50`	Time in milliseconds between revealing each subsequent real character.	No
`charset`	`string`	`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?`	Custom character set to use for the gibberish effect.	No
`flipDelayMs`	`number`	`50`	Time in milliseconds between gibberish flips for unrevealed characters.	No
`encryptedClassName`	`string`	-	CSS class for styling the encrypted/scrambled characters.	No
`revealedClassName`	`string`	-	CSS class for styling the revealed characters.	No

Encrypted

Table of contents

Installation

Important notes

Props