Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/GraphiteEditor/Graphite/llms.txt

Use this file to discover all available pages before exploring further.

Graphite supports parametric animation, introduced in Alpha 4 — instead of traditional keyframes, animation is driven by connecting a time value to node parameters and letting the procedural engine recompute the artwork for every frame. If your composition is already built procedurally, adding motion is often as simple as wiring a time-based node into an existing parameter. Change an instance count, a rotation, or a position by a formula involving time and the result becomes an animation.

​
How Animation Works

The animation system in Graphite is built on the same node graph used for all procedural content creation. Every document has a playback timeline with a current timestamp. That timestamp is exposed as a data value that any node in the graph can read and use as an input to any parameter. When playback is running, Graphite advances the timestamp on each frame and re-evaluates the entire node graph. Because the graph is a pure function of its inputs (including time), the output is always consistent and deterministic — scrubbing backward to any frame gives exactly the same result as playing through it.
The Timeline panel — a traditional dopesheet interface for authoring keyframe animation curves — is on the roadmap for Beta 1 (planned early 2026). In the current alpha, all animation is driven parametrically through the node graph.

​
Animation Time and Real Time Nodes

Two nodes in the Animation category provide time as a usable data value:

​
Animation Time

The Animation Time node outputs the elapsed time, in seconds, since the beginning of animation playback. It has a single Rate parameter (default: 1/sec) that scales the output — use values greater than 1 to speed up the animation, less than 1 to slow it down. Connect this node’s output to any numeric parameter to make that parameter a function of playback time. From the source (animation.rs): 
/// Produces the time, in seconds on the timeline, since the beginning of animation playback.
fn animation_time(ctx: impl Ctx + ExtractAnimationTime, _primary: (), rate: Item<f64>) -> Item<f64>
The rate parameter multiplies the raw elapsed seconds, giving you a simple way to control animation speed globally.

​
Real Time

The Real Time node outputs a chosen component of the current UTC wall-clock time. Available components are:
ComponentDescription
UTCMilliseconds since the Unix epoch
YearFull year number (e.g. 2025)
HourCurrent hour (0–23)
MinuteCurrent minute (0–59)
SecondCurrent second (0–59)
MillisecondCurrent millisecond (0–999)
Real Time is useful for clock visualizations or artwork that reacts to the actual time of day, rather than playback position.

​
Pointer Position

The Pointer Position node (also in the Animation category) outputs the current position of the user’s cursor within the document canvas as a 2D point. This enables interactive, cursor-reactive artwork that updates as the mouse moves.
Connect the Animation Time node’s output to a parameter like rotation or position through a Math node to create smooth looping motion. For example: wire Animation Time into Math (Multiply) with a factor of 360, then into a rotation parameter — the shape completes one full rotation per second. Divide by a larger number to slow the loop.

​
Instancer Nodes for Looped Generation

Instancer (repeat) nodes, also introduced in Alpha 4, allow you to generate repeated instances of a shape or subgraph driven by an index. When combined with time-based parameters, they enable looped generative animations where each instance can have its own phase or offset. The Repeat category includes several nodes:
  • Repeat — Generates a fixed count of copies by evaluating the connected content subgraph once per index. Each copy can read its own index value so it can position, rotate, or color itself uniquely.
  • Repeat Radial — Distributes copies around a center at a given radius with a count of instances and an optional start_angle. Animating start_angle spins the entire pattern; animating radius pulses it outward.
  • Repeat Array — Distributes copies linearly along a direction vector with a given count and optional angle twist.
  • Repeat on Points — Places copies at the anchor points of any vector path, with an index provided to each so they can offset their timing.
  • Copy to Points — Similar to Repeat on Points but accepts arbitrary graphic content and supports randomized scale and rotation per instance.

​
Example: Spinning Radial Pattern

To animate a circular pattern rotating over time:
  1. Build a Path → Fill → Repeat Radial pipeline as described in the Procedural Design guide.
  2. Expose the Start Angle parameter of the Repeat Radial node by clicking the expose button in the Properties panel.
  3. Add an Animation Time node to the graph.
  4. Wire Animation Time’s output through a Math (Multiply) node (set factor to 45) into the exposed Start Angle input.
  5. Press Play — the pattern rotates at 45 degrees per second.

​
Example: Phase-Offset Instances

Using Repeat with an index-driven phase offset:
  1. In your content subgraph, read the current instance index via the context (each instance receives its own index automatically).
  2. Multiply the index by a phase offset (e.g. 360 / count) and add it to the time-driven angle.
  3. The result is a fan of instances each slightly ahead in their animation cycle — a cascading or wave-like effect.

​
Exporting Animation

Animated .graphite documents can be rendered to video or image sequences using the graphene-cli command-line tool. To export an animated GIF: 
graphene-cli --input my-animation.graphite --output output.gif --fps 24
The --fps flag sets the frame rate of the exported animation. Higher frame rates produce smoother motion but larger file sizes. Other export formats (PNG sequences, MP4 via FFmpeg) are also available through the CLI — see the Graphene CLI reference for full options.
The in-editor animation preview plays directly in the viewport using the node graph’s real-time evaluation. There is currently no dedicated timeline panel or playback controls beyond the play/stop button. The full Timeline panel with a dopesheet, curves editor, and playhead scrubbing is planned for Beta 1.

​
Roadmap

The animation toolset will expand significantly in upcoming releases:

Timeline Panel (Beta 1)

A traditional dopesheet interface with a playhead, keyframe editor, and curves mode for fine-tuning easing. Parameters can be set to a constant value, exposed procedurally to the graph, or exposed to a keyframe channel in the Timeline panel.

Onion Skinning (Beta 2)

Ghost frames from nearby times overlaid on the canvas to help with frame-by-frame and motion-path animation.

Animatable Deformation Meshes / Rigs (Beta 2)

Deformation mesh and skeletal rig systems that can be driven by the animation system for character and object animation.

MIDI and Audio-Reactive (Beta 1)

Nodes that respond to MIDI input or audio amplitude for music-reactive visual generation.

Procedural Design

Build the parameterized node graphs that animation builds on top of

Graphene CLI

Export animated documents from the command line

Build docs developers (and LLMs) love

Get started for freeTalk to us