AI Motion Studio

Branding10 s · Intermediate

Cinematic logo assembly

Precise logo reveal with assembled shapes, a controlled light sweep and a final hero hold.

SVG · GSAP

View or customize prompt

Editable prompt — replace the bracketed values with your details

You are a senior creative developer and motion designer. Generate a complete, self-contained HTML/CSS/JavaScript animation, not a text description or still image. Provide runnable source files with clear setup instructions and a deterministic render timeline. Prefer SVG/Canvas/GSAP/Three.js as appropriate, but avoid unnecessary dependencies. Use an intentional color system, strong typography, eased keyframes, sensible composition, and accessible reduced-motion behavior. All typography and graphics must remain legible within the safe area. Include a preview method and an export plan for an MP4 with audio optional. Do not claim to have rendered, tested or exported anything you have not actually done.

PROJECT: Create a premium corporate logo animation for [PROJECT_NAME]. Use the exact supplied brand asset at [ASSET_PATH] and preserve its spelling, contours, aspect ratio, and colors ([BRAND_COLORS]). Never invent parts of the logo. Background: clean white or neutral studio.

TIMELINE: 0–3 seconds introduce abstract shapes based only on existing logo geometry; 3–6 seconds progressively reveal the real logo through masking and precise alignment; 6–8 seconds perform a subtle light sweep; 8–10 seconds hold the undistorted original artwork. Use GSAP timelines, path-based SVG masks and restrained blur where useful.

OUTPUT: [DURATION_SECONDS] seconds at 1920×1080/30fps. Include a static final frame, explicit keyframe timings, instructions for safe alpha handling and a reproducible browser-to-MP4 capture. If no transparent source logo is supplied, ask for the asset instead of fabricating it.

Branding12 s · Beginner

Kinetic typography campaign

Energetic animated headlines that remain readable on social media.

SVG · CSS · GSAP

How to render ↗

View or customize prompt

Editable prompt — replace the bracketed values with your details

You are a senior creative developer and motion designer. Generate a complete, self-contained HTML/CSS/JavaScript animation, not a text description or still image. Provide runnable source files with clear setup instructions and a deterministic render timeline. Prefer SVG/Canvas/GSAP/Three.js as appropriate, but avoid unnecessary dependencies. Use an intentional color system, strong typography, eased keyframes, sensible composition, and accessible reduced-motion behavior. All typography and graphics must remain legible within the safe area. Include a preview method and an export plan for an MP4 with audio optional. Do not claim to have rendered, tested or exported anything you have not actually done.

PROJECT: Make an elegant kinetic-typography video announcing [PROJECT_NAME]. Use these exact supplied words: [HEADLINE_TEXT]. Theme colors: [BRAND_COLORS]. Avoid inventing claims or replacing the supplied text.

SEQUENCE: Opening hook in the first second; three short beats with staggered word entrances, clean typographic scaling and masked reveals; then a logo/title lockup and two-second readable end card. Use layout-safe motion and optical alignment. Design both 16:9 and 9:16 compositions. Keep high contrast and account for UI-safe margins.

EXPORT: A [DURATION_SECONDS]-second 30fps loop-ready HTML animation plus deterministic MP4 capture instructions. Include reduced-motion presentation with no rapid flashing.

Effects10 s · Advanced

Particle constellation reveal

A field of particles smoothly converges into a clean title or logo silhouette.

Canvas · WebGL

How to render ↗

View or customize prompt

Editable prompt — replace the bracketed values with your details

You are a senior creative developer and motion designer. Generate a complete, self-contained HTML/CSS/JavaScript animation, not a text description or still image. Provide runnable source files with clear setup instructions and a deterministic render timeline. Prefer SVG/Canvas/GSAP/Three.js as appropriate, but avoid unnecessary dependencies. Use an intentional color system, strong typography, eased keyframes, sensible composition, and accessible reduced-motion behavior. All typography and graphics must remain legible within the safe area. Include a preview method and an export plan for an MP4 with audio optional. Do not claim to have rendered, tested or exported anything you have not actually done.

PROJECT: Build an interactive-but-recordable particle reveal for [PROJECT_NAME] using [BRAND_COLORS]. Render around 250–500 points on a Canvas or WebGL layer with seeded initialization. Use attractor forces, spring damping and coherent noise; avoid random frame-to-frame jitter.

