Redraw and the Future of 2D Graphics on WebGPU
Featuring
A New Layer for WebGPU-Powered Graphics
Redraw explores a different path for building 2D graphics: one that sits above low-level WebGPU APIs while still giving developers access to GPU-driven primitives. Instead of working directly with WebGPU’s lower-level rendering model, Redraw provides abstractions for paths, brushes, strokes, materials, feathering, and animation.
That positioning matters. WebGPU gives developers more direct access to modern GPU capabilities, but it also introduces a lot of complexity. Redraw aims to make that power more approachable, especially for teams building graphics-heavy UI, advanced animation, visual effects, and drawing experiences.
Vector Graphics With More Expressive Strokes
A central part of Redraw’s API is its treatment of vector paths. The examples discussed covered variable-width strokes, animated SVG paths, single-stroke brushes, feathered edges, and color interpolation along a path. These features make it possible to create effects that feel closer to handwritten lettering, neon strokes, loaders, and calligraphic drawing without manually managing the full rendering pipeline.
The API model is closer to canvas-style programming than typical React component composition. Developers describe what should be drawn, how it should be brushed or filled, and how those values evolve over time. That makes the mental model more mathematical, but also more direct for graphics work.
Feathering, Blur, and Glass Effects
Redraw’s vector feathering is one of its most interesting areas. Instead of relying on repeated rasterization steps, the library can apply soft edges, blur-like effects, and layered visual treatments in a more GPU-oriented way. This opens the door to effects such as frosted glass, glowing outlines, sweep blur, and motion-like trails.
These capabilities are especially relevant as native platforms continue to move toward richer surfaces, layered translucency, and physically inspired UI. Effects like glassmorphism or liquid-style materials are hard to reproduce well with standard layout primitives alone. A rendering-focused approach gives developers better control over the visual result without forcing every effect through the layout system.
Physically Based Rendering for 2D UI
Redraw also includes physically based rendering concepts, including material properties, light direction, roughness, metalness, bevels, and ambient lighting. While this does not behave like a full 3D engine with global illumination, it gives 2D graphics a more tactile feel by simulating how light interacts with surfaces.
That makes Redraw useful for interfaces where depth, lighting, and material response are part of the product experience. Buttons, controls, badges, interactive visuals, charts, and meditation-style animations can all benefit from this kind of rendering model when subtle visual detail matters.
Where Redraw Fits
Redraw is still in technical preview, and its React Native story is not yet ready for everyday production use. The current API shows strong potential, particularly for vector-first graphics and GPU-driven animation, but the library will need more time in real applications before its practical boundaries are clear.
Its likely role is not to replace every canvas or animation library. Instead, Redraw looks like a promising middle layer: higher-level than raw WebGPU or TypeGPU, but closer to the GPU than layout-driven animation. For teams building advanced visual interfaces, that middle ground could become a very useful place to work.
Watch the full session to see Redraw’s playground examples, WebGPU rendering concepts, and practical experiments with animated paths, glass effects, and PBR materials.
