51:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:Ta13,

Detail Reveal List is a responsive Framer component for creating elegant interactive showcases with animated image previews, expandable detail views, and smooth transitions between content.

Hover over an item to instantly reveal its preview image, then click to open a beautifully animated detail layout with extended content, customizable perks, and built-in navigation. Whether you're presenting services, projects, portfolios, or case studies, Detail Reveal List helps transform a simple list into a premium browsing experience.

Designed with flexibility in mind, the component adapts seamlessly to different screen sizes while remaining fully customizable through Framer's properties panel.

Use Cases

This component works especially well for:

service showcases
creative portfolios
featured projects
case studies

Perfect when you want visitors to browse multiple items while providing an elegant way to explore detailed information without leaving the page.

–––––––––––––––––––––––––––

Customization

Fully customizable via the Framer properties panel.

Built to fit a wide range of websites while remaining easy to customize — no code required.

–––––––––––––––––––––––––––

Responsive Behavior

Desktop

Displays an interactive list alongside a large animated preview image. Hovering over items instantly updates the preview, while clicking opens a fully detailed layout with smooth transitions.

Mobile

Below the mobile breakpoint, the layout switches to a vertical structure with the image positioned above the content, and scales fluidly across everything in between, from tablets down to phones.

–––––––––––––––––––––––––––

Features

