The Sang

Design Engineer
•
I create visual, usually with code.

[The Sang @thesang_motion]

Logo redesign & exploration for https://t.co/DMRpezBEs1 is now on @Behance
Give it a look and your feedbacks are very welcome!
Client: @DevHontran - Award-winning Creative Developer
Showcase: https://t.co/ZvI2oQG8TO
#logo #branding #motion

[Csaba Kissi @csaba_kissi]

https://t.co/G1ufoQn9VE - Motion effects, open-source, easy to copy
https://t.co/IydZzus6r4 - Free invoice generator
https://t.co/ypQ6Gg41n5 - Free icon designer
https://t.co/JS5KnGpGyu - UI prompt library for vibe coders
https://t.co/t0T4IPAOU8 - Animated CSS buttons

[码农暖爸 @Delroy715]

如果你的网站或者APP接入的有AI功能，需要显示AI思考动画组件，给兄弟们
推荐一个拿来即用的开源仓库

一个基于 WebGPU 的实时液态玻璃球编辑器（Liquid Orb Editor），可自由定义

在线直接调颜色、流动速度、折射率和外发光，内置 11 种预设，那个液态金属和色散玻璃质感拉满了，建议收藏以防用的时候找不到
链接我放评论区了👇

[Jakub Antalik @Jakubantalik]

Border beam effect is now available for Swift and React Native

Dynamic colors, 5 types, playground, dark & light mode, zero dependencies
https://t.co/DXXKEm9Gf1

[Meng To @MengTo]

I keep seeing the same pattern with Three.js games, shaders, p5.js, and now 3D UI.

Give a coding agent a strong reference, the live URL, and the source repo. It can study the mechanics, recreate them, and give you a working place to experiment.

For this one, I turned a Trevor Noah-inspired book interaction into fictional manuals for Codex, Claude Code, and Cursor.

X post: https://t.co/nzdOPTXhn6

GitHub: https://t.co/IGCBXl5zw9

Original site: https://t.co/KRwqFaVaNT

[Csaba Kissi @csaba_kissi]

Must-know open-source tools for coders

https://t.co/j2KJi9rKSM - terminal UIs in React
https://t.co/A1spHKbCyw - copy/paste CSS/React transitions
https://t.co/YYMB3BXIzG - React funnel charts
https://t.co/aS01DNYOur - Javascript/React animation library
https://t.co/ztpcshhRM1 - open-source headless cms

[Nicholas Arce @nickarceco]

Are safety triangles overkill for menus on the web?

[Manu Arora @mannupaaji]

you can create a sticky navbar that morphs when you scroll with pure CSS, no JS or animation libraries required

𝚑𝚎𝚊𝚍𝚎𝚛 {
𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛-𝚝𝚢𝚙𝚎: 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎;
𝚙𝚘𝚜𝚒𝚝𝚒𝚘𝚗: 𝚜𝚝𝚒𝚌𝚔𝚢;
𝚝𝚘𝚙: 𝟶;
}
@𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 𝚜𝚌𝚛𝚘𝚕𝚕-𝚜𝚝𝚊𝚝𝚎(𝚜𝚝𝚞𝚌𝚔: 𝚝𝚘𝚙) {
.𝚗𝚊𝚟-𝚋𝚊𝚛 {
𝚖𝚊𝚡-𝚠𝚒𝚍𝚝𝚑: 𝟻𝟼𝚛𝚎𝚖;
𝚋𝚘𝚛𝚍𝚎𝚛-𝚛𝚊𝚍𝚒𝚞𝚜: 𝟶.𝟽𝟻𝚛𝚎𝚖;
𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍: 𝚛𝚐𝚋(𝟸𝟻𝟻 𝟸𝟻𝟻 𝟸𝟻𝟻 / 𝟶.𝟿𝟸);
}
}

the browser now knows when a sticky element is stuck, all triggered by one container query

available only in chromium browsers only, no firefox or safari which is a shame

[Andrew Prifer @AndrewPrifer]

Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web.

- Shape morphing
- All properties animatable
- Dynamic refraction and reflection
- Adaptive tint
- Adaptive specular highlight
- Dispersion
- Full html integration
- Super fast layout engine that works across Canvas and html
- Pointer event handling
- Framework and renderer-agnostic low level API
- High level React API
- Ootb @threejs and r3f integration

And lots more.

