wip

packages/frontend-shared/js/const.ts

@@ -118,7 +118,7 @@ export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error
 export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
 export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';
 
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'rotate', 'ruby', 'unixtime'];
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'scale', 'position', 'fg', 'bg', 'border', 'font', 'blur', 'rainbow', 'sparkle', 'glitch', 'rotate', 'ruby', 'unixtime'];
 export const MFM_PARAMS: Record<typeof MFM_TAGS[number], string[]> = {
 	tada: ['speed=', 'delay='],
 	jelly: ['speed=', 'delay='],

packages/frontend/src/components/MkGlitchFx.vue

@@ -0,0 +1,67 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<span :class="$style.root">
+	<span :class="$style.content">
+		<slot></slot>
+	</span>
+
+	<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
+		<filter id="MkGlitchFx_svg">
+			<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0" result="g"/>
+			<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0" result="b"/>
+			<feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+			<feOffset dx="8" dy="0"/>
+			<feComposite in="g" in2="" operator="lighter"/>
+			<feComposite in="b" in2="" operator="lighter" result="rgb-layers"/>
+
+			<feTurbulence type="fractalNoise" baseFrequency="0 0.02" numOctaves="3" :seed="seed"/>
+			<feColorMatrix type="luminanceToAlpha"/>
+			<feComponentTransfer>
+				<feFuncA type="discrete" tableValues="0,1"/>
+			</feComponentTransfer>
+			<feComposite in2="rgb-layers" operator="xor"/>
+			<feOffset dx="8" dy="0"/>
+			<feComposite in2="rgb-layers" operator="over" result="temp1"/>
+			<feComponentTransfer>
+				<feFuncA type="discrete" tableValues="1"/>
+			</feComponentTransfer>
+
+			<feColorMatrix
+				in="temp1"
+				type="matrix"
+				values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 100 100 100 0 0 "
+			></feColorMatrix>
+		</filter>
+	</svg>
+</span>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
+import { useInterval } from '@@/js/use-interval.js';
+
+const seed = ref('0');
+
+useInterval(() => {
+	seed.value = Math.floor(Math.random() * 1000).toString();
+}, 70, {
+	immediate: true,
+	afterMounted: true,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+	//clip-path: inset(15px);
+}
+
+.content {
+	display: block;
+	filter: url(#MkGlitchFx_svg);
+}
+</style>

packages/frontend/src/components/global/MkMfm.ts

@@ -17,6 +17,7 @@ import MkCode from '@/components/MkCode.vue';
 import MkCodeInline from '@/components/MkCodeInline.vue';
 import MkGoogle from '@/components/MkGoogle.vue';
 import MkSparkle from '@/components/MkSparkle.vue';
+import MkGlitchFx from '@/components/MkGlitchFx.vue';
 import MkA, { MkABehavior } from '@/components/global/MkA.vue';
 import { defaultStore } from '@/store.js';
 
@@ -233,6 +234,12 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 						}
 						return h(MkSparkle, {}, genEl(token.children, scale));
 					}
+					case 'glitch': {
+						if (!useAnim) {
+							return genEl(token.children, scale);
+						}
+						return h(MkGlitchFx, {}, genEl(token.children, scale));
+					}
 					case 'rotate': {
 						const degrees = safeParseFloat(token.props.args.deg) ?? 90;
 						style = `transform: rotate(${degrees}deg); transform-origin: center center;`;