Initial commit

src/components/AnimatedClaudeAsterisk.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Text } from 'ink'
+import {
+  smallAnimatedArray,
+  largeAnimatedAray,
+} from '../constants/claude-asterisk-ascii-art.js'
+import { getTheme } from '../utils/theme.js'
+
+export type ClaudeAsteriskSize = 'small' | 'medium' | 'large'
+
+interface AnimatedClaudeAsteriskProps {
+  size?: ClaudeAsteriskSize
+  cycles?: number
+  color?: string
+  intervalMs?: number
+}
+
+export function AnimatedClaudeAsterisk({
+  size = 'small',
+  cycles,
+  color,
+  intervalMs,
+}: AnimatedClaudeAsteriskProps): React.ReactNode {
+  const [currentAsciiArtIndex, setCurrentAsciiArtIndex] = React.useState(0)
+  const direction = React.useRef(1)
+  const animateLoopCount = React.useRef(0)
+  const theme = getTheme()
+
+  // Determine which array to use based on size
+  const animatedArray =
+    size === 'large' ? largeAnimatedAray : smallAnimatedArray
+
+  // Animation interval for ascii art
+  React.useEffect(() => {
+    const timer = setInterval(
+      () => {
+        setCurrentAsciiArtIndex(prevIndex => {
+          // Stop animating after specified number of cycles if provided
+          if (
+            cycles !== undefined &&
+            cycles !== null &&
+            animateLoopCount.current >= cycles
+          ) {
+            return 0
+          }
+
+          // Cycle through array indices
+          if (prevIndex === animatedArray.length - 1) {
+            direction.current = -1
+            animateLoopCount.current += 1
+          }
+          if (prevIndex === 0) {
+            direction.current = 1
+          }
+          return prevIndex + direction.current
+        })
+      },
+      intervalMs || (size === 'large' ? 100 : 200),
+    ) // Default: 100ms for large, 200ms for small/medium
+
+    return () => clearInterval(timer)
+  }, [animatedArray.length, cycles, intervalMs, size])
+
+  return (
+    <Text color={color || theme.claude}>
+      {animatedArray[currentAsciiArtIndex]}
+    </Text>
+  )
+}