TextHatch
Apply a stunning, hand-drawn hatching shader effect to your typography.
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.
How to Use
Installation
VIDEO PLACEHOLDER: Installation Tutorial
- Log in to your account at framerhub.io
- Navigate to framerhub.io/dashboard
- Find TextHatch in your Recent Purchases
- Click the "Copy" button
- Open your Framer project
- 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.
You might also like
Why Choose Framer Hub Components
Loved by Framer teams
Used by Framer professionals who need premium, no-code experiences.
"The Best Framer CMS Filtering Plugin I've Found — Truly a Game-Changer. I've tested a lot of Framer CMS filtering and sorting components — both free and paid — and this is by far the best one I've come across."
"He really helped me out when I needed assistance adding it to my Framer project. Super fast customer support highly recommend!"
"We had tried a couple of other Framer CMS filter components but they were buggy, hard to use and support was slow or non-existent. FramerCMSFilter is easier to use and has a lot of added functionality."
Got questions? We've the answers
Got questions? We've the answers
Everything you need to know about FramerHub.