Style updates to computer animation

Author: webstackdev

COVERS.md

@@ -18,11 +18,7 @@ Design an abstract visualization of a wide funnel at the top receiving hundreds
 
 ### Prompt 4: Signal Amplification Through Reduction
 
-Create a visual metaphor showing a radar or sonar screen with a single bright, clear ping in the center, surrounded by a faded halo showing where noise used to be. The clear ping should be labeled or styled to suggest it represents a critical, actionable alert. Style: military-tech aesthetic, dark background with green/cyan glow, vintage CRT monitor texture, 16:9 aspect ratio.
-
-### Prompt 5: The Alert Audit Dashboard
-
-Illustrate a stylized cloud monitoring dashboard showing alert metrics transforming from chaotic (left side: crowded charts, red indicators, overwhelmed UI) to clean (right side: sparse, green indicators, clear hierarchy). The transition should flow naturally across the image. Style: UI/UX focused illustration, modern SaaS aesthetic, subtle gradients, professional color palette, 16:9 aspect ratio.
+Create a visual metaphor showing a radar or sonar screen with a single bright, clear ping in the center, surrounded by a faded halo showing where noise used to be. The clear ping should be labeled or styled to suggest it represents a critical, actionable cloud monitoring alert. Style: military-tech aesthetic, dark background with green/cyan glow, vintage CRT monitor texture, 16:9 aspect ratio.
 
 ## api-deprecation-sunset-headers-consumer-migration
 

src/components/Animations/Computers/client/__tests__/index.spec.ts

@@ -303,7 +303,7 @@ describe('ComputersAnimationElement', () => {
     })
   })
 
