mintel.me/apps/web/video/mocks/framer-motion.tsx

 
import React from "react";

// ULTRA-CRITICAL ANIMATION KILLER
// This mock covers all possible Framer Motion V12 entry points
// and forces absolute determinism on both HTML and SVG elements.

const createMotionComponent = (Tag: string) => {
  const Component = React.forwardRef(
    (
      {
        children,
        style,
        animate,
        initial,
        _whileHover,
        _whileTap,
        _transition,
        _layout,
        _layoutId,
        _variants,
        ...props
      }: any,
      ref,
    ) => {
      // 1. Resolve State
      // If animate is a string (variant), we try to find it in variants,
      // but since we want to be deterministic, we just ignore variants for now
      // to avoid complex logic. We assume the component state is driven by props.

      // 2. Resolve Attributes (for SVG)
      // Framer motion allows animating SVG attributes like 'r', 'cx' directly.
      // We must spread 'animate' into the props to snap them.
      const resolvedProps = { ...props };
      if (typeof animate === "object" && !Array.isArray(animate)) {
        Object.assign(resolvedProps, animate);
      } else if (Array.isArray(animate)) {
        // Handle keyframes by taking the first one
        Object.assign(resolvedProps, animate[0]);
      }

      // 3. Resolve Style
      const combinedStyle = {
        ...style,
        ...(typeof initial === "object" && !Array.isArray(initial)
          ? initial
          : {}),
        ...(typeof animate === "object" && !Array.isArray(animate)
          ? animate
          : {}),
      };

      // Final cleaning of motion-specific props that shouldn't leak to DOM
      const {
        _viewport,
        transition: __t,
        _onAnimationStart,
        _onAnimationComplete,
        _onUpdate,
        _onPan,
        _onPanStart,
        _onPanEnd,
        _onPanSessionStart,
        _onTap,
        _onTapStart,
        _onTapCancel,
        _onHoverStart,
        _onHoverEnd,
        ...domProps
      } = resolvedProps;

      return (
        <Tag
          ref={ref}
          {...domProps}
          style={combinedStyle}
          data-framer-captured="true"
        >
          {children}
        </Tag>
      );
    },
  );
  Component.displayName = `motion.${Tag}`;
  return Component;
};

export const motion: any = {
  div: createMotionComponent("div"),
  button: createMotionComponent("button"),
  h1: createMotionComponent("h1"),
  h2: createMotionComponent("h2"),
  h3: createMotionComponent("h3"),
  h4: createMotionComponent("h4"),
  p: createMotionComponent("p"),
  span: createMotionComponent("span"),
  section: createMotionComponent("section"),
  nav: createMotionComponent("nav"),
  svg: createMotionComponent("svg"),
  path: createMotionComponent("path"),
  circle: createMotionComponent("circle"),
  rect: createMotionComponent("rect"),
  line: createMotionComponent("line"),
  polyline: createMotionComponent("polyline"),
  polygon: createMotionComponent("polygon"),
  ellipse: createMotionComponent("ellipse"),
  g: createMotionComponent("g"),
  a: createMotionComponent("a"),
  li: createMotionComponent("li"),
  ul: createMotionComponent("ul"),
};

export const m = motion;
export const AnimatePresence = ({ children }: any) => <>{children}</>;
export const MotionConfig = ({ children }: any) => <>{children}</>;
export const LayoutGroup = ({ children }: any) => <>{children}</>;
export const LazyMotion = ({ children }: any) => <>{children}</>;

export const useAnimation = () => ({
  start: () => Promise.resolve(),
  set: () => {},
  stop: () => {},
  mount: () => {},
});

export const useInView = () => true;
export const useScroll = () => ({
  scrollYProgress: {
    get: () => 0,
    onChange: () => () => {},
    getVelocity: () => 0,
  },
  scrollY: { get: () => 0, onChange: () => () => {}, getVelocity: () => 0 },
});

export const useTransform = (_value: any, _from: any[], to: any[]) => to[0];
export const useSpring = (value: any) => value;
export const useCycle = (...args: any[]) => [args[0], () => {}];
export const useIsPresent = () => true;
export const useReducedMotion = () => true;
export const useAnimationControls = useAnimation;
export const usePresence = () => [true, null];

export const isValidMotionProp = () => true;

export default motion;