### Project Setup and Installation Commands

Source: https://context7.com/akshayjadhav4/lyrics-animation/llms.txt

Provides bash commands for setting up and running the lyrics-animation project. This includes cloning the repository, installing dependencies, and running the application on different platforms.

```bash
# Clone repository
git clone https://github.com/akshayjadhav4/lyrics-animation.git
cd lyrics-animation

# Install dependencies
npm install

# Run on Android
npm run android

# Run on iOS
npm run ios

# Run on web
npm run web

# Start development server
npm start

```

--------------------------------

### Install Project Dependencies

Source: https://github.com/akshayjadhav4/lyrics-animation/blob/main/README.md

Installs the necessary project dependencies using npm. This command clones the repository, navigates into the project directory, and then installs all required packages.

```bash
git clone https://github.com/akshayjadhav4/lyrics-animation.git
cd lyrics-animation
npm install
```

--------------------------------

### Enhanced LRC (ELRC) File Format Example

Source: https://github.com/akshayjadhav4/lyrics-animation/blob/main/README.md

Example structure of an Enhanced LRC (ELRC) file, which includes metadata tags and word-level timestamps for synchronized lyric display. The format uses bracketed tags for metadata and angle brackets for word timings.

```plaintext
[ti: Lorem ipsum]
[ar: Artist performing the song]
[al: Album the song is from]
[lr: Author of the song]
[00:00.00] <00:00.04> Lorem <00:00.16> ipsum <00:00.82> dolor <00:00.82> sit <00:01.63> amet, <00:03.09> consectetur <00:03.37> adipiscing <00:05.92> elit. 
[00:06.47] <00:07.67> Sed <00:07.94> do <00:08.36> eiusmod <00:08.63> tempor <00:10.28> incididunt <00:10.53> ut <00:13.09> labore 
[00:13.34] <00:14.32> et <00:14.73> dolore <00:15.14> magna <00:15.57> aliqua. <00:16.09> Ut <00:16.46> enim
[00:17.44] 
[00:23.00] <00:24.40> orci. <00:24.70> Mauris <00:25.14> eu <00:25.30> dui 
```

--------------------------------

### Run Application on Different Platforms

Source: https://github.com/akshayjadhav4/lyrics-animation/blob/main/README.md

Commands to run the React Native application on Android and iOS devices. Ensure you have the respective SDKs and emulators/devices set up.

```bash
npm run android   # For Android
npm run ios       # For iOS
```

--------------------------------

### GradientBackground Component: Animated Skia Gradient (React Native)

Source: https://context7.com/akshayjadhav4/lyrics-animation/llms.txt

Provides an animated gradient background using Skia for smooth color transitions. It leverages react-native-reanimated for animation and @shopify/react-native-skia for drawing the gradient. The component continuously transitions between two primary colors.

```tsx
import React, { useEffect } from "react";
import { Canvas, LinearGradient, Rect, vec } from "@shopify/react-native-skia";
import { Dimensions } from "react-native";
import {
  useDerivedValue,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

const { width, height } = Dimensions.get("window");

const GradientBackground = () => {
  const primaryColor = useSharedValue("#F9263E");
  const secondaryColor = useSharedValue("#122620");

  const colors = useDerivedValue(() => {
    return [primaryColor.value, secondaryColor.value];
  }, []);

  useEffect(() => {
    // Alternate colors every 4 seconds
    primaryColor.value = withRepeat(
      withTiming("#122620", { duration: 4000 }),
      -1,
      true
    );

    secondaryColor.value = withRepeat(
      withTiming("#F9263E", { duration: 4000 }),
      -1,
      true
    );
  }, []);

  return (
    <Canvas
      style={{
        flex: 1,
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: -1,
      }}
    >
      <Rect x={0} y={0} width={width} height={height}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(width, height)}
          colors={colors}
        />
      </Rect>
    </Canvas>
  );
};

```

--------------------------------

### Define ELRC Format Structure and Types

Source: https://context7.com/akshayjadhav4/lyrics-animation/llms.txt

This snippet defines the structure of the Enhanced LRC (ELRC) format, including metadata and word-level timestamps. It also provides TypeScript interfaces for `EnhancedLrc` and `Word` objects, which are used for parsing and processing lyrics data.

