Ciph3rText

Note: You can find some demo videos of this in action in the examples directory.

A React Component that animates transforming a string of text:

encode: gradually encode the text by replacing characters with random ones
decode: start with encoded text and decode it by replacing characters and gradually revealing the underlying text
transform: convert one string into another by padding it with random characters or removing extra characters while slowly revealing the target text
scramble: keep mutating the text by replacing random characters with other random characters

Getting Started

Install the package:

# use npm, bun, yarn, pnpm, etc.
npm install @interwebalchemy/ciph3r-text

bun add @InterwebAlchemy/ciph3r-text

Import the package:

import Ciph3rText from "@interwebalchemy/ciph3r-text";

Render the Component:

<Ciph3rText defaultText="Hello, world!" action="decode" />

The <Ciph3rText> component has several props you can use to control how the characters are changed:

Property	Description	Type	Default
`defaultText` required	the text to display during server rendering, after decoding, or before encoding or transforming	`string`	`undefined`
`action`	controls whether the text is encoded, decoded, transformed, or scrambled	`"encode"`	`"decode"`, `"endcode"`, `"transform"`, `scramble`
`targetText` required if `action="transform"`	the text to transform into when using `action="transform"`	`string`	`undefined`
`onFinish` *not applicable if `action="scramble"`	callback to execute when the `defaultText` has been fully decoded, encoded, or transformed	`() => {}`	`undefined`
`iterationSpeed`	how frequently the logic to change characters executes	`number`	`120`; `150` (`transform`)
`maxIterations` *not applicable to `action="scramble"`	how many times the logic to change characters can run	`number`	`36`; `54` (`transform`)
`characters`	a limited string of characters that you want to use in the effect	`string`	view source
`additionalCharacters`	an optional string of characters that you want to use in addition to the `characters`	`string`	`""`

For a more interesting effect, you may consider breaking your string into chunks of random size and applying varying colors, iterationSpeed, etc., to each chunk.
Find some unique characters to use. Maybe get inspired by the Matrix or add some cursed diacritics?
You can leverage the onFinish callback to swap defaultText or targetText or change the action to create interesting effects chains.

Interweb.WTF: watch the example WTF Link on the homepage reveal itself
Interweb.WTF URL Expander: enter https://bit.ly/prompt-injection-guide into the input and hit <kbd>Enter</kbd> and watch the URL transform
Interweb.WTF URL Cleaner: enter https://interwebalchemy.com/posts/building-a-chess-tutor?utm_source=interweb.wtf&utm_campaign=docs into the input and hit <kbd>Enter</kbd> and watch the URL transform
Collabodoro: watch the logo when you start the timer without hosting or joining a collaboration session

Note: The Interweb.WTF examples work with other shortlinks and URLs with tracking parameters in them, these are just example inputs you can use.