// slide-spotlight-pan v2 —— 按用户截图 clickup03 重做： // 紫色光线贴着 UI 面板边缘泛光（先绕左上角竖缘、再沿顶边横走）， // 聚光头匀速右移，照到处显影、离开处沉暗；面板匀速左滑（相机右摇感）。 // 用户裁决："紫色的光线是贴着ui界面泛光的，聚光的移动是匀速的"。 import React from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion'; const ink = '#3c3c3a'; const mid = '#98989a'; const line = '#e4e4e2'; const PW = 3000; const PH = 1400; const TOP = 150; // 面板顶边在屏幕座标的 y const CR = 60; // 面板圆角 const SideRow: React.FC<{ w: number }> = ({ w }) => (
); const Task: React.FC<{ seed: number }> = ({ seed }) => (
); const Col: React.FC<{ accent: string; seed: number; w: number }> = ({ accent, seed, w }) => (
{[0, 1].map((i) => )}
); // 超宽面板内容（放大特写级别）：侧栏 + 顶栏 + 三列看板 const WidePanel: React.FC = () => (
); export const SlideSpotlightPan: React.FC = () => { const frame = useCurrentFrame(); // 面板匀速左滑（相机右摇）——严格 linear const slide = interpolate(frame, [0, 132], [180, -1100]); // 聚光头在面板本地座标沿顶边匀速右移——严格 linear // 起点在左上角竖缘（负值=还在左缘竖直段），随后转过角沿顶边走 const head = interpolate(frame, [0, 132], [-360, 2600]); const onTop = Math.max(0, head); // 顶边段进度 const cornerT = Math.min(1, Math.max(0, (head + 360) / 360)); // 竖缘段 0→1 const vertHeadY = TOP + 620 - cornerT * 620; // 左缘光头从下往上爬到角 // 屏幕座标的光头位置 const headScreenX = slide + onTop; // 光头在竖缘阶段贴着面板左缘 const leftEdgeX = slide; // 竖缘光线强度：角前满、转角后衰减 const vGlow = head < 0 ? 1 : Math.max(0, 1 - head / 900); // 顶边光线强度：转角后满 const hGlow = Math.min(1, Math.max(0, (head + 120) / 240)); const grad = (dir: string, c: string) => `linear-gradient(${dir}, rgba(0,0,0,0) 0%, ${c} 42%, ${c} 58%, rgba(0,0,0,0) 100%)`; return ( {/* 面板层：聚光范围内显影 */}
{/* 贴面泛光：光头下方的紫光晕染进 UI 顶部（贴着界面泛光的关键层） */}
{/* 左缘贴面泛光（竖缘阶段） */}
{/* 聚光范围外压暗：以光头为中心的显影罩（面板本地座标，跟光头走） */}
{/* ===== 贴边紫色光线本体（屏幕层，贴着面板边缘） ===== */} {/* 顶边横向光线：三层辉光 + 亮芯，中心=光头 */}
{/* 左上角竖缘光线（起始阶段，贴面板左缘） */}
{/* 顶上方黑檐：光带以上纯黑（截图里顶边之上是黑场） */}
); };