@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/videos/app/remotion/docs/CURSOR_TRACKS.md

@@ -1,285 +0,0 @@
-# Cursor Track Patterns & Best Practices
-
-This document codifies the correct patterns for creating cursor tracks in Video Studio compositions.
-
-## 🎯 Quick Start
-
-### Use Helper Functions (Recommended)
-
-Always use the helper functions from `registry.ts` to create tracks with the correct configuration:
-
-```typescript
-import {
-  createCameraTrack,
-  createCursorTrack,
-  createStandardTracks,
-} from "@/remotion/registry";
-
-// Create both camera and cursor tracks
-const tracks = createStandardTracks(300);
-
-// Or create them individually
-const cameraTrack = createCameraTrack(300);
-const cursorTrack = createCursorTrack(300);
-
-// Customize cursor start position
-const cursorTrack = createCursorTrack(300, {
-  startX: 100,
-  startY: 100,
-  startOpacity: 0,
-  easing: "expo.inOut",
-});
-```
-
-## ⚠️ Critical Pattern: Cursor Type
-
-### ✅ CORRECT Pattern
-
-```typescript
-// Cursor type MUST be a constant "default" value
-{ property: "type", from: "default", to: "default", unit: "" }
-```
-
-**NO keyframes needed!** The `autoCursorType` system will automatically override this to `"pointer"` when hovering over interactive components.
-
-### ❌ WRONG Patterns
-
-```typescript
-// ❌ DO NOT use numeric values
-{ property: "type", from: "0", to: "0", unit: "" }
-{ property: "type", from: "1", to: "1", unit: "" }
-
-// ❌ DO NOT add keyframes to switch cursor types
-{
-  property: "type",
-  from: "default",
-  to: "default",
-  unit: "",
-  keyframes: [
-    { frame: 0, value: "default" },
-    { frame: 30, value: "pointer" },  // DON'T DO THIS!
-  ]
-}
-```
-
-### Why This Pattern Works
-
-1. **Standard Arrow Cursor**: When the cursor is not hovering over any interactive component, it displays as the standard arrow (`"default"`).
-
-2. **Automatic Override**: When the cursor enters an interactive component's zone, the `autoCursorType` system (from `useInteractiveComponentsCursor`) automatically overrides the track type to show `"pointer"`.
-
-3. **No Invisible Cursor**: The cursor remains visible at all times between components (as long as opacity > 0).
-
-## 📋 Complete Cursor Track Structure
-
-A properly configured cursor track has these properties:
-
-```typescript
-{
-  id: "cursor",
-  label: "Cursor",
-  startFrame: 0,
-  endFrame: 300,
-  easing: "expo.inOut",
-  animatedProps: [
-    // Position
-    { property: "x", from: "960", to: "960", unit: "px", keyframes: [] },
-    { property: "y", from: "540", to: "540", unit: "px", keyframes: [] },
-
-    // Appearance
-    { property: "opacity", from: "1", to: "1", unit: "", keyframes: [] },
-    { property: "scale", from: "1", to: "1", unit: "", keyframes: [] },
-
-    // Type (constant "default" - autoCursorType handles hover state)
-    { property: "type", from: "default", to: "default", unit: "" },
-
-    // Interaction
-    { property: "isClicking", from: "0", to: "0", unit: "", keyframes: [] },
-  ],
-}
-```
-
-## 🎬 Adding Cursor Movement
-
-Add keyframes to the `x` and `y` properties to animate cursor movement:
-
-```typescript
-const cursorTrack = createCursorTrack(300);
-
-// Add movement keyframes
-const xProp = cursorTrack.animatedProps.find((p) => p.property === "x")!;
-xProp.keyframes = [
-  { frame: 0, value: "100" }, // Start offscreen
-  { frame: 30, value: "760" }, // Move to button
-  { frame: 90, value: "760" }, // Hover on button
-  { frame: 120, value: "960" }, // Move to center
-];
-
-const yProp = cursorTrack.animatedProps.find((p) => p.property === "y")!;
-yProp.keyframes = [
-  { frame: 0, value: "100" },
-  { frame: 30, value: "400" },
-  { frame: 90, value: "400" },
-  { frame: 120, value: "540" },
-];
-```
-
-## 🖱️ Adding Click Events
-
-Add keyframes to trigger click animations:
-
-```typescript
-const clickProp = cursorTrack.animatedProps.find(
-  (p) => p.property === "isClicking",
-)!;
-clickProp.keyframes = [
-  { frame: 0, value: "0" },
-  { frame: 59, value: "0" },
-  { frame: 60, value: "1" }, // Click starts
-  { frame: 70, value: "0" }, // Click ends (10 frames later)
-];
-```
-
-## 💡 Fade In/Out Pattern
-
-Common pattern for cursor appearance:
-
-```typescript
-const opacityProp = cursorTrack.animatedProps.find(
-  (p) => p.property === "opacity",
-)!;
-opacityProp.keyframes = [
-  { frame: 0, value: "0" }, // Hidden at start
-  { frame: 20, value: "0" },
-  { frame: 30, value: "1" }, // Fade in
-  { frame: 280, value: "1" }, // Stay visible
-  { frame: 290, value: "0" }, // Fade out
-  { frame: 300, value: "0" }, // Hidden at end
-];
-```
-
-## 🔧 Helper Functions Reference
-
-### `createStandardTracks(durationInFrames)`
-
-Creates both camera and cursor tracks with default values.
-
-```typescript
-const tracks = createStandardTracks(300);
-// Returns: [cameraTrack, cursorTrack]
-```
-
-### `createCameraTrack(durationInFrames)`
-
-Creates a camera track with no movement (static viewport).
-
-```typescript
-const cameraTrack = createCameraTrack(300);
-```
-
-### `createCursorTrack(durationInFrames, options?)`
-
-Creates a cursor track with correct configuration.
-
-**Options:**
-
-- `startX` (default: 960) - Initial X position
-- `startY` (default: 540) - Initial Y position
-- `startOpacity` (default: 1) - Initial opacity
-- `easing` (default: "expo.inOut") - Easing function
-
-```typescript
-const cursorTrack = createCursorTrack(300, {
-  startX: 100,
-  startY: 100,
-  startOpacity: 0,
-  easing: "expo.inOut",
-});
-```
-
-## 📚 Examples
-
-### Basic Composition with Static Cursor
-
-```typescript
-import { createStandardTracks } from "@/remotion/registry";
-
-const FALLBACK_TRACKS = createStandardTracks(240);
-```
-
-### Composition with Animated Cursor
-
-```typescript
-import { createStandardTracks } from "@/remotion/registry";
-
-const FALLBACK_TRACKS = (() => {
-  const tracks = createStandardTracks(300);
-  const cursorTrack = tracks[1];
-
-  // Add movement
-  const xProp = cursorTrack.animatedProps.find((p) => p.property === "x")!;
-  xProp.keyframes = [
-    { frame: 0, value: "100" },
-    { frame: 30, value: "960" },
-  ];
-
-  return tracks;
-})();
-```
-
-### Interactive Components Demo Pattern
-
-See `app/remotion/compositions/ComponentsDemo.tsx` for a complete example with:
-
-- Multiple interactive components
-- Cursor movement between components
-- Click animations
-- Fade in/out
-- Automatic cursor type switching on hover
-
-## 🐛 Troubleshooting
-
-### Problem: Cursor disappears between components
-
-**Cause**: Cursor type is using numeric values (`"0"` or `"1"`) instead of `"default"`
-
-**Solution**: Use helper functions or ensure type property is:
-
-```typescript
-{ property: "type", from: "default", to: "default", unit: "" }
-```
-
-### Problem: Cursor doesn't change to pointer on hover
-
-**Cause**:
-
-1. Interactive component not registered with `registerForCursor()`
-2. Zone not configured correctly
-3. `autoCursorType` not passed to `CameraHost`
-
-**Solution**:
-
-```typescript
-// Register component
-React.useEffect(() => {
-  registerForCursor(button);
-}, [button.hover.isHovering, button.click.isClicking, registerForCursor]);
-
-// Pass autoCursorType to CameraHost
-<CameraHost tracks={tracks} autoCursorType={autoCursorType}>
-  {/* content */}
-</CameraHost>
-```
-
-### Problem: Cursor appears but doesn't move
-
-**Cause**: No keyframes added to x/y properties
-
-**Solution**: Add keyframes as shown in "Adding Cursor Movement" section above
-
-## 📖 See Also
-
-- `app/remotion/registry.ts` - Helper function implementations
-- `app/remotion/compositions/ComponentsDemo.tsx` - Complete example
-- `app/remotion/compositions/UIShowcase.tsx` - Another working example
-- `app/remotion/hooks/createInteractiveComposition.tsx` - How autoCursorType works

