50: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"] 51:T6a1,

A modern call-to-action button featuring a smooth expanding hover animation.

As users hover over the button, the icon container expands while the arrow slides naturally to the right, creating a subtle yet engaging micro-interaction. The animation adds visual feedback without overwhelming the interface, making it perfect for modern websites and landing pages.

Built entirely with native Framer components, Motion Button is easy to customize and integrate into any project. Whether you're building a portfolio, SaaS product, agency website, or marketing page, it provides a polished CTA that feels responsive and intuitive.

Features

Smooth expanding hover animation
Sliding arrow micro-interaction
Clean and modern design
Responsive across desktop and mobile
Built with native Framer components
Ready to use in any Framer project

Customization

Customize the button to match your design system with editable properties, including:

Button label
Link destination
Colors
Typography
Shadow
Icon
Border radius
Animation

Perfect For

Landing pages
Portfolio websites
SaaS products
Agency websites
Marketing websites
Primary call-to-action buttons

Simply drop the component into your project, customize it to fit your brand, and create a more engaging call-to-action experience with a smooth, polished hover interaction.

52:T5fb,

Minimal Accordion

A clean and intuitive FAQ accordion component designed to organize questions and answers efficiently.

It allows visitors to expand only the information they need, making it easy to present a large amount of content in a clear and compact format. It works well for FAQ sections, service introductions, product information, policies, help pages, and other content-heavy areas.

Its minimal design blends naturally with a wide range of website styles. You can customize the text, colors, and other visual details to match your project.

Key Features

Expandable accordion interaction for questions and answers
Well suited for FAQs and informational content
Clean and minimal visual style
Question numbering and open/close state icons
Responsive layout for desktop and mobile
Customizable text and colors
Ready to use in Framer projects

Use Cases

Frequently asked questions
Service and product information
Pricing policies and usage guides
Shipping, returns, and payment information
Customer support and help content
Project introductions and detailed information

