Bring a futuristic, high-tech vibe to your website with Decoding Text. This component simulates a system decryption process, perfect for hero sections, creative portfolios, or crypto/web3 projects.
Unlike simple text fades, this component uses a 3-phase algorithm: Numbers → Symbols → Final Text, creating a rich and authentic terminal effect.
✨ Key Features:
3-Phase Scramble: Realistic decryption animation that flows from numbers to special characters before revealing the text.
Smart Paragraph Mode: Supports both single-line headlines and multi-line paragraphs. Just toggle Paragraph Mode on/off.
Neon Glow Engine: Built-in text-shadow controls to create a 'bleeding' CRT monitor effect.
Fully Customizable: Change the scramble characters, speed, colors, and fonts to match your brand identity.
A. Inputting Text
Enter your desired content in the Text property field.
Important: To create a new line (line break) inside the text box, press Shift + Enter.
If you are writing a long paragraph, ensure the Paragraph Mode toggle is set to On.
B. Layout Settings (Crucial) Once you drag and drop the component onto your canvas, adjust the layout panel on the right:
Width: Set to Relative (or Fill) to ensure it fits your container.
Height: Set to Fit Content. This is vital so the text doesn't get cut off when it wraps to a new line.
C. Typography & Styling
Font Size: Click the Font property control to expand it, then adjust the Size to scale your text.
Responsive Tip: You can set a large size (e.g., 24px) for Desktop and override it to a smaller size (e.g., 16px) on the Phone breakpoint using the same Font control.
Neon Glow: Toggle Neon Glow to on for a futuristic cyberpunk look.
Alpheratz
