Abracadabra

Abracadabra explores a question I find interesting: how do you build randomness into a statically rendered page? The scatter effect uses seeded random values, meaning the server computes the exact same rotations and offsets that the client will see. No hydration mismatches, no flash of different content. The "randomness" is really just variety – predictable chaos that can be baked into HTML at build time.

The experiment also pushes a variable font across three axes at once: weight, width, and optical size. As characters scatter, they don't just move – they change shape, transitioning from condensed and light to expanded and bold. This creates a density shift that feels more organic than position changes alone.

I started with a constraint: make it work with zero client JavaScript. The CSS-only demonstration uses static styles and a few server-computed inline CSS variables – nothing more. From there, the same JS code that rendered on the server can pick up and add dynamic values that change each interaction cycle, so the patterns reshuffles over time.