Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
diana0xUX opened this issue Sep 20, 2022 · 7 comments · May be fixed by #1939
Assignees
Labels
design Requires design work

Comments

@diana0xUX
Copy link

diana0xUX commented Sep 20, 2022

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:

Screen.Recording.2022-09-20.at.12.20.42.mov
Screen.Recording.2022-09-20.at.12.45.29.mov

Looking forward to Open Design Contributions from the community

Figma file

@diana0xUX diana0xUX changed the title Design a Button animation for the overlay to send Boosts and Superboosts on youtube and other platforms. Design a Button animation for the overlay to send Boosts and Super-boosts on youtube and other platforms. Sep 20, 2022
@diana0xUX
Copy link
Author

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

@diana0xUX diana0xUX moved this to Ready to be worked on in 🐝 Alby Sep 26, 2022
@diana0xUX diana0xUX moved this from Ready to be worked on to Done in 🐝 Alby Sep 26, 2022
@diana0xUX diana0xUX moved this from Done to In Progress in 🐝 Alby Sep 26, 2022
@MoritzKa MoritzKa added design Requires design work and removed design labels Oct 13, 2022
@escapedcat
Copy link
Contributor

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

@reneaaron reneaaron moved this from In Progress to Ready to be worked on in 🐝 Alby Nov 25, 2022
@reneaaron reneaaron moved this from Ready to be worked on to In Progress in 🐝 Alby Dec 12, 2022
@im-adithya im-adithya linked a pull request Jan 5, 2023 that will close this issue
17 tasks
@stackingsaunter stackingsaunter self-assigned this Feb 12, 2023
@iamdiinesh
Copy link

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

@escapedcat
Copy link
Contributor

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
Copy link

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.

@bumi bumi moved this from 🏗️ In progress to 📝 To-Do in 🐝 Alby Sep 11, 2023
@itstomekk
Copy link

moving to sprint:backlog

@itstomekk
Copy link

@im-adithya

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design Requires design work
Projects
Status: 📝 To-Do
Development

Successfully merging a pull request may close this issue.

8 participants