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:
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:
Drag the Scribble Hover Reveal component into your Canvas.
Replace the Image with your own high-resolution asset.
Update the Reveal Text. It will automatically handle multi-line staggering.
Add Subtext & Link: Toggle the "Show Subtext" option to add your description and paste a "Read More URL" to link to another page.
Harmonize the Stroke Color with your brand's primary color palette.
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.
MotionIQ Studio
