From 76d631cc4cb700f855c0eeddd088787760c27939 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 25 Feb 2026 02:13:04 -0800
Subject: [PATCH] Add playful "boop to continue" section divider

Interactive divider between Kairos/Chronos and Indigenous Wisdom sections
with gradient styling, click-to-scroll, and ripple animation on boop.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/page.tsx                |  2 +
 components/boop-divider.tsx | 78 +++++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 components/boop-divider.tsx

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() {
         <Hero />
         <TimeSystemsSection />
         <KairosChronosSection />
+        <BoopDivider targetId="indigenous" />
         <IndigenousWisdomSection />
         <CalendarTranslator />
         <AlternativeTimekeeping />
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 (
+    <div className="relative py-12 flex flex-col items-center justify-center gap-3">
+      {/* Decorative lines */}
+      <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 flex items-center px-8 lg:px-32 pointer-events-none">
+        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-primary/30 to-primary/30" />
+        <div className="w-32" />
+        <div className="flex-1 h-px bg-gradient-to-l from-transparent via-accent/30 to-accent/30" />
+      </div>
+
+      {/* Boop button */}
+      <button
+        onClick={handleBoop}
+        className={`
+          relative z-10 group cursor-pointer
+          px-6 py-3 rounded-full
+          bg-gradient-to-r from-primary/10 to-accent/10
+          border border-primary/20
+          hover:border-primary/50 hover:from-primary/20 hover:to-accent/20
+          hover:shadow-lg hover:shadow-primary/20
+          active:scale-90
+          transition-all duration-300 ease-out
+          ${booped ? "scale-125 shadow-2xl shadow-primary/40 border-primary/60" : ""}
+        `}
+      >
+        <span
+          className={`
+            text-sm font-medium tracking-wide
+            bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent
+            transition-all duration-300
+            ${booped ? "scale-110" : "group-hover:tracking-wider"}
+          `}
+        >
+          {booped ? "boop!" : "boop to continue"}
+        </span>
+
+        {/* Ripple effect on boop */}
+        {booped && (
+          <>
+            <span className="absolute inset-0 rounded-full animate-ping bg-primary/20" />
+            <span className="absolute inset-0 rounded-full animate-ping bg-accent/10 animation-delay-100" />
+          </>
+        )}
+      </button>
+
+      {/* Subtle hint arrow */}
+      <div
+        className={`
+          text-primary/40 transition-all duration-500
+          ${booped ? "translate-y-2 opacity-0" : "animate-bounce"}
+        `}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" className="opacity-60">
+          <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </div>
+    </div>
+  )
+}