fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-02 07:58:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update the website with an evolved roadmap and new product screenshots/videos

Browse Source
This commit is contained in:
Keavon Chambers
2025-11-10 00:06:10 -08:00
parent 2f45cf7ff2
commit f5ef1a94fe
10 changed files with 410 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/content/features.md
+227 -125
View File
@@ -73,267 +73,327 @@ Marrying vector and raster under one roof enables both art forms to complement e
<div class="roadmap">
<div class="feature-icons">
<!-- Pre-Alpha -->
<div class="feature-icon complete heading" title="Began February 2021" data-year="2021">
<div class="feature-icon complete heading" data-year="2021">
<h3>— Pre-Alpha —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Editor systems; basic vector art tools</span>
</div>
<!-- Alpha 1 -->
<div class="feature-icon complete heading" title="Began February 2022" data-year="2022">
<div class="feature-icon complete heading" data-year="2022">
<h3>— Alpha 1 —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Better tools; node graph prototyping</span>
</div>
<!-- Alpha 2 -->
<div class="feature-icon complete heading" title="Began February 2023" data-year="2023">
<div class="feature-icon complete heading" data-year="2023">
<h3>— Alpha 2 —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 6" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Node graph integration in documents</span>
</div>
<!-- Alpha 3 -->
<div class="feature-icon complete heading" title="Began February 2024" data-year="2024">
<div class="feature-icon complete heading" data-year="2024">
<h3>— Alpha 3 —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Procedural vector editing and usability</span>
</div>
<!-- Alpha 4 -->
<div class="feature-icon ongoing heading" title="Began February 2025" data-year="2025">
<div class="feature-icon ongoing heading" data-year="2025">
<h3>— Alpha 4 —</h3>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 46" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Parametric animation</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 1" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<span>Instancer repeat nodes</span>
<img class="atlas" style="--atlas-index: 58" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Instancer nodes for looped generation</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 9; transform: scaleX(-1)" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Table-based graphical data</span>
<img class="atlas" style="--atlas-index: 59" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Enhanced Pen, Path, and Shape tools</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 63" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Table-based graphical data format</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 67" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Data panel for graphical introspection</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 13" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Layer clipping masks</span>
</div>
<div class="feature-icon complete" title="Development Complete">
<img class="atlas" style="--atlas-index: 66" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>All-around performance optimizations</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Desktop app (Windows, Mac, Linux)</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 12" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>GPU-accelerated raster rendering</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Evolution of the graphical data format</span>
<img class="atlas" style="--atlas-index: 10" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Expanded imaging model data format</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Robust vector mesh editing/rendering</span>
</div>
<div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 43; transform: rotate(90deg)" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 71" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Automatic image trace vectorization</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Timeline panel for animation curves</span>
<img class="atlas" style="--atlas-index: 51" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Context menus throughout the editor</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 40" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Simplified main properties panel</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Custom attributes for table data</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 57" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Signed distance field rendering</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Local fonts access</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Local file browser for saving/loading</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 64" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Node version management</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 17" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Stable document format</span>
</div>
<!-- <div class="feature-icon ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Imaginate tool</span>
</div> -->
<!-- Beta -->
<div class="feature-icon heading">
<h3>— Beta —</h3>
<!-- Beta 1 -->
<div class="feature-icon heading" data-year="2026">
<h3>— Beta 1 —</h3>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Variable color swatches</span>
<img class="atlas" style="--atlas-index: 53" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Local fonts access</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Command palette and context menus</span>
<img class="atlas" style="--atlas-index: 54" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Saving over local files (web version)</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Physical units of measure</span>
<img class="atlas" style="--atlas-index: 41" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Timeline panel for animation curves</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Brush tool rewrite</span>
<img class="atlas" style="--atlas-index: 62" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Nested documents as custom nodes</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 43" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Stylus and touch interaction</span>
<img class="atlas" style="--atlas-index: 56" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Variables and color swatches</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Custom attributes for table data</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 28" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Physical measurement units</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 65" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Text-on-path tool support</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 3" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Per-glyph text style controls</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 48" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Robust vector mesh editing/rendering</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Nondestructive shape builder tool</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Broader SVG support including filters</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 50" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Shape builder tool</span>
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Parametric art standalone export</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 5" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>New and improved brush tool</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 43" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Stylus and touch interaction</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 70" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>MIDI and audio-reactive visualization</span>
</div>
<!-- Beta 2 -->
<div class="feature-icon heading" data-year="2027">
<h3>— Beta 2 —</h3>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 24" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Dockable and multi-window panels</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 52" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Command palette</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 68" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Onion skinning mode for animation</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 69" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Animatable deformation meshes/rigs</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 72" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Simulation domains</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 57" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Signed distance field rendering</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 14" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Procedural PBR material generation</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Code editor for custom nodes</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Document history management</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Offline edit resolution with CRDTs</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>History brush and clone stamp tools</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 34" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 34" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Asset libraries and node marketplace</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Automation and batch processing</span>
<img class="atlas" style="--atlas-index: 27" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Automation/batch processing tools</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 45" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Standalone parametric documents</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Raw photo processing</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 21" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Select mode (marquee masking)</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Raster adjustments, filters, and effects</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 25" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Liquify and warp transforms</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Advanced typography and typesetting</span>
<img class="atlas" style="--atlas-index: 19" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Raw photo processing</span>
</div>
<!-- LTS Releases -->
<div class="feature-icon heading">
<h3>— LTS Releases —</h3>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 31" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Advanced typesetting features</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 32" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>PDF, EPS, AI, DXF, PSD, and TIFF</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 55" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 55" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>CMYK, spot color, and ICC profiles</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 33" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>HDR and WCG color handling</span>
</div>
<!-- 1.0 Release -->
<div class="feature-icon heading">
<h3>— 1.0 Release —</h3>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Internationalization and accessibility</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 4" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Outliner panel (node graph tree view)</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 18" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Document history management</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 39" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Offline edit resolution with CRDTs</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 22" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>History brush and clone stamp tools</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 23" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Internationalization and accessibility</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 49" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>AI nodes and tools (e.g. magic wand)</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 20" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Procedural styling of paint brushes</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<img class="atlas" style="--atlas-index: 60" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Infinite generative vector patterns</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>CAD style constraint relationships</span>
<img class="atlas" style="--atlas-index: 29" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Geometric constraint system solver</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Responsive design constraint solvers</span>
<img class="atlas" style="--atlas-index: 30" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Responsive design layout solver</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 16" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
<img class="atlas" style="--atlas-index: 61" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Authoring animated SVGs, Lottie, etc.</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 42" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Live video stream compositing</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 44" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>iPad app and keyboard-free controls</span>
<img class="atlas" style="--atlas-index: 44" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Tablet app and keyboard-free controls</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 37" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Cloud document storage</span>
<img class="atlas" style="--atlas-index: 26" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Media collection manager/browser</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 38" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 37" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Cloud document storage/device sync</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 38" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Multiplayer collaborative editing</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 35" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Predictive graph rendering/caching</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Distributed graph rendering</span>
<img class="atlas" style="--atlas-index: 36" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Multi-device distributed rendering</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<span>Cloud rendering accelerator service</span>
<img class="atlas" style="--atlas-index: 15" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span>Hosted rendering accelerator service</span>
</div>
<div class="feature-icon">
<img class="atlas" style="--atlas-index: 47" src="https://static.graphite.rs/icons/icon-atlas-roadmap__3.png" alt="" />
<img class="atlas" style="--atlas-index: 47" src="https://static.graphite.rs/icons/icon-atlas-roadmap__4.png" alt="" />
<span><em>…and that's all just the beginning…</em></span>
</div>
</div>
@@ -341,3 +401,45 @@ Marrying vector and raster under one roof enables both art forms to complement e
</div>
</section>
<section>
<div class="block">
## Roadmap spotlight: keyframe animation
Coming early 2026, Graphite will expand its animation toolset beyond parametrically-driven motion to include traditional keyframe animation. The Timeline panel pictured below will let animators drive parameters using keyframes and curves through a traditional dopesheet interface.
Node parameters can be set to a constant value in the Properties panel, exposed to the graph for procedural animation, or exposed to a channel in the upcoming Timeline panel for hand-authored keyframing.
The panel will enable users to scrub through time with the playhead and choose between timing with discrete frames or continuous seconds. A dedicated curves editing mode (not pictured) will enable fine-tuning parameters with a labeled Y-axis, while the dopesheet allows individual channels to be expanded to view and edit the shape and smoothness of curves inline.
Work-in-progress design mockup:
<img src="https://static.graphite.rs/content/features/mockup-timeline-panel.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" />
</div>
</section>
<section>
<div class="block">
## Roadmap spotlight: raster image editing
The vision since Graphite's inception has been to open up the traditional raster image editing workflow to the greater degree of flexibility found in node-based compositors, without one approach compromising the ergonomics of the other.
As with Graphite's current vector toolset, raster editing will interpret the user's interactive edits as modifications to the construction of layers in the underlying node graph rather than destructive alterations to layer pixel data (as in other image editors). By containing only a description of the user's editing operations without the data, documents will remain ultra tiny when source assets are linked externally.
Brushes, selection tools, masks, filters, effects, adjustment layers, and other tools used to manipulate raster layers will all be presented in a familiar form when Graphite's raster toolset nears maturity by the end of beta.
Work-in-progress design mockup:
<img src="https://static.graphite.rs/content/features/mockup-viewport.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" />
<img src="https://static.graphite.rs/content/features/mockup-node-graph.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" />
</div>
</section>