---
title: "TextHatch | FramerHub"
canonical_url: "https://framerhub.io/components/text-hatch"
last_updated: "2026-06-15T14:46:28.828Z"
meta:
  description: "Apply a stunning, hand-drawn hatching shader effect to your typography. Premium Framer component for client sites, portfolios, and product pages."
  "og:description": "Apply a stunning, hand-drawn hatching shader effect to your typography. Premium Framer component for client sites, portfolios, and product pages."
  "og:title": "TextHatch | FramerHub"
---

# **TextHatch **

Apply a stunning, hand-drawn hatching shader effect to your typography.

One-time payment

Lifetime updates

Commercial license

## **Overview** Apply a stunning, hand-drawn hatching shader effect to your typography. - Native WebGL Three.js Effect - Fully Custom Fonts - Interactive Hover States - Fully Customizable Jitter & Hatching ## Hand-Drawn Typography Add a dynamic, scribbled hatching effect to your typography with TextHatch. Powered by native Three.js WebGL, this component converts standard text into beautifully shaded, hand-drawn artwork right on the canvas with incredibly smooth performance. ## Features**Interactive Triggers** Set the effect to run continuously or smoothly animate in on hover using Framer Motion springs.**Custom Fonts & Styling** Fully supports Framer's built-in font controls. Choose any font family, adjust the size and weight, and the hatching system will automatically adapt.**Fully Customizable** Fine-tune the angle, spacing, width, jitter, speed, and softness to achieve the exact stylistic look you need. ## Use Cases**Hero Headlines** — Make an unforgettable first impression by turning your main headline into an animated sketch.**Creative Portfolios** — Add a layer of artistic polish to showcase pages.![TextHatch Preview](https://framerhub.io/framerhub/img/components/control/text-hatch.jpg) ## How to Use ### Installation**VIDEO PLACEHOLDER: Installation Tutorial**1. Log in to your account at framerhub.io 2. Navigate to framerhub.io/dashboard 3. Find TextHatch in your Recent Purchases 4. Click the "Copy" button 5. Open your Framer project 6. Paste the component anywhere on your canvas (Cmd/Ctrl + V) ### Customization TextHatch exposes a wide array of parameters grouped logically to keep your properties panel clean.**Text Settings**- **Text**: The string to be rendered. - **Font**: Use Framer's font picker to select the exact family, size, and weight. - **Trigger**: Choose whether the effect runs always, or only animates in when hovered. - **Quality**: Auto-detects device capabilities to ensure optimal framerates.**Style & Geometry**- **Angle**: Define the tilt of the hatch lines. - **Spacing**: How far apart the scribble strokes are. - **Line Width**: The thickness of each stroke.**Jitter & Animation**- Control how messy the scribble looks by tweaking Angle Jitter, Offset Jitter, and Spacing Jitter. Set the animation speed to control how fast the scribble updates. ### Quick Tips**Best Font Styles** — The hatching effect looks best on text with thicker strokes. Try using heavier font weights (Bold, Black) or larger font sizes so the scribble lines have plenty of room to draw.**Static Sketches** — Set the `Speed` to 0 and tweak the `Seed` property to lock in a specific, perfect scribble iteration. ## License**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. ## Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! ## Why Designers Love This TextHatch brings the coveted "awwwwards-style" WebGL shading effect directly into Framer typography without writing a single line of shader code. ### **TextHatch - $9** Apply a stunning, hand-drawn hatching shader effect to your typography.**One-Time Payment****Lifetime Access****Unlimited sites**### **You might also like** Why Choose Framer Hub Components ## **Loved by Framer teams** Used by Framer professionals who need premium, no-code experiences. Got questions? We've the answers ## **Got questions? We've the answers ** Everything you need to know about FramerHub.