Pinned Tweet
Introducing @sfinterface/numbers.
Numbers that move the way they should.
A handcrafted React component from The San Francisco Interface.
• ~13kb zipped
• Smooth, blurred transitions
• Fully customizable
• Built for real-world UI
Try it, play with it, and install it:
numbers.sfinterface.com
13
12
597
26,369
Aight, I’ve pretty much finished all the main parts of the skill: WebGL, 3D, drawings, etc.
Now I’m testing a few last things, like high-scale renders and performance. I used to have huge performance issues after adding WebGL, but with a few old scripts I made in the past, the skill seems to be able to take inspiration from them and optimize things way better.
13
2
103
2,781
Here’s a compilation of some of the work done with the skill using WebGL shaders integration (which is part of the skill).
Still a few small details I want to improve, but the results are pretty good overall and it’s starting to get somewhere.
19
14
500
13,324
R retweeted
This was super cool and inspired me redo my own personal website! Added a little bit of an evals twist ☺️📊
meghajoshi.net
Isometric svg inspo from @wheresryan22
updated my personal website, check it out
albinanikiforova.com
also, if you're hiring, i'm open to talk!
3
1
6
885
You can compare the difference below. I modified the skill to fix those small inconsistencies with the pipes and textures, and it looks way more consistent now.
Right now, even though most of the figures look pretty polished, small details can sometimes overlap in the SVG and create visual inconsistencies. I’m working on improving that.
10
190
8,639
Can't imagine how much this opens up in terms of inspiration and design. Can't wait to see what people create with it 🫡
Tried adding WebGL shaders as an option inside the skill and it turned out pretty sick. (one-shotted using the skill)
Asked it to create a Raptor engine from @SpaceX that comes apart on hover, then ignites using WebGL.
Still a prototype, but the result is pretty wild.
8
2
173
9,552
Tried adding WebGL shaders as an option inside the skill and it turned out pretty sick. (one-shotted using the skill)
Asked it to create a Raptor engine from @SpaceX that comes apart on hover, then ignites using WebGL.
Still a prototype, but the result is pretty wild.
24
6
308
18,686
I wasn’t planning to release the isometric skill, but turns out a lot of people want it, dropping it in a few days. (free, open-source)
12
222
8,592
The prompt: "/isometric-objects i would like another svg isometric but this time it will be a physical old screen like Apple first PC with the logo of anthropic on the screen, and we like to have a keyboard with a cable"
39
77
2,407
122,779
I usually create my isometric wireframe SVGs by hand, but I wanted high-end results without spending hours on each one.
So I created a custom AI skill by giving it my knowledge, process, and examples.
And honestly, it went pretty hard. The results look really polished (small details needs to be fixed manually).
25
32
1,141
34,347
Went deeper on the “how I built it” with a solid article breaking down each step, how it works under the hood, and the code behind explained with SVG animations.
11
7
329
12,465
Please 🙏 use skeleton loading or anything smoother than this text if you need to load values such as pricing my eyes are burning right now
2
12
3,615
Added a few inspirations, but I wanted to do something different.
For the documentation, I added Three.js renders of a glass pane with a small light, with the shader effect applied directly to the glass in 3D.
It’s also interactive, so you can play around with the effect instead of just looking at static examples.
3
1
44
3,185