package/corpus/templates/videos/app/remotion/easingFunctions.ts

@@ -1,255 +0,0 @@
-/**
- * GSAP-style easing functions
- * All functions take a value t between 0 and 1 and return the eased value
- */
-
-export type EasingKey =
-  | "linear"
-  | "ease-in"
-  | "ease-out"
-  | "ease-in-out"
-  | "power1.in"
-  | "power1.out"
-  | "power1.inOut"
-  | "power2.in"
-  | "power2.out"
-  | "power2.inOut"
-  | "power3.in"
-  | "power3.out"
-  | "power3.inOut"
-  | "power4.in"
-  | "power4.out"
-  | "power4.inOut"
-  | "back.in"
-  | "back.out"
-  | "back.inOut"
-  | "bounce.in"
-  | "bounce.out"
-  | "bounce.inOut"
-  | "circ.in"
-  | "circ.out"
-  | "circ.inOut"
-  | "elastic.in"
-  | "elastic.out"
-  | "elastic.inOut"
-  | "expo.in"
-  | "expo.out"
-  | "expo.inOut"
-  | "sine.in"
-  | "sine.out"
-  | "sine.inOut"
-  | "spring";
-
-export type EasingFunction = (t: number) => number;
-
-// Linear
-const linear: EasingFunction = (t) => t;
-
-// Power1 (Quad)
-const power1In: EasingFunction = (t) => t * t;
-const power1Out: EasingFunction = (t) => t * (2 - t);
-const power1InOut: EasingFunction = (t) =>
-  t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-
-// Power2 (Cubic)
-const power2In: EasingFunction = (t) => t * t * t;
-const power2Out: EasingFunction = (t) => --t * t * t + 1;
-const power2InOut: EasingFunction = (t) =>
-  t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-
-// Power3 (Quart)
-const power3In: EasingFunction = (t) => t * t * t * t;
-const power3Out: EasingFunction = (t) => 1 - --t * t * t * t;
-const power3InOut: EasingFunction = (t) =>
-  t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
-
-// Power4 (Quint)
-const power4In: EasingFunction = (t) => t * t * t * t * t;
-const power4Out: EasingFunction = (t) => 1 + --t * t * t * t * t;
-const power4InOut: EasingFunction = (t) =>
-  t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
-
-// Back
-const backIn: EasingFunction = (t) => {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return c3 * t * t * t - c1 * t * t;
-};
-const backOut: EasingFunction = (t) => {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-};
-const backInOut: EasingFunction = (t) => {
-  const c1 = 1.70158;
-  const c2 = c1 * 1.525;
-  return t < 0.5
-    ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
-    : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
-};
-
-// Bounce
-const bounceOut: EasingFunction = (t) => {
-  const n1 = 7.5625;
-  const d1 = 2.75;
-  if (t < 1 / d1) {
-    return n1 * t * t;
-  } else if (t < 2 / d1) {
-    return n1 * (t -= 1.5 / d1) * t + 0.75;
-  } else if (t < 2.5 / d1) {
-    return n1 * (t -= 2.25 / d1) * t + 0.9375;
-  } else {
-    return n1 * (t -= 2.625 / d1) * t + 0.984375;
-  }
-};
-const bounceIn: EasingFunction = (t) => 1 - bounceOut(1 - t);
-const bounceInOut: EasingFunction = (t) =>
-  t < 0.5 ? (1 - bounceOut(1 - 2 * t)) / 2 : (1 + bounceOut(2 * t - 1)) / 2;
-
-// Circ
-const circIn: EasingFunction = (t) => 1 - Math.sqrt(1 - Math.pow(t, 2));
-const circOut: EasingFunction = (t) => Math.sqrt(1 - Math.pow(t - 1, 2));
-const circInOut: EasingFunction = (t) =>
-  t < 0.5
-    ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2
-    : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
-
-// Elastic
-const elasticIn: EasingFunction = (t) => {
-  const c4 = (2 * Math.PI) / 3;
-  return t === 0
-    ? 0
-    : t === 1
-      ? 1
-      : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
-};
-const elasticOut: EasingFunction = (t) => {
-  const c4 = (2 * Math.PI) / 3;
-  return t === 0
-    ? 0
-    : t === 1
-      ? 1
-      : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
-};
-const elasticInOut: EasingFunction = (t) => {
-  const c5 = (2 * Math.PI) / 4.5;
-  return t === 0
-    ? 0
-    : t === 1
-      ? 1
-      : t < 0.5
-        ? -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2
-        : (Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5)) / 2 +
-          1;
-};
-
-// Expo
-const expoIn: EasingFunction = (t) => (t === 0 ? 0 : Math.pow(2, 10 * t - 10));
-const expoOut: EasingFunction = (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t));
-const expoInOut: EasingFunction = (t) =>
-  t === 0
-    ? 0
-    : t === 1
-      ? 1
-      : t < 0.5
-        ? Math.pow(2, 20 * t - 10) / 2
-        : (2 - Math.pow(2, -20 * t + 10)) / 2;
-
-// Sine
-const sineIn: EasingFunction = (t) => 1 - Math.cos((t * Math.PI) / 2);
-const sineOut: EasingFunction = (t) => Math.sin((t * Math.PI) / 2);
-const sineInOut: EasingFunction = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
-
-// Spring (simple damped spring approximation)
-const spring: EasingFunction = (t) => {
-  const damping = 0.3;
-  const frequency = 1.5;
-  return 1 - Math.exp(-damping * 10 * t) * Math.cos(frequency * 10 * t);
-};
-
-// Easing function map
-const easingFunctions: Record<EasingKey, EasingFunction> = {
-  linear,
-  "ease-in": power2In,
-  "ease-out": power2Out,
-  "ease-in-out": power2InOut,
-  "power1.in": power1In,
-  "power1.out": power1Out,
-  "power1.inOut": power1InOut,
-  "power2.in": power2In,
-  "power2.out": power2Out,
-  "power2.inOut": power2InOut,
-  "power3.in": power3In,
-  "power3.out": power3Out,
-  "power3.inOut": power3InOut,
-  "power4.in": power4In,
-  "power4.out": power4Out,
-  "power4.inOut": power4InOut,
-  "back.in": backIn,
-  "back.out": backOut,
-  "back.inOut": backInOut,
-  "bounce.in": bounceIn,
-  "bounce.out": bounceOut,
-  "bounce.inOut": bounceInOut,
-  "circ.in": circIn,
-  "circ.out": circOut,
-  "circ.inOut": circInOut,
-  "elastic.in": elasticIn,
-  "elastic.out": elasticOut,
-  "elastic.inOut": elasticInOut,
-  "expo.in": expoIn,
-  "expo.out": expoOut,
-  "expo.inOut": expoInOut,
-  "sine.in": sineIn,
-  "sine.out": sineOut,
-  "sine.inOut": sineInOut,
-  spring,
-};
-
-/**
- * Get easing function by key
- */
-export function getEasingFunction(key: EasingKey): EasingFunction {
-  return easingFunctions[key] || linear;
-}
-
-/**
- * Easing options for UI dropdowns
- */
-export const EASING_OPTIONS: Array<{ value: EasingKey; label: string }> = [
-  { value: "linear", label: "Linear" },
-  { value: "ease-in", label: "Ease In" },
-  { value: "ease-out", label: "Ease Out" },
-  { value: "ease-in-out", label: "Ease In Out" },
-  { value: "power1.in", label: "Power1 In" },
-  { value: "power1.out", label: "Power1 Out" },
-  { value: "power1.inOut", label: "Power1 InOut" },
-  { value: "power2.in", label: "Power2 In" },
-  { value: "power2.out", label: "Power2 Out" },
-  { value: "power2.inOut", label: "Power2 InOut" },
-  { value: "power3.in", label: "Power3 In" },
-  { value: "power3.out", label: "Power3 Out" },
-  { value: "power3.inOut", label: "Power3 InOut" },
-  { value: "power4.in", label: "Power4 In" },
-  { value: "power4.out", label: "Power4 Out" },
-  { value: "power4.inOut", label: "Power4 InOut" },
-  { value: "back.in", label: "Back In" },
-  { value: "back.out", label: "Back Out" },
-  { value: "back.inOut", label: "Back InOut" },
-  { value: "bounce.in", label: "Bounce In" },
-  { value: "bounce.out", label: "Bounce Out" },
-  { value: "bounce.inOut", label: "Bounce InOut" },
-  { value: "circ.in", label: "Circ In" },
-  { value: "circ.out", label: "Circ Out" },
-  { value: "circ.inOut", label: "Circ InOut" },
-  { value: "elastic.in", label: "Elastic In" },
-  { value: "elastic.out", label: "Elastic Out" },
-  { value: "elastic.inOut", label: "Elastic InOut" },
-  { value: "expo.in", label: "Expo In" },
-  { value: "expo.out", label: "Expo Out" },
-  { value: "expo.inOut", label: "Expo InOut" },
-  { value: "sine.in", label: "Sine In" },
-  { value: "sine.out", label: "Sine Out" },
-  { value: "sine.inOut", label: "Sine InOut" },
-  { value: "spring", label: "Spring" },
-];