lightning-browser-extension
lightning-browser-extension copied to clipboard
Design a Button animation for the overlay to send Boosts and Super-boosts on youtube and other platforms.
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
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

Figma file
@reneaaron assigning this to you for now. Can you check if this can be used for your button?
@escapedcat can you explain me more in detail I really want to contribute into it.
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?
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.
moving to sprint:backlog
@im-adithya