Cinematic Image

Image

Cinematic scale-down settle (110% → 100%) for large images in an overflow-hidden frame.

hero.jpg

detail.jpg

Installation

One command drops the source into your repo — editable, with the provider and motion pulled in automatically.

npx shadcn add https://motion.asmitsah.dev/r/cinematic-image.json

PrerequisiteInstall the provider base first

This component imports from @/lib/motion and needs <MotionProvider> mounted in your root layout — install the base once, before copying this component.

npx shadcn add https://motion.asmitsah.dev/r/provider.json

Step 1Install the runtime dependency

npm install motion

Step 2Copy the source into components/motion/cinematic-image.tsx

components/motion/cinematic-image.tsx

"use client";

import * as m from "motion/react-m";
import type { CSSProperties, ReactNode } from "react";
import { cinematicScale, durations, ease, viewportOnce } from "@/lib/motion";

type CinematicImageProps = {
  children: ReactNode;
  className?: string;
  style?: CSSProperties;
};

/**
 * Cinematic scale-DOWN settle (110% → 100%) for LARGE images only.
 * The wrapper (or a parent) MUST be `overflow-hidden` so the 1.1 scale is
 * clipped — otherwise the oversized image overflows and shifts layout.
 * Never apply this to titles/text; those stay a straight rise, no scale.
 */
export function CinematicImage({ children, className, style }: CinematicImageProps) {
  return (
    <m.div
      className={className}
      style={style}
      initial={cinematicScale.initial}
      whileInView={cinematicScale.animate}
      viewport={viewportOnce}
      transition={{ duration: durations.slow, ease: ease.out }}
    >
      {children}
    </m.div>
  );
}

Usage

Basic

The wrapper (or a parent) must be overflow-hidden — the 1.1 scale is clipped there, never left to overflow and shift layout.

import { CinematicImage } from "@/components/motion/cinematic-image";
import Image from "next/image";

<div className="overflow-hidden rounded-sm">
  <CinematicImage>
    <Image src="/hero.jpg" alt="" width={1600} height={900} className="h-full w-full object-cover" />
  </CinematicImage>
</div>

Full-bleed hero

Large, single-focal images only — this is a deliberate scale-DOWN settle (110% → 100%), never applied to titles or text.

<div className="overflow-hidden">
  <CinematicImage className="h-[70vh] w-full">
    <Image src="/cover.jpg" alt="" fill className="object-cover" />
  </CinematicImage>
</div>

Props

Prop	Type	Default	Description
children	ReactNode	—	The large image (or media) that scales down into place.
className	string	—	Passed straight through — CinematicImage becomes your layout element. Must NOT set overflow-hidden itself; that belongs on a parent frame.
style	CSSProperties	—	Inline style passthrough.