Fluffle Friends 🐰🐾

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.location to panel in 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 in globalState
media/pets.js — shared, pure pet-drawing module: draws each pose as vector art, then rasterizes and pixelates it into small cached sprites
media/webview.js — the canvas renderer, background scenes, and pet "AI" (idle/walk/sit/sniff state machine, treat-seeking)
media/webview.css — toolbar and panel styling
media/paw.svg — panel icon

Fluffle Friends