diff --git a/app/page.tsx b/app/page.tsx index ff80c35..d90aaff 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,6 +8,7 @@ import { AlternativeTimekeeping } from "@/components/alternative-timekeeping" import { Footer } from "@/components/footer" import { SpaceTimeBackground } from "@/components/space-time-background" import { CursorWarp } from "@/components/cursor-warp" +import { BoopDivider } from "@/components/boop-divider" export default function Page() { return ( @@ -20,6 +21,7 @@ export default function Page() { + diff --git a/components/boop-divider.tsx b/components/boop-divider.tsx new file mode 100644 index 0000000..5311394 --- /dev/null +++ b/components/boop-divider.tsx @@ -0,0 +1,78 @@ +"use client" + +import { useState } from "react" + +export function BoopDivider({ targetId }: { targetId: string }) { + const [booped, setBooped] = useState(false) + + const handleBoop = () => { + setBooped(true) + + setTimeout(() => { + const target = document.getElementById(targetId) + if (target) { + target.scrollIntoView({ behavior: "smooth" }) + } + }, 400) + + setTimeout(() => setBooped(false), 1000) + } + + return ( +
+ {/* Decorative lines */} +
+
+
+
+
+ + {/* Boop button */} + + + {/* Subtle hint arrow */} +
+ + + +
+
+ ) +}