---
title: "Knockout Wobble Text — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Troy Miller · Text. Mask image text with hover effect"
canonical: "https://framer.elliotli.dev/component/knockout-wobble-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Knockout Wobble Text

# Knockout Wobble Text

Mask image text with hover effect

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

![Knockout Wobble Text preview image 1](https://framer.elliotli.dev/og/component/knockout-wobble-text/41d4a22f07a65eab/1600x1200.jpg)

## Summary

Mask image text with hover effect

## Description

Bring your headlines to life with a stunning image mask effect and interactive per-letter wobble animation.

**How it works** Upload any image and it will be clipped inside your text — so your letters become windows into the image beneath. Hover any individual letter and it wobbles with a smooth animation, with an optional color flash that resets automatically.

**Features**

-   Image masked inside text using native browser background-clip — no performance overhead
    
-   Per-letter wobble animation on hover with adjustable speed
    
-   Hover color system — choose a single color or build a full color palette that randomly assigns on hover
    
-   Adjustable color reset duration so flashes linger as long as you want
    
-   Full font control via Framer's native font picker — family, size, weight, line height, letter spacing, and alignment
    
-   Three image fit modes: Cover, Contain, and custom Percent scaling
    
-   Fallback solid text color for when no image is set
    
-   Wobble and hover color can each be toggled on or off independently
    
-   Multi-line support with manual line breaks
    

**Perfect for** Hero sections, bold statements, portfolio headers, landing page headlines, and anywhere you want type that stops the scroll.

**Customizable properties** Text, Font, Image, Image Fit, Wobble on/off, Wobble Duration, Color on Hover on/off, Hover Color Mode (palette or single), Hover Palette, Color Reset Duration.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-xyatrly1-rUoFz5ItSRTiUYagfqaI1zZKz2897h)

**IMPORTANT:** Due to the nature of digital code components, **all sales are final and non-refundable**. Once purchased, you receive immediate access to the complete component code, which cannot be returned.

**Before purchasing, please:**

-   Review the component demo and documentation carefully
    
-   Check the feature list to ensure it meets your needs
    
-   Contact us at troy@fireislanddesign.com with any pre-purchase questions
    

For design work, questions, or help, please reach out at [https://www.fireislanddesign.com/](https://www.merokeeventures.com/)

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

-   All · #6409

## Details

- **Author**: Troy Miller
- **Price**: $3.00
- **Published**: 2026-02-20
- **Updated**: 2026-06-17
- **Added**: 2026-02-18
- **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