News for hackers. Stuff that matters.
Re:Add Depth of Field to Screenshots by probabletrain on Friday April 19, 2024 @10:15AM (#40087107)
Oh hey, I made this a couple of days ago!

I initially made this to experiment with 'faking' depth of field in CSS (check out my penultimate tweet for the demo vid and inspiration from shuding_, link at the bottom of the site).

But last night I remembered that ThreeJS exists, so rewrote it using react-three-fiber. This was my first time playing around with it and I'm super impressed, it's incredibly ergonomic.

Edit: not documented, but right-click drag to pan

Re:Add Depth of Field to Screenshots by javierbyte on Friday April 19, 2024 @11:13AM (#40087827)
Very cool! I also made a CSS based fake depth of field inspired by Shuding :)

https://depth-of-field.vercel.app/

Re:Add Depth of Field to Screenshots by mistersquid on Friday April 19, 2024 @11:06AM (#40087753)
Love the interactivity of the UI. Nicely done!

> Edit: not documented, but right-click drag to pan

Confirming undocumented feature. Scratching my head why ctrl-left-click on macOS doesn't enable panning, too.

Re:Add Depth of Field to Screenshots by lupusreal on Friday April 19, 2024 @12:12PM (#40088599)
Right-click to pan is how a lot of video games do it, if not left-click drags. Needing to also use a keyboard key at the same time wouldn't very ergonomic.
Re:Add Depth of Field to Screenshots by mistersquid on Friday April 19, 2024 @12:53PM (#40089139)
> Needing to also use a keyboard key at the same time wouldn't very ergonomic.

Agreed. But maybe better awkward than non-existent? Otherwise, users with no right-click can’t pan.

Didn’t realize ctrl-click and right-click are not always functional equivalents.

Re:Add Depth of Field to Screenshots by smegsicle on Friday April 19, 2024 @09:20PM (#40093716)
> users with no right-click

"here's a nickle, kid. buy yourself a better computer."