Knockout Wobble Text

Mask image text with hover effect

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. 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/

Mask image text with hover effect