Add scrolling text component to main page and projects

Maypher · Maypher · commit 3f44d7adc49e · 2025-07-16T15:25:34.000-04:00
diff --git a/src/app/(frontend)/[locale]/layout.tsx b/src/app/(frontend)/[locale]/layout.tsx
@@ -31,7 +31,7 @@ export default async function RootLayout(props: Props) {
     <html lang={locale}>
       <body
         style={{ scrollbarGutter: 'stable', overflowY: 'scroll' }}
-        className={`${nexaFont.className} text-vector-cream bg-vector-black min-h-svh flex flex-col`}
+        className={`${nexaFont.className} text-vector-cream bg-vector-black min-h-svh flex flex-col overflow-x-clip`}
       >
         <NextIntlClientProvider>
           <Header />
diff --git a/src/app/(frontend)/[locale]/page.tsx b/src/app/(frontend)/[locale]/page.tsx
@@ -10,6 +10,7 @@ import { Metadata } from 'next'
 import ScrollToTopBtn from '@/components/mainPage/ScrollToTopBtn'
 import Footer from '@/components/mainPage/Footer'
 import NavLine from '@/components/mainPage/NavLine'
+import ScrollingText from '@/components/ScrollingText'
 
 import React from 'react'
 import { Link } from '@/i18n/navigation'
@@ -236,7 +237,10 @@ export default async function MainPage({ params }: Props) {
                 id="welcome"
                 className="header-screen flex flex-col lg:flex-row [&_figcaption]:flex [&_figcaption]:items-center [&_figcaption]:justify-center [&_figure]:pb-0! [&>div]:px-0! justify-stretch items-center grow lg:px-10 lg:mb-0"
                 key={image.id}
-                style={{ backgroundColor: image.bgColor }}
+                style={{
+                  backgroundColor:
+                    image.blockType !== 'animatedText' ? image.bgColor : 'transparent',
+                }}
               >
                 {image.blockType === 'image' && imageBlock(image)}
                 <ul
@@ -268,16 +272,24 @@ export default async function MainPage({ params }: Props) {
             )
           })
         )}
