5e:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3q5d1avmchlp0.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/149w-u4or12up.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/17pioewhhzr_j.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/3fr1ev83fgwky.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js"],"PostDetailCard"] 5f:T803,

Interactive CMS Preview Card (300-Word Description)

Designed for high-impact content previews, this Framer dynamic CMS card component combines sophisticated interactivity with complete content flexibility. It operates in two modes: a streamlined preview that smoothly reveals the full description upon clicking, and a scrolling mode that includes a dynamic zoom interaction. The image canvas can map directly from your dynamic collection, showcasing dynamic media within an automatic scaling container. Upon clicking, the image seamlessly transitions from full color to monochrome, providing a distinct, visceral visual confirmation that the card is now in its detailed "open" state.

Enhanced Interactions

Scroll-Triggered Image Zoom: Integrated with Framer’s scroll events, the primary preview image applies a smooth, controllable scale-up on scroll-down and scale-down on scroll-up. This creates a powerful layer of cinematic depth and parallax-like effect as the user navigates the layout, making the static card feel dynamic and engaging before interaction.
Click-to-Monochrome Toggle: Clicking anywhere on the card’s body activates an immediate visual filter change, transforming the media image from its original color palette to a stark monochrome. This filter is coupled with the description expansion, providing tactile and immediate semantic feedback.
Accordion Description & Navigation: The click event smoothly reveals the previously hidden full multi-line description.

Customization & Controls

Every asset—media, descriptive copy, tags, and link destinations—is completely dynamic, linking directly to CMS dynamic field values. Integrated Framer canvas controls provide full visual theme editing for border-radius, padding, background blur, and color tokens, allowing for comprehensive brand integration.

5b:[["$","$L5e",null,{"post":{"id":"01a099b8-9fea-77cd-8553-aa8d6a72c7f9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"dd31c0e8-94c4-4870-bf97-534b2c7041ef","name":"Krav Studios (Gourav)","slug":"gourav-kundu","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"2NSbxYRmrrlKjfG8bYdd","resolved":true,"title":"CMS Holder","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive CMS Preview Card (300-Word Description)","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Designed for high-impact content previews, this Framer dynamic CMS card component combines sophisticated interactivity with complete content flexibility. It operates in two modes: a streamlined preview that smoothly reveals the full description upon clicking, and a scrolling mode that includes a dynamic zoom interaction. The image canvas can map directly from your dynamic collection, showcasing dynamic media within an automatic scaling container. Upon clicking, the image seamlessly transitions from full color to monochrome, providing a distinct, visceral visual confirmation that the card is now in its detailed \"open\" state."}]},{"type":"paragraph","content":[{"type":"text","text":"Enhanced Interactions","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-Triggered Image Zoom:","marks":[{"type":"bold"}]},{"type":"text","text":" Integrated with Framer’s scroll events, the primary preview image applies a smooth, controllable scale-up on scroll-down and scale-down on scroll-up. This creates a powerful layer of cinematic depth and parallax-like effect as the user navigates the layout, making the static card feel dynamic and engaging before interaction."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click-to-Monochrome Toggle:","marks":[{"type":"bold"}]},{"type":"text","text":" Clicking anywhere on the card’s body activates an immediate visual filter change, transforming the media image from its original color palette to a stark monochrome. This filter is coupled with the description expansion, providing tactile and immediate semantic feedback."}]},{"type":"paragraph"}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accordion Description & Navigation:","marks":[{"type":"bold"}]},{"type":"text","text":" The click event smoothly reveals the previously hidden full multi-line description."}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customization & Controls","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Every asset—media, descriptive copy, tags, and link destinations—is completely dynamic, linking directly to CMS dynamic field values. Integrated Framer canvas controls provide full visual theme editing for border-radius, padding, background blur, and color tokens, allowing for comprehensive brand integration."}]}]},"introduction":"ZOOM Effect CMS card","slug":"cms-holder","author":{"framerUserId":"dd31c0e8-94c4-4870-bf97-534b2c7041ef","name":"Krav Studios (Gourav)","slug":"gourav-kundu","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/dd31c0e8-94c4-4870-bf97-534b2c7041ef/01a099b8-6e09-761b-98fd-42eea8f6cf27.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":3200,"height":1881}}],"post":null,"createdAt":"2026-09-13T07:43:28.094Z","updatedAt":"2026-09-22T09:58:46.798Z","publishedAt":"2026-09-13T07:43:28.088Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HOLDER-4FrGCB.js@9KKOD8haWRmNBhQsCYLi","previewUrl":"https://higher-signposts-107800.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"9KKOD8haWRmNBhQsCYLi","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-13T07:43:28.746Z","updatedAt":"2026-09-13T07:43:28.746Z","reported":false}}],"$L60"]

Suggested for you