---
title: "DrawUnderlineFX — Framer component · Best of Framer"
description: "$10.00 · Framer component · by DiverseKit · Buttons. Animated underline that draws itself"
canonical: "https://framer.elliotli.dev/component/drawunderlinefx"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/DrawUnderlineFX

# DrawUnderlineFX

Animated underline draws itself

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

![DrawUnderlineFX preview image 1](https://framer.elliotli.dev/og/component/drawunderlinefx/228f53fe8a21db58/1600x1200.jpg)

## Summary

Animated underline that draws itself

## Description

DrawRandomUnderline FX adds playful, animated underlines to text that appear with randomized stroke motion, adding personality and interactivity to headings, links, or buttons.

**Details**DrawRandomUnderline FX is a Framer component that creates animated underlines which draw themselves dynamically beneath text. Each underline stroke has a slight random motion for a hand-drawn, organic feel.

You can customize stroke thickness, color, animation speed, randomness intensity, easing, delay, and trigger type (hover, click, or scroll). Supports multi-line text, gradient underlines, and layered effects for more expressive visuals.

Ideal for hero headings, navigation links, call-to-actions, portfolios, and interactive content, DrawRandomUnderline FX brings subtle but delightful motion to text, making it feel alive and engaging.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-wng9mq6h-IBBr0DWREWbn9eNCXeBwGf63tlyLyc)](https://diversekit.lemonsqueezy.com/checkout/buy/18e6b00b-cd19-476b-82b5-29e3f7515679)

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

-   All · #4144

## Details

- **Author**: DiverseKit
- **Price**: $10.00
- **Published**: 2026-03-10
- **Updated**: 2026-10-01
- **Added**: 2026-02-28
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything