MoodStone: The Animated Pet Rock banner

MoodStone: The Animated Pet Rock

Created by: rrawr.walk2024
1 devlog
1h 28m 51s

A fun virtual pet rock that comes to life with interactive animations, silly moods, and expressive eyes. When you poke it, it will react with blinking eyes, shifting emotions, and an entertaining personality system. Every interaction feels distinc…

A fun virtual pet rock that comes to life with interactive animations, silly moods, and expressive eyes. When you poke it, it will react with blinking eyes, shifting emotions, and an entertaining personality system. Every interaction feels distinct and vibrant because of its dynamic mood shifts. A straightforward yet endearing small project that combines JavaScript interactivity, UI animation, and creativity.

This project uses AI

i used chatgpt for naming the project

Demo Repository

README

Loading README...
rrawr.walk2024
rrawr.walk2024 worked on MoodStone: The Animated Pet Rock
10 days ago
1h 28m logged

Devlog – MoodStone: The Animated Pet Rock

Day 1 – Idea & Concept

Idea was to make something boring look interesting. A plain rock, but with moods and expressions. The plan was to make it look alive, but only using simple web programming.

Day 2 – UI & Design

Designed the rock using CSS:

  • Used gradients to make it look like a soft, rounded rock

  • Used CSS to place the eyes and mouth, giving it a cute look

  • Kept it simple and centered

Day 3 – Expression System

Made different expressions for the rock:

  • Happy, sad, meh, excited, and angry

  • Used CSS borders and shapes instead of images

  • Made a function to change expressions dynamically

Day 4 – Mood Logic

Made a mood system from 0-100:

  • With every click, the mood changes randomly

  • The mood value corresponds to a certain expression
    Day 5 – Animations

Made the rock feel alive:

Added blinking with the use of intervals

Added the wiggle animation when the rock is interacted with

Added smooth transitions for the expressions

Day 6 – Interaction Polish

Enhanced the user experience:

Added click feedback with scaling and rotating

Added text reactions according to the mood

What I Learned

How to manipulate the DOM and add event handling

How to be creative with CSS and make animations and shapes

How to make an interactive interface with the least tools

How to make the personality come alive with simple logic

Future Plans

Adding sound and voice reactions

Adding memory-based reactions

Adding more expressions and reactions

Final Thoughts

MoodStone was initially just a simple idea. However, it turned out to be an interactive project that was quite fun. It showed that even the most simple ideas can come alive with the right amount of animation and creativity

0