ANIMATION: Starting constellation; gentle orbital movement; convergence toward target text or a supplied SVG silhouette; final crisp unaltered title. Provide cursor response only during preview, and disable cursor dependency in exported deterministic playback.

PERFORMANCE: Adapt to device pixel ratio, cap particles on mobile and clean up animation frames on unmount. Deliver a [DURATION_SECONDS]-second 1920×1080 timeline and browser-to-MP4 workflow.

3D Scenes15 s · Advanced

3D product hero showcase

Premium rotating product scene with studio-style highlights and slow camera travel.

Three.js · WebGL

How to render ↗

View or customize prompt

Editable prompt — replace the bracketed values with your details

You are a senior creative developer and motion designer. Generate a complete, self-contained HTML/CSS/JavaScript animation, not a text description or still image. Provide runnable source files with clear setup instructions and a deterministic render timeline. Prefer SVG/Canvas/GSAP/Three.js as appropriate, but avoid unnecessary dependencies. Use an intentional color system, strong typography, eased keyframes, sensible composition, and accessible reduced-motion behavior. All typography and graphics must remain legible within the safe area. Include a preview method and an export plan for an MP4 with audio optional. Do not claim to have rendered, tested or exported anything you have not actually done.

PROJECT: Create a premium 3D showroom scene for [PROJECT_NAME]. Use the user's actual GLB/GLTF product model at [ASSET_PATH]; if unavailable, create only a clearly labelled abstract placeholder, never a misleading product replica. Use a minimal studio set, soft area-light approximation, grounded contact shadows, high-quality material roughness and brand accent color [BRAND_COLORS].

CAMERA PLAN: 0–4s dramatic close-up, 4–9s smooth orbit and detail reveal, 9–12s move to a clear three-quarter angle, 12–15s static hero hold. Use a deterministic timeline, avoid abrupt zooms, and maintain stable framing across responsive viewports.

EXPORT: Include asset loading diagnostics, a low-power mobile mode and precise 30fps MP4 rendering instructions.

Explainers30 s · Intermediate

Animated concept explainer

Simple motion diagrams that explain a process step-by-step without distracting movement.

SVG · GSAP

How to render ↗

View or customize prompt

Editable prompt — replace the bracketed values with your details

You are a senior creative developer and motion designer. Generate a complete, self-contained HTML/CSS/JavaScript animation, not a text description or still image. Provide runnable source files with clear setup instructions and a deterministic render timeline. Prefer SVG/Canvas/GSAP/Three.js as appropriate, but avoid unnecessary dependencies. Use an intentional color system, strong typography, eased keyframes, sensible composition, and accessible reduced-motion behavior. All typography and graphics must remain legible within the safe area. Include a preview method and an export plan for an MP4 with audio optional. Do not claim to have rendered, tested or exported anything you have not actually done.

PROJECT: Explain [TOPIC] to [AUDIENCE] using a clear, animated process diagram with 3–5 fact-checked steps: [VERIFIED_STEPS]. Do not invent quantities or technical claims; label examples as illustrative when no source is supplied.

STRUCTURE: 0–3s state the question; 3–9s diagram appears; 9–23s emphasize individual steps with animated connectors and restrained highlights; 23–27s summarize; 27–30s readable takeaway. Use labeled arrows, visual hierarchy and gentle easing. Do not use animation to imply a scientifically inaccurate mechanism.

DELIVERABLES: Responsive browser animation with playback controls, transcript/captions and an MP4 export plan for [DURATION_SECONDS] seconds.

Marketing20 s · Intermediate

App and website feature launch

Animated app interface reveals for launch announcements and website demonstrations.

SVG · GSAP · Canvas

How to render ↗

View or customize prompt

Editable prompt — replace the bracketed values with your details

You are a senior creative developer and motion designer. Generate a complete, self-contained HTML/CSS/JavaScript animation, not a text description or still image. Provide runnable source files with clear setup instructions and a deterministic render timeline. Prefer SVG/Canvas/GSAP/Three.js as appropriate, but avoid unnecessary dependencies. Use an intentional color system, strong typography, eased keyframes, sensible composition, and accessible reduced-motion behavior. All typography and graphics must remain legible within the safe area. Include a preview method and an export plan for an MP4 with audio optional. Do not claim to have rendered, tested or exported anything you have not actually done.

