Build your own After Effects.

# Build an original app inspired by After Effects

You are an experienced product designer and full-stack engineer. Build a working, polished MVP from the brief below. Implement the core journeys end to end; a static mockup is not sufficient. Inspect the current environment, make sensible implementation decisions, and get started. Ask a question only if a missing answer genuinely blocks implementation.

Starting platform: Desktop. Explicit customized Product & audience and Tech stack requirements take precedence over this starting target.

## Product & audience
Build an original motion graphics tool called Motionkit, inspired by After Effects. It is for animating titles, shapes, and images into short compositions. The main journey is adding layers, setting keyframes, previewing interpolated motion, and rendering an image sequence or supported video. Scope the first version to a deterministic 2D compositing engine.

## Design
Create an original dark desktop layout with a composition viewer, layer/property timeline, asset panel, and contextual inspector. Show animated properties and their keyframes explicitly. Use visible time markers, interpolation controls, and a focused playback toolbar with accessible keyboard shortcuts.

## Features
1. Compositions: create a composition with dimensions, duration, and frame rate; add shape, text, raster-image, and solid layers; reorder, parent, hide, and lock them.

2. Animation: keyframe position, scale, rotation, opacity, and a shape color. Add, move, duplicate, and remove keyframes; support hold, linear, and one cubic easing mode with an explicit curve preview.

3. Compositing: implement deterministic layer transforms, alpha blending, and a simple shape mask. Recompute parent transforms in a defined order and prevent parenting cycles.

4. Preview and history: scrub to any frame, cache a bounded preview, play at the target rate when possible, and report dropped preview frames honestly. Undo/redo and reopen saved projects.

5. Render: output a numbered PNG sequence with alpha or encode supported video using an available licensed media engine. Export uses the same evaluation function as the preview and supports cancellation.

## Tech stack
Use Rust for a new native project with a serializable scene/animation engine and a practical desktop UI toolkit. Start with deterministic CPU evaluation and rendering; add GPU acceleration only after matching output. Use established image/font libraries and a separate export worker. If using a browser stack by explicit preference, retain the same frame evaluation contract and document performance and format limits.

## Data & behavior
Composition {id, width, height, durationFrames, fps}; Layer {id, compositionId, type, parentId, assetId, style, order, inFrame, outFrame}; AnimatedProperty {layerId, path, baseValue}; Keyframe {id, propertyId, frame, value, interpolation, curve}; Mask; Asset; RenderJob. Version the project schema and evaluate a frame from absolute time without depending on previous playback frames.

Acceptance checks and scope:
Render an original five-second title card with position, opacity, and rotation keys; compare first/middle/last frames with preview. Test exact keyframe boundaries, parent transforms, alpha output, reload, and cancellation. Exclude expressions, 3D, tracking, rotoscoping, generative effects, full .aep interchange, and third-party plugins.

## Originality and assets
The named product is a reference for general workflows only. Use an original product name, visual identity, wording, layout, and assets. Do not copy proprietary code, branded logos, distinctive screens, private APIs, paid templates, or protected media. Use original or appropriately licensed sample data and assets. Build from this brief rather than scraping the reference service. Do not imply affiliation with the referenced company.

## Implementation quality
- Make every visible control work, with clear loading, success, empty, validation, and failure states. Remove controls for unimplemented features.
- Support the target platform and responsive or resizable layouts where appropriate. Use platform-appropriate accessibility semantics, labels, keyboard operation, visible focus, sufficient contrast, and reduced-motion preferences. Provide alternatives for drag-only interactions.
- Validate inputs at the relevant boundary. Treat imported or user-generated content as untrusted; render it safely. Confirm destructive actions or offer undo.
- Keep state changes reliable across navigation and reloads. Never silently lose edits. Handle persistence and network errors with an actionable message.
- Keep the scope realistic. Prioritize the complete primary journey. If a custom Features section differs from the baseline, update the data model, design, and acceptance checks to match it; explicit custom requirements take precedence over baseline assumptions.
- Provide realistic original sample content and a useful empty state. Keep sample data clearly separate from user-created data.

## Delivery and verification
1. Inspect the repository and outline the implementation in a few sentences.
2. Implement the app and connect its actual data flow. Continue until the primary journey works.
3. Run appropriate checks and test the acceptance cases above on the target platform. Verify responsive layouts and keyboard navigation when browser tools are available. For native projects, build with the available SDK and test an emulator or device when possible; report any missing native verification honestly. For games, verify the rules and gameplay loop, not only the menus.
4. Fix observed failures, then provide the runnable result, setup/run instructions, a brief explanation of what is implemented, and any specific configuration or verification limits.

This is a focused MVP. Do not add billing, AI services, or unrelated features unless explicitly requested in the brief. Start building now.