fix(landing): smooth featured customer transitions

Author: andresdjasso

apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx

@@ -1,4 +1,7 @@
-import { ChipTag, cn } from '@sim/emcn'
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { ChipTag, cn, usePrefersReducedMotion } from '@sim/emcn'
 import Image from 'next/image'
 import { LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
 
@@ -35,8 +38,22 @@ interface FeaturedCustomerCardProps {
 
 /** Shared media and editorial caption treatment for each featured-customer slide. */
 export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCustomerCardProps) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const reducedMotion = usePrefersReducedMotion()
   const isFilm = story.media.kind === 'video'
 
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    if (active && !reducedMotion) {
+      /** Autoplay may be blocked; the poster remains the fallback. */
+      void video.play().catch(() => {})
+    } else {
+      video.pause()
+    }
+  }, [active, reducedMotion])
+
   return (
     <article
       aria-hidden={!active}
@@ -56,31 +73,27 @@ export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCust
             quality={90}
             className='object-cover'
           />
-          {active && (
-            <video
-              aria-hidden='true'
-              autoPlay
-              loop
-              muted
-              playsInline
-              preload='metadata'
-              poster={story.media.poster}
-              src={story.media.src}
-              tabIndex={-1}
-              className='pointer-events-none absolute inset-0 size-full object-cover motion-reduce:hidden'
-            />
-          )}
+          <video
+            ref={videoRef}
+            aria-hidden='true'
+            loop
+            muted
+            playsInline
+            preload='metadata'
+            poster={story.media.poster}
+            src={story.media.src}
+            tabIndex={-1}
+            className='pointer-events-none absolute inset-0 size-full object-cover motion-reduce:hidden'
+          />
           <div className='absolute inset-0 bg-[linear-gradient(135deg,rgba(0,0,0,0.68)_0%,rgba(0,0,0,0.3)_36%,rgba(0,0,0,0.08)_70%)]' />
         </>
       )}
 
       <div
         data-customer-story-content='true'
         className={cn(
-          'relative z-10 flex h-full items-start p-12 transition-[opacity,transform] duration-500 ease-out motion-reduce:transform-none motion-reduce:transition-none max-sm:p-6 max-lg:p-8',
-          emphasized
-            ? cn('translate-y-0 opacity-100', active ? 'delay-150' : 'delay-0')
-            : 'translate-y-2 opacity-40 delay-0'
+          'relative z-10 flex h-full items-start p-12 transition-[opacity,translate] duration-600 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:translate-y-0 motion-reduce:transition-none max-sm:p-6 max-lg:p-8',
+          emphasized ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-40'
         )}
       >
         <div className='max-w-[42rem]'>

apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx

