had to try this out myself because i'm def planning to use it in the future, and turns out it's super easy to do with the Pointer Lock API
interesting choice by @paper to lock the cursor when changing numerical values
at first it felt a little weird, probs because i'm used to the cursor moving while drag, but i think i actually prefer this approach, especially when i have to drag a value quite far
5
1
99
6,290
interesting choice by @paper to lock the cursor when changing numerical values
at first it felt a little weird, probs because i'm used to the cursor moving while drag, but i think i actually prefer this approach, especially when i have to drag a value quite far
13
2
186
13,549
recently someone shared figma's approach on the tl (can't find the post anymore :/) where the cursor goes out at one edge of the viewport and comes back in from the other
also a really cool approach, but the downside is that you have to keep following the cursor with your eyes to "stay anchored"
1
7
611
if you're wondering where this is useful, you're probably not on tiktok enough to see all the lyrics / auto-captioned videos using this effect
btw, captions here were made with demucs for vocal stem separation + whisperx for transcription
pleasantly surprised you can do fully justified text with just CSS!
with `text-align: justify`, the last line stays aligned to the left
but `text-align-last: justify` lets you justify the final line too, so the text forms a proper block
pretty cool
3
1
39
3,902
demucs:
github.com/adefossez/demucs
whisperx:
github.com/m-bain/whisperx
22/
2
310
pleasantly surprised you can do fully justified text with just CSS!
with `text-align: justify`, the last line stays aligned to the left
but `text-align-last: justify` lets you justify the final line too, so the text forms a proper block
pretty cool
10
10
261
14,907
oh and the ascii checkbox + sliders in this demo are from ascii.cnlibs.com/ by @samuelbreznjak
dope stuff
5
479
interesting, surprisingly few design tools actually let you do this (besides maybe ps and affinity?)
anyway, it's baseline so can be safely used:
developer.mozilla.org/en-US/…
7
574
breakdown of good (imo) autoscroll:
- autoscroll zone relative to the container size, capped at a max size
- map scroll speed towards the edge with a curve (tho linear feels totally fine)
- if drag starts inside the scroll zone, only start scrolling once the pointer actually moves
- for drag and drop, trigger autoscroll when the dragged item enters the zone, not just the cursor
- cap the max speed so no huge jumps
- damp speed changes so the change doesn’t feel abrupt
let me know what i'm missing!
14
8
420
13,722
most of these are more or less implemented in the popular dnd libs
but i got into the rabbit-hole for a project i’m working on that isn’t drag and drop at all, but needed autoscroll and i couldn’t really use any of the existing dnd libs
so i got curious how the big dogs are solving it and basically stole the best ideas from each:)
1
4
924
today's fun rabbit hole: the CSS Painting API
it lets you use javascript to procedurally paint into CSS props like backgrounds, masks, etc
for this demo, i used it to make some generative,(madeup) on-brand patterns, with a different seed on every refresh
6
2
66
3,253
still trying to come up with real use cases besides making things fancy, but in certain cases i think it can replace <canvas />
it's not baseline yet so can't use it in prod, but either way, it's a fun thing to explore:
developer.mozilla.org/en-US/…
1
4
668
this is another fun deep-dive:
css-tricks.com/conjuring-gen…
1
1
315