Function ScrollStackDemo

src/demo/Components/ScrollStackDemo.jsx:30–282

()

};

const ScrollStackDemo = () => {
  const [key, forceRerender] = useForceRerender();
  const [isCompleted, setIsCompleted] = useState(false);
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { itemDistance, itemStackDistance, baseScale, rotationAmount, blurAmount, stackPosition } = props;

  const handleRefresh = () => {
    forceRerender();
    setIsCompleted(false);
  };

  const handlePropChange = (propName, value) => {
    updateProp(propName, value);
    forceRerender();
  };

  const handleStackComplete = () => {
    setIsCompleted(true);
  };

  const stackPositionOptions = [
    { value: '10%', label: '10%' },
    { value: '15%', label: '15%' },
    { value: '20%', label: '20%' },
    { value: '25%', label: '25%' },
    { value: '30%', label: '30%' },
    { value: '35%', label: '35%' }
  ];

  const propData = useMemo(
    () => [
      {
        name: 'children',
        type: 'ReactNode',
        default: 'required',
        description: 'The content to be displayed in the scroll stack. Should contain ScrollStackItem components.'
      },
      {
        name: 'className',
        type: 'string',
        default: '""',
        description: 'Additional CSS classes to apply to the scroll stack container.'
      },
      {
        name: 'itemDistance',
        type: 'number',
        default: '100',
        description: 'Distance between stacked items in pixels.'
      },
      {
        name: 'itemScale',
        type: 'number',
        default: '0.03',
        description: 'Scale increment for each stacked item.'
      },
      {
        name: 'itemStackDistance',
        type: 'number',