Motion Studio

Pop In

A punchy spring-driven title: the headline scales and bounces in as a single unit. Best for short, high-impact one-liners.

Preview

Open editor

When to use

Spring physics — damping, stiffness, mass — drive the headline from scale(0.55) up past scale(1.0) and settle. The whole title arrives as a single unit, no per-word stagger, with a satisfying micro-overshoot.

Reach for this when the headline is short and punchy: a name, a number, a single word. Long headlines lose their impact when they have to bounce in as a block. The default fields lean warm — pair a saturated backgroundColor with a near-black textColor for poster energy.

Props

NameTypeDefault
headlinestring"Boom."
subtitlestring"Just like that."

Composition

ID
TitlePopup
Resolution
1920×1080
FPS
60
Duration
1.7s

Source

Copy or download the React source — drop it into your own Remotion project. The only runtime dependency is remotion.

"use client";
import { AbsoluteFill, Easing, interpolate } from "remotion";
import { useDesignFrame } from "../../use-design-frame";
import { useFontReady } from "../../use-font-ready";
import {
  getSubtitleColor,
  resolveTitleStyle,
  snap,
  type TitleProps,
} from "../title-shared";

export type TitlePopupProps = TitleProps;

const APPLE_EASE = Easing.bezier(0.16, 1, 0.3, 1);
const POP_EASE = Easing.out(Easing.back(2));

const HEADLINE_START = 6;
const SCALE_DURATION = 22;
const OPACITY_DURATION = 10;
const SUBTITLE_DELAY = 26;
const SUBTITLE_DURATION = 26;

export const TitlePopup: React.FC<TitlePopupProps> = ({
  headline,
  subtitle,
  clipStyle,
}) => {
  const frame = useDesignFrame();
  const s = resolveTitleStyle(clipStyle);
  useFontReady(s.fontFamily);

  const scaleProgress = interpolate(
    frame,
    [HEADLINE_START, HEADLINE_START + SCALE_DURATION],
    [0, 1],
    {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
      easing: POP_EASE,
    },
  );
  const scale = 0.4 + scaleProgress * 0.6;

  const opacity = interpolate(
    frame,
    [HEADLINE_START, HEADLINE_START + OPACITY_DURATION],
    [0, 1],
    {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
    },
  );

  const subtitleStart = HEADLINE_START + SUBTITLE_DELAY;
  const subtitleProgress = interpolate(
    frame,
    [subtitleStart, subtitleStart + SUBTITLE_DURATION],
    [0, 1],
    {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
      easing: APPLE_EASE,
    },
  );

  return (
    <AbsoluteFill
      style={{
        background: s.background,
        color: s.color,
        fontFamily: s.fontFamily,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "0 80px",
        textAlign: "center",
      }}
    >
      <h1
        style={{
          fontSize: 132,
          fontWeight: 700,
          letterSpacing: "-0.045em",
          lineHeight: 1.05,
          margin: 0,
          opacity,
          transform: `scale(${scale})`,
        }}
      >
        {headline}
      </h1>

      {subtitle.trim() && (
        <p
          style={{
            fontSize: 38,
            fontWeight: 400,
            letterSpacing: "-0.012em",
            margin: "32px 0 0",
            color: getSubtitleColor(s.color),
            opacity: subtitleProgress,
            transform: `translate3d(0, ${snap((1 - subtitleProgress) * 14)}px, 0)`,
          }}
        >
          {subtitle}
        </p>
      )}
    </AbsoluteFill>
  );
};
Save as TitlePopup/TitlePopup.tsx
TypewriterFade In