Set up tailwind and get basic layout

components/Box.tsx

@@ -1,29 +0,0 @@
-import { useRef, useState } from 'react'
-import { useFrame } from '@react-three/fiber'
-import { Box as NativeBox } from '@react-three/drei'
-
-export default function Box(props) {
-  const mesh = useRef()
-
-  const [hovered, setHover] = useState(false)
-  const [active, setActive] = useState(false)
-
-  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
-
-  return (
-    <NativeBox
-      args={[1, 1, 1]}
-      {...props}
-      ref={mesh}
-      scale={active ? [6, 6, 6] : [5, 5, 5]}
-      onClick={() => setActive(!active)}
-      onPointerOver={() => setHover(true)}
-      onPointerOut={() => setHover(false)}
-    >
-      <meshStandardMaterial
-        attach="material"
-        color={hovered ? '#2b6c76' : '#720b23'}
-      />
-    </NativeBox>
-  )
-}

components/ImagePlane.tsx

@@ -0,0 +1,22 @@
+import * as THREE from "three";
+import React, { Suspense } from "react";
+import { useLoader } from "@react-three/fiber";
+
+interface ImagePlaneProps {
+  url: string;
+};
+
+/**
+ * Draw an image on a plane geometry.
+ */
+export default function ImagePlane(props: ImagePlaneProps) {
+  const texture = useLoader(THREE.TextureLoader, props.url);
+  return (
+    <Suspense fallback={null}>
+      <mesh rotation-z={-Math.PI / 2}>
+        <planeBufferGeometry attach="geometry" args={[150, 30]} />
+        <meshBasicMaterial attach="material" map={texture} />
+      </mesh>
+    </Suspense>
+  );
+}

components/RotatingBox.tsx

@@ -0,0 +1,41 @@
+import * as THREE from "three";
+import { useRef, useState } from "react";
+import { useFrame, GroupProps } from "@react-three/fiber";
+import { RoundedBox } from "@react-three/drei";
+
+/**
+ * Component to draw rotating boxes.
+ */
+export default function RotatingBox(props: JSX.IntrinsicElements["mesh"]) {
+  const mesh = useRef<THREE.Mesh>(null);
+
+  // Track whether the boxes are hovered over and clicked
+  const [hovered, setHover] = useState(false);
+  const [active, setActive] = useState(false);
+
+  // Rotate the meshes every animation frame
+  useFrame(() => {
+    mesh.current.rotation.y += 0.01;
+    mesh.current.rotation.x += 0.01;
+  });
+
+  return (
+    <RoundedBox
+      // @ts-ignore
+      args={[1, 1, 1]}
+      radius={0.1}
+      smoothness={4}
+      {...props}
+      ref={mesh}
+      scale={active ? [3, 3, 3] : [2, 2, 2]}
+      onClick={() => setActive(!active)}
+      onPointerOver={() => setHover(true)}
+      onPointerOut={() => setHover(false)}
+    >
+      <meshStandardMaterial
+        attach="material"
+        color={hovered ? "#2b6c76" : "#720b23"}
+      />
+    </RoundedBox>
+  );
+}

components/ThreeCanvas.tsx

@@ -1,20 +1,21 @@
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls } from "@react-three/drei";
 
-import Box from "./Box";
+import RotatingBox from "./RotatingBox";
+import ImagePlane from "./ImagePlane";
 
+/**
+ * React three fiber canvas with spectrogram drawing.
+ */
 export default function ThreeCanvas() {
   return (
-    <>
     <Canvas camera={{ position: [0, 0, 35] }}>
       <ambientLight intensity={2} />
       <pointLight position={[40, 40, 40]} />
-        <Box position={[10, 0, 0]} />
+      <ImagePlane url={"spectrogram_example.png"} />
-        <Box position={[-10, 0, 0]} />
+      <RotatingBox position={[-12, 0, 1]} />
-        <Box position={[0, 10, 0]} />
+      <RotatingBox position={[-4, 0, 1]} />
-        <Box position={[0, -10, 0]} />
+      <RotatingBox position={[4, 0, 1]} />
-        <OrbitControls />
+      <RotatingBox position={[12, 0, 1]} />
     </Canvas>
-    </>
   );
 }

package-lock.json

