{"id":28612786,"url":"https://github.com/rdjarbeng/interactive_face_animation","last_synced_at":"2026-04-14T07:34:03.375Z","repository":{"id":293490090,"uuid":"984160907","full_name":"RDjarbeng/interactive_face_animation","owner":"RDjarbeng","description":"Playful React face component that follows your mouse and expressing emotions based on proximity and interaction","archived":false,"fork":false,"pushed_at":"2025-05-24T14:37:18.000Z","size":185,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-12T00:55:56.631Z","etag":null,"topics":["animation","head-tracking","human-robot-interaction","react","virtual-head","web"],"latest_commit_sha":null,"homepage":"https://roboface.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RDjarbeng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-15T13:43:49.000Z","updated_at":"2025-05-24T14:26:58.000Z","dependencies_parsed_at":"2025-05-15T16:30:54.039Z","dependency_job_id":"a60519ea-4194-4d24-8dd3-4d3010b89fe0","html_url":"https://github.com/RDjarbeng/interactive_face_animation","commit_stats":null,"previous_names":["rdjarbeng/interactive_face_animation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RDjarbeng/interactive_face_animation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RDjarbeng%2Finteractive_face_animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RDjarbeng%2Finteractive_face_animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RDjarbeng%2Finteractive_face_animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RDjarbeng%2Finteractive_face_animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RDjarbeng","download_url":"https://codeload.github.com/RDjarbeng/interactive_face_animation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RDjarbeng%2Finteractive_face_animation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31787055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","head-tracking","human-robot-interaction","react","virtual-head","web"],"created_at":"2025-06-12T00:39:47.898Z","updated_at":"2026-04-14T07:34:03.358Z","avatar_url":"https://github.com/RDjarbeng.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Interactive face animation Tracker\n\n![Application screenshot on stackblitz](screenshot_face_anim.png)\n\n\n\nA playful and interactive face component built with **React** that tracks mouse movement and displays various emotions—**happy**, **surprised**, **bored**, and **neutral**—based on proximity and user interaction.\n\n![Face Emot![face_animation2](https://github.com/user-attachments/assets/2cdb71de-064a-445b-be6b-26e406cabc25)\n\n---\n\n## ✨ Features\n\n* 👀 Eyes follow the cursor around the screen.\n* 😲 Surprised when you return after a short period of inactivity.\n* 🙂 Gets **happier** the closer your mouse is to the face.\n* 😐 Returns to **neutral** if interaction reduces.\n* 😴 Shows **boredom** after long inactivity.\n* 💗 Dynamic facial animations and transitions using CSS + JavaScript.\n  \n![face_animation](https://github.com/user-attachments/assets/b24edfba-e145-476e-af56-ddc99fd93f1e)\n![face_animation2](https://github.com/user-attachments/assets/e7b31e82-cd10-418e-9366-5435549653b5)\n\n---\n\n## 📦 Technologies Used\n\n* [React](https://reactjs.org/)\n* [Tailwind CSS](https://tailwindcss.com/) for utility-first styling\n* HTML5/CSS3\n* JavaScript (`useState`, `useEffect`, `useRef`, and DOM APIs)\n* ViteJs for bundling\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nEnsure you have **Node.js** and **npm** (or **yarn**) installed:\n\n```bash\nnode -v\nnpm -v\n```\n\n### Installation\n\n1. **Clone the repo**\n\n```bash\ngit clone https://github.com/your-username/face-emotion-tracker.git\ncd face-emotion-tracker\n```\n\n2. **Install dependencies**\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n3. **Run the app**\n\n```bash\nnpm start\n# or\nyarn start\n```\n\nVisit `http://localhost:5173` in your browser.\n\n---\n\n## 🧠 How It Works\n\n* Mouse movement is tracked via `window.addEventListener('mousemove')`.\n* A central reference point on the face is used to calculate proximity.\n* **Happiness** increases with proximity and changes facial features (mouth curve, blush, nose bounce).\n* Inactivity timers switch emotion to **bored** or **surprised**.\n* Dynamic styling updates the pupil size, eye movement, mouth shape, blush opacity, and more.\n\n---\n\n\n## 🛠 Customization\n\nYou can tweak the emotional thresholds, animation speeds, and eye/mouth sizes directly inside the `FaceFollowingMouse` component logic.\n\nExample:\n\n```js\nif (happinessLevel \u003e 0.6) {\n  setEmotion('happy');\n}\n```\n\n---\n\n\n\n## 📄 License\n\nMIT License. Feel free to use, modify, and share!\n\n---\n\n## 💡 Inspiration\n\nThis project is inspired from a human robot interaction course I took earlier at Carnegie Mellon University.\n\nThe state where the robot goes into a state of boredom was my attempt at a _feedback loop_. The character’s boredom state after inactivity creates a feedback loop: the user’s actions (moving the mouse) influence the character’s emotions (e.g., shifting to happiness), which in turn encourage further user interaction. \n\n\nThe feedback loop is created when the character’s boredom (triggered by inactivity) encourages the user to move the mouse, which shifts the character to happiness, further motivating user interaction.\n\n\n\nAgency is the perception that a robot has the ability to act autonomously or make decisions, impacting how humans relate to it. If moving the mouse made you think that the character was glad to see you could mean that you believe the character has agency. The character’s agency is conveyed through its ability to independently switch emotions (e.g., from neutral to happy when the mouse approaches), giving the impression that it autonomously ‘chooses’ to react to the user’s presence.\" After playing with the application for a while it becomes obvious that the look of surprise is a preprogrammed response; an algorithm that moves pixels on a screen through different states.\nAnd the character's emotions are not a conscious choice that it makes with every interaction even though it looks that way.\n\n\n\nLet me know if this work ever crosses into the uncanny valley. \n\nBy using a playful, cartoonish design, the project avoids the uncanny valley, ensuring the character feels approachable rather than eerily human-like\n\nThe project also draws on affective interaction, with emotions like happiness or surprise designed to evoke emotional responses from the user. Through social presence, the character feels like a social entity, enhancing the sense of interaction. Finally, proxemics plays a role, as the character’s emotions intensify based on the mouse’s virtual proximity, creating a dynamic and engaging experience.\n\n\nI suppose my biggest inspiration for this is the keepon robot which is a minimalistic robot that creates an affective interaction with it's body movements. So this can be my attempt at a virtual keepon.\n![image](https://github.com/user-attachments/assets/d06c6aaf-ad28-448d-9438-6ff42bc679a2)\n\n\n\n\n---\nI made this project as a fun experiment to see if I could make some kind of virtual 'thing' that provokes emotion. Also beacuse I thought it would be cool.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frdjarbeng%2Finteractive_face_animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frdjarbeng%2Finteractive_face_animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frdjarbeng%2Finteractive_face_animation/lists"}