-        {mainPageImages.images?.slice(1).map((image) => {
+        {mainPageImages.images?.slice(1).map((image, i) => {
+          const scrollableText = image.blockType === 'animatedText'
+          const previousElement = mainPageImages.images?.slice(1).at(i - 1)
+          const previousColor =
+            previousElement?.blockType !== 'animatedText' ? previousElement?.bgColor : 'transparent'
+
           return (
             <div
-              style={{ backgroundColor: image.bgColor }}
+              style={{ backgroundColor: scrollableText ? previousColor : image.bgColor }}
               key={image.id}
-              className={`${image.blockType !== 'navigation' ? 'lg:min-h-svh' : ''} flex items-center`}
+              className={`${image.blockType !== 'navigation' && !scrollableText ? 'lg:min-h-svh' : ''} flex items-center`}
             >
               {image.blockType === 'image' && imageBlock(image)}
               {image.blockType === 'aboutUs' && aboutUsBlock(image)}
               {image.blockType === 'navigation' && navBlock(image, t('projects'), t('sculptures'))}
+              {image.blockType === 'animatedText' && (
+                <ScrollingText text={image.text} color={image.textColor} />
+              )}
             </div>
           )
         })}
diff --git a/src/app/(frontend)/[locale]/projects/[id]/page.tsx b/src/app/(frontend)/[locale]/projects/[id]/page.tsx
@@ -6,6 +6,7 @@ import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { RichText } from '@payloadcms/richtext-lexical/react'
 import headersConverter from '@/lib/utils/converter'
 import NextProject from '@/components/nextProjects'
+import ScrollingText from '@/components/ScrollingText'
 import '@styles/project.scss'
 
 import { ReactNode } from 'react'
@@ -238,42 +239,75 @@ const Page = async ({ params }: Props) => {
         })}
         <>
           <div className="hidden lg:block">
-            {project.images?.slice(1).map((img) => (
-              <div
-                key={img.id}
-                className="min-h-svh flex items-center justify-center img-container"
-                style={{
-                  backgroundColor:
-                    img.blockType === 'image'
-                      ? img.bgColor
-                      : img.blockType === 'imageGroup'
-                        ? img.images?.at(-1)?.bgColor
-                        : 'transparent',
-                }}
-              >
-                {img.blockType === 'image' ? DesktopImage(img) : DesktopImageGroup(img)}
-              </div>
-            ))}
+            {project.images?.slice(1).map((img, i, arr) => {
+              const prevElement = arr.at(Math.max(i - 1, 0)) // To not cause it to wrap to -1
+              const previousElementColor =
+                prevElement?.blockType === 'image'
+                  ? prevElement.bgColor
+                  : prevElement?.blockType === 'imageGroup'
+                    ? prevElement.images?.at(-1)?.bgColor
+                    : 'transparent'
+
+              return (
+                <div
+                  key={img.id}
+                  className={`${img.blockType !== 'animatedText' ? 'min-h-svh' : ''} flex items-center justify-center img-container`}
+                  style={{
+                    backgroundColor:
+                      img.blockType === 'image'
+                        ? img.bgColor
+                        : img.blockType === 'imageGroup'
+                          ? img.images?.at(-1)?.bgColor
+                          : 'transparent',
+                  }}
+                >
+                  {img.blockType === 'image' ? (
+                    DesktopImage(img)
+                  ) : img.blockType === 'imageGroup' ? (
+                    DesktopImageGroup(img)
+                  ) : (
+                    <div style={{ backgroundColor: previousElementColor }}>
+                      <ScrollingText text={img.text} color={img.textColor} />
+                    </div>
+                  )}
+                </div>
+              )
+            })}
           </div>
           <div className="block lg:hidden">
-            {project.images?.slice(1).map((img) => (
-              <div
-                key={img.id}
-                className="img-container"
-                style={{
-                  backgroundColor:
-                    img.blockType === 'image'
-                      ? img.bgColor
-                      : img.blockType === 'imageGroup'
-                        ? img.images?.at(-1)?.bgColor
-                        : 'transparent',
-                }}
-              >
-                {img.blockType === 'image'
-                  ? PhoneImage(img)
-                  : img.images?.map((groupedImg) => PhoneImage(groupedImg as ProjectImageSingle))}
-              </div>
-            ))}
+            {project.images?.slice(1).map((img, i, arr) => {
+              const prevElement = arr.at(Math.max(i - 1, 0)) // To not cause it to wrap to -1
+              const previousElementColor =
+                prevElement?.blockType === 'image'
+                  ? prevElement.bgColor
+                  : prevElement?.blockType === 'imageGroup'
+                    ? prevElement.images?.at(-1)?.bgColor
+                    : 'transparent'
+              return (
+                <div
+                  key={img.id}
+                  className="img-container"
+                  style={{
+                    backgroundColor:
+                      img.blockType === 'image'
+                        ? img.bgColor
+                        : img.blockType === 'imageGroup'
+                          ? img.images?.at(-1)?.bgColor
+                          : 'transparent',
+                  }}
+                >
+                  {img.blockType === 'image' ? (
+                    PhoneImage(img)
+                  ) : img.blockType === 'imageGroup' ? (
+                    img.images?.map((groupedImg) => PhoneImage(groupedImg as ProjectImageSingle))
+                  ) : (
+                    <div style={{ backgroundColor: previousElementColor }}>
+                      <ScrollingText text={img.text} color={img.textColor} />
+                    </div>
+                  )}
+                </div>
+              )
+            })}
           </div>
         </>
       </div>
diff --git a/src/collections/Projects.ts b/src/collections/Projects.ts
@@ -7,6 +7,7 @@ import { routing } from '@/i18n/routing'
 import draftAccess from '@/lib/utils/access'
 import purgeURL from '@/lib/utils/purge'
 import { PAYLOAD_SECRET } from '@/lib/secrets'
+import { ScrollingText } from '@/lib/payloadFields'
 
 // Extracting it from imageConfig since there's an extra field for groups so I add it manually when setting the schema
 const desktopConfig: Field = {
@@ -240,6 +241,7 @@ export const Projects: CollectionConfig = {
             },
           ],
         },
