Shu

@shuding • 63,016 subscribers

@vercel. @v0, @nextjs, @aisdk, Satori, SWR. Don’t talk unless you can improve the silence.

Shorts

107,487 views

26,801 views

168,523 views

148,674 views

36,914 views

Videos

sweetdream.ai

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Private Show

Join now for exclusive access

Free preview available • Premium content

798,163 views • 1 month ago

26,801 views • 9 days ago

225,564 views • 7 months ago

633,478 views • 3 years ago

267,521 views • 2 years ago

278,642 views • 3 years ago

56,892 views • 6 months ago

89,905 views • 1 year ago

113,015 views • 2 years ago

28,069 views • 6 months ago

56,737 views • 1 year ago

No more content to load

Live Cam

Shu

Shorts

HTML/CSS is Turing complete, so why not compile programs to plain HTML/CSS and runs with zero bytes of JavaScript?

Next version of Satori: grid/block/inline/inline-block, fixed/sticky, float/clear, list-style, counter, word-spacing, overflow, aspect-ratio, order, visibility, outline, mix-blend-mode, isolation, paint-order, z-index, 3D transform, conic gradient, calc(), min/max/clamp()

There’s an idea that I’ve been casually working on for quite a while: bringing shaders to React. Here’s my first demo:

COBE v2 is here: markers, arcs, attach any HTML elements, Infinite ideas.

You can just ship things.

Videos

Watch Anya Live

I trained a small model to do syntax highlighting in the browser with GPU. Meet gpu-lexer from Vercel Labs: Small (27.5KB), fast (runs on WebGPU), and language-agnostic (model guesses the syntax). It is experimental and built for learning!

Next version of Satori: grid/block/inline/inline-block, fixed/sticky, float/clear, list-style, counter, word-spacing, overflow, aspect-ratio, order, visibility, outline, mix-blend-mode, isolation, paint-order, z-index, 3D transform, conic gradient, calc(), min/max/clamp()

COBE v2: reliably use any DOM elements as markers & arcs. CSS transition, animation, filter, interactivity, ...all just work. High perf, zero deps, still ~5KB. Coming soon.

With Next.js’ app directory and that new idea, it takes less than 150 lines of code to create this. ~4 lines are actually related to animation (wrapping the tree with &lt;Satori&gt;):

In the latest `swr@beta`, you can seamlessly move data fetching between client-side and server-side, or both, in an RSC framework like Next.js: 🔸Client only: useSWR(key, fetcher) 🔹Mixed: useSWR(key, fetcher) + RSC-provided data 🔸Server only: useSWR(key) + RSC-provided data

Statically typed links are coming to Next.js: ◆ Autocompletion ◆ Error on invalid routes ◆ Prevents 404 links during build ◆ Dynamic, catch-all, and optional catch-all routes ◆ Works with both `pages` and `app` ◆ No extra configuration needed!

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:

Sorry but here’s a snippet to add that to any website:

Let there be light

Liquid glass was cute. Here’s liquid diamond:

Write simple shaders for HTML elements (Chrome only):

With Next.js’ app directory and that new idea, it takes less than 150 lines of code to create this. ~4 lines are actually related to animation (wrapping the tree with <Satori>):