Introducing Project Redraw, a new grade of 2d primitives for Web & Native

In a regular 2D library, colors and stroke width are scalar values. In Redraw, you can set a JS function as a callback that will be compiled and executed on the GPU. That callback receives all the geometry information needed to compute the effect: tangent, arc length, distance.

For colors, you can build gradients based on the arc length of the path, its distance, or even its tangent. These single-stroke paths support self-intersections.

Self intersections can even be blended with one another

The geometry information on paths is so rich that you can build all sorts of interesting rendering effects. Similar to what ThreeJS does but here your input is an SVG Path, Figma design, not a triangle mesh.

Vector feathering enables a couple of powerful use-cases. Two that I really love: analytical motion blur and fast backdrop filters. These can be built in a single render pass, no extra rasterization needed.

Watch the full announcement at

Redraw is available as a technical preview to subscribers. Your support is what has enabled such an initiative. We are a very early into this project. Lots to figure out.

Video goes unbelievably hard

Thank You 🙏😊

Can it be used in another framework for instance Pixi? Or is it a whole different paradigm?

it integrates with anything that rins on WebGPU including Pixi

Getting acquired by Apple speedrun any%

@steveruizok did you see this

The emergent properties of AI are fascinating. We've seen so many cool web development advancements in the last few months since claude hockeysticked

cc @steveruizok

"Alala les courbes de Bézier" 🤣

🤣🤣

freaking cool! this is coming from a hardcore after effects guy. love the simplicity of a path svg input, looks light aswell

how can I draw my custom one ?

change the svg path at the top

This is so cool! Thank you!!!

Your contribution to react native is commendable

this is what every designer should add up in their list, it's really very useful

Amazing, as a former full time lettering and calligraphy artist, this is very exciting. Wondered btw when we’ll get a 2d version of 3js ❤️

🙏🙏😊

When it will be public?

Beautiful! Can't wait to see how far can this go in UI design!

Is it open to contributions? Are you looking for any outside contributions?

yes of course, always!

SVG paths as rich geometry feels like a really powerful direction. So much room for interaction-heavy UI here.

0:22 😍 my hands are scratching to build music visualizers with this

That's a hot topic I think. There are lot of great visualization shaders out there and I'm really wondering what would happen if we had that geometry information to it (e.g the effect is driven by path geometry) 🤔🤔

wow, fantastic!!

So smoooooth!!

the chess quote timing works here. Cross-platform 2d that feels elegant instead of compromised is the actual hard part. This looks like the move

incredible work 🫡🫡🫡 really excited about this - the way you designed the primitives just opened the doors for a ton of video motion graphics that was really really hard to do in the past 👏👏

Happy Hacking 🫡

I'm getting an error on the playground. But it looks super cool. Would love to try this

@FlutterDev perhaps this could be a source of inspiration for future APIs.

super cool

Super cool :) Curious, is redraw implemented in C++ or TypeScript?

TypeScript (WebGPU)

Interesting! Will this api also work in native environments other than react native? E.g. flutter or swift?

I think so if they support WebGPU. Instead of TypeGPU these could use a more declarative approach for custom effects.

This is awesome. Is there a skill for the 🤖?

Yes I think so 😊

wow

@sebastienlorber Hoi zämme

I read this as red raw - DOPE project though excited to use and test it all

This looks amazing, and I'm really grateful you're building it. I know it's still at early stage, but I'm curious, do you think bindings beyond TypeScript could be possible in the future, like Kotlin, Rust, or other native-friendly APIs?

if the platform support WebGPU, yes I think that can be seriously considered.

That makes sense. Android already has Jetpack WebGPU bindings, so it feels like there could be an interesting path for native Android support in the future. As a native Android dev, I'd be very excited to try it from Kotlin.

@sama @tim_cook @tobi ReactNative (including its web target) + Redraw should form the standard for adhoc/realtime AI interfaces by virtual assistants and chatbots. If you ever tried the RN-driven PS5 dashboard you know it's true. 😎

link

Looks great! Do you plan to open-source it someday?