search

getAlby / lightning-browser-extension

The Bitcoin Lightning Browser Extension that brings deep Lightning & Nostr integration to the web. Wallet interface to multiple lightning nodes and key signer for Nostr, Liquid and onchain use.
https://getalby.com/#extension
MIT License
533 stars 193 forks source link

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

Open diana0xUX opened 2 years ago

diana0xUX commented 2 years ago

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

diana0xUX commented 2 years ago

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

escapedcat commented 1 year ago

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

iamdiinesh commented 1 year ago

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

escapedcat commented 1 year ago

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?

iamdiinesh commented 1 year ago

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.

itstomekk commented 1 year ago

moving to sprint:backlog

itstomekk commented 1 year ago

@im-adithya