Kevin Grajeda's banner
Kevin Grajeda's profile picture

Kevin Grajeda

@k_grajeda • 4,893 subscribers

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

Shorts

bloom + HDR on web looks crazier on an hdr screen

bloom + HDR on web looks crazier on an hdr screen

458,115 views

Difference between HDR and non-HDR screen is huge

Difference between HDR and non-HDR screen is huge

302,273 views

The same landing page, now with animations 👀✨

The same landing page, now with animations 👀✨

597,834 views

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 views

can your vibe coding tool do this? real prod codebase, no setup pain prompt: "Render all the spinner animation patterns from the @​N​o​t​i​f​i​c​a​t​i​o​n 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 @​N​o​t​i​f​i​c​a​t​i​o​n component in a grid layout. render each pattern with its name below it"

144,352 views

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

49,765 views

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

375,544 views

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

49,224 views

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

I finally decided to buy the interactive SVG animations course, let’s see how it goes

I finally decided to buy the interactive SVG animations course, let’s see how it goes

92,383 views

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

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

just one svg filter and a tiny bit of js to get this sticker-style text effect

just one svg filter and a tiny bit of js to get this sticker-style text effect

60,174 views

gooey menu made with svg filters and some little animations, just css and a sprinkle of svg magic

gooey menu made with svg filters and some little animations, just css and a sprinkle of svg magic

51,710 views

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨

Sensitive content

By combining the SVG bloom filter I made with CSS animations, I can create this glowing effect with pure CSS! The web platform has so much to uncover 👀✨

28,580 views

Excited to share a new tool I’m building! It lets you intuitively configure CSS spring easings for smoother and more natural-looking animations

Excited to share a new tool I’m building! It lets you intuitively configure CSS spring easings for smoother and more natural-looking animations

31,043 views

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

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

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

hypnotizing UI
0:27
k_grajeda's profile picture

hypnotizing UI

Kevin Grajeda

392,067 views • 4 months ago

depth map ascii scan
0:42
k_grajeda's profile picture

depth map ascii scan

Kevin Grajeda

111,183 views • 2 months ago

feel the future
0:20
k_grajeda's profile picture

feel the future

Kevin Grajeda

92,003 views • 4 months ago

No more content to load