@@ -20,6 +20,7 @@
       "devDependencies": {
         "@types/node": "^18.11.9",
         "@types/react": "^18.0.25",
+        "@types/three": "^0.146.0",
         "autoprefixer": "^10.4.13",
         "postcss": "^8.4.19",
         "tailwindcss": "^3.2.4",
@@ -599,6 +600,21 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "node_modules/@types/three": {
+      "version": "0.146.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.146.0.tgz",
+      "integrity": "sha512-75AgysUrIvTCB054eQa2pDVFurfeFW8CrMQjpzjt3yHBfuuknoSvvsESd/3EhQxPrz9si3+P0wiDUVsWUlljfA==",
+      "dev": true,
+      "dependencies": {
+        "@types/webxr": "*"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.0.tgz",
+      "integrity": "sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "5.43.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.43.0.tgz",
@@ -4506,6 +4522,21 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "@types/three": {
+      "version": "0.146.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.146.0.tgz",
+      "integrity": "sha512-75AgysUrIvTCB054eQa2pDVFurfeFW8CrMQjpzjt3yHBfuuknoSvvsESd/3EhQxPrz9si3+P0wiDUVsWUlljfA==",
+      "dev": true,
+      "requires": {
+        "@types/webxr": "*"
+      }
+    },
+    "@types/webxr": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.0.tgz",
+      "integrity": "sha512-IUMDPSXnYIbEO2IereEFcgcqfDREOgmbGqtrMpVPpACTU6pltYLwHgVkrnYv0XhWEcjio9sYEfIEzgn3c7nDqA==",
+      "dev": true
+    },
     "@typescript-eslint/parser": {
       "version": "5.43.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.43.0.tgz",

package.json

@@ -21,6 +21,7 @@
   "devDependencies": {
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
+    "@types/three": "^0.146.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.19",
     "tailwindcss": "^3.2.4",

pages/_app.tsx

@@ -1,6 +1,7 @@
-import '../styles/globals.css';
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }
 

pages/index.tsx

@@ -3,12 +3,11 @@ import Image from "next/image";
 
 import ThreeCanvas from "../components/ThreeCanvas";
 
-
+// import styles from "../styles/Home.module.css";
-import styles from "../styles/Home.module.css";
 
 export default function Home() {
   return (
-    <div className={styles.container}>
+    <>
       <Head>
         <title>Riffusion</title>
         <meta
@@ -18,16 +17,29 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className={styles.main}>
+      <div className="bg-sky-900 flex flex-row min-h-screen text-white">
-        <h1 className={styles.title}>Riffusion</h1>
+        <div className="w-1/3 min-h-screen">
-
-        <p className={styles.description}>Hello</p>
-
           <ThreeCanvas />
+        </div>
 
+        <main className="w-2/3 min-h-screen p-4">
+          <h2 className="text-2xl text-center text-white text-right">
+            Riffusion
+          </h2>
+
+          <div className="pl-20">
+            <p className="pb-32 text-lg text-gray-400">A jazz pianist playing a classical concerto</p>
+            <p className="pb-32 text-xl text-gray-300">Taylor Swift with a tropical beat</p>
+            <p className="pb-32 text-3xl text-white">Justin Bieber Anger Rap</p>
+            <p className="pb-32 text-m text-gray-400">
+              new york city rap, with a dust storm, cinematic score, dramatic,
+              composition, tons of energy, brutalistic
+            </p>
+          </div>
         </main>
 
         {/* <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> */}
       </div>
+    </>
   );
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

styles/Home.module.css

@@ -6,126 +6,4 @@
 
 .main {
   min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer {
-  display: flex;
-  flex: 1;
-  padding: 2rem 0;
-  border-top: 1px solid #eaeaea;
-  justify-content: center;
-  align-items: center;
-}
-
-.footer a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-grow: 1;
-}
-
-.title a {
-  color: #0070f3;
-  text-decoration: none;
-}
-
-.title a:hover,
-.title a:focus,
-.title a:active {
-  text-decoration: underline;
-}
-
-.title {
-  margin: 0;
-  line-height: 1.15;
-  font-size: 4rem;
-}
-
-.title,
-.description {
-  text-align: center;
-}
-
-.description {
-  margin: 4rem 0;
-  line-height: 1.5;
-  font-size: 1.5rem;
-}
-
-.code {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 0.75rem;
-  font-size: 1.1rem;
-  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-    Bitstream Vera Sans Mono, Courier New, monospace;
-}
-
-.grid {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 800px;
-}
-
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  max-width: 300px;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3;
-  border-color: #0070f3;
-}
-
-.card h2 {
-  margin: 0 0 1rem 0;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  font-size: 1.25rem;
-  line-height: 1.5;
-}
-
-.logo {
-  height: 1em;
-  margin-left: 0.5rem;
-}
-
-@media (max-width: 600px) {
-  .grid {
-    width: 100%;
-    flex-direction: column;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .card,
-  .footer {
-    border-color: #222;
-  }
-  .code {
-    background: #111;
-  }
-  .logo img {
-    filter: invert(1);
-  }
 }

styles/globals.css

@@ -1,30 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-  body {
-    color: white;
-    background: black;
-  }
-}

tailwind.config.js

@@ -1,11 +1,23 @@
 /** @type {import('tailwindcss').Config} */
+
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 module.exports = {
     content: [
-        "./pages/**/*.{js,ts,jsx,tsx}",
+        './pages/**/*.{js,ts,jsx,tsx}',
-        "./components/**/*.{js,ts,jsx,tsx}",
+        './components/**/*.{js,ts,jsx,tsx}',
+        './app/**/*.{js,ts,jsx,tsx}',
     ],
     theme: {
-        extend: {},
+        extend: {
+            fontFamily: {
+                'sans': [
+                    '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
+                    'Ubuntu', 'Cantarell', 'Fira Sans',
+                    ...defaultTheme.fontFamily.sans
+                ],
+            },
+        },
     },
     plugins: [],
 }

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -19,12 +15,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": [
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-    "next-env.d.ts",
+  "exclude": ["node_modules"]
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
 }