/** * UICard - カードアニメーション - ホバーエフェクト */ import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from "remotion"; import { C, lerp, font } from "@/remotion-vendor/common"; export const UICard = ({ startDelay = 0 }: { startDelay?: number; }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // メインカードのアニメーション const mainProgress = spring({ frame: frame - startDelay, fps, config: { damping: 20, stiffness: 100 }, }); // サブカードのアニメーション const subProgress = spring({ frame: frame - startDelay - 15, fps, config: { damping: 15, stiffness: 150 }, }); // ホバーエフェクト（フレームベース） const hoverStart = startDelay + 50; const isHovered = frame >= hoverStart; const hoverScale = isHovered ? 1.02 : 1; return ( {/* 背景装飾ライン */}

{/* 左上のラベル */}

FEATURED WORK

{/* メインカード（大きく左寄り） */}

{/* カード内のアクセントライン */}

{/* コンテンツエリア */}

01 — PROJECT

Brand
Identity

Complete visual identity system including logo, typography, and brand guidelines.

{/* 下部のタグ */}

{["Branding", "Strategy"].map((tag) => (

{tag}

))}

{/* サブカード（右側、小さめ、上にオフセット） */}

NEXT UP

Digital Platform

Web application design and development

{/* 右下の番号装飾 */}

); };

UI Card

Install