Add your content, adjust the styling to fit your project, and use it right away. Minimal Accordion helps you create a clear and well-organized information section without unnecessary complexity.

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-3937fe09-b3f1-47fb-b007-d1616e82f908-all:/unified/creator/3937fe09-b3f1-47fb-b007-d1616e82f908/activity/":[{"data":[{"id":"019f6989-e63f-760a-9a32-61b3bd25a75d","type":"post.liked","target":{"type":"post","id":"019f6778-744f-759c-82c4-67dd2d6e423c","preview":"A or B","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A or B"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cf79b33d-8ec3-4bf2-8cf4-822e63f6c190/019f6778-61b6-70ba-bc22-518666963797.png","targetDeleted":false,"owned":false,"actions":{"postId":"019f6778-744f-759c-82c4-67dd2d6e423c","like":{"count":40,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":1,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"3937fe09-b3f1-47fb-b007-d1616e82f908","name":"Kanghyun Kim","avatar":"https://framerusercontent.com/avatars/users/3937fe09-b3f1-47fb-b007-d1616e82f908/MSqrHzJUh","slug":"-c6fvu8","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-16T06:07:52.890Z","latestAt":"2026-07-16T06:07:52.890Z"},{"id":"019f6289-2e1b-718c-bca2-5f65137c9afc","type":"component.created","target":{"type":"component","id":"k95P37n0lWE8NUOhRW0J","preview":"Arrow Motion Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3937fe09-b3f1-47fb-b007-d1616e82f908/019f6289-0efc-75ff-9d20-14e2c2453e85.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"3937fe09-b3f1-47fb-b007-d1616e82f908","name":"Kanghyun Kim","avatar":"https://framerusercontent.com/avatars/users/3937fe09-b3f1-47fb-b007-d1616e82f908/MSqrHzJUh","slug":"-c6fvu8","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-14T21:29:45.243Z","latestAt":"2026-07-14T21:29:45.243Z"},{"id":"019f5049-5046-734a-980e-d301e2421f8c","type":"component.created","target":{"type":"component","id":"TVIiwmBg1G3FnElDP0XH","preview":"Minimal Accordion","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3937fe09-b3f1-47fb-b007-d1616e82f908/019f5044-7000-76dd-b026-7b8af78ef7c6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"3937fe09-b3f1-47fb-b007-d1616e82f908","name":"Kanghyun Kim","avatar":"https://framerusercontent.com/avatars/users/3937fe09-b3f1-47fb-b007-d1616e82f908/MSqrHzJUh","slug":"-c6fvu8","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-11T08:26:49.798Z","latestAt":"2026-07-11T08:26:49.798Z"},{"id":"019f107c-1057-764a-becb-2446145933d3","type":"component.liked","target":{"type":"component","id":"AH6IcSLmB4Y4OL7tfMWb","preview":"Hover Mask Effect","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/AH6IcSLmB4Y4OL7tfMWb/hover-mask-9NsTuq8WzrylI5Dt6p71dtRJaPmWhq","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"3937fe09-b3f1-47fb-b007-d1616e82f908","name":"Kanghyun Kim","avatar":"https://framerusercontent.com/avatars/users/3937fe09-b3f1-47fb-b007-d1616e82f908/MSqrHzJUh","slug":"-c6fvu8","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-06-28T23:06:33.938Z","latestAt":"2026-06-28T23:06:33.938Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:3937fe09-b3f1-47fb-b007-d1616e82f908:/unified/posts/?creator=3937fe09-b3f1-47fb-b007-d1616e82f908&with=reposts":[{"data":[{"id":"019f6289-2cca-772f-8929-26e06d140d1a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3937fe09-b3f1-47fb-b007-d1616e82f908","name":"Kanghyun Kim","slug":"-c6fvu8","avatar":"https://framerusercontent.com/avatars/users/3937fe09-b3f1-47fb-b007-d1616e82f908/MSqrHzJUh","followed":false,"followsYou":false},"media":[],"resources":[{"id":"k95P37n0lWE8NUOhRW0J","resolved":true,"title":"Arrow Motion Button","body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A modern call-to-action button featuring a smooth expanding hover animation."}]},{"type":"paragraph","content":[{"type":"text","text":"As users hover over the button, the icon container expands while the arrow slides naturally to the right, creating a subtle yet engaging micro-interaction. The animation adds visual feedback without overwhelming the interface, making it perfect for modern websites and landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Built entirely with native Framer components, Motion Button is easy to customize and integrate into any project. Whether you're building a portfolio, SaaS product, agency website, or marketing page, it provides a polished CTA that feels responsive and intuitive."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth expanding hover animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sliding arrow micro-interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean and modern design"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive across desktop and mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built with native Framer components"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ready to use in any Framer project"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Customize the button to match your design system with editable properties, including:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Button label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Link destination"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS products"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Marketing websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Primary call-to-action buttons"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Simply drop the component into your project, customize it to fit your brand, and create a more engaging call-to-action experience with a smooth, polished hover interaction."}]}]},"introduction":"Animated arrow hover interaction","slug":"arrow-motion-button","author":{"framerUserId":"3937fe09-b3f1-47fb-b007-d1616e82f908","name":"Kanghyun Kim","slug":"-c6fvu8","avatar":"https://framerusercontent.com/avatars/users/3937fe09-b3f1-47fb-b007-d1616e82f908/MSqrHzJUh","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3937fe09-b3f1-47fb-b007-d1616e82f908/019f6289-0efc-75ff-9d20-14e2c2453e85.png","metadata":{"tint":{"h":210,"s":67,"l":9},"width":2390,"height":1994}}],"post":null,"createdAt":"2026-07-14T21:29:44.576Z","updatedAt":"2026-07-14T21:29:44.576Z","publishedAt":"2026-07-14T21:29:44.573Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Arrow-Motion-Button-MWWMQT.js@RuCL8XuY3Uo5Jy8wiWmj","previewUrl":"https://strong-arrow-209661.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"RuCL8XuY3Uo5Jy8wiWmj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-14T21:29:44.906Z","updatedAt":"2026-07-14T21:29:44.906Z"},{"id":"019f5049-4f19-7230-836d-e1cba708d583","title":null,"body":"

Just released Minimal Accordion — a clean and responsive FAQ component for Framer. Customize the questions, answers, and colors to match your project. Feel free to try it out and share your feedback!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just released Minimal Accordion — a clean and responsive FAQ component for Framer. Customize the questions, answers, and colors to match your project. Feel free to try it out and share your feedback!"}]}]},"author":{"framerUserId":"3937fe09-b3f1-47fb-b007-d1616e82f908","name":"Kanghyun Kim","slug":"-c6fvu8","avatar":"https://framerusercontent.com/avatars/users/3937fe09-b3f1-47fb-b007-d1616e82f908/MSqrHzJUh","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TVIiwmBg1G3FnElDP0XH","resolved":true,"title":"Minimal Accordion","body":"$52","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Minimal Accordion"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A clean and intuitive FAQ accordion component designed to organize questions and answers efficiently."}]},{"type":"paragraph","content":[{"type":"text","text":"It allows visitors to expand only the information they need, making it easy to present a large amount of content in a clear and compact format. It works well for FAQ sections, service introductions, product information, policies, help pages, and other content-heavy areas."}]},{"type":"paragraph","content":[{"type":"text","text":"Its minimal design blends naturally with a wide range of website styles. You can customize the text, colors, and other visual details to match your project."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Expandable accordion interaction for questions and answers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Well suited for FAQs and informational content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean and minimal visual style"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Question numbering and open/close state icons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layout for desktop and mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable text and colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ready to use in Framer projects"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Frequently asked questions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Service and product information"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing policies and usage guides"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shipping, returns, and payment information"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customer support and help content"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Project introductions and detailed information"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Add your content, adjust the styling to fit your project, and use it right away. Minimal Accordion helps you create a clear and well-organized information section without unnecessary complexity."}]}]},"introduction":"Minimal, responsive FAQ accordion","slug":"minimal-accordion","author":{"framerUserId":"3937fe09-b3f1-47fb-b007-d1616e82f908","name":"Kanghyun Kim","slug":"-c6fvu8","avatar":"https://framerusercontent.com/avatars/users/3937fe09-b3f1-47fb-b007-d1616e82f908/MSqrHzJUh","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3937fe09-b3f1-47fb-b007-d1616e82f908/019f5044-7000-76dd-b026-7b8af78ef7c6.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-11T08:26:49.189Z","updatedAt":"2026-07-11T08:26:49.189Z","publishedAt":"2026-07-11T08:26:49.184Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Minimal-Accordion-77a6Jg.js@XNb8wM6MltCasUgB49dL","previewUrl":"https://strange-objects-356192.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"XNb8wM6MltCasUgB49dL","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":26,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-11T08:26:49.498Z","updatedAt":"2026-07-11T08:26:49.498Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]