diff --git a/app/globals.css b/app/globals.css index 29a3fda..3bc56fa 100644 --- a/app/globals.css +++ b/app/globals.css @@ -22,10 +22,6 @@ html[data-poyraz-theme="light"] body { background-color: #ffffff; } -html[data-poyraz-theme="dark"] [data-cursor-portrait] { - display: none; -} - @layer utilities { @keyframes marquee { 0% { transform: translateX(0%); } @@ -40,4 +36,39 @@ html[data-poyraz-theme="dark"] [data-cursor-portrait] { animation-play-state: paused; } + @keyframes sleepy-z { + 0%, 12% { + opacity: 0; + transform: translate3d(0, 0.45rem, 0) scale(0.82) rotate(-8deg); + } + 28%, 68% { + opacity: 0.95; + } + 100% { + opacity: 0; + transform: translate3d(-0.3rem, -0.85rem, 0) scale(1.12) rotate(4deg); + } + } + + .animate-sleepy-z { + animation: sleepy-z 2.8s ease-in-out infinite; + opacity: 0; + will-change: transform, opacity; + } + + [data-sleepy-z="2"] { + animation-delay: 0.5s; + } + + [data-sleepy-z="3"] { + animation-delay: 1s; + } + + @media (prefers-reduced-motion: reduce) { + .animate-sleepy-z { + animation: none; + opacity: 0.8; + } + } + } diff --git a/components/poyraz-bottom-right-follower.tsx b/components/poyraz-bottom-right-follower.tsx index 5a757d1..b7235bf 100644 --- a/components/poyraz-bottom-right-follower.tsx +++ b/components/poyraz-bottom-right-follower.tsx @@ -12,6 +12,7 @@ import { const VIDEO_SRC = "/media/cursor-portrait/poyraz-bottom-right.mp4"; const POSTER_SRC = "/media/cursor-portrait/poyraz-bottom-right-poster.webp"; +const NIGHT_SRC = "/media/cursor-portrait/gece.webp"; const SEEK_INTERVAL_MS = 1000 / 60; const MIN_TIME_DELTA = 0.002; @@ -21,8 +22,8 @@ type DisplayMode = | "pending" | "interactive" | "poster-reduced" - | "hidden-mobile" - | "hidden-dark"; + | "night-static" + | "hidden-mobile"; function subscribeToMediaQuery(query: MediaQueryList, listener: () => void) { if (typeof query.addEventListener === "function") { @@ -52,13 +53,13 @@ export function PoyrazBottomRightFollower() { const reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); const updateDisplayMode = () => { - if (document.documentElement.dataset.poyrazTheme === "dark") { - setDisplayMode("hidden-dark"); + if (!desktopQuery.matches || !finePointerQuery.matches) { + setDisplayMode("hidden-mobile"); return; } - if (!desktopQuery.matches || !finePointerQuery.matches) { - setDisplayMode("hidden-mobile"); + if (document.documentElement.dataset.poyrazTheme === "dark") { + setDisplayMode("night-static"); return; } @@ -252,12 +253,9 @@ export function PoyrazBottomRightFollower() { }, [displayMode, videoFailed]); const showVideo = displayMode === "interactive" && !videoFailed; + const showNight = displayMode === "night-static"; - if ( - displayMode === "pending" || - displayMode === "hidden-mobile" || - displayMode === "hidden-dark" - ) { + if (displayMode === "pending" || displayMode === "hidden-mobile") { return null; } @@ -265,9 +263,39 @@ export function PoyrazBottomRightFollower() {