Kevin Grajeda's banner

Kevin Grajeda

@k_grajeda • 9,981 subscribers

(hypnotic ui) (motion pilled) (founding) design engineer @dessn_ai

Shorts

$Centering a div is now a solved problem Developers have been testing the fleX Alpha stealth model. today, we are announcing it as DIV-1 Flash DIV-1 Flash delivers frontier-level alignment at a fraction of the cost Full benchmarks bellow ↓$

Centering a div is now a solved problem Developers have been testing the fleX Alpha stealth model. today, we are announcing it as DIV-1 Flash DIV-1 Flash delivers frontier-level alignment at a fraction of the cost Full benchmarks bellow ↓

627,283 просмотров

excited to release RadiusNet-31P, a SOTA open-weight model capable of predicting the perfect concentric border radius with 99.999% accuracy trained for 5,000 epochs so designers never have to subtract again ↓ open weights in the first reply

excited to release RadiusNet-31P, a SOTA open-weight model capable of predicting the perfect concentric border radius with 99.999% accuracy trained for 5,000 epochs so designers never have to subtract again ↓ open weights in the first reply

229,277 просмотров

comment clustering animation instead of a straight line, each comment follows an arc so the transition feels more natural

comment clustering animation instead of a straight line, each comment follows an arc so the transition feels more natural

172,760 просмотров

bloom + HDR on web looks crazier on an hdr screen

bloom + HDR on web looks crazier on an hdr screen

459,258 просмотров

made it even better! now it uses: - native squircles/superellipse using css `corner-shape` property - separate X/Y border radii, so corners flatten horizontally without losing their height

made it even better! now it uses: - native squircles/superellipse using css `corner-shape` property - separate X/Y border radii, so corners flatten horizontally without losing their height

108,899 просмотров

The same landing page, now with animations 👀✨

The same landing page, now with animations 👀✨

598,363 просмотров

Difference between HDR and non-HDR screen is huge

Difference between HDR and non-HDR screen is huge

302,838 просмотров

You can create a cool gooey effect by combining a blur and fade animations between icons with a high-contrast parent element

You can create a cool gooey effect by combining a blur and fade animations between icons with a high-contrast parent element

377,350 просмотров

can your vibe coding tool do this? real prod codebase, no setup pain prompt: "Render all the spinner animation patterns from the @Notification component in a grid layout. render each pattern with its name below it"

can your vibe coding tool do this? real prod codebase, no setup pain prompt: "Render all the spinner animation patterns from the @Notification component in a grid layout. render each pattern with its name below it"

144,352 просмотров

funny thing, my original loader doesn’t use keyframes. it just loops opacity with a per‑pixel delay array + a duration param. less flexible than keyframes, but gives a different effect here is one example in case you want to try to understand it hahah: { name: 'wave-lr', // Delay in ms before each of the 9 grid cells starts animating, indexed as [0,1,2], [3,4,5], [6,7,8] delays: [0, 100, 200, 0, 100, 200, 0, 100, 200], // How long (ms) each cell takes to fade in/out duration: 600, ]

funny thing, my original loader doesn’t use keyframes. it just loops opacity with a per‑pixel delay array + a duration param. less flexible than keyframes, but gives a different effect here is one example in case you want to try to understand it hahah: { name: 'wave-lr', // Delay in ms before each of the 9 grid cells starts animating, indexed as [0,1,2], [3,4,5], [6,7,8] delays: [0, 100, 200, 0, 100, 200, 0, 100, 200], // How long (ms) each cell takes to fade in/out duration: 600, ]

134,435 просмотров

I created this gooey text effect animation using View Transitions and the blur + contrast method

I created this gooey text effect animation using View Transitions and the blur + contrast method

172,510 просмотров

create generators instead of a fixed illustration library each style is a reusable component so anyone on the team can easily create their own variations

create generators instead of a fixed illustration library each style is a reusable component so anyone on the team can easily create their own variations

22,605 просмотров

stress testing our chat streaming with 128 conversations at the same time

stress testing our chat streaming with 128 conversations at the same time

13,504 просмотров

can your vibe coding tool do this? implement a specific component while actually following your codebase's design system

can your vibe coding tool do this? implement a specific component while actually following your codebase's design system

50,212 просмотров

made a paper prototype for this flower animation

made a paper prototype for this flower animation

15,603 просмотров

paper-like animations for our flower illustration

paper-like animations for our flower illustration

14,128 просмотров

did we need animations through the whole onboarding? probably not but it looks cool and i made them inside dessn so it counts as qa

did we need animations through the whole onboarding? probably not but it looks cool and i made them inside dessn so it counts as qa

50,539 просмотров

Instead of using a blurry navbar, how about we try a frosted glass navbar? 👀

Instead of using a blurry navbar, how about we try a frosted glass navbar? 👀

109,418 просмотров

If you missed it, Rive published an amazing technical blog post on how they built real vector feathering. It breaks down why default blur rendering doesn't cut it anymore and how they solved it. Super impressive work that shows why Rive is becoming so important

If you missed it, Rive published an amazing technical blog post on how they built real vector feathering. It breaks down why default blur rendering doesn't cut it anymore and how they solved it. Super impressive work that shows why Rive is becoming so important

66,920 просмотров

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

This works by using: - normal border-radius - a ::before pseudo-element for the tab - Framer Motion to handle the drag interaction - a tiny distance-to-progress calculation that updates the border radii

This works by using: - normal border-radius - a ::before pseudo-element for the tab - Framer Motion to handle the drag interaction - a tiny distance-to-progress calculation that updates the border radii

309,845 просмотров • 2 месяцев назад

smart corner morph animation

smart corner morph animation

277,632 просмотров • 2 месяцев назад

hypnotizing UI

hypnotizing UI

394,716 просмотров • 9 месяцев назад

depth map ascii scan

depth map ascii scan

111,885 просмотров • 6 месяцев назад

ok new iteration, hopefully the last one hahah because of how squircles work, if the two curves use a superellipse value different from 1 (a normal ellipse) they can look weird when we try to create this continuous curve effect, the curves look too disconnected so to fix that, the closer the tab gets to the corner and the 2 curves start “touching each other” we start changing the superellipse from a squircle to a normal circle

ok new iteration, hopefully the last one hahah because of how squircles work, if the two curves use a superellipse value different from 1 (a normal ellipse) they can look weird when we try to create this continuous curve effect, the curves look too disconnected so to fix that, the closer the tab gets to the corner and the 2 curves start “touching each other” we start changing the superellipse from a squircle to a normal circle

41,924 просмотров • 2 месяцев назад

feel the future

feel the future

92,234 просмотров • 9 месяцев назад

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