Playful Pet

Playful Pet is a fun and interactive pet for your website - A cute Neko cursor companion that behaves like a classic desktop pet. This animated character follower acts as a playful virtual pet that can chase your cursor, avoid it, or simply relax on the screen.

Whether you want a cursor chasing pet, a shy cursor avoiding pet, or a friendly cursor follower, this cursor pet widget brings life and personality to your Framer websites. It works beautifully as an animated companion, making your site feel more engaging and memorable.

Playful Pet isn’t limited to a neko cat. You’ll also get a "sprite sheet guide" that teaches you how to design your own custom pet style. Create a dog, bunny, mascot, robot, or any character you imagine, then simply upload your sprite sheet and replace the default cat.

This means you can build any kind of animated pet that follows the cursor, giving your site a completely unique personality.

Note: Neko is a cat that chases the mouse cursor across the screen, an app written in the late 1980s and ported for many platforms. This code is a re-implementation using React and has no relationship to the original software. Furthermore, this version does not use any part of the original source code except sprites. The classic nekos are considered public domain.

Instructions

Getting Started:

• Copy and paste the Playful Pet component into your Framer project

• Position the interactive pet anywhere on your canvas

• Customize behavior, mood, and appearance using the property controls

• You can also upload your custom sprite sheet (256×128px, 8×4 grid) or use the default neko

• Preview your site and watch your cursor companion come to life

Pro Tips:

• Use Auto Start to instantly activate the animated companion

• Try Click to Toggle to let users control the pet

• Adjust speed for playful or calm personality

• Resize pet size depending on your layout

How It Works

Playful Pet includes powerful controls that let you design your own interactive pet experience.

Properties Control

Behavior Controls:

• Behavior – Choose between cursor chasing pet (Follow Cursor) or cursor avoiding pet (Run Away)

• Start & Stop – Auto Start, Click to Start, or Click to Toggle

• Initial Mood – Rest, Self Grooming, or Asleep

Appearance Controls:

• Speed – Control movement responsiveness

• Pet Size – From tiny widget to large animated character

• Sprite Image – Upload your own neko-style sprite sheet

Interaction Controls:

• Show Hearts – Cute heart reactions on click

• Heart Color – Match your brand

• Heart Amount – Control intensity

• Heart Size – Tiny sparkles to big playful bursts

This gives you complete control over how your cursor companion behaves as a living animated character follower.

Key Features

Production-Ready & Responsive

• Works on desktop and mobile

• Smooth 60 FPS animation

• Stays within screen boundaries

• Fixed positioning for full-page interaction

Multiple Interaction Modes

• Follow Cursor → classic neko cursor behavior

• Run Away → playful cursor avoiding pet

• Auto Start, Click to Start, Click to Toggle

Fully Customizable

• Custom sprite sheets

• Size control

• Speed control

• Heart effects

• Mood states

Smooth Animations

• 8-direction movement

• Idle animations (sleeping, grooming, scratching, random)

• Pixel-perfect sprite transitions

• Reactive heart animations

Smart Behaviors

• Detects screen edges

• Reacts to cursor distance

• Escape behavior for shy pets

Developer-Friendly

• Built with React + Framer Motion

• TypeScript support

• Clean code

• No external dependencies

Ready to Use

• Drag-and-drop setup

• No coding required

• Works in preview and live site

• Sample neko sprite included

Use Cases

• Personal Websites & Portfolios: Add a playful virtual pet that follows the cursor and makes your site unforgettable.

• Gaming & Entertainment: Perfect mascot-style animated companion for immersive UI.

• E-Commerce & Marketing: Use a friendly cursor pet widget to grab attention and boost engagement.

• Educational Platforms: Create an encouraging interactive pet for students.

• Event & Landing Pages: Make your launch pages more engaging with a living cursor companion.

• Creative Agencies: Show animation, interactivity, and storytelling in one component.

• Kids Platforms: A cute desktop pet-style character makes interfaces friendlier.

• Communities & Social Spaces: Create emotional connection with a lovable neko cursor companion.

Made with ❤️ by Soyeb

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com