This component no longer exists. It was in remotionui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-11 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

media-frame

remotionui/media-frame

RemovedBlock

One piece of media presented: the frame opens like a shutter under a slow push, then the title masks up and the caption settles

Live preview

live · rendered by the registry

Rendered by remotionui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://remotionui.com/r/media-frame.json

Source

registry/bases/default/scenes/media-frame/index.tsxremotionui.com/r/media-frame.json · first 6 KB

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { Video } from "@remotion/media";
3import { Img, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
4import { CODE_THEMES } from "@/remotion/lib/code-syntax";
5import { getSafeAreaPadding } from "@/remotion/lib/layout";
6import { EASING } from "@/remotion/lib/motion-tokens";
7import {
8  getMediaObjectFitStyle,
9  isVideoSource,
10  type MediaFit,
11} from "@/remotion/lib/media-utils";
12 
13const { fontFamily } = loadFont("normal", {
14  weights: ["400", "500", "600", "700"],
15  subsets: ["latin"],
16});
17 
18export type MediaFrameProps = {
19  src: string;
20  /** Headline above the frame. */
21  title?: string;
22  /** Supporting line under the frame. */
23  caption?: string;
24  /** Small label above the title — chapter, source, timestamp. */
25  eyebrow?: string;
26  fit?: MediaFit;
27  /**
28   * Aspect the frame itself is cut to. The frame is sized to this and centred,
29   * so `contain` media fills it instead of sitting in a letterbox.
30   */
31  aspect?: number;
32  /** Corner radius in composition pixels. Defaults to a scaled 20. */
33  radius?: number;
34  backgroundColor?: string;
35  accentColor?: string;
36  theme?: "dark" | "light";
37  /** Animation speed multiplier. */
38  speed?: number;
39};
40 
41/** Beat plan in seconds. */
42const T = {
43  /** Shutter opening on the media. */
44  open: 0,
45  openTo: 0.62,
46  eyebrow: 0.24,
47  title: 0.34,
48  caption: 0.58,
49  /** The slow push runs the whole scene. */
50  push: 6,
51} as const;
52 
53const clamp = {
54  extrapolateLeft: "clamp",
55  extrapolateRight: "clamp",
56} as const;
57 
58/**
59 * One piece of media actually presented: the frame opens on it like a shutter
60 * while a slow push runs underneath, then the title masks up from the frame's
61 * edge and the caption settles beneath — rather than three elements fading in
62 * over a static box.
63 */
64export const MediaFrame: React.FC<MediaFrameProps> = ({
65  src,
66  title,
67  caption,
68  eyebrow,
69  fit = "contain",
70  aspect = 16 / 9,
71  radius,
72  backgroundColor,
73  accentColor = "#E8B86D",
74  theme = "dark",
75  speed = 1,
76}) => {
77  const frame = useCurrentFrame();
78  const { fps, width, height } = useVideoConfig();
79  const palette = CODE_THEMES[theme];
80  const safe = getSafeAreaPadding({ width, height });
81 
82  const at = (seconds: number) => (seconds * fps) / speed;
83  const ease = (from: number, to: number, easing = EASING.enter) =>
84    interpolate(frame, [at(from), at(to)], [0, 1], { easing, ...clamp });
85 
86  const stage = {
87// … truncated