Skip to content

CREATIVEAILAB

CASE STUDY: Motion Graphics with Midjourney & Runway

Motion graphics are important in web design and advertisements because they grab attention, guide users through a visual journey, and bring clarity to complex ideas. They enhance user experience by adding feedback and flow, making interactions feel intuitive and engaging. Beyond functionality, motion adds personality to a brand, making websites feel more dynamic, modern, and memorable. Whether it’s a subtle hover effect, an abstract 3D animation, a product animation, or an explainer graphic, motion graphics help tell stories, increase engagement, and turn passive browsing into active exploration.

1. Cosmos

Create an account on Cosmos.so

After succesfully registering, you log in through https://www.cosmos.so/login

 

On the main dashboard, press the ‘Create’ button. Here you will click on ‘New Cluster’. Name this as the name of your moodboard, then press on the white ‘Create’ button again in the pop-up tab.

After creating a new cluster, go back to the discovery page. In the middle search bar, enter the theme and subject you want elements around. In this guide we go with the theme of ‘Y2K’ and I search for an aesthetic I can make my moodboard around. This is the output that you receive.

If you don’t seem to find the results you were looking for. You can always use the assisting tools that are provided on the right of the search bar.

Here you can choose a dominant color. Once chosen, your images will revolve more around images that have this color in their composition. This tiny tool can be helpful when you lack inspiration.

Once you have made a board that’s big enough according to your needs. Click on the right profile image icon (the circle with a gradient color) to see the overview of your moodboards that have been created. Once you click on the moodboard we just made. You get a general overview of all elements that have been picked.

To get a view of the complete moodboard, make sure to press CTRL + Z + MousewheelBack to zoom out. Once you can see all the items. Make a printscreen of the moodboard. For windows this is done by using the ‘Snippet tool’ or for Mac users press SHIFT + COMMAND + 3.

Save this picture to your preferred destination on your computer.

Search for https://chatgpt.com/ and create an account.

After creating your account, make a new chat. Now copy the image we saved or drag and drop it in the chat box. Ask ChatGPT ..

“Describe me this pattern or texture from this moodboard so I can use it for motion design in 1 paragraph.”

We will gather 4 different descriptions through ChatGPT to have variation.

Description 1

“Inspired by the interplay of organic fluidity, iridescent gradients, and geometric abstraction from this moodboard, envision a “liquid crystal tessellation” pattern: a seamless grid of slowly undulating polygonal cells, each cell shimmering with refractive, oily hues that shift between soft blues, violets, and neons depending on angle and movement. The edges of the polygons pulse subtly, as if breathing, and the surface is textured with microstructures resembling a cross between fish scales and wave interference patterns. This texture feels both digital and biological—perfect for use as a dynamic background layer in motion design or as an animated matte in compositing workflows that demand futuristic, immersive aesthetics.”

“Drawing from the juxtaposition of natural structures and synthetic gradients in the moodboard, imagine a “neurofiber bloom” texture: a branching network of semi-transparent, glowing tendrils—like neural pathways or tree roots—gently spreading across the screen in slow motion. Each tendril pulses with flowing light, shifting between electric cyan, magenta, and amber, with occasional sparks of prismatic color where lines intersect. Behind the fibers, a subtle depth map of soft ripples and cellular shadows adds dimensionality, evoking both organic tissue and futuristic circuitry. This pattern works beautifully for motion transitions, HUD overlays, or ambient visual loops that need an intelligent yet ethereal atmosphere.”

“Building on the tactile, layered textures and vibrant color palettes of the moodboard, envision a “chromafold mesh”: a dynamic surface made of overlapping translucent sheets that resemble folded fabric or wings, each subtly rippling like it’s underwater. The folds catch iridescent light—ranging from deep sea blues and purples to sudden flashes of copper and coral—creating a hypnotic moiré effect as the layers shift. Embedded within the mesh are slow-moving gridlines that pulse gently, hinting at a digital structure beneath the organic motion. Ideal for use as a background or transitional texture in motion design, it evokes a sense of softness wrapped in precision, natural and digital in equal measure.”

