daniel petho's banner

daniel petho

@nonzeroexitcode • 8,204 subscribers

design engineer @krea_ai

Shorts

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 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:)

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 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:)

131,361 views

quick breakdown of how to use `offset-path` css prop to build a fancy marquee/carousel that follows any svg path

quick breakdown of how to use `offset-path` css prop to build a fancy marquee/carousel that follows any svg path

92,288 views

making stuff

making stuff

59,201 views

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!

150,773 views

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

116,696 views

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

151,983 views

nested menu + super-hover!

nested menu + super-hover!

32,199 views

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↴

58,316 views

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 views

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,834 views

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

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

18,843 views

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 views

animating weight... i love variable fonts

animating weight... i love variable fonts

89,523 views

marquee along an svg path

marquee along an svg path

57,489 views

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,745 views

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,487 views

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

23,558 views

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 views

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`

137,906 views • 3 months ago

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 views • 1 year ago

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,567 views • 8 months ago

another super-hover demo using the events—sound triggered on enter event sound on🔊!

another super-hover demo using the events—sound triggered on enter event sound on🔊!

13,816 views • 3 months ago

No more content to load