Follow Mouse MFM

packages/client/src/components/CkFollowMouse.vue

@@ -0,0 +1,86 @@
+<!--
+SPDX-FileCopyrightText: leah and other Cutiekey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<span ref="container" :class="$style.root">
+	<span ref="el" :class="$style.inner" style="position: absolute">
+		<slot></slot>
+	</span>
+</span>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, shallowRef } from 'vue';
+const el = shallowRef<HTMLElement>();
+const container = shallowRef<HTMLElement>();
+const props = defineProps({
+	x: {
+		type: Boolean,
+		default: true,
+	},
+	y: {
+		type: Boolean,
+		default: true,
+	},
+	speed: {
+		type: String,
+		default: '0.1s',
+	},
+	rotateByVelocity: {
+		type: Boolean,
+		default: true,
+	},
+});
+
+let lastX = 0;
+let lastY = 0;
+let oldAngle = 0;
+
+function lerp(a, b, alpha) {
+	return a + alpha * (b - a);
+}
+
+const updatePosition = (mouseEvent: MouseEvent) => {
+	if (el.value && container.value) {
+		const containerRect = container.value.getBoundingClientRect();
+		const newX = mouseEvent.clientX - containerRect.left;
+		const newY = mouseEvent.clientY - containerRect.top;
+		let transform = `translate(calc(${props.x ? newX : 0}px - 50%), calc(${props.y ? newY : 0}px - 50%))`;
+		if (props.rotateByVelocity) {
+			const deltaX = newX - lastX;
+			const deltaY = newY - lastY;
+			const angle = lerp(
+				oldAngle,
+				Math.atan2(deltaY, deltaX) * (180 / Math.PI),
+				0.1,
+			);
+			transform += ` rotate(${angle}deg)`;
+			oldAngle = angle;
+		}
+		el.value.style.transform = transform;
+		el.value.style.transition = `transform ${props.speed}`;
+		lastX = newX;
+		lastY = newY;
+	}
+};
+
+onMounted(() => {
+	window.addEventListener('mousemove', updatePosition);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('mousemove', updatePosition);
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+	display: inline-block;
+}
+.inner {
+	transform-origin: center center;
+}
+</style>

packages/client/src/components/mfm.ts

@@ -1,6 +1,7 @@
 import { defineComponent, h } from "vue";
 import * as mfm from "@transfem-org/sfm-js";
 import type { VNode } from "vue";
+import CkFollowMouse from "./CkFollowMouse.vue";
 import MkUrl from "@/components/global/MkUrl.vue";
 import MkTime from '@/components/global/MkTime.vue';
 import MkLink from "@/components/MkLink.vue";
@@ -275,6 +276,24 @@ export default defineComponent({
 									style = `transform: ${rotate}(${degrees}deg); transform-origin: center center;`;
 									break;
 								}
+								case 'followmouse': {
+									// Make sure advanced MFM is on and that reduced motion is off
+			
+									let x = (!!token.props.args.x);
+									let y = (!!token.props.args.y);
+			
+									if (!x && !y) {
+										x = true;
+										y = true;
+									}
+			
+									return h(CkFollowMouse, {
+										x: x,
+										y: y,
+										speed: validTime(token.props.args.speed) ?? '0.1s',
+										rotateByVelocity: !!token.props.args.rotateByVelocity,
+									}, genEl(token.children));
+								}
 								case "position": {
 									const x = parseFloat(token.props.args.x ?? "0");
 									const y = parseFloat(token.props.args.y ?? "0");