From 5bc57f0200d600e05291fed10a7151287c82c919 Mon Sep 17 00:00:00 2001 From: lukas Date: Sun, 13 Sep 2026 20:48:36 +0200 Subject: [PATCH] Remove the diagonal scroll animation and bump blur to 8px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Static now — drop the background-position keyframe animation and its now-stale comment. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01RvYdJ3os7tumimsLdLu2j9 --- .../ordering/MenuBackdrop.module.scss | 17 +---------------- src/components/ordering/MenuBackdrop.tsx | 4 +--- 2 files changed, 2 insertions(+), 19 deletions(-) diff --git a/src/components/ordering/MenuBackdrop.module.scss b/src/components/ordering/MenuBackdrop.module.scss index c7d19ac..8e72bde 100644 --- a/src/components/ordering/MenuBackdrop.module.scss +++ b/src/components/ordering/MenuBackdrop.module.scss @@ -1,26 +1,11 @@ -@keyframes menu-backdrop-scroll { - from { - background-position: 0 0; - } - to { - // Exactly one tile (see TILE_SIZE in MenuBackdrop.tsx) — moving by - // precisely that distance loops seamlessly since the background repeats. - background-position: 240px 240px; - } -} - .backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; - filter: blur(4px) grayscale(1); + filter: blur(8px) grayscale(1); opacity: 0.6; background-repeat: repeat; background-size: 240px 240px; - - @media (prefers-reduced-motion: no-preference) { - animation: menu-backdrop-scroll 20s linear infinite; - } } diff --git a/src/components/ordering/MenuBackdrop.tsx b/src/components/ordering/MenuBackdrop.tsx index 0c7b287..dddacf8 100644 --- a/src/components/ordering/MenuBackdrop.tsx +++ b/src/components/ordering/MenuBackdrop.tsx @@ -1,9 +1,7 @@ import styles from './MenuBackdrop.module.scss' // Rendered once as a tiny repeating SVG tile (not as individual DOM icons) -// so the whole pattern can scroll diagonally forever via a plain -// `background-position` CSS animation — moving by exactly one tile per -// loop wraps seamlessly since the background repeats. +// set as a CSS background-image, rather than one element per icon. const pizza = (color: string) => `