Typography Remotion Template
Effortlessly Animate Text for Your Remotion Projects.
Features
- Customizable Colors :
- Easily adjust all colors to perfectly align with your creative vision.
- Automatic Duration :
- The composition length automatically adapts based on the length of your text.
- Flexible Resolution :
- Render your typography animations in any resolution you need.
- Server :
- A local server setup that manages requests to the ElevenLabs API, handles caching, and supports rendering scripts efficiently on your machine.
- Code :
- For even greater flexibility, modify the code to fit your exact needs.
- Structure :
- Easily build and expand on the existing structure to bring your own ideas to life.
Scenes
The videos below showcase a selection of pre-rendered videos that come included with the template, along with the complete rendering code. You can use these as a starting point or customize them to fit your project’s needs, making it even easier to create stunning typography animations.
The template also demonstrates how it works with arbitrary text input. The project includes scenes where you can input text directly in Remotion Studio, which is then automatically converted into speech using the ElevenLabs API (your own API key needs to be added). By leveraging the speech timestamps and the provided template, the text is seamlessly transformed into animated content.
To keep things simple, all the videos use the same text to allow for easy comparison.
What's included
Take a look at the project structure below:
.
├── README.md
├── babel.config.js
├── jest.config.js
├── license.md
├── package.json
├── public
│ └── tts
│ └── cache
│ └── sample
│ ├── cache
│ │ └── data_2024-09-03-14-57-30-040
│ │ ├── alignment.json
│ │ └── audio.mp3
│ └── cacheMap.json
├── remotion.config.ts
├── src
│ ├── server
│ │ ├── api
│ │ │ ├── request
│ │ │ │ ├── fetchTtsFromServer.ts
│ │ │ │ └── waitForHealthCheck.ts
│ │ │ └── response
│ │ │ └── postElevenLabsTts.ts
│ │ ├── runServer.ts
│ │ ├── server.ts
│ │ ├── types.ts
│ │ └── utils
│ │ ├── ElevenLabsTtsAlignment.ts
│ │ ├── constants
│ │ │ ├── getServerPort.ts
│ │ │ ├── getServerUrl.ts
│ │ │ └── serverPaths.ts
│ │ └── file
│ │ ├── CustomFileCache.ts
│ │ ├── ensureDirExists.ts
│ │ ├── fileExists.ts
│ │ └── readJsonFileAsync.ts
│ ├── template
│ │ ├── common
│ │ │ ├── component
│ │ │ │ └── AudioSequence.tsx
│ │ │ ├── scene
│ │ │ │ └── Scene.tsx
│ │ │ └── util
│ │ │ ├── animation
│ │ │ │ └── interpolateDefault.ts
│ │ │ ├── file
│ │ │ │ └── AudioSource.ts
│ │ │ ├── hooks
│ │ │ │ ├── useChanged.ts
│ │ │ │ ├── usePreviousImmediate.ts
│ │ │ │ ├── useRerender.ts
│ │ │ │ └── useStateWithDeps.ts
│ │ │ ├── math
│ │ │ │ ├── NumberRange.ts
│ │ │ │ ├── Padding.ts
│ │ │ │ ├── Rect.ts
│ │ │ │ ├── ScalarOrVector2.ts
│ │ │ │ ├── Vector2.ts
│ │ │ │ ├── calculateFrameCount.ts
│ │ │ │ ├── clamp.ts
│ │ │ │ ├── createSimulatedSpringFrameEasing.ts
│ │ │ │ ├── mix.ts
│ │ │ │ ├── mod.ts
│ │ │ │ ├── radiansToDegrees.ts
│ │ │ │ └── randomInRange.ts
│ │ │ ├── other
│ │ │ │ ├── createArrayOfSize.ts
│ │ │ │ ├── delay.ts
│ │ │ │ ├── evaluateOrGet.ts
│ │ │ │ ├── notNil.ts
│ │ │ │ ├── splitArray.ts
│ │ │ │ ├── waitForNoInput.ts
│ │ │ │ └── wrapRefWithCallback.ts
│ │ │ ├── type
│ │ │ │ ├── AnimRootProps.ts
│ │ │ │ ├── ClassLike.ts
│ │ │ │ ├── DeepReplace.ts
│ │ │ │ ├── DeepRequired.ts
│ │ │ │ ├── ElementTypeRef.ts
│ │ │ │ ├── FrameEasingFunction.ts
│ │ │ │ ├── FrameRangeBound.ts
│ │ │ │ └── PropsWithCalculation.ts
│ │ │ └── zod
│ │ │ └── numberRangeSchema.ts
│ │ └── typography
│ │ ├── TypographyRoot.tsx
│ │ ├── archetype
│ │ │ └── subtitle
│ │ │ ├── animConfig
│ │ │ │ ├── useAnimConfigCreator.ts
│ │ │ │ ├── useBounceAnimConfig.tsx
│ │ │ │ ├── useExplanationAnimConfig.tsx
│ │ │ │ ├── useSlotMachineAnimConfig.tsx
│ │ │ │ └── useWordHighlightAnimConfig.tsx
│ │ │ ├── calculateMetadata
│ │ │ │ ├── calculateSubtitle.ts
│ │ │ │ ├── calculateSubtitleSchema.ts
│ │ │ │ └── useSubtitleResult.ts
│ │ │ ├── component
│ │ │ │ ├── SvgRectMask.tsx
│ │ │ │ └── TypographyRootElement.tsx
│ │ │ ├── scene
│ │ │ │ ├── BounceScene.tsx
│ │ │ │ ├── ExplanationScene.tsx
│ │ │ │ ├── SlotMachineScene.tsx
│ │ │ │ ├── WordHighlightScene.tsx
│ │ │ │ ├── bounceSchema.ts
│ │ │ │ ├── explanationSchema.ts
│ │ │ │ ├── slotMachineSchema.ts
│ │ │ │ └── wordHighlightSchema.tsx
│ │ │ └── schema
│ │ │ ├── commonTypographySchema.ts
│ │ │ ├── sample.ts
│ │ │ └── transcriptAlignment.ts
│ │ ├── library
│ │ │ ├── component
│ │ │ │ ├── 0-text
│ │ │ │ │ ├── AnimText.tsx
│ │ │ │ │ ├── AnimTextRoot.tsx
│ │ │ │ │ └── animTextTypes.ts
│ │ │ │ ├── 1-line
│ │ │ │ │ ├── AnimLine.tsx
│ │ │ │ │ ├── AnimLineRoot.tsx
│ │ │ │ │ └── animLineTypes.ts
│ │ │ │ ├── 2-word
│ │ │ │ │ ├── AnimWord.tsx
│ │ │ │ │ ├── AnimWordRoot.tsx
│ │ │ │ │ └── animWordTypes.ts
│ │ │ │ ├── 2-wordSeparator
│ │ │ │ │ ├── AnimWordSeparator.tsx
│ │ │ │ │ ├── AnimWordSeparatorRoot.tsx
│ │ │ │ │ └── animWordSeparatorTypes.ts
│ │ │ │ └── 3-renderable
│ │ │ │ ├── AnimRenderable.tsx
│ │ │ │ ├── AnimRenderableRoot.tsx
│ │ │ │ └── animRenderableTypes.ts
│ │ │ ├── config
│ │ │ │ ├── AnimConfig.tsx
│ │ │ │ └── FrameContext.ts
│ │ │ ├── transcript
│ │ │ │ ├── classes
│ │ │ │ │ ├── Transcribable.ts
│ │ │ │ │ ├── Transcript.ts
│ │ │ │ │ ├── TranscriptLine.ts
│ │ │ │ │ ├── TranscriptRenderable.ts
│ │ │ │ │ ├── TranscriptWord.ts
│ │ │ │ │ └── util
│ │ │ │ │ ├── TranscriptWordAnimation.ts
│ │ │ │ │ └── TranscriptWordStaticAnimation.ts
│ │ │ │ └── json
│ │ │ │ ├── TranscriptJson.ts
│ │ │ │ ├── createTranscriptFromElevenLabs.ts
│ │ │ │ ├── getTranscriptJsonDuration.ts
│ │ │ │ └── isJsonTextSegment.ts
│ │ │ └── util
│ │ │ ├── calculateRelativeRect.ts
│ │ │ ├── mergeStyles.ts
│ │ │ ├── refObjectOf.ts
│ │ │ ├── useArray.ts
│ │ │ └── useRefReadyWatcher.ts
│ │ ├── render.ts
│ │ └── typographyEntry.ts
│ └── utils
│ ├── api
│ │ └── elevenlabs
│ │ ├── getElevenLabsApiHeaders.ts
│ │ ├── getElevenLabsApiKey.ts
│ │ └── textToSpeech.ts
│ └── functions
│ ├── getCurrentTimestampString.ts
│ ├── getEnvValueOrFail.ts
│ ├── substringAfterLast.ts
│ └── trimPrefix.ts
├── tsconfig.json
└── yarn.lock
51 directories, 125 files