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

About Depth Project Card

A card with a thickness. Background, media, gradient, texture, metadata, title, call to action and a reflection each answer the cursor at their own rate, on a plane that leans no more than five degrees. The picture drifts the other way inside its frame; the sheen follows the pointer across the glass; a click brings the case study up from the bottom. Image or video, three CSS textures, no libraries, and a press instead of a tilt on touch.

Features

• Seven layers moving at seven rates, plus a reflection that follows the cursor.

• A lean capped at five degrees, in the control and in the code.

• Internal parallax on the media, with a gentle hover scale.

• An optional case study that rises from the bottom, with Escape and a Close button.

• Grain, Lines and Dots textures drawn in CSS — nothing to load.

• Image or video, with video paused off screen and under reduced motion.

• A single tab stop named for the whole card, and a focus ring that lifts it.

• No tilt on touch; a press animation instead.

• Container queries, so the same card works in a grid and at full width.

• Unsafe links and media URLs refused; empty slots labelled rather than blank.

• One standalone React + TypeScript file.

• 24 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.

53:[["$","$L56",null,{"post":{"id":"01a0c632-7aa2-7070-8b82-05470a9fb718","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"52e05998-ba90-4126-82d2-5226252fb326","name":"Lunaut Studio","slug":"lunaut-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/52e05998-ba90-4126-82d2-5226252fb326/ljienfh5","followed":false,"followsYou":false},"media":[],"resources":[{"id":"QUaCqD1q8tVe2ikE9Pr3","resolved":true,"title":"Depth Project Card","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About Depth Project Card"}]},{"type":"paragraph","content":[{"type":"text","text":"A card with a thickness. Background, media, gradient, texture, metadata, title, call to action and a reflection each answer the cursor at their own rate, on a plane that leans no more than five degrees. The picture drifts the other way inside its frame; the sheen follows the pointer across the glass; a click brings the case study up from the bottom. Image or video, three CSS textures, no libraries, and a press instead of a tilt on touch."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"paragraph","content":[{"type":"text","text":"• Seven layers moving at seven rates, plus a reflection that follows the cursor."}]},{"type":"paragraph","content":[{"type":"text","text":"• A lean capped at five degrees, in the control and in the code."}]},{"type":"paragraph","content":[{"type":"text","text":"• Internal parallax on the media, with a gentle hover scale."}]},{"type":"paragraph","content":[{"type":"text","text":"• An optional case study that rises from the bottom, with Escape and a Close button."}]},{"type":"paragraph","content":[{"type":"text","text":"• Grain, Lines and Dots textures drawn in CSS — nothing to load."}]},{"type":"paragraph","content":[{"type":"text","text":"• Image or video, with video paused off screen and under reduced motion."}]},{"type":"paragraph","content":[{"type":"text","text":"• A single tab stop named for the whole card, and a focus ring that lifts it."}]},{"type":"paragraph","content":[{"type":"text","text":"• No tilt on touch; a press animation instead."}]},{"type":"paragraph","content":[{"type":"text","text":"• Container queries, so the same card works in a grid and at full width."}]},{"type":"paragraph","content":[{"type":"text","text":"• Unsafe links and media URLs refused; empty slots labelled rather than blank."}]},{"type":"paragraph","content":[{"type":"text","text":"• One standalone React + TypeScript file."}]},{"type":"paragraph","content":[{"type":"text","text":"• 24 controls in the Framer properties panel"}]},{"type":"paragraph","content":[{"type":"text","text":"• Respects prefers-reduced-motion"}]},{"type":"paragraph","content":[{"type":"text","text":"• Renders correctly on the Framer canvas and in export"}]},{"type":"paragraph","content":[{"type":"text","text":"Created by LUNAUT Studio."}]}]},"introduction":"A card with a thickness","slug":"depth-project-card","author":{"framerUserId":"52e05998-ba90-4126-82d2-5226252fb326","name":"Lunaut Studio","slug":"lunaut-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/52e05998-ba90-4126-82d2-5226252fb326/ljienfh5","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/52e05998-ba90-4126-82d2-5226252fb326/01a0c62e-5554-763a-9d10-adefd194d3f6.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-21T22:59:51.501Z","updatedAt":"2026-09-22T09:31:27.007Z","publishedAt":"2026-09-21T22:59:51.498Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://abundant-book-795579.framer.app/depth-project-card","price":"9","paymentUrl":"https://buy.stripe.com/cNi00j3rU1VdeFK5w0eZ20e","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"80fFkvLqEObFJmWsudUh","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-21T22:59:52.098Z","updatedAt":"2026-09-21T22:59:52.098Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you