5c:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.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/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.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/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31t_i-sjkqwxc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/31wecb1pe5ugs.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0mf-dfabvof5m.js","/creators-assets/_next/static/immutable/chunks/28zsl3gu7sgg3.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1hrrs8zq4ee_v.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/0kwdy8yc-c0ba.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 5d:T4dd,

A visually striking image reveal that transforms scattered, blurred fragments into a crisp full image.

Key Features:

Smooth 3D tile-based reveal animation
Trigger options: on load, on hover, or when in view
Adjustable grid density, depth, and animation timing
Optional background color and rounded corners
Fully responsive with seamless final image assembly

How to Use:

Copy this component onto your canvas.
Upload your desired image in the component properties panel.
Choose when the animation triggers: On Load, On Hover, or In View.
Adjust Grid Size to control the number of tiles (higher = finer detail).
Modify Depth for more or less 3D motion.
Tweak Duration and Delay Randomness for custom animation timing.
Set a Background Color and Border Radius to match your layout style.
Preview or publish to see the dynamic reveal in action.

5e:T46b,

A modern 3D flip button for Framer that reveals alternate text on hover. Used for nav links, CTAs, and interactive UI elements.

Key Features:

Smooth 3D flip animation
Front & back text states (same text by default)
Fully customizable fonts (family, size, weight, uppercase)
Customizable colors, padding, and border radius
Lightweight and performance-friendly (pure CSS transform)

How to Use:

Copy the component onto your canvas
Enter your button text (e.g. JOIN NOW)
(Optional) Add a flip text label
- Leave blank to reuse the main text
Set your link URL
Customize styling:
- Font & weight
- Font size
- Text transform (uppercase toggle)
- Background & text colors
- Flip background & text colors
- Padding & border radius
Preview / hover to see the 3D flip effect

5f:T536,

A sleek button that comes to life on hover—its text and icon shift in opposite directions for an engaging, modern interaction.

Key Features:

✨ Animated Hover Effect: Text slides left while the icon moves right, creating a lively visual interaction.
🎨 Fully Customizable: Easily adjust colors, fonts sizes, text, and transitions
⚡ Drop-In Ready: Works instantly in any Framer project—no extra setup needed.
🔗 Interactive Actions: Supports links, navigation, or custom interactions with Framer’s built-in tools.
🛠️ Lightweight & Performant: Built with clean motion for smooth, lag-free animation.

How to Use:

Add to Canvas: Copy the button component into your Framer project.
Customize Style: Adjust colors, fonts, corner radius, etc. in the right-hand properties panel.
Link Action: Set the button’s link or interaction (e.g., navigate to a page, open a modal, trigger animation).
Preview Hover Effect: Hover in Preview mode to see the smooth icon-and-text shift animation in action.

60:T4b2,

A modern Framer component that adds a smooth, glassy cursor-following tag—creating a dynamic, interactive motion effect across the screen.

Key Features

Smooth Cursor Tracking – Follows the user’s mouse with natural spring motion.
Glassy Blur Effect – Uses backdrop blur for a modern glass-morphism aesthetic.
Customizable Label – Easily change text and colors
Viewport-Fixed Positioning – Always stays visible and aligned to the cursor, regardless of scroll.
No Click Interference – pointer-events: none ensures it never blocks interactions.

How To Use:

Copy and paste this component onto your canvas.
On the right-hand properties panel - customize text, colors, border and upload the image you need
Preview or publish your site — the tag will now smoothly follow the cursor across the entire page.
Optional: Duplicate the "Hover Wrap Link" element to add more hoverable links into your website!

61:T40e,

A lightweight icon component built for toggling navigation menus with smooth motion and easy customization.

Key Features:

Toggle behavior: Seamlessly switches between hamburger (closed) and X (open) states
Smooth animation: Fluid morphing transition for icon lines
Customizable: Adjust colors and transition styles to fit your design
Integration ready: Easily bind the toggle to show or hide any menu panel
Responsive: Control visibility based on viewport size or breakpoints

How to Use:

