Martin Dvorak
374752c59e
Mobile only (<=639px / coarse pointers); desktop keeps its behaviour. Foundation - lib/motion.ts owns the spring presets (snappy/gentle/sheet), durations, easings and variants (screens, tabs, wizard steps, list stagger). - Native-feel CSS: press feedback scales every button, card, chip, tab, row and summary to 0.96 with a spring-like cubic-bezier on transform (scoped to phones/coarse pointers), tap-highlight off, touch-action manipulation, chrome text non-selectable, reduced motion drops it. - App shell fades in once on launch; the study feed fades in on phones. Applied - Tab bar: sliding active pill (shared layoutId) + icon bounce. - Study Decks/Homework, language toggle, difficulty and size pickers: the same gliding highlight, gated so desktop keeps the old styling. - Route content enters direction-aware (deeper = from the right, back = from the left, same-depth = crossfade) via RouteTransition on the library/create/homework content columns; library tab switches crossfade; wizard steps slide forward/backward (reduced motion safe). - Library: cards fade up in a capped stagger on first load, glide with layout animations and shrink away on delete (AnimatePresence). - Study feed: correct feedback pulses, wrong shakes, the progress bar settles with a spring curve, score and XP count up on the results. - Settings sheet uses the sheet spring; the drawer now follows the finger and closes on release velocity, like the sheet. - Generation progress: the stage message fades/slides between stages; the icon keeps its gentle wobble; the feed fades in on hand-off. Skipped, on purpose: LazyMotion (the sliding highlights need layout animations = domMax, same features the current import already has); route exit animations (the App Router unmounts the outgoing page — exits are handled by in-page AnimatePresence); replacing the study feed's native scroll-snap with finger-follow drag (would fight the platform scroller); finger-follow height animation for native <details> expanders. Verified: animation suite 8/8 (reduced motion + 4x-CPU-throttled trace: no long tasks, CLS 0.0000), regression 74/74, mobile 52/52, declutter 116/116, i18n 25/25. Lint + build clean. SW freezmo-v21.
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "framer-motion";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
import { screenVariants, tabVariants } from "@/lib/motion";
|
|
|
|
/**
|
|
* Direction-aware screen entrance for the page content column.
|
|
*
|
|
* Deeper paths (library → deck, library → create/homework) slide in from the
|
|
* right; going back slides from the left; same-depth switches crossfade.
|
|
* The wrapper only ever wraps the scrolling content column — fixed chrome
|
|
* (tab bar, sheets) stays outside it, so a transform can never capture it.
|
|
*
|
|
* Note: the App Router unmounts the outgoing page immediately, so this is an
|
|
* entrance animation (exits animate for in-page elements via AnimatePresence,
|
|
* e.g. list items).
|
|
*/
|
|
|
|
/** Module-level so the direction survives the per-route remount. */
|
|
let lastPath: string | null = null;
|
|
|
|
function depth(path: string): number {
|
|
if (path === "/") return 0;
|
|
return path.split("/").filter(Boolean).length;
|
|
}
|
|
|
|
export function RouteTransition({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
const reduceMotion = useReducedMotion();
|
|
|
|
const previous = lastPath;
|
|
lastPath = pathname;
|
|
|
|
const isTabSwitch = previous !== null && depth(previous) === depth(pathname) && previous !== pathname;
|
|
const direction: 1 | -1 =
|
|
previous === null || depth(pathname) >= depth(previous) ? 1 : -1;
|
|
const variants = isTabSwitch ? tabVariants(!!reduceMotion) : screenVariants(direction, !!reduceMotion);
|
|
|
|
return (
|
|
<motion.div initial="initial" animate="animate" variants={variants}>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|