feat: Add Play/Pause toggle button for Icon Cloud component so that satisfies WCAG G186

apps/www/content/docs/components/icon-cloud.mdx

@@ -60,7 +60,14 @@ import { IconCloud } from "@/components/ui/icon-cloud"
 
 ## Props
 
-| Prop     | Type                | Default | Description                                |
-| -------- | ------------------- | ------- | ------------------------------------------ |
-| `icons`  | `React.ReactNode[]` | `[]`    | Array of icons to render in the cloud      |
-| `images` | `string[]`          | `[]`    | Array of image URLs to render in the cloud |
+| Prop          | Type                | Default | Description                                |
+| ------------- | ------------------- | ------- | ------------------------------------------ |
+| `icons`       | `React.ReactNode[]` | `[]`    | Array of icons to render in the cloud      |
+| `images`      | `string[]`          | `[]`    | Array of image URLs to render in the cloud |
+| `showControl` | `boolean`           | `true`  | Show play/pause control button             |
+
+## Accessibility
+
+The cloud rotates automatically, so it ships with a play/pause control by default to satisfy [WCAG 2.1 SC 2.2.2 (Pause, Stop, Hide)](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html).
+
+Rotation also pauses automatically when the user has `prefers-reduced-motion: reduce` enabled. Setting `showControl={false}` removes the only way to resume it, so opt out only when your layout provides its own control.

apps/www/public/llms-full.txt

@@ -10300,8 +10300,11 @@ Description: An interactive 3D tag cloud component
 "use client"
 
 import React, { useEffect, useRef, useState } from "react"
+import { Pause, Play } from "lucide-react"
 import { renderToString } from "react-dom/server"
 
+import { Button } from "@/components/ui/button"
+
 interface Icon {
   x: number
   y: number
@@ -10314,16 +10317,22 @@ interface Icon {
 interface IconCloudProps {
   icons?: React.ReactNode[]
   images?: string[]
+  showControl?: boolean
 }
 
 function easeOutCubic(t: number): number {
   return 1 - Math.pow(1 - t, 3)
 }
 
-export function IconCloud({ icons, images }: IconCloudProps) {
+export function IconCloud({
+  icons,
+  images,
+  showControl = true,
+}: IconCloudProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const [iconPositions, setIconPositions] = useState<Icon[]>([])
   const [isDragging, setIsDragging] = useState(false)
+  const [isPaused, setIsPaused] = useState(false)
   const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 })
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
   const [targetRotation, setTargetRotation] = useState<{
@@ -10340,6 +10349,21 @@ export function IconCloud({ icons, images }: IconCloudProps) {
   const iconCanvasesRef = useRef<HTMLCanvasElement[]>([])
   const imagesLoadedRef = useRef<boolean[]>([])
 
+  // Pause animation if user prefers reduced motion
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+    if (mediaQuery.matches) {
+      setIsPaused(true)
+    }
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsPaused(e.matches)
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
   // Create icon canvases once when icons/images change
   useEffect(() => {
     if (!icons && !images) return
@@ -10541,7 +10565,7 @@ export function IconCloud({ icons, images }: IconCloudProps) {
           if (progress >= 1) {
             setTargetRotation(null)
           }
-        } else if (!isDragging) {
+        } else if (!isDragging && !isPaused) {
           rotationRef.current = {
             x: rotationRef.current.x + (dy / canvas.height) * speed,
             y: rotationRef.current.y + (dx / canvas.width) * speed,
@@ -10592,7 +10616,16 @@ export function IconCloud({ icons, images }: IconCloudProps) {
 
           ctx.restore()
         })
-        animationFrameRef.current = requestAnimationFrame(animate)
+
+        const hasPendingAssets =
+          Boolean(icons || images) &&
+          !imagesLoadedRef.current.every((loaded) => loaded)
+        const shouldContinue =
+          !isPaused || isDragging || targetRotation !== null || hasPendingAssets
+
+        if (shouldContinue) {
+          animationFrameRef.current = requestAnimationFrame(animate)
+        }
       }
 
       animate()
@@ -10603,21 +10636,42 @@ export function IconCloud({ icons, images }: IconCloudProps) {
         cancelAnimationFrame(animationFrameRef.current)
       }
     }
-  }, [icons, images, iconPositions, isDragging, mousePos, targetRotation])
+  }, [
+    icons,
+    images,
+    iconPositions,
+    isDragging,
+    isPaused,
+    mousePos,
+    targetRotation,
+  ])
 
   return (
-    <canvas
-      ref={canvasRef}
-      width={400}
-      height={400}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
-      className="rounded-lg"
-      aria-label="Interactive 3D Icon Cloud"
-      role="img"
-    />
+    <div className="relative inline-block">
+      <canvas
+        ref={canvasRef}
+        width={400}
+        height={400}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        className="rounded-lg"
+        aria-label="Interactive 3D Icon Cloud"
+        role="img"
+      />
+      {showControl && (
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => setIsPaused(!isPaused)}
+          aria-label={isPaused ? "Play Animation" : "Pause Animation"}
+          className="absolute top-2 right-2"
+        >
+          {isPaused ? <Play size={16} /> : <Pause size={16} />}
+        </Button>
+      )}
+    </div>
   )
 }
 

apps/www/public/r/registry.json

