Merge branch 'master' into beta-docs

Author: joshuaellis

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["@react-spring/demo", "@react-spring/docs"]
 }

.github/FUNDING.yml

@@ -1,3 +1,4 @@
 # These are supported funding model platforms
 
 open_collective: react-spring
+github: joshuaellis

.meta

@@ -11,7 +11,10 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@react-three/fiber": "^8.0.27",
+    "@react-three/drei": "^9.40.0",
+    "@react-three/fiber": "^8.9.1",
+    "@stitches/react": "^1.2.8",
+    "@use-gesture/react": "^10.2.22",
     "lodash-move": "1.1.1",
     "lodash.clamp": "^4.0.3",
     "lodash.shuffle": "^4.2.0",
@@ -21,9 +24,14 @@
     "react-feather": "^2.0.10",
     "react-use-gesture": "^9.1.3",
     "react-use-measure": "^2.1.1",
-    "styled-components": "^5.3.5",
-    "three": "^0.144.0",
+    "styled-components": "^5.3.6",
+    "three": "^0.146.0",
+    "three-stdlib": "^2.17.3",
     "vec-la": "^1.5.0",
-    "wouter": "^2.8.0-alpha.2"
+    "wouter": "^2.8.1"
+  },
+  "devDependencies": {
+    "@types/lodash.clamp": "^4.0.7",
+    "@types/lodash.shuffle": "^4.2.6"
   }
 }

demo/package.json

@@ -1,5 +1,7 @@
-import React, { useEffect } from 'react'
+import * as React from 'react'
 import { Link, Route } from 'wouter'
+import { Globals } from '@react-spring/web'
+
 import styles from './styles.module.css'
 
 import AnimatingAuto from './sandboxes/animating-auto/src/App'
@@ -16,6 +18,7 @@ import DraggableList from './sandboxes/draggable-list/src/App'
 import ExitBeforeEnter from './sandboxes/exit-before-enter/src/App'
 
 import FlipCard from './sandboxes/flip-card/src/App'
+import FloatingButton from './sandboxes/floating-button/src/App'
 
 import GooBlobs from './sandboxes/goo-blobs/src/App'
 
@@ -35,12 +38,19 @@ import ParallaxSticky from './sandboxes/parallax-sticky/src/App'
 import SimpleTransition from './sandboxes/simple-transition/src/App'
 import Slide from './sandboxes/slide/src/App'
 import SvgFilter from './sandboxes/svg-filter/src/App'
+import SpringBoxes from './sandboxes/springy-boxes/src/App'
 
 import Trail from './sandboxes/trail/src/App'
 import Tree from './sandboxes/tree/src/App'
 
 import Viewpager from './sandboxes/viewpager/src/App'
 
+import WebGlSwitch from './sandboxes/webgl-switch/src/App'
+
+Globals.assign({
+  frameLoop: 'always',
+})
+
 const links = {
   'animating-auto': AnimatingAuto,
   card: Card,
@@ -52,6 +62,7 @@ const links = {
   'draggable-list': DraggableList,
   'exit-before-enter': ExitBeforeEnter,
   'flip-card': FlipCard,
+  'floating-button': FloatingButton,
   'goo-blobs': GooBlobs,
   'image-fade': ImageFade,
   'list-reordering': ListReordering,
@@ -63,10 +74,12 @@ const links = {
   'parallax-sticky': ParallaxSticky,
   'simple-transition': SimpleTransition,
   slide: Slide,
+  'spring-boxes': SpringBoxes,
   'svg-filter': SvgFilter,
   trail: Trail,
   viewpager: Viewpager,
   tree: Tree,
+  'webgl-switch': WebGlSwitch,
 }
 
 const Example = ({ link }) => {
@@ -102,51 +115,4 @@ export default function App() {
       <Route path="/:link">{params => <Example link={params.link} />}</Route>
     </>
   )
-}
-
-import * as Dialog from '@radix-ui/react-dialog'
-import { styled } from '@stitches/react'
-import { animated, useSpring } from '@react-spring/web'
-
-export const AnimatedDialog = ({ isOpen, onOpenCallback }) => {
-  const { x, backgroundColor, opacity } = useSpring({
-    x: isOpen ? '0%' : '-100%',
-    backgroundColor: isOpen
-      ? 'var(--color-whiteblur)'
-      : 'var(--colors-white00)',
-    opacity: isOpen ? 1 : 0,
-    onRest: () => {
-      if (isOpen && onOpenCallback) {
-        onOpenCallback()
-      }
-    },
-  })
-
-  return (
-    <Dialog.Root>
-      <Overlay style={{ backgroundColor }} />
-      <Modal
-        style={{
-          x,
-          backgroundColor: opacity.to(o => `rgba(255,255,255, ${o})`),
-        }}
-      />
-    </Dialog.Root>
-  )
-}
-
-const Modal = styled(animated(Dialog.Content), {
-  position: 'fixed',
-  inset: 0,
-  height: '100vh',
-  width: '30rem',
-  zIndex: '$3',
-})
-
-const Overlay = styled(animated(Dialog.Overlay), {
-  position: 'fixed',
-  inset: 0,
-  width: '100vw',
-  height: '100vh',
-  zIndex: '$2',
-})
+}

demo/public/bright-rain.png

@@ -1,7 +1,15 @@
 {
-  "name": "spring-animating-auto",
+  "name": "Animating Auto",
   "version": "1.0.0",
   "main": "src/index.tsx",
+  "description": "Animating widths with react-spring, use-measure and interpolation",
+  "keywords": [
+    "useSpring",
+    "useMeasure",
+    "auto",
+    "width",
+    "interpolation"
+  ],
   "dependencies": {
     "@react-spring/web": "*",
     "react": "^18.0.0",