🎨

package.json

@@ -239,6 +239,7 @@
 		"url-loader": "4.1.1",
 		"uuid": "8.3.1",
 		"v-debounce": "0.1.2",
+		"vanilla-tilt": "1.7.0",
 		"vue": "3.0.3",
 		"vue-color": "2.7.1",
 		"vue-draggable-next": "1.0.8",

src/client/pages/about-misskey.vue

@@ -2,7 +2,7 @@
 <FormBase class="znqjceqz">
 	<section class="_formItem">
 		<div class="_formPanel" style="text-align: center; padding: 16px;">
-			<img src="/assets/icons/512.png" alt="" style="display: block; width: 100px; margin: 0 auto; border-radius: 16px;"/>
+			<img src="/assets/icons/512.png" alt="" style="display: block; width: 100px; margin: 0 auto; border-radius: 16px;" ref="icon"/>
 			<div style="margin-top: 0.75em;">Misskey</div>
 			<div style="opacity: 0.5;">v{{ version }}</div>
 		</div>
@@ -38,6 +38,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faInfoCircle, faCode, faLanguage, faHandHoldingMedical, } from '@fortawesome/free-solid-svg-icons';
+import VanillaTilt from 'vanilla-tilt';
 import { version } from '@/config';
 import FormLink from '@/components/form/link.vue';
 import FormBase from '@/components/form/base.vue';
@@ -105,6 +106,15 @@ export default defineComponent({
 			faInfoCircle, faCode, faLanguage, faHandHoldingMedical,
 		}
 	},
+
+	mounted() {
+		VanillaTilt.init(this.$refs.icon, {
+			max: 30,
+			perspective: 500,
+			scale: 1.125,
+			speed: 1000,
+		});
+	},
 });
 </script>
 

yarn.lock

@@ -10272,6 +10272,11 @@ value-or-function@^3.0.0:
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
   integrity sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=
 
+vanilla-tilt@1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/vanilla-tilt/-/vanilla-tilt-1.7.0.tgz#4e6d3c6442c6fa2b45c958c9c2013f31686ab461"
+  integrity sha512-u9yUhpSasFeqQCuiTon+RSb0aHzcj9stvWVXQIswzKL5oG491lkYk7U1GmhOAEZt7yPT6EiYZRJhIh2MFBncOA==
+
 vary@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"