Sparkle Dashed

Dynamic Burst Animation

About Sparkle Button is a playful, high-energy call-to-action component featuring an animated burst effect on hover. When visitors hover over the pill-shaped button, colorful tick accents shoot outward in a springy starburst pattern, giving your page an instant pop of personality and joy. What it does Dynamic Burst Animation: Hovering triggers six directional accent lines to scale out and expand around the button perimeter with a snappy spring timing. Micro-Scale Easing: The button itself gently expands ( scale 1.02 ) on hover to create depth and a tactile feel. Staggered Motion: Sparkle lines shoot out with micro-delays, giving the burst a natural, organic feel rather than a stiff simultaneous pop. Canvas Friendly: Cleanly handles Framer canvas editing and static preview modes without erratic animation loops. What you can customize Full control directly from Framer’s right-hand property panel — no code needed: Text — Button label (e.g., "Explore Features" , "Get Started" , "Claim Offer" ) Link — Destination page or external link (supports opening in a new tab) Font — Select any typography family, weight, or style Font Size — Adjustable text sizing in pixels (default: 20px ) Text Color — Custom color for the button label (default: #000000 ) Button Bg — Default resting pill background color (default: #FFE81A ) Hover Bg — Optional color swap when visitors hover over the button Burst Color — Color of the surrounding animated sparkle lines (default: #000000 ) Padding H & V — Fine-tune horizontal and vertical internal button spacing Need help? Questions or feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0 .

Dynamic Burst Animation