Copy the component into your project
Place it in your header, navbar, or preferred location
Connect it to your desired menu or interaction
Customize styles and transitions as needed
Use the visibility variable to hide it on specific breakpoints

62:T4c0,

This component adds a smooth, eye-catching glow effect that expands as the user hovers over the button.

Features:

On hover animation that grows smoothly within the button dimensions
Adjustable "glow" size and color
Easily update copy content
Customizable colors for borders, arrows, text and background of the button
Adjustable animation speed and transition

How to use:

Copy the component onto your project
Resize to fit your design
Customize however you want
Edit with your desired content
Hover over the button and appreciate your work!

63:T576,

A minimal interactive icon component designed for toggling navigation menus.

Features:

Toggle behavior: switches between closed (hamburger) and open (X) states
Smooth morph animation for the icon lines
Customizable color and transition
Integration ready — you can bind the toggle to show/hide a menu panel
Responsive support: you can conditionally show or hide it based on viewport width

How to use:

Copy the component into your project
Place it within your header, navbar, or wherever you want the toggle
Link the component to any interaction you prefer
Customize to your liking
Use the visibility variable if you wish to hide it on a certain breakpoint

59:["$","$L5c",null,{"value":{"fallback":{"$inf$activity-creator-bde8f325-c4fb-4d02-8984-cd8580529dfa-all:/unified/creator/bde8f325-c4fb-4d02-8984-cd8580529dfa/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:bde8f325-c4fb-4d02-8984-cd8580529dfa:/unified/posts/?creator=bde8f325-c4fb-4d02-8984-cd8580529dfa&with=reposts":[{"data":[{"id":"019a93bb-bae2-7603-8eb1-631db311745b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ZrkzvtmHCsIOoebCNRfi","resolved":true,"title":"Image Mesh Reveal","body":"$5d","bodyJson":null,"introduction":"","slug":"image-mesh-reveal","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ZrkzvtmHCsIOoebCNRfi/image-mesh-reveal-N8mW9mccQwkhM3UVxb8ErN91s3VdiX","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-23T13:25:57.374Z","updatedAt":"2025-11-17T17:23:15.394Z","publishedAt":"2025-11-17T21:32:25.186Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SoftImageReveal-8y0X.js@d8ScTCUIPtBrpJLT4LzO","previewUrl":"https://beloved-polygon-011082.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"d8ScTCUIPtBrpJLT4LzO","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":"2025-11-17T21:32:25.186Z","updatedAt":"2025-11-17T21:32:25.186Z"},{"id":"019a93bb-af31-7b0d-a510-23d39ea87f5c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"u2wj6LWUQeGyeo1qZkEU","resolved":true,"title":"Button 3D Flip","body":"$5e","bodyJson":null,"introduction":"","slug":"button-3d-flip","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/u2wj6LWUQeGyeo1qZkEU/button-3d-flip-kEono4TVclTJoYLGqiPsuFuqnJGSnX","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-05T03:21:53.499Z","updatedAt":"2025-11-17T01:52:58.768Z","publishedAt":"2025-11-17T21:32:22.193Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Button-3D-b3jC.js@isNyJyCHzlwhRlEVJkKo","previewUrl":"https://digital-champion-862642.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"isNyJyCHzlwhRlEVJkKo","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":"2025-11-17T21:32:22.193Z","updatedAt":"2025-11-17T21:32:22.193Z"},{"id":"019a7ace-0d07-7b73-935a-52515f4d3c44","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ziKJJJ17STM1dwxc8qxU","resolved":true,"title":"Button Hover Shift","body":"$5f","bodyJson":null,"introduction":"","slug":"button-hover-shift","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ziKJJJ17STM1dwxc8qxU/button-hover-shift-IaLm5yTTE9WlEHGAl9p9KdgnkaJfzt","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-29T10:52:07.338Z","updatedAt":"2025-11-11T17:29:09.113Z","publishedAt":"2025-11-13T01:21:55.463Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Button-Shifting-Component-EaDW.js@lehdGzrzEyyPnPJb9kzJ","previewUrl":"https://small-hand-260521.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"lehdGzrzEyyPnPJb9kzJ","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":"2025-11-13T01:21:55.463Z","updatedAt":"2025-11-13T01:21:55.463Z"},{"id":"019a7acd-fbbb-7f14-89ab-0d0c9305b206","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"oY40ax78FxV4L8cd5NdO","resolved":true,"title":"Follow and Hover","body":"$60","bodyJson":null,"introduction":"","slug":"follow-and-hover","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/oY40ax78FxV4L8cd5NdO/follow-and-hover-YNFVbLE4dnd2w0faqIC48k5T39DrmX","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-28T10:23:49.483Z","updatedAt":"2025-11-11T17:29:44.531Z","publishedAt":"2025-11-13T01:21:51.035Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Cursor-Follow-Container-DSnK.js@ry7o7HNCekbyJHL3zmqa","previewUrl":"https://helpful-impact-678198.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"ry7o7HNCekbyJHL3zmqa","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-13T01:21:51.035Z","updatedAt":"2025-11-13T01:21:51.035Z"},{"id":"019a6c10-e9d6-7989-9643-0e2e50418e71","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PtbbSN6KYEvLiXT3046S","resolved":true,"title":"Clickable Burger","body":"$61","bodyJson":null,"introduction":"","slug":"clickable-burger","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/PtbbSN6KYEvLiXT3046S/clickable-burger-Kt055HhcvUvqm7aCl4iDz2l4WfJlUP","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-30T05:07:27.124Z","updatedAt":"2025-11-07T16:11:21.560Z","publishedAt":"2025-11-10T04:40:39.126Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Burger-Component-uxbK.js@Agps3CYccoFO661rPJ7X","previewUrl":"https://second-successes-087041.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"Agps3CYccoFO661rPJ7X","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-10T04:40:39.126Z","updatedAt":"2025-11-10T04:40:39.126Z"},{"id":"019a6c10-de05-7b25-8366-d5fd9dc64d9e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ATC6Lzaxu1agWafP76oD","resolved":true,"title":"Menu Click Component","body":"

A clean, minimal button for toggling your navigation menu.

Key Features:

Toggle behavior: Effortlessly switches between (closed) and (open) states
Smooth animation: Delivers a clean, fluid transition as the icon morphs
Customizable: Easily tweak colors, timing, and motion to match your design
Integration ready: Connect the toggle to show or hide any navigation panel
Responsive: Adjust visibility based on screen size or breakpoints

How to Use:

Copy and paste the component to your project
Position it in your header, navbar, or desired location
Link it to your menu or preferred interaction
Adjust colors, motion, and transitions to fit your style
Preview and publish!

","bodyJson":null,"introduction":"","slug":"menu-click-component","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ATC6Lzaxu1agWafP76oD/menu-click-component-Pc13CLX78OvdUl7xA9Erg14ASv292Y","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-30T09:05:38.992Z","updatedAt":"2025-11-07T16:15:21.543Z","publishedAt":"2025-11-10T04:40:36.101Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Burger-Component-HrVa.js@5SGAzLmYtcnBQFNPeAWG","previewUrl":"https://sleepy-tools-388965.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"5SGAzLmYtcnBQFNPeAWG","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-10T04:40:36.101Z","updatedAt":"2025-11-10T04:40:36.101Z"},{"id":"019a5653-bb7f-7d68-bb60-a4a3f118fb89","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"6PPsJVnQ5AP8tqeH54EV","resolved":true,"title":"Animating Lines","body":"

Animated lines that flow in the background to subtly enrich your content without overpowering it.

Features:

Smoothly animated line motion for a dynamic, modern feel
Perfect as a background accent or section divider
Customize with your colors of choice
Responsive but can be adjusted to your preference
Looped animation for seamless playback
Ideal for hero sections, banners, or visual storytelling elements

How to Use

Copy the component into your project
Place it behind your main content (e.g. hero headline, call-to-action area)
Adjust the line color, animation speed, and direction to fit your brand style
Duplicate and/or move the individual line components
Play it on preview and stare at it for a while :)

","bodyJson":null,"introduction":"","slug":"animating-lines","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/6PPsJVnQ5AP8tqeH54EV/animating-lines-7TIgcaXawRpwooKVUxSvPKxmlTBQVX","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-17T06:55:41.267Z","updatedAt":"2025-11-01T11:44:34.785Z","publishedAt":"2025-11-05T23:21:59.423Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Animating-Lines-Component-LmD9.js@sK9iV8jL2t0Z4ze8W2BK","previewUrl":"https://obvious-hiring-422115.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"sK9iV8jL2t0Z4ze8W2BK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-05T23:21:59.423Z","updatedAt":"2025-11-05T23:21:59.423Z"},{"id":"019a29d2-f91b-729b-9d30-1f5a003ff9e4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fDig8fM1zqAfxvyqlnpV","resolved":true,"title":"Button Glow","body":"$62","bodyJson":null,"introduction":"","slug":"button-glow","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fDig8fM1zqAfxvyqlnpV/button-glow-dVYQ7nuW89ZZbYXN5I7UcPPPBF3rsw","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-16T00:22:28.424Z","updatedAt":"2025-10-28T03:35:26.875Z","publishedAt":"2025-10-28T07:58:03.547Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Button-Glow-Component-OtIF.js@OB56IVMg0NALGZHOQN15","previewUrl":"https://bright-shares-138772.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"OB56IVMg0NALGZHOQN15","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-28T07:58:03.547Z","updatedAt":"2025-10-28T07:58:03.547Z"},{"id":"019a19e8-63d0-73b4-8275-aae22fafe70d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"eUqaYWmB4ZkRaxmqH2IJ","resolved":true,"title":"Hover Button Border","body":"

A modern button that comes alive with an animated border and arrow movement on hover.Features

Border and arrow animation activates smoothly on hover
Clean, minimal design that suits any modern interface
Customizable: color, border and timing
Lightweight and reusable across multiple layouts
Perfect for CTAs and links

How to Use

Copy the component into your project
Place it wherever you need a button or link element
Adjust animation speed, easing, and delay for your preferred feel
Customize the border, colors, and content
Duplicate as many times as you want!

","bodyJson":null,"introduction":"","slug":"hover-button-border","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/eUqaYWmB4ZkRaxmqH2IJ/hover-button-border-vB6LZkeYEV86ci6j5HzKk1CxS67YG2","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-15T05:15:04.925Z","updatedAt":"2025-10-24T19:33:29.487Z","publishedAt":"2025-10-25T05:47:31.664Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Button-Arrow-Component-zsQz.js@7pK0n0QFafVUYDAZt2D2","previewUrl":"https://entire-members-691004.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"7pK0n0QFafVUYDAZt2D2","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":"2025-10-25T05:47:31.664Z","updatedAt":"2025-10-25T05:47:31.664Z"},{"id":"019a1498-aa03-7806-a386-2970da37c7b4","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Wa6x6HQNmIOe1iu2Tfhp","resolved":true,"title":"Burger Menu Icon","body":"$63","bodyJson":null,"introduction":"","slug":"burger-menu-icon","author":{"framerUserId":"bde8f325-c4fb-4d02-8984-cd8580529dfa","name":"Framerspark","slug":"andy-dao","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/998624/avatar-gMOlGMC6aIDmplvWCs4PlKSVoCHmeR.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Wa6x6HQNmIOe1iu2Tfhp/burger-menu-icon-6JQvPMPqSKRpQjsitEoGrtbyjXeClh","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-15T12:06:20.331Z","updatedAt":"2025-10-24T04:17:37.108Z","publishedAt":"2025-10-24T05:02:20.675Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Burger-Menu-Icon-DIwI.js@vQVnONuNQ6CHAovUeXzh","previewUrl":"https://hopeful-buttons-542676.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"vQVnONuNQ6CHAovUeXzh","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":31,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-24T05:02:20.675Z","updatedAt":"2025-10-24T05:02:20.675Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L64"}]