Animation System
ASCII Motion uses a layer-based composition system for creating animations. Each project contains multiple layers, each with content frames, transform property tracks, and procedural effects — all managed through the timeline.
Architecture
The animation system follows an After Effects-style model: layers hold content frames (ASCII canvas data with time ranges), property tracks animate transforms via keyframes, and effect tracks apply non-destructive processing.
Layers
Layers are the primary organizational unit. Content on higher layers renders on top of lower layers.
| Feature | Description |
|---|---|
| Visibility (eye icon) | Show/hide layer from rendering and export |
| Solo (S) | Render only this layer, muting all others |
| Lock | Prevent accidental edits to layer content |
| Opacity | 0–100% layer transparency |
| Reorder | Drag layers in the list to change z-order |
| Rename | Double-click the layer name |
Content Frames
Each layer contains one or more content frames — segments of ASCII canvas data with a start time and duration:
- Content frames are positioned on the timeline and cannot overlap within the same layer
- Drag edges to resize duration; drag the block to reposition
- Frames can be moved between layers via cross-layer drag
- Hidden frames are skipped during playback and export
- Label colors provide visual organization
Property Tracks
Animate layer transforms by adding keyframes to property tracks. See Keyframes & Transforms for details.
Effect Tracks
Apply non-destructive procedural effects with timeline-based blocks. See Effects for details.
Layer Groups
Group layers for organization and cascading transforms:
- Select layers → create group
- Group transforms apply to all child layers
- Groups can have their own effect tracks
- Single nesting level (groups cannot contain groups)
- Collapse/expand groups in the timeline UI
Timeline Layout
The timeline panel has three main areas:
| Area | Content |
|---|---|
| Layer List (left) | Layer names, visibility/solo/lock controls, effect track headers |
| Track Area (center) | Content frame blocks, property track keyframes, effect blocks, ruler with playhead |
| Properties Panel (right, conditional) | Keyframe editor with value, frame, easing curve controls |
Compositing
Layers are composited bottom-to-top at each frame:
- For each visible layer, get its content frame at the current frame
- Apply layer effect tracks
- Apply layer transforms (position, scale, rotation via anchor point)
- Apply layer opacity
- Composite onto the result (higher layers overwrite)
- Apply group effects and transforms where applicable
- Apply global effects
- Render final output
Playback is optimized with pre-computed compositing — all frames are composited at play start for 60 FPS playback via direct canvas rendering.
Next Steps
- Timeline — Frame management and timeline controls
- Keyframes & Transforms — Property animation and easing
- Onion Skinning — Ghost frame overlays
- Playback Controls — Preview and work area