Interactive image previews on hover
Animated detail view
Built-in item navigation
Separate preview and detail images
Multiple image reveal animations
List and grid layouts for perks
Fully responsive layout
Customizable typography
Adjustable spacing and sizing
Custom color controls
Static Preview mode for easier editing
No code required

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-75041aad-25ae-4fe3-99f2-619b86b739e6-all:/unified/creator/75041aad-25ae-4fe3-99f2-619b86b739e6/activity/":[{"data":[{"id":"019fc17d-9cc8-706a-8caf-917123ad930e","type":"component.created","target":{"type":"component","id":"gCnMVyDITUJtYKXdsZpa","preview":"Detail Reveal List","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/019fc17f-98c1-7051-a4d0-411ec84c5a7a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-02T08:01:02.664Z","latestAt":"2026-08-02T08:01:02.664Z"},{"id":"019f9d58-ccd4-7138-906d-4e6ebf5dfd70","type":"post.liked","target":{"type":"post","id":"019f9d37-6db1-70bb-be28-b6acce1e6ddd","preview":"So Sunday should be start with … weekly reset … what’s yours?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"So Sunday should be start with … weekly reset … what’s yours? "}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0a227160-0555-457e-b5ca-ae49925c888d/019f9d37-38b4-7064-b6f5-3b31b587121d.jpg","targetDeleted":false,"owned":false,"actions":{"postId":"019f9d37-6db1-70bb-be28-b6acce1e6ddd","like":{"count":38,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-26T07:34:30.352Z","latestAt":"2026-07-26T07:34:30.352Z"},{"id":"019f9d58-c3d0-765f-bda1-c3ce7994bd3c","type":"creator.followed","target":{"type":"creator","id":"0a227160-0555-457e-b5ca-ae49925c888d","preview":"Jitu Raut","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/29402/dp_jitu-F5EnDD6fBaxBZpbvQ8CXo9sE8JEVs8.png","slug":"jitu-raut","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-26T07:34:28.036Z","latestAt":"2026-07-26T07:34:28.036Z"},{"id":"019f9d1f-8b5a-760e-b82d-942e7873bbe0","type":"comment.liked","target":{"type":"comment","id":"019f9d05-8df0-707c-aa48-ce3f5b748104","preview":"Thank you!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thank you!","marks":[{"type":"bold"}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019f9509-5dba-72bb-a79a-01ae7678e251","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f9d05-8df0-707c-aa48-ce3f5b748104"},"repost":null}},"context":{"type":"post","id":"019f9509-5dba-72bb-a79a-01ae7678e251","preview":"Image Swap Reveal","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/019f9d02-897f-7368-b001-ad7ce0e2b78a.png","targetDeleted":false,"owned":true,"actions":{"postId":"019f9509-5dba-72bb-a79a-01ae7678e251","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-26T06:31:58.037Z","latestAt":"2026-07-26T06:31:58.037Z"},{"id":"019f98d5-c151-76e4-aff2-ae72ba1eb188","type":"creator.followed","target":{"type":"creator","id":"23af4f7c-bcc0-44bf-b2a1-0c62d31037de","preview":"Richa Jha","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/23af4f7c-bcc0-44bf-b2a1-0c62d31037de/p416zv2h","slug":"richa-jha","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-25T10:32:53.326Z","latestAt":"2026-07-25T10:32:53.326Z"},{"id":"019f9509-6086-703a-a94c-bd74152f087f","type":"component.created","target":{"type":"component","id":"Ak93owvzhxPzfPaTdDvF","preview":"Image Swap Reveal","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/019f9d02-897f-7368-b001-ad7ce0e2b78a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-24T16:50:47.558Z","latestAt":"2026-07-24T16:50:47.558Z"},{"id":"019f9011-2e81-73d1-97de-89b790cb7bd2","type":"creator.followed","target":{"type":"creator","id":"8547f9b6-cb91-4598-8d82-da320be55ee7","preview":"Iqtidar Tara","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/8547f9b6-cb91-4598-8d82-da320be55ee7/2wcpfxw4","slug":"iqtidar-hussain","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-23T17:41:12.927Z","latestAt":"2026-07-23T17:41:12.927Z"},{"id":"019f8d5d-8d4e-7069-91be-d52a1b6d8478","type":"creator.followed","target":{"type":"creator","id":"9b8396e0-0c3d-4388-a2cb-2e4ee29d3584","preview":"Sawal Arman","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9b8396e0-0c3d-4388-a2cb-2e4ee29d3584/74sexo7b","slug":"sawal-arman","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-23T05:05:46.306Z","latestAt":"2026-07-23T05:05:46.306Z"},{"id":"019f8504-8b4c-7443-8854-2fc3ca387cb5","type":"creator.followed","target":{"type":"creator","id":"daebf60b-d183-4dc3-9ee8-f5b070d8d8b4","preview":"Sidhanth Suman","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/64229/avatar-6Fkzk5vt1plyb4srBNDlylzUVliRDh.jpg","slug":"sidhanth-suman","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-21T14:11:35.364Z","latestAt":"2026-07-21T14:11:35.364Z"},{"id":"019f8504-86ee-71ba-8a52-2dbf5019f91a","type":"creator.followed","target":{"type":"creator","id":"10babd35-5d65-432b-a937-0d364862def7","preview":"Template Munk","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/987138/avatar-ab5H26kGpYaOYuIhN5LyueDxmZncxB.jpg","slug":"template-munk","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-21T14:11:34.248Z","latestAt":"2026-07-21T14:11:34.248Z"},{"id":"019f7a04-d452-712f-a61f-b2f8e3867748","type":"creator.followed","target":{"type":"creator","id":"2be06ac9-204d-4857-99cc-760f06f8c5e5","preview":"Abdelbaki Bahloul","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2be06ac9-204d-4857-99cc-760f06f8c5e5/mmqtf9z6","slug":"abdelbaki-bahloul","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-19T10:56:04.686Z","latestAt":"2026-07-19T10:56:04.686Z"},{"id":"019f79f1-d6ae-750b-8cee-9d300826603b","type":"creator.followed","target":{"type":"creator","id":"4646fd31-4eba-4c42-8e8e-68ef4f848fd8","preview":"Peush Jha","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/31194/avatar-4WafpCV2BWeCAJi7rkY7GjMf7YwL8z.jpg","slug":"peush-jha","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-19T10:35:20.102Z","latestAt":"2026-07-19T10:35:20.102Z"},{"id":"019f7965-4900-776d-94d0-3d3517a4e508","type":"post.liked","target":{"type":"post","id":"019f239a-69fb-7301-99c7-9298a7a48409","preview":"🤔 Quick question for the Framer community:\nWhat's the one Framer feature you can't live without?\nFor me, it's Components.\nBeing able to update multiple pages from a single source saves countless hours and keeps every project consistent.\nBut I'm curious...\nWould you choose:\n⚡ Components\n📱 Breakpoints\n🎨 Effects & Animations\n📝 CMS\n🤖 AI Tools\nDrop your answer below 👇\n#Framer #MadeWithFramer #FramerCommunity #NoCode #WebDesign #BuildInPublic","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"thinking","emoji":"🤔"}},{"type":"text","text":" Quick question for the Framer community:"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What's the one Framer feature you can't live without?"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"For me, it's Components."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Being able to update multiple pages from a single source saves countless hours and keeps every project consistent."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"But I'm curious..."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Would you choose:"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" Components"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Breakpoints"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Effects & Animations"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"memo","emoji":"📝"}},{"type":"text","text":" CMS"}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"robot","emoji":"🤖"}},{"type":"text","text":" AI Tools"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Drop your answer below "},{"type":"emoji","attrs":{"name":"point_down","emoji":"👇"}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"#Framer #MadeWithFramer #FramerCommunity #NoCode #WebDesign #BuildInPublic"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/76d8b624-6205-4cb4-9b6d-122921ef9ce1/ehizktxh","targetDeleted":false,"owned":false,"actions":{"postId":"019f239a-69fb-7301-99c7-9298a7a48409","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-19T08:01:48.794Z","latestAt":"2026-07-19T08:01:48.794Z"},{"id":"019f7600-790e-7701-8447-48a3b6f85dd7","type":"component.liked","target":{"type":"component","id":"yCjJWwWfP7OduJonmCOK","preview":"Project Hover","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/yCjJWwWfP7OduJonmCOK/project-hover-PMNdXNhuUXyyTzZ8IlNdAJoXSAoLi4","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-18T16:12:50.309Z","latestAt":"2026-07-18T16:12:50.309Z"},{"id":"019f7034-7dc5-748b-b168-ae66c5085cc5","type":"component.created","target":{"type":"component","id":"Bh1pYbL8YMFimHelfVV6","preview":"Steps Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/019f7033-8273-7763-b298-6735345153e5.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-17T13:11:56.101Z","latestAt":"2026-07-17T13:11:56.101Z"},{"id":"019f512a-af71-73ab-a575-0da1eea54464","type":"creator.followed","target":{"type":"creator","id":"1364828a-b355-487e-b32f-02641033b191","preview":"Tanjim","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28885/avatar-ctk9oa9jzfLVvcTdTNu7W0AGiFbWhc.jpg","slug":"tanjim-islam","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","slug":"xenafox","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-11T12:32:59.747Z","latestAt":"2026-07-11T12:32:59.747Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:75041aad-25ae-4fe3-99f2-619b86b739e6:/unified/posts/?creator=75041aad-25ae-4fe3-99f2-619b86b739e6&with=reposts":[{"data":[{"id":"019fc17d-9a78-75df-a88f-cae311c6bca0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","slug":"xenafox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"gCnMVyDITUJtYKXdsZpa","resolved":true,"title":"Detail Reveal List","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Detail Reveal List ","marks":[{"type":"bold"}]},{"type":"text","text":"is a responsive Framer component for creating elegant interactive showcases with animated image previews, expandable detail views, and smooth transitions between content."}]},{"type":"paragraph","content":[{"type":"text","text":"Hover over an item to instantly reveal its preview image, then click to open a beautifully animated detail layout with extended content, customizable perks, and built-in navigation. Whether you're presenting services, projects, portfolios, or case studies, Detail Reveal List helps transform a simple list into a premium browsing experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed with flexibility in mind, the component adapts seamlessly to different screen sizes while remaining fully customizable through Framer's properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"This component works especially well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"service showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"featured projects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"case studies"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect when you want visitors to browse multiple items while providing an elegant way to explore detailed information without leaving the page."}]},{"type":"paragraph","content":[{"type":"text","text":"–––––––––––––––––––––––––––"}]},{"type":"paragraph","content":[{"type":"text","text":"Customization","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable via the Framer properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Built to fit a wide range of websites while remaining easy to customize — no code required."}]},{"type":"paragraph","content":[{"type":"text","text":"–––––––––––––––––––––––––––"}]},{"type":"paragraph","content":[{"type":"text","text":"Responsive Behavior","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Desktop"}]},{"type":"paragraph","content":[{"type":"text","text":"Displays an interactive list alongside a large animated preview image. Hovering over items instantly updates the preview, while clicking opens a fully detailed layout with smooth transitions."}]},{"type":"paragraph","content":[{"type":"text","text":"Mobile"}]},{"type":"paragraph","content":[{"type":"text","text":"Below the mobile breakpoint, the layout switches to a vertical structure with the image positioned above the content, and scales fluidly across everything in between, from tablets down to phones."}]},{"type":"paragraph","content":[{"type":"text","text":"–––––––––––––––––––––––––––"}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive image previews on hover"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated detail view"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in item navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Separate preview and detail images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple image reveal animations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"List and grid layouts for perks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable spacing and sizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom color controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static Preview mode for easier editing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"No code required"}]}]}]}]},"introduction":"Interactive showcases with animate","slug":"detail-reveal-list","author":{"framerUserId":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","slug":"xenafox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/019fc17f-98c1-7051-a4d0-411ec84c5a7a.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-02T08:01:01.545Z","updatedAt":"2026-08-20T07:06:13.984Z","publishedAt":"2026-08-02T08:01:01.529Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/DetailRevealList-W1jtA0.js@rBulH4FEESOCIQ5N3eRX","previewUrl":"https://detail-reveal-list.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"rBulH4FEESOCIQ5N3eRX","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-02T08:01:02.072Z","updatedAt":"2026-08-02T08:01:02.072Z"},{"id":"019f9509-5dba-72bb-a79a-01ae7678e251","title":null,"body":"

Image Swap Reveal animates images on page load, scroll, hover, or tap with 10+ transition styles, including WebGL effects.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Swap Reveal animates images on page load, scroll, hover, or tap with 10+ transition styles, including WebGL effects.","marks":[{"type":"bold"}]}]}]},"author":{"framerUserId":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","slug":"xenafox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Ak93owvzhxPzfPaTdDvF","resolved":true,"title":"Image Swap Reveal","body":"

Image Swap Reveal lets you animate images on page load or as they enter the viewport using 10+ transition styles. It also lets you swap images on hover or tap using the same transitions, from clean clip-path animations to advanced WebGL-powered effects. Create engaging, interactive image experiences with minimal setup.

Features

The same 10+ transition styles power both entrance reveals and image swaps
Reveal images on page load or as they enter the viewport
Swap images on hover (desktop) or tap (mobile)
Includes classic clip-path transitions and WebGL-powered Liquid, Wave, and Mosaic effects
Fully responsive and works at any size

Demo

https://fearless-usage-980609.framer.app/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Swap Reveal ","marks":[{"type":"bold"}]},{"type":"text","text":"lets you animate images on page load or as they enter the viewport using 10+ transition styles. It also lets you swap images on hover or tap using the same transitions, from clean clip-path animations to advanced WebGL-powered effects. Create engaging, interactive image experiences with minimal setup."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The same 10+ transition styles power both entrance reveals and image swaps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal images on page load or as they enter the viewport"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Swap images on hover (desktop) or tap (mobile)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Includes classic clip-path transitions and WebGL-powered Liquid, Wave, and Mosaic effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive and works at any size"}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Demo","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"https://fearless-usage-980609.framer.app/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://fearless-usage-980609.framer.app/","target":"_blank"}}]}]}]},"introduction":"Reveal and swap images","slug":"image-swap-reveal","author":{"framerUserId":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","slug":"xenafox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/019f9d02-897f-7368-b001-ad7ce0e2b78a.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-24T16:50:46.045Z","updatedAt":"2026-07-26T06:00:23.601Z","publishedAt":"2026-07-24T16:50:46.039Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/ImageSwapReveal-UFhC8P.js@uVCNjIu6jfT2a6g1xs9Z","previewUrl":"https://fearless-usage-980609.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"uVCNjIu6jfT2a6g1xs9Z","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-07-26T06:16:14.060Z","createdAt":"2026-07-24T16:50:46.842Z","updatedAt":"2026-07-26T06:16:14.060Z"},{"id":"019f7034-7c57-7237-9733-faf54126802b","title":null,"body":"

Introducing Steps Flow — an animated timeline component with unlimited steps and a smooth flowing path.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Introducing Steps Flow — an animated timeline component with unlimited steps and a smooth flowing path."}]}]},"author":{"framerUserId":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","slug":"xenafox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Bh1pYbL8YMFimHelfVV6","resolved":true,"title":"Steps Flow","body":"

Animated Step Flow is a responsive timeline component designed to present any process in a clear and engaging way. Featuring a smooth animated path, fully customizable cards, and support for unlimited steps, it adapts seamlessly to projects of any size. Perfect for showcasing workflows, timelines, roadmaps, and business processes.

Preview https://steps-flow.framer.website/

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated Step Flow","marks":[{"type":"bold"}]},{"type":"text","text":" is a responsive timeline component designed to present any process in a clear and engaging way. Featuring a smooth animated path, fully customizable cards, and support for unlimited steps, it adapts seamlessly to projects of any size. Perfect for showcasing workflows, timelines, roadmaps, and business processes."}]},{"type":"paragraph","content":[{"type":"text","text":"Preview "},{"type":"text","text":"https://steps-flow.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://steps-flow.framer.website/","target":"_blank"}}]}]}]},"introduction":"Animated Step Flow","slug":"steps-flow","author":{"framerUserId":"75041aad-25ae-4fe3-99f2-619b86b739e6","name":"XenaFox","slug":"xenafox","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/ug088jg7","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/75041aad-25ae-4fe3-99f2-619b86b739e6/019f7033-8273-7763-b298-6735345153e5.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-17T13:11:55.410Z","updatedAt":"2026-07-31T11:41:47.963Z","publishedAt":"2026-07-17T13:11:55.400Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/StepsFlow-sYFgLb.js@6lahIk3YSyL4zf6fOKn9","previewUrl":"https://steps-flow.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"6lahIk3YSyL4zf6fOKn9","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":78,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-17T13:11:55.735Z","updatedAt":"2026-07-17T13:11:55.735Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]