ทวีตที่ปักหมุด
Built a small web app over the weekend as I was needing a super simple way of framing screenshots.
device.fit
Still a few things I want to add, but figured it was worth sharing now.
English
Liam Forsyth
4.7K posts
Liam Forsyth
@liamdforsyth
Product Designer
Scotland, United Kingdom เข้าร่วม Ağustos 2011
1.6K กำลังติดตาม1.5K ผู้ติดตาม
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
a (rough) iOS Split View concept
there are many reasons this form doesn't work well but the interaction was fun to prototype
English
Liam Forsyth รีทวีตแล้ว
The safe triangle / aim guard
Invisible by design, essential by experience.
The first of many "oh dang, menus are deep" moments while building @bazza_ui menu from scratch.
⊙ Cursor movement → user intent
⊙ Keep menu open, block sibling highlights
⊙ Cancel on intent change
English
Liam Forsyth รีทวีตแล้ว
effortlessly and seamlessly transition between text with <TextMorph/>
built on Intl.Locale and Web Animations API. dependency-free and ready to use in your favourite framework ✨
→ torph.lochie.me
English
Me: I’m going to get a whiteboard so I can map out flows during calls, quickly scribble down ideas…
Also me:
English
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs.
but it's not the same for most web-based dropdown menus. it took me a while to implement this here.
Amazon, macOS, Windows all implement some version of this.
English
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
I wrote about building Agentation with Agentation: benji.org/agentation
English
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
@josesaezmerino Looking so clean 🤩
Can't wait to try it out!
English
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
hook this 3D CSS card up to device rotation? sure! 👨🍳
tip: use the DevTools "Sensors" emulator with "Custom Orientation" to debug/refine before taking it to a real device 👇
jhey ʕ•ᴥ•ʔ@jh3yy
CSS card parallax with pointermove + custom props 🧑🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇
English
Liam Forsyth รีทวีตแล้ว
Liam Forsyth รีทวีตแล้ว
