diff --git a/package-lock.json b/package-lock.json
index 0f479a5..6f96770 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7527,9 +7527,9 @@
       }
     },
     "node_modules/styled-components": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.5.tgz",
-      "integrity": "sha512-308zi5o7LrA9cVaP4nPD0TaUpOjGPePkAUFb/OGB0xRI3I9ozpW5UyASvRVi9wJcYASG+Y3mLDLDUZC7nqzimw==",
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.6.tgz",
+      "integrity": "sha512-gkToLizJyiaRLGlPzfzvBY4DoC/fAKnRulstNXv/zXyvqKVaIQNHFbufjM1sspwqd77azcpnWuoZBL4O+oqxVw==",
       "dependencies": {
         "@babel/cli": "^7.21.0",
         "@babel/core": "^7.21.0",
diff --git a/src/js/App.tsx b/src/js/App.tsx
index 8dcdee2..6eaf60e 100644
--- a/src/js/App.tsx
+++ b/src/js/App.tsx
@@ -1,8 +1,10 @@
 import styled from 'styled-components';
+import { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { EpisodeSearch } from './EpisodesSearch';
 import { UnderConstructionBanner } from './UnderConstructionBanner';
 import { EpisodeSearchFallback } from './EpisodeSearchFallback';
+import { useObserver } from './hooks/useObserver';
 
 const Wrapper = styled.div`
   display: flex;
@@ -57,6 +59,12 @@ const Wrapper = styled.div`
 `;
 
 export const App = () => {
+  const { entry, ref } = useObserver();
+
+  useEffect(() => {
+    console.info(entry);
+  }, [entry]);
+
   return (
     <Wrapper>
       <header>
@@ -71,6 +79,7 @@ export const App = () => {
         <h1>transcript.fish</h1>
         <UnderConstructionBanner />
         <img
+          ref={ref}
           className="nstaaf-logo"
           src="https://media.transcript.fish/images/logo.jpg"
         />
diff --git a/src/js/hooks/useObserver.ts b/src/js/hooks/useObserver.ts
new file mode 100644
index 0000000..0b53c90
--- /dev/null
+++ b/src/js/hooks/useObserver.ts
@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from 'react';
+
+const nArray = (n: number) => [...Array(n), 1].map((_, i) => i / n);
+
+const options = {
+  root: null,
+  threshold: nArray(4),
+};
+
+export const useObserver = () => {
+  const ref = useRef(null);
+  const [entry, setEntry] = useState<IntersectionObserverEntry>();
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setEntry(entry);
+    }, options);
+
+    const { current } = ref;
+
+    if (current) {
+      observer.observe(current);
+    }
+
+    return () => {
+      if (current) {
+        observer.unobserve(current);
+      }
+    };
+  }, []);
+
+  return {
+    entry,
+    ref,
+  };
+};