Discord Block

A small embed card with one job: turn an anonymous visitor into a member without a page change.

The idea

Discord Block exists to make one state change legible. The interaction starts where the user's attention already is, and ends somewhere they expected to land.

Motion earns its place when it explains state. Everything else is noise in a nice suit.

How it works

A spring with high stiffness and moderate damping does most of the work. No timelines, no keyframes — just two states and a transition between them, so the component stays readable months later.

Everything is driven by React state. Hover, tap, and layout changes are declared on the element itself, which means the animation cannot drift out of sync with what is actually rendered.

Using it

Drop it into any page, restyle it with your own tokens, and tune the spring until the weight feels right for your product. Nothing here depends on global CSS.