---
title: "Highlight Scramble — Framer component · Best of Framer"
description: "$2.00 · Framer component · by Francesco Caronte · Text. About this Component Highlight Scramble is a premium link button that combines two striking effects: text scrambling and an animated…"
canonical: "https://framer.elliotli.dev/component/highlight-scramble"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Highlight Scramble

# Highlight Scramble

Random text with highlight animation

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

![Highlight Scramble preview image 1](https://framer.elliotli.dev/og/component/highlight-scramble/87c947e0ddf3b811/1600x1200.jpg)

## Summary

About this Component Highlight Scramble is a premium link button that combines two striking effects: text scrambling and an animated highlight background.

## Description

## About this Component

Highlight Scramble is a premium link button that combines two striking effects: text scrambling and an animated highlight background. On hover, letters transform into random characters while a customizable glow expands across the button, creating a futuristic, cyber-inspired interaction. Set different text labels for default and hover states, control scramble speed and duration, customize colors for text and highlight, and fine-tune padding and border radius. Perfect for modern portfolios, tech landing pages, call-to-action buttons, and any interface where you want to add bold, attention-grabbing micro-interactions.

## Live Preview

[https://highlightscramble.framer.website/](https://highlightscramble.framer.website/)

## Customizable Properties

### / Content

-   Default Label – Text displayed in normal state
    
-   Hover Label – Text revealed after scramble completes
    
-   URL – Link destination
    
-   Open in New Tab – Yes or No
    

### / Colors

-   Text Color – Default text color
    
-   Hover Text Color – Text color during hover/scramble
    
-   Highlight Color – Background glow color on hover
    

### / Typography

-   Font – Choose any font (monospace recommended)
    

### / Animation

-   Scramble Speed – Slow, Medium, or Fast character shuffling
    
-   Scramble Duration – Total animation length (100ms–1000ms)
    

### / Style

-   Padding Vertical – Top and bottom spacing
    
-   Padding Horizontal – Left and right spacing
    
-   Border Radius – Corner roundness (0px–50px)
    

### Use cases

Tech landing pages · Portfolio CTAs · Modern navigation · Cyber-themed interfaces · Interactive buttons · Newsletter signups

### Refund Policy

All sales of digital products are final and non-refundable. If you have any questions about the product, please contact me at [info@carontefrancesco.it](mailto:info@carontefrancesco.it) before completing your purchase. I'm happy to help.

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

-   All · #3387

## Details

- **Author**: Francesco Caronte
- **Price**: $2.00
- **Published**: 2026-03-07
- **Updated**: 2026-03-07
- **Added**: 2026-03-02
- **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