Decoding Text

Bring a futuristic, high-tech vibe to your website with Decoding Text.

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. How to Use 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.

Premium decoding text