Economic Calendar: Open The Event Detail Only When Context Justifies It

import {AbsoluteFill, Easing, Sequence, interpolate, useCurrentFrame} from "remotion";

const states = ["Upcoming", "Awaiting print", "Released", "Context only"];

export const ReleaseConsoleGate = () => {
  const frame = useCurrentFrame();
  const gate = interpolate(frame, [24, 86], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return (
    <AbsoluteFill style={{background: "#fff8e8", color: "#071528", padding: 72}}>
      <h1 style={{fontSize: 54, lineHeight: 1}}>Read the lifecycle badge before opening detail.</h1>
      <div style={{marginTop: 42, padding: 24, background: "#fffdf7", border: "1px solid rgba(7,21,40,0.16)"}}>
        <div style={{fontSize: 34, fontWeight: 950}}>U.S. CPI release</div>
        <div style={{marginTop: 18, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10}}>
          {states.map((state) => {
            const selected = state === "Released";
            return (
              <div key={state} style={{opacity: selected ? 1 : interpolate(gate, [0, 1], [1, 0.28]), padding: 16, background: selected ? "#dcebe2" : "#f7f1e4", border: "2px solid " + (selected ? "#20724f" : "rgba(7,21,40,0.14)"), fontSize: 22, fontWeight: 900}}>
                {state}
              </div>
            );
          })}
        </div>
      </div>
      <Sequence from={92} layout="none">
        <div style={{marginTop: 30, padding: 22, background: "#071528", color: "#fff8e8", fontSize: 28, fontWeight: 900}}>
          Detail opens for planned review, not for a panic click.
        </div>
      </Sequence>
    </AbsoluteFill>
  );
};