@@ -924,7 +924,12 @@
       "type": "registry:ui",
       "title": "Icon Cloud",
       "description": "An interactive 3D tag cloud component",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
       "files": [
         {
           "path": "registry/magicui/icon-cloud.tsx",

apps/www/public/registry.json

@@ -924,7 +924,12 @@
       "type": "registry:ui",
       "title": "Icon Cloud",
       "description": "An interactive 3D tag cloud component",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
       "files": [
         {
           "path": "registry/magicui/icon-cloud.tsx",

apps/www/registry.json

@@ -924,7 +924,12 @@
       "type": "registry:ui",
       "title": "Icon Cloud",
       "description": "An interactive 3D tag cloud component",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
       "files": [
         {
           "path": "registry/magicui/icon-cloud.tsx",

apps/www/registry/__index__.tsx

@@ -886,7 +886,7 @@ export const Index: Record<string, any> = {
     name: "icon-cloud",
     description: "An interactive 3D tag cloud component",
     type: "registry:ui",
-    registryDependencies: undefined,
+    registryDependencies: ["button"],
     files: [{
       path: "registry/magicui/icon-cloud.tsx",
       type: "registry:ui",

apps/www/registry/magicui/icon-cloud.tsx

@@ -1,8 +1,11 @@
 "use client"
 
 import React, { useEffect, useRef, useState } from "react"
+import { Pause, Play } from "lucide-react"
 import { renderToString } from "react-dom/server"
 
+import { Button } from "@/components/ui/button"
+
 interface Icon {
   x: number
   y: number
@@ -15,16 +18,22 @@ interface Icon {
 interface IconCloudProps {
   icons?: React.ReactNode[]
   images?: string[]
+  showControl?: boolean
 }
 
 function easeOutCubic(t: number): number {
   return 1 - Math.pow(1 - t, 3)
 }
 
-export function IconCloud({ icons, images }: IconCloudProps) {
+export function IconCloud({
+  icons,
+  images,
+  showControl = true,
+}: IconCloudProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const [iconPositions, setIconPositions] = useState<Icon[]>([])
   const [isDragging, setIsDragging] = useState(false)
+  const [isPaused, setIsPaused] = useState(false)
   const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 })
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
   const [targetRotation, setTargetRotation] = useState<{
@@ -41,6 +50,21 @@ export function IconCloud({ icons, images }: IconCloudProps) {
   const iconCanvasesRef = useRef<HTMLCanvasElement[]>([])
   const imagesLoadedRef = useRef<boolean[]>([])
 
+  // Pause animation if user prefers reduced motion
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+    if (mediaQuery.matches) {
+      setIsPaused(true)
+    }
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsPaused(e.matches)
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
   // Create icon canvases once when icons/images change
   useEffect(() => {
     if (!icons && !images) return
@@ -242,7 +266,7 @@ export function IconCloud({ icons, images }: IconCloudProps) {
           if (progress >= 1) {
             setTargetRotation(null)
           }
-        } else if (!isDragging) {
+        } else if (!isDragging && !isPaused) {
           rotationRef.current = {
             x: rotationRef.current.x + (dy / canvas.height) * speed,
             y: rotationRef.current.y + (dx / canvas.width) * speed,
@@ -293,7 +317,16 @@ export function IconCloud({ icons, images }: IconCloudProps) {
 
           ctx.restore()
         })
-        animationFrameRef.current = requestAnimationFrame(animate)
+
+        const hasPendingAssets =
+          Boolean(icons || images) &&
+          !imagesLoadedRef.current.every((loaded) => loaded)
+        const shouldContinue =
+          !isPaused || isDragging || targetRotation !== null || hasPendingAssets
+
+        if (shouldContinue) {
+          animationFrameRef.current = requestAnimationFrame(animate)
+        }
       }
 
       animate()
@@ -304,20 +337,41 @@ export function IconCloud({ icons, images }: IconCloudProps) {
         cancelAnimationFrame(animationFrameRef.current)
       }
     }
-  }, [icons, images, iconPositions, isDragging, mousePos, targetRotation])
+  }, [
+    icons,
+    images,
+    iconPositions,
+    isDragging,
+    isPaused,
+    mousePos,
+    targetRotation,
+  ])
 
   return (
-    <canvas
-      ref={canvasRef}
-      width={400}
-      height={400}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
-      className="rounded-lg"
-      aria-label="Interactive 3D Icon Cloud"
-      role="img"
-    />
+    <div className="relative inline-block">
+      <canvas
+        ref={canvasRef}
+        width={400}
+        height={400}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        className="rounded-lg"
+        aria-label="Interactive 3D Icon Cloud"
+        role="img"
+      />
+      {showControl && (
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => setIsPaused(!isPaused)}
+          aria-label={isPaused ? "Play Animation" : "Pause Animation"}
+          className="absolute top-2 right-2"
+        >
+          {isPaused ? <Play size={16} /> : <Pause size={16} />}
+        </Button>
+      )}
+    </div>
   )
 }

apps/www/registry/registry-ui.ts

@@ -884,7 +884,8 @@ export const ui: Registry["items"] = [
     type: "registry:ui",
     title: "Icon Cloud",
     description: "An interactive 3D tag cloud component",
-    dependencies: [],
+    dependencies: ["lucide-react"],
+    registryDependencies: ["button"],
     files: [
       {
         path: "magicui/icon-cloud.tsx",