تغريدة مثبتة
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 أُعيد تغريده
