new conf design — marquee

package.json

@@ -40,6 +40,7 @@
     "lucide-react": "^0.469.0",
     "markdown-to-jsx": "^7.4.0",
     "marked": "5.1.2",
+    "motion": "^12.11.0",
     "next": "^14.2.5",
     "next-image-export-optimizer": "^1.12.3",
     "next-query-params": "^5.0.0",
@@ -54,6 +55,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-medium-image-zoom": "5.2.13",
+    "react-use-measure": "^2.1.7",
     "rss": "1.2.2",
     "server-only": "0.0.1",
     "string-similarity": "^4.0.4",

src/app/conf/2025/components/footer/index.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from "react"
 import { clsx } from "clsx"
 
 import { SocialIcons } from "../../../_components/social-icons"
+import { StripesDecoration } from "../../../_design-system/stripes-decoration"
 
 import blurBean from "./blur-bean.webp"
 
@@ -66,11 +67,6 @@ export function Footer({
   )
 }
 
-const maskEven =
-  "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
-const maskOdd =
-  "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
-
 function Stripes() {
   return (
     <div
@@ -104,19 +100,9 @@ function Stripes() {
         maskOrigin: "top",
       }}
     >
-      <div
-        className="absolute inset-0 bg-[linear-gradient(180deg,var(--start-1)_0%,var(--end-1)_200%)]"
-        style={{
-          maskImage: maskEven,
-          WebkitMaskImage: maskEven,
-        }}
-      />
-      <div
-        className="absolute inset-0 bg-[linear-gradient(180deg,var(--start-2)_0%,var(--end-2)_200%)]"
-        style={{
-          maskImage: maskOdd,
-          WebkitMaskImage: maskOdd,
-        }}
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_0%,var(--end-1)_200%)]"
+        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_0%,var(--end-2)_200%)]"
       />
     </div>
   )

src/app/conf/2025/components/hero/index.tsx

@@ -12,7 +12,7 @@ import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
   return (
-    <article className="gql-conf-navbar-strip relative isolate flex flex-col justify-center bg-pri-base text-neu-0 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 before:dark:bg-blk/40">
+    <article className="gql-conf-navbar-strip relative isolate flex flex-col justify-center bg-pri-base text-neu-0 selection:bg-blk/40 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 dark:selection:bg-white/40 before:dark:bg-blk/40">
       <article className="relative">
         <Stripes />
         <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">

src/app/conf/2025/components/marquee-rows/index.tsx

@@ -0,0 +1,93 @@
+import { Fragment, ReactNode } from "react"
+
+import { Marquee } from "@/app/conf/_design-system/marquee"
+
+import CodeIcon from "../../pixelarticons/code.svg?svgr"
+
+import blurWave from "./blur.webp"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import { clsx } from "clsx"
+
+export interface MarqueeRowsProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: ReactNode[][]
+  variant: "primary" | "secondary"
+}
+
+export function MarqueeRows({
+  items,
+  className,
+  variant,
+  ...rest
+}: MarqueeRowsProps) {
+  const separator = (
+    <CodeIcon
+      className={clsx(
+        "size-8 md:size-10",
+        variant === "primary"
+          ? "text-pri-dark dark:text-pri-light"
+          : "text-pri-base",
+      )}
+    />
+  )
+
+  return (
+    <section
+      className={clsx(
+        "relative font-mono text-xl/none md:text-[56px]/none",
+        variant === "primary" ? "text-pri-base" : "text-neu-900",
+        className,
+      )}
+      {...rest}
+    >
+      {variant === "primary" && <Stripes />}
+      {items.map((row, i) => (
+        <Marquee
+          key={i}
+          gap={16}
+          speed={35}
+          speedOnHover={15}
+          className="relative *:select-none"
+          reverse={i % 2 === 1}
+          drag
+          separator={separator}
+        >
+          {row.map((item, j) => (
+            <Fragment key={j}>
+              {item}
+              {j !== row.length - 1 && separator}
+            </Fragment>
+          ))}
+        </Marquee>
+      ))}
+    </section>
+  )
+}
+
+function Stripes() {
+  return (
+    <div
+      role="presentation"
+      // prettier-ignore
+      // false positive
+      // eslint-disable-next-line tailwindcss/no-contradicting-classname
+      className="pointer-events-none absolute inset-0 -bottom-1/2
+
+    [--start:hsl(var(--color-pri-light)/.6)]
+    [--end:hsl(var(--color-pri-lighter)/.05)]
+    dark:[--start:hsl(320_86_20/.6)]
+    dark:[--end:hsl(var(--color-pri-base)/.025)]
+
+    [mask-size:400%_100%]
+    sm:[mask-size:cover]
+  "
+      style={{
+        maskImage: `url(${blurWave.src})`,
+        WebkitMaskImage: `url(${blurWave.src})`,
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration oddClassName="bg-[linear-gradient(180deg,var(--start)_0%,var(--end)_100%)]" />
+    </div>
+  )
+}

src/app/conf/2025/components/navbar.tsx

@@ -28,6 +28,10 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
     setMobileDrawerOpen(false)
   }, [pathname])
 
