pricing-focus

1import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
3import { EASING_ENTER, EASING_EXIT } from "@/remotion/lib/timing";
4 
5export type PricingFocusProps = {
6  tiers?: Array<{ name: string; price: string; featured?: boolean }>;
7};
8 
9const DEFAULT_TIERS = [
10  { name: "Starter", price: "$0" },
11  { name: "Studio", price: "$29", featured: true },
12  { name: "Team", price: "$99" },
13];
14 
15/** Featured card locks focus over this window — non-featured cards defocus in step. */
16const FOCUS_START = 30;
17const FOCUS_END = 50;
18 
19/** Exit beat: cards leave staggered, featured card last so it holds the eye longest. */
20const EXIT_START = 138;
21const EXIT_STAGGER = 6;
22const EXIT_DURATION = 30;
23 
24export const PricingFocus: React.FC<PricingFocusProps> = ({
25  tiers = DEFAULT_TIERS,
26}) => {
27  const frame = useCurrentFrame();
28  const { width, height } = useVideoConfig();
29  const safe = getSafeAreaPadding({ width, height });
30  const focusIndex = tiers.findIndex((t) => t.featured);
31 
32  // Shared focus progress — drives the defocus of non-featured cards once the
33  // featured card locks in. Computed once (not per-card) so the "always 0"
34  // dead-code trap (blur keyed to a per-card value only set for the featured
35  // card) can't recur.
36  const focus = interpolate(frame, [FOCUS_START, FOCUS_END], [0, 1], {
37    easing: EASING_ENTER,
38    extrapolateLeft: "clamp",
39    extrapolateRight: "clamp",
40  });
41 
42  // Gentle breathing on the featured card during the hold, so the still beat
43  // reads as alive rather than frozen.
44  const breathe =
45    frame > FOCUS_END && frame < EXIT_START
46      ? Math.sin((frame - FOCUS_END) / 18) * 0.012
47      : 0;
48 
49  return (
50    <AbsoluteFill style={{ background: "#080810" }}>
51      <div
52        style={{
53          display: "flex",
54          gap: 24,
55          justifyContent: "center",
56          alignItems: "flex-end",
57          height: "100%",
58          padding: `${safe.paddingTop}px ${safe.paddingRight}px ${safe.paddingBottom}px ${safe.paddingLeft}px`,
59        }}
60      >
61        {tiers.map((tier, i) => {
62          const isFeatured = i === focusIndex;
63          const enter = interpolate(frame, [i * 8, i * 8 + 24], [0, 1], {
64            easing: EASING_ENTER,
65            extrapolateLeft: "clamp",
66            extrapolateRight: "clamp",
67          });
68          const lift = isFeatured ? focus : 0;
69 
70// … truncated