Ink Image Reveal transforms standard image loading into a captivating, scroll-triggered ink-brush animation. Lightweight and powered by native browser APIs, it effortlessly adds an organic, handcrafted feel to any Framer project with zero complex setup.
- Hand-Drawn Ink Reveal Animation - A frame-by-frame ink sprite sweeps across the image as it enters the viewport, with configurable duration, delay, trigger threshold, and single or repeating playback.
- Decorative Frame with One-Click Recoloring - An optional hand-drawn frame (landscape or portrait) layers on top of the image. Both frame and ink share a single Color property via CSS masking, so you can recolor everything instantly to match your design.
- Easy Customization - Control every detail from the Framer properties panel: image, frame orientation, color, animation timing, viewport trigger, and even custom sprite sheets. Built-in defaults let the component work right out of the box.
1. Drag the component onto the canvas - it inserts at a default size of 400 × 250 (landscape). For portrait use, resize to 250 × 400.
2, Upload your own image or leave the built-in sample. Choose the Frame orientation (landscape or portrait) and pick a Frame Color.
3. Optionally adjust animation settings - Duration, Delay, Threshold, and Trigger Once - to fine-tune when and how the reveal plays.
4. Preview your project to see the ink animation in action (the effect is only visible in preview/published mode, not on the canvas).
For more details on installation and component properties, please refer to the documentation - https://docs.zeroqode.com/framer-plugins/ink-image-reveal
- Photography portfolios and artist showcases that want an organic, hand-crafted reveal
- Landing pages and hero sections that need an eye-catching first impression
- Creative agency and studio websites looking for a unique, artisanal aesthetic
- Product or brand pages where images should feel intentionally unveiled rather than simply loaded
- Any project where you want to replace generic fade-ins with a distinctive ink-brush entrance
💬 For any questions, feel free to contact us at this support email: support@zeroqode.com
Zeroqode
