Create Animated Subtitles from .srt files in remotion.
npm install remotion-subtitleRemotion Subtitles is a JavaScript library designed to simplify the process of adding animated subtitles or captions to your Remotion video projects. It offers easy parsing of SRT files and provides various pre-built caption templates with stunning animation effects.The library automatically handles SRT files using either comma (,) or dot (.) as the decimal separator.
``bash`
npm install remotion-subtitle
Import the Library, other Captions if need, and React Hooks.
`javascript`
import { SubtitleSequence } from "remotion-subtitle";
import { TypewriterCaption as Caption } from "remotion-subtitle";
import { useEffect, useState } from "react";
Sample Usage
`javascript`
export const Subtitles = () => {
const { fps } = useVideoConfig();
let [Sequences, setSequences] = useState([]);
const [loaded, setLoaded] = useState(false);
let subtitles = new SubtitleSequence("audio.srt"); // Your srt filename from public folder.
useEffect(() => {
subtitles.ready().then(() => {
setSequences(subtitles.getSequences(
setLoaded(true);
});
}, []);
return (
<>
{loaded && (
<>
{Sequences}
)}
);
};
You can pass your custom Caption Component (should accept a prop named text ) inside getSequences function. If not, default h1 element will be used.
`javascript`
useEffect(() => {
subtitles.ready().then(() => {
setSequences(subtitles.getSequences(
setLoaded(true);
});
}, []);
This library includes, 17 hand-made styled Components for you to use.
You can import them from "remotion-subtitle" to use, if you want to pass custom style, go ahead.
style prop: Apply custom styles to your captions (e.g., color, font size)
`javascript`
subtitles.getSequences(
Available Caption Templates
- BounceCaption
!BounceCaption
- ColorfulCaption
!ColorfulCaption
- ExplosiveCaption
!ExplosiveCaption
- FadeCaption
!FadeCaption
- FireCaption
!FireCaption
- GlitchCaption
!GlitchCaption
- GlowingCaption
!GlowingCaption
- LightningCaption
!LightningCaption
- NeonCaption
!NeonCaption
- RotatingCaption
!RotatingCaption
- ShakeCaption
!ShakeCaption
- ThreeDishCaption
!ThreeDishCaption
- TiltShiftCaption
!TiltShiftCaption
- TypewriterCaption
!TypewriterCaption
- WavingCaption
!WavingCaption
- ZoomCaption
!ZoomCaption
constructor(filepath): Initializes the Sequence with SRT file path.
getSequences(customComponent,fps=30): Generates Remotion Sequence components with captions with desired fps.
Returns Sequences with auto applied timings.
ready Returns a promise, to load .srt file from public/ folder.
getArray(fps): Returns the parsed subtitle data as an array. So you can use them as you wish.
each item has text, startFrame and endFrame properties.
Each template is a React component with pre-defined animation styles. You can customize the appearance further using the style prop.
We welcome contributions to expand the library's functionality and caption options. Here's how you can get involved:
- Create new caption templates: Design and implement React components with unique animation effects.
`
1. Fork this project.
2. Create .js file inside captions folder which exports a component which accepts text and style props. This style should be combined with your styling. See premade Captions for reference.
3. export {YourComponent} from ./YourComponent inside captions/index.js file.
- Improve existing templates: Enhance the styling, animation, or performance of current captions.
- Add features: Contribute new features like easing options, delay support, or iteration control for animations.
- Fix bugs and improve documentation: Help ensure the library is robust and easy to use.
