---
title: "Animated Wobble Text — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Troy Miller · Text. Interactive Text Design"
canonical: "https://framer.elliotli.dev/component/animated-wobble-text"
---

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

# Animated Wobble Text

Interactive Text Design

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

![Animated Wobble Text preview image 1](https://framer.elliotli.dev/og/component/animated-wobble-text/2c189b6ee5fd57f5/1600x1200.jpg)

## Summary

Interactive Text Design

## Description

Wobble Text Animation - Interactive Typography Made Fun

Transform your headlines into playful, interactive experiences with the **Wobble Text Component**. Each character comes alive with a satisfying wobble animation and vibrant color changes when users hover over them—creating an engaging, memorable experience that keeps visitors exploring your site.

## Key Features

**Interactive Character Animation**

-   Each letter responds individually to mouse hover
    
-   Smooth wobble animation with realistic rotation and translation
    
-   Colors fade back naturally after interaction
    

**Flexible Color Modes**

-   **Color Palette Mode**: Random colors from a customizable palette for playful variety
    
-   **Single Color Mode**: Consistent single color for professional, branded experiences
    
-   Includes 6 beautiful preset colors (easily customizable)
    

**Complete Typography Control**

-   Full Framer font picker integration - access all Google Fonts
    
-   Adjustable font size (12px - 300px)
    
-   Font weight control (400-900)
    
-   Fine-tune line height and letter spacing
    

**Professional Customization**

-   Adjust default text color
    
-   Control color reset duration (how long hover colors last)
    
-   Modify wobble animation speed
    
-   Clean, polished animations with smooth transitions
    

## Easy to Use

1.  Drag and drop onto your Framer canvas
    
2.  Edit the text in the property panel
    
3.  Customize colors, fonts, and animations
    
4.  Resize to fit your design
    
5.  Publish and watch users interact!
    

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

**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 · #5029

## Details

- **Author**: Troy Miller
- **Price**: $3.00
- **Published**: 2026-01-06
- **Updated**: 2026-06-17
- **Added**: 2025-12-17
- **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