Read on for implementation details and demos.

[Jakub Antalik @Jakubantalik]

Built an animated Liquid Metal border component library with built-in reflections on neighboring components, multiple styles and color modes, dark & light mode

https://t.co/fxDfTP7Gkl
npm install metal-fx

[The Sang @thesang_motion]

I tried vibe coding to build a simple note-taking app from scratch.

Not because the world needs another note app, just because I wanted to see how far I could push vibe coding while still caring about the details that actually make software feel good. And it turned out pretty good.

Why this project:
I've been a product designer for a while now. Vibe coding is everywhere these days, but most of what I see out there looks... generated. I wonder how far I can bring taste through the prompts. And why "Note". I spend most of my time on the laptop, so I want a fast and simple way to bring my thoughts and intentions out, faster than using pencil, paper or clicking multiple times in traditional app. So here it is.

What it does:
It's a straightforward notes app. You open it, press Enter, write a note, save it. That's it.
But under the hood and on the surface:
→ Rich text editor: bold, lists, code blocks, the works
→ Categories with color-coded cards
→ Dark mode + switchable fonts (realtime preview, select a Google font that suits your language and taste)
→ Export/import your data as JSON, your notes stay yours
→ Undo delete with toast notifications
→ Spring animations on every interaction (Framer Motion + GSAP)
→ Keyboard-first UX — ⌘+Enter to save, Escape to close, Enter to create
→ Local storage with Zustand — no backend, no sign-up, no tracking
→ Note history tracking (created, edited, solved states)

Next things to add:
→ Filter out solved notes
→ Sort by time
→ Pin important notes

Use it for free here:
🔗 https://t.co/giIcL9mBBX
Github (if you want to contribute or custom it your own):
🔗 https://t.co/GuysYvSyw6

If you found it useful, don't forget to bookmark it for easy access.
Any feedback or bug report is highly appreciated to improve the app in the next release.

hashtag#VibeCoding hashtag#Frontend hashtag#UXUI hashtag#BuildInPublic

[David Aerne @meodai]

Just released heerich.js, a tiny voxel engine that renders 3D scenes to SVG 🎨

╬ Boolean ops
◮ Oblique & perspective
𝑥 Zero dependencies
◌ Pure vector output, infinite scaling

Named after Erwin Heerich's geometric cardboard sculptures.

[Pablo Stanley @pablostanley]

u can now use icons and pics from @_phosphoricons and @lummipics

try it: https://t.co/ikOSiHBUOY

[The Sang @thesang_motion]

@harshildesigner @figma Figma

[Meng To @MengTo]

Did a 35-min podcast on how to prompt beautiful designs with @gregisenberg

[Regy @regyperlera]

Excited to finally share what the team and I have been working on... a new homepage for homes, experiences, and services on @Airbnb ✨ Grateful to work with so many talented and amazing people. The amount of love and detail that went into was incredible... already booked a chef for a backyard seafood boil next month!!

[Meng To @MengTo]

I made a guide for prompting impressive UI code

After creating 120 components in a week while working on Aura, listed all the techniques I used: frameworks, styles, framing, html-to-code, image-to-code, etc.

AI is getting so good at creating user interfaces.

[Amit Sheen @amit_sheen]

Following @anatudor idea, I made an (almost) no-JS version of my Proximity Reactions experiment.

All the JS does is pass the mouse position to CSS custom properties, and that's it. All calculations are done in #CSS using native math functions.

All that's left now is to get the mouse position directly into CSS (like evn() variables) and animations like these can be done without JS at all. 🤯

🔗 Live demo on @CodePen: https://t.co/TyCAKYPCIM

[Denislav Jeliazkov @DenisJeliazkov]

I'm an Apple fanboy.

But I admit some of their apps suck.

Here's my brutally honest take on the 9 most popular @Apple apps (as a product designer):

1. Apple Maps

[Alex Barashkov @alex_barashkov]

3D is a great way to spice up your designs and stand out in the field of quite similarly looking websites. It takes more time to design, develop, and optimize it right, but it is totally worth it.

[Mike I Creative Mints @creativemints]

Finally get to show you everything I did for Netra Labs! Had to take care of literally everything — branding, 3D, 2D, overall vibe, logo, app concept, presentation, even video assets! My head’s still buzzing, but it’s time to shift gears and jump into a new project 🚀