Highlight Scramble

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/

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 before completing your purchase. I'm happy to help.