fixed pos for images

src/components/FadeIn.tsx

+import { useEffect, useRef, useState } from "react";
+import { SpacingBlock } from "./SpacingBlock";
+
+export function FadeIn({filepath}:{filepath: string}){
+    const [isVisible, setVisible] = useState(false);
+    const domRef = useRef(null)!;
+    useEffect(() => {
+        const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => setVisible(entry.isIntersecting));
+        {/* debug */}
+        entries.forEach(entry => console.log(entry.isIntersecting));
+        });
+        observer.observe(domRef.current!);
+    }, []);
+
+    return (
+        <>
+            <div 
+                className='row col'
+                style={{ 'height': '100vh'}}
+                ref={domRef}>
+                    <img 
+                        style={{
+                            'position': 'fixed',
+                            'bottom': '0',
+                            'right': '0',
+                            'transition': 'opacity 0.6s ease-out, transform 1.2s ease-out',
+                            'opacity': `${isVisible ? '1' : '0'}`,
+                            'visibility': `${isVisible ? 'visible' : 'hidden'}`
+                        }}
+                        src={filepath}>
+                    </img>
+            </div>
+        </>
+    );
+}
\ No newline at end of file

src/contents/Home.tsx

-import React, { useEffect, useRef } from "react";
+import { FadeIn } from "../components/FadeIn";
 
 export function Home() {
-  const [isVisible, setVisible] = React.useState(false);
-  const domRef = useRef(null)!;
-  useEffect(() => {
-    const observer = new IntersectionObserver(entries => {
-      entries.forEach(entry => setVisible(entry.isIntersecting));
-      {/* debug */}
-      entries.forEach(entry => console.log(entry.isIntersecting));
-    });
-    observer.observe(domRef.current!);
-  }, []);
-
   return (
     <>
-      <div className='row col'
-        style={{
-          'transition': 'opacity 0.6s ease-out, transform 1.2s ease-out',
-          'opacity': `${isVisible ? '1' : '0'}`,
-          'transform': `${isVisible ? 'none' : 'translateY(20vh)'}`,
-          'visibility': `${isVisible ? 'visible' : 'hidden'}`
-        }}
-        ref={domRef}>
-          <img src="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></img>
-      </div>
+      <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></FadeIn>
+      <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathin.webp"></FadeIn>
+      <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathoutrelease.webp"></FadeIn>
+      <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathoutdone.webp"></FadeIn>
     </>
   );
 }