Welcome to the underground. This post demonstrates MDX with code highlighting and an embedded React component that matches our retro aesthetic.
Syntax Highlighting
1// retro-greeting.ts
2export function greet(name: string): string {
3 const message = `> ACCESS GRANTED: Welcome, ${name}`;
4 return message;
5}
6
7console.log(greet("Hacker"));
Interactive Component
Try clicking the buttons. This is rendered directly inside MDX using a React component.
That's it. Happy hacking.
Section 1: Origins
The roots of motion in interfaces go back decades. We keep it subtle.
Level 2: Micro-animations
Tiny motions guide attention without shouting.
Section 2: Composition
Components can be interactive and expressive.
Level 2: State
Manage local state in islands to keep things fast.
Section 3: Epilogue
Wrap your story with a clear takeaway and links for further reading.