diff --git a/src/components/actor-app.tsx b/src/components/actor-app.tsx --- a/src/components/actor-app.tsx +++ b/src/components/actor-app.tsx @@ -397,6 +397,7 @@ label: string; seed: string; title: string; + variant: "error" | "loading" | "not-found"; }; function StatePage({ @@ -404,16 +405,24 @@ title, description, seed, + variant, children, }: StatePageProps) { return ( -
+
haunt.at -
+

{label}

{title}

@@ -428,10 +437,11 @@ function LoadingPage({ seed }: { seed: string }) { return ( ); } @@ -439,14 +449,13 @@ function ErrorPage({ message, seed }: { message: string; seed: string }) { return ( - - return to haunt - + ); } @@ -454,14 +463,21 @@ function NotFoundPage() { return ( - - return to haunt - + + ); +} + +function StateReturnLink() { + return ( + + return to compendium + ); } diff --git a/src/styles/globals.css b/src/styles/globals.css --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -75,6 +75,15 @@ max-width: 25rem; } +.state-page--loading .state-reading { + animation: state-reading-enter 240ms ease-out 180ms forwards; + opacity: 0; +} + +.state-page--loading .haunt-sigil { + animation: state-sigil-summon 2.4s ease-in-out 420ms infinite; +} + .home-sigil, .state-reading .haunt-sigil { height: var(--home-sigil-size); @@ -109,6 +118,19 @@ font-size: 0.875rem; margin-top: 1.75rem; padding-bottom: 0.15rem; +} + +@keyframes state-reading-enter { + to { + opacity: 1; + } +} + +@keyframes state-sigil-summon { + 50% { + opacity: 0.58; + transform: scale(0.985); + } } .haunt-sigil { @@ -389,5 +411,15 @@ @media (prefers-reduced-motion: no-preference) { .profile-page { animation: atmosphere-drift 28s ease-in-out infinite alternate; + } +} + +@media (prefers-reduced-motion: reduce) { + .state-page--loading .state-reading { + animation-duration: 1ms; + } + + .state-page--loading .haunt-sigil { + animation: none; } }