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.

image-expand

remotionui/image-expand

RemovedBlock

Thumbnail expands fullscreen

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/image-expand.json

Source

registry/bases/default/compositions/image-expand/index.tsxremotionui.com/r/image-expand.json

1import { AbsoluteFill, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { EASING_ENTER, EASING_EXIT } from "@/remotion/lib/timing";
3 
4export type ImageExpandProps = {
5  accentColor?: string;
6};
7 
8export const ImageExpand: React.FC<ImageExpandProps> = ({
9  accentColor = "#e8b86d",
10}) => {
11  const frame = useCurrentFrame();
12  const { fps, width, height } = useVideoConfig();
13 
14  // Enter: the frame expands from a small card to fill the canvas.
15  const expand = interpolate(frame, [20, 70], [0, 1], {
16    easing: EASING_ENTER,
17    extrapolateLeft: "clamp",
18    extrapolateRight: "clamp",
19  });
20 
21  // Hold-with-life: once expanded, the glow breathes gently instead of
22  // sitting frozen while we wait for the exit beat to begin.
23  const breathe = interpolate(
24    Math.sin((frame / fps) * Math.PI * 1.1),
25    [-1, 1],
26    [0.85, 1],
27  );
28  const holdEnvelope = interpolate(frame, [70, 85, 95, 110], [0, 1, 1, 0], {
29    extrapolateLeft: "clamp",
30    extrapolateRight: "clamp",
31  });
32 
33  // Exit: the frame settles inward and fades, closing the beat out. Opacity
34  // fades linearly across the window so the beat reads clearly well before
35  // the end (an ease-in curve would keep it near-invisible until the last
36  // few frames); the shape settle keeps its ease-in curve for feel.
37  const exitWindowStart = 90;
38  const exitWindowEnd = 115;
39  const exit = interpolate(frame, [exitWindowStart, exitWindowEnd], [0, 1], {
40    easing: EASING_EXIT,
41    extrapolateLeft: "clamp",
42    extrapolateRight: "clamp",
43  });
44  const exitOpacityProgress = interpolate(frame, [exitWindowStart, exitWindowEnd], [0, 1], {
45    extrapolateLeft: "clamp",
46    extrapolateRight: "clamp",
47  });
48 
49  const w = interpolate(expand, [0, 1], [width * 0.32, width]);
50  const h = interpolate(expand, [0, 1], [height * 0.28, height]);
51  const radius = interpolate(expand, [0, 1], [24, 0]) + exit * 32;
52  const scale = 1 - exit * 0.06;
53  const opacity = 1 - exitOpacityProgress;
54  const glowPulse = interpolate(breathe, [0.85, 1], [1, 1.25]);
55  const glowStrength = 60 * expand * (1 + holdEnvelope * (glowPulse - 1));
56 
57  return (
58    <AbsoluteFill style={{ background: "#080810", display: "grid", placeItems: "center" }}>
59      <div
60        style={{
61          width: w,
62          height: h,
63          borderRadius: radius,
64          background: `linear-gradient(135deg, ${accentColor}44, rgba(45,212,191,0.2))`,
65          border: `1px solid ${accentColor}55`,
66// … truncated