PROJECT: Produce an original polished launch video for [PROJECT_NAME]. Only use screenshots, icons, logos and copy provided by the owner at [ASSET_PATH]. Show three real user benefits: [VERIFIED_BENEFITS]. Never substitute fake customer testimonials, metrics or features.

STORYBOARD: Attention-grabbing opening; elegant browser/UI frame reveal; 3 feature demonstrations using pan, crop and focus callouts; a readable closing CTA [CALL_TO_ACTION]. Match the actual application design with [BRAND_COLORS]. Animations should be deliberate, uncluttered and clearly distinct from a still slideshow.

DELIVER: Editable HTML/SVG/GSAP source, scene timing and a [DURATION_SECONDS]-second 1920×1080/30fps MP4 capture recipe.

Explainers20 s · Intermediate

Data storytelling animation

Animated bars and annotations that turn verified data into a memorable story.

SVG · Canvas

How to render ↗

View or customize prompt

Editable prompt — replace the bracketed values with your details

You are a senior creative developer and motion designer. Generate a complete, self-contained HTML/CSS/JavaScript animation, not a text description or still image. Provide runnable source files with clear setup instructions and a deterministic render timeline. Prefer SVG/Canvas/GSAP/Three.js as appropriate, but avoid unnecessary dependencies. Use an intentional color system, strong typography, eased keyframes, sensible composition, and accessible reduced-motion behavior. All typography and graphics must remain legible within the safe area. Include a preview method and an export plan for an MP4 with audio optional. Do not claim to have rendered, tested or exported anything you have not actually done.

PROJECT: Build a polished data-storytelling animation titled [PROJECT_NAME] from the provided table [VERIFIED_DATA]. Show correct values, units, chart scales and source attribution. Never invent missing data or exaggerate differences using deceptive truncated axes.

SCENES: 0–3s title with key question; 3–9s chart draws progressively; 9–16s highlight verified comparisons with short, legible annotations; 16–20s hold the takeaway and source. Use colorblind-aware contrasts, smooth easing and a mobile-legible alternative layout.

DELIVER: Deterministic Canvas/SVG animation, pause and replay controls and a [DURATION_SECONDS]-second MP4 export workflow.

Effects15 s · Advanced

Audio-reactive visualizer

Audio-synced geometric motion suitable for intros, announcements and music visuals.

Canvas · Web Audio

How to render ↗

View or customize prompt

Editable prompt — replace the bracketed values with your details

You are a senior creative developer and motion designer. Generate a complete, self-contained HTML/CSS/JavaScript animation, not a text description or still image. Provide runnable source files with clear setup instructions and a deterministic render timeline. Prefer SVG/Canvas/GSAP/Three.js as appropriate, but avoid unnecessary dependencies. Use an intentional color system, strong typography, eased keyframes, sensible composition, and accessible reduced-motion behavior. All typography and graphics must remain legible within the safe area. Include a preview method and an export plan for an MP4 with audio optional. Do not claim to have rendered, tested or exported anything you have not actually done.

PROJECT: Build a sleek audio-reactive geometric visualizer for [PROJECT_NAME]. Use user-supplied licensed audio at [ASSET_PATH] and [BRAND_COLORS]. If audio is not provided, offer an explicitly labelled silent demo rather than asserting synchronization.

VISUAL DIRECTION: Central ring and 24–48 radial bars respond to low/mid/high frequency bands using Web Audio frequency analysis with smoothing. Design a calm introduction, an energetic section, and a clean fade to an end card. Use stable timing, do not rely on autoplay, and provide a manual playback control.

OUTPUT: A [DURATION_SECONDS]-second 30fps capture method that synchronizes the visual track with permitted audio in FFmpeg, documenting codec and timing choices.

Looking for all 703 video prompts?

Cinematic logo assembly

Kinetic typography campaign

Particle constellation reveal

3D product hero showcase

Animated concept explainer

App and website feature launch

Data storytelling animation

Audio-reactive visualizer

How to make the final MP4

Keep creating on PromptAtlasLab

AI Motion Studio

Looking for all 703 video prompts?

Pick a motion style

Cinematic logo assembly

Kinetic typography campaign

Particle constellation reveal

3D product hero showcase

Animated concept explainer

App and website feature launch

Data storytelling animation

Audio-reactive visualizer

How to make the final MP4

Keep creating on PromptAtlasLab