- Wrap #smooth-wrapper in an .app-shell: a fixed, inset, rounded, bordered
panel. Its transform makes it the containing block for the fixed wrapper, so
ScrollSmoother sizes the scroll viewport to the shell (content scrolls inside
it) without fighting ScrollSmoother's inline styles.
- Dock and corner controls stay outside the shell, on a brand-tinted 'desktop'
wallpaper painted on body.
- Reduced-motion path: the shell scrolls its content natively.
A template.tsx is re-created on every navigation, resetting AnimatePresence
so neither enter nor exit ran. Move the transition into a PageTransition
client component rendered in the persistent (site) layout, so AnimatePresence
survives navigations and the old page animates out before the new one in.
- Dock icons are now real SVG files under public/dock/ (macOS squircle
look, active variants), so they can be replaced with custom art later.
- Full-bleed icons (DockIcon padding 0), fixed logo src to stop the
refresh flash.
- Remove the top menu bar entirely; relocate theme/language/sound (+admin)
into a corner control dock that expands on click.
Swap the pill navigation for a macOS-style dock as the primary nav and a
slim top menu bar for utilities:
- components/ui/dock.tsx: Magic UI Dock/DockIcon (magnification via
useSpring/useTransform), ported to the project's framer-motion.
- components/layout/site-dock.tsx: bottom dock with the logo as the first
icon, each item a real next/link (SEO preserved, active state from the
pathname), monochrome squircle tiles, hover tooltips and a "soon" badge
for Products; top menu bar keeps locale/sound/theme/admin + a live clock.
- (site)/layout.tsx: render SiteDock instead of SiteHeader.
Home bento grid and all page content are unchanged.
moh