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:T753,

Project Grid – Mixed Portfolio Grid with Hover Zoom

Project Grid is a modern, static-layout Framer component that showcases five projects in a clean, mixed-size grid. Each card displays a project image, title, optional tags, and year, and on hover the image gently zooms in for a subtle, engaging effect. The mixed grid layout and simple hover motion give your portfolio, agency, or case study section a premium, editorial feel with almost no setup required.

Hover Zoom Interaction

Image zooms in smoothly on hover for each card.
Layout returns to its default scale when the cursor leaves.
Fully responsive and optimized for modern GPU-accelerated performance.

Customizable Design Controls Project Grid includes full Framer property controls so you can instantly match it to your brand or layout.

Customize

Image 01–05 – Assign a unique image to each card.
Title 01–05 – Edit the project name per card.
Tag 01–05 – Edit the tag label per card.
Tag Visibility – Toggle each card's tag on or off.
Year 01–05 – Edit the year shown per card.
Border 01–05 – Set the border style for each card.

How It Works Project Grid displays five project cards in a fixed mixed-size grid. When a visitor hovers over any card, the component smoothly zooms in on that card's image, adding subtle motion without changing the layout. Each card's title, tag, and year can be shown or hidden independently, making the grid flexible enough to fit a range of portfolio and project styles.

5a:[["$","$L5d",null,{"post":{"id":"01a0fb49-96c5-70a9-a07d-e45b3df5df30","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"492da4c7-1f68-44bb-a835-d654f4ede7b8","name":"Pentaclay","slug":"pentaclay","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28817/5IpLqH7F9iimwZKthWdWp8kYrU-vxHo09smZpSjxasGJhxW7DH2mYch2a.png","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"6XfM9B1GuExq1wsgKfp1","resolved":true,"title":"Project Grid","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Project Grid – Mixed Portfolio Grid with Hover Zoom","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Project Grid is a modern, static-layout Framer component that showcases five projects in a clean, mixed-size grid. Each card displays a project image, title, optional tags, and year, and on hover the image gently zooms in for a subtle, engaging effect. The mixed grid layout and simple hover motion give your portfolio, agency, or case study section a premium, editorial feel with almost no setup required."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover Zoom Interaction","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image zooms in smoothly on hover for each card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout returns to its default scale when the cursor leaves."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive and optimized for modern GPU-accelerated performance."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Design Controls","marks":[{"type":"bold"}]},{"type":"text","text":" Project Grid includes full Framer property controls so you can instantly match it to your brand or layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image 01–05","marks":[{"type":"bold"}]},{"type":"text","text":" – Assign a unique image to each card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Title 01–05","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the project name per card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tag 01–05","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the tag label per card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tag Visibility","marks":[{"type":"bold"}]},{"type":"text","text":" – Toggle each card's tag on or off."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Year 01–05","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the year shown per card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border 01–05","marks":[{"type":"bold"}]},{"type":"text","text":" – Set the border style for each card."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]},{"type":"text","text":" Project Grid displays five project cards in a fixed mixed-size grid. When a visitor hovers over any card, the component smoothly zooms in on that card's image, adding subtle motion without changing the layout. Each card's title, tag, and year can be shown or hidden independently, making the grid flexible enough to fit a range of portfolio and project styles."}]}]},"introduction":"Project Grid with Hover Zoom","slug":"project-grid","author":{"framerUserId":"492da4c7-1f68-44bb-a835-d654f4ede7b8","name":"Pentaclay","slug":"pentaclay","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28817/5IpLqH7F9iimwZKthWdWp8kYrU-vxHo09smZpSjxasGJhxW7DH2mYch2a.png","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/492da4c7-1f68-44bb-a835-d654f4ede7b8/01a0fb5a-93d5-7583-80fb-7a12c6853b9a.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T06:24:58.423Z","updatedAt":"2026-10-02T06:43:48.877Z","publishedAt":"2026-10-02T06:24:58.420Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://projectgridx.framer.website/","price":"5","paymentUrl":"https://pentaclay-components.blink.store/project-grid","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"mCjyoKLNw1tB5RKc3OOg","tags":[]}}],"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-10-02T06:24:59.077Z","updatedAt":"2026-10-02T06:24:59.077Z","reported":false}}],"$L5f"]

Suggested for you