This is an example of how you can embed interactive React components (web apps) into your blog posts using MDX.
The Word Drift Component
Words suspended in a liminal void, shared across all visitors. Release your own and watch as others do the same.
How It Works
The component is built with React and imported at the top of this MDX file:
import WordDrift from '../../components/WordDrift.tsx';
Then embedded in the content using the client:load directive to ensure it’s interactive:
<WordDrift client:load />
Creating Your Own Web Apps
You can create any React component in the src/components/ directory and import it into your blog posts or pages. This opens up possibilities for:
- Interactive visualizations - Data viz, generative art, animations
- Tools and utilities - Calculators, converters, mini-apps
- Games and experiments - Simple interactive experiences
- Dynamic content - Real-time data, API integrations
The liminal theme provides a perfect backdrop for experimental, contemplative interfaces.
Next Steps
Try creating your own component! The existing design system (colors, typography, spacing) is all available through CSS variables, so your components can seamlessly integrate with the site’s aesthetic.