### Install PupCaps from Source

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

Clones the PupCaps repository, installs its dependencies, and then installs it globally, allowing for development or use of the latest unreleased features.

```shell
git clone git@github.com:hosuaby/PupCaps.git
cd PupCaps
npm install
npm i -g .
```

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

### Install PupCaps via npm

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

Installs the latest version of PupCaps globally using npm, making the command-line tool available system-wide.

```shell
npm i -g pupcaps@latest
```

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

### SRT File Format for Highlighting

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

Example of a SubRip Subtitle (.srt) file format demonstrating how to use square brackets to denote words that should be highlighted or styled individually, enabling karaoke-style captioning.

```text
1
00:00:00,000 --> 00:00:00,500
A script to caption videos with style.

2
00:00:00,500 --> 00:00:01,000
[A] script to caption videos with style.

3
00:00:01,000 --> 00:00:01,500
A [script] to caption videos with style.

4
00:00:01,500 --> 00:00:02,000
A script [to] caption videos with style.
```

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

### SRT Format for Karaoke Word Highlighting

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Example of the SubRip Subtitle (.srt) file format demonstrating karaoke-style word-by-word highlighting. Words to be highlighted are enclosed in square brackets.

```srt
1
00:00:00,000 --> 00:00:00,500
A script to caption videos with style.

2
00:00:00,500 --> 00:00:01,000
[A] script to caption videos with style.

3
00:00:01,000 --> 00:00:01,500
A [script] to caption videos with style.

4
00:00:01,500 --> 00:00:02,000
A script [to] caption videos with style.

5
00:00:02,000 --> 00:00:02,500
A script to [caption] videos with style.

6
00:00:02,500 --> 00:00:03,000
A script to caption [videos] with style.

7
00:00:03,000 --> 00:00:03,500
A script to caption videos [with] style.

8
00:00:03,500 --> 00:00:04,000
A script to caption videos with [style.]
```

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

### CSS3 Animation Example

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

An example of a CSS3 keyframe animation named 'shrinkPadding' that modifies padding and background color over time. This can be applied to highlighted words in captions.

```css
@keyframes shrinkPadding {
    from {
        padding: 30px;
        background-color: #ff92eb;
    }
    to {
        padding: 12px;
        background-color: #670abd;
    }
}

.word.highlighted {
    text-shadow: none;
    animation: shrinkPadding 0.333s ease-in-out;
}
```

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

### Add Captions to Video using FFmpeg

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

This example demonstrates how to overlay captions onto a video using FFmpeg's filter_complex with the overlay filter. It takes an original video and a captions video as input and outputs a new video with the captions applied. Adjust codecs and parameters as needed.

```shell
ffmpeg \
  -i original-video.mp4 \
  -i captions.mov \
  -filter_complex "[0:v][1:v]overlay=0:0" \
  -c:v libx264 -b:v 4M -crf 10 \
  -c:a copy \
  output.mp4
```

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

### SRT Format with Custom Highlight Classes

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Example of the SRT file format using parentheses notation to apply custom CSS classes to specific highlighted words for varied styling effects.

```srt
1
00:00:00,000 --> 00:00:01,000
[Hello](emphasis) world!

2
00:00:01,000 --> 00:00:02,000
Hello [world!](accent)
```

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

### Caption Parsing with TypeScript

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Demonstrates how to parse SRT content into structured `Caption` and `Word` objects using the `readCaptions` function. It outlines the structure of these objects and provides an example of finding highlighted words.

```typescript
import { readCaptions, Caption, Word } from './common/captions';
import { readFileSync } from 'fs';

// Read and parse SRT file
const srtContent = readFileSync('subtitles.srt', 'utf-8');
const captions: Caption[] = readCaptions(srtContent);

// Caption structure:
// {
//   index: number,
//   startTimeMs: number,
//   endTimeMs: number,
//   words: Word[]
// }

// Word structure:
// {
//   rawWord: string,
//   isHighlighted: boolean,
//   isBeforeHighlighted: boolean,
//   isAfterHighlighted: boolean,
//   highlightClass?: string
// }

// Example: Find all highlighted words
captions.forEach(caption => {
    const highlighted = caption.words.filter(w => w.isHighlighted);
    if (highlighted.length > 0) {
        console.log(`Caption ${caption.index}: "${highlighted[0].rawWord}" highlighted`);
    }
});
```

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

### Preview Captions in Browser (CLI)

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Launches a browser preview server using the PupCaps CLI to debug and test caption styles without generating a video file. Can be used with custom styles.

```bash
# Preview captions in browser
pupcaps path/to/subtitles.srt --preview

# Preview with custom styles
pupcaps path/to/subtitles.srt --style path/to/styles.css --preview
```

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

### Generate MOV Caption Overlay with Custom Output Path

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

