diff --git a/apps/videos/package.json b/apps/videos/package.json new file mode 100644 index 00000000..a575af36 --- /dev/null +++ b/apps/videos/package.json @@ -0,0 +1,32 @@ +{ + "name": "@snapotter/videos", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "npx remotion studio", + "render": "node scripts/render-all.mjs", + "render:single": "npx remotion render" + }, + "dependencies": { + "@remotion/bundler": "^4.0.0", + "@remotion/cli": "^4.0.0", + "@remotion/google-fonts": "^4.0.0", + "@remotion/media": "^4.0.459", + "@remotion/motion-blur": "^4.0.0", + "@remotion/noise": "^4.0.0", + "@remotion/paths": "^4.0.0", + "@remotion/renderer": "^4.0.0", + "@remotion/shapes": "^4.0.0", + "@remotion/tailwind": "^4.0.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "remotion": "^4.0.0" + }, + "devDependencies": { + "@types/react": "^18.3.0", + "@types/react-dom": "^18.3.0", + "tailwindcss": "^3.4.0", + "typescript": "^5.7.0" + } +} diff --git a/apps/videos/src/lib/audio.tsx b/apps/videos/src/lib/audio.tsx new file mode 100644 index 00000000..32844ee1 --- /dev/null +++ b/apps/videos/src/lib/audio.tsx @@ -0,0 +1,23 @@ +import { Audio } from "@remotion/media"; +import type React from "react"; +import { interpolate, staticFile, useCurrentFrame } from "remotion"; + +export const BackgroundMusic: React.FC<{ + src?: string; + volume?: number; + fadeInFrames?: number; + fadeOutFrames?: number; + totalFrames: number; +}> = ({ src, volume = 0.4, fadeInFrames = 30, fadeOutFrames = 60, totalFrames }) => { + const frame = useCurrentFrame(); + if (!src) return null; + + const vol = interpolate( + frame, + [0, fadeInFrames, totalFrames - fadeOutFrames, totalFrames], + [0, volume, volume, 0], + { extrapolateLeft: "clamp", extrapolateRight: "clamp" }, + ); + + return