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

A project index for Framer whose preview follows the cursor, and still works when there is no cursor at all.

List your work as rows: a title, a line of meta, a year, a link (to one of your own pages or anywhere else) and an image. Hover a row and its image follows the pointer beside it, flipping to the other side near the edge of the screen so it is never cut off. A round disc reading View rides on the pointer over linked rows.

On a phone there is nothing to hover, so a tap opens the row's image right under it with a link to the project, and a second tap follows the link. On a keyboard each linked row is a real link: Tab walks the rows, the preview follows focus, and Escape hides it.

A row with no image draws a poster in its own colour, so the list works before the photographs arrive. Every row's image is requested with the page, not on its first hover, and with reduced motion on the preview moves without easing.

Every title and link is in the page's own HTML, and nothing shifts when the page comes alive. Rows are typed in the property panel, not bound to a CMS collection.

The preview's size, shape, placement, gap and follow speed, the disc, both fonts, every colour, the dimming and the row spacing are controls.

After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.

Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev

5a:[["$","$L5d",null,{"post":{"id":"01a0cda8-caee-73aa-a951-6fa5a2bc54a0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2a3b7013-68f9-4044-aeeb-2e017c0907e5","name":"Majed Monem","slug":"majed-monem","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/rz7b98pc","followed":false,"followsYou":false},"media":[],"resources":[{"id":"kv84yPWU1m6YIJwJhhUG","resolved":true,"title":"Work Index","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A project index for Framer whose preview follows the cursor, and still works when there is no cursor at all."}]},{"type":"paragraph","content":[{"type":"text","text":"List your work as rows: a title, a line of meta, a year, a link (to one of your own pages or anywhere else) and an image. Hover a row and its image follows the pointer beside it, flipping to the other side near the edge of the screen so it is never cut off. A round disc reading View rides on the pointer over linked rows."}]},{"type":"paragraph","content":[{"type":"text","text":"On a phone there is nothing to hover, so a tap opens the row's image right under it with a link to the project, and a second tap follows the link. On a keyboard each linked row is a real link: Tab walks the rows, the preview follows focus, and Escape hides it."}]},{"type":"paragraph","content":[{"type":"text","text":"A row with no image draws a poster in its own colour, so the list works before the photographs arrive. Every row's image is requested with the page, not on its first hover, and with reduced motion on the preview moves without easing."}]},{"type":"paragraph","content":[{"type":"text","text":"Every title and link is in the page's own HTML, and nothing shifts when the page comes alive. Rows are typed in the property panel, not bound to a CMS collection."}]},{"type":"paragraph","content":[{"type":"text","text":"The preview's size, shape, placement, gap and follow speed, the disc, both fonts, every colour, the dimming and the row spacing are controls."}]},{"type":"paragraph","content":[{"type":"text","text":"After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it."}]},{"type":"paragraph","content":[{"type":"text","text":"Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev"}]}]},"introduction":"Hover index that works on phones","slug":"work-index","author":{"framerUserId":"2a3b7013-68f9-4044-aeeb-2e017c0907e5","name":"Majed Monem","slug":"majed-monem","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/rz7b98pc","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2a3b7013-68f9-4044-aeeb-2e017c0907e5/01a0cda8-3fb8-707d-9b9f-1c0a970f535f.jpg","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-23T09:46:25.858Z","updatedAt":"2026-09-23T09:46:25.858Z","publishedAt":"2026-09-23T09:46:25.855Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://safe-book-192450.framer.app/work-index","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_Uo69CpFiNth81wYRkS0fqaMOgn9HQHY9eJgUg33GtAP","workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"XE9uHYPsEgxjhNK11N9z","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-23T09:46:26.414Z","updatedAt":"2026-09-23T09:46:26.414Z","reported":false}}],"$L5f"]

Suggested for you