Generates an Apple QuickTime (MOV) file containing video captions from an SRT file and specifies a custom output path for the generated MOV file.

```shell
pupcaps path/to/subtitles.srt --output path/to/output.mov
```

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

### FFmpeg Overlay Caption MOV on Video

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Provides FFmpeg commands for compositing a caption overlay (MOV format) onto an original video. It covers basic overlay, high-quality encoding with H.265, and positioned overlays.

```bash
# Basic overlay composition
ffmpeg \
  -i original-video.mp4 \
  -i captions.mov \
  -filter_complex "[0:v][1:v]overlay=0:0" \
  -c:v libx264 -b:v 4M -crf 10 \
  -c:a copy \
  output.mp4
```

```bash
# High quality encoding with H.265
ffmpeg \
  -i original-video.mp4 \
  -i captions.mov \
  -filter_complex "[0:v][1:v]overlay=0:0" \
  -c:v libx265 -crf 18 \
  -c:a aac -b:a 192k \
  output.mp4
```

```bash
# Positioned overlay (centered at bottom)
ffmpeg \
  -i original-video.mp4 \
  -i captions.mov \
  -filter_complex "[0:v][1:v]overlay=(W-w)/2:H-h-50" \
  -c:v libx264 -preset medium -crf 23 \
  -c:a copy \
  output.mp4
```

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

### Generate MOV Caption Overlay

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

Generates an Apple QuickTime (MOV) file containing video captions from a SubRip Subtitle (.srt) file. The output MOV is saved in the same directory as the SRT by default.

```shell
pupcaps path/to/subtitles.srt
```

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

### Generate MOV Caption Overlay from SRT (CLI)

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Generates a MOV caption overlay file from an SRT subtitle file using the PupCaps CLI. Supports specifying output path, video dimensions, and frame rate.

```bash
# Generate caption overlay from SRT file
pupcaps path/to/subtitles.srt

# Specify custom output path
pupcaps path/to/subtitles.srt --output path/to/captions.mov

# Set video dimensions (default: 1080x1920 for portrait video)
pupcaps path/to/subtitles.srt --width 1920 --height 1080

# Set custom frame rate (default: 30, valid range: 1-60)
pupcaps path/to/subtitles.srt --fps 60
```

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

### Dynamic CSS Classes by Caption Index

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Illustrates the use of dynamic CSS class patterns like `pup-indexes` to apply styles based on caption ranges. This allows for targeted styling of specific caption segments or individual captions.

```css
/* Apply special styling for captions 1-10 */
.captions.pup-indexes-1-10 {
    background-color: rgba(255, 0, 0, 0.3);
}

/* Style highlighted words differently for captions 5-15 */
.word.highlighted.pup-indexes-5-15 {
    background-color: #00ff00;
    transform: scale(1.2);
}

/* Single caption styling */
.caption.pup-indexes-7 {
    border: 2px solid gold;
}
```

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

### Apply Custom CSS Styles to Captions (CLI)

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Applies custom CSS styles to video captions using the PupCaps CLI by providing a stylesheet file. Supports enabling CSS3 animations for dynamic effects.

```bash
# Use custom CSS stylesheet
pupcaps path/to/subtitles.srt --style path/to/custom/styles.css

# Enable CSS3 animations (real-time recording mode)
pupcaps path/to/subtitles.srt --style path/to/animated-styles.css --animate
```

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

### Dynamic CSS Classes by Timecode

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Shows how to use the `pup-timecodes` dynamic class pattern for time-based styling. This pattern accepts timecodes in `HH-MM-SS-mmm` format to apply styles to specific time intervals.

```css
/* Special styling from start to 30 seconds */
.captions.pup-timecodes-00-00-00-000-00-00-30-000 {
    margin-top: 300px;
}

/* Highlight effect after 1 minute */
.word.highlighted.pup-timecodes-00-01-00-000 {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
```

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

### Caption Grouping with TypeScript

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Explains how to group consecutive captions with identical word sequences using `captionGroups` and `haveSameWords` functions. This is useful for efficient rendering and karaoke processing.

```typescript
import { captionGroups, haveSameWords, Caption } from './common/captions';

// Group captions with identical word sequences
const captions: Caption[] = readCaptions(srtContent);
const groups: Caption[][] = captionGroups(captions);

// Each group contains captions with the same phrase
// but different highlighted words
groups.forEach((group, i) => {
    console.log(`Group ${i + 1}: ${group.length} captions`);
    console.log(`  Words: ${group[0].words.map(w => w.rawWord).join(' ')}`);
    console.log(`  Duration: ${group[0].startTimeMs}ms - ${group[group.length - 1].endTimeMs}ms`);
});

// Compare two captions for word equality
const areSame = haveSameWords(captions[0], captions[1]);
```

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

