wip: transformation API

docs/docs/guides/GETTING_STARTED.mdx

@@ -90,3 +90,4 @@ Trying to render regular react-native components inside the `<FilamentView>` mig
 render on top of it by using a `position: absolute` view.
 :::
 
+In general react-native-filament leans towards a declartive API that works well with React.

docs/docs/guides/TRANSOFMATION.mdx → docs/docs/guides/TRANSFORMATION.mdx

@@ -5,17 +5,26 @@ sidebar_label: Transformation
 slug: /guides/transformation
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl'
+
 Transforming refers to changing the position, rotation or scale of an object in the scene.
 
+<div class="image-container">
+  <svg xmlns="http://www.w3.org/2000/svg" width="283" height="535">
+    <image href={useBaseUrl("img/demo-transformation.gif")} x="18" y="33" width="247" height="469" />
+    <image href={useBaseUrl("img/frame.png")} width="283" height="535" />
+  </svg>
+</div>
+
 ## Position
 
 By default models are rendered at the origin `[0, 0, 0]`. You can change the position of a model by providing a `position` prop:
 
 ```tsx
 import { Model } from "react-native-filament"
 
-const x = 1
-const y = 1
+const x = 0
+const y = -1
 const z = 0
 
 <Model position={[x, y, z]} />
@@ -30,7 +39,7 @@ You can rotate a model by providing a `rotation` prop:
 ```tsx
 import { Model } from "react-native-filament"
 
-const rotationInDegree = 90;
+const rotationInDegree = 45;
 const angleInRadians = (rotationInDegree * Math.PI) / 180;
 const rotateOnAxis = [0, 1, 0]; // Rotate on the y-axis
 
@@ -80,15 +89,46 @@ function GrowingModel() {
 ```
 
 :::warning
-When disabling the multiplication with the current transform, you'll reset all previous transformations (including rotation and position) and only apply the new transformations.
+When **disabling** the multiplication with the current transform, you'll reset all previous transformations (including rotation and position) and only apply the new transformations.
+:::
+
+:::warning
+When matrix multiplication is **enabled (default)** all transform operations will be applied on a fast refresh. Keep this in mind during development if something starts to look off.
 :::
 
 ## Animate the transform props
 
-You may want to change the transformation props very frequently (e.g. every frame). To avoid performance issues, you should **not** update the props uusing `useState` directly, but use animated values.
+You may want to change the transformation props very frequently (e.g. every frame). To avoid performance issues, you should **not** update the props uusing `useState` directly, but use shared values.
+
+You may know shared values from `reanimated`. We are using the shared values from `react-native-worklets-core`, but they work very similary.
+
+You can create a new shared value using `useSharedValue`:
 
 
 ```tsx
+import { useSharedValue } from "react-native-worklets-core";
+
+function MyScene() {
+  const rotation = useSharedValue(0);
+
+  // ...
+}
 ```
 
-## Transform to unit cube
+You can pass a shared value to any of the transformation props:
+
+```tsx
+function MyScene() {
+  const rotation = useSharedValue({
+
+  });
+
+  return <Model rotation>
+}
+
+
+
+
+## Transform to unit cube
+
+## Apply imperatively using `TransformManager`

docs/src/css/custom.css

@@ -28,3 +28,28 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/* align image to the right */
+.image-container {
+  float: right;
+}
+/* mobile screen; align center */
+@media (max-width: 600px) {
+  .image-container {
+      float: none;
+      text-align: center;
+  }
+}
+/* wider screen; align right again */
+@media (min-width: 600px) and (max-width: 997px) {
+  .image-container {
+    float: right;
+  }
+}
+/* even wider screen but with sidebars; align center cuz we dont have enough space for right */
+@media (min-width: 997px) and (max-width: 1145px) {
+  .image-container {
+    float: none;
+    text-align: center;
+  }
+}

package/example/Shared/src/ChangeMaterials.tsx

@@ -44,7 +44,15 @@ function Renderer() {
         <Camera />
         <DefaultLight />
 
-        <ModelRenderer model={rocket} position={[0, -1, 0]} />
+        <ModelRenderer
+          model={rocket}
+          scale={[1.2, 1.2, 1.2]}
+          rotate={{
+            axis: [0, 1, 0],
+            angleInRadians: (45 * Math.PI) / 180,
+          }}
+          position={[0, -1, 0]}
+        />
       </FilamentView>
       <Button
         title="Change Color"