feat: add examples page

.codesandbox/ci.json

@@ -17,6 +17,7 @@
     "/demo/src/sandboxes/list-reordering",
     "/demo/src/sandboxes/masonry",
     "/demo/src/sandboxes/multistage-transition",
+    "/demo/src/sandboxes/noise",
     "/demo/src/sandboxes/notification-hub",
     "/demo/src/sandboxes/parallax",
     "/demo/src/sandboxes/parallax-sticky",
@@ -32,5 +33,5 @@
     "/demo/src/sandboxes/viewpager",
     "/demo/src/sandboxes/webgl-switch"
   ],
-  "node": "14"
+  "node": "16"
 }

demo/CONTRIBUTING.md

@@ -0,0 +1,42 @@
+# Contributing a new demo
+
+## Preface
+
+Thanks for being interested in contributing a demo! Before you read more, have you read the [contribution guide](https://github.com/pmndrs/react-spring/blob/master/CONTRIBUTING.md) for the repo? If not, give it a look first!
+
+## What is required
+
+All our demos are based on codesandbox templates for react-typescript. If you're going to contribute a
+demo, you can either copy an existing demo and tweak it or create a new one in codesandbox, export the
+code and add it to the repo.
+
+You should ensure your demo follows the same structure as the other ones:
+
+```
+- public
+- src
+- - App.tsx
+- - index.tsx
+- .pretterrc
+- package.json
+- tsconfig.json // I would copy this from an existing one
+- thumbnail.png
+```
+
+This is the minimum we require as the `App.tsx` is used to integrate with our demo hub via vite in the repo.
+
+A few other things to remember
+
+### Thumbnail
+
+This should be included to showcase your work best! Make sure it's a 16:9 ratio.
+
+### Package.json
+
+Ensure there's a clear name and description as these appear on the website. You should also use `tags` to highlight keywords
+especially the `react-spring` hooks you've used.
+
+## When you're ready
+
+When you've finished adding your code, open a PR explaining the example, why you think it should be included
+and most importantly, include a sandbox link so it can be looked at and admired!

demo/src/App.jsx

@@ -9,6 +9,7 @@ import AnimatingAuto from './sandboxes/animating-auto/src/App'
 import Card from './sandboxes/card/src/App'
 import CardsStack from './sandboxes/cards-stack/src/App'
 import Chain from './sandboxes/chain/src/App'
+import CssGradients from './sandboxes/css-gradients/src/App'
 import CssKeyframes from './sandboxes/css-keyframes/src/App'
 import CssVariables from './sandboxes/css-variables/src/App'
 
@@ -30,6 +31,7 @@ import Masonry from './sandboxes/masonry/src/App'
 import MultiStageTransition from './sandboxes/multistage-transition/src/App'
 
 import NotificationHub from './sandboxes/notification-hub/src/App'
+import Noise from './sandboxes/noise/src/App'
 
 import Parallax from './sandboxes/parallax/src/App'
 import ParallaxVert from './sandboxes/parallax-vert/src/App'
@@ -57,9 +59,9 @@ const links = {
   card: Card,
   'cards-stack': CardsStack,
   chain: Chain,
+  'css-gradients': CssGradients,
   'css-keyframes': CssKeyframes,
   'css-variables': CssVariables,
-  'decay-rocket': DecayRocket,
   'draggable-list': DraggableList,
   'exit-before-enter': ExitBeforeEnter,
   'flip-card': FlipCard,
@@ -69,18 +71,20 @@ const links = {
   'list-reordering': ListReordering,
   masonry: Masonry,
   'multistage-transition': MultiStageTransition,
+  noise: Noise,
   'notification-hub': NotificationHub,
   parallax: Parallax,
-  'parallax-vert': ParallaxVert,
   'parallax-sticky': ParallaxSticky,
+  'parallax-vert': ParallaxVert,
+  'rocket-decay': DecayRocket,
   'simple-transition': SimpleTransition,
   slide: Slide,
   'smile-grid': SmileGrid,
-  'spring-boxes': SpringBoxes,
+  'springy-boxes': SpringBoxes,
   'svg-filter': SvgFilter,
   trail: Trail,
-  viewpager: Viewpager,
   tree: Tree,
+  viewpager: Viewpager,
   'webgl-switch': WebGlSwitch,
 }
 
@@ -104,17 +108,36 @@ export default function App() {
         <div className={styles.page}>
           <h1>React Spring demos</h1>
           <h2>Sandboxes</h2>
-          <div className={styles.linkList}>
+          <ul className={styles.linkList}>
             {Object.keys(links).map(link => (
-              <Link key={link} href={`/${link}`}>
-                {/*eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                <a className={styles.link}>{link}</a>
-              </Link>
+              <li key={link}>
+                <DemoCard link={link}>{link}</DemoCard>
+              </li>
             ))}
-          </div>
+          </ul>
         </div>
       </Route>
       <Route path="/:link">{params => <Example link={params.link} />}</Route>
     </>
   )
 }
+
+const DemoCard = ({ children, link }) => {
+  return (
+    <Link key={link} href={`/${link}`}>
+      <a>
+        <figure className={styles.card}>
+          <div className={styles['image-container']}>
+            <img
+              src={`https://raw.githubusercontent.com/pmndrs/react-spring/master/demo/src/sandboxes/${link}/thumbnail.png`}
+              placeholder="empty"
+              loading="lazy"
+              alt={children}
+            />
+          </div>
+          <figcaption className={styles.title}>{children}</figcaption>
+        </figure>
+      </a>
+    </Link>
+  )
+}

demo/src/sandboxes/noise/package.json

@@ -31,4 +31,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}

demo/src/sandboxes/noise/public/index.html

@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<meta name="theme-color" content="#000000">
-	<!--
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-	<!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +19,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-	<title>React App</title>
-</head>
+    <title>React App</title>
+  </head>
 
-<body>
-	<noscript>
-		You need to enable JavaScript to run this app.
-	</noscript>
-	<div id="root"></div>
-	<!--
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +35,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>

demo/src/sandboxes/noise/src/App.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import { animated, useSpring, easings } from '@react-spring/web'
 
 import styles from './styles.module.css'

demo/src/sandboxes/noise/src/index.tsx

@@ -1,12 +1,12 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
 
-import App from "./App";
+import App from './App'
 
-const rootElement = document.getElementById("root")!;
+const rootElement = document.getElementById('root')!
 createRoot(rootElement).render(
   <StrictMode>
     <App />
   </StrictMode>
-);
+)

demo/src/sandboxes/noise/src/styles.module.css

@@ -14,5 +14,5 @@
   position: absolute;
   background-size: 256px 256px;
   background-repeat: repeat;
-  background: url("https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png");
+  background: url('https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png');
 }

demo/src/sandboxes/noise/tsconfig.json

@@ -1,14 +1,9 @@
 {
-    "include": [
-        "./src/**/*"
-    ],
-    "compilerOptions": {
-        "strict": true,
-        "esModuleInterop": true,
-        "lib": [
-            "dom",
-            "es2015"
-        ],
-        "jsx": "react-jsx"
-    }
-}
+  "include": ["./src/**/*"],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": ["dom", "es2015"],
+    "jsx": "react-jsx"
+  }
+}

demo/src/styles.module.css

@@ -1,6 +1,6 @@
 .page {
   margin: 0 auto;
-  max-width: 720px;
+  max-width: 1200px;
   padding: 40px 16px 0;
   min-height: 100vh;
   display: flex;
@@ -24,14 +24,55 @@
   border: 1px solid #333;
 }
 
-.link {
-  display: inline-block;
-  color: inherit;
-}
-
 .linkList {
   display: grid;
-  justify-content: flex-start;
-  gap: 10px;
+  gap: 20px;
+  margin: 0;
+  padding: 0;
   margin-bottom: 80px;
+  grid-template-columns: repeat(3, minmax(120px, 1fr));
+  width: 100%;
+}
+
+.linkList li {
+  list-style: none;
+}
+
+.linkList a {
+  text-decoration: none;
+}
+
+.card {
+  background-color: #f0f2f4;
+  margin: 0;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.image-container {
+  overflow: hidden;
+  position: relative;
+  aspect-ratio: 16 / 9;
+}
+
+.image-container > * {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.title {
+  font-size: -apple-system, system-ui, sans-serif;
+  padding: 20px;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  color: #1b1a22;
 }

docs/app/components/AspectRatio.tsx

@@ -53,5 +53,8 @@ const Container = styled('div', {
     transform: 'translate(-50%, -50%)',
     minWidth: '100%',
     maxWidth: '100%',
+    minHeight: '100%',
+    maxHeight: '100%',
+    objectFit: 'cover',
   },
 })