platan821/animation-techniques-kit

animation-techniques-kit is a collection of reusable code techniques for building product and launch videos using Remotion, a library that lets you create videos with React code instead of video editing software like After Effects. The creator built this to make a launch video for their own app entirely in code, then cleaned up and shared the techniques after people asked how it worked. The kit contains about 33 technique recipes with real Remotion code, covering things like text animations and visual effects. It includes a few ready to use React components: GradientText for gradient filled text, KineticHeadline for word by word animated headlines that spring up and fade in, and DrawOnUnderline for a hand drawn underline effect that draws itself on to emphasize a word. There is also a technique chooser guide that helps you pick the right technique based on what you want to do. A notable piece is a script called beatgrid.cjs, which analyzes a music file and detects its tempo and beat positions, printing them as video frame numbers so animations can be timed to match the music's actual beat rather than guessing. This script requires ffmpeg to be installed on your system. The project follows some rules to keep animations render safe and consistent: motion should never rely on random number generation without a seed, and all motion should be driven by the current video frame rather than the system clock, so the same render always looks the same no matter which machine produces it. The README describes this as a starter set rather than a complete library. The full method behind building these videos, described as breaking reference videos down into individual techniques plus a measured beat map, is documented in a separate file called METHOD.md. The creator removed proprietary assets like reference images from other people's videos and their own branding before publishing. This project uses the MIT license, meaning anyone can use, modify, and ship their own videos with it, with no attribution required, though it is welcomed. To use it, you would install Remotion in your own project and then copy the components in, swapping the placeholder brand colors and fonts for your own.