react-spring, ordering and decoupling

.storybook/stories/List.stories.tsx

@@ -1,23 +1,26 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { a } from '@react-spring/three'
 
-import { Flex, Box } from '../../src'
+import { Flex, Box, SpringBox } from '../../src'
 import { Setup } from '../Setup'
 
 const List = ({ width, height }: { width: number; height: number }) => {
   return (
-    <Flex position={[-width / 2, height / 2, -2]} size={[width, height, 0]} flexDirection="row" flexWrap="wrap">
-      {new Array(8).fill(undefined).map((_, i) => (
-        <Box margin={0.3} key={i} width={1.6} height={2} centerAnchor>
-          {(width, height) => (
-            <mesh>
-              <planeBufferGeometry args={[width, height]} />
-              <meshBasicMaterial color={0x0000ff} />
-            </mesh>
-          )}
-        </Box>
-      ))}
-    </Flex>
+    <group position={[-width / 2, height / 2, 0]}>
+      <Flex size={[width, height, 0]} flexDirection="row" flexWrap="wrap">
+        {new Array(8).fill(undefined).map((_, i) => (
+          <SpringBox margin={0.3} key={i} width={1.6} height={2} centerAnchor>
+            {(width, height) => (
+              <a.mesh scale-x={width} scale-y={height}>
+                <planeBufferGeometry args={[1, 1]} />
+                <meshBasicMaterial color={0x0000ff} />
+              </a.mesh>
+            )}
+          </SpringBox>
+        ))}
+      </Flex>
+    </group>
   )
 }
 

.storybook/stories/NestedBoxes.stories.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from '../../src'
+import { AutomaticBox, Box, Flex } from '../../src'
 import React, { Suspense } from 'react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { Box as Cube } from '@react-three/drei'
@@ -9,26 +9,28 @@ import { Setup } from '../Setup'
 const Block = ({ color1, color2 }: { color1: Color; color2: Color }) => {
   return (
     <Box alignItems="flex-start" marginLeft={20} flexDirection="row">
-      <Box centerAnchor>
+      <AutomaticBox centerAnchor>
         <Cube args={[100, 100, 1]}>
-          <meshBasicMaterial color={color1} />
+          <meshBasicMaterial toneMapped={false} color={color1} />
         </Cube>
-      </Box>
-      <Box centerAnchor>
+      </AutomaticBox>
+      <AutomaticBox centerAnchor>
         <Cube args={[100, 100, 1]}>
-          <meshBasicMaterial color={color2} />
+          <meshBasicMaterial toneMapped={false} color={color2} />
         </Cube>
-      </Box>
+      </AutomaticBox>
     </Box>
   )
 }
 
 const NestedBoxes = ({ width, height }: { width: number; height: number }) => {
   return (
-    <Flex flexDirection="row" position={[-200, 50, -200]}>
-      <Block color1="red" color2="green" />
-      <Block color1="yellow" color2="white" />
-    </Flex>
+    <group position={[-200, 50, -200]}>
+      <Flex flexDirection="row">
+        <Block color1="red" color2="green" />
+        <Block color1="yellow" color2="white" />
+      </Flex>
+    </group>
   )
 }
 

.storybook/stories/Rotation.stories.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex } from '../../src'
+import { Box, AutomaticBox, ReferenceGroup, Flex } from '../../src'
 import React, { Suspense } from 'react'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 
@@ -25,28 +25,37 @@ const Rotation = ({
   const width = 3
   const height = 1
   return (
-    <Flex
-      size={[width, height, 0]}
-      flexDirection="row"
-      flexWrap="no-wrap"
-      alignItems="stretch"
-      justifyContent="flex-start"
-      position={[0, 0, 3]}
-      rotation={[degToRad(rotationX), degToRad(rotationY), degToRad(rotationZ)]}
-    >
-      <Box rotation={[degToRad(rotationXItems), degToRad(rotationYItems), degToRad(rotationZItems)]} centerAnchor>
-        <mesh scale={1}>
-          <boxGeometry args={[1, 1, 1]} />
-          <meshBasicMaterial color="red" wireframe />
-        </mesh>
-      </Box>
-      <Box rotation={[degToRad(rotationXItems), degToRad(rotationYItems), degToRad(rotationZItems)]} centerAnchor>
-        <mesh>
-          <boxGeometry args={[1, 1, 1]} />
-          <meshBasicMaterial color="orange" wireframe />
-        </mesh>
-      </Box>
-    </Flex>
+    <group position={[0, 0, 3]} rotation={[degToRad(rotationX), degToRad(rotationY), degToRad(rotationZ)]}>
+      <Flex
+        size={[width, height, 0]}
+        flexDirection="row"
+        flexWrap="no-wrap"
+        alignItems="stretch"
+        justifyContent="flex-start"
+      >
+        <ReferenceGroup>
+          <AutomaticBox
+            rotation={[degToRad(rotationXItems), degToRad(rotationYItems), degToRad(rotationZItems)]}
+            centerAnchor
+          >
+            <mesh>
+              <boxGeometry args={[1, 1, 1]} />
+              <meshBasicMaterial color="red" wireframe />
+            </mesh>
+          </AutomaticBox>
+
+          <AutomaticBox
+            rotation={[degToRad(rotationXItems), degToRad(rotationYItems), degToRad(rotationZItems)]}
+            centerAnchor
+          >
+            <mesh>
+              <boxGeometry args={[1, 1, 1]} />
+              <meshBasicMaterial color="orange" wireframe />
+            </mesh>
+          </AutomaticBox>
+        </ReferenceGroup>
+      </Flex>
+    </group>
   )
 }
 

package.json

@@ -102,6 +102,7 @@
     "prettier": "^2.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "@react-spring/three": "^9.2.4",
     "rimraf": "^3.0.2",
     "rollup": "^2.26.10",
     "rollup-plugin-filesize": "^9.1.1",
@@ -113,6 +114,7 @@
   "peerDependencies": {
     "@react-three/fiber": ">=6.0",
     "react": "^17.0.2",
+    "@react-spring/three": "^9.2.4",
     "three": ">=0.126"
   }
 }