5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.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/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:Ta24,

Description

Shape Grid is a powerful generative grid component that creates beautiful, animated shape patterns with advanced wave control.

You can generate circular ripples, linear waves, spirals, diagonal flows, and more. All are fully controllable from the properties panel.

A unique feature links scale directly to opacity, so shapes naturally shrink as they fade, creating smooth, organic depth. Directional glow support adds an extra layer of polish.

Highly customizable yet performance-conscious, with a smart Canvas Preview mode that lets you design without lag.

Features

Multiple wave types: Circular Ripple, Linear Horizontal/Vertical, Diagonal, Spiral, Random, and Uniform Pulse,
Unique Opacity-Linked Scaling - shapes shrink as they fade (fully controllable intensity),
Directional Glow system with color, blur, opacity, distance, and angle controls,
7 base shapes: Circle, Square, Triangle, Pentagon, Hexagon, Octagon + Custom Polygon,
Adjustable Aspect Ratio for stretched or compressed shapes,
Canvas Preview mode (strong frozen wave for designing + quieter mode for performance),
Full control over speed, amplitude, frequency, stagger, and intensity,
Up to 50×50 grid density.

What’s it perfect for?

Hero section backgrounds,
Abstract decorative sections,
Loading and waiting states,
Portfolio and agency websites,
SaaS / tech product pages,
Any design that needs dynamic, generative energy.

How to use it

Drag Shape Grid onto your canvas
Resize the component to your desired area
Use the property controls to choose:
- Grid density,
- Wave Type and Origin,
- Shape style and Aspect Ratio,
- Animation intensities (Fade, Scale, Float, Rotate),
- Optional Glow effects,
Toggle Canvas Preview on to see a strong frozen version of the wave while designing
Preview the page to see the full continuous animation

All controls are live, changes appear instantly.

What’s included

Fully customizable code component,
7 wave algorithms,
Opacity-linked scale system,
Performance-optimized for Framer & more.

59:[["$","$L5c",null,{"post":{"id":"019f7c6d-e847-7010-bbf0-79fc3b2b3bd2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e27471b8-0572-41f9-b790-f295b0922831","name":"Jeeth","slug":"jeeth","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/514649/avatar-0sUswVP0YFj8fN12A0yaGpCZLA2lDW.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"hob3avkLMpuFaxP9NfjR","resolved":true,"title":"Shape Grid","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Description"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Shape Grid is a powerful generative grid component that creates beautiful, animated shape patterns with advanced wave control."}]},{"type":"paragraph","content":[{"type":"text","text":"You can generate circular ripples, linear waves, spirals, diagonal flows, and more. All are fully controllable from the properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"A unique feature links scale directly to opacity, so shapes naturally shrink as they fade, creating smooth, organic depth. Directional glow support adds an extra layer of polish."}]},{"type":"paragraph","content":[{"type":"text","text":"Highly customizable yet performance-conscious, with a smart Canvas Preview mode that lets you design without lag."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple wave types: Circular Ripple, Linear Horizontal/Vertical, Diagonal, Spiral, Random, and Uniform Pulse,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Unique "},{"type":"text","text":"Opacity-Linked Scaling","marks":[{"type":"bold"}]},{"type":"text","text":" - shapes shrink as they fade (fully controllable intensity),"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Directional Glow system with color, blur, opacity, distance, and angle controls,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"7 base shapes: Circle, Square, Triangle, Pentagon, Hexagon, Octagon + Custom Polygon,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable Aspect Ratio for stretched or compressed shapes,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas Preview mode (strong frozen wave for designing + quieter mode for performance),"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full control over speed, amplitude, frequency, stagger, and intensity,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 50×50 grid density."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"What’s it perfect for?"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero section backgrounds,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Abstract decorative sections,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loading and waiting states,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and agency websites,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS / tech product pages,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Any design that needs dynamic, generative energy."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to use it"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag "},{"type":"text","text":"Shape Grid","marks":[{"type":"bold"}]},{"type":"text","text":" onto your canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Resize the component to your desired area"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use the property controls to choose:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid density,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wave Type and Origin,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shape style and Aspect Ratio,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation intensities (Fade, Scale, Float, Rotate),"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional Glow effects,"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggle "},{"type":"text","text":"Canvas Preview","marks":[{"type":"bold"}]},{"type":"text","text":" on to see a strong frozen version of the wave while designing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview the page to see the full continuous animation"}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"All controls are live, changes appear instantly."}]},{"type":"customHeading","content":[{"type":"text","text":"What’s included"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable code component,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"7 wave algorithms,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Opacity-linked scale system,"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance-optimized for Framer & more."}]}]}]}]},"introduction":"Powerful Grid Pattern Generator","slug":"shape-grid","author":{"framerUserId":"e27471b8-0572-41f9-b790-f295b0922831","name":"Jeeth","slug":"jeeth","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/514649/avatar-0sUswVP0YFj8fN12A0yaGpCZLA2lDW.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e27471b8-0572-41f9-b790-f295b0922831/019f7c6a-c7a8-724a-92d1-1771c8b54fae.png"}],"post":null,"createdAt":"2026-07-19T22:10:05.051Z","updatedAt":"2026-07-20T20:49:33.115Z","publishedAt":"2026-07-19T22:10:05.048Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://shapegrid.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_Z3eQ0Vy78z0eItWj48ISLjReR4CpDHFMT2XoW0iRnSK","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"2QmK819w2e485zTi4TSf"}}],"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-07-19T22:10:05.512Z","updatedAt":"2026-07-19T22:10:05.512Z","reported":false}}],"$L5e"]

Suggested for you