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

Case studies inside modals don’t normally have individual URLs. When someone asks to see a project, you can only send your homepage and tell them where to click.

Modal Deep Links gives every project a shareable address:

yoursite.com/#coastal-rebrand

Open a project and the URL updates
Share the link and its modal opens automatically
Browser Back and Forward stay synchronized
Escape and your existing close button are detected after closing

Setup

Place one instance anywhere on the page.

For reliable CMS URLs:

Add a text layer inside each project card
Bind it to the CMS Slug field
Name it ProjectSlug
Set it to 1 × 1 and 0% opacity
Don’t enable Hidden

Your project card and modal interaction should already work normally. This component adds URL synchronization; it doesn’t create the modal.

Controls

Slug Layer — Layer bound to your CMS Slug field.

Title Layer — Optional fallback for identifying projects by title.

Close Text — Exact text used by your modal’s close control.

Closed URL — Hash displayed after closing. Defaults to #projects.

Ignore — Titles or slugs that shouldn’t receive links, such as Coming Soon cards.

Automatic fallback

Without a slug layer, the component attempts to identify large linked image cards and creates URLs from their headings. A CMS slug layer is recommended because its URLs remain stable when titles change.

Good to know

Shows only a small marker on the Framer Canvas
Renders no visible interface on the published site
Works with existing Framer overlays and modal interactions
Designed for one-page portfolios with modal case studies
Dedicated CMS pages are recommended when per-project SEO matters

5a:[["$","$L5d",null,{"post":{"id":"019ffb85-c13e-76ac-8219-698920ce31a3","title":null,"body":"

Every modal gets its own URL address 😃

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Every modal gets its own URL address "},{"type":"emoji","attrs":{"name":"smiley","emoji":"😃"}},{"type":"text","text":" "}]}]},"author":{"framerUserId":"99d592eb-2b87-4aec-95b7-7e60558a7dff","name":"Riccardo Fala","slug":"riccardo-fala","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/37356/avatar-knHQz8HqXmxjQ5FGefV8YaPg8wEqsj.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PA5V6IJVd7BVO2nRwfHn","resolved":true,"title":"Modal Deep Links","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Case studies inside modals don’t normally have individual URLs. When someone asks to see a project, you can only send your homepage and tell them where to click."}]},{"type":"paragraph","content":[{"type":"text","text":"Modal Deep Links gives every project a shareable address:"}]},{"type":"paragraph","content":[{"type":"text","text":"yoursite.com/#coastal-rebrand","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open a project and the URL updates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Share the link and its modal opens automatically"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Browser Back and Forward stay synchronized"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Escape and your existing close button are detected after closing"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Setup"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Place one instance anywhere on the page."}]},{"type":"paragraph","content":[{"type":"text","text":"For reliable CMS URLs:"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add a text layer inside each project card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bind it to the CMS "},{"type":"text","text":"Slug","marks":[{"type":"bold"}]},{"type":"text","text":" field"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Name it "},{"type":"text","text":"ProjectSlug","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set it to "},{"type":"text","text":"1 × 1","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"0%","marks":[{"type":"code"}]},{"type":"text","text":" opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Don’t enable "},{"type":"text","text":"Hidden","marks":[{"type":"bold"}]}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Your project card and modal interaction should already work normally. This component adds URL synchronization; it doesn’t create the modal."}]},{"type":"customHeading","content":[{"type":"text","text":"Controls"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Slug Layer","marks":[{"type":"bold"}]},{"type":"text","text":" — Layer bound to your CMS Slug field."}]},{"type":"paragraph","content":[{"type":"text","text":"Title Layer","marks":[{"type":"bold"}]},{"type":"text","text":" — Optional fallback for identifying projects by title."}]},{"type":"paragraph","content":[{"type":"text","text":"Close Text","marks":[{"type":"bold"}]},{"type":"text","text":" — Exact text used by your modal’s close control."}]},{"type":"paragraph","content":[{"type":"text","text":"Closed URL","marks":[{"type":"bold"}]},{"type":"text","text":" — Hash displayed after closing. Defaults to "},{"type":"text","text":"#projects","marks":[{"type":"code"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Ignore","marks":[{"type":"bold"}]},{"type":"text","text":" — Titles or slugs that shouldn’t receive links, such as Coming Soon cards."}]},{"type":"customHeading","content":[{"type":"text","text":"Automatic fallback"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Without a slug layer, the component attempts to identify large linked image cards and creates URLs from their headings. A CMS slug layer is recommended because its URLs remain stable when titles change."}]},{"type":"customHeading","content":[{"type":"text","text":"Good to know"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shows only a small marker on the Framer Canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Renders no visible interface on the published site"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works with existing Framer overlays and modal interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Designed for one-page portfolios with modal case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dedicated CMS pages are recommended when per-project SEO matters"}]}]}]}]},"introduction":"Send a link to any case study","slug":"modal-deep-links","author":{"framerUserId":"99d592eb-2b87-4aec-95b7-7e60558a7dff","name":"Riccardo Fala","slug":"riccardo-fala","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/37356/avatar-knHQz8HqXmxjQ5FGefV8YaPg8wEqsj.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/99d592eb-2b87-4aec-95b7-7e60558a7dff/019ffb84-1bc9-713b-b659-067b73b74d7b.png","metadata":{"tint":{"h":204,"s":85,"l":53},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-13T14:27:54.155Z","updatedAt":"2026-08-22T08:26:35.294Z","publishedAt":"2026-08-13T14:27:54.151Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Project-Deep-Links-24t6RE.js@Mz3pquc41xvTrH3hbH4r","previewUrl":"https://modal-deep-links.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"Mz3pquc41xvTrH3hbH4r","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-08-13T14:27:54.814Z","updatedAt":"2026-08-13T14:27:54.814Z","reported":false}}],"$L5f"]

Suggested for you