Загрузка видео...

Не удалось загрузить видео

На главную

🧲 Just shipped: Tables that split, stretch, and snap into place.

316,719 просмотров • 12 дней назад •via X (Twitter)

Комментарии: 41

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

The old tables were static. For the new Operate, I wanted something that reacts to how you actually use it. It’s a context panel inside chat. If you give it more width, you’re probably focusing on the data, so it shows you more to work through. Keep it narrow and it becomes a quick glance while you’re talking to an Operate agent. Then I started thinking about how to make that transition feel more pleasant. Here’s how it works: • Widen the panel and a deal row breaks apart. Amount moves out from the deal name into its own column, and close date separates from the owner. • It’s magnetic, not instant. Near the breakpoint, the amount strains toward its column and the name gives a little, then it snaps across. Narrowing is the exact mirror: they pull toward each other, then click back together. • Column icons enter from the side their data came from. Empty dashes travel too. • Snaps, no bounce. The name is back in place the moment the amount lets go. • Long names truncate instead of pushing the table sideways. The video shows Deals, but Accounts, People, Meetings, and Tasks all use the same table now. And it respects reduced motion.

Фото профиля Ash
Ash12 дней назад

@operate_gtm Love the way it adds columns and switches up the layout!

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

@operate_gtm Yesss, that part was so fun to get right. 🫶

Фото профиля Joe Bell
Joe Bell12 дней назад

@operate_gtm I'm still genuinely gobsmacked you shipped this straight to prod yourself — incredible work

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

@operate_gtm Couldn’t have gotten here without you helping me along the way. 🫂

Фото профиля Deckard
Deckard12 дней назад

@operate_gtm Stop it. It's too good...

Фото профиля dario
dario12 дней назад

@operate_gtm Super cool, did you start from scratch on that table component or did you start from some framework? I’ve been struggling with tables in our product and have been looking around 👀

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

@operate_gtm Not from scratch. Our static table was already built on @tan_stack Table + Virtual (both headless). I revamped its UI first, then added the dynamic layout, interactions and motion on top, all custom.

Фото профиля Anish B Ghosh
Anish B Ghosh12 дней назад

@operate_gtm wow its soo cool!! we need more creativity like this in the UI space. you earned a follower, man.

Фото профиля Gregor
Gregor12 дней назад

@operate_gtm snap threshold tuning is where i lost a week. too tight and it fights you, too loose and nothing feels sticky.

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

@operate_gtm Hahaha yes. This was exactly it. Tiny changes and suddenly the whole thing either feels perfect or completely wrong

Фото профиля Sihoon Kim
Sihoon Kim12 дней назад

@operate_gtm Is there an open source for it? I really wanna use this!

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

@operate_gtm Not yet, it's part of Operate's codebase right now. If there's enough interest I'll pull it out into something shareable.

Фото профиля Prerna Kashyap
Prerna Kashyap12 дней назад

@operate_gtm Love it!

Фото профиля Masudur Rahman
Masudur Rahman12 дней назад

@operate_gtm Beautiful work 🔥

Фото профиля Alex Krasikov
Alex Krasikov12 дней назад

@operate_gtm whooot

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

@operate_gtm I’ll take this as approval 🙂‍↕️

Фото профиля Melody Shar 🌸
Melody Shar 🌸12 дней назад

@operate_gtm Smooth

Фото профиля Sid
Sid12 дней назад

@operate_gtm Clean

Фото профиля Aditya Das
Aditya Das12 дней назад

@operate_gtm love that staggered movement ❤️

Фото профиля adeeb
adeeb12 дней назад

@jamesm @operate_gtm That snapping is so cool

Фото профиля anthony
anthony12 дней назад

@operate_gtm very curious, does this happen to be powered by layoutId's? or is this done in raw css/js

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

@operate_gtm Not layoutId. Raw CSS and a small hook, with two breakpoints.

Фото профиля tegha
tegha12 дней назад

@operate_gtm Those animations are like cutting butter 😫😫

Фото профиля kon
kon12 дней назад

@operate_gtm all i see are the dance moves

Фото профиля heyflo
heyflo12 дней назад

@operate_gtm Wow, ok, this is sick! 👏

Фото профиля Ashish
Ashish12 дней назад

@operate_gtm banger

Фото профиля Alvish 🧙‍♂️
Alvish 🧙‍♂️12 дней назад

@operate_gtm Appreciate it, bhai!

Фото профиля Sean Cope
Sean Cope12 дней назад

@operate_gtm banger

Фото профиля Yolo
Yolo12 дней назад

@operate_gtm Tables that split, stretch and snap — finally, spreadsheet yoga.

Фото профиля Harsh Singh
Harsh Singh12 дней назад

@operate_gtm this animation is legit eye candy

Фото профиля abdelhamid ouglhacen
abdelhamid ouglhacen12 дней назад

@operate_gtm That’s insane 🔥🔥🔥🔥

Фото профиля Wuraola | Product Designer
Wuraola | Product Designer12 дней назад

@operate_gtm Really cool!

Фото профиля Laabidi
Laabidi12 дней назад

@operate_gtm super smooth 😍

Фото профиля Kolbe Yang
Kolbe Yang12 дней назад

@operate_gtm You can tell how well-designed a web app is by its tables 😉. Not a sexy component but incredibly nuanced.

Фото профиля Marc
Marc12 дней назад

@operate_gtm This animation is too good 🤯

Фото профиля Ayush Barnwal | Building
Ayush Barnwal | Building12 дней назад

@operate_gtm this is the unsexy ship that actually matters tables behaving is how an app starts feeling expensive

Фото профиля Solopreneur Dad
Solopreneur Dad12 дней назад

@operate_gtm That is oddly satisfying

Фото профиля Bill Xie
Bill Xie12 дней назад

@operate_gtm tables that split, stretch restraint looks intentional. clean release.

Фото профиля Omar
Omar12 дней назад

@operate_gtm clean

Фото профиля Victor Sango
Victor Sango12 дней назад

@operate_gtm That snap animation is quite satisfying!

Похожие видео