daniel petho's banner

daniel petho

@nonzeroexitcode • 7,610 subscribers

design engineer @krea_ai

Shorts

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!

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!

149,669 görüntüleme

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

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

115,745 görüntüleme

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!!

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!!

150,428 görüntüleme

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

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

44,373 görüntüleme

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↴

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↴

57,122 görüntüleme

tiny update————fancy components are now available through the official shadcn registry!

tiny update————fancy components are now available through the official shadcn registry!

80,275 görüntüleme

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

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

59,752 görüntüleme

animating weight... i love variable fonts

animating weight... i love variable fonts

89,233 görüntüleme

marquee along an svg path

marquee along an svg path

57,457 görüntüleme

circular carousel v3————keeping the original transform of the items next: keyboard navs, scroll and a11y

circular carousel v3————keeping the original transform of the items next: keyboard navs, scroll and a11y

42,377 görüntüleme

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

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

15,394 görüntüleme

cube w/ 3d css transform + a bit of motion for the eased drag

cube w/ 3d css transform + a bit of motion for the eased drag

36,771 görüntüleme

circular carousel v5————added keyboard navs, wheel/touchpad control + a11y will finish the docs and publish it soon.

circular carousel v5————added keyboard navs, wheel/touchpad control + a11y will finish the docs and publish it soon.

25,156 görüntüleme

circular carousel v6————added proper css mapping based on angle (here blur + opacity) + experiments with css 3d transforms

circular carousel v6————added proper css mapping based on angle (here blur + opacity) + experiments with css 3d transforms

22,922 görüntüleme

highlight text w/ scroll trigger

Sensitive content

highlight text w/ scroll trigger

17,578 görüntüleme

alrighty! marquee along path component is live on fancy! w/ a bunch of customizations: - scroll based velocity - draggable - slowdown on hover - custom easing - mapping any CSS prop from start to end - docs on how it's built! source code & link in comments↴

alrighty! marquee along path component is live on fancy! w/ a bunch of customizations: - scroll based velocity - draggable - slowdown on hover - custom easing - mapping any CSS prop from start to end - docs on how it's built! source code & link in comments↴

15,762 görüntüleme

new component dropped: changing variable font settings based on cursor proximity source code in comments↴

new component dropped: changing variable font settings based on cursor proximity source code in comments↴

18,138 görüntüleme

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

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`

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`

132,516 görüntüleme • 5 gün önce

making silly things in 2025 to many more in ’26 ——— see u there!

making silly things in 2025 to many more in ’26 ——— see u there!

68,213 görüntüleme • 5 ay önce

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴

188,521 görüntüleme • 1 yıl önce

fancy components is live on product hunt! i appreciate your support if you feel like giving an upvote :) link in the comments↴

fancy components is live on product hunt! i appreciate your support if you feel like giving an upvote :) link in the comments↴

29,216 görüntüleme • 11 ay önce

Daha fazla içerik yok.