“Inspired by the rhythmic geometry and fluid surfaces on the moodboard, picture a “vortex prism weave”: a swirling, spiraling pattern composed of interlaced translucent bands, each behaving like a sheet of polarized glass. As the bands rotate and converge toward a central void, they refract neon gradients—cool blues, magentas, and golden greens—creating shifting interference patterns reminiscent of both kaleidoscopes and ocean currents. The texture appears to warp space subtly, giving a sense of gravitational pull, while embedded micro-details like dust motes and light flares drift across the surface. This design lends itself perfectly to motion design sequences requiring hypnotic depth, energetic flow, or visual transitions that feel simultaneously cosmic and cybernetic.”

This is all the output we needed from ChatGPT. Let’s continue to the next tool, Midjourney.

Visit midjourney.com and click on log in.

It is recommended to use your google account for more ease of use.

Once logged in, make sure that you click on the settings button.

Have the settings adjusted to the image below.

In order to use Midjourney v7, you will need to go through a survey named ‘Personalization’ by Midjourney where you will be shown 200 images with a choice of A and B, you pick the image you like and you progress through the survey. Once completed you will gain access to version 7. It is set to version 6.1 by standard, to make this guide useful we will need the latest one, v7.

Image size: To change the aspect ratio of the image generated.

Model

  • Use Raw Mode for image effects on your images.
  • Choose your default Midjourney version.
  • For quick prototyping, use Draft Mode.

Aesthetics

  • Experiment with Stylization to influence your image with how artistically generated it should be.
  • Use Weirdness for unique quirks.
  • Variety is used for more diverse outcomes.

More options

  • You can select the default GPU speed.
  • Use Stealth Mode to keep your image generation session not visible to others on the Midjourney feed.

Prompt 1

Inspired by the interplay of organic fluidity, iridescent gradients, and geometric abstraction from this moodboard, envision a “liquid crystal tessellation” pattern: a seamless grid of slowly undulating polygonal cells, each cell shimmering with refractive, oily hues that shift between soft blues, violets, and neons depending on angle and movement. The edges of the polygons pulse subtly, as if breathing, and the surface is textured with microstructures resembling a cross between fish scales and wave interference patterns. This texture feels both digital and biological–perfect for use as a dynamic background layer in motion design or as an animated matte in compositing workflows that demand futuristic, immersive aesthetics.

Drawing from the juxtaposition of natural structures and synthetic gradients in the moodboard, imagine a “neurofiber bloom” texture: a branching network of semi-transparent, glowing tendrils–like neural pathways or tree roots–gently spreading across the screen in slow motion. Each tendril pulses with flowing light, shifting between electric cyan, magenta, and amber, with occasional sparks of prismatic color where lines intersect. Behind the fibers, a subtle depth map of soft ripples and cellular shadows adds dimensionality, evoking both organic tissue and futuristic circuitry. This pattern works beautifully for motion transitions, HUD overlays, or ambient visual loops that need an intelligent yet ethereal atmosphere.

Building on the tactile, layered textures and vibrant color palettes of the moodboard, envision a “chromafold mesh”: a dynamic surface made of overlapping translucent sheets that resemble folded fabric or wings, each subtly rippling like it’s underwater. The folds catch iridescent light–ranging from deep sea blues and purples to sudden flashes of copper and coral–creating a hypnotic moiré effect as the layers shift. Embedded within the mesh are slow-moving gridlines that pulse gently, hinting at a digital structure beneath the organic motion. Ideal for use as a background or transitional texture in motion design, it evokes a sense of softness wrapped in precision, natural and digital in equal measure.