```typescript
// constants/lrcString.ts
export const lrcString = `[ti: Song Title]
[ar: Artist Name]
[al: Album Name]
[lr: Lyricist Name]
[00:00.00] <00:00.04> Lorem <00:00.16> ipsum <00:00.82> dolor <00:01.29> sit
[00:06.47] <00:07.67> Sed <00:07.94> do <00:08.36> eiusmod <00:08.63> tempor
[00:17.44] 
[00:23.00] <00:24.40> orci. <00:24.70> Mauris <00:25.14> eu <00:25.30> dui`;

// Type definitions from clrc library
interface EnhancedLrc {
  lineNumber: number;
  raw: string;
  type: LineType;
  startMillisecond?: number;
  content?: string;
  words?: Word[];
}

interface Word {
  index: number;
  raw: string;
  startMillisecond: number;
  content: string;
}

```

--------------------------------

### MusicLine Component: Animated Pulsing Circles (React Native)

Source: https://context7.com/akshayjadhav4/lyrics-animation/llms.txt

Displays animated pulsing circles for instrumental breaks in lyrics. It uses react-native-reanimated for animation control and @shopify/react-native-skia for rendering the circles. The component animates the radius and opacity of circles based on the active state and provided duration.

```tsx
import React, { useEffect } from "react";
import { Canvas, Circle } from "@shopify/react-native-skia";
import {
  cancelAnimation,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

interface MusicLineProps {
  isActiveLine: boolean;
  duration: number;
}

const MusicLine = ({ isActiveLine, duration }: MusicLineProps) => {
  const r = useSharedValue(8);
  const opacity = useSharedValue(0.1);

  useEffect(() => {
    if (isActiveLine) {
      // Pulsing radius animation
      r.value = withRepeat(withTiming(12, { duration: 1000 }), -1, true);
      // Fade in for line duration
      opacity.value = withTiming(1, { duration: duration });
    }

    return () => {
      cancelAnimation(r);
      opacity.value = withTiming(0.1, { duration: 100 });
    };
  }, [isActiveLine]);

  return (
    <Canvas style={{ flex: 1, height: 63 }}>
      <Circle cx={12} cy={12} r={r} color="white" opacity={opacity} />
      <Circle cx={48} cy={12} r={r} color="white" opacity={opacity} />
      <Circle cx={84} cy={12} r={r} color="white" opacity={opacity} />
    </Canvas>
  );
};

```

--------------------------------

### LyricsLine Component: Render Animated Lyrics Lines (React Native)

Source: https://context7.com/akshayjadhav4/lyrics-animation/llms.txt

Manages individual lyrics line rendering with word-level animation timing. It handles text display, word animations, and instrumental breaks by conditionally rendering a MusicLine component. Dependencies include react-native-reanimated for animations and custom components like AnimatedWord and MusicLine.

```tsx
import React, { useEffect } from "react";
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
import AnimatedWord from "../AnimatedWord";
import MusicLine from "../MusicLine";

interface LyricsLineProps {
  line: EnhancedLrc;
  isActiveLine: boolean;
  nextLineStartInMS?: number;
}

const LyricsLine = ({ line, isActiveLine, nextLineStartInMS }: LyricsLineProps) => {
  const viewOpacity = useSharedValue(0.1);
  const words = line?.words;

  // Fade in/out based on active state
  useEffect(() => {
    viewOpacity.value = withTiming(isActiveLine ? 1 : 0.1, {
      duration: 100,
      easing: Easing.inOut(Easing.quad),
    });
  }, [isActiveLine]);

  // Display music indicator for instrumental breaks
  if (line.content === " ") {
    const duration = (nextLineStartInMS || 2000) - (line.startMillisecond || 0);
    return <MusicLine isActiveLine={isActiveLine} duration={duration} />;
  }

  const viewStyle = useAnimatedStyle(() => ({ opacity: viewOpacity.value }));

  return words ? (
    <Animated.View
      style={[ 
        { marginBottom: 35, flexDirection: "row", flexWrap: "wrap" },
        viewStyle,
      ]}
    >
      {words.map((word, wordIndex) => {
        // Calculate duration for each word animation
        const duration = 
          wordIndex < words.length - 1
            ? words[wordIndex + 1].startMillisecond - word.startMillisecond
            : nextLineStartInMS
            ? nextLineStartInMS - word.startMillisecond
            : 500;

        return (
          <AnimatedWord
            key={`${word}-${wordIndex}`}
            word={word}
            duration={duration}
          />
        );
      })}
    </Animated.View>
  ) : null;
};

```

