Add a basic Marquee with Motion

Author: hasparus

package.json

@@ -36,6 +36,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",
@@ -50,6 +51,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",

pnpm-lock.yaml

@@ -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/hero/index.tsx

@@ -0,0 +1,35 @@
+import { Marquee } from "@/app/conf/_design-system/marquee"
+import CodeIcon from "../pixelarticons/code.svg?svgr"
+import { Fragment } from "react"
+
+const keywords = [
+  ["COMMUNITY", "DEVELOPER EXPERIENCE", "APIs", "TOOLS & LIBRARIES"],
+  ["OPEN SOURCE", "FEDERATION", "ECOSYSTEMS", "TRACING & OBSERVABILITY"],
+  ["BEST PRACTICES", "WORKSHOPS", "SCHEMAS", "SECURITY"],
+]
+
+export function MarqueeUnderHero() {
+  return (
+    <section className="py-6 font-mono text-xl/none text-pri-base md:pt-12 md:text-[56px]/none lg:pt-16 xl:pt-24">
+      {keywords.map((row, i) => (
+        <Marquee
+          key={i}
+          gap={16}
+          speed={35}
+          speedOnHover={15}
+          className="*:select-none"
+          reverse={i % 2 === 1}
+        >
+          {row.map((keyword, j) => (
+            <Fragment key={keyword}>
+              <span>{keyword}</span>
+              {j !== row.length - 1 && (
+                <CodeIcon className="size-8 text-pri-dark dark:text-pri-light md:size-10" />
+              )}
+            </Fragment>
+          ))}
+        </Marquee>
+      ))}
+    </section>
+  )
+}

src/app/conf/2025/components/marquee-under-hero.tsx

@@ -11,6 +11,7 @@ import { GetYourTicket } from "./components/get-your-ticket"
 import { RegisterSection } from "./components/register-section"
 import { Sponsors } from "./components/sponsors"
 import { GraphQLFoundationCard } from "./components/graphql-foundation-card"
+import { MarqueeUnderHero } from "./components/marquee-under-hero"
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
 }
@@ -20,6 +21,7 @@ export default function Page() {
     <main className="gql-all-anchors-focusable antialiased">
       <Hero />
       <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
+        <MarqueeUnderHero />
         <RegisterToday className="md:mb-8 md:mt-24" />
         <WhatToExpectSection className="md:mb-8 md:mt-24" />
         <TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />

src/app/conf/2025/page.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { clsx } from "clsx"
+import { useMotionValue, animate, motion } from "motion/react"
+import { useState, useEffect } from "react"
+import useMeasure from "react-use-measure"
+
+export interface MarqueeProps {
+  children: React.ReactNode
+  gap?: number
+  speed?: number
+  speedOnHover?: number
+  direction?: "horizontal" | "vertical"
+  reverse?: boolean
+  className?: string
+}
+
+export function Marquee({
+  children,
+  gap = 16,
+  speed = 100,
+  speedOnHover,
+  direction = "horizontal",
+  reverse = false,
+  className,
+}: MarqueeProps) {
+  const [currentSpeed, setCurrentSpeed] = useState(speed)
+  const [ref, { width, height }] = useMeasure()
+  const translation = useMotionValue(0)
+  const [isTransitioning, setIsTransitioning] = useState(false)
+  const [key, setKey] = useState(0)
+
+  useEffect(() => {
+    let controls
+    const size = direction === "horizontal" ? width : height
+    const contentSize = size + gap
+    const from = reverse ? 0 : -contentSize / 2
+    const to = reverse ? -contentSize / 2 : 0
+
+    const distanceToTravel = Math.abs(to - from)
+    const duration = distanceToTravel / currentSpeed
+
+    if (isTransitioning) {
+      const remainingDistance = Math.abs(translation.get() - to)
+      const transitionDuration = remainingDistance / currentSpeed
+
+      controls = animate(translation, [translation.get(), to], {
+        ease: "linear",
+        duration: transitionDuration,
+        onComplete: () => {
+          setIsTransitioning(false)
+          setKey(prevKey => prevKey + 1)
+        },
+      })
+    } else {
+      controls = animate(translation, [from, to], {
+        ease: "linear",
+        duration: duration,
+        repeat: Infinity,
+        repeatType: "loop",
+        repeatDelay: 0,
+        onRepeat: () => {
+          translation.set(from)
+        },
+      })
+    }
+
+    return controls?.stop
+  }, [
+    key,
+    translation,
+    currentSpeed,
+    width,
+    height,
+    gap,
+    isTransitioning,
+    direction,
+    reverse,
+  ])
+
+  const hoverProps =
+    speedOnHover != null
+      ? {
+          onHoverStart: () => {
+            setIsTransitioning(true)
+            setCurrentSpeed(speedOnHover)
+          },
+          onHoverEnd: () => {
+            setIsTransitioning(true)
+            setCurrentSpeed(speed)
+          },
+        }
+      : {}
+
+  return (
+    <div className={clsx("overflow-hidden", className)}>
+      <motion.div
+        className="flex w-max"
+        drag="x"
+        onDragStart={event => {
+          ;(event.target as HTMLElement).style.cursor = "grabbing"
+        }}
+        onDragEnd={event => {
+          ;(event.target as HTMLElement).style.cursor = "initial"
+        }}
+        style={{
+          ...(direction === "horizontal"
+            ? { x: translation }
+            : { y: translation }),
+          gap: `${gap}px`,
+          flexDirection: direction === "horizontal" ? "row" : "column",
+          alignItems: "center",
+        }}
+        ref={ref}
+        {...hoverProps}
+      >
+        {children}
+        {children}
+      </motion.div>
+    </div>
+  )
+}