Vemotion AI

import React from 'react';
import {
  AbsoluteFill,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

// --- HELPER COMPONENTS ---

const GridBackground = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#f8fafc',
        backgroundImage: `linear-gradient(...)`,
        backgroundSize: '48px 48px',
        opacity: 0.4,
      }}
    />
  );
};

const Cursor = ({ x, y, frame }) => {
  const clickFrames = [55, 110, 190, 250];
  const isClicking = clickFrames.some(f => Math.abs(frame - f) < 5);
  const clickScale = isClicking ? 0.8 : 1;

  return (
    <div style={{ position: 'absolute', left: x, top: y }}>
      <svg width="24" height="24">
        <path d="M3 3L10.07 19.97..." />
      </svg>
    </div>
  );
};

// --- MAIN EXPORTED COMPONENT ---

export const VemotionRecreation = () => {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();

  // Mouse path coordinates
  const mouseX = interpolate(frame,
    [0, 50, 100, 180, 250, 300],
    [width, 240, 120, 260, 1850, 1200]
  );

  const entrySpring = spring({ frame, fps });
  const opacity = interpolate(entrySpring, [0, 1], [0, 1]);

  return (
    <AbsoluteFill style={{ fontFamily: 'system-ui' }}>
      <GridBackground />
      <Cursor x={mouseX} y={mouseY} frame={frame} />
      {/* UI Layout */}
    </AbsoluteFill>
  );
};