-  it('pauses when the element is not fully visible and resumes when it returns', async () => {
+  it('pauses when the element is not visible and resumes when it returns', async () => {
     await renderComputersAnimation(async ({ element, window }) => {
       void window
       element.initialize()
@@ -315,8 +315,8 @@ describe('ComputersAnimationElement', () => {
       intersectionObserverCallback?.(
         [
           {
-            isIntersecting: true,
-            intersectionRatio: 0.5,
+            isIntersecting: false,
+            intersectionRatio: 0,
           } as unknown as IntersectionObserverEntry,
         ],
         {} as IntersectionObserver

src/components/Animations/Computers/client/index.ts

@@ -47,6 +47,9 @@ const Anticipate = {
 export class ComputersAnimationElement extends LitElement {
   private timeline: Timeline | null = null
   private initialized = false
+  private animationReady = false
+  private deferredInitRafId: number | null = null
+  private deferredInitFrames = 0
   private animationController: AnimationControllerHandle | undefined
   private toggleButton: HTMLButtonElement | null = null
   private intersectionObserver: IntersectionObserver | undefined
@@ -111,36 +114,75 @@ export class ComputersAnimationElement extends LitElement {
       // is below the `lg` breakpoint, because it is not shown.
       if (this.isHiddenOnThisViewport()) {
         this.setAnimationState('paused')
+        this.scheduleDeferredInitialization()
         this.initialized = true
         return
       }
 
-      this.startAnimation()
+      this.setupAnimationAndController()
+      this.initialized = true
+    } catch (error) {
+      handleScriptError(error, context)
+    }
+  }
+
+  private scheduleDeferredInitialization(): void {
+    if (typeof window === 'undefined') return
+    if (this.deferredInitRafId !== null) return
 
-      const defaultState = this.getDefaultAnimationState()
-      this.setAnimationState(defaultState)
-      if (defaultState === 'paused') {
-        this.timeline?.pause(0)
+    const tick = () => {
+      this.deferredInitRafId = null
+
+      if (this.animationReady) {
+        return
       }
 
-      this.animationController = createAnimationController({
-        animationId: 'computers-animation',
-        debugLabel: SCRIPT_NAME,
-        defaultState,
-        onPause: () => {
-          this.pause()
-        },
-        onPlay: () => {
-          this.resume()
-        },
-      })
+      if (!this.isHiddenOnThisViewport()) {
+        this.setupAnimationAndController()
+        return
+      }
 
-      this.setupVisibilityHandlers()
-      this.syncPlaybackWithVisibility()
-      this.initialized = true
-    } catch (error) {
-      handleScriptError(error, context)
+      this.deferredInitFrames += 1
+      if (this.deferredInitFrames >= 60) {
+        return
+      }
+
+      this.deferredInitRafId = window.requestAnimationFrame(tick)
     }
+
+    this.deferredInitRafId = window.requestAnimationFrame(tick)
+  }
+
+  private setupAnimationAndController(): void {
+    if (this.animationReady) return
+    if (this.isHiddenOnThisViewport()) return
+
+    this.startAnimation()
+    if (!this.timeline) return
+
+    // Start from a known baseline and let the global lifecycle store decide what happens next.
+    // The store may immediately pause (reduced motion / persisted preference / overlays).
+    this.timeline.play(0)
+    this.setAnimationState('playing')
+
+    this.setupVisibilityHandlers()
+
+    this.animationController = createAnimationController({
+      animationId: 'computers-animation',
+      debugLabel: SCRIPT_NAME,
+      defaultState: 'playing',
+      initialState: 'playing',
+      onPause: () => {
+        this.pause()
+      },
+      onPlay: () => {
+        this.resume()
+      },
+    })
+
+    // Ensure visibility rules (viewport/document) take effect even if the store chooses 'playing'.
+    this.syncPlaybackWithVisibility()
+    this.animationReady = true
   }
 
   private isHiddenOnThisViewport(): boolean {
@@ -201,13 +243,12 @@ export class ComputersAnimationElement extends LitElement {
       this.intersectionObserver = new IntersectionObserverCtor(
         entries => {
           const entry = entries[0]
-          const ratio = entry?.intersectionRatio ?? 0
-          // Pause as soon as the element is even partially out of view.
-          // Only consider it "in viewport" when it is fully visible.
-          this.isInViewport = Boolean(entry?.isIntersecting && ratio >= 0.999)
+          // Auto-play as long as *any* part of the animation is visible.
+          // This avoids the hero animation being paused on load due to minor clipping.
+          this.isInViewport = Boolean(entry?.isIntersecting)
           this.syncPlaybackWithVisibility()
         },
-        { threshold: [0, 0.999] }
+        { threshold: [0] }
       )
 
       this.intersectionObserver.observe(this)
@@ -267,6 +308,12 @@ export class ComputersAnimationElement extends LitElement {
       this.resetToggleButton()
       this.removeAttribute('data-animation-state')
       this.initialized = false
+      this.animationReady = false
+      this.deferredInitFrames = 0
+      if (this.deferredInitRafId !== null && typeof window !== 'undefined') {
+        window.cancelAnimationFrame(this.deferredInitRafId)
+      }
+      this.deferredInitRafId = null
     } catch (error) {
       handleScriptError(error, context)
     }
@@ -315,6 +362,8 @@ export class ComputersAnimationElement extends LitElement {
 
     if (!this.toggleButton) return
 
+    this.setupAnimationAndController()
+
     const state = this.getAnimationState()
 
     if (state === 'playing') {
@@ -339,25 +388,6 @@ export class ComputersAnimationElement extends LitElement {
     return state ?? 'playing'
   }
 
-  private getDefaultAnimationState(): AnimationPlayState {
-    if (typeof window === 'undefined') {
-      return 'playing'
-    }
-
-    try {
-      if (typeof window.matchMedia === 'function') {
-        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
-        if (mediaQuery.matches) {
-          return 'paused'
-        }
-      }
-    } catch {
-      // Best effort only; fall through to playing
-    }
-
-    return 'playing'
-  }
-
   private startAnimation() {
     if (typeof document === 'undefined') return
     if (document.getElementById('heroAnimation') == undefined) return

src/components/Animations/Computers/index.astro

@@ -9,16 +9,19 @@ import Icon from '@components/Icon/index.astro'
   <div class="relative w-full max-w-lg mx-auto">
     <button
       type="button"
-      class="absolute bottom-1 right-1 z-(--z-raised) flex items-center justify-center rounded-full border border-trim bg-content-inverse p-1 shadow-lg transition-colors hover:bg-page-base-offset"
+      class="absolute bottom-1 right-1 z-(--z-raised) flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-inverse transition-colors hover:bg-primary-offset"
       data-animation-toggle
       aria-label="Pause animation"
       aria-pressed="false"
     >
-      <span data-animation-icon="pause">
-        <Icon name="pause" size={20} />
+      <span data-animation-icon="pause" class="flex h-10 w-10 items-center justify-center bg-transparent">
+        <Icon name="pause" size={20} variant="custom" class="text-primary-inverse fill-primary-inverse stroke-primary-inverse" />
       </span>
-      <span data-animation-icon="play" class="hidden">
-        <Icon name="play" size={20} />
+      <span
+        data-animation-icon="play"
+        class="flex h-10 w-10 items-center justify-center bg-transparent hidden"
+      >
+        <Icon name="play" size={20} variant="custom" class="text-primary-inverse fill-primary-inverse stroke-primary-inverse" />
       </span>
     </button>
     <div class="w-full h-auto rounded-2xl">
@@ -35,7 +38,7 @@ import Icon from '@components/Icon/index.astro'
           <clipPath id="monitorEdgeMask">
             <path
               class="monitorEdgeMask"
-              fill="var(--color-gray-700)"
+              fill="var(--theme-color-primary)"
               d="M559.7 79h-520C32.5 79 27 84.6 27 91.8V403h546V91.8c0-7.2-6.1-12.8-13.3-12.8z"
             ></path>
           </clipPath>
@@ -60,15 +63,15 @@ import Icon from '@components/Icon/index.astro'
           <g class="monitorStandGroup" clip-path="url(#monitorStandMask)">
             <path
               class="monitorStand"
-              fill="var(--color-gray-50)"
+              fill="var(--color-primary)"
               d="M386.3 512H374l-20.7-57h-106L226 512h-12.3c-2.6 0-4.7 1.9-4.7 4.5s2.1 4.5 4.7 4.5h172.7c2.6 0 4.7-1.9 4.7-4.5s-2.2-4.5-4.8-4.5z"
             ></path>
           </g>
-          <path class="monitorStandShadow" fill="var(--color-gray-200)" d="M357.4 467H242.6l4.5-12h106"></path>
+          <path class="monitorStandShadow" fill="var(--color-content-offset)" d="M357.4 467H242.6l4.5-12h106"></path>
           <g class="monitorEdgeGroup" clip-path="url(#monitorEdgeMask)">
             <path
               class="monitorEdge"
-              fill="var(--color-gray-700)"
+              fill="var(--color-primary)"
               d="M559.7 79h-520C32.5 79 27 84.6 27 91.8V403h546V91.8c0-7.2-6.1-12.8-13.3-12.8z"
             ></path>
             <path
@@ -105,19 +108,19 @@ import Icon from '@components/Icon/index.astro'
           </g>
           <path
             class="monitorBottom"
-            fill="var(--color-gray-50)"
+            fill="var(--color-content-offset)"
             d="M573 403v39c0 7.1-6.1 13-13.3 13h-520c-7.2 0-12.7-5.9-12.7-13v-39h546z"></path>
           <circle class="monitorLogo" fill="var(--color-gray-400)" cx="300" cy="426" r="10"></circle>
         </g>
         <g class="laptopGroup">
-          <path class="laptopEdgeLeft" fill="var(--color-gray-50)" d="M310 401.5H131.5v-226c0-3.9 3.2-7 7-7H310"
+          <path class="laptopEdgeLeft" fill="var(--color-primary)" d="M310 401.5H131.5v-226c0-3.9 3.2-7 7-7H310"
           ></path>
-          <path class="laptopEdgeRight" fill="var(--color-gray-50)" d="M290 168.5h171.5c3.8 0 7 3.1 7 7v226H290"
+          <path class="laptopEdgeRight" fill="var(--color-primary)" d="M290 168.5h171.5c3.8 0 7 3.1 7 7v226H290"
           ></path>
           <g class="laptopBaseGroup" clip-path="url(#laptopBaseMask)">
             <path
               class="laptopBase"
-              fill="var(--color-gray-50)"
+              fill="var(--color-primary)"
               d="M487 409v15.5c0 3.8-3.2 7.5-7 7.5H120c-3.8 0-7-3.7-7-7.5V409h374z"></path>
           </g>
           <path class="laptopTrackpad" fill="var(--color-gray-400)" d="M326.7 421.8h-53.4l-5-7.6h63.4"></path>
@@ -156,7 +159,7 @@ import Icon from '@components/Icon/index.astro'
         <g class="phoneGroup" opacity="0">
           <path
             class="phoneEdge"
-            fill="var(--color-gray-50)"
+            fill="var(--color-primary)"
             d="M255.2 371.4V198.6c0-3.2 2.7-5.9 5.9-5.9H339c3.2 0 5.9 2.7 5.9 5.9v172.9c0 3.2-2.7 5.9-5.9 5.9h-77.9c-3.3-.1-5.9-2.7-5.9-6z"
           ></path>
           <circle class="phoneButton" fill="var(--color-gray-400)" cx="300" cy="363.1" r="6"></circle>
@@ -201,7 +204,7 @@ import Icon from '@components/Icon/index.astro'
         <g class="tabletGroup">
           <path
             class="tabletEdge"
-            fill="var(--color-gray-50)"
+            fill="var(--color-primary)"
             d="M198.5 404.5v-239c0-7.7 6.3-14 14-14h175c7.7 0 14 6.3 14 14v239c0 7.7-6.3 14-14 14h-175c-7.7 0-14-6.3-14-14z"
           ></path>
           <path

src/components/Hero/Home/__tests__/index.spec.ts

@@ -9,10 +9,16 @@ describe('Home Hero (Astro)', () => {
     container = await AstroContainer.create()
   })
 
-  test('labels the hero section and hides decorative CTA arrow svgs', async () => {
+  test('labels the hero section and renders the hardcoded CTAs', async () => {
     const HomeHero = (await import('@components/Hero/Home/index.astro')).default
 
-    const renderedHtml = await container.renderToString(HomeHero)
+    const renderedHtml = await container.renderToString(HomeHero, {
+      props: {
+        pretitle:
+          'I turn deployment nightmares into one-click operations. Legacy migrations, CI/CD pipelines, observability stacks—built to survive production.',
+        benefits: ['Zero-downtime migrations', 'Self-healing infrastructure', 'Developer-friendly golden paths'],
+      },
+    })
 
     await withJsdomEnvironment(async ({ window }) => {
       window.document.body.innerHTML = renderedHtml
@@ -24,17 +30,17 @@ describe('Home Hero (Astro)', () => {
       const title = window.document.getElementById('home-hero-title')
       expect(title?.tagName).toBe('H1')
 
-      const primaryLink = window.document.querySelector('a[href="/services/web-development"]')
+      const primaryLink = window.document.querySelector('a[href="/about"]')
       expect(primaryLink).toBeTruthy()
-      const primaryArrow = primaryLink?.querySelector('svg')
-      expect(primaryArrow?.getAttribute('aria-hidden')).toBe('true')
-      expect(primaryArrow?.getAttribute('focusable')).toBe('false')
+      expect(primaryLink?.getAttribute('class')).toContain('bg-success')
 
-      const secondaryLink = window.document.querySelector('a[href="/services/consulting"]')
+      const secondaryLink = window.document.querySelector('a[href="/contact"]')
       expect(secondaryLink).toBeTruthy()
-      const secondaryArrow = secondaryLink?.querySelector('svg')
-      expect(secondaryArrow?.getAttribute('aria-hidden')).toBe('true')
-      expect(secondaryArrow?.getAttribute('focusable')).toBe('false')
+      const secondaryClass = secondaryLink?.getAttribute('class') || ''
+      expect(secondaryClass).toContain('decoration-dotted')
+      expect(secondaryClass).toContain('focus-visible:decoration-dotted')
+      expect(secondaryClass).toContain('hover:decoration-content-offset')
+      expect(secondaryClass).toContain('focus-visible:decoration-content-offset')
     })
   })
 })