From efd3b00075e1ae5b33635334a94746e3081d9c38 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sat, 12 Sep 2026 16:51:48 +0200
Subject: [PATCH] feat(site): smoother motion across the landing pages

- Slow Ken Burns drift on the hero artwork for cinematic depth.
- Gentle breathing pulse on the brand glows behind Frank and the hero.
- Silkier reveal easing (cubic-bezier .22/1/.36/1, 0.55s) site-wide.
- Eased, longer hover transitions on the hero CTAs.
- Smooth page scrolling, all guarded by prefers-reduced-motion.
---
 src/app/(site)/page.tsx          |  5 ++--
 src/app/globals.css              | 45 ++++++++++++++++++++++++++++++++
 src/components/motion-reveal.tsx |  2 +-
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 9abe462e..41fc4856 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -228,6 +228,7 @@ export default async function Home() {
 						fill
 						priority
 						sizes="100vw"
+						className="ken-burns"
 						style={{ objectFit: "cover", objectPosition: "center 20%" }}
 					/>
 					<div
@@ -290,7 +291,7 @@ export default async function Home() {
 						<div className="flex flex-wrap gap-2.5 sm:gap-3 justify-center">
 							<Link
 								href="/register"
-								className="btn-shine inline-flex items-center gap-2 sm:gap-2.5 font-extrabold text-xs sm:text-sm px-5 sm:px-8 py-3 sm:py-4 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
+								className="btn-shine inline-flex items-center gap-2 sm:gap-2.5 font-extrabold text-xs sm:text-sm px-5 sm:px-8 py-3 sm:py-4 rounded-xl transition-all duration-300 ease-out hover:scale-[1.03] active:scale-95 shadow-lg"
 								style={{
 									background: "var(--color-primary)",
 									color: "var(--color-primary-foreground)",
@@ -309,7 +310,7 @@ export default async function Home() {
 							</Link>
 							<Link
 								href="/login"
-								className="inline-flex items-center gap-2 font-bold text-xs sm:text-sm px-5 sm:px-8 py-3 sm:py-4 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
+								className="inline-flex items-center gap-2 font-bold text-xs sm:text-sm px-5 sm:px-8 py-3 sm:py-4 rounded-xl border-2 transition-all duration-300 ease-out hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
 								style={{
 									borderColor:
 										"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
diff --git a/src/app/globals.css b/src/app/globals.css
index acdc3c26..b10c4877 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2083,3 +2083,48 @@ details[open] > summary .details-open\:rotate-180 {
 	font-weight: 900;
 	letter-spacing: -0.02em;
 }
+
+/* ── Smooth motion (landing) ───────────────────────────────────────── */
+html {
+	scroll-behavior: smooth;
+}
+
+/* Soft, slow drift for hero artwork (Ken Burns). */
+.ken-burns {
+	animation: ken-burns 20s ease-in-out infinite alternate;
+	will-change: transform;
+}
+@keyframes ken-burns {
+	from {
+		transform: scale(1.02) translateY(0);
+	}
+	to {
+		transform: scale(1.08) translateY(-1.5%);
+	}
+}
+
+/* Gentle breathing pulse for the brand glows behind Frank / the hero. */
+.brand-halo {
+	animation: hero-halo-pulse 6s ease-in-out infinite;
+}
+@keyframes hero-halo-pulse {
+	0%,
+	100% {
+		opacity: 0.55;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 0.9;
+		transform: scale(1.07);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	html {
+		scroll-behavior: auto;
+	}
+	.ken-burns,
+	.brand-halo {
+		animation: none;
+	}
+}
diff --git a/src/components/motion-reveal.tsx b/src/components/motion-reveal.tsx
index e094ec4d..ed31d947 100644
--- a/src/components/motion-reveal.tsx
+++ b/src/components/motion-reveal.tsx
@@ -18,7 +18,7 @@ export function Reveal({ children, className, delay = 0 }: RevealProps) {
 			initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 24 }}
 			whileInView={{ opacity: 1, y: 0 }}
 			viewport={{ once: true, margin: "-40px" }}
-			transition={{ duration: 0.45, delay, ease: [0.25, 0.1, 0.25, 1] }}
+			transition={{ duration: 0.55, delay, ease: [0.22, 1, 0.36, 1] }}
 		>
 			{children}
 		</motion.div>