1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// JSX can be used in the client val thanks to this magic comment
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import { motion } from "https://esm.sh/framer-motion";
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
// import "https://esm.sh/tldraw/tldraw.css";
export function App() {
return (
<>
<motion.div
className="box"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
whileHover={{ scale: 1.2 }}
whileTap={{ scale: 1.1 }}
drag="x"
dragConstraints={{ left: -100, right: 100 }}
/>
</>
);
}
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);