Cute, original pixel-art bunnies and dachshunds that hop and waddle around a view in your editor. No sprite sheet assets, no franchise characters — every pet is drawn live on a canvas and rasterized into low-res pixel art at runtime.
Features
- A small toolbar: + 🐰, + 🐾, 🍬 treat, 🗑 clear, and a background picker — no Command Palette needed (though the same actions are also registered as commands)
- Adding a pet offers a few color choices, including a black & tan dachshund
- Pets wander, sit, sniff, and hop on their own, with a real 2-frame walk/hop cycle
- Throwing a treat makes nearby pets waddle over and eat it
- Click a pet to get its attention
- Five background scenes: Bubblegum, Meadow, Beach, Space, and Cozy room
- Shows in the Explorer sidebar by default, or the bottom panel — configurable via
fluffleFriends.location - Your pets and background choice are remembered across VS Code restarts
Try it out
- Open this folder in VS Code and press
F5— an Extension Development Host window opens. - Look in the Explorer sidebar for the Fluffle Friends view (or switch
fluffleFriends.locationtopanelin Settings to move it next to Terminal/Output instead). - Click + 🐰 or + 🐾 in the toolbar and pick a color.
Settings
fluffleFriends.location:"explorer"(default) or"panel"fluffleFriends.background:"bubblegum"(default),"meadow","beach","space", or"cozy"— also changeable live from the toolbar dropdown
Install for everyday use
npm install -g @vscode/vsce
vsce package
code --install-extension fluffle-friends-0.0.1.vsix
Structure
extension.js— registers commands and both webview views (Explorer + panel), persists pets and background inglobalStatemedia/pets.js— shared, pure pet-drawing module: draws each pose as vector art, then rasterizes and pixelates it into small cached spritesmedia/webview.js— the canvas renderer, background scenes, and pet "AI" (idle/walk/sit/sniff state machine, treat-seeking)media/webview.css— toolbar and panel stylingmedia/paw.svg— panel icon