--------------------------------

### Render Lyrics Animation Component in React Native

Source: https://context7.com/akshayjadhav4/lyrics-animation/llms.txt

The main App component parses ELRC lyrics and renders the LyricsAnimation component. It uses Expo Router for navigation and react-native's View for basic layout. The parsed lyrics are filtered to include only enhanced lyric lines before being passed to the animation component.

```tsx
import { lrcString } from "@/constants/lrcString";
import { LineType, parseEnhanced } from "clrc";
import LyricsAnimation from "@/components/LyricsAnimation";
import { View } from "react-native";

// Parse ELRC string into structured data
const parsedLrc = parseEnhanced(lrcString);
const lyrics = parsedLrc.filter(
  (lrc) => lrc.type === LineType.ENHANCED_LYRIC
);

// Render the animation component
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <LyricsAnimation parsedLrc={lyrics} />
    </View>
  );
}

```

--------------------------------

### Animate Individual Letters in React Native with Reanimated

Source: https://context7.com/akshayjadhav4/lyrics-animation/llms.txt

The AnimatedWord component renders each letter of a word with staggered opacity and translation animations using react-native-reanimated. It calculates delay and duration for each letter based on word timing and total duration, creating a letter-by-letter animation effect.

```tsx
import { View } from "react-native";
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
} from "react-native-reanimated";

interface AnimatedWordProps {
  word: Word;
  duration: number;
}

const AnimatedWord = ({ word, duration }: AnimatedWordProps) => {
  const letters = word.content.split("");

  return (
    <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
      {letters.map((letter, index) => {
        const opacity = useSharedValue(0.5);
        const translateY = useSharedValue(0);

        // Calculate staggered animation timing for each letter
        const delay = word.startMillisecond + index * (duration / letters.length);
        const letterDuration = duration / letters.length;

        opacity.value = withDelay(
          delay,
          withTiming(1, { duration: letterDuration, easing: Easing.out(Easing.exp) })
        );

        translateY.value = withDelay(
          delay,
          withTiming(-2, { duration: letterDuration, easing: Easing.linear })
        );

        const animatedStyle = useAnimatedStyle(() => ({
          opacity: opacity.value,
          transform: [{ translateY: translateY.value }],
        }));

        return (
          <Animated.Text
            key={`${letter}-${index}`}
            style={[ 
              { fontSize: 28, fontWeight: 800, color: "#FFFFFF" },
              animatedStyle,
            ]}
          >
            {letter}
          </Animated.Text>
        );
      })}
    </View>
  );
};

```

--------------------------------

### Auto-Scroll Lyrics Animation in React Native

Source: https://context7.com/akshayjadhav4/lyrics-animation/llms.txt

Implements automatic scrolling of lyrics based on timing data. It uses React Native's FlatList and state management to update the current line and scroll the view. Dependencies include 'react-native' and standard React hooks.

```tsx
import { FlatList } from "react-native";
import { useEffect, useRef, useState } from "react";

const LyricsAnimation = ({ parsedLrc }: { parsedLrc: EnhancedLrc[] }) => {
  const [currentLine, setCurrentLine] = useState<number>(0);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
  const flatlistRef = useRef<FlatList>(null);

  useEffect(() => {
    const playLyrics = () => {
      if (currentLine < parsedLrc.length - 1) {
        const currentLyric = parsedLrc[currentLine].startMillisecond || 0;
        const nextLyric = parsedLrc[currentLine + 1].startMillisecond || 0;
        const duration = nextLyric - currentLyric;

        // Schedule next line transition
        intervalRef.current = setTimeout(() => {
          setCurrentLine((prevLine) => prevLine + 1);

          // Scroll to show current line
          flatlistRef.current?.scrollToIndex({
            index: currentLine,
            animated: true,
          });
        }, duration);
      }
    };

    playLyrics();

    return () => {
      if (intervalRef.current) {
        clearTimeout(intervalRef.current);
      }
    };
  }, [currentLine]);

  return (
    <FlatList
      ref={flatlistRef}
      data={parsedLrc}
      renderItem={({ item, index }) => (
        <LyricsLine
          line={item}
          isActiveLine={index === currentLine}
          nextLineStartInMS={parsedLrc[index + 1]?.startMillisecond}
        />
      )}
      keyExtractor={(item, index) => index.toString()}
      scrollEnabled={false}
      showsVerticalScrollIndicator={false}
    />
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.