Design · Prompt
RunwayML Animated Gradient Motion Prompt
Runway Gen-3 prompt and workflow to animate static gradients for websites
A technique combining static gradient images with Runway Gen-3 Alpha Turbo to generate fluid, animated background videos. It lets designers quickly produce moving blurred backdrops for Figma prototypes and landing pages without manual After Effects animation.
The prompt
Prompt: Random movement of gradient colors, blue and purple gradient illusion, Dynamic motion, dynamic blur, 30s speed, unsharp edges.
Workflow steps:
1. Download a high-res gradient image from Grainient.supply.
2. Open RunwayML (app.runwayml.com) and go to Generative Video / Gen-3 Alpha Turbo.
3. Upload the gradient image as the source frame.
4. Enter the prompt above and generate the video.
5. Download the MP4 file and insert it as a video fill into your Figma landing page frame.
What it's for
- Animate static gradient graphics into fluid background video loops
- Create animated hero backgrounds for landing page designs and web prototypes
- Add video fills to Figma frames without complex motion design software
Key points
- Uses static gradient images (such as from Grainient.supply) as source frames
- Employs image-to-video generation via Runway Gen-3 Alpha Turbo
- Motion prompt: 'Random movement of gradient colors, blue and purple gradient illusion, Dynamic motion, dynamic blur, 30s speed, unsharp edges'
- Direct export to MP4 for use as video backgrounds in Figma or web builds
Pricing
Freemium. Runway offers limited free trial credits; paid plans start at $12/month
Details
- Type
- Prompt
- Category
- Design
- Topic
- Motion Design
- Open source
- No
- Platforms
- Web
- For
- UI/UX designers, web designers, and front-end developers
- Alternative to
- After Effects, Spline, LottieFiles
- Tags
- runwayml, gradients, figma, video generation, prompts, landing page
Why it was saved
- @basit.designs: Creates smooth, looping background motion for Figma prototypes, landing pages, or website hero sections without manual motion design.
Compare
Related
AI-powered web editor for generating editable motion graphics from text prompts.
Browser-based graphic design editor with procedural motion graphics and effects
Fast, browser-based motion design tool with Figma import and AI animation features
Browser-based motion design editor for creating and exporting Lottie animations
Browser-based motion graphics editor for creating 3D product launch videos.
Visual canvas for designing interactive WebGL shaders and motion graphics
Updated