@@ -3,12 +3,15 @@
  */
 import { act, type ReactNode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const motionPreference = vi.hoisted(() => ({ reduced: false }))
 
 vi.mock('@sim/emcn', () => ({
   Button: (props: React.ButtonHTMLAttributes<HTMLButtonElement>) => <button {...props} />,
   ChipTag: ({ children }: { children: ReactNode }) => <span>{children}</span>,
   cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+  usePrefersReducedMotion: () => motionPreference.reduced,
   Tooltip: {
     Root: ({ children }: { children: ReactNode }) => children,
     Trigger: ({ children }: { children: ReactNode }) => children,
@@ -31,8 +34,15 @@ vi.mock('@sim/emcn/icons', () => ({
 
 import { FeaturedCustomer } from '@/app/(landing)/components/featured-customer/featured-customer'
 
+beforeEach(() => {
+  motionPreference.reduced = false
+  vi.spyOn(HTMLMediaElement.prototype, 'play').mockResolvedValue(undefined)
+  vi.spyOn(HTMLMediaElement.prototype, 'pause').mockImplementation(() => {})
+})
+
 afterEach(() => {
   vi.useRealTimers()
+  vi.restoreAllMocks()
   document.body.replaceChildren()
 })
 
@@ -56,6 +66,10 @@ describe('FeaturedCustomer', () => {
       '[data-customer-story-content="true"]'
     ) as HTMLElement
     const carouselRail = host.querySelector('[data-customer-carousel-rail="true"]') as HTMLElement
+    const video = rivian.querySelector('video') as HTMLVideoElement
+    video.currentTime = 12
+
+    expect(video.play).toHaveBeenCalledOnce()
 
     expect(rivian.querySelector('img[alt="Rivian | Volkswagen Group Technologies"]')).not.toBeNull()
     expect(host.querySelector('blockquote')).toBeNull()
@@ -113,9 +127,8 @@ describe('FeaturedCustomer', () => {
     expect(expRealty.className).toContain('opacity-100')
     expect(expRealtyContent.className).toContain('translate-y-0')
     expect(expRealtyContent.className).toContain('opacity-100')
-    expect(expRealtyContent.className).toContain('delay-150')
-    expect(carouselRail.className).toContain('xl:pl-24')
-    expect(carouselRail.className).not.toContain('xl:pr-24')
+    expect(carouselRail.className).toContain('xl:translate-x-24')
+    expect(carouselRail.className).toContain('xl:pr-24')
     const previousButton = host.querySelector(
       '[aria-label="View Rivian customer story"]'
     ) as HTMLButtonElement
@@ -125,7 +138,9 @@ describe('FeaturedCustomer', () => {
     ) as HTMLButtonElement
     expect(disabledNext.disabled).toBe(true)
     expect(expRealty.querySelector('img[alt="eXp Realty"]')).not.toBeNull()
-    expect(host.querySelector('video')).toBeNull()
+    expect(host.querySelector('video')).toBe(video)
+    expect(video.currentTime).toBe(12)
+    expect(video.pause).toHaveBeenCalledOnce()
     expect(
       [...expRealty.querySelectorAll('img')].map((image) => image.getAttribute('src'))
     ).toEqual(['/landing/logos/exp-realty.svg'])
@@ -139,12 +154,38 @@ describe('FeaturedCustomer', () => {
 
     expect(rivian.getAttribute('aria-current')).toBe('true')
     expect(expRealty.getAttribute('aria-current')).toBeNull()
+    expect(rivian.querySelector('video')).toBe(video)
+    expect(video.currentTime).toBe(12)
+    expect(video.play).toHaveBeenCalledTimes(2)
 
     act(() => {
       root.unmount()
     })
   })
 
+  it('keeps video paused with reduced motion and responds to preference changes', () => {
+    motionPreference.reduced = true
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    act(() => root.render(<FeaturedCustomer />))
+    const video = host.querySelector('video') as HTMLVideoElement
+    expect(video.play).not.toHaveBeenCalled()
+    expect(video.pause).toHaveBeenCalledOnce()
+
+    motionPreference.reduced = false
+    act(() => root.render(<FeaturedCustomer />))
+    expect(video.play).toHaveBeenCalledOnce()
+
+    motionPreference.reduced = true
+    act(() => root.render(<FeaturedCustomer />))
+    expect(video.pause).toHaveBeenCalledTimes(2)
+
+    act(() => root.unmount())
+  })
+
   it('emphasizes and selects the neighboring customer story', () => {
     ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
     const host = document.createElement('div')

apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx

@@ -43,7 +43,7 @@ const CUSTOMER_STORIES: FeaturedCustomerStory[] = [
 /**
  * Customer-story carousel with one full-emphasis card and a reduced-scale
  * adjacent preview. Only the active film card plays video; an inactive film
- * keeps its poster visible, and a brand card uses its own wordmark. A previous/next pair on the page
+ * holds its current frame, and a brand card uses its own wordmark. A previous/next pair on the page
  * ground above the film, fixed flush with the first card's right edge, moves
  * between stories, with the arrow that has nowhere to go disabled.
  */
@@ -63,11 +63,6 @@ export function FeaturedCustomer() {
       className='w-full overflow-hidden'
     >
       <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
-        {/* The control pair lives on the page ground above the film, outside
-          the rail whose padding flips to shift the frame, so it keeps one
-          place: flush with the first card's right edge, whichever story is
-          active. Both arrows are always present; the direction with no story
-          is disabled. */}
         <div className='mb-4 flex items-center justify-end gap-2 xl:pr-24'>
           <FeaturedCustomerNavigationButton
             direction='previous'
@@ -90,8 +85,8 @@ export function FeaturedCustomer() {
         <div
           data-customer-carousel-rail='true'
           className={cn(
-            'transition-[padding] duration-700 ease-out motion-reduce:duration-0',
-            activeIndex === 0 ? 'xl:pr-24' : 'xl:pl-24'
+            'transition-[translate] duration-600 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none xl:pr-24',
+            activeIndex > 0 && 'xl:translate-x-24'
           )}
         >
           <div className='relative isolate aspect-[2/1] w-full max-sm:aspect-[4/5]'>
@@ -112,14 +107,15 @@ export function FeaturedCustomer() {
                   onFocus={() => !isActive && setPreviewedIndex(index)}
                   onBlur={() => setPreviewedIndex(null)}
                   className={cn(
-                    'absolute inset-0 transition-[transform,opacity] duration-700 ease-out motion-reduce:duration-0',
+                    'absolute inset-0 transition-[translate,scale,opacity] duration-600 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+                    index === 0 ? 'origin-right' : 'origin-left',
                     isActive && 'z-10 translate-x-0 scale-100 opacity-100',
                     !isActive &&
                       isNext &&
-                      'z-20 origin-left translate-x-[calc(100%_+_1.5rem)] scale-[0.92] max-sm:translate-x-[calc(100%_+_0.75rem)] max-sm:scale-[0.96]',
+                      'z-20 translate-x-[calc(100%_+_1.5rem)] scale-[0.92] max-sm:translate-x-[calc(100%_+_0.75rem)] max-sm:scale-[0.96]',
                     !isActive &&
                       !isNext &&
-                      '-translate-x-[calc(100%_+_1.5rem)] max-sm:-translate-x-[calc(100%_+_0.75rem)] z-20 origin-right scale-[0.92] max-sm:scale-[0.96]',
+                      '-translate-x-[calc(100%_+_1.5rem)] max-sm:-translate-x-[calc(100%_+_0.75rem)] z-20 scale-[0.92] max-sm:scale-[0.96]',
                     !isActive && (isPreviewed ? 'opacity-100' : 'opacity-75')
                   )}
                 >