feat: create tapioca

package.json

@@ -15,7 +15,7 @@
   "scripts": {
     "prepare": "husky install",
     "preinstall": "npx -y only-allow pnpm",
-    "dev": "start-storybook -p 6006",
+    "dev": "storybook dev -p 6006",
     "deploy:storybook": "gh-pages -d storybook-static",
     "lint": "pnpm eslint && pnpm stylelint",
     "lint:fix": "pnpm eslint --fix && pnpm stylelint --fix",

src/tapioca/index.tsx

@@ -0,0 +1,59 @@
+import React, { useRef } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+
+import { Scene } from './tapioca'
+
+import NoiseTexture from './noise-texture.svg?url'
+
+interface Props {
+  scale: number
+}
+
+const Tapioca = ({ scale = 5 }: Props) => {
+  const canvas = useRef<HTMLCanvasElement>(null)
+
+  const handleCanvasClick = () => {
+    if (canvas.current) {
+      canvas.current.toBlob(
+        (blob) => {
+          const link = document.createElement('a')
+          link.href = window.URL.createObjectURL(blob as Blob)
+          link.download = `${Date.now().toString()}.webp`
+          link.click()
+        },
+        'image/webp',
+        1
+      )
+    }
+    return false
+  }
+
+  return (
+    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
+      <Canvas
+        camera={{ zoom: 1 }}
+        gl={{ preserveDrawingBuffer: true }}
+        onDoubleClick={handleCanvasClick}
+        ref={canvas}
+        style={{ width: '100%', height: '100%' }}
+      >
+        <Scene scale={scale} />
+        <OrbitControls />
+      </Canvas>
+      <div
+        style={{
+          opacity: 0.7,
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          inset: 0,
+          pointerEvents: 'none',
+          backgroundImage: `url(${NoiseTexture})`
+        }}
+      ></div>
+    </div>
+  )
+}
+
+export { Tapioca }

src/tapioca/tapioca.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Tapioca } from '.'
+
+const meta: Meta<typeof Tapioca> = {
+  title: '3D/Tapioca',
+  component: Tapioca,
+  argTypes: {
+    scale: {
+      control: { type: 'number' }
+    }
+  }
+}
+
+export default meta
+
+type Story = StoryObj<typeof Tapioca>
+
+export const Primary: Story = {}

src/tapioca/tapioca.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable react/no-unknown-property */
+import React, { useRef } from 'react'
+import { useFrame } from '@react-three/fiber'
+import { BoxGeometry, Mesh, ShaderMaterial } from 'three'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { sculptToThreeJSMesh } from 'shader-park-core'
+
+const mesh: Mesh = sculptToThreeJSMesh(`
+  setMaxIterations(3);
+
+  displace(mouse.x*-.2, mouse.y*-.2, 0)
+
+  let s = getSpace();
+  let r = getRayDirection();
+  let n1 = noise(r*1 + vec3(0, 0.3, time*.1));
+  let n = noise(s + vec3(0, 0, time*.1) + n1);
+
+  metal(n*.5 + .5);
+  shine(n*.5 + .75);
+
+  color(normal*.1 + vec3(5, 0, 0));
+
+  boxFrame(vec3(4), .1);
+  mixGeo(0)
+  sphere(.25 + n*.5);
+`)
+
+interface Props {
+  scale: number
+}
+
+const Scene = ({ scale }: Props) => {
+  const el = useRef<Mesh<BoxGeometry, ShaderMaterial>>()
+
+  useFrame(() => {
+    if (el.current) {
+      el.current.material.uniforms.time.value += 0.075
+    }
+  })
+
+  return (
+    <>
+      <color args={['#fadbb3']} attach='background' />
+      <primitive object={mesh} ref={el} />
+    </>
+  )
+}
+
+export { Scene }