{"id":28478,"date":"2022-06-09T13:27:28","date_gmt":"2022-06-09T13:27:28","guid":{"rendered":"http:\/\/creating-videos-using-react.js-and-remotion"},"modified":"2025-02-23T05:43:49","modified_gmt":"2025-02-23T13:43:49","slug":"creating-videos-using-react-js-and-remotion","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/","title":{"rendered":"Creating Videos Using React.js and Remotion"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h1>Introduction<\/h1>\n<p>Videos enable us to establish authority and a more personal feel to your message. It enables us to connect with the emotional levels of our audience. React is a great JavaScript library for describing User Interfaces that change over time. To create video content programmatically with React.js<\/p>\n<p>We are going to use an amazing tool called Remotion.<\/p>\n<p>Let\u2019s explore how we can achieve this.<\/p>\n<h2>Github<\/h2>\n<p>Check out this <a href=\"https:\/\/github.com\/musebe\/React-Remotion\">GitHub Repository<\/a> for the complete source code.<\/p>\n<h2>Codesandbox<\/h2>\n<p>The final project can be viewed on <a href=\"https:\/\/codesandbox.io\/s\/goofy-leaf-38psvr\">Codesandbox<\/a>.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/goofy-leaf-38psvr?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"React-remotion\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>You can find the complete source code on my <a href=\"\">Github<\/a> repository.<\/p>\n<h2>Pre-requisites<\/h2>\n<p>Below are some requirements you are to meet to follow along with this article:<\/p>\n<ul>\n<li>Basic knowledge of JavaScript<\/li>\n<li>Basic knowledge of React.js<\/li>\n<\/ul>\n<h2>Setting Up the Sample Project<\/h2>\n<p>In your preferred directory, create a new remotion project using <code>yarn create video<\/code><\/p>\n<p>You might want to choose the recommended template but for the purposes of this choose a <em>blank<\/em> template. Run <code>yarn start<\/code> This will start the local dev server running. You will see a window like this.\n<img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/bowenivan\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1653459476\/img_qo190p.png\" alt=\"img.png\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1319\" height=\"622\"\/>\nOn the left we have a sidebar showing all the compositions for our project which allows you to isolate and inspect each scene in the video. Each composition is a renderable component. Composition is made up of sequences which tell the video which frames to display the content in. The entry point of a remotion project is the <code>index.tsx<\/code> here we call the function <code>registerRoot(RemotionVideo);<\/code> which is in the <code>Video.tsx<\/code><\/p>\n<h2>Introduction<\/h2>\n<p>Open the <code>Video.tsx<\/code> file. This file contains the <code>RemotionVideo<\/code> component. You can think of this component as your entire video.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> RemotionVideo: React.FC = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Composition<\/span> \n                <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"Empty\"<\/span>\n                <span class=\"hljs-attr\">component<\/span>=<span class=\"hljs-string\">{MyComposition}<\/span>\n                <span class=\"hljs-attr\">durationInFrames<\/span>=<span class=\"hljs-string\">{450}<\/span>\n                <span class=\"hljs-attr\">fps<\/span>=<span class=\"hljs-string\">{30}<\/span>\n                <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">{1280}<\/span>\n                <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">{720}<\/span>\n            \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span>\n    );\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>A video is basically made up of one or more compositions. within the composition, we define video properties as the <code>durationInFrames<\/code> which is the number of frames which the video will take, <code>fps<\/code> which is the number of frames per second, <code>width<\/code> and <code>height<\/code> of the video in pixels.<\/p>\n<blockquote>\n<p>When we talk of frames you can think of it as a still image at a given point in the video.<\/p>\n<\/blockquote>\n<p>The <code>id<\/code> identifies the composition in the video player and references the component that contains the UI that you want to show. The width and height properties are used to change the resolution of the video e.g., to change the resolution to a portrait<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    width={1080}\n    height={1920}\n<\/code><\/pre>\n<p>The actual length of the video in seconds is based on the fps. <code>durationInFrames \/ fps = length(s)<\/code> This implies that for this demo our video is 15 seconds long <code>450 \/ 30 = 15<\/code>.<\/p>\n<h2>Customizing the Video<\/h2>\n<p>We are going to create new <code>Main<\/code> component  just below the <code>RemotionVideo<\/code> component.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> Main = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Welcome to Cloudinary!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/span>\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To view this on your browser you will have to change the value of the id from <code>id=&quot;Empty&quot;<\/code> to <code>id=&quot; Main&quot;<\/code> also the component value to <code>component={Main}<\/code> When you change the id value you will also have to change the <code>package.json<\/code> file<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&quot;build&quot;: &quot;remotion render src\/index.tsx Empty out\/video.mp4&quot;\n<\/code><\/pre>\n<p>to have the value of the id<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&quot;build&quot;: &quot;remotion render src\/index.tsx Main out\/video.mp4&quot;\n<\/code><\/pre>\n<p>Once you open the video player you will see the video with the text <code>Welcome to Cloudinary<\/code>.\nTo modify the css styling of your video programmatically use inline CSS.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> Main = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{backgroundColor:<\/span> '<span class=\"hljs-attr\">white<\/span>', <span class=\"hljs-attr\">flexGrow:<\/span> <span class=\"hljs-attr\">1<\/span>}}&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span> \n                <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span>\n                    <span class=\"hljs-attr\">position:<\/span> '<span class=\"hljs-attr\">absolute<\/span>', \n                    <span class=\"hljs-attr\">top:<\/span> '<span class=\"hljs-attr\">50<\/span>%', \n                    <span class=\"hljs-attr\">width:<\/span> '<span class=\"hljs-attr\">100<\/span>%', \n                    <span class=\"hljs-attr\">textAlign:<\/span> '<span class=\"hljs-attr\">center<\/span>', \n                    <span class=\"hljs-attr\">fontSize:<\/span> '<span class=\"hljs-attr\">5rem<\/span>',\n                }}\n            &gt;<\/span>Welcome to Cloudinary!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We can have three components for this particular video the <code>Title<\/code>, <code>SubTitle<\/code> and the <code>Image<\/code> then call them inside the <code>Main<\/code> component.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> Title = () =&gt; {\n\t<span class=\"hljs-keyword\">return<\/span>(\n        &lt;h1 \n            style={{\n                position: <span class=\"hljs-string\">'absolute'<\/span>,\n                top: <span class=\"hljs-string\">'50%'<\/span>,\n                width: <span class=\"hljs-string\">'100%'<\/span>,\n                textAlign: <span class=\"hljs-string\">'center'<\/span>,\n                fontSize: <span class=\"hljs-string\">'5rem'<\/span>,\n            }}\n        &gt;Welcome to Cloudinary!&lt;\/h1&gt;\n    );\n}\n<span class=\"hljs-keyword\">const<\/span> SubTitle = () =&gt; {\n\t<span class=\"hljs-keyword\">return<\/span>(\n        &lt;h3\n            style={{\n                position: <span class=\"hljs-string\">'absolute'<\/span>,\n                top: <span class=\"hljs-string\">'60%'<\/span>,\n                width: <span class=\"hljs-string\">'100%'<\/span>,\n                textAlign: <span class=\"hljs-string\">'center'<\/span>,\n                fontSize: <span class=\"hljs-string\">'3rem'<\/span>,\n\t    }}\n        &gt;Transform images <span class=\"hljs-keyword\">and<\/span> videos to load faster with no visual degradation, automatically generate image <span class=\"hljs-keyword\">and<\/span> video variants, <span class=\"hljs-keyword\">and<\/span> deliver high quality responsive experiences to increase conversions.&lt;\/h3&gt;\n    );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To add images and render them we have to use <code>Img<\/code> tag which shoud be imported from Remotion.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> {Composition, Img} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'remotion'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> cloudinary <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/cloudinary.png'<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We can then create the <code>Image<\/code> Component<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> Image = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n\t<span class=\"hljs-keyword\">return<\/span>(\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Img<\/span> \n            <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{cloudinary}<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">'cloudinary'<\/span> \n            <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span>\n                <span class=\"hljs-attr\">display:<\/span> '<span class=\"hljs-attr\">block<\/span>', \n                <span class=\"hljs-attr\">marginLeft:<\/span> '<span class=\"hljs-attr\">auto<\/span>', \n                <span class=\"hljs-attr\">marginRight:<\/span> '<span class=\"hljs-attr\">auto<\/span>', \n                <span class=\"hljs-attr\">width:<\/span> '<span class=\"hljs-attr\">30<\/span>%', \n                <span class=\"hljs-attr\">height:<\/span> '<span class=\"hljs-attr\">50<\/span>%',\n            }}\n        \/&gt;<\/span><\/span>\n    );\n}\n<span class=\"hljs-keyword\">const<\/span> Main = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{backgroundColor:<\/span> '<span class=\"hljs-attr\">white<\/span>', <span class=\"hljs-attr\">flexGrow:<\/span> <span class=\"hljs-attr\">1<\/span>}}&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Title<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SubTitle<\/span> \/&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>For now, everything we need for this video is set, but we need to do some animation to make create our video cool and interesting.<\/p>\n<h2>Animation<\/h2>\n<p>To make up our entire video clip we are going to use <code>Sequences<\/code>, these are small individual sections in finite time that make up our entire video. We then specify the time we from which we want a component to show using <code>from={0}<\/code> This means it will start to show at the start(0 seconds). You can also specify the time you want the component to disappear using the <code>durationInFrames={60}<\/code> attribute.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{backgroundColor:<\/span> '<span class=\"hljs-attr\">white<\/span>', <span class=\"hljs-attr\">flexGrow:<\/span> <span class=\"hljs-attr\">1<\/span>}}&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sequence<\/span> <span class=\"hljs-attr\">from<\/span>=<span class=\"hljs-string\">{0}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Sequence<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sequence<\/span> <span class=\"hljs-attr\">from<\/span>=<span class=\"hljs-string\">{60}<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Title<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Sequence<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sequence<\/span> <span class=\"hljs-attr\">from<\/span>=<span class=\"hljs-string\">{120}<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">SubTitle<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Sequence<\/span>&gt;<\/span>\t\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Adding Audio for our Video<\/h3>\n<p>We can simply add videos using the <code>&lt;Audio \/&gt;<\/code> tag in Remotion. Let\u2019s add a <code>Voice<\/code> component to render the voice.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> {Composition, Img, Audio} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'remotion'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> voice <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/voice.mp3'<\/span>;\n<span class=\"hljs-comment\">\/\/ rest of the code<\/span>\n<span class=\"hljs-keyword\">const<\/span> AudVoice = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Audio<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">{voice}<\/span> <span class=\"hljs-attr\">startFrom<\/span>=<span class=\"hljs-string\">{0}<\/span> <span class=\"hljs-attr\">endAt<\/span>=<span class=\"hljs-string\">{30*15}\/<\/span>&gt;<\/span><\/span>\n    );\n};\n<span class=\"hljs-comment\">\/\/ other code<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Remotion provides a variety of different hooks which enable us to provide data about the video.<\/p>\n<blockquote>\n<p>useVideoConfig() hook enables us grab data about the <code>fps<\/code>,\n<code>duration in frames<\/code>, <code>width<\/code>, and <code>height<\/code>. We can use this to calculate values for animating our frames.<\/p>\n<p>useCurrentFrame() hook gives us the current frame and the timeline. These frames will be re-rendered for each time in the video.<\/p>\n<\/blockquote>\n<p>For now your video player is playing well but we now need to use the data about the video in place of the natural numbers 0, 60 and 90. Import <code>useVideo<\/code> from remotion.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> Main = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> {fps, durationInFrames} = useVideoConfig();\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{backgroundColor:<\/span> '<span class=\"hljs-attr\">white<\/span>', <span class=\"hljs-attr\">flexGrow:<\/span> <span class=\"hljs-attr\">1<\/span>}}&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sequence<\/span> <span class=\"hljs-attr\">from<\/span>=<span class=\"hljs-string\">{fps*0.3}<\/span> <span class=\"hljs-attr\">durationInFrames<\/span>=<span class=\"hljs-string\">{durationInFrames}<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Image<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Sequence<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sequence<\/span> <span class=\"hljs-attr\">from<\/span>=<span class=\"hljs-string\">{fps}<\/span> <span class=\"hljs-attr\">durationInFrames<\/span>=<span class=\"hljs-string\">{durationInFrames}<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">AudVoice<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Sequence<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sequence<\/span> <span class=\"hljs-attr\">from<\/span>=<span class=\"hljs-string\">{fps}<\/span> <span class=\"hljs-attr\">durationInFrames<\/span>=<span class=\"hljs-string\">{durationInFrames}<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Title<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Sequence<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Sequence<\/span> <span class=\"hljs-attr\">from<\/span>=<span class=\"hljs-string\">{fps*2}<\/span> <span class=\"hljs-attr\">durationInFrames<\/span>=<span class=\"hljs-string\">{durationInFrames}<\/span>&gt;<\/span>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Subtitle<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">Sequence<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Fade-In effect on the SubTitle<\/h3>\n<p>Let\u2019s make our animation more captivating with a fade in effect. Here we\u2019ll use the <code>useCurrentFrame()<\/code> hook as shown.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> SubTitle = () =&gt; {\n\t<span class=\"hljs-keyword\">const<\/span> frame = useCurrentFrame();\n\t<span class=\"hljs-keyword\">const<\/span> opacity = frame &gt; <span class=\"hljs-number\">30<\/span> ? <span class=\"hljs-number\">1<\/span> : frame \/ <span class=\"hljs-number\">30<\/span>;\n\t<span class=\"hljs-keyword\">return<\/span>(\n        &lt;h3\n \tstyle={{\n\t\tposition: <span class=\"hljs-string\">'absolute'<\/span>,\n\t\ttop: <span class=\"hljs-string\">'60%'<\/span>,\n\t\twidth: <span class=\"hljs-string\">'100%'<\/span>,\n\t\ttextAlign: <span class=\"hljs-string\">'center'<\/span>,\n\t\tfontSize: <span class=\"hljs-string\">'3rem'<\/span>,\n\t\topacity\n\t}}\n &gt;Transform images <span class=\"hljs-keyword\">and<\/span> videos to load faster with no visual degradation, automatically generate image <span class=\"hljs-keyword\">and<\/span> video variants, <span class=\"hljs-keyword\">and<\/span> deliver high quality responsive experiences to increase conversions.&lt;\/h3&gt;\n\t);\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>useCurrentFrame brings back the current frame which is <code>SubTitle<\/code> in the context of the sequence.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> frame = useCurrentFrame();\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We want the opacity to be zero at the start then as time goes it becomes one. If the frame is greater than 30 then return the opacity as 1. Otherwise, have the opacity as <code>frame\/30<\/code><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> opacity = frame &gt; <span class=\"hljs-number\">30<\/span> ? <span class=\"hljs-number\">1<\/span> : frame \/ <span class=\"hljs-number\">30<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Bounce effect on the Image<\/h3>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> Image = () =&gt; {\n\t<span class=\"hljs-keyword\">const<\/span> frame = useCurrentFrame();\n\t<span class=\"hljs-keyword\">const<\/span> {fps} = useVideoConfig();\n\t<span class=\"hljs-keyword\">const<\/span> translate = spring({frame, fps, to: <span class=\"hljs-number\">100<\/span>})\n\t<span class=\"hljs-keyword\">return<\/span>(\n        &lt;Img \n            src={cloudinary} alt=<span class=\"hljs-string\">'cloudinary'<\/span> \n            style={{\n                display: <span class=\"hljs-string\">'block'<\/span>, \n                marginLeft: <span class=\"hljs-string\">'auto'<\/span>, \n                marginRight: <span class=\"hljs-string\">'auto'<\/span>, \n                width: <span class=\"hljs-string\">'30%'<\/span>, \n                height: <span class=\"hljs-string\">'50%'<\/span>, \n                transform: `translateY(${translate}px)`\n            }}\n        \/&gt;\n    );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The <code>spring<\/code> function makes our component bounce from a point to a point. We\u2019ll get the <code>fps<\/code> from the hook as shown. The function takes the <code>frame<\/code> and <code>fps<\/code> so that it knows how fast to go, <code>from<\/code> and <code>to<\/code> tell you how much range you want the outputs to be, and <code>from<\/code> has a default value of zero.<\/p>\n<h2>Building our Project<\/h2>\n<p>To build our project run <code>yarn build<\/code> or <code>npm run build<\/code> on your terminal. This has a dependency on <code>ffmpeg<\/code>, the terminal will give you instructions on how to configure it on your machine.<\/p>\n<p>Once done you will find the video inside the <code>out<\/code> folder of your project.<\/p>\n<p>Click <a href=\"https:\/\/res.cloudinary.com\/bowenivan\/video\/upload\/v1653462377\/video_ikangr.mp4\">this link<\/a> to see the end video.<\/p>\n<h2>Conclusion<\/h2>\n<p>Great! In this article, we managed to create a 15-second video without using any video editing tools just React. It\u2019s amazing how we can create videos using react, right?<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28479,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,382,246,371,303],"class_list":["post-28478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-player-video","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating Videos Using React.js and Remotion<\/title>\n<meta name=\"description\" content=\"Videos enable us to establish authority and a more personal feel to your message. It enables us to connect with the emotional levels of our audience. React is a great JavaScript library for describing User Interfaces that change over time. To create video content programmatically with React.js\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Videos Using React.js and Remotion\" \/>\n<meta property=\"og:description\" content=\"Videos enable us to establish authority and a more personal feel to your message. It enables us to connect with the emotional levels of our audience. React is a great JavaScript library for describing User Interfaces that change over time. To create video content programmatically with React.js\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-09T13:27:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-23T13:43:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Creating Videos Using React.js and Remotion\",\"datePublished\":\"2022-06-09T13:27:28+00:00\",\"dateModified\":\"2025-02-23T13:43:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Player Video\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/\",\"name\":\"Creating Videos Using React.js and Remotion\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA\",\"datePublished\":\"2022-06-09T13:27:28+00:00\",\"dateModified\":\"2025-02-23T13:43:49+00:00\",\"description\":\"Videos enable us to establish authority and a more personal feel to your message. It enables us to connect with the emotional levels of our audience. React is a great JavaScript library for describing User Interfaces that change over time. To create video content programmatically with React.js\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA\",\"width\":1280,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Videos Using React.js and Remotion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Videos Using React.js and Remotion","description":"Videos enable us to establish authority and a more personal feel to your message. It enables us to connect with the emotional levels of our audience. React is a great JavaScript library for describing User Interfaces that change over time. To create video content programmatically with React.js","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/","og_locale":"en_US","og_type":"article","og_title":"Creating Videos Using React.js and Remotion","og_description":"Videos enable us to establish authority and a more personal feel to your message. It enables us to connect with the emotional levels of our audience. React is a great JavaScript library for describing User Interfaces that change over time. To create video content programmatically with React.js","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-09T13:27:28+00:00","article_modified_time":"2025-02-23T13:43:49+00:00","og_image":[{"width":1280,"height":800,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/"},"author":{"name":"","@id":""},"headline":"Creating Videos Using React.js and Remotion","datePublished":"2022-06-09T13:27:28+00:00","dateModified":"2025-02-23T13:43:49+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA","keywords":["Guest Post","Player Video","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/","name":"Creating Videos Using React.js and Remotion","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA","datePublished":"2022-06-09T13:27:28+00:00","dateModified":"2025-02-23T13:43:49+00:00","description":"Videos enable us to establish authority and a more personal feel to your message. It enables us to connect with the emotional levels of our audience. React is a great JavaScript library for describing User Interfaces that change over time. To create video content programmatically with React.js","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA","width":1280,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-videos-using-react-js-and-remotion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Videos Using React.js and Remotion"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924341\/Web_Assets\/blog\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f\/46700ef161ac2d072f3edcd7672a5326ec3d8424-1280x800-1_284792fe1f.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28478"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28478\/revisions"}],"predecessor-version":[{"id":36973,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28478\/revisions\/36973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28479"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}