Hello, 欢迎来到
白清凤的作品集 AI 产品探索者 · AIGC / 大模型应用方向

/* ============================================================
 * 文件: LiuShuJianJing.tsx  |  生成: Claude Code (Vibe Coding)
 * Prompt: "请扮演AI产品经理，帮我写一段Remotion代码，
 *         实现六棵树的依次弹性生长动画，叠加'三角茶寮'"
 * 调优: 3轮迭代 — spring damping→12, stiffness→100
 * 耗时: ≈2h（含Prompt调试+参数微调+渲染）| 传统方式≈1周
 * ============================================================ */

import { useCurrentFrame, useVideoConfig, spring, interpolate } from "remotion";
import { AbsoluteFill } from "remotion";

const TREES = [
  { name: "引", color: "#7B8FA1", offsetX: 100,  label: "境一·入口" },
  { name: "弈", color: "#8B9E8B", offsetX: 280,  label: "境二·棋盘" },
  { name: "聚", color: "#FF6B6B", offsetX: 460,  label: "境三·茶寮★", highlight: true },
  { name: "憩", color: "#C4AF98", offsetX: 640,  label: "境四·卡座" },
  { name: "韵", color: "#D6C9B8", offsetX: 820,  label: "境五·木篱" },
];

export const LiuShuJianJing = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const treeAnimations = TREES.map((tree, i) => {
    const progress = spring({
      fps, frame: frame - i * 30,
      config: { damping: 12, stiffness: 100 },
    });
    return { tree, progress };
  });
  return (
    <AbsoluteFill style={{ background: "#EDE8E1" }}>
      {treeAnimations.map(({ tree, progress }) => (
        <div style={{
          position:"absolute", left:tree.offsetX, bottom:120,
          width:100, height:240*progress, borderRadius:"50% 50% 0 0",
          background:tree.color, opacity:progress,
          transformOrigin:"bottom center",
          transform:`scaleY(${progress})`,
        }}>
          <span style={{color:"#fff",fontSize:20,fontWeight:700}}>{tree.name}</span>
        </div>
      ))}
    </AbsoluteFill>
  );
};