---
title: "ScribbleHover Reveal — Framer component · Best of Framer"
description: "$10.00 · Framer component · by MotionIQ Studio · Text. Hand-drawn scribble reveal on hover"
canonical: "https://framer.elliotli.dev/component/scribblehover-reveal"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ScribbleHover Reveal

# ScribbleHover Reveal

Hand-drawn scribble reveal on hover

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

![ScribbleHover Reveal preview image 1](https://framer.elliotli.dev/og/component/scribblehover-reveal/fc05ba61e8885882/1600x1200.jpg)

## Summary

Hand-drawn scribble reveal on hover

## Description

Scribble Hover Reveal isn't just a hover effect; it's a meticulously crafted animation sequence that bridges the gap between static design and hand-drawn illustration. By leveraging optimized SVG path transitions, it creates a "live sketch" feel that commands attention and encourages interaction.

**Key architectural highlights:**

-   **Micro-Interaction Staggering:** Reveal text uses advanced delay logic for a cinematic, word-by-word reveal that feels intentional and premium.
    
-   **Dual-Layer Depth:** Features a base-stroke and a highlight-stroke overlap to create visual depth and a "trace and fill" aesthetic.
    

**Features:**

-   **Hand-Drawn Aesthetic:** Creates an organic, sketchy feel that breaks the monotony of standard web boxes.
    
-   **Dynamic Reveal:** Text emerges from the bottom with a smooth, staggered translate animation.
    
-   **Smart Truncation & Links:** Add subtext with an optional **"Read More" link**. The component automatically handles truncation at 200 characters, perfect for adding links to detailed pages
    
-   **Ultra-Fine Control:** Full control over scribble thickness (initial vs final), colors, and drawing duration.
    
-   **Layout Flexibility:** Supports fixed dimensions for precise grid integration while maintaining object-fit integrity for background images.
    
-   **Zero Performance Lag:** Built on the Framer Motion core to ensure 60FPS animations even with complex SVG paths.
    

**Customisation Options:**

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

**Visuals:**

-   **Image:** Set any background image with perfect aspect ratio handling.
    
-   **Colors:** Independent controls for the primary **Stroke Color** and **Base Stroke**.
    
-   **Typography:** Fully adjustable typeface via Framer's native **Font** control (supports all Google Fonts).
    

**Animation:**

-   **Duration:** Drag the slider to speed up the drawing for a snappy feel or slow it down for an artistic, deliberate look.
    
-   **Stroke Widths:** Fine-tune the "ink" thickness using **Initial Stroke Width** (static) and **Final Stroke Width** (hover).
    

**Layout:**

-   **Border Radius:** Match your site's design system with precise corner rounding controls.
    

Set up:

1.  Drag the **Scribble Hover Reveal** component into your Canvas.
    
2.  Replace the **Image** with your own high-resolution asset.
    
3.  Update the **Reveal Text**. It will automatically handle multi-line staggering.
    
4.  **Add Subtext & Link:** Toggle the "Show Subtext" option to add your description and paste a "Read More URL" to link to another page.
    
5.  Harmonize the **Stroke Color** with your brand's primary color palette.
    
6.  Adjust the **Final Stroke Width** (typically 3x to 4x the initial width) to ensure the scribble feels impactful upon interaction.
    

After completing your purchase, you will receive a link to the component.

Copy the URL and paste it into your browser to import it.

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

-   All · #4529

## Details

- **Author**: MotionIQ Studio
- **Price**: $10.00
- **Published**: 2026-05-28
- **Updated**: 2026-06-02
- **Added**: 2026-05-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