egirlskey/packages/frontend/src/components/MkReactionEffect.vue

<template>
<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
	<span class="text" :class="{ up }">
		<MkReactionIcon class="icon" :reaction="reaction"/>
	</span>
</div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import * as os from '@/os';
import MkReactionIcon from '@/components/MkReactionIcon.vue';

const props = withDefaults(defineProps<{
	reaction: string;
	x: number;
	y: number;
}>(), {
});

const emit = defineEmits<{
	(ev: 'end'): void;
}>();

let up = $ref(false);
const zIndex = os.claimZIndex('middle');
const angle = (90 - (Math.random() * 180)) + 'deg';

onMounted(() => {
	window.setTimeout(() => {
		up = true;
	}, 10);

	window.setTimeout(() => {
		emit('end');
	}, 1100);
});
</script>

<style lang="scss" module>
.root {
	pointer-events: none;
	position: fixed;
	width: 128px;
	height: 128px;

	&:global {
		> .text {
			display: block;
			height: 1em;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			color: var(--accent);
			font-size: 18px;
			font-weight: bold;
			transform: translateY(-30px);
			transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
			will-change: opacity, transform;

			&.up {
				opacity: 0;
				transform: translateY(-50px) rotateZ(v-bind(angle));
			}
		}
	}
}
</style>