4f:I[267044,["/creators-assets/_next/static/immutable/chunks/36c08p67t0nml.js","/creators-assets/_next/static/immutable/chunks/3ayu63s3pbx5h.js","/creators-assets/_next/static/immutable/chunks/2qqxwi6m3n33t.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3k0o12ps7rnq6.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/271g_l-8c77ee.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/31xze_yiju0_q.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2gb4kwi-0_ftg.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/41gwzxjlh6wda.js","/creators-assets/_next/static/immutable/chunks/0tb62zkq3ytzl.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/0gsy0nazl2cht.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/0y1e6y4tai9kl.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/1gasll1b30-2c.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/15ey03cfkkg-y.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/29vwz5igguxfe.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/0xifckmqg-iju.js"],"S"] 50:T637,

How it works

Move your cursor across the grid. Each cell calculates its distance to the pointer and reacts: cells close to the cursor glow in your accent color, scale up, and rotate. The effect fades smoothly with distance, creating a ripple of light across the field.

4 shapes, infinite combos

Square, Circle, Diamond, or Cross. Switch between them with one click. Each shape reacts differently to rotation and scale, giving a distinct feel per mode.

Fully customizable

All settings exposed as property controls in Framer:

Cell size (8–80px)
Gap between cells (0–20px)
Cursor influence radius (40–500px)
Rotation intensity (0–180°)
Scale on hover (1× to 4×)
Glow intensity
Base opacity at rest
Accent color
Background color

Layer content on top

GridField accepts children. Drop text, images, or any Framer element on top of the grid. The interactive background stays behind your content.

One component, plug and play

No setup, no dependencies, no code to write. Drag it onto your canvas, set it to Fill, choose your accent color. Done.

51:T40b,

A refined loading animation with two built-in art directions, switchable with one click.

Editorial

Squares fill a grid cell by cell in a spiral pattern from the center. Clean, mechanical, modular. Grid background, monospace text. Square corners, zero radius.

Soft

Organic blob rings expand outward from a breathing center dot. The rings rotate and deform like water ripples. The center dot follows your cursor and reacts to movement. Animated light beams appear on hover. Rounded, warm, alive.

Both designs share the same property controls:

Size, speed, grid density or ring count
Accent color (any color, applied to squares, rings, and center dot)
Loading text (optional, customizable)
Background toggle (themed or transparent)
Design switch (segmented control)

Drop it into any Framer project. Works as a page loader, section transition, or inline loading state. One component, zero dependencies.

4e:["$","$L4f",null,{"value":{"fallback":{"$inf$activity-creator-93010cbd-0bd0-4318-b245-a1c920326064-all:/unified/creator/93010cbd-0bd0-4318-b245-a1c920326064/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:93010cbd-0bd0-4318-b245-a1c920326064:/unified/posts/?creator=93010cbd-0bd0-4318-b245-a1c920326064&with=reposts":[{"data":[{"id":"019e992c-2f3a-77b9-901e-d9f3be35842f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"93010cbd-0bd0-4318-b245-a1c920326064","name":"AltKey","slug":"altkey","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1961472/avatar-XBiq2JpLLVe3RVNiNnwWfpHkaA9Me7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"eor5tFaGZU47k6xDQPRl","resolved":true,"title":"GridField Custom","body":"$50","bodyJson":null,"introduction":"Interactive Grid Background","slug":"gridfield-custom","author":{"framerUserId":"93010cbd-0bd0-4318-b245-a1c920326064","name":"AltKey","slug":"altkey","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1961472/avatar-XBiq2JpLLVe3RVNiNnwWfpHkaA9Me7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/eor5tFaGZU47k6xDQPRl/gridfield-custom-G8UW59ASqcpGQIfGvEcyojNMr7KAVf","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-27T07:27:37.226Z","updatedAt":"2026-09-07T08:44:54.208Z","publishedAt":"2026-06-05T19:04:30.266Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://miraculous-gazelle-054866.framer.app/framercomponents/gridfield/demo","price":"14","paymentUrl":"https://altkey.lemonsqueezy.com/checkout/buy/65442aca-f0bf-4913-9859-f4f26f940f58","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"NWscDhwCmGYjJwcPB6M3","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T19:04:30.266Z","updatedAt":"2026-06-05T19:04:30.266Z","type":"post"},{"id":"019e64ef-883d-751b-8cc4-39021be9e2f8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"93010cbd-0bd0-4318-b245-a1c920326064","name":"AltKey","slug":"altkey","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1961472/avatar-XBiq2JpLLVe3RVNiNnwWfpHkaA9Me7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"45g3U7VRqqvrqGK35coi","resolved":true,"title":"ROI Calculator B2B","body":"

A plug-and-play ROI calculator, mostly used in SaaS, to help your customers easily understand your value.

Plug and play in any Framer website, available with 2 different designs, all inputs customizable in Framer, including your brand colors and style.

","bodyJson":null,"introduction":"Plug-and-play, customizable calculator","slug":"roi-calculator-b2b","author":{"framerUserId":"93010cbd-0bd0-4318-b245-a1c920326064","name":"AltKey","slug":"altkey","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1961472/avatar-XBiq2JpLLVe3RVNiNnwWfpHkaA9Me7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/45g3U7VRqqvrqGK35coi/roi-calculator-b2b-lJR8mjjAQRr5M3yLczoseIqGifSYiD","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-25T13:11:48.625Z","updatedAt":"2026-06-04T19:00:30.738Z","publishedAt":"2026-05-26T15:38:00.125Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://altkey.fr/framercomponents/roi-calculator/component","price":"14","paymentUrl":"https://altkey.lemonsqueezy.com/checkout/buy/9a6198be-7e23-47ff-9324-69cb2cf3237d","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"tSA6B2wzbIEri7XxkKwb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-26T15:38:00.125Z","updatedAt":"2026-05-26T15:38:00.125Z","type":"post"},{"id":"019e64ef-7454-7114-b0ad-2be4609791a4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"93010cbd-0bd0-4318-b245-a1c920326064","name":"AltKey","slug":"altkey","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1961472/avatar-XBiq2JpLLVe3RVNiNnwWfpHkaA9Me7.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"zI4vV7oFmgAG1wp02eXG","resolved":true,"title":"Sophisticated Loader","body":"$51","bodyJson":null,"introduction":"Smooth loading animations","slug":"sophisticated-loader","author":{"framerUserId":"93010cbd-0bd0-4318-b245-a1c920326064","name":"AltKey","slug":"altkey","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1961472/avatar-XBiq2JpLLVe3RVNiNnwWfpHkaA9Me7.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/zI4vV7oFmgAG1wp02eXG/sophisticated-loader-1Ohagk8GoZ38pguw9d4ECKDcBp3YB4","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-25T21:02:17.810Z","updatedAt":"2026-06-04T19:00:57.891Z","publishedAt":"2026-05-26T15:37:55.028Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://altkey.fr/framercomponents/loaders/loadercomponent","price":"10","paymentUrl":"https://altkey.lemonsqueezy.com/checkout/buy/74bd5d3f-4452-4ebe-9ef8-ac35b42245dd","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"pzmeuiwSUet5iRv9brgF","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-26T15:37:55.028Z","updatedAt":"2026-05-26T15:37:55.028Z","type":"post"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L52"}]