61:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 62:T6db,

Scroll Storyboard

Create immersive, full-screen storytelling experiences in Framer with Scroll Storyboard — a scroll-driven component designed to bring your content to life through smooth, synchronized visual transitions.

Add your images, headings, and descriptions for each story step, and let the component handle the scrolling experience, content sequencing, image transitions, and progress state automatically.

How It Works

1. Add Your Images Choose an image for each step of your story. Each visual is displayed and transitioned as the user scrolls.

2. Add Your Content Add a heading and description for every story step to guide users through your narrative.

3. Let Scroll Storyboard Handle the Experience The component automatically synchronizes the images and content with the user's scroll position, creating a smooth and engaging storytelling flow.

Features

Scroll-driven image and content transitions
Full-screen visual storytelling layout
Synchronized text and image changes
Smooth step-by-step sequencing
Progress indicator
Responsive design
Easy to customize in Framer
Suitable for desktop and mobile experiences
Reusable across different sections and projects

Perfect For

Product showcases
Product launches
Case studies
Portfolio presentations
Brand stories
Campaign pages
Editorial layouts
Creative landing pages
Feature walkthroughs

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-2e4a656c-2846-4506-9071-aeb585f5920f-all:/unified/creator/2e4a656c-2846-4506-9071-aeb585f5920f/activity/":[{"data":[{"id":"01a0759a-61a5-735d-ad75-6faf7d698d4f","type":"component.created","target":{"type":"component","id":"zy7puDMSl8T0kqgVUJwZ","preview":"Scroll Storyboard","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2e4a656c-2846-4506-9071-aeb585f5920f/01a0756f-18d5-72ec-a70b-ec024e5c0427.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T07:24:06.949Z","latestAt":"2026-09-06T07:24:06.949Z"},{"id":"019ef8a0-ee65-73fe-b57f-5e422a421e0d","type":"comment.created","target":{"type":"post","id":"0198567c-8e34-7845-8b3f-19907ff43f90","preview":"PortfolioJay","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/53607/jayden-icwAyxOB3Lk6mPYnFnoWawYfrmlrAG","targetDeleted":false,"owned":false,"actions":{"postId":"0198567c-8e34-7845-8b3f-19907ff43f90","like":{"count":585,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ef8a0-ee52-770e-809d-2b63e8f94977","preview":"Saw this at the top of the marketplace, and now I understand why it’s there. Easy to remix, high-quality work, and a great way to showcase projects. Well deserved","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Saw this at the top of the marketplace, and now I understand why it’s there. Easy to remix, high-quality work, and a great way to showcase projects. Well deserved","marks":[{"type":"bold"}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"0198567c-8e34-7845-8b3f-19907ff43f90","like":{"count":2,"liked":false},"reply":{"parentCommentId":"019ef8a0-ee52-770e-809d-2b63e8f94977"},"repost":null}},"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-24T07:55:56.901Z","latestAt":"2026-06-24T07:55:56.901Z"},{"id":"019ef88d-56c1-7349-b790-88eb9dc56ded","type":"template.liked","target":{"type":"template","id":"68045","preview":"AgencyAI","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2391297-a6ed-4c5d-b0e4-a5953fa2bae9/h3ax06k2","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-24T07:49:00.148Z","latestAt":"2026-06-24T07:49:00.148Z"},{"id":"019ef882-ed36-73bd-a48b-0fbb64dc1710","type":"template.liked","target":{"type":"template","id":"59317","preview":"PortfolioDav","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2391297-a6ed-4c5d-b0e4-a5953fa2bae9/butdg2a0","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-24T07:47:31.558Z","latestAt":"2026-06-24T07:47:31.558Z"},{"id":"019ed43b-50f2-774a-974c-f512b4fc410d","type":"template.liked","target":{"type":"template","id":"53607","preview":"PortfolioJay","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/templates/53607/jayden-icwAyxOB3Lk6mPYnFnoWawYfrmlrAG","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-24T07:47:30.102Z","latestAt":"2026-06-24T07:47:30.102Z"},{"id":"019eedef-00e8-75be-abb4-640f98e7e4d1","type":"template.liked","target":{"type":"template","id":"67833","preview":"AgencyIO","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2391297-a6ed-4c5d-b0e4-a5953fa2bae9/f21hcd93","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-06-24T07:47:29.156Z","latestAt":"2026-06-24T07:47:29.156Z"},{"id":"019ef898-a4ee-72bc-abff-07aedd94ba97","type":"comment.created","target":{"type":"post","id":"019ef5b4-8cf8-76c8-8b85-6e7988f422b2","preview":"AgencyAI","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2391297-a6ed-4c5d-b0e4-a5953fa2bae9/h3ax06k2","targetDeleted":false,"owned":false,"actions":{"postId":"019ef5b4-8cf8-76c8-8b85-6e7988f422b2","like":{"count":212,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ef898-a4da-735b-95c7-20afe1eb07a9","preview":"The kind of quality that sets a benchmark. Modern, refined, and executed with an agency-level eye for detail.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The kind of quality that sets a benchmark. Modern, refined, and executed with an agency-level eye for detail.","marks":[{"type":"bold"}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ef5b4-8cf8-76c8-8b85-6e7988f422b2","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ef898-a4da-735b-95c7-20afe1eb07a9"},"repost":null}},"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-24T07:46:53.806Z","latestAt":"2026-06-24T07:46:53.806Z"},{"id":"019ef884-e983-7485-bfd7-233f89711723","type":"comment.created","target":{"type":"post","id":"019e641b-2ec2-7bd3-93d8-5a70ea77d032","preview":"PortfolioDav","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2391297-a6ed-4c5d-b0e4-a5953fa2bae9/butdg2a0","targetDeleted":false,"owned":false,"actions":{"postId":"019e641b-2ec2-7bd3-93d8-5a70ea77d032","like":{"count":317,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ef884-e96e-766d-87da-5a3ee40ebe38","preview":"Beautifully crafted. It looks premium, but more importantly, it solves the core purpose of a portfolio: helping your work shine…","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Beautifully crafted. It looks premium, but more importantly, it solves the core purpose of a portfolio: helping your work shine…"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019e641b-2ec2-7bd3-93d8-5a70ea77d032","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019ef884-e96e-766d-87da-5a3ee40ebe38"},"repost":null}},"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-24T07:25:20.643Z","latestAt":"2026-06-24T07:25:20.643Z"},{"id":"019eedf2-0a19-743c-9cdd-7e4ed018c05a","type":"comment.created","target":{"type":"post","id":"019eeb53-e5d7-7617-8ad5-9a595cd8826a","preview":"AgencyIO","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c2391297-a6ed-4c5d-b0e4-a5953fa2bae9/f21hcd93","targetDeleted":false,"owned":false,"actions":{"postId":"019eeb53-e5d7-7617-8ad5-9a595cd8826a","like":{"count":216,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019eedf2-0769-77fe-bdf8-466976ff219d","preview":"Gave this template a quick remix to see how it works under the hood. The design is clean, the UX feels thoughtful, and implementation is much smoother than expected. Loved it overall","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Gave this template a quick remix to see how it works under the hood. The design is clean, the UX feels thoughtful, and implementation is much smoother than expected. Loved it overall "}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019eeb53-e5d7-7617-8ad5-9a595cd8826a","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019eedf2-0769-77fe-bdf8-466976ff219d"},"repost":null}},"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-22T06:08:43.033Z","latestAt":"2026-06-22T06:08:43.033Z"},{"id":"019ed6d7-66ce-7228-b978-e4e732992de4","type":"post.liked","target":{"type":"post","id":"019ed6a1-6af3-72ef-974b-6125a15e44f4","preview":"ok","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"ok"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed6a1-6af3-72ef-974b-6125a15e44f4","like":{"count":33,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T18:28:21.322Z","latestAt":"2026-06-17T18:28:21.322Z"},{"id":"019ed6bb-da70-72e3-8b8e-543431e50751","type":"comment.created","target":{"type":"post","id":"019ed691-fe4b-749c-b78b-c4f7732c109b","preview":"🚀 Just submitted Portfome Agent to the Framer Agents Hackathon!\nI started with one of my own Framer portfolio templates and explored how Framer Agents can personalize, manage, and update an entire website using prompts, attachments, URLs, and existing content.\n✨ Demonstrated: \n• Personalizing a portfolio from a single prompt\n • Reading a résumé (.md file) and updating experience\n • Fetching projects from a ThemeForest URL\n • Generating service content and matching icons\n • Adapting contact forms to business workflows \n• Reusing existing site content across sections\nEach section includes the Original version, AI Agent version, exact prompt used, and the value provided by the agent.\n🔗 https://portfome-agent.framer.website/\nBuilt with @Framer Agents. Thanks @Framer for the amazing hackathon! 🚀","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Just submitted "},{"type":"text","text":"Portfome Agent","marks":[{"type":"bold"}]},{"type":"text","text":" to the Framer Agents Hackathon!"}]},{"type":"paragraph","content":[{"type":"text","text":"I started with one of my own Framer portfolio templates and explored how Framer Agents can personalize, manage, and update an entire website using prompts, attachments, URLs, and existing content."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Demonstrated: "}]},{"type":"paragraph","content":[{"type":"text","text":"• Personalizing a portfolio from a single prompt"}]},{"type":"paragraph","content":[{"type":"text","text":" • Reading a résumé (.md file) and updating experience"}]},{"type":"paragraph","content":[{"type":"text","text":" • Fetching projects from a ThemeForest URL"}]},{"type":"paragraph","content":[{"type":"text","text":" • Generating service content and matching icons"}]},{"type":"paragraph","content":[{"type":"text","text":" • Adapting contact forms to business workflows "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reusing existing site content across sections"}]},{"type":"paragraph","content":[{"type":"text","text":"Each section includes the Original version, AI Agent version, exact prompt used, and the value provided by the agent."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"link","emoji":"🔗"}},{"type":"text","text":" "},{"type":"text","text":"https://portfome-agent.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://portfome-agent.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built with "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" Agents. Thanks "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" for the amazing hackathon! "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed691-fe4b-749c-b78b-c4f7732c109b","like":{"count":40,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019ed6bb-da43-76ba-82a6-8cee54de3bdb","preview":"A+ use of Agent 3.0. Clean, personal, and genuinely impressive.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A+ use of Agent 3.0. Clean, personal, and genuinely impressive."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019ed691-fe4b-749c-b78b-c4f7732c109b","like":{"count":2,"liked":false},"reply":{"parentCommentId":"019ed6bb-da43-76ba-82a6-8cee54de3bdb"},"repost":null}},"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T17:58:15.920Z","latestAt":"2026-06-17T17:58:15.920Z"},{"id":"019ed6a5-924b-7059-9021-d308b262b95d","type":"post.liked","target":{"type":"post","id":"019ed691-fe4b-749c-b78b-c4f7732c109b","preview":"🚀 Just submitted Portfome Agent to the Framer Agents Hackathon!\nI started with one of my own Framer portfolio templates and explored how Framer Agents can personalize, manage, and update an entire website using prompts, attachments, URLs, and existing content.\n✨ Demonstrated: \n• Personalizing a portfolio from a single prompt\n • Reading a résumé (.md file) and updating experience\n • Fetching projects from a ThemeForest URL\n • Generating service content and matching icons\n • Adapting contact forms to business workflows \n• Reusing existing site content across sections\nEach section includes the Original version, AI Agent version, exact prompt used, and the value provided by the agent.\n🔗 https://portfome-agent.framer.website/\nBuilt with @Framer Agents. Thanks @Framer for the amazing hackathon! 🚀","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Just submitted "},{"type":"text","text":"Portfome Agent","marks":[{"type":"bold"}]},{"type":"text","text":" to the Framer Agents Hackathon!"}]},{"type":"paragraph","content":[{"type":"text","text":"I started with one of my own Framer portfolio templates and explored how Framer Agents can personalize, manage, and update an entire website using prompts, attachments, URLs, and existing content."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Demonstrated: "}]},{"type":"paragraph","content":[{"type":"text","text":"• Personalizing a portfolio from a single prompt"}]},{"type":"paragraph","content":[{"type":"text","text":" • Reading a résumé (.md file) and updating experience"}]},{"type":"paragraph","content":[{"type":"text","text":" • Fetching projects from a ThemeForest URL"}]},{"type":"paragraph","content":[{"type":"text","text":" • Generating service content and matching icons"}]},{"type":"paragraph","content":[{"type":"text","text":" • Adapting contact forms to business workflows "}]},{"type":"paragraph","content":[{"type":"text","text":"• Reusing existing site content across sections"}]},{"type":"paragraph","content":[{"type":"text","text":"Each section includes the Original version, AI Agent version, exact prompt used, and the value provided by the agent."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"link","emoji":"🔗"}},{"type":"text","text":" "},{"type":"text","text":"https://portfome-agent.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://portfome-agent.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built with "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" Agents. Thanks "},{"type":"mention","attrs":{"id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","slug":"framer","label":"Framer","mentionSuggestionChar":"@"}},{"type":"text","text":" for the amazing hackathon! "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019ed691-fe4b-749c-b78b-c4f7732c109b","like":{"count":40,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","slug":"rishikaraix","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-06-17T17:33:55.655Z","latestAt":"2026-06-17T17:33:55.655Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:2e4a656c-2846-4506-9071-aeb585f5920f:/unified/posts/?creator=2e4a656c-2846-4506-9071-aeb585f5920f&with=reposts":[{"data":[{"id":"01a0759a-5fa4-72b8-84ac-cb44b0484e0b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","slug":"rishikaraix","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"zy7puDMSl8T0kqgVUJwZ","resolved":true,"title":"Scroll Storyboard","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll Storyboard"}]},{"type":"paragraph","content":[{"type":"text","text":"Create immersive, full-screen storytelling experiences in Framer with Scroll Storyboard — a scroll-driven component designed to bring your content to life through smooth, synchronized visual transitions."}]},{"type":"paragraph","content":[{"type":"text","text":"Add your images, headings, and descriptions for each story step, and let the component handle the scrolling experience, content sequencing, image transitions, and progress state automatically."}]},{"type":"customHeading","content":[{"type":"text","text":"How It Works"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"1. Add Your Images","marks":[{"type":"bold"}]},{"type":"text","text":" Choose an image for each step of your story. Each visual is displayed and transitioned as the user scrolls."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Add Your Content","marks":[{"type":"bold"}]},{"type":"text","text":" Add a heading and description for every story step to guide users through your narrative."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Let Scroll Storyboard Handle the Experience","marks":[{"type":"bold"}]},{"type":"text","text":" The component automatically synchronizes the images and content with the user's scroll position, creating a smooth and engaging storytelling flow."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-driven image and content transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full-screen visual storytelling layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Synchronized text and image changes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth step-by-step sequencing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progress indicator"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive design"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easy to customize in Framer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Suitable for desktop and mobile experiences"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reusable across different sections and projects"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio presentations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand stories"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Campaign pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Feature walkthroughs"}]}]}]}]},"introduction":"Scroll-driven Storyboard","slug":"scroll-storyboard","author":{"framerUserId":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","slug":"rishikaraix","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2e4a656c-2846-4506-9071-aeb585f5920f/01a0756f-18d5-72ec-a70b-ec024e5c0427.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1280,"height":960}}],"post":null,"createdAt":"2026-09-06T07:24:05.913Z","updatedAt":"2026-09-06T07:24:05.913Z","publishedAt":"2026-09-06T07:24:05.910Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scroll-storyboard.framer.website/","price":"3","paymentUrl":"https://designloomstore.lemonsqueezy.com/checkout/buy/43caf4da-4a90-4bd9-9257-46b205838c1a","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"sJOZaztLM3BTz2Ncdz3o","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-09-06T07:24:06.437Z","updatedAt":"2026-09-06T07:24:06.437Z"},{"id":"019cc45a-19f5-727b-9e28-b84cc80b324c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","slug":"rishikaraix","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"r5vqdczvsrpjaX213LWO","resolved":true,"title":"Scroll Progress Button","body":"

Why this component?

Modern websites are often long and content-heavy. A scroll progress button helps users understand how far they have navigated through a page while also providing a quick way to return to the top.

This component adds a visual progress indicator around the button that fills as users scroll, improving navigation and enhancing the browsing experience with a clean, minimal interaction.

Highlights:

• Dynamic progress border that fills as users scroll

• Smooth scroll-to-top interaction with a single click

• Auto visibility – appears only after scrolling begins

• Lightweight and optimized for performance

• Clean, production-ready structure built specifically for Framer sites

Customizable features:

• Custom border color to match brand styles

• Custom background color

• Custom icon upload for full design flexibility

","bodyJson":null,"introduction":"Progres border showing page scroll state","slug":"scrollprogressbutton","author":{"framerUserId":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","slug":"rishikaraix","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/r5vqdczvsrpjaX213LWO/scrollprogressbutton-P0RxPNFxSE9obZy7AF6XlN9Prsi63n","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-20T19:56:43.007Z","updatedAt":"2026-03-06T11:20:07.285Z","publishedAt":"2026-03-06T18:12:45.173Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scroll-progress-button.framer.website/","price":"1","paymentUrl":"https://designloomstore.lemonsqueezy.com/checkout/buy/500c7664-0eac-4179-beba-49d6bccf9e7f","workshop":true,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"fSBNjhMHLYbU7KMfHcBj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-06T18:12:45.173Z","updatedAt":"2026-03-06T18:12:45.173Z"},{"id":"019c4be3-6ff3-7d14-a74b-560527886e07","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","slug":"rishikaraix","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"oBY6zB4lnUJcvDNK5r6s","resolved":true,"title":"Magnetic Carousel","body":"

About this component

Magnetic Carousel is an interactive image carousel with a smooth magnetic hover and click effect.Each card pops up on hover and expands on click, creating a premium browsing experience.

Move your cursor to attract each card with natural motion and glide through the carousel effortlessly.Perfect for product showcases, portfolios and hero sections where you want your visuals to feel alive and engaging.

Properties• Add your own images easily• Magnetic hover interaction• Smooth click navigation• Responsive for all breakpoints, That's it. Grab it and customize in minutes

","bodyJson":null,"introduction":"A smooth magnetic hover & click carousel","slug":"magnetic-carousel","author":{"framerUserId":"2e4a656c-2846-4506-9071-aeb585f5920f","name":"Rishika Rai","slug":"rishikaraix","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/642033/avatar-Xmc3x0Qgwudy8qUjWtNwrWdx0uXjAc.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/y6hCKKNlp7m3qsYeBnw2/magnetic-carousel-2k98VeN53AKFhp49k01HMYoDFvM0WQ","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-18T14:28:24.276Z","updatedAt":"2026-02-10T11:35:42.888Z","publishedAt":"2026-02-11T08:48:42.483Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://magnetic-carousell.framer.website/","price":"3","paymentUrl":"https://designloomstore.lemonsqueezy.com/checkout/buy/b060f9d2-49c5-490b-b0e6-a04d36d23900","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"cMvKoRuSvghS2559wUwJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-11T08:48:42.483Z","updatedAt":"2026-02-11T08:48:42.483Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L63"}]