Background Remotion Template
Explore our collection and find the perfect match for your project.
Features
Our background template leverages the powerful Remotion library, offering a versatile foundation for your video projects. You can use the provided code to render videos directly or customize it to suit your specific needs. Whether you're looking to create unique animations, adjust durations, or fine-tune resolutions, our templates provide the flexibility you need. Dive into the code to make personalized adjustments and bring your creative vision to life with ease.
- Customizable Colors :
- Tailor all the colors to match your vision perfectly
- Random Seed :
- Generate unique animations by specifying a random seed for each composition.
- Flexible Duration :
- Set the clip duration to any length, whether short or long, to suit your needs.
- Seamless Looping :
- All backgrounds are designed to loop smoothly, creating continuous animations.
- Resolution :
- Pick the resolution from a list of options, but you can also render the image scaled up.
- Code :
- If you want to have even more customization, change the code however you like.
Template Groups
Our Remotion template is organized into various "template groups" (or "archetypes" as they're named in the folder).
Explore these archetypes below to see their full potential. Each video in each of the sections was created by experimenting with different configurations of these templates. These examples showcase the diverse capabilities and flexibility you can achieve with our templates. Dive in and get inspired by what you can create!
Floating Shapes
Motion Lines
Retro Tiles
What's included
Our Remotion template, crafted in TypeScript, is designed for developers who want to create impressive videos effortlessly. This template offers a robust foundation to help you start your projects quickly. Explore the project structure below to see how you can easily bring your creative ideas to life.
Explore the structure and start building your next video masterpiece today!
.
├── README.md
├── babel.config.js
├── license.md
├── package.json
├── remotion.config.ts
├── src
│ ├── template
│ │ ├── background
│ │ │ ├── BackgroundRoot.tsx
│ │ │ ├── archetype
│ │ │ │ ├── floatingShapes
│ │ │ │ │ ├── calculateMetadata
│ │ │ │ │ │ ├── calculateFloatingShapes.ts
│ │ │ │ │ │ ├── calculateFloatingShapesSchema.ts
│ │ │ │ │ │ ├── createValueField.ts
│ │ │ │ │ │ └── parseFloatingShapesResult.ts
│ │ │ │ │ ├── component
│ │ │ │ │ │ └── FloatingShapesBackground.tsx
│ │ │ │ │ ├── element
│ │ │ │ │ │ └── FloatingShapeElement.tsx
│ │ │ │ │ ├── scene
│ │ │ │ │ │ ├── FloatingShapesExplanationScene.tsx
│ │ │ │ │ │ ├── FloatingShapesPlaygroundScene.tsx
│ │ │ │ │ │ ├── FloatingShapesPreviewScenes.tsx
│ │ │ │ │ │ └── floatingShapesPlaygroundSchema.ts
│ │ │ │ │ └── types
│ │ │ │ │ └── FloatingShapeLoopConfig.ts
│ │ │ │ ├── motionLines
│ │ │ │ │ ├── calculateMetadata
│ │ │ │ │ │ ├── calculateMotionLines.ts
│ │ │ │ │ │ ├── calculateMotionLinesSchema.ts
│ │ │ │ │ │ └── parseMotionLinesResult.ts
│ │ │ │ │ ├── component
│ │ │ │ │ │ ├── MotionLinesGlowingBackground.tsx
│ │ │ │ │ │ └── MotionLinesPlainBackground.tsx
│ │ │ │ │ ├── element
│ │ │ │ │ │ └── MotionLineElement.tsx
│ │ │ │ │ └── scene
│ │ │ │ │ ├── MotionLinesPlaygroundScene.tsx
│ │ │ │ │ ├── MotionLinesPreviewScenes.tsx
│ │ │ │ │ └── motionLinesPlaygroundSchema.ts
│ │ │ │ └── patterns
│ │ │ │ ├── element
│ │ │ │ │ └── RetroTilesElement.tsx
│ │ │ │ └── scene
│ │ │ │ ├── RetroTilesPlaygroundScene.tsx
│ │ │ │ ├── RetroTilesPreviewScenes.tsx
│ │ │ │ └── retroTilesPlaygroundSchema.ts
│ │ │ ├── backgroundEntry.ts
│ │ │ ├── render.ts
│ │ │ ├── svg
│ │ │ │ ├── filter
│ │ │ │ │ └── glow
│ │ │ │ │ ├── GlowEffect.tsx
│ │ │ │ │ ├── GlowEffectDef.tsx
│ │ │ │ │ └── MultiBlendDef.tsx
│ │ │ │ ├── icon
│ │ │ │ │ ├── iconoir
│ │ │ │ │ │ └── IconoirGroup.tsx
│ │ │ │ │ └── shape
│ │ │ │ │ ├── CommonShapeWrapper.tsx
│ │ │ │ │ ├── ShapeElement.tsx
│ │ │ │ │ ├── getShapeProperties.ts
│ │ │ │ │ └── shapes
│ │ │ │ │ ├── Capsule.tsx
│ │ │ │ │ ├── Circle.tsx
│ │ │ │ │ ├── Flare.tsx
│ │ │ │ │ ├── LineW.tsx
│ │ │ │ │ ├── Pentagon.tsx
│ │ │ │ │ ├── Square.tsx
│ │ │ │ │ ├── ThickX.tsx
│ │ │ │ │ ├── Triangle.tsx
│ │ │ │ │ └── index.ts
│ │ │ │ └── types
│ │ │ │ └── BlendMode.ts
│ │ │ └── util
│ │ │ ├── element
│ │ │ │ ├── FieldVisualizerElement.tsx
│ │ │ │ ├── Line.tsx
│ │ │ │ ├── PatternGridElement.tsx
│ │ │ │ └── ValueFieldVisualizerElement.tsx
│ │ │ ├── field
│ │ │ │ ├── Field.ts
│ │ │ │ ├── distancefield
│ │ │ │ │ ├── DistanceField.ts
│ │ │ │ │ └── factory
│ │ │ │ │ └── createRectangle.ts
│ │ │ │ ├── valuefield
│ │ │ │ │ ├── SimplexValueField.ts
│ │ │ │ │ ├── ValueField.ts
│ │ │ │ │ └── ValueFieldFactory.ts
│ │ │ │ └── vectorfield
│ │ │ │ └── VectorField.ts
│ │ │ ├── hooks
│ │ │ │ ├── useVideoConfigInField.ts
│ │ │ │ └── useVideoSizes.ts
│ │ │ ├── metadata
│ │ │ │ ├── calculateCommonVideoConfig.ts
│ │ │ │ ├── calculateVideoDurationMetadata.ts
│ │ │ │ ├── calculateVideoSizeMetadata.ts
│ │ │ │ ├── createCalculateMetadata.ts
│ │ │ │ ├── throwCalculationMissingError.ts
│ │ │ │ └── waitForNoInput.ts
│ │ │ ├── scene
│ │ │ │ └── Scene.tsx
│ │ │ ├── types
│ │ │ │ ├── ClassLike.ts
│ │ │ │ ├── CustomElement.ts
│ │ │ │ ├── DeepReplace.ts
│ │ │ │ └── PropsWithCalculation.ts
│ │ │ └── zod
│ │ │ ├── numberRangeSchema.ts
│ │ │ └── vector2Schema.ts
│ │ └── common
│ │ ├── component
│ │ │ ├── AbsoluteSvg.tsx
│ │ │ └── Explanation.tsx
│ │ └── util
│ │ ├── animation
│ │ │ └── animateConsecutive.ts
│ │ ├── color
│ │ │ └── Color.ts
│ │ ├── math
│ │ │ ├── Delta.ts
│ │ │ ├── NumberRange.ts
│ │ │ ├── ScalarOrVector2.ts
│ │ │ ├── Vector2.ts
│ │ │ ├── clamp.ts
│ │ │ ├── easings.ts
│ │ │ ├── getPositionOnCircle.ts
│ │ │ ├── getSvgTransform.ts
│ │ │ ├── loopFrame.ts
│ │ │ ├── mix.ts
│ │ │ ├── pickRandomOrFail.ts
│ │ │ ├── radiansToDegrees.ts
│ │ │ ├── randomInRange.ts
│ │ │ ├── rotateAroundScreenCenter.ts
│ │ │ └── smoothstep.ts
│ │ └── other
│ │ ├── createArrayOfSize.ts
│ │ ├── groupBy.ts
│ │ └── prefixIfDoesNotStartWith.ts
│ └── utils
│ └── functions
│ └── interpolateNormal.ts
├── tsconfig.json
└── yarn.lock
47 directories, 100 files
Not just for coders
Even if you're not a developer but enjoy tinkering with technology, our Remotion template is worth checking out. After running the project with yarn or npm, you can use Remotion Studio to adjust settings and render sequences without writing a single line of code. This makes it accessible and easy for anyone to create stunning videos.
