System Requirements Document for aimotion-design

1. Introduction

aimotion-design is a modern, premium SaaS web application: an AI-powered motion graphics creation platform built specifically for motion designers. Its core positioning is "An AI motion design workspace built specifically for motion designers" — explicitly not a generic AI video generator.

The product's defining workflow is:

Prompt → AI Design → Edit → Animate → Export

The intent is that creative professionals can create editable motion-design projects quickly while still retaining professional creative control — the AI produces an editable design, not a locked rendered video.

Audience. The platform is designed for Motion Graphics Designers, Graphic Designers, UI/UX Designers, Video Editors, Product Designers, and creative professionals.

MVP creative focus areas:

• SaaS/Product animations
• UI/UX animations
• 2D motion graphics
• Typography animation
• Social media motion graphics
• Brand motion
• Marketing animations

Explicitly out of scope for the first version (reserved as future features): advanced 3D, character animation, VFX, After Effects integration, and Figma integration.

2. System Overview

aimotion-design is a dark, premium, futuristic creative-tool web application. A designer arrives at a public entry surface, understands the AI motion-design workspace and its Prompt → AI Design → Edit → Animate → Export workflow, establishes an account, and then works inside a persistent editor shell where an AI-generated design is edited, animated, and exported.

Current delivery shape: a first-party custom web application with application-owned identity. Anonymous visitors can view the public entry surface and the two identity-access surfaces (Sign Up, Login). The Projects overview, New Project, and Editor are protected and require a signed-in session so that durable motion-design projects remain bound to the correct designer and can be resumed.

Actors. The accepted active-human catalog is closed: Motion Graphics Designer, Graphic Designer, UI/UX Designer, Video Editor, and Product Designer. The AI design-generation service is a non-persona system actor that produces the editable design from a prompt; it is not a human participant.

Accepted behavior. Designers submit a prompt and receive an AI-generated editable design; they edit that design, animate it, and export the finished motion asset. Projects persist so recurring work can be resumed. The MVP supports SaaS/product animations, UI/UX animations, 2D motion graphics, typography animation, social media motion graphics, brand motion, and marketing animations.

Narrow exclusions. No advanced 3D, no character animation, no VFX, no After Effects integration, and no Figma integration in this version. These are future features only and appear in no current page, requirement, or flow.

2a. Product Interpretation and Delivery Boundary

aimotion-design is delivered as a first-party web application that owns its own identity and its own editor workspace. The public entry surface is anonymously reachable and explains the workspace, its audience, and the five-step workflow before any identity is established. Because durable motion-design projects must remain privately owned by the designer who created them and must be resumable across sessions, the platform establishes application-owned identity: a self-service Sign Up for first use and a Login for returning verification. No invitation, provisioning, or deployment bootstrap boundary is established by the source, so enrollment is self-service only.

The protected working surfaces — the Projects overview, New Project, and the Editor — are reachable only after identity is established. The interaction that establishes access (Sign Up, Login) is itself anonymous and lives on its own access surfaces, never inside a protected destination.

Everything in this document is current. Advanced 3D, character animation, VFX, After Effects integration, and Figma integration are explicitly future and are excluded from all current pages, requirements, and acceptance criteria.

2b. Source Content Inventory

Not applicable — no reference directive in this project declares content_source authority, so no source content inventory is produced.

2c. Page Content and Component Coverage

Landing

• Purpose / information: Anonymous public entry surface. Explains that aimotion-design is an AI motion design workspace built specifically for motion designers (not a generic AI video generator), who it is for, and the Prompt → AI Design → Edit → Animate → Export workflow.
• Primary actions: Enter the workflow by starting a project (routes to Sign Up for a new designer); proceed to Login for a returning designer.
• Supporting actions: Read the workflow explanation; view the MVP creative focus areas (SaaS/product animations, UI/UX animations, 2D motion graphics, typography animation, social media motion graphics, brand motion, marketing animations).
• Domain entities: Workflow stage (Prompt, AI Design, Edit, Animate, Export); creative focus area; audience role.
• Component responsibilities: Full-viewport hero with the product's own interface rendered as the dominant object; headline and subhead; primary CTA; HUD micro-label chrome; alternating full-bleed sections presenting the workflow and focus areas as annotated editor panels rather than a grid of identical cards.
• States: Loading — hero subject and panels initialize on the void background. Empty — not applicable (static marketing content). Success — hero renders, workflow and focus areas legible, CTA reachable. Error — if the hero subject fails to initialize, the headline, subhead, workflow copy, and CTA remain fully readable and functional on the near-black ground. Recovery — the visitor can still proceed to Sign Up or Login without the hero subject.

