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

5a:[["$","$L5d",null,{"post":{"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":"$5e","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","reported":false}}],"$L5f"]

Suggested for you