59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import { useCurrentFrame, interpolate, AbsoluteFill } from "remotion";
|
|
import { serifFont } from "../fonts";
|
|
|
|
// 브랜드 감성 2줄: 우상단 통일 위치에 한 덩어리로 쌓아 노출.
|
|
// 첫 줄 먼저, 둘째 줄 살짝 뒤따라 등장 → 같은 자리에서 읽힘.
|
|
export const BrandLines: React.FC<{
|
|
lines: string[];
|
|
fromFrame: number;
|
|
toFrame: number;
|
|
}> = ({ lines, fromFrame, toFrame }) => {
|
|
const frame = useCurrentFrame();
|
|
const LINE_STAGGER = 18; // 줄 간 등장 간격(frame)
|
|
|
|
return (
|
|
<AbsoluteFill
|
|
style={{
|
|
justifyContent: "flex-start",
|
|
alignItems: "center", // 가로 중앙 정렬
|
|
flexDirection: "column",
|
|
paddingTop: 230, // 상단 (~18%) 높이 유지
|
|
gap: 8,
|
|
}}
|
|
>
|
|
{lines.map((line, i) => {
|
|
const start = fromFrame + i * LINE_STAGGER;
|
|
const opacity = interpolate(
|
|
frame,
|
|
[start, start + 12, toFrame - 12, toFrame],
|
|
[0, 1, 1, 0],
|
|
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" },
|
|
);
|
|
const rise = interpolate(frame, [start, start + 16], [16, 0], {
|
|
extrapolateLeft: "clamp",
|
|
extrapolateRight: "clamp",
|
|
});
|
|
return (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
opacity,
|
|
transform: `translateY(${rise}px)`,
|
|
fontFamily: serifFont,
|
|
fontWeight: 700,
|
|
fontSize: 46,
|
|
color: "#FFFFFF",
|
|
textAlign: "center",
|
|
letterSpacing: 1,
|
|
textShadow: "0 2px 16px rgba(0,0,0,0.85)",
|
|
}}
|
|
>
|
|
{line}
|
|
</div>
|
|
);
|
|
})}
|
|
</AbsoluteFill>
|
|
);
|
|
};
|