🍥kvndy
@kvndy.bsky.social
Unaffiliated ex Mondo Kim’s.
About to make the best chess move you’ve ever seen.
Get on the waitlist
About to make the best chess move you’ve ever seen.
Get on the waitlist
An easing made from a log spiral around one is good for dragging codepen.io/kvndy/full/b...
November 10, 2025 at 12:55 AM
An easing made from a log spiral around one is good for dragging codepen.io/kvndy/full/b...
Can someone help me fit this into my header?
November 9, 2025 at 11:44 PM
Can someone help me fit this into my header?
The best line of code I ever wrote
November 6, 2025 at 2:38 AM
The best line of code I ever wrote
Retargeting in Relative Animation doesn’t replace old animations with new ones that begin where they left off. All animations run to completion, using the easing function to blend together.
In terms of the Trolley Problem, it takes both tracks simultaneously and EVERYBODY DIES
In terms of the Trolley Problem, it takes both tracks simultaneously and EVERYBODY DIES
November 4, 2025 at 2:14 AM
Retargeting in Relative Animation doesn’t replace old animations with new ones that begin where they left off. All animations run to completion, using the easing function to blend together.
In terms of the Trolley Problem, it takes both tracks simultaneously and EVERYBODY DIES
In terms of the Trolley Problem, it takes both tracks simultaneously and EVERYBODY DIES
You talkin’ to me? You talkin’ to me? You talkin’ to me? Then who the hell else are you talkin’ to? You talkin’ to me? Well, I'm the only one here. Who do the f*** do you think you're talking to?
October 31, 2025 at 4:30 PM
You talkin’ to me? You talkin’ to me? You talkin’ to me? Then who the hell else are you talkin’ to? You talkin’ to me? Well, I'm the only one here. Who do the f*** do you think you're talking to?
Willow gave me this pen. In a time of need, she came through for me
October 26, 2025 at 2:02 AM
Willow gave me this pen. In a time of need, she came through for me
This is a staggered easing curve for animating while dragging.
Note how progress starts and ends at one. Ever seen that before?
Animations have to be additive and relative, aka Blend Composition
Note how progress starts and ends at one. Ever seen that before?
Animations have to be additive and relative, aka Blend Composition
October 24, 2025 at 12:54 PM
This is a staggered easing curve for animating while dragging.
Note how progress starts and ends at one. Ever seen that before?
Animations have to be additive and relative, aka Blend Composition
Note how progress starts and ends at one. Ever seen that before?
Animations have to be additive and relative, aka Blend Composition
Used to work here, but not on the rental floor. What happened to the collection was always a mystery. Glad it’s back in New York.
Free with commercials on Youtube
Free with commercials on Youtube
October 19, 2025 at 12:35 AM
Used to work here, but not on the rental floor. What happened to the collection was always a mystery. Glad it’s back in New York.
Free with commercials on Youtube
Free with commercials on Youtube
Push easing stagger for relative and additive animation. Green curve pushes elements forward, in the drag direction. Red curve pushes elements behind, opposite of the drag direction
October 16, 2025 at 5:33 PM
Push easing stagger for relative and additive animation. Green curve pushes elements forward, in the drag direction. Red curve pushes elements behind, opposite of the drag direction
Embarrassing parsing troubles with double newlines being so vaguely defined in the PGN spec www.laws-of-software.com/laws/zawinski/
October 12, 2025 at 1:49 AM
Embarrassing parsing troubles with double newlines being so vaguely defined in the PGN spec www.laws-of-software.com/laws/zawinski/
I’ll tell you what I’d do, man. Render two components at the same time, man.
October 12, 2025 at 12:32 AM
I’ll tell you what I’d do, man. Render two components at the same time, man.
What if, and believe me this is a hypothetical, but what if you need to update two different views for the same state update?
October 11, 2025 at 8:22 PM
What if, and believe me this is a hypothetical, but what if you need to update two different views for the same state update?
Relative Animation scrolljacking working well now. Propagates differently after touchend. Might give it a quick master/detail interface
October 10, 2025 at 1:28 PM
Relative Animation scrolljacking working well now. Propagates differently after touchend. Might give it a quick master/detail interface
Exaggerated timing showing propagation that pushes and pulls siblings away from the dragged element
October 9, 2025 at 1:40 AM
Exaggerated timing showing propagation that pushes and pulls siblings away from the dragged element
Scrolljacking 😱 with the push easing (one to one)
October 8, 2025 at 7:27 PM
Scrolljacking 😱 with the push easing (one to one)
I did not write a bug, it's not true! It's bullshit! I did not write a bug! I did not! Oh hi, Mark.
October 6, 2025 at 10:23 PM
I did not write a bug, it's not true! It's bullshit! I did not write a bug! I did not! Oh hi, Mark.
You can see from this graph why it only works when dragging. Element tracks the pointer, starting at the end keyframe value. Has to be relative because amplitude is determined by the keyframe delta. Has to be additive else animations would restart every time
October 4, 2025 at 6:28 PM
You can see from this graph why it only works when dragging. Element tracks the pointer, starting at the end keyframe value. Has to be relative because amplitude is determined by the keyframe delta. Has to be additive else animations would restart every time
Pondering the Web-Animations-1 spec
October 1, 2025 at 2:20 AM
Pondering the Web-Animations-1 spec
Here we go. “Opacity values outside the range [0,1] are preserved, without clamping, in the serialized specified value.” But I need to know how the computed value is handled, after I figure out what the computed value even is
![16. Serializing <opacity-value>
This applies to the opacity property.
The specified given opacity value is serialized as a <number>, not a <percentage>.
This <number> value is expressed in base ten, with the "." character as decimal separator. The leading zero must not be omitted. Trailing zeroes must be omitted.
Opacity values outside the range [0,1] are preserved, without clamping, in the serialized specified value.
The precision with which opacity values are retained, and thus the number of decimal places in the serialized value, is not defined in this specification, but must at least be sufficient to round-trip integer percentage values. Thus, the serialized value must contain at least two decimal places (unless trailing zeroes have been removed). Values must be rounded towards +∞, not truncated.](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:oenk4cpcdd33kdrnz5sbxvt6/bafkreifsq6o7hsqoyunwcjla6j62tzh3q5qfleccjipf4wkbtwf5yh3fm4@jpeg)
September 30, 2025 at 11:14 PM
Here we go. “Opacity values outside the range [0,1] are preserved, without clamping, in the serialized specified value.” But I need to know how the computed value is handled, after I figure out what the computed value even is
This one has burned quite a few JS animation library devs. There is no scientific notation in CSS. I learned about it from the Web-Animations JS shim
September 30, 2025 at 11:06 PM
This one has burned quite a few JS animation library devs. There is no scientific notation in CSS. I learned about it from the Web-Animations JS shim
Doing research. What I’ve learned so far is they’re not without a sense of humor
September 30, 2025 at 10:54 PM
Doing research. What I’ve learned so far is they’re not without a sense of humor