### CSS3 Karaoke Animations

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Demonstrates CSS3 keyframe animations for creating karaoke effects like shrinking padding and word bounce. These animations are applied to elements with specific classes and require the `--animate` flag for rendering.

```css
/* Shrinking padding animation for highlighted words */
@keyframes shrinkPadding {
    from {
        padding: 30px;
        background-color: #ff92eb;
    }
    to {
        padding: 12px;
        background-color: #670abd;
    }
}

.word.highlighted {
    text-shadow: none;
    animation: shrinkPadding 0.333s ease-in-out;
}

/* Bounce animation for word appearance */
@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.word {
    animation: bounceIn 0.3s ease-out;
}
```

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

### Manipulate Karaoke Groups and Export SRT with CaptionsService (TypeScript)

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Demonstrates how to use the CaptionsService to load SRT content, manipulate karaoke groups (moving words, deleting groups), and export the modified captions as an SRT string. It requires the CaptionsService and readCaptions utility.

```typescript
import { CaptionsService, KaraokeGroup } from './editor/captions.service';
import { readCaptions } from './common/captions';

const service = new CaptionsService();
const captions = readCaptions(srtContent);

// Load captions into service
service.readCaptions(captions);

// Get all karaoke groups
const groups: KaraokeGroup[] = service.karaokeGroups;

// Each KaraokeGroup contains:
// - indexStart: first caption index
// - indexEnd: last caption index
// - words: KaraokeWord[] with timing info
// - startTimeMs, endTimeMs: group duration

// Move first word of group 1 to previous group
service.moveFirstWordToPrecedentGroup(1);

// Move last word of group 0 to next group
service.moveLastWordToNextGroup(0);

// Delete a karaoke group by ID
service.deleteKaraokeGroup('1-5');

// Export modified captions as SRT
const modifiedSrt = service.asSrt;
console.log(modifiedSrt);
```

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

### Timecode Utilities with TypeScript

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Details the `Timecode` class and `toMillis` function for converting between timecode strings and milliseconds. It shows how to parse timecodes, create `Timecode` objects, and format them for display.

```typescript
import { Timecode, toMillis } from './common/timecodes';

// Parse SRT timecode to milliseconds
const ms = toMillis('00:01:30,500'); // Returns: 90500

// Create Timecode object from milliseconds
const timecode = new Timecode(90500);
console.log(timecode.hours);    // 0
console.log(timecode.minutes);  // 1
console.log(timecode.seconds);  // 30
console.log(timecode.millis);   // 500
console.log(timecode.asString); // "00:01:30,500"

// Formatted components for display
console.log(`${timecode.hh}:${timecode.mm}:${timecode.ss},${timecode.SSS}`);
// Output: "00:01:30,500"
```

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

### CSS for PupCaps Caption Styling

Source: https://context7.com/hosuaby/pupcaps/llms.txt

Reference CSS structure for customizing PupCaps video captions. Includes selectors for the video container, caption phrases, individual words, and highlight states.

```css
/* Styles for the whole video container. Use for display settings. */
#video {
    display: flex;
    flex-direction: column;
}

/* Styles for captions container. Use to align captions in the video. */
.captions {
    margin-top: 500px;
    text-align: center;
}

/* Styles for one "phrase" - define background for the whole caption. */
.caption {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 15px;
}

/* Styles for words. Define fonts, colors, shadows, etc. */
.word {
    display: inline-block;
    font-family: Ubuntu;
    font-size: 60px;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    padding: 12px;
    border-radius: 10px;
}

/* Styles for the currently highlighted word. */
.word.highlighted {
    background-color: #670abd;
    text-shadow: none;
}

/* Styles for words before the highlighted one. */
.word.before-highlighted {
    opacity: 0.7;
}

/* Styles for words after the highlighted one. */
.word.after-highlighted {
    opacity: 0.5;
}
```

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

### Style Captions with Custom CSS File

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

Applies custom styling to video captions by providing a user-defined CSS file to the PupCaps script. This allows for full control over the appearance of captions.

```shell
pupcaps path/to/subtitles.srt --style path/to/custom/styles.css
```

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

### Enable CSS3 Animations in Captions

Source: https://github.com/hosuaby/pupcaps/blob/master/README.md

Generates video captions with CSS3 animations enabled. This option forces the script to record captions in real-time for the entire video duration, suitable for dynamic effects.

```shell
pupcaps path/to/subtitles.srt --style path/to/custom/styles.css --animate
```

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

### Transparent Video Background CSS for Puppeteer

Source: https://github.com/hosuaby/pupcaps/blob/master/assets/index.html

This CSS snippet is intended to be used with Puppeteer to override background styles for HTML elements, particularly making video backgrounds transparent. It targets the html, body, and #video elements. No external dependencies are required as it's pure CSS.

```css
html, body, #video { background: none !important; background-color: transparent !important; }
```

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