---
title: "Code hover Effect — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Munzir Kareem · Text. Code scramble image hover effect"
canonical: "https://framer.elliotli.dev/component/code-hover-effect"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Code hover Effect

# Code hover Effect

Code scramble image hover effect

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

![Code hover Effect preview image 1](https://framer.elliotli.dev/og/component/code-hover-effect/8beffe9851310c24/1600x1200.jpg)

## Summary

Code scramble image hover effect

## Description

**Code Image Hover**

Add a hover-triggered scramble effect to any image using customizable grid blocks. Move your cursor over the image and nearby blocks light up with scrambling characters, creating a code, matrix, or terminal-style reveal.

**Features**

-   Choose from Binary, Matrix, Arrows, Hex, or your own custom character set
    
-   Adjustable block size, detection radius, and cluster size for full control over the effect's density and spread
    
-   Configurable lifetime and scramble speed to tune how long and how fast blocks animate
    
-   Smoothness control for fade and scale transitions
    
-   Custom colors, font, and border radius for each block
    
-   Optimized for performance: animation only runs on active blocks, pauses off-screen, and skips entirely in static exports or on canvas
    

**Use cases**

-   Portfolio and case study hero images
    
-   Product showcases with a tech or cyberpunk aesthetic
    
-   Landing pages needing an interactive, code-inspired visual
    
-   Any image where a subtle hover interaction adds engagement without slowing down the page
    

**Refund Policy**

As this is a digital product delivered instantly upon purchase, all sales are final and non-refundable.

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

-   All · #9547

## Details

- **Author**: Munzir Kareem
- **Price**: $10.00
- **Published**: 2026-07-27
- **Updated**: 2026-07-27
- **Added**: 2026-07-27
- **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