---
title: "Miosu — Free Framer component · Best of Framer"
description: "Free Framer component · by Grids & Giggles · Interactive. Miosu is a cursor-reactive robot head for Framer."
canonical: "https://framer.elliotli.dev/component/miosu"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Miosu

# Miosu

A web pet that watches you work

[View on Framer](https://framer.com/marketplace/components/miosu/?via=elliot-li)

![Miosu preview image 1](https://framer.elliotli.dev/og/component/miosu/f62988926262174d/1600x1135.jpg)

## Summary

Miosu is a cursor-reactive robot head for Framer.

## Description

**Miosu** is a cursor-reactive robot head for Framer. Its eyes track your pointer, pull together as you get close, and blink on a randomised loop so it never looks static. Built for anyone who needs a character face instead of another icon.

**About Component**

-   Eyes track the cursor anywhere on the page
    
-   Pupils pull together as the cursor gets closer
    
-   Head drifts and tilts slightly toward the cursor
    
-   Blinks on a randomised interval, with occasional double blinks
    
-   Glossy sheen on each eye slides toward the cursor, hides on a blink
    
-   Built on refs, not state, so cursor movement never re-renders
    
-   Pauses itself via IntersectionObserver when scrolled off-screen
    
-   Detects Framer's static renderer, disables interactivity for exports
    
-   18 property controls: size, shell/face gradients, eye color and shape, spacing, tracking range, head drift and tilt, sheen, blink timing, background
    
-   Fully responsive, any width or height
    

**What's Included**

-   One code component file, drop-in ready
    
-   18 property controls, zero code needed
    
-   Cursor tracking, blinking, and sheen built in
    
-   Static-render detection, safe for exports
    

**How It Works**

1.  Drag Miosu onto your canvas
    
2.  Set colors, eye size, and tracking range in the property panel
    
3.  Publish, the eyes start tracking on load
    

**Use Cases**

-   404 and empty-state pages
    
-   Loading screens
    
-   Portfolio and agency sites
    
-   SaaS onboarding flows
    
-   Product landing page hero details
    
-   Chatbot or support widget avatars
    
-   Playful brand sites
    
-   Personal about pages
    

**Keywords** cursor tracking, reactive component, robot head, animated character, mascot, Framer code component, interactive icon, eye tracking, blinking animation, hover effect, property controls, character design, empty state, 404 page, loading screen, parallax, canvas component

**Support** Issues or customization help: reach out and I'll help. Email: [framercore@siddhantbaghel.art](mailto:framercore@siddhantbaghel.art)

## Rank history [How rankings work →](/terms#rankings)

-   All · #2214

## Details

- **Author**: Grids & Giggles
- **Published**: 2026-09-03
- **Updated**: 2026-09-04
- **Added**: 2026-09-03
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step