diff --git a/apps/videos/src/components/ShieldIcon.tsx b/apps/videos/src/components/ShieldIcon.tsx new file mode 100644 index 00000000..576cb499 --- /dev/null +++ b/apps/videos/src/components/ShieldIcon.tsx @@ -0,0 +1,55 @@ +import { evolvePath } from "@remotion/paths"; +import type React from "react"; +import { interpolate, useCurrentFrame } from "remotion"; +import { EASE } from "@/lib/motion"; + +const SHIELD_PATH = "M50 5 L90 25 L90 55 C90 80 70 95 50 100 C30 95 10 80 10 55 L10 25 Z"; + +export const ShieldIcon: React.FC<{ + size: number; + startFrame: number; + duration?: number; + fillOpacity?: number; + style?: React.CSSProperties; +}> = ({ size, startFrame, duration = 35, fillOpacity = 0, style }) => { + const frame = useCurrentFrame(); + const progress = interpolate(frame, [startFrame, startFrame + duration], [0, 1], { + extrapolateLeft: "clamp", + extrapolateRight: "clamp", + easing: EASE.enter, + }); + + const { strokeDasharray, strokeDashoffset } = evolvePath(progress, SHIELD_PATH); + + return ( + + + + + ); +};