5e:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3q5d1avmchlp0.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/149w-u4or12up.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/17pioewhhzr_j.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/3fr1ev83fgwky.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js"],"PostDetailCard"] 5f:T763,

Details

Bring your images to life with a captivating halftone particle image effect that reacts to user interaction. This component uses a grid of animated dots to reconstruct your image, dispersing and reforming in response to the cursor for a uniquely tactile visual feel. Perfect for creative portfolios, interactive hero banners, and immersive storytelling sites.

As users move their cursor across the image, dots are repelled within a customizable radius, creating fluid, physics-driven motion that draws attention and invites exploration. Fine-tune spacing, color, and scale to achieve your perfect look, and adjust motion properties for everything from subtle shimmer to dramatic scatter.

Features

Real-time halftone particle animation for engaging interactivity
Fully customizable dot spacing, scale, and color
Adjustable repel radius, force, and return speed for tailored motion
Optimized for smooth performance across modern browsers
Works with any image, no setup required

Controls

Image – Upload or select any image to animate in halftone style.
Dot Spacing – Adjust the distance between each halftone dot.
Dot Scale – Change the size of the halftone dots.
Dot Color – Choose the color of the dots for your image effect.
Repel Radius – Set the area of influence around the cursor.
Repel Force – Control the strength of the particle push effect.
Return Force – Adjust how quickly dots return to their original position.
Max Speed – Limit the maximum movement speed of particles.

5b:[["$","$L5e",null,{"post":{"id":"0198af76-eb2f-7880-9ca7-7ef1071105f5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7d10eb1d-731b-48d4-846c-ebb2274ac644","name":"Netbloom","slug":"netbloom","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31476/p9WbJQQvm-0BJOmC9RzfkIULrudhkRCdg0HslxiM","followed":false,"followsYou":false},"media":[],"resources":[{"id":"8KM0Ug1qRXCZ8L5DyP6m","resolved":true,"title":"Halftone Image Hover","body":"$5f","bodyJson":null,"introduction":"Turn images to interactive halftone art","slug":"halftone-image-hover","author":{"framerUserId":"7d10eb1d-731b-48d4-846c-ebb2274ac644","name":"Netbloom","slug":"netbloom","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31476/p9WbJQQvm-0BJOmC9RzfkIULrudhkRCdg0HslxiM","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/8KM0Ug1qRXCZ8L5DyP6m/halftone-image-hover-pC1CD7ECjoHLXIb7p36WAyMb9vFJfA","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-10T05:12:19.863Z","updatedAt":"2026-03-18T04:36:22.733Z","publishedAt":"2025-08-15T20:41:03.023Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://halftone.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_WOS7Fzh1XsWngT8dNSF4BEjV7YTAYXfnE5cHC3E8dq2?utm_source=framer&utm_medium=marketplace&utm_campaign=halftone","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"Laz9No11EKSHYORLN314","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-15T20:41:03.023Z","updatedAt":"2025-08-15T20:41:03.023Z","reported":false}}],"$L60"]

Suggested for you