https://music.youtube.com/watch?v=ey00YaYp8lE

src/App.css

@@ -307,6 +307,8 @@
   border-radius: 25%;
   margin-right: 1em;
   vertical-align: middle;
+}
+.initialanim {
   animation: slide-left 1.5s;
 }
 

src/App.tsx

@@ -1,5 +1,5 @@
 import './App.css'
-import AdvancedBr from './components/comps.tsx'
+import { AdvancedBr, SingularOomfie } from './components/comps.tsx'
 import { createSignal, onMount } from 'solid-js';
 import Reviews from './components/api.tsx';
 import Music, { MusicEntry } from './components/music.tsx';
@@ -56,6 +56,7 @@ function App() {
 
   const [musicList, setMusicList] = createSignal<string[]>([]);
   const [isLoading, setIsLoading] = createSignal(true);
+  const [oomfies, setoomfies] = createSignal(<>oomfies</>)
   const [isAnimating, setIsAnimating] = createSignal(false);
   const [animatedwoem, setanimatedwoem] = createSignal(false);
   onMount(async () => {
@@ -78,12 +79,6 @@ function App() {
   }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.lgbt/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
   return (
     <>
-      {/* <div onmouseenter={remov} class='header'>
-        <div>
-          <Normalpfp />
-        </div>
-        <HoverComponent />
-      </div> */}
       {isitmybd() ? <Bdpfp /> : <Normalpfp />}
 
       <p style={{ display: "none" }}>AdvancedBr my beloved</p>
@@ -133,6 +128,18 @@ function App() {
             "max-width": "1.5em"
           }} src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f525.png" />
         </div>
+        <div class="musicbutton" onclick={(e) => {
+          setoomfies(
+            <>
+              <SingularOomfie name='nea' discordid='310702108997320705' url='https://nea.moe'></SingularOomfie>
+              <SingularOomfie name='vozy' discordid='359175647257690113' url='https://vozy.exhq.dev'></SingularOomfie>
+              <SingularOomfie name='ushie' discordid='399862294143696897' url='https://ushie.dev/'></SingularOomfie>
+              <SingularOomfie name='hazel' discordid='435026627907420161' url='https://yellows.ink/'></SingularOomfie>
+              <SingularOomfie name='mugman' discordid='601836455006044163' url='https://mugman.tech'></SingularOomfie>
+              <SingularOomfie name='llsc' discordid='381538809180848128' url='https://llsc12.me/'></SingularOomfie>
+            </>
+          )
+        }}> {oomfies()}</div>
         <div class="musicbutton" onclick={vivsiepop}>
           <p>echo if it was written by vivsiepop</p>
         </div>

src/components/comps.css

@@ -0,0 +1,9 @@
+
+.tooltip:hover {
+    max-width: 4em !important;
+}
+
+.tooltip {
+    animation: ease-in-out 2s infinite;
+    padding: 1em;
+}

src/components/comps.tsx

@@ -1,6 +1,14 @@
+import "./comps.css"
 // warning: this IS horrible code. its a joke. DO NOT try this at home because
 // your local senior programmer CAN and WILL hunt you down
 // you have been warned.
-export default function AdvancedBr({count}:{count:number}) {
+export function AdvancedBr({ count }: { count: number }) {
     return new Array(count).fill(null).map(_ => (<br />))
 }
+
+export function SingularOomfie({ name, url, discordid }: { name: string, url: string, discordid: string }) {
+    return <a href={url}><img class="tooltip" style={{
+        "max-width": "3em",
+        "border-radius": "30%"
+    }} src={`https://dp.nea.moe/avatar/${discordid}.png`} alt="LMAO IMAGINE BEING BLIND" />  </a>
+}

src/components/pfp.css

@@ -2,6 +2,19 @@
     position: relative;
 }
 
+@keyframes rotateAnimation {
+    from {
+        transform: rotateY(0deg);
+    }
+    to {
+        transform: rotateY(360deg);
+    }
+}
+
+.rotate {
+    animation: rotateAnimation 0.5s ease-in-out forwards;
+}
+
 .header .bd {
     flex-direction: column;
     margin-left: 10em;

src/components/pfp.tsx

@@ -27,7 +27,24 @@ export function Bdpfp() {
 
 export function Normalpfp() {
     return <div class="birthdayparent header normal">
-        <img src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" />
+        <img class="initialanim" src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" onMouseEnter={(e) => {
+            (e.target as HTMLImageElement).animate([
+                { transform: "rotateZ(0deg)" },
+                { transform: "rotateZ(360deg)" },
+            ], {
+                duration: 400,
+                iterations: 1,
+            })
+        }} onClick={(e) => {
+            (e.target as HTMLImageElement).animate([
+                { transform: "rotateY(0deg)" },
+                { transform: "rotateY(360deg)" },
+            ], {
+                duration: 150,
+                iterations: 1,
+            })
+            console.log("balls");
+        }} />
         <HoverComponent />
     </div>