diff --git a/src/components/landing/PawPrintTrail.tsx b/src/components/landing/PawPrintTrail.tsx index b5932a9..62d7961 100644 --- a/src/components/landing/PawPrintTrail.tsx +++ b/src/components/landing/PawPrintTrail.tsx @@ -7,26 +7,35 @@ type Print = { size: string; rotate: number; opacity: number; + /** First print stays visible immediately instead of revealing on scroll — + * an anchor that signals the trail before the reader has scrolled at all. */ + static?: boolean; }; // Scattered footprint positions down the "Über uns" page — deliberately // irregular (varied rotation/offset/size) so it reads as a trail, not a grid. const PRINTS: Print[] = [ - { top: "4%", side: "right", offset: "6%", size: "h-14 w-14 sm:h-20 sm:w-20", rotate: -18, opacity: 0.07 }, - { top: "16%", side: "left", offset: "4%", size: "h-10 w-10 sm:h-14 sm:w-14", rotate: 12, opacity: 0.08 }, - { top: "27%", side: "right", offset: "10%", size: "h-16 w-16 sm:h-24 sm:w-24", rotate: 8, opacity: 0.06 }, - { top: "40%", side: "left", offset: "8%", size: "h-12 w-12 sm:h-16 sm:w-16", rotate: -10, opacity: 0.07 }, - { top: "53%", side: "right", offset: "5%", size: "h-10 w-10 sm:h-14 sm:w-14", rotate: 20, opacity: 0.08 }, - { top: "66%", side: "left", offset: "12%", size: "h-14 w-14 sm:h-20 sm:w-20", rotate: -6, opacity: 0.06 }, - { top: "80%", side: "right", offset: "8%", size: "h-12 w-12 sm:h-16 sm:w-16", rotate: 15, opacity: 0.07 }, - { top: "92%", side: "left", offset: "6%", size: "h-10 w-10 sm:h-12 sm:w-12", rotate: -14, opacity: 0.06 }, + { top: "2%", side: "right", offset: "6%", size: "h-14 w-14 sm:h-20 sm:w-20", rotate: -18, opacity: 0.15, static: true }, + { top: "10%", side: "left", offset: "5%", size: "h-9 w-9 sm:h-12 sm:w-12", rotate: 10, opacity: 0.14 }, + { top: "18%", side: "right", offset: "12%", size: "h-10 w-10 sm:h-14 sm:w-14", rotate: -6, opacity: 0.15 }, + { top: "26%", side: "left", offset: "8%", size: "h-12 w-12 sm:h-16 sm:w-16", rotate: 14, opacity: 0.16 }, + { top: "34%", side: "right", offset: "6%", size: "h-16 w-16 sm:h-24 sm:w-24", rotate: 6, opacity: 0.14 }, + { top: "42%", side: "left", offset: "12%", size: "h-9 w-9 sm:h-12 sm:w-12", rotate: -12, opacity: 0.15 }, + { top: "50%", side: "right", offset: "9%", size: "h-12 w-12 sm:h-16 sm:w-16", rotate: 18, opacity: 0.16 }, + { top: "58%", side: "left", offset: "6%", size: "h-14 w-14 sm:h-20 sm:w-20", rotate: -8, opacity: 0.14 }, + { top: "66%", side: "right", offset: "14%", size: "h-10 w-10 sm:h-14 sm:w-14", rotate: 10, opacity: 0.15 }, + { top: "74%", side: "left", offset: "9%", size: "h-12 w-12 sm:h-16 sm:w-16", rotate: -16, opacity: 0.16 }, + { top: "82%", side: "right", offset: "7%", size: "h-14 w-14 sm:h-20 sm:w-20", rotate: 12, opacity: 0.14 }, + { top: "88%", side: "left", offset: "5%", size: "h-9 w-9 sm:h-12 sm:w-12", rotate: -10, opacity: 0.15 }, + { top: "94%", side: "right", offset: "10%", size: "h-12 w-12 sm:h-16 sm:w-16", rotate: 8, opacity: 0.14 }, ]; /** * Decorative paw print trail behind the "Über uns" story content (Gitea * #23) — pure CSS scroll-driven animation (see .paw-trail-icon in - * globals.css), so this stays a Server Component. Each print "stamps" - * into place as it scrolls into view instead of just sitting static. + * globals.css), so this stays a Server Component. Each print (other than + * the first, always-visible one) "stamps" into place as it scrolls into + * view instead of just sitting static. */ export function PawPrintTrail() { return ( @@ -34,12 +43,12 @@ export function PawPrintTrail() { {PRINTS.map((print, i) => (