Inspired by the rhythmic geometry and fluid surfaces on the moodboard, picture a “vortex prism weave”: a swirling, spiraling pattern composed of interlaced translucent bands, each behaving like a sheet of polarized glass. As the bands rotate and converge toward a central void, they refract neon gradients–cool blues, magentas, and golden greens–creating shifting interference patterns reminiscent of both kaleidoscopes and ocean currents. The texture appears to warp space subtly, giving a sense of gravitational pull, while embedded micro-details like dust motes and light flares drift across the surface. This design lends itself perfectly to motion design sequences requiring hypnotic depth, energetic flow, or visual transitions that feel simultaneously cosmic and cybernetic.

For a more detailed way of Midjourney prompting, visit Guide to Midjourney

To make our static image more animated, we will use Runway Gen-3-Alpha. This tool gives the possibility to create Generative Visual Effects where you can blend pictures together to create a video.

First, visit runway on https://app.runwayml.com/login

After registering your account and logging in, you will be redirected to the general dashboard.

Click on the ‘Generate Video’ button on the bottom.

The first thing we need to do is change the model of Gen-4 Turbo to Gen-3-Alpha Turbo. This is because the previous generation offers the possibility to use keyframes. Here we can upload the styleframes we generated in Midjourney.

Before we proceed uploading our images. We need to create a ‘script’ to have our scene flow. We need ChatGPT to give in a prompt with our styleframes as reference;

“Describe me a flow, through the eyes of a motion designer how the reference images can be connected in animation. They will be used as keyframes. Describe me the flow as if it was a scene. The scene description will be used in Runway. ”

These are the three styleframes we have chosen from the generated images.

After we obtained the description of ChatGPT, we paste it in the text frame of Runway.

When we are all set, we can click on the blue ‘Generate’ button.

To download, look at the right bottom of the generated video, here you can see the download icon.

Capcut is a web based editing tool, used for quick and fast editing and compositing work. It’s a free tool with premium options. For the next step in this guide, you may have noticed that our video has a watermark and we would like to control the flow of the video.

Visit https://www.capcut.com/ and register your account or log in with your Google account.

When you enter the dashboard, press the left button ‘Nieuwe maken’ > Video > 16:9 to create a new composition.

Now drag and drop our generated video of Runway on the app.

Once uploaded in the composition, press ‘Animaties’ on the right. Add a ‘fade-in’ and ‘fade-out’ effect at the start and the end of the scroll. Afterwards, press the ‘Snelheid’ tab to have an overview of the motion, select ‘Curve’ and choose your flow structure.

When you are done editing your video to your liking. Press the blue ‘Exporteren’ button in the top bar. Export as mp4 and your new composition will be downloaded.

A use case would be to have the video used as a background overlay for a homepage like the demo shown below.

To start, go to your site hosted by WordPress, and enter the dashboard/back-end.

Click on ‘Add Media File’ and drag and drop the video composition we exported from CapCut so it will be uploaded to our Media Library.

After this is done, go to the page where you want the video on the background. For my instance, I created a new page.

After having given it a name and putting Elementor as the editor, we are now able to see the Elementor dashboard on our editing screen.

Search for ‘Video’

Select the ‘Video’ widget and drag it on the canvas.

Now select the ‘Source’ tab and change it to ‘Self Hosted’.

We will upload the video we just uploaded.

Afterwards, we would need to use the whole video frame over the canvas. We do this by going to the top of the frame of the video.

Press the button with the six dots to go from editing the ‘Video’ widget to editing the whole container where the widget is placed in.

Copy the settings shown below. Make sure you go from ‘Layout’ to ‘Style’ tab.

After setting things up correctly, we should see this.

I played with the ‘Background overlay’ in the ‘Style’ tab to place an additional overlay on top. I did this in order to have text placed on top of it and in context of having a nice contrast that is not too bright.

And finishing up with a ‘Text’ widget on top. The text widget can be found just like we did with the ‘Video’ widget.

We now have a looping background, started from a moodboard, to a description, to image generation, to video generation, to editing for the loop, to putting it as asset on a webpage!