nsivertsen
commented
3 years ago I just pushed a version that uses manual DOM manipulation for the animation, bypassing the React renderer. This brings in some complexity, but it also means we're not diffing a large array on every render.
Thoughts?
I also pulled in a few small useful dependencies, but would like to discuss with you whether you're happy with that.
This is a very rough first sketch of the console animation. The main purpose is for us to sync on workflow and to have an element to place on the home page as a placeholder. It's not exactly efficient, as it kicks off a React rendering pass multiple times a second.
The next version will start to improve some of that.
Just for fun, I've attached the v0 which we did as a custom element. It is even rougher but performs quite a bit better due to not relying on VDOM diffing.
gitpod-animations.zip
We've also been investigating canvas-based approaches for the text rendering. In the end it boils down to the amount of lines that we want to render in the animation, so we'd like to delay that decision until we've sat down and thought about things like timing and duration of the animation.
You said you wanted to use Tailwind for styling, is that still the plan? We went with Emotion for now as the other pages used that, but could easily switch it over.