Skip to content

Crymfox/birthday-cake

Repository files navigation

Interactive Birthday Cake

Welcome to the Interactive Birthday Cake project! This project demonstrates creative front-end logic using React to simulate a birthday cake with dynamic decorations and interactive candles.

Features

  • Dynamic Cake Decorations: Little circles (cake decorations) are randomly distributed on the cake's surface every time the page is refreshed.
  • Interactive Candles:
    • Click on the cake's surface to drop a candle at the clicked position with a smooth animation using Framer Motion.
    • Blow on your laptop's microphone to simulate blowing out the candles.
    • Click on the candle flame to toggle its status (on fire or not).
    • Click on the candle body to remove it from the cake.

Key Binds

  • Space/Enter: Set all candles aflame.
  • Escape: Remove all candles from the cake.

Technology Stack

  • React
  • Framer Motion

Contact

For any questions or feedback, please contact me. Enjoy!