export default function Scene1_mbq01vag() { const {AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring} = window.Remotion; const frame = useCurrentFrame(); const {fps, width, height, durationInFrames} = useVideoConfig(); // Colors extracted from image const bg = "#072b8a"; const blue = "#19a3ff"; const teal = "#22d4c7"; const green = "#4cd964"; const yellow = "#ffe600"; const thinLine = "#1a7fe7"; // Ribbon parameters const ribbonTop = height * 0.22; const ribbonHeight = 36; const ribbonGap = 12; const ribbonStroke = 24; // Wavy path function (sinusoidal, smooth, seamless loop) const waveAmplitude = 60; const waveLength = width * 0.85; const loopProgress = (frame % durationInFrames) / durationInFrames; // Camera "rides" the wave: offset is animated const cameraOffset = interpolate( frame, [0, durationInFrames], [0, waveLength], {extrapolateLeft: "clamp", extrapolateRight: "clamp"} ); // Helper to generate SVG path for a wavy ribbon function getWavePath(yOffset, amplitude, phase, thickness) { const points = []; const segments = 120; for (let i = 0; i <= segments; i++) { const x = (i / segments) * width; const t = (x + cameraOffset) / waveLength; const y = yOffset + Math.sin(2 * Math.PI * (t + phase)) * amplitude; points.push([x, y]); } // Build top edge let path = `M ${points[0][0]},${points[0][1] - thickness/2}`; for (let i = 1; i < points.length; i++) { path += ` L ${points[i][0]},${points[i][1] - thickness/2}`; } // Build bottom edge (reverse) for (let i = points.length - 1; i >= 0; i--) { path += ` L ${points[i][0]},${points[i][1] + thickness/2}`; } path += " Z"; return path; } // Animate opacity and scale for smooth entrance const fadeIn = interpolate(frame, [0, fps * 0.8], [0, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp"}); const scaleIn = interpolate(frame, [0, fps * 1.2], [1.08, 1], {extrapolateLeft: "clamp", extrapolateRight: "clamp"}); // Subtle idle floating for ribbon const float = Math.sin(frame / fps * Math.PI * 2 / 6) * 8; return ( ); }

Reddit Ribbon