Making a cat

• search web for cat animation references, or rive tutorials/markets

  • https://community.rive.app/c/staff-picks/math-is-a-croc

Step

1. rive tutorial layout with framer as template

   Rive 101 - 8.5 Reflow With Dynamic Components

   timelines

   • portrait
   • landscale

   => export to the two movies or png sequeneens

2. replace backgrund png for the main svg content: cat with headphone

3. can make the cat face forward? then make it like a robot

interactive robot in Rive

Fefly an illustration of a cute cat listening music wearing headphones, musical wave, neon theme

framer

• https://www.framer.com/academy/

  • Workshop: Designing fluid layouts in Framer
  • Workshop: Creating Breakpoints in Framer

rive

• Bringing Human-Like Animation to Web Development with RIVE and React

  control back which moves in the opposite direction

  Firefly_cat3

• cusor as target

• control_front as group

  • constraints > translation
    • strength
    • target as cursor

• state machine > listener

  • hitbox align > pointer move > align cursor
  

Vending machine UI

MAIN

• Main > Inputs > Choosescreens

  • ChooseBuyScellenln
  • ChooseFlavor_mainSreen
  • QtyPrice
  • Pluse
  • Minus
  • Get
  • Cancel

  Choose screen

  
  • choose by screen
  • choose flavor main screen

  Get Cacnel Screen

  
  • Listener:hit get > enjoy screen on

  Enjoy screen

  • Listenr:
  

  Game screen

  • Listener: Hit here > Pressed
  
  • IsTimerOn