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
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
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
demucs:
github.com/adefossez/demucs
whisperx:
github.com/m-bain/whisperx
22/
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
oh and the ascii checkbox + sliders in this demo are from ascii.cnlibs.com/ by @samuelbreznjak
dope stuff
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/…
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!
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:)
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
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/…
this is another fun deep-dive:
css-tricks.com/conjuring-gen…
got this idea from x pro / insta threads, where you can spawn infinite(?) feeds next to each other, and I got curious how that would feel for chat
the answer is: pretty bad haha
my brain is already fried from the constant context switching, and this def makes it worse, but code is cheap so why not try it out:)