ReanimatedV4Test.tsx

import { AnimatedView, Text, View } from '@/components/ui'
import { useMemo } from 'react'

const NUM_HOLDERS = 16
const NUM_BARS = 40

const rotateKeyframes = {
  '0%': {
    transform: [{ rotate: '0deg' }],
  },
  '25%': {
    transform: [{ rotate: '90deg' }],
  },
  '50%': {
    transform: [{ rotate: '180deg' }],
  },
  '75%': {
    transform: [{ rotate: '270deg' }],
  },
  '100%': {
    transform: [{ rotate: '360deg' }],
  },
}

export default function App() {
  const holders = useMemo(() => {
    return Array.from({ length: NUM_HOLDERS }).map((_, holderIndex) => {
      const bars = Array.from({ length: NUM_BARS }).map((_, barIndex) => {
        const width = 1 + barIndex / 2
        const height = 32 + barIndex * 1.4
        const baseHue = 160 + 3 * barIndex

        const barKeyframes = {
          '0%': {
            transform: [{ translateX: 10 }, { translateY: 10 * barIndex }, { rotate: '60deg' }],
            backgroundColor: `hsl(${baseHue}, 55%, 50%)`,
          },
          '25%': {
            transform: [
              { translateX: 10 * barIndex * 0.5 },
              { translateY: 10 * barIndex * 0.5 },
              { rotate: '90deg' },
            ],
            backgroundColor: `hsl(${130 + 3 * barIndex}, 55%, 50%)`,
          },
          '50%': {
            transform: [{ translateX: 10 * barIndex }, { translateY: 10 }, { rotate: '120deg' }],
            backgroundColor: `hsl(${100 + 3 * barIndex}, 55%, 50%)`,
          },
          '75%': {
            transform: [
              { translateX: 10 * barIndex * 0.5 },
              { translateY: 10 * barIndex * 0.5 },
              { rotate: '90deg' },
            ],
            backgroundColor: `hsl(${130 + 3 * barIndex}, 55%, 50%)`,
          },
          '100%': {
            transform: [{ translateX: 10 }, { translateY: 10 * barIndex }, { rotate: '60deg' }],
            backgroundColor: `hsl(${baseHue}, 55%, 50%)`,
          },
        }

        return (
          <AnimatedView
            key={`bar-${barIndex}`}
            style={{
              position: 'absolute',
              width,
              height,
              transformOrigin: 'center',
              animationName: barKeyframes,
              animationDuration: '6s',
              animationDelay: `${barIndex * 120}ms`,
              animationIterationCount: 'infinite',
              animationTimingFunction: 'easeInOut',
            }}
          />
        )
      })

      return (
        <AnimatedView
          key={`holder-${holderIndex}`}
          style={{
            position: 'absolute',
            width: 1,
            height: 1,
            top: '50%',
            left: '50%',
            transformOrigin: 'center',
            animationName: rotateKeyframes,
            animationDuration: '24s',
            animationDelay: `${holderIndex * 1.5}s`,
            animationIterationCount: 'infinite',
            animationTimingFunction: 'linear',
          }}>
          {bars}
        </AnimatedView>
      )
    })
  }, [])

  return (
    <View style={{ flex: 1, backgroundColor: 'black' }}>
      {holders}
    </View>
  )
}

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-01-25.at.07.51.31.mp4