Reposted by siobhán
✨ Have you ever heard of Disney’s 12 Basic Principles of Animation? The very first rule, “Squash and Stretch”, can make motion feel *way* more satisfying.
I just dropped a brand-new blog post that shows how I’ve been using this technique in my own work:
www.joshwcomeau.com/animation/sq...
![Comic. [Sign above four people. A person sits at a desk working on a laptop. A person with ponytail is talking to person with white hat. A person with short hair walks away.] SIGN: It has been [-0.00000000000000044] days since our last floating point error](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:cz73r7iyiqn26upot4jtjdhk/bafkreifrf3ayk2vpoka4s35aamdjbub5fcd62ou5zihkzfcj4neth3v27i)
![interface Props_A {
size?: "sm" | "md";
}
function A({ size }: Props_A) {
return <div />;
}
interface Props_B {
size?: "sm" | "md" | "lg";
disabled?: boolean;
}
function B({ size, disabled }: Props_B) {
return <div />;
}
const Components = { A, B } as const;
type PropsMerge<Z extends FC> = Props & ComponentProps<Z>;
interface Props {
variant: keyof typeof Components;
}
function ComponentParent<C extends FC>({
variant,
...props
}: PropsMerge<C>) {
const Component = Components[variant];
return <Component {...props} />;
}
<>
<ComponentParent<typeof A> variant="A" size="sm" />
<ComponentParent<typeof B> variant="B" size="lg" disabled />
</>;](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:tm3abw37alvbgawgg5uaeujr/bafkreiaocht4r5zmpmcjxjt3ewkxhkry5wmnx5vgilmz26dsttcrr22okq)
