lightning-browser-extension icon indicating copy to clipboard operation
lightning-browser-extension copied to clipboard

Design a Button animation for the overlay to send Boosts and Super-boosts on youtube and other platforms.

Open dvoroneca opened this issue 2 years ago • 1 comments

During our hackathon day Alby team has created a way to send SATS directly to the creator. Check out the Loom Link

Now we are designing this button that is sitting in the overlay and anyone can contribute to this animation design.

How that could work?


A user can click on the boost button multiple times (every time the total amount being sent is increased by X) until he clicked i.e. 5 times. The button then changes to the "Superboost" version and amount Y is sent. (X / Y could be some settings in Alby, users could configure 100 sats as default tipping amount and 2100 sats as "super-boost" amount) Fiat.

Continuing the thought from above: It might make sense to display amounts in fiat currency if configured) (edited)


Inspiration form Pay/Donate buttons from across the internet.

Some more inspiration: https://codepen.io/reneaaron/pen/poVwNmP https://codepen.io/reneaaron/pen/BaxQZee https://codepen.io/reneaaron/pen/yLjXgBo https://dribbble.com/shots/16576357-Pay-Button-Micro-Interaction https://dribbble.com/shots/17887415-Pay-Interactive-SVG-animation-Freebies https://dribbble.com/shots/17674758-Button-Glow https://dribbble.com/shots/18255965-Rainbow-Button-Hover https://dribbble.com/shots/14693563--3D-Button (edited)


Some initial concepts of the button:

https://user-images.githubusercontent.com/35034985/191242735-f705ce78-b416-4e2f-bf1c-f467f42db2db.mov

https://user-images.githubusercontent.com/35034985/191242759-594f18f2-8b18-4b4a-8e1d-964342a8df2f.mov


Looking forward to Open Design Contributions from the community

Figma file

dvoroneca avatar Sep 20 '22 11:09 dvoroneca

Here is another version of the responsive button design. More focused on the functionality of the button. If we need a cool animation we can incorporate some of the animations from above into this button

Screenshot 2022-09-22 at 20 13 01

Figma file

dvoroneca avatar Sep 22 '22 18:09 dvoroneca

@reneaaron assigning this to you for now. Can you check if this can be used for your button?

escapedcat avatar Oct 17 '22 09:10 escapedcat

@escapedcat can you explain me more in detail I really want to contribute into it.

iamdiinesh avatar Mar 06 '23 11:03 iamdiinesh

I believe @im-adithya is already workign on it. @im-adithya do we have an extra issue for what you are working on? Can @DineshGupta-droid maybe support in any way?

escapedcat avatar Mar 06 '23 11:03 escapedcat

I believe @im-adithya is already workign on it. @im-adithya do we have an extra issue for what you are working on? Can @DineshGupta-droid maybe support in any way?

It would be great if my contribution helps you do consider me for the any adding task.

iamdiinesh avatar Mar 08 '23 09:03 iamdiinesh

moving to sprint:backlog

itstomekk avatar Sep 12 '23 16:09 itstomekk

@im-adithya

itstomekk avatar Sep 12 '23 16:09 itstomekk