正在加载视频...
视频加载失败
spritesheets are, and always will be, a fun trick! ⚡ translate with css based on pointer position grace note™ blink included ♪
154,132 次观看 • 1 个月前 •via X (Twitter)
55 条评论

spritesheeted myself for my site ☺️ it has a mood system underneath including easter egg behaviors (eg. try hypnotizing it with your mouse)

haha 😅 that's real good i think where this one wins is because it doesn't try to be the "centerpiece", it's one of those where you've lined it up to be discovered easily, but then lets the user feel like they discovered it 👏

appreciate it Jhey 👊

I did something similar to this but for my dog.

love it - that's so good! 🐶

Least I could do for him. He was a huge personality in our house.

i have no doubts from the pictures 🥲 such a lovely tribute 🫶

and of course, sorry for your loss Boyd, never quite know what the right words are 🙏 but, the "love it – it's so good" were definitely in regards to how well you have delivered that tribute 🫶

Thanks! We miss him as a family but time has healed the immediate loss. Appreciate the kind words both about Pi and the project.

i didn't bookmark the post i saw doing the rounds for this the other day 🤦♂️ but saw a bunch of 'em so if someone has it to reference 🙏

😮

that's the one i was looking for to QT 🙏 different technique but the same concept 💯

I also implemented a similar effect on my website,

had a few questions about this one 🤙 - quick way: generate a video based on a character map and use ffmpeg etc. to split frames and create the sprite (you don't need a 3mb sprite file! compress!) - smoothing: track pointer pos + eased pos. the eased pos plays catch up, use that

I did this in 2005 in Flash.

never got to play with flash 🥲

You would have been the best of us.

ha 😅 i highly doubt that but from what i understand, that was an incredibly fun/creative era

where is beaver demo? my son is requesting access

Wohoo sprites are back baby!

Fun trick also here 😆

Back in my times we used sprite sheets for button hover states.... 🧓

I love sprite sheets. I built a native utility app with sprite sheets being the UI. Haha This one is so good! Love the look and smoothness

sprites are always fun! i did put a little "smoothing" slider in there to try help things out on it 😁

Looks great man

This is so good, the future of avatars

Any tips on smooth sprite animations?

in this case, keep the pointer position as "the target" then lerp/ease a separate value towards it on every frame and use that eased value to drive the spritesheet frame you’re smoothing the input, not the sprite itself 🤙

Wait, I need this for my website

wow super cool! love the blink 😉

How did you generate the sprite in the first place? When i tried using gpt image or gemini, it keep duplicating the same image.

the skill with ai is prepping the journey 1. base image for your character 2. character map for your character 3. gaze rig for your character if you try jumping to 3, that's the issue, you need good reference material, and a good model Krea + GPT 2.0 for this one 🤙

Thank you 🙏 I'm trying to make one for

ahh yes - you should be able to generate one for that little character 💯 try prompting for the prompts too my gaze rig prompt would start something like: 9x9 spritesheet head-rotation gaze rig for this character (map + basic images attached) and then i'll detail the angles

Got it. Thanks a ton! The character is my son. Gotta pay him royalist

Damn thats clean! I love the double blink, adds so much depth. Will this be added sooner or later to the /index?

Didn’t know you vibes with beavers like that

it's a gopher 🥲

The blinking is a really nice touch. I did something similar with this character. It is quite painstaking work doing it with a spritesheet.

If I could follow one fucking person on X it'll be you man, you're the fucking goat

whoah - appreciate that 💯🙏 doin' what i can to try and post a little more again. i've been trying to collect/curate all my work over the years into one spot on my site, it's been takin' a minute 🙇♂️

There's so much alpha in what you post, it's just an endless sea of knowledge. Thank you for your posts

Is that on Codepen somewhere? 😍

omg who is lil fella

a little mascot i'm toying with for a project 😁

really cool

It does look fun

I LOVE playing with spritesheets. Such a simple and effective trick

Very very clever 👏 well done

how many images you generated for this one?

Thats some neat sprite management.

The explanation on this one is superb!!! 🤯🙌

Hmm, interesting and cool! I should try to do something like that on our platform.

This is way too good... waaay too good.

how ? can you share a tutorial ?

