An interactive Taiji, embedded with MDX
/ 1 min read
This post is an .mdx file, which means I can drop interactive React components
into the body. Click the symbol below — the two halves separate, rotate, and
rejoin.
The component is a regular .tsx file living at
src/components/taiji/AnimatedTaijiToggle.tsx. To embed it I just import it
at the top of the MDX file and render it like any React component.
Why client:visible?
Astro ships zero JavaScript by default. Components are server-rendered to HTML unless I tell Astro to also send the client-side runtime. The directives:
client:load— hydrate immediately on page load.client:idle— hydrate when the browser goes idle (requestIdleCallback).client:visible— hydrate when the component scrolls into view. Best for most interactive widgets in a blog post.client:only="react"— skip server-rendering entirely, only render on the client.
For a Taiji that the reader has to actively click, client:visible is the
right call: if they never scroll to it, no React, no JS, no cost.
What this means for the blog
.md posts stay as fast static HTML. When I want something interactive — a
gas-cost calculator, a slot-layout visualizer, a small simulation — I rename
the file to .mdx and import the component. Same frontmatter, same prose, same
table-of-contents. Just a different file extension.