5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:Ta4e,

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

59:[["$","$L5c",null,{"post":{"id":"019e63ac-4555-7c90-a88b-ee7bb2f8bdee","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"5f5e219b-8257-4212-85a8-db6dd719febe","name":"Zeroqode","slug":"zeroqode","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/183716/logo-icon-BG-circle%20copy-IauPYu9ntfHlHHY38w8OXzpiTpJ8Uw.png","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cmODdpMTL2oEZAPwtZYr","resolved":true,"title":"Ink Image Reveal","body":"$5d","bodyJson":null,"introduction":"A scroll-triggered ink-brush image revea","slug":"ink-image-reveal","author":{"framerUserId":"5f5e219b-8257-4212-85a8-db6dd719febe","name":"Zeroqode","slug":"zeroqode","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/183716/logo-icon-BG-circle%20copy-IauPYu9ntfHlHHY38w8OXzpiTpJ8Uw.png","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/cmODdpMTL2oEZAPwtZYr/ink-image-reveal-nJeK44NqugWgY4UEtXZ59yzGl8XxxR","metadata":{"tint":"hsl(0 0% 3%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-05-20T17:46:37.599Z","updatedAt":"2026-05-26T09:35:04.863Z","publishedAt":"2026-05-26T09:44:54.869Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://plum-screens-606941.framer.app/","price":"5","paymentUrl":"https://buy.stripe.com/cNieVd3QX0xpbQv2KF8og0k","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"fegMOVwaZqQgFupUirFI"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-26T09:44:54.869Z","updatedAt":"2026-05-26T09:44:54.869Z","reported":false}}],"$L5e"]

Suggested for you