trim develop section and remove unused code

apps/frontpage/components/home/develop/demo/range-slider.tsx

@@ -4,29 +4,16 @@ import { motion, useTransform } from 'framer-motion';
 
 interface RangeSliderProps {
   activeStory: string;
-  scrollProgress: MotionValue<number>;
   appearProgress: MotionValue<number>;
 }
 
 const stories = ['default', 'input-range', 'no-selection'];
 
 export function RangeSlider({
   appearProgress,
-  scrollProgress,
   activeStory,
   ...props
 }: RangeSliderProps) {
-  const x = useTransform(scrollProgress, [0, 1], ['0%', '-91%'], {
-    clamp: true,
-  });
-  const y = useTransform(scrollProgress, [0, 1], ['0%', '31%'], {
-    clamp: true,
-  });
-
-  const check = useTransform(scrollProgress, [0, 0.5, 1], [0, 0, 1], {
-    clamp: true,
-  });
-
   const filter = useTransform(
     appearProgress,
     [0, 0.5, 1],
@@ -35,28 +22,22 @@ export function RangeSlider({
   );
   return (
     <motion.div
-      className="absolute z-[2] w-[26.23762376%] h-0 pb-[21.48648648%] top-[12%] left-[24%]"
-      style={{ x, y, opacity: appearProgress, filter }}
+      className="absolute left-[24%] top-[12%] z-[2] h-0 w-[26.23762376%] pb-[21.48648648%]"
+      style={{ opacity: appearProgress, filter }}
       {...props}
     >
       {stories.map((id) => (
         <motion.img
           alt=""
           animate={{ opacity: activeStory === id ? 1 : 0 }}
-          className="block w-full h-auto absolute top-0 left-0"
+          className="absolute left-0 top-0 block h-auto w-full"
           height="303"
           key={id}
           src={`/home/develop/range-slider-${id}.svg`}
           transition={{ duration: 0.1 }}
           width="370"
         />
       ))}
-      <motion.img
-        alt=""
-        className="w-[10%] h-auto block absolute top-[-3%] right-[-1%]"
-        src="/home/demo/ci-check-green.svg"
-        style={{ scale: check, opacity: check }}
-      />
     </motion.div>
   );
 }

apps/frontpage/components/home/develop/demo/scroll-demo.tsx

@@ -1,21 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import type { MotionValue } from 'framer-motion';
 import { motion, useTransform } from 'framer-motion';
-import { Connector } from '../../connector';
 import { useMediaQuery } from '../../../../hooks/use-media-query';
 import { Sidebar } from './sidebar';
-import { AddonsPanel } from './addons-panel';
 import { RangeSlider } from './range-slider';
 import { VSCode } from './vscode';
-import { App } from './app';
 
 interface ScrollDemoProps {
   appearProgress: MotionValue<number>;
   isolationProgress: MotionValue<number>;
-  addonsProgress: MotionValue<number>;
-  dropInProgress: MotionValue<number>;
   storyIndex: MotionValue<number>;
-  panelIndex: MotionValue<number>;
 }
 
 const rangeSlider = {
@@ -26,37 +20,26 @@ const rangeSlider = {
 export function ScrollDemo({
   appearProgress,
   isolationProgress,
-  addonsProgress,
-  dropInProgress,
   storyIndex,
-  panelIndex,
   ...props
 }: ScrollDemoProps) {
   const [activeStory, setActiveStory] = useState('default');
-  const [activePanel, setActivePanel] = useState('controls');
 
   useEffect(() => {
     function updateId() {
       setActiveStory(rangeSlider.stories[storyIndex.get()]);
     }
     const unsubscribeStoryIndex = storyIndex.on('change', updateId);
 
-    function updatePanel() {
-      setActivePanel(rangeSlider.addons[panelIndex.get()]);
-    }
-    const unsubscribePanel = panelIndex.on('change', updatePanel);
-
     return () => {
       unsubscribeStoryIndex();
-      unsubscribePanel();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We don't need to update the effect when the props change
   }, []);
 
   const zoom = useTransform<number, number>(
-    [isolationProgress, dropInProgress],
-    ([latestIsolationProgress, latestDropInProgress]) =>
-      (latestIsolationProgress || 0) - (latestDropInProgress || 0),
+    [isolationProgress],
+    ([latestIsolationProgress]) => latestIsolationProgress || 0,
   );
 
   const [stacked] = useMediaQuery(`(min-width: 648px)`);
@@ -72,67 +55,27 @@ export function ScrollDemo({
     clamp: true,
   });
 
-  const frameScale = useTransform(dropInProgress, [0, 1], [1, 0], {
-    clamp: true,
-  });
-  const frameOpacity = useTransform(dropInProgress, [0, 1], [1, 0.25], {
-    clamp: true,
-  });
-
-  const connectorProgress = useTransform(dropInProgress, [0.75, 1], [0, 1], {
-    clamp: true,
-  });
-
   return (
     <motion.div
-      className="relative w-full h-0 pb-[69.10907577%]"
+      className="relative h-0 w-full pb-[69.10907577%]"
       style={{ scale, x }}
       transition={{ delay: 0.4 }}
       {...props}
     >
       <motion.div
-        className="absolute h-[75vh] top-[-35vh] left-0 right-0 pointer-events-none user-select-none bg-gradient-to-b from-homeBackground from-90% to-homeBackground/10"
+        className="user-select-none from-homeBackground to-homeBackground/10 pointer-events-none absolute left-0 right-0 top-[-35vh] h-[75vh] bg-gradient-to-b from-90%"
         style={{
           y: scrimY,
           opacity: scrimOpacity,
         }}
       />
       <motion.img
         alt=""
-        className="absolute top-0 left-0 block w-full h-auto"
+        className="absolute left-0 top-0 block h-auto w-full"
         src="/home/develop/storybook-frame.svg"
-        style={{
-          scale: frameScale,
-          opacity: frameOpacity,
-        }}
-      />
-      <Sidebar
-        activeStory={activeStory}
-        style={{
-          scale: frameScale,
-          opacity: frameOpacity,
-        }}
-        type="rangeSlider"
-      />
-      <AddonsPanel
-        activePanel={activePanel}
-        scrollProgress={addonsProgress}
-        style={{
-          scale: frameScale,
-          opacity: frameOpacity,
-        }}
-      />
-      <App scrollProgress={dropInProgress} />
-      <Connector
-        className="w-[24%] h-auto absolute top-[20%] left-[17.8%] rotate-[-56deg] z-[2]"
-        name="rs-to-app"
-        progress={connectorProgress}
-      />
-      <RangeSlider
-        activeStory={activeStory}
-        appearProgress={appearProgress}
-        scrollProgress={dropInProgress}
       />
+      <Sidebar activeStory={activeStory} type="rangeSlider" />
+      <RangeSlider activeStory={activeStory} appearProgress={appearProgress} />
       <VSCode
         appearProgress={appearProgress}
         scrollProgress={isolationProgress}