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"] 5f:I[539959,["/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"],"CommentSection"] 5e:T64a,

3-Card Tilt Grid for Framer – Responsive Layout with Interactive Title Hover Effect

The 3-Card Tilt Grid is a modern Framer component that displays content in a clean 3-card layout, enhanced with interactive hover effects. Each card includes an image, title, and description, with the title featuring a subtle tilt animation on hover, adding depth and motion to your design. Perfect for portfolios, product showcases, feature sections, and landing pages, this component combines clarity with interactivity.

Key Features

Interactive Title Tilt – Card titles tilt smoothly on hover, creating a dynamic 3D-style effect.
Responsive Grid Layout – Automatically adapts to desktop, tablet, and mobile for a consistent look.
Customizable Cards – Easily swap images, titles, and descriptions using Framer property controls.
Smooth Hover Transitions – Lightweight animations for a polished, engaging user experience.
Design Controls – Adjust typography, border radius, spacing, and shadows to match any brand style.

How It Works

The grid contains three customizable cards. On hover, the title text rotates slightly along the X and Y axes, creating a tilt effect that reacts to cursor position. The rest of the card remains stable, making the text animation the focal point of interaction. When the hover ends, the title resets smoothly to its neutral state.

5a:[["$","$L5d",null,{"post":{"id":"019981c9-c5ef-7bcb-9453-d69b24065380","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"12d1a2f4-a500-41f7-a027-d5fc454fb5fe","name":"Hyérica Santiago","slug":"hyerica-santiago","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/577415/avatar-nVxlskfbo1BDpM5PO5QJaZW1AI34F3.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"vlFL0NdLAfkFKYeOOwBa","resolved":true,"title":"Tilt Card Grid","body":"$5e","bodyJson":null,"introduction":"","slug":"tilt-card-grid","author":{"framerUserId":"12d1a2f4-a500-41f7-a027-d5fc454fb5fe","name":"Hyérica Santiago","slug":"hyerica-santiago","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/577415/avatar-nVxlskfbo1BDpM5PO5QJaZW1AI34F3.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vlFL0NdLAfkFKYeOOwBa/tilt-card-grid-gQsew2n9w5ckz1QQPycCfzQ20Xe1UG","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-25T16:07:56.976Z","updatedAt":"2025-09-27T13:09:04.763Z","publishedAt":"2025-09-25T16:51:48.335Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Tilt-Card-Grid-hKFY.js@cXQszQ0QyW5o7GXMm57M","previewUrl":"https://voluntary-actions-413267.framer.app/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"cXQszQ0QyW5o7GXMm57M","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-25T16:51:48.335Z","updatedAt":"2025-09-25T16:51:48.335Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019981c9-c5ef-7bcb-9453-d69b24065380"},"postId":"019981c9-c5ef-7bcb-9453-d69b24065380","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you