feat: create Trance

.vscode/settings.json

@@ -5,8 +5,8 @@
   "editor.formatOnSave": true,
   "files.autoSave": "onFocusChange",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "cSpell.words": [
     "npm",

src/trance/index.tsx

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+
+import { Scene } from './trance'
+
+const Trance = () => {
+  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 (
+    <Canvas
+      camera={{ zoom: 1 }}
+      gl={{ preserveDrawingBuffer: true }}
+      onDoubleClick={handleCanvasClick}
+      ref={canvas}
+      style={{ width: '100%', height: '100%' }}
+    >
+      <Scene />
+      <OrbitControls />
+    </Canvas>
+  )
+}
+
+export { Trance }

src/trance/trance.stories.tsx

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

src/trance/trance.tsx

@@ -0,0 +1,45 @@
+/* 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(`
+  let sc = 0.1
+  let iterations = 2
+  let startScale = 0.5*pow(2, iterations)
+  let os = getSpace()
+
+  for (let i = 0; i<iterations; i++) {
+    mirrorXYZ()
+    displace(sc*startScale,sc*startScale,sc*startScale)
+    startScale *= 0.5
+  }
+
+  let sp = getSpace()
+  let v = smoothstep(nsin(time*10.*length(os) + 5*fractalNoise(30*sp)), .0, 0.25)
+  color(v,v*0.2,v*0.1)
+  box(sc,sc,sc)
+`)
+
+const Scene = () => {
+  const el = useRef<Mesh<BoxGeometry, ShaderMaterial>>()
+
+  useFrame(() => {
+    if (el.current) {
+      el.current.material.uniforms.time.value += 0.025
+    }
+  })
+
+  return (
+    <>
+      <color args={['#fff']} attach='background' />
+      <primitive object={mesh} ref={el} scale={1} />
+    </>
+  )
+}
+
+export { Scene }