Sign Up

• Purpose / information: Self-service enrollment so a creative professional can independently begin using the platform and own durable motion-design projects.
• Primary actions: Create an account and enter the workspace.
• Supporting actions: Move to Login if already enrolled.
• Domain entities: Designer account; credential.
• Component responsibilities: Glass enrollment panel over the void; credential fields; submit affordance with the 45°-cut corner gesture; link to Login.
• States: Loading — submit in progress. Empty — initial blank form. Success — account established, designer routed into the protected workspace. Error — invalid or incomplete credentials, or an account that already exists; the form retains entered values and states the problem. Recovery — correct the field and resubmit, or switch to Login.

Login

• Purpose / information: Returning verification so a designer can reach their durable projects and continue editing, animating, and exporting.
• Primary actions: Verify identity and enter the protected workspace.
• Supporting actions: Move to Sign Up if not yet enrolled.
• Domain entities: Designer account; credential; session.
• Component responsibilities: Glass verification panel over the void; credential fields; submit affordance; link to Sign Up.
• States: Loading — verification in progress. Empty — initial blank form. Success — session established, designer routed to their projects. Error — credentials not recognized; the form retains the entered identifier and states the problem without revealing which factor failed. Recovery — retry, or switch to Sign Up.

Projects

• Purpose / information: Independently revisitable overview of the designer's own editable motion-design projects so recurring work can be resumed.
• Primary actions: Open an existing project into the Editor; start a new project.
• Supporting actions: Scan project identity and last-worked context to choose what to resume.
• Domain entities: Motion-design project; project name; creative focus area; last-modified context.
• Component responsibilities: Project list rendered as floating glass panels carrying real project content; per-project open affordance; entry point to New Project.
• States: Loading — project list resolving. Empty — no projects yet; the surface states this plainly and offers the single next action of starting a project. Success — projects listed and openable. Error — the list fails to resolve; the surface states the failure and offers retry. Recovery — retry the list, or start a new project instead.

New Project

• Purpose / information: Focused owner of the prompt submission and AI design generation step that starts a motion-design project.
• Primary actions: Write a prompt describing the desired motion design; submit it to generate the AI design.
• Supporting actions: Choose the creative focus area for the project (SaaS/product animation, UI/UX animation, 2D motion graphics, typography animation, social media motion graphics, brand motion, marketing animation).
• Domain entities: Prompt; creative focus area; generated editable design; new motion-design project.
• Component responsibilities: Full-width glass prompt bar with a blinking mint caret as the hero object; live motion-preview strip showing looping keyframe thumbnails as the designer types; submit affordance with the 45°-cut corner; generation progress indicator with an always-on mint pulse; handoff into the Editor on completion.
• States: Loading — generation in progress, with visible progress readout. Empty — no prompt entered yet; submit is unavailable until a prompt exists. Success — an editable design is produced and the project opens in the Editor. Error — generation fails; the prompt text is preserved and the failure is stated. Recovery — revise the prompt and resubmit, or return to Projects.

Editor

• Purpose / information: Cohesive workspace where the AI-generated design is edited, animated, and exported with professional creative control.
• Primary actions: Edit the AI-generated design; animate it; export the finished motion asset.
• Supporting actions: Navigate the tool rail; inspect and adjust properties in the inspector; scrub and arrange work on the timeline; return to Projects.
• Domain entities: Editable design; layer/element; keyframe; timeline clip; playhead; animation property; export output.
• Component responsibilities: Persistent three-zone shell — 48px icon-only left tool rail with HUD labels, centre stage, right inspector panel — plus a fixed 120px bottom timeline strip with a mint playhead, violet keyframe dots connected by a hairline spline curve, and clips that glow on hover. HUD micro-label chrome carries coordinate and timecode readouts on panel corners.
• States: Loading — project and generated design resolving into the shell. Empty — a project with no editable elements yet; the stage states this and points back to the prompt. Success — design editable, animation applied, export produced. Error — project fails to load, or export fails; the failure is stated with the project state preserved. Recovery — retry the load or the export; the designer's edits remain intact.

3. Functional Requirements

FR-1 — AI motion design workspace positioning As a creative professional, I should understand that aimotion-design is an AI motion design workspace built specifically for motion designers, not a generic AI video generator, so that I know the tool is made for my craft.

• Provenance: explicit. Access: anonymous (Landing).
• Acceptance: the public entry surface states the workspace positioning and its audience; no generic AI-video-generator framing is presented.

