---
title: "Magnetic Scramble — Free Framer component · Best of Framer"
description: "Free Framer component · by Endra Kuornie · Text. This component combines two engaging effects — magnetic motion and scramble animation — to bring text elements to life."
canonical: "https://framer.elliotli.dev/component/magnetic-scramble"
---

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

# Magnetic Scramble

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

![Magnetic Scramble preview image 1](https://framer.elliotli.dev/og/component/magnetic-scramble/d97682ac8c33322d/1600x1200.jpg)

## Summary

This component combines two engaging effects — magnetic motion and scramble animation — to bring text elements to life.

## Description

This component combines two engaging effects — magnetic motion and scramble animation — to bring text elements to life. When hovered, the text smoothly follows the cursor using spring-based physics, mimicking magnetic attraction. At the same time, its characters scramble through random symbols before revealing the original text, adding an eye-catching, tech-inspired animation.

You can fully customize the scramble characters, animation speed, and magnetic strength, giving precise control over responsiveness and intensity. It supports flexible text alignment, overflow handling, and complete typography customization (font size, weight, spacing, and color).

Ideal for interactive headings, buttons, or hero text, this component adds personality and motion to any interface — perfect for websites seeking a modern, animated touch.

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

-   All · #7778

## Details

- **Author**: Endra Kuornie
- **Published**: 2025-11-05
- **Updated**: 2025-11-05
- **Added**: 2025-10-26
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos