Artifact

A procedural artwork editor for creating covers and posters through fast, controllable visual experimentation.

Role
Product design & engineering
Ownership
Solo, end to end
Release
v0.41.0
Product status
Public beta
  • Layers-first editing
  • Node-graph composition
  • 30+ GPU effects
  • 3D and environment maps
  • Multi-ratio export
Artifact Layers workspace showing the “Сочная и влажная” cover composition and its image and effect layers.
The imported “Сочная и влажная” project shows the Layers workflow on real artwork: 17 image and effect layers remain ordered and editable around the canvas.

From experiment to real artwork

Introduced in v0.1.0-beta.1

Artifact began with a cover for a friend, then grew because the first generated image did not provide enough control.

I was making artwork for the Vantaa Underground track «Вайбер» and used Gemini Nano Banana to explore abstract background material. The image was a useful start, but I wanted to vary it deliberately, reproduce a promising direction, and export an equirectangular environment map for a Blender scene. That gap between a surprising image and an editable process became the first Artifact experiment.

Effects accumulated, the experiment became reusable, and the scope moved from one cover to a procedural editor for covers and posters. Vantaa Underground incubated the product by providing a real need and its first production work; Artifact now stands on its own. It is aimed at independent artists and designers who want to explore quickly without giving up an editable, reproducible result. The works show that progression while crediting the external inputs behind each one.

Artwork made with Artifact

  1. Вайбер cover artwork with a phone scene, bold lettering, and saturated abstract effects.

    Released artwork

    Вайбер

    Developed across Artifact and a Figma comparison; the phone scene was rendered in Blender.

    Listen on Spotify ↗ (opens in new tab)
  2. Level Up cover with bright green lettering, a portrait in sunglasses, and a saturated comic background.

    Upcoming release artwork

    Level Up

    Composed and treated in Artifact; the title lettering was generated with GPT Image 2.

    Open release page ↗ (opens in new tab)
  3. Сочная и влажная cover with a wet peach close-up, saturated red texture, and a tilted Cyrillic label.

    Release-ready alternate

    Сочная и влажная

    Composed and treated in Artifact around an external peach image; prepared in case the track shipped as a single.

The “Вайбер” cover shipped with the single. The final “Level Up” cover is prepared for an upcoming release, while “Сочная и влажная” remains an alternate made in case the track ships separately. Each credit distinguishes work done in Artifact from external source assets and tools.

Fast iteration with control

Introduced in v0.1.0-beta.1 · Verified in v0.38.0

The default workflow optimizes for momentum: begin with Layers, see every change, and keep the result reproducible.

Artifact opens into Layers because that is the shortest path from a blank document to a useful variation. An author can combine images, text, fills, seeded emoji fields, procedural noise, geometric arrays, 3D primitives, and more than thirty GPU effects. The RAND action can produce a starting point, but the document seed and per-layer offsets keep chance inspectable rather than disposable.

This is the core creative iteration loop: make a starting point, change structure or effects, compare variations, and keep the one worth developing. Four aspect ratios and ×1/×2/×3 PNG or JPEG output let the same system move between square covers, portrait posters, stories, and landscape artwork. Portable .artifact packages preserve the editable document with its imported assets. Opening another Artifact document is staged before replacement, and the current work is kept as a recovery copy until the author confirms the change.

One document, two workflows

Introduced in v0.1.0-beta.1 · Verified in v0.38.0

Nodes add explicit composition control without creating a second document format or a second renderer.

I wanted a node-based creative workflow without depending on a product centered on AI pipelines. Artifact’s Nodes view stays focused on artwork: sources, merges, color correction, repetition, and a visible export path. It is an optional power-user surface, not the price of entering the editor.

Both modes edit one serializable CanvasDocument. Stack mode infers a linear graph; Nodes exposes the directed graph. Both resolve through renderDocument. Pixel-like parameters share a 540-pixel reference, while 3D preview and export share one scene and committed camera state. That keeps composition consistent across previews, saved work, and exports even when resolution and antialiasing differ.

The advanced working surface

  1. Artifact Nodes workspace showing the “Сочная и влажная” cover passing through image and effect nodes with previews at each stage.

    Nodes workspace

    The “Сочная и влажная” project exposes its real render path as an editable graph, with image sources, the advisory label, and each effect visible as a separate stage.

Why it matters. Nodes reveals the composition when a graph is useful; Layers remains the default path into the same editable document.

One render contract

  1. CanvasDocument

    Layers, graph metadata, seed, aspect ratio, image references, and 3D view state remain serializable.

  2. Layers

    The default stack stays direct. When it renders, Artifact infers the equivalent linear graph rather than using a separate pipeline.

  3. Nodes

    The advanced view makes branches, merges, color correction, repetition, and the final export path explicit.

  4. renderDocument

    One facade resolves either workflow so preview and export preserve composition, effect density, and committed 3D camera state.

Why it matters. The editor can offer a direct stack and an explicit graph without asking authors to choose between incompatible project formats. New rendering capabilities have one semantic home.

Keeping the editor responsive

Introduced in v0.7.1-beta.1 · Verified in v0.41.0

The node editor exposed two different failures at different times: unstable state flow and too much pixel work on the main thread.

The first prototype was promising until Nodes began triggering React’s “Maximum update depth exceeded” error. I nearly stopped there. Tracing repeated React Flow measurements led to a focused fix: discard no-op dimension updates and document clearer state ownership. This was a correctness bug, not a reason to add workers.

Later sluggish interaction had a different cause. Manual profiling recorded heavy graph edits at roughly 8–12 FPS. Moving deterministic procedural-noise generation into a Web Worker raised the same kind of interaction to roughly 57 FPS or higher. CPU image transforms followed; React Flow, PixiJS, live Three.js viewports, and compositing stayed on the main thread.

Two problems, two responses

  • Correctness — stable updates

    Filtering duplicate React Flow dimension updates and clarifying state ownership stopped the maximum-update loop. Moving the work to a worker would not have fixed it.

  • Performance — 8–12 to ~57 FPS

    Manual profiling identified pure procedural-noise pixel work as the bottleneck. Moving it into a Web Worker restored responsive interaction.

Why it matters. Keeping the state bug and rendering bottleneck separate avoided both an unnecessary rewrite and an unsafe all-at-once worker migration.

The performance benchmark separates frame timing, long tasks, thumbnail work, document renders, and GPU phases so the next optimization can begin with a measured bottleneck.

From local editor to operated product

Introduced in v0.39.0 · Verified in v0.41.0

Artifact remains useful as a local editor while optional accounts and operated services extend what one browser can safely own.

The first versions could live entirely in the browser. As image generation, cloud projects, and repeated use arrived, I kept that local-first authoring loop and added remote boundaries only where they earned their cost. Signing in adds private cloud projects; it is not required to begin making or to keep an editable document.

Provider-backed jobs now cross an API and worker boundary instead of placing secrets or long operations in the editor. A separate backoffice exposes account tiers, usage, cost, and recovery controls without exposing prompts, artwork, or project documents. The release path then verifies the frontend and services as one revision before production promotion.

One product, explicit operating boundaries

  1. Local-first editor

    Active work and imported assets stay available in browser storage, so the core editing loop does not wait for an account or a remote service.

  2. Optional cloud identity

    Better Auth and PostgreSQL add private cloud projects, account state, and password recovery without replacing the local document model.

  3. Provider-backed work

    An Express API, BullMQ workers, Redis, and server-held provider credentials move longer AI operations outside the browser and make their lifecycle inspectable.

  4. One verified release

    The production gate verifies one commit, stages the Vercel frontend, deploys the Coolify services at the same SHA, checks the API contract, and then promotes the web release.

Why it matters. The browser keeps the fast, direct creative loop. Accounts and workers add continuity and expensive operations without turning every edit into a network dependency.

The v0.41 release record documents the current account, backoffice, and exact-SHA production boundary. Billing, public sharing, collaboration, and project history remain planned rather than shipped claims.

Useful now, with clear limits

Artifact is useful enough to produce released work and mature enough to operate as a public beta, but its most ambitious workflows are still uneven.

I own the product end to end: direction, interface, rendering, local and cloud projects, testing, releases, and account-backed AI operations. The remaining question is not whether Artifact can ship as a product, but which of its more ambitious workflows are ready to lead the experience.

Current product boundary

  • Strong now

    Local effects, layered composition, Nodes, editable project files, multi-ratio output, and Blender-ready environment maps form a useful creative tool today.

  • Still awkward

    Export can become clearer, and AI generation remains experimental. It helped supply assets for later artwork, but it is not yet convenient enough to be the main way into Artifact.

  • Next direction

    A chat or agent mode could lower the entry barrier by translating intent into editable operations. The constraint is important: assistance should expose a controllable document, not replace it with an opaque result.

Why it matters. Public beta describes a working product under active development. It does not turn experimental AI, future agent interaction, or unfinished export polish into completed outcomes.

Technology stackShow

Editor

  • React
  • React Router
  • TypeScript
  • Vite
  • Tailwind CSS
  • Radix UI
  • React Flow
  • XState
  • Framer Motion

Rendering

  • Canvas 2D
  • PixiJS
  • Three.js
  • WebGL / GLSL
  • Web Workers

Data & identity

  • localStorage
  • IndexedDB
  • PostgreSQL
  • Better Auth

API & async

  • Node.js
  • Express
  • BullMQ
  • Redis
  • Bull Board

AI & integrations

  • OpenAI API
  • xAI API
  • Resend

Hosting & delivery

  • Docker Compose
  • Vercel
  • Coolify
  • GitHub Actions

Testing & quality

  • Vitest
  • Playwright
  • Biome
  • ESLint
  • Fallow