Ink Image Reveal

About this Component

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.

Key Features

- 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.

How to Set Up

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

Perfect For

- 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

Support

💬 For any questions, feel free to contact us at this support email: support@zeroqode.com