mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2026-06-05 20:15:31 -04:00
jake
b2416ff0db
- Replace single `<ViewTransition>` wrapper in layout with `FadeTransition` and `DirectionalTransition` components applied per page - Add `components/page-transition.tsx` with reusable transition wrappers - Expand view transition CSS with named classes: fade, slide, nav-forward/back, morph, text-morph, scale — all driven by CSS custom property durations - Use React `<ViewTransition name=... share="text-morph">` for shared note title element between list and detail views - Wrap comments suspense boundary with enter/exit slide transitions - Add `persistent-nav` and `persistent-footer` view-transition-name groups to keep chrome static during navigation - Fix reduced-motion override to target delay and duration instead of `animation: none` - Add tracking-tight and letter-spacing tweaks to home page typography
30 lines
790 B
TypeScript
30 lines
790 B
TypeScript
import { ViewTransition } from "react";
|
|
|
|
const directionalEnterClasses = {
|
|
"nav-forward": "nav-forward",
|
|
"nav-back": "nav-back",
|
|
"nav-lateral": "fade-in",
|
|
default: "none",
|
|
} as const;
|
|
|
|
const directionalExitClasses = {
|
|
"nav-forward": "nav-forward",
|
|
"nav-back": "nav-back",
|
|
"nav-lateral": "fade-out",
|
|
default: "none",
|
|
} as const;
|
|
|
|
const DirectionalTransition = ({ children }: { children: React.ReactNode }) => (
|
|
<ViewTransition enter={directionalEnterClasses} exit={directionalExitClasses} default="none">
|
|
{children}
|
|
</ViewTransition>
|
|
);
|
|
|
|
const FadeTransition = ({ children }: { children: React.ReactNode }) => (
|
|
<ViewTransition enter="fade-in" exit="fade-out" default="none">
|
|
{children}
|
|
</ViewTransition>
|
|
);
|
|
|
|
export { DirectionalTransition, FadeTransition };
|