Sebastiano Guerriero

@guerriero_se • 19,292 subscribers

Designing. ✦ 40,000 pixel-perfect icons → @nucleoicons

Shorts

423,394 views

50,067 views

116,393 views

106,496 views

32,551 views

56,570 views

225,732 views

62,832 views

203,250 views

51,571 views

90,233 views

13,511 views

17,512 views

18,393 views

Videos

sweetdream.ai

Watch Anya Live

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

Private Show

Join now for exclusive access

Free preview available • Premium content

181,818 views • 2 months ago

120,325 views • 4 months ago

90,408 views • 6 months ago

20,998 views • 1 month ago

24,515 views • 4 months ago

31,784 views • 6 months ago

48,959 views • 11 months ago

61,881 views • 2 years ago

No more content to load

Live Cam

Sebastiano Guerriero

Shorts

Drag enough to collapse it. Demo ↓

Simple animation idea for a sidebar collapse button

Keep your focus effects consistent.

Use motion to reduce UI travel.

UI tip: instead of using gaps in bordered lists, try hiding the borders next to the hovered item.

Skewed, adjacent hover effect. I'll admit this one may be too subtle 😄

I like designing web apps.

Finally managed to build a coded version of this timeline concept 🕹️

How to create a customizable 'flipped' border-radius in CSS ↓

A UX pattern I like: inline dialogs. Instead of blurring the whole background, just push the main content out of focus and replace it with the dialog. Navigation and header stay accessible, and it feels less obtrusive than a standard modal.

UI experiment: expandable steps indicators ✨ Icons → Nucleo Icons

Animated pixel icons. Ask your agent to create something similar using 'RGB Shift' and 'lightbulb flicker' effects.

Quickly prototyped this morphing button idea in Cursor 🪄

Creating isometric illustrations used to be hard. Until I built Fiko, an AI design assistant.

Videos

Watch Anya Live

Icon swapping vs. icon morphing

Make your border blend with the background.

Gradually replacing static images in my portfolio with coded previews. It’s just more fun this way.

All the projects in my portfolio are now 540x540px coded prototypes 👨🏻‍🔬

From static images to coded previews. The journey continues 🛝

Physical time picker™

One of the coolest things about the new Arcade icons is how customizable they are 👇

How to use the :where CSS selector to solve specificity problems ↓