SSGOI

film

Film builds a cinematic scene at runtime, keeps video live, and coordinates the pages and viewfinder corners with multiple springs.

Expressive — Selected moments where motion supports the product tone.

When this motion fits

When to use
Use it for a selected cinematic moment, title sequence, or media experience.
What moves
Whole pages shrink and tile through the frame while corner borders reinforce the film treatment.
Avoid when
Avoid it for frequent or simple navigation, and on performance-critical flows.

Add it to a route rule

film() sets the motion; the rule around it decides which navigations get it. The config shape is the same in every framework.

import { film } from "@ssgoi/react/view-transitions";

const config = {
  transitions: [
    {
      from: "/list",
      to: "/detail/*",
      transition: film(),
    },
  ],
};

Pattern forms, priority and the scroll defaults that come with each rule shape are on Route rules.

Configurations

type, variant and option are independent. Each clip is recorded from a demo published on ssgoi.dev. Combinations without a published demo keep the API details without a substitute clip.

  • default

    default

    A runtime scene keeps video live while the pages and viewfinder corners move on coordinated spring timelines.

    Two cinematic pages shrink and tile through framed corners.
    film()

    Open live demoOpens at the source screen

  • borderColor

    option: borderColor

    This does not change the motion. It only customizes the cinematic corner-border color.

    film({ options: { borderColor: "#f97316" } })

Agent guide: /llms/transitions/film.txt — every prop, the required markup, and a config fragment as plain text.

Read next