5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e: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

5a:[["$","$L5d",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":"$5e","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":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"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":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"fegMOVwaZqQgFupUirFI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"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}}],"$L5f"]

Suggested for you