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 просмотров

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 просмотров

making stuff

making stuff

59,201 просмотров

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 просмотров

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 просмотров

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 просмотров

nested menu + super-hover!

nested menu + super-hover!

32,199 просмотров

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 просмотров

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 просмотров

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 просмотров

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 просмотров

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 просмотров

animating weight... i love variable fonts

animating weight... i love variable fonts

89,523 просмотров

marquee along an svg path

marquee along an svg path

57,489 просмотров

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 просмотров

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 просмотров

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 просмотров

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 просмотров

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 просмотров • 3 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 8 месяцев назад

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 просмотров • 3 месяцев назад

Больше нет контента для загрузки