56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/3npaj8f4glbs_.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/2knggklfeqwdv.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:Tb36,

DotGrid is a modern Framer component that creates an animated grid of dots which respond dynamically to user interaction.On hover, dots scale smoothly and trigger wave-like animations for a premium, interactive feel.

Perfect for SaaS websites, portfolio backgrounds, or modern landing pages, DotGrid instantly adds depth and motion to your design.

Instructions

Paste the component into your project.
Customize dot color, size, and scale factor.
Adjust proximity range for hover interactions.
Fine-tune animation physics with stiffness and damping.
Control amplitude and speed for continuous wave motion.

How It WorksDotGrid includes 8+ property controls:

Dot Color / Size: Adjust base visuals.
Hover Scale: Define how much dots enlarge on hover.
Proximity Radius: Set the interaction distance.
Amplitude / Speed: Control wave effect dynamics.
Stiffness / Damping: Physics-based controls for responsiveness and bounce.

Main Features

Responsive interactive dot grid.
Smooth hover and wave animations.
Fully customizable via property controls.
Works as background, hero, or section filler.
Plug & play in any Framer project.

Use Cases

SaaS and tech landing pages needing interactive visuals.
Portfolio sites showcasing modern motion design.
Hero sections with subtle interactive depth.
Background animations for contact or signup forms.
Editorial layouts with a dynamic twist.

Made with love by Le Lab Framer.

53:[["$","$L56",null,{"post":{"id":"0199c340-c9d1-7036-aad7-8ab919ea6358","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"90e4e37c-af80-4548-be44-2876a68db97f","name":"Kevin Hardmeier","slug":"kevin-hardmeier-yz57lv","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398754/avatar-VGOPJ1wU2wbxUffhhhshKj4hVo6D3A.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"pPDpkoALbh5XEBOFIAGo","resolved":true,"title":"Dots Grid Pattern","body":"$57","bodyJson":null,"introduction":"","slug":"dots-grid-pattern","author":{"framerUserId":"90e4e37c-af80-4548-be44-2876a68db97f","name":"Kevin Hardmeier","slug":"kevin-hardmeier-yz57lv","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/398754/avatar-VGOPJ1wU2wbxUffhhhshKj4hVo6D3A.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/pPDpkoALbh5XEBOFIAGo/dots-grid-pattern-Od2ElyVOYR4xOIvmGxdSz5QKbtURc5","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-02T07:39:49.516Z","updatedAt":"2025-10-08T09:56:02.944Z","publishedAt":"2025-10-08T09:57:07.153Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dotspattern.framer.website/","price":"5","paymentUrl":"https://lelabframer.lemonsqueezy.com/buy/d953fc68-27b7-4d1f-8f98-296144a0c86d","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"r0bP5uVfFyasLvUZuQ8p","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-08T09:57:07.153Z","updatedAt":"2025-10-08T09:57:07.153Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you