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
2
99
6,347
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,632
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,919
was curious if it handles emojis and it does! super cool work man
i think these two demos are broken?
(i’m on iOS)
2
1
332
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
262
14,940
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
421
13,737
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,260
if you use a video e.g. as a hero background, Low Power Mode disables autoplay and WebKit puts a native play button over the video instead
which is annoying because:
1. it looks completely out of place
2. the button may not even be tappable because of the content layered over it
and since you can’t force autoplay with video.play(), one workaround is to show the first frame as an image over the video, then hide it once the video actually starts playing
so in worst case, the user just gets a static hero image:)
16
12
630
131,694
recently came across this submission form where you upload a video + add your credit, but the final preview was just a static example image and example name
and i thought how much better would this experience have been if my actual upload was rendered with the credit updating whatever typed in the form
1
1
24
1,518
a frequent design trick is to use a neutral, semi-transparent text color, so it blends nicely across different toned backgrounds
but when the text is paired with an icon and the same color is applied to the svg, some icons have "stronger spots" where their paths intersect
and some llms (not all:)) will insist on fixing this by switching to a solid color tinted for that specific bg
but then you need a different color for every background, which defeats the original goal
a super easy solution is to keep using the neutral, solid color, and apply opacity separately to the whole svg instead
it turns out with the 1st version, every separate stroke/path is semi-transparent, so overlapping parts are painted multiple times and their opacity stacks
with the 2nd version, all paths are rendered together first using the solid color, then the opacity is applied to the completed icon as a whole!
9
4
285
18,715
quick breakdown of how to use `offset-path` css prop to build a fancy marquee/carousel that follows any svg path
15
62
1,356
94,031
sad that i don't use these nearly as much as I should, since they are widely supported now
eg this video is from my old-old portfolio where I was doing it with react because didn't know any better lol
btw here is a wonderful writeup on how to use it
joshwcomeau.com/css/has/
1
12
1,036
this effect can be achieved using only css by combining the :has() and :not() pseudo-classes:
`.menu:has(.item:hover) .item:not(:hover) {
filter: blur(8px);
}`
which simply means:
when a menu has a hovered item, blur every item inside it that isn't being hovered
12
10
326
19,215
another super-hover demo!
gonna milk this for a while because it works well for lists, especially work-section for portfolios
and it’s just fun to play with:)
15
19
501
21,576
browsers mostly skip updating hover state while you scroll
so I made super-hover, a tiny utility library that checks what's under your cursor every frame!
`pnpm add super-hover`
41
87
2,660
138,640
a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus
using 16px is probably the best solution, but it can feel a bit heavy in tight UIs
a clever workaround is to keep the font-size at 16px and scale the input down with CSS!
28
58
1,559
150,990
switching a linear-gradient backdrop to an eased one is such a fast & small tweak, but it makes the whole thing feel so much nicer!
9
5
265
16,592
border-radius can actually take up to eight values, like:
`10% 5% 5% 10% / 5% 10% 10% 5%`
that lets you create all kinds of organic shapes in pure css!
add blur + some layering and you can make it into a fancy glowing loader
6
31
907
44,948
a slowed & reverb pedal simulator so you can create dreamy edits from your fav songs :)
(made for #figmamakeathon)
link in the comments↴
7
3
97
5,799
you don't need threejs for this effect
just apply `perspective` to the container and animate each image with `translate3d(...)` over time, where depth is something like `z = z0 + speed * dt` and the rest is handled by the browser
easy to map opacity or scroll to speed too
26
86
1,941
117,374
in zoomable / canvas-like apps (like Krea Nodes) small controls get frustratingly hard to click when zoomed out
adding an invisible hit area keeps them (a tiny bit) easier to use without changing visuals
super easy with an `::after` pseudo element, `position:absolute` + sizing
9
4
221
15,831
just published a figma plugin for the cmyk halftone editor!
originally made this as a separate website for a figma hackathon and it felt weird not having it as a plugin there too, so here it is
link in the comments↴
23
73
1,469
58,440
added some quality-of-life improvements to the cmyk emulator based on all the feedback:
— more pre-filter settings, incl. better blur
— better antialiasing, so (hopefully) no more artifacts
— .mp4 record, on mobile too!
thanks y'all!!
25
388
4,631
152,288
added video support to the cmyk halftone emulator!
— it's free & open-source, runs in your browser
— tons of controls
— can record the result into webm or just save the image
22
206
2,789
61,391
tiny update————fancy components are now available through the official @shadcn registry!
20
35
1,167
80,685
circular carousel v8————made some performance tweaks & rooted out some nasty re-renderings
so now it should run w/ ~60fps on a mid-tier mobile device!
2
42
3,424
circular carousel v6————added proper css mapping based on angle (here blur + opacity)
+ experiments with css 3d transforms
12
22
613
23,659
CMYK Halftone Printer Emulator
made w/ Figma Make for the @figma makeathon
there are lots of customizable options to try, and it’s all shader-based, so it should run nice and smooth!
link in the comments↴
1
2
35
2,536
circular carousel v5————added keyboard navs, wheel/touchpad control + a11y
will finish the docs and publish it soon.
12
27
623
25,569