+        ScrollingText,
       ],
       validate: (imgs) => {
         const images = imgs as Project['images'] // Doing this because typing it in the function definition causes an error
diff --git a/src/components/ScrollingText.tsx b/src/components/ScrollingText.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import '@styles/scrollingText.scss'
+
+import { useEffect, useRef, useState } from 'react'
+
+export default function ScrollingText({
+  text,
+  color,
+}: {
+  text: string | null | undefined
+  color: string
+}) {
+  const textElement = useRef<HTMLSpanElement>(null)
+  const textContainer = useRef<HTMLDivElement>(null)
+
+  const [amountToFill, setAmountToFill] = useState(1)
+  const [textWidth, setTextWidth] = useState(0)
+
+  useEffect(() => {
+    function setupScroll() {
+      if (!textElement.current || !textContainer.current) return
+
+      const textStyles = getComputedStyle(textElement.current)
+      const textWidth =
+        textElement.current.getBoundingClientRect().width +
+        parseFloat(textStyles.marginInline.replace('px', '')) * 2
+      const screenWidth = window.screen.width
+
+      // Adding plus one to have a hidden one on the left edge
+      // of the screen so it scrolls into view
+      setAmountToFill(Math.ceil(screenWidth / textWidth) + 1)
+      setTextWidth(textWidth)
+
+      textContainer.current.style.setProperty('--scroll-amount', `${textWidth}px`)
+    }
+
+    setupScroll()
+
+    document.addEventListener('resize', setupScroll)
+
+    return () => document.removeEventListener('resize', setupScroll)
+  }, [textElement, textContainer, text])
+
+  return (
+    <div
+      className="text-2xl w-svw text-nowrap overflow-x-clip whitespace-nowrap"
+      style={{ color }}
+      ref={textContainer}
+    >
+      {[...new Array(amountToFill)].map((_, i) => (
+        <span
+          ref={textElement}
+          key={i}
+          className={`relative mx-25 w-fit ${amountToFill > 1 ? 'scroll-text' : ''} whitespace-nowrap`}
+          style={{ right: `${textWidth}px` }}
+        >
+          {text}
+        </span>
+      ))}
+    </div>
+  )
+}
diff --git a/src/globals/MainPage.ts b/src/globals/MainPage.ts
@@ -7,6 +7,7 @@ import { routing } from '@/i18n/routing'
 import { revalidatePath } from 'next/cache'
 import purgeRoute from '@/lib/utils/purge'
 import { PAYLOAD_SECRET } from '@/lib/secrets'
+import { ScrollingText } from '@/lib/payloadFields'
 
 const MainPage: GlobalConfig = {
   slug: 'mainPageImages',
@@ -213,6 +214,7 @@ const MainPage: GlobalConfig = {
             colorField,
           ],
         },
+        ScrollingText,
       ],
     },
   ],
diff --git a/src/lib/payloadFields.ts b/src/lib/payloadFields.ts
@@ -0,0 +1,33 @@
+import type { Block } from 'payload'
+import { colorField } from './utils/colors'
+import { Field } from 'payload'
+
+export const ScrollingText: Block = {
+  slug: 'animatedText',
+  labels: {
+    plural: 'texto animado',
+    singular: 'texto animado',
+  },
+  fields: [
+    {
+      type: 'text',
+      name: 'text',
+      label: 'texto',
+      localized: true,
+      admin: {
+        description: 'El texto a mostar moviendose a través de la pantalla',
+      },
+    },
+    {
+      ...colorField,
+      name: 'textColor',
+      label: 'color de Texto',
+      admin: {
+        description: 'El color del texto',
+        components: {
+          Field: '@/components/admin/ColorSelect.tsx',
+        },
+      },
+    } as Field,
+  ],
+}
diff --git a/src/lib/styles/scrollingText.scss b/src/lib/styles/scrollingText.scss
@@ -0,0 +1,16 @@
+.scroll-text {
+    animation: scroll 5s linear infinite forwards;
+    display: inline-block;
+    will-change: transform;
+}
+
+// This works just fine in everything except firefox for some reason it
+// flickers when restarting.
+@keyframes scroll {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(var(--scroll-amount));
+    }
+}
diff --git a/src/migrations/20250714_161041.json b/src/migrations/20250714_161041.json
diff --git a/src/migrations/20250714_161041.ts b/src/migrations/20250714_161041.ts
diff --git a/src/migrations/index.ts b/src/migrations/index.ts
diff --git a/src/payload-types.ts b/src/payload-types.ts

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export default async function RootLayout(props: Props) {`
`31`	`31`	`<html lang={locale}>`
`32`	`32`	`<body`
`33`	`33`	`style={{ scrollbarGutter: 'stable', overflowY: 'scroll' }}`
`34`		- className={`${nexaFont.className} text-vector-cream bg-vector-black min-h-svh flex flex-col`}
	`34`	+ className={`${nexaFont.className} text-vector-cream bg-vector-black min-h-svh flex flex-col overflow-x-clip`}
`35`	`35`	`>`
`36`	`36`	`<NextIntlClientProvider>`
`37`	`37`	`<Header />`