add project setup

tools/remotion/components/ClickCursor.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  interpolate,
+  spring,
+  useCurrentFrame,
+  useVideoConfig,
+} from 'remotion';
+
+type ClickCursorProps = {
+  /** X position to move to */
+  x: number;
+  /** Y position to move to */
+  y: number;
+  /** Frame at which cursor starts moving (local frame) */
+  moveStart: number;
+  /** Frame at which click happens */
+  clickAt: number;
+  /** Starting X (defaults to center-right) */
+  fromX?: number;
+  /** Starting Y */
+  fromY?: number;
+};
+
+export const ClickCursor: React.FC<ClickCursorProps> = ({
+  x,
+  y,
+  moveStart,
+  clickAt,
+  fromX = 960,
+  fromY = 400,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Move animation (spring-based)
+  const moveProgress = spring({
+    frame: Math.max(0, frame - moveStart),
+    fps,
+    config: { damping: 200 },
+    durationInFrames: Math.max(1, clickAt - moveStart),
+  });
+
+  const cursorX = interpolate(moveProgress, [0, 1], [fromX, x]);
+  const cursorY = interpolate(moveProgress, [0, 1], [fromY, y]);
+
+  // Click pulse
+  const clickProgress =
+    frame >= clickAt
+      ? interpolate(frame - clickAt, [0, 8], [0, 1], {
+          extrapolateRight: 'clamp',
+        })
+      : 0;
+  const clickScale = interpolate(clickProgress, [0, 0.5, 1], [0, 1.2, 0], {
+    extrapolateRight: 'clamp',
+  });
+  const clickOpacity = interpolate(clickProgress, [0, 0.5, 1], [0, 0.6, 0], {
+    extrapolateRight: 'clamp',
+  });
+
+  // Hide cursor before it starts moving
+  const cursorOpacity =
+    frame < moveStart
+      ? 0
+      : interpolate(frame - moveStart, [0, 5], [0, 1], {
+          extrapolateRight: 'clamp',
+        });
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: cursorX,
+        top: cursorY,
+        opacity: cursorOpacity,
+        zIndex: 100,
+        pointerEvents: 'none',
+      }}
+    >
+      {/* Click pulse ring */}
+      <div
+        style={{
+          position: 'absolute',
+          width: 30,
+          height: 30,
+          borderRadius: '50%',
+          border: '2px solid rgba(255,255,255,0.5)',
+          transform: `translate(-50%, -50%) scale(${clickScale})`,
+          opacity: clickOpacity,
+        }}
+      />
+      {/* Cursor arrow */}
+      <svg
+        width="20"
+        height="24"
+        viewBox="0 0 20 24"
+        fill="none"
+        style={{ filter: 'drop-shadow(1px 2px 3px rgba(0,0,0,0.5))' }}
+      >
+        <path
+          d="M2 2L2 20L7 15L12 22L15 20L10 13L17 13L2 2Z"
+          fill="white"
+          stroke="black"
+          strokeWidth="1.5"
+        />
+      </svg>
+    </div>
+  );
+};

tools/remotion/components/PhoneFrame.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
+import { colors } from '../lib/theme';
+
+type PhoneFrameProps = {
+  children: React.ReactNode;
+  /** Width of the phone viewport */
+  width?: number;
+  /** Height of the phone viewport */
+  height?: number;
+};
+
+export const PhoneFrame: React.FC<PhoneFrameProps> = ({
+  children,
+  width = 375,
+  height = 812,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Scale-in animation
+  const scale = spring({
+    frame,
+    fps,
+    config: { damping: 15, stiffness: 80 },
+  });
+
+  const bezelW = width + 24;
+  const bezelH = height + 24;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        transform: `scale(${scale})`,
+      }}
+    >
+      <div
+        style={{
+          width: bezelW,
+          height: bezelH,
+          borderRadius: 44,
+          background: '#1a1a1a',
+          border: '2px solid #333',
+          padding: 12,
+          position: 'relative',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.6)',
+        }}
+      >
+        {/* Notch / Dynamic Island */}
+        <div
+          style={{
+            position: 'absolute',
+            top: 10,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            width: 120,
+            height: 28,
+            borderRadius: 14,
+            background: '#000',
+            zIndex: 20,
+          }}
+        />
+
+        {/* Screen content */}
+        <div
+          style={{
+            width,
+            height,
+            borderRadius: 32,
+            overflow: 'hidden',
+            background: colors.bg.dark,
+            position: 'relative',
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

tools/remotion/components/TitleCard.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import {
+  AbsoluteFill,
+  interpolate,
+  useCurrentFrame,
+  useVideoConfig,
+} from 'remotion';
+import { colors, fonts } from '../lib/theme';
+
+type TitleCardProps = {
+  text: string;
+  subtitle: string;
+  showUrl?: boolean;
+};
+
+export const TitleCard: React.FC<TitleCardProps> = ({
+  text,
+  subtitle,
+  showUrl = false,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Logo fade + scale in
+  const logoOpacity = interpolate(frame, [0, 0.5 * fps], [0, 1], {
+    extrapolateRight: 'clamp',
+  });
+  const logoScale = interpolate(frame, [0, 0.5 * fps], [0.8, 1], {
+    extrapolateRight: 'clamp',
+  });
+
+  // Subtitle fades in slightly after logo
+  const subtitleOpacity = interpolate(
+    frame,
+    [0.3 * fps, 0.8 * fps],
+    [0, 1],
+    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' },
+  );
+
+  // URL fades in last
+  const urlOpacity = showUrl
+    ? interpolate(frame, [0.6 * fps, 1.1 * fps], [0, 1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      })
+    : 0;
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: colors.bg.dark,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {/* Lightning bolt icon */}
+      <div
+        style={{
+          opacity: logoOpacity,
+          transform: `scale(${logoScale})`,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 16,
+        }}
+      >
+        <svg width="64" height="64" viewBox="0 0 32 32">
+          <defs>
+            <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#60a5fa" />
+              <stop offset="100%" stopColor="#3b82f6" />
+            </linearGradient>
+          </defs>
+          <rect width="32" height="32" rx="6" fill="#0a0a0a" />
+          <path d="M18 4L8 18h6l-2 10 10-14h-6z" fill="url(#g)" />
+        </svg>
+
+        <div
+          style={{
+            fontFamily: fonts.ui,
+            fontSize: 72,
+            fontWeight: 700,
+            color: colors.accent.blue,
+            letterSpacing: -1,
+          }}
+        >
+          {text}
+        </div>
+      </div>
+
+      <div
+        style={{
+          opacity: subtitleOpacity,
+          fontFamily: fonts.ui,
+          fontSize: 28,
+          color: colors.text.dim,
+          marginTop: 12,
+        }}
+      >
+        {subtitle}
+      </div>
+
+      {showUrl && (
+        <div
+          style={{
+            opacity: urlOpacity,
+            fontFamily: fonts.mono,
+            fontSize: 18,
+            color: colors.text.muted,
+            marginTop: 24,
+          }}
+        >
+          github.com/Ark0N/Codeman
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};