+  useEffect(() => {
+    document.body.style.overflow = mobileDrawerOpen ? "hidden" : "auto"
+  }, [mobileDrawerOpen])
+
   return (
     <>
       <div
@@ -36,23 +40,18 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
           mobileDrawerOpen ? "static" : "absolute",
         )}
       />
-      <div
-        // placeholder: the colors here on `before` must match the ones on Hero `before` strip
-        className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base before:absolute before:top-0 before:h-[calc(var(--navbar-h)+1px)] before:w-full before:bg-white/30 dark:bg-pri-darker dark:before:bg-black/40"
-      />
+      <NavbarPlaceholder className="bg-pri-base before:bg-white/30 dark:bg-pri-darker dark:before:bg-blk/40" />
       <header
         className={clsx(
-          "gql-all-anchors-focusable top-0 z-10 w-full border-b border-black/60 font-mono text-neu-900 antialiased dark:border-white/80",
-          mobileDrawerOpen
-            ? "fixed border-neu-900 dark:border-white"
-            : "sticky",
+          "gql-all-anchors-focusable sticky top-0 z-10 w-full border-b border-blk/60 font-mono text-neu-900 antialiased dark:border-white/80",
+          mobileDrawerOpen && "!border-neu-900 dark:!border-white",
         )}
       >
         <BackdropBlur />
         <div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 lg:px-10">
           <GraphQLConfLogoLink year={year} />
 
-          <div className="mr-auto flex h-full flex-col justify-center whitespace-pre border-x border-black/60 px-4 typography-menu dark:border-white/80 max-xl:hidden">
+          <div className="mr-auto flex h-full flex-col justify-center whitespace-pre border-x border-blk/60 px-4 typography-menu dark:border-white/80 max-xl:hidden">
             <p className="flex items-center gap-2 text-sm">
               <time dateTime="2025-09-08">September 08</time>
               <span>-</span>
@@ -65,8 +64,9 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
 
           {mobileDrawerOpen && (
             <div
+              // menu overlay
               onClick={handleDrawerClick}
-              className="fixed inset-0 top-[calc(var(--navbar-h)+1px)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
+              className="fixed inset-0 top-[calc(var(--navbar-h)+1px)] z-10 bg-white/40 backdrop-blur-[6.4px] dark:bg-blk/30"
             />
           )}
 
@@ -131,3 +131,19 @@ function BackdropBlur() {
     />
   )
 }
+
+export function NavbarPlaceholder({
+  className,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      // placeholder: the colors here on `before` must match the ones on Hero `before` strip
+      className={clsx(
+        "absolute h-[calc(var(--navbar-h)+1px)] w-full before:absolute before:top-0 before:h-[calc(var(--navbar-h)+1px)] before:w-full",
+        className,
+      )}
+      {...rest}
+    />
+  )
+}