Portfolio Microinteractions




Genshin Zodiac

Create a website dedicated to the zodiac to learn your zodiac

Final Build - Information

Trigger


  • Page Loads
  • Hover On and Off card
  • Click preview button
  • Pop-out Yes/Cancel preview
  • Hover On and Off Cancel button
  • Hover On and Off Yes button
  • Click Cancel button
  • Click Yes button

Loops and Modes


  • Hover up with the additional Information
  • Glow Light infinite circle around square
  • On touch preview button will have infinite rainbow glowing light
  • Pop out with the additional Information
  • Yes button infinite rainbow glowing light

Feedback


  • Touch the preview button and cursor changes from default to pointer
  • Touch the Yes/Cancel button and cursor changes from default to pointer
  • Gold background 50% transparency moves from bottom to top
  • Gold background, there's text and a button
  • Text and icon inward from the bottom
  • Touching the image will cause it to automatically zoom in
  • Offing the hover effect will have the reverse effect
  • Glowing effect activate on hover overs the preview button.
  • Gold glow light circle around the square
  • Gold glow light rotate clockwise direction
  • On hovering, glow light disappears
  • Touch the preview button, glowing effect appear
  • Touch Cancel button, button will rise while Yes button down
  • Touch Yes button, button will rise while Cancel button down
  • Touch Cancel/Yes button, heart beat animation effect appear
  • Pop out in Ease-in on the screen
  • Pop out slide down on to the screen
  • Yes button auto activate rainbow glowing color
  • Cancel button permanent gradient red color
  • Touch yes button, rainbow color change to permanent gradient green
  • Off touch yes button, gradient green return to rainbow glowing color
  • Touch yes/cancel button, heart beat animation appear
  • Click the yes button direct to the page
  • Click the cancel button to close the notification

Rules


  • Touch the preview button and cursor changes from default to pointer
  • Touch the Yes/Cancel button and cursor changes from default to pointer
  • Gold background 50% transparency moves from bottom to top
  • Gold background, there's text and a button
  • Text and icon inward from the bottom
  • Touching the image will cause it to automatically zoom in
  • Offing the hover effect will have the reverse effect
  • Glowing effect activate on hover overs the preview button.
  • Gold glow light circle around the square
  • Gold glow light rotate clockwise direction
  • On hovering, glow light disappears
  • Touch the preview button, glowing effect appear
  • Touch Cancel button, button will rise while Yes button down
  • Touch Yes button, button will rise while Cancel button down
  • Touch Cancel/Yes button, heart beat animation effect appear
  • Pop out in Ease-in on the screen
  • Pop out slide down on to the screen
  • Yes button auto activate rainbow glowing color
  • Cancel button permanent gradient red color
  • Touch yes button, rainbow color change to permanent gradient green
  • Off touch yes button, gradient green return to rainbow glowing color
  • Touch yes/cancel button, heart beat animation appear
  • Click the yes button direct to the page
  • Click the cancel button to close the notification