feat: add interactive hinge hero

website/src/pages/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import CodeBlock from '@theme/CodeBlock';
@@ -15,41 +15,60 @@ for (const hinge of hinges) {
 }`;
 
 function HingePreview() {
+  const [angle, setAngle] = useState(Math.PI / 2);
+  const posture = angle < 0.35 ? 'closed' : angle > Math.PI - 0.35 ? 'fullyOpen' : 'partiallyOpen';
+  const angleLabel = `${angle.toFixed(2)} rad`;
+  const fold = ((Math.PI - angle) / 2).toFixed(3);
+
   return (
     <figure
       className={styles.preview}
-      aria-label="Illustration of two display panels joined by a hinge, with example posture and angle labels. These are illustrative, not live device readings."
+      aria-label="Illustrative hinge fold controls with example posture and angle labels. These are not live device readings."
     >
       <div className={styles.previewHeader}>
         <span className={styles.liveDot} />
         <span>NATIVE HINGE STATE</span>
         <span className={styles.previewUnit}>rad</span>
       </div>
       <div className={styles.device}>
-        <div className={styles.provider}>
-          <span className={styles.origin}>partiallyOpen</span>
-          <div className={styles.panes}>
-            <div className={styles.pane}>
+        <div className={styles.hingeStage} style={{ '--hinge-fold': `${fold}rad`, '--hinge-left-fold': `-${fold}rad` }}>
+          <div className={styles.provider}>
+            <span className={styles.origin}>{posture}</span>
+            <div className={`${styles.foldPanel} ${styles.leftPanel}`}>
               <div className={styles.stubTitle} />
               <div className={styles.stub} />
               <div className={styles.stub} />
               <div className={styles.tile} />
             </div>
-            <div className={styles.pane}>
+            <div className={`${styles.foldPanel} ${styles.rightPanel}`}>
               <div className={styles.stubTitle} />
               <div className={styles.tile} />
               <div className={styles.stub} />
               <div className={styles.stub} />
             </div>
-          </div>
-          <div className={styles.fold}>
-            <span>hinge</span>
-          </div>
-          <div className={styles.angleTag}>
-            <span>1.57 rad</span>
+            <div className={styles.fold}>
+              <span>hinge</span>
+            </div>
+            <div className={styles.angleTag}>
+              <span>{angleLabel}</span>
+            </div>
           </div>
         </div>
       </div>
+      <div className={styles.previewControls}>
+        <label htmlFor="hinge-angle">Illustrative fold angle</label>
+        <input
+          id="hinge-angle"
+          type="range"
+          min="0"
+          max={Math.PI}
+          step="0.01"
+          value={angle}
+          onChange={(event) => setAngle(Number(event.target.value))}
+          aria-valuetext={`${angleLabel}, ${posture}`}
+        />
+        <output htmlFor="hinge-angle">{angleLabel}</output>
+      </div>
       <figcaption className={styles.previewCaption}>
         <span>
           <i className={styles.providerKey} /> Hierarchy
@@ -60,7 +79,7 @@ function HingePreview() {
         <span>
           <i className={styles.angleKey} /> Angle
         </span>
-        <small>Illustrative readings</small>
+        <small>Illustrative controls and readings</small>
       </figcaption>
     </figure>
   );
@@ -94,6 +113,9 @@ export default function Home() {
               </Link>
             </div>
             <p className={styles.packageName}>react-native-hinges</p>
+            <p className={styles.reanimatedNote}>
+              Animate from native hinge snapshots with <Link to="/docs/reanimated">the Reanimated integration</Link>.
+            </p>
           </div>
           <HingePreview />
         </section>

website/src/pages/index.module.css

@@ -51,6 +51,15 @@
   color: var(--rr-muted);
   overflow-wrap: anywhere;
 }
+.reanimatedNote {
+  max-width: 420px;
+  margin-top: 16px;
+  color: var(--rr-muted);
+  font-size: 0.88rem;
+}
+.reanimatedNote a {
+  font-weight: 600;
+}
 .preview {
   margin: 0;
   min-width: 0;
@@ -85,30 +94,50 @@
   border-radius: 23px;
   background: var(--ifm-background-color);
 }
+.hingeStage {
+  perspective: 900px;
+}
 .provider {
   height: 262px;
-  border: 1.5px solid #527ef0;
-  border-radius: 12px;
   position: relative;
-  background-image: radial-gradient(var(--rr-border) 0.7px, transparent 0.7px);
-  background-size: 12px 12px;
+  perspective: 900px;
+  transform-style: preserve-3d;
 }
 .origin {
   position: absolute;
   top: 10px;
   left: 10px;
+  z-index: 2;
+  padding: 2px 4px;
+  background: var(--ifm-background-color);
   font: 0.61rem var(--ifm-font-family-monospace);
   color: var(--ifm-color-primary);
 }
-.panes {
+.foldPanel {
   position: absolute;
-  inset: 65px 18px 20px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 42px;
-}
-.pane {
+  top: 0;
+  bottom: 0;
+  width: 50%;
   min-width: 0;
+  padding: 65px 18px 20px;
+  border: 1.5px solid #527ef0;
+  background-color: var(--ifm-background-color);
+  background-image: radial-gradient(var(--rr-border) 0.7px, transparent 0.7px);
+  background-size: 12px 12px;
+  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
+  will-change: transform;
+}
+.leftPanel {
+  left: 0;
+  border-radius: 12px 0 0 12px;
+  transform: rotateY(var(--hinge-left-fold));
+  transform-origin: right center;
+}
+.rightPanel {
+  right: 0;
+  border-radius: 0 12px 12px 0;
+  transform: rotateY(var(--hinge-fold));
+  transform-origin: left center;
 }
 .stubTitle {
   background: var(--rr-border);
@@ -136,6 +165,7 @@
   left: 50%;
   border-left: 2px solid #d57839;
   background: #d5783915;
+  z-index: 1;
 }
 .fold span {
   position: absolute;
@@ -159,6 +189,28 @@
   padding: 2px 7px;
   font: 0.62rem var(--ifm-font-family-monospace);
   color: #6936a7;
+  z-index: 2;
+}
+.previewControls {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 12px;
+  align-items: center;
+  padding: 0 25px 18px;
+  color: var(--rr-muted);
+  font-size: 0.68rem;
+}
+.previewControls label,
+.previewControls output {
+  font: 0.64rem var(--ifm-font-family-monospace);
+}
+.previewControls output {
+  color: #6936a7;
+}
+.previewControls input {
+  accent-color: var(--ifm-color-primary);
+  cursor: ew-resize;
+  min-width: 0;
 }
 .previewCaption {
   display: flex;
@@ -357,10 +409,19 @@
   .previewCaption {
     padding-left: 20px;
   }
-  .panes {
-    gap: 30px;
+  .previewControls {
+    grid-template-columns: 1fr auto;
+  }
+  .previewControls input {
+    grid-column: 1 / -1;
+    grid-row: 2;
   }
   .referenceLink {
     font-size: 0.76rem;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .foldPanel {
+    transition: none;
+  }
+}