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: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"] 5a:[["$","$L5d",null,{"post":{"id":"019fa9f4-4919-7578-814d-609b200360b8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"1047b74d-5070-4dc3-96e4-4ed11c0ee4ac","name":"Sumeet Shinde","slug":"sumeet-shinde","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"iek3En0wQgnsf66GkZ1d","resolved":true,"title":"Filmstrip Index","body":"

Full-bleed images scroll vertically while a thumbnail strip stays pinned to the centre of the screen. As each image passes behind the strip, its thumbnail lifts, magnifies, and takes a glass frame. Click any thumbnail to jump straight to that image.

The strip does three jobs at once. It indexes the set, it shows position, and it navigates.

Three material styles: Plain, Glass, Lens. Three highlight behaviours: Snap, Continuous, Reticle. Four strip placements, with a separate placement and cell scale for mobile.

Set a focal point per image so faces and product edges survive the crop on phones. Set Nav Offset to clear a fixed header. Turn on Canvas Preview to see a mid-scroll state while you design.

Respects reduced motion. Falls back cleanly where backdrop filter is unsupported. Keyboard accessible with arrow keys, Home, and End.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Full-bleed images scroll vertically while a thumbnail strip stays pinned to the centre of the screen. As each image passes behind the strip, its thumbnail lifts, magnifies, and takes a glass frame. Click any thumbnail to jump straight to that image."}]},{"type":"paragraph","content":[{"type":"text","text":"The strip does three jobs at once. It indexes the set, it shows position, and it navigates."}]},{"type":"paragraph","content":[{"type":"text","text":"Three material styles: Plain, Glass, Lens. Three highlight behaviours: Snap, Continuous, Reticle. Four strip placements, with a separate placement and cell scale for mobile."}]},{"type":"paragraph","content":[{"type":"text","text":"Set a focal point per image so faces and product edges survive the crop on phones. Set Nav Offset to clear a fixed header. Turn on Canvas Preview to see a mid-scroll state while you design."}]},{"type":"paragraph","content":[{"type":"text","text":"Respects reduced motion. Falls back cleanly where backdrop filter is unsupported. Keyboard accessible with arrow keys, Home, and End."}]}]},"introduction":"Pinned thumbnail strip that jumps","slug":"filmstrip-index","author":{"framerUserId":"1047b74d-5070-4dc3-96e4-4ed11c0ee4ac","name":"Sumeet Shinde","slug":"sumeet-shinde","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1047b74d-5070-4dc3-96e4-4ed11c0ee4ac/019fa9f3-d633-7788-a09e-ebb9f2b7ad56.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":2376,"height":1588}}],"post":null,"createdAt":"2026-07-28T18:19:46.477Z","updatedAt":"2026-07-28T18:40:17.764Z","publishedAt":"2026-07-28T18:19:46.474Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Filmstrip-Index-C2Z8EK.js@qk4fdkbEPcnIODZIHXT8","previewUrl":"https://teemus-labs.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"qk4fdkbEPcnIODZIHXT8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":14,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-28T18:19:46.841Z","updatedAt":"2026-07-28T18:19:46.841Z","reported":false}}],["$","$L5e",null,{"target":{"kind":"post","postId":"019fa9f4-4919-7578-814d-609b200360b8"},"postId":"019fa9f4-4919-7578-814d-609b200360b8","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you