Make VRCat pettable
Patroll
The VRCat Early Supporter Badge already has a cursor changing into a "grab" icon suggesting giving it some pets.
I suggest making him actually pettable by making him squish with each click.
proof of concept code
const animation = [
{ transform: 'scaleY(1) scaleX(1)' },
{ transform: 'scaleY(0.8) scaleX(1.1)', cursor: 'grabbing' },
{ transform: 'scaleY(1) scaleX(1)' },
];
const timing = {
duration: 120,
iterations: 1,
composite: 'replace',
};
const badge = document.querySelector('[aria-label="Early Adopter Badge"');
badge.style.transformOrigin="center bottom";
badge.addEventListener('click', (e) => {e.currentTarget.animate(animation, timing)});
Log In
Patroll
.vrcat {
cursor: grab;
transform-origin: bottom center;
transition transform 0.1s ease;
}
.vrcat:active {
cursor: grabbing;
transform: scaleY(0.9) scaleX(1.1);
}
Patroll
Discord file links might look sus, so here's a Streamable video: