docs(Rotate): adjust card perspective spring easing

Author: robertpenner

packages/react-components/react-motion-components-preview/stories/src/Rotate/RotateCardFlip.stories.tsx

@@ -24,14 +24,15 @@ const useClasses = makeStyles({
     gap: '20px',
   },
   cardWrapper: {
-    perspective: '800px',
+    perspective: '500px',
     perspectiveOrigin: 'center center',
     height: '140px',
     cursor: 'pointer',
     transition: 'transform 0.2s ease',
     borderRadius: tokens.borderRadiusMedium,
     '&:hover': {
       transform: 'translateY(-2px)',
+      backgroundColor: tokens.colorNeutralBackground1,
     },
   },
   patternCard: {
@@ -42,6 +43,7 @@ const useClasses = makeStyles({
     justifyContent: 'center',
     gap: tokens.spacingVerticalS,
     border: `2px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground1,
   },
   patternTitle: {
     color: tokens.colorNeutralForeground1,
@@ -63,7 +65,7 @@ const useClasses = makeStyles({
   },
 });
 
-const curveSpringRelaxed = `linear(0.000 0.000%, 0.06073 1.000%, 0.1215 2.000%, 0.1822 3.000%, 0.2429 4.000%, 0.3036 5.000%, 0.3644 6.000%, 0.4251 7.000%, 0.4858 8.000%, 0.5465 9.000%, 0.6073 10.00%, 0.6680 11.00%, 0.7287 12.00%, 0.7895 13.00%, 0.8502 14.00%, 0.9109 15.00%, 0.9716 16.00%, 1.031 17.00%, 1.085 18.00%, 1.131 19.00%, 1.168 20.00%, 1.198 21.00%, 1.220 22.00%, 1.234 23.00%, 1.241 24.00%, 1.242 25.00%, 1.236 26.00%, 1.226 27.00%, 1.211 28.00%, 1.192 29.00%, 1.171 30.00%, 1.148 31.00%, 1.124 32.00%, 1.099 33.00%, 1.074 34.00%, 1.050 35.00%, 1.028 36.00%, 1.007 37.00%, 0.9880 38.00%, 0.9714 39.00%, 0.9572 40.00%, 0.9455 41.00%, 0.9364 42.00%, 0.9298 43.00%, 0.9255 44.00%, 0.9235 45.00%, 0.9236 46.00%, 0.9255 47.00%, 0.9291 48.00%, 0.9339 49.00%, 0.9399 50.00%, 0.9467 51.00%, 0.9541 52.00%, 0.9618 53.00%, 0.9697 54.00%, 0.9774 55.00%, 0.9849 56.00%, 0.9920 57.00%, 0.9986 58.00%, 1.004 59.00%, 1.010 60.00%, 1.014 61.00%, 1.018 62.00%, 1.020 63.00%, 1.022 64.00%, 1.024 65.00%, 1.024 66.00%, 1.024 67.00%, 1.023 68.00%, 1.022 69.00%, 1.021 70.00%, 1.019 71.00%, 1.017 72.00%, 1.014 73.00%, 1.012 74.00%, 1.009 75.00%, 1.007 76.00%, 1.004 77.00%, 1.002 78.00%, 1.000 79.00%, 0.9984 80.00%, 0.9968 81.00%, 0.9954 82.00%, 0.9943 83.00%, 0.9935 84.00%, 0.9929 85.00%, 0.9925 86.00%, 0.9923 87.00%, 0.9924 88.00%, 0.9926 89.00%, 0.9930 90.00%, 0.9935 91.00%, 0.9941 92.00%, 0.9948 93.00%, 0.9956 94.00%, 0.9964 95.00%, 0.9972 96.00%, 0.9979 97.00%, 0.9987 98.00%, 0.9994 99.00%, 1.000 100.0%)`;
+const curveSpringRelaxed = `linear(0.000 0.000%, 0.02760 1.000%, 0.05519 2.000%, 0.08279 3.000%, 0.1104 4.000%, 0.1380 5.000%, 0.1656 6.000%, 0.1932 7.000%, 0.2208 8.000%, 0.2484 9.000%, 0.2760 10.00%, 0.3036 11.00%, 0.3312 12.00%, 0.3587 13.00%, 0.3863 14.00%, 0.4139 15.00%, 0.4415 16.00%, 0.4691 17.00%, 0.4967 18.00%, 0.5243 19.00%, 0.5519 20.00%, 0.5795 21.00%, 0.6071 22.00%, 0.6347 23.00%, 0.6623 24.00%, 0.6899 25.00%, 0.7175 26.00%, 0.7451 27.00%, 0.7727 28.00%, 0.8003 29.00%, 0.8279 30.00%, 0.8555 31.00%, 0.8831 32.00%, 0.9107 33.00%, 0.9383 34.00%, 0.9659 35.00%, 0.9935 36.00%, 1.020 37.00%, 1.042 38.00%, 1.059 39.00%, 1.072 40.00%, 1.080 41.00%, 1.084 42.00%, 1.083 43.00%, 1.080 44.00%, 1.073 45.00%, 1.065 46.00%, 1.055 47.00%, 1.044 48.00%, 1.033 49.00%, 1.022 50.00%, 1.011 51.00%, 1.002 52.00%, 0.9933 53.00%, 0.9864 54.00%, 0.9809 55.00%, 0.9770 56.00%, 0.9746 57.00%, 0.9735 58.00%, 0.9736 59.00%, 0.9748 60.00%, 0.9769 61.00%, 0.9797 62.00%, 0.9829 63.00%, 0.9863 64.00%, 0.9899 65.00%, 0.9934 66.00%, 0.9967 67.00%, 0.9997 68.00%, 1.002 69.00%, 1.004 70.00%, 1.006 71.00%, 1.007 72.00%, 1.008 73.00%, 1.008 74.00%, 1.008 75.00%, 1.008 76.00%, 1.007 77.00%, 1.006 78.00%, 1.005 79.00%, 1.004 80.00%, 1.003 81.00%, 1.002 82.00%, 1.001 83.00%, 1.000 84.00%, 0.9992 85.00%, 0.9986 86.00%, 0.9980 87.00%, 0.9977 88.00%, 0.9974 89.00%, 0.9973 90.00%, 0.9974 91.00%, 0.9975 92.00%, 0.9977 93.00%, 0.9980 94.00%, 0.9983 95.00%, 0.9987 96.00%, 0.9990 97.00%, 0.9994 98.00%, 0.9997 99.00%, 1.000 100.0%)`;
 
 type RotatePattern = {
   id: string;
@@ -166,7 +168,7 @@ export const CardFlip = () => {
               exitDuration={pattern.exitDuration}
               animateOpacity={false}
             >
-              <Card className={classes.patternCard} onClick={() => togglePattern(pattern.id)}>
+              <Card className={classes.patternCard} onClick={() => togglePattern(pattern.id)} appearance="outline">
                 <div className={classes.demoIcon} style={{ backgroundColor: pattern.color }}>
                   {pattern.icon}
                 </div>