IMPROVED - Replace per-title hero entrance with a unified page transition

- Add (site)/template.tsx: one framer-motion enter animation (fade + rise +
  blur) that runs on every navigation, so moving between dock pages has a
  clean transition.
- Disable the staggered .hero-rise entrance now that the template handles it.
This commit is contained in:
moh
2026-09-20 19:46:58 +02:00
parent 572329097c
commit 5c10bce740
2 changed files with 31 additions and 3 deletions
+27
View File
@@ -0,0 +1,27 @@
"use client";
import { motion, useReducedMotion } from "framer-motion";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
/**
* Next.js re-mounts a `template` on every navigation, so this wrapper runs its
* enter animation each time the visitor moves between pages (via the dock or
* any link) — giving one unified page transition instead of per-element
* entrance animations.
*/
export default function SiteTemplate({ children }: { children: ReactNode }) {
const reducedMotion = useReducedMotion();
const pathname = usePathname();
return (
<motion.div
key={pathname}
initial={reducedMotion ? false : { opacity: 0, y: 18, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={reducedMotion ? { duration: 0 } : { duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
>
{children}
</motion.div>
);
}