FR-2 — Prompt → AI Design → Edit → Animate → Export workflow As a creative professional, I should be able to follow the workflow Prompt → AI Design → Edit → Animate → Export, so that I move from an idea to a finished motion asset in one continuous path.

• Provenance: explicit. Access: anonymous for understanding the workflow (Landing); signed-in for executing it (New Project, Editor).
• Acceptance: each of the five stages is reachable in order; the prompt stage produces an AI design; the design is editable; animation can be applied; an export can be produced.
• Failure/recovery: if AI design generation fails, the prompt is preserved and can be resubmitted. Continuation: the designer proceeds into the Editor with the generated design.

FR-3 — Create editable motion-design projects quickly As a Motion Graphics Designer, I should be able to create an editable motion-design project quickly from a prompt, so that I get to a working starting point fast.

• Provenance: explicit. Access: signed-in (New Project).
• Acceptance: submitting a prompt yields an editable design opened as a project in the Editor; the result is editable, not a locked render.
• Failure/recovery: generation failure preserves the prompt and allows resubmission. Continuation: the project opens in the Editor.

FR-4 — Retain professional creative control As a Motion Graphics Designer, I should retain professional creative control over the AI-generated design, so that the output meets my standards rather than being fixed by the AI.

• Provenance: explicit. Access: signed-in (Editor).
• Acceptance: the generated design's elements, properties, and animation are adjustable in the Editor after generation.

FR-5 — MVP creative focus areas As a creative professional, I should be able to work in the MVP focus areas — SaaS/product animations, UI/UX animations, 2D motion graphics, typography animation, social media motion graphics, brand motion, and marketing animations — so that the platform covers the motion work I actually do.

• Provenance: explicit. Access: signed-in (New Project, Editor).
• Acceptance: each listed focus area is selectable when starting a project and is supported through edit, animate, and export.

FR-6 — Edit the AI-generated design As a Graphic Designer, I should be able to edit the AI-generated design, so that I can turn it into the motion graphic I intend.

• Provenance: explicit. Access: signed-in (Editor).
• Acceptance: design elements and their properties can be changed in the Editor and the changes are reflected on the stage.

FR-7 — Animate the design As a UI/UX Designer, I should be able to animate the design, so that the motion itself is authored to my intent.

• Provenance: explicit. Access: signed-in (Editor).
• Acceptance: animation can be applied to design elements and is represented on the timeline with keyframes and a playhead.

FR-8 — Export the finished motion asset As a Video Editor, I should be able to export the finished motion asset, so that I can use it in my video work.

• Provenance: explicit. Access: signed-in (Editor).
• Acceptance: an export can be produced from the current project state; export progress is observable.
• Failure/recovery: a failed export is stated and can be retried with the project state preserved. Continuation: the designer can continue editing or return to Projects.

FR-9 — Durable, resumable projects As a Motion Graphics Designer, I should be able to return to my projects and resume them, so that recurring work is not lost between sessions.

• Provenance: explicit (editable motion-design projects) + required_inference (durable ownership and resume). Access: signed-in (Projects, Editor).
• Acceptance: a designer's projects are listed on the Projects surface and reopen into the Editor in their saved state.
• Failure/recovery: if the project list or a project fails to load, the failure is stated and retry is offered.

FR-10 — Self-service account enrollment As a creative professional, I should be able to enroll myself before creating durable motion-design projects, so that my projects are privately owned by me.

• Provenance: required_inference. Access: anonymous (Sign Up).
• Acceptance: a new designer can establish an account from the Sign Up surface and is then routed into the protected workspace.
• Failure/recovery: invalid or already-existing credentials are stated and the form retains entered values for correction.

FR-11 — Returning verification As a creative professional, I should be able to verify my identity when returning, so that I can reach my durable projects and continue editing, animating, and exporting.

• Provenance: required_inference. Access: anonymous (Login).
• Acceptance: a returning designer can verify from the Login surface and is routed to their projects.
• Failure/recovery: unrecognized credentials are stated without revealing which factor failed, and retry is offered.

FR-12 — Protected working surfaces As a creative professional, I should only reach my projects and the editor after identity is established, so that my work stays bound to me.

• Provenance: required_inference. Access: Projects, New Project, and Editor require a signed-in session; Landing, Sign Up, and Login are anonymous.
• Acceptance: an unauthenticated visitor cannot reach Projects, New Project, or Editor; the access-establishing interaction itself is anonymous.

FR-13 — AI design generation as a system actor As a Motion Graphics Designer, I should receive an AI-generated editable design after submitting my prompt, so that the AI Design stage of the workflow completes.

