---
title: "Decoding Text — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Text. Bring a futuristic, high-tech vibe to your website with Decoding Text."
canonical: "https://framer.elliotli.dev/component/decoding-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Decoding Text

# Decoding Text

Premium decoding text

[View on Framer](https://framer.com/marketplace/components/decoding-text/?via=elliot-li)

![Decoding Text preview image 1](https://framer.elliotli.dev/og/component/decoding-text/3324ac532e5035dc/1600x1200.jpg)

## Summary

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

## Description

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

1.  Enter your desired content in the **Text** property field.
    
2.  **Important:** To create a new line (line break) inside the text box, press **Shift + Enter**.
    
3.  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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7942

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-01-06
- **Updated**: 2026-07-26
- **Added**: 2025-12-20
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing