5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T729,

The slider that tells your story.

A cinematic portfolio slider with floating neighbor cards, 4 transition effects, and full responsive control - from desktop to mobile.

About this Component

NarrativeSlider delivers a full narrative experience: a hero card with title and description anchored at opposite ends, flanked by ghosted neighbor cards that fade in and out. Four transition styles - Crossfade, Slide, Ken Burns, and Clip Reveal - match any brand mood. Every detail is designer-controlled via 30+ property controls. Responsive breakpoints handle everything automatically.

Demo: https://narrativeslider.framer.website/

Perfect for

Creative Agencies: editorial case study presentation
Freelance Portfolios: curated, narrative-driven showcase
SaaS Landing Pages: features and testimonials with motion
Photo Studios: full-height cards with Ken Burns effect

Feature Highlights

Cinematic Transitions: 4 animation styles for every brand
Living Neighbor Cards: soft fade previews on both sides
Smart Responsiveness: desktop fixed → tablet fluid → mobile stacked
Total Design Control: 30+ live-editable property controls
Drag Anywhere: swipe on image, text, or white space

Refund Policy

All sales are final. Digital assets cannot be returned once accessed. We encourage you to explore the live preview before purchasing. For technical issues, reach out: renan.uxui@gmail.com

5a:[["$","$L5d",null,{"post":{"id":"019f8f67-776c-722f-873b-e413d66c856d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"14a03a1d-aa18-4ffb-ace6-5fb92eb40056","name":"Renan Orn","slug":"renan-orn","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/859496/avatar-U3yDzJ9KhO2XlewlBeTuVqPWyHhgje.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Aek6QIK2WhjCHUtLd0EE","resolved":true,"title":"NarrativeSlider","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The slider that tells your story.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A cinematic portfolio slider with floating neighbor cards, 4 transition effects, and full responsive control - from desktop to mobile."}]},{"type":"paragraph","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"NarrativeSlider delivers a full narrative experience: a hero card with title and description anchored at opposite ends, flanked by ghosted neighbor cards that fade in and out. Four transition styles - Crossfade, Slide, Ken Burns, and Clip Reveal - match any brand mood. Every detail is designer-controlled via 30+ property controls. Responsive breakpoints handle everything automatically."}]},{"type":"paragraph","content":[{"type":"text","text":"Demo:","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"text","text":"https://narrativeslider.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://narrativeslider.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative Agencies: editorial case study presentation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Freelance Portfolios: curated, narrative-driven showcase"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS Landing Pages: features and testimonials with motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photo Studios: full-height cards with Ken Burns effect"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Feature Highlights","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cinematic Transitions: 4 animation styles for every brand"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Living Neighbor Cards: soft fade previews on both sides"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart Responsiveness: desktop fixed → tablet fluid → mobile stacked"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Total Design Control: 30+ live-editable property controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag Anywhere: swipe on image, text, or white space"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"All sales are final. Digital assets cannot be returned once accessed. We encourage you to explore the live preview before purchasing. For technical issues, reach out: "},{"type":"text","text":"renan.uxui@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:renan.uxui@gmail.com","target":"_blank"}}]}]}]},"introduction":"The slider that tells your story","slug":"narrativeslider","author":{"framerUserId":"14a03a1d-aa18-4ffb-ace6-5fb92eb40056","name":"Renan Orn","slug":"renan-orn","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/859496/avatar-U3yDzJ9KhO2XlewlBeTuVqPWyHhgje.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/14a03a1d-aa18-4ffb-ace6-5fb92eb40056/019f8f67-5910-709a-b677-1ef6271b0c1f.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-23T14:35:50.143Z","updatedAt":"2026-08-03T11:40:07.014Z","publishedAt":"2026-07-23T14:35:50.140Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://narrativeslider.framer.website/","price":"2","paymentUrl":"https://renanuxui.gumroad.com/l/narrativeslider","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"URlX3gSxbO4WxWgBk0iG","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-23T14:35:50.508Z","updatedAt":"2026-07-23T14:35:50.508Z","reported":false}}],"$L5f"]

Suggested for you