• Provenance: explicit (AI Design stage) + required_inference (generation mechanics). Access: signed-in (New Project).
• Acceptance: submitting a prompt triggers generation; progress is observable with a live generating state; completion yields an editable design.
• Failure/recovery: generation failure is stated, the prompt is preserved, and resubmission is possible.

4. User Personas

Motion Graphics Designer

• Product context: The primary creative professional the platform is built for. Works the full Prompt → AI Design → Edit → Animate → Export workflow and judges the tool by the quality of its own motion.
• Primary goal: Produce editable motion-design projects quickly without surrendering professional creative control.
• Distinct accepted responsibilities: Authors the prompt, evaluates and edits the AI-generated design, animates it, and exports the finished asset. Owns the project end to end.
• Relevant inputs or decisions: The prompt text; the creative focus area; which elements to edit; which properties to animate; when the result is ready to export.
• Interactions with other accepted participants: Works alongside Graphic Designers, UI/UX Designers, Video Editors, and Product Designers who use the same workspace; the AI design-generation service is the non-human actor that responds to the prompt.
• Observable success: An editable project exists, the motion is authored to intent, and an export is produced.

Graphic Designer

• Product context: A named target creative professional who brings static design sensibility into motion. Uses the same AI-assisted workspace to turn design work into editable animated motion graphics.
• Primary goal: Convert design intent into brand and marketing motion without rebuilding it from scratch.
• Distinct accepted responsibilities: Edits the AI-generated design so it matches the intended visual language, then animates and exports it — with particular weight on brand motion and marketing animations.
• Relevant inputs or decisions: The prompt describing the design; which elements and properties to adjust; the brand and marketing focus areas.
• Interactions with other accepted participants: Shares the workspace and project surfaces with the other accepted designer roles; relies on the AI design-generation service for the starting design.
• Observable success: The edited design reads as intended and exports as a finished motion graphic.

UI/UX Designer

• Product context: A named target creative professional focused on interface and product motion. Uses the platform to generate and refine UI/UX animations and product animations for interfaces.
• Primary goal: Produce interface motion that behaves correctly and reads clearly.
• Distinct accepted responsibilities: Generates a starting design, refines UI/UX and product animation behavior in the Editor, and exports the result.
• Relevant inputs or decisions: The prompt describing the interface motion; which animation properties to tune; the UI/UX animation and SaaS/product animation focus areas.
• Interactions with other accepted participants: Works in the same Editor shell as the other accepted roles; the AI design-generation service supplies the initial design.
• Observable success: The interface animation behaves as intended on the timeline and exports cleanly.

Video Editor

• Product context: A named target creative professional who needs motion graphics and typography/social media animations to place into video work.
• Primary goal: Get finished motion assets out of the platform and into an edit.
• Distinct accepted responsibilities: Creates motion graphics and typography/social media animations, edits and animates the AI-generated design, and exports finished motion assets.
• Relevant inputs or decisions: The prompt; the typography animation and social media motion graphics focus areas; export timing relative to the edit.
• Interactions with other accepted participants: Uses the same project and editor surfaces as the other accepted roles; depends on the AI design-generation service for the first pass.
• Observable success: A finished motion asset is exported and usable in video work.

Product Designer

• Product context: A named target creative professional producing SaaS/product animations and UI/UX motion to explain and demonstrate product behavior.
• Primary goal: Iterate quickly on product motion and ship it.
• Distinct accepted responsibilities: Produces SaaS/product animations and UI/UX motion, iterates on AI-generated editable projects, and exports them.
• Relevant inputs or decisions: The prompt; which iteration of the design to keep; the SaaS/product animation and UI/UX animation focus areas.
• Interactions with other accepted participants: Shares the workspace with the other accepted roles; the AI design-generation service provides the editable starting point.
• Observable success: The product animation communicates the intended behavior and exports successfully.

5. Core User Flows

Flow A — First-time designer: from prompt to exported motion asset

1. Landing (anonymous). The designer arrives at the full-viewport dark entry surface and reads that aimotion-design is an AI motion design workspace built specifically for motion designers, not a generic AI video generator. They see the Prompt → AI Design → Edit → Animate → Export workflow and the MVP focus areas.
2. Decision. The designer chooses to start a project and selects the primary CTA.
3. Sign Up (anonymous). Because durable projects must be privately owned, the designer establishes an account on the Sign Up surface. On success they are routed into the protected workspace. Failure/recovery: if credentials are invalid or the account already exists, the form states the problem and retains entered values; the designer corrects the field and resubmits, or switches to Login.
4. Projects (signed-in). The designer lands on the Projects overview. With no projects yet, the surface states this plainly and offers the single next action of starting a project.
5. New Project (signed-in). The designer writes a prompt in the full-width glass prompt bar and watches the live motion-preview strip loop keyframe thumbnails as they type. They choose the creative focus area for the project.
6. AI Design (system actor, observable to the designer). The designer submits the prompt. The AI design-generation service produces an editable design; the generating state is visible with an always-on mint pulse and a progress readout. Failure/recovery: if generation fails, the prompt text is preserved and the failure is stated; the designer revises the prompt and resubmits, or returns to Projects.
7. Editor (signed-in). On completion the project opens in the Editor shell — tool rail, stage, inspector, and the 120px timeline strip with its mint playhead. The designer now holds an editable design rather than a locked render.
8. Edit. The designer edits the generated design on the stage and in the inspector, adjusting elements and properties until the design matches intent.
9. Animate. The designer applies animation to elements; keyframes appear as violet dots connected by a hairline spline curve on the timeline, and the playhead scrubs the result.
10. Export. The designer exports the finished motion asset. Export progress is observable. Failure/recovery: if the export fails, the failure is stated and the project state is preserved; the designer retries.
11. Continuation. The designer returns to Projects, where the project now appears in the list, or continues editing.

Flow B — Returning designer: resume and finish an existing project

1. Landing (anonymous). The returning designer arrives at the entry surface and selects the path to Login.
2. Login (anonymous). The designer verifies their identity. On success they are routed to their projects. Failure/recovery: if credentials are not recognized, the surface states the problem without revealing which factor failed and retains the entered identifier; the designer retries or switches to Sign Up.
3. Projects (signed-in). The designer scans their projects, each rendered as a glass panel carrying real project content, and identifies the one to resume.
4. Editor (signed-in). The designer opens the project; it resolves into the Editor shell in its saved state. Failure/recovery: if the project fails to load, the failure is stated and retry is offered.
5. Edit / Animate. The designer continues editing and animating where they left off.
6. Export. The designer exports the finished asset, or returns to Projects to continue later.

Flow C — Graphic Designer: brand and marketing motion

1. Projects (signed-in). The Graphic Designer opens the workspace and starts a new project.
2. New Project (signed-in). They write a prompt describing the brand or marketing motion and select the brand motion or marketing animations focus area.
3. AI Design. The AI design-generation service returns an editable design; the generating state is visible.
4. Editor (signed-in). The designer edits the design so it matches the intended visual language, then animates it on the timeline.
5. Export. They export the finished motion graphic. Failure/recovery: a failed export is stated and retryable with edits intact.

Flow D — UI/UX Designer: interface and product motion

1. Projects (signed-in). The UI/UX Designer starts a new project.
2. New Project (signed-in). They prompt for the interface motion and select the UI/UX animations or SaaS/product animations focus area.
3. AI Design. The AI design-generation service returns an editable design.
4. Editor (signed-in). They refine the animation behavior, tuning properties in the inspector and arranging keyframes on the timeline.
5. Export. They export the interface animation. Failure/recovery: a failed export is stated and retryable.

Flow E — Video Editor: typography and social motion for an edit

1. Projects (signed-in). The Video Editor starts a new project.
2. New Project (signed-in). They prompt for the typography or social media motion and select the corresponding focus area.
3. AI Design. The AI design-generation service returns an editable design.
4. Editor (signed-in). They edit and animate the design to fit the edit they are working on.
5. Export. They export the finished motion asset for use in video work. Failure/recovery: a failed export is stated and retryable.

Flow F — Product Designer: iterate on product animation

1. Projects (signed-in). The Product Designer opens an existing project or starts a new one.
2. New Project (signed-in). For a new project they prompt for the product animation and select the SaaS/product animations or UI/UX animations focus area.
3. AI Design. The AI design-generation service returns an editable design.
4. Editor (signed-in). They iterate — editing the design, animating it, and reviewing on the timeline — until the product motion communicates the intended behavior.
5. Export. They export the result. Failure/recovery: a failed export is stated and retryable with the iteration preserved.

6. Visuals Colors and Theme

Muse and headline. Gleb Kuznetsov — Cinematic future tech: a dark motion-design cockpit where the interface itself animates. The register is "premium futuristic studio instrument": dark, technical, confident, cinematic, with craft credibility rather than hype. This is a direct hit on the user's own brief — dark interface, near-black background, subtle gradients, clean white typography, futuristic creative-tool aesthetic.

Palette (dark mode) — exact tokens by role:

|