Ciph3rText

lost-signal.mp4

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" />

Configuration

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	""

Usage Tips

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

Examples

• 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 Enter 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 Enter 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.