react-server/examples/react-three/App.jsx at fde9af32d95babb0a346c351ca50fb841a604bf8 · lazarv/react-server · GitHub

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
28
29
30
31
32
33
34
35
36
37
import ThreeScene from "./ThreeScene";

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>React Three Fiber + React Server</title>
        <style>{`
          * { margin: 0; padding: 0; box-sizing: border-box; }
          body { background: #111; color: #fff; font-family: sans-serif; }
          .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            gap: 1rem;
          }
          h1 { font-size: 1.5rem; opacity: 0.8; }
          p { font-size: 0.9rem; opacity: 0.5; }
        `}</style>
      </head>
      <body>
        <div className="container">
          <h1>React Three Fiber + @lazarv/react-server</h1>
          <ThreeScene />
          <p>
            A rotating cube rendered with @react-three/fiber inside a React
            Server Component tree.
          </p>
        </div>
      </body>
    </html>
  );
}