SSGOI

sheet

Sheet opens a temporary task from the bottom on mobile or web while preserving a visual relationship with the page beneath it.

Drill-in — List → detail, going one level deeper.

When this motion fits

When to use
Use it for compose, filters, settings, or a short task that should keep its origin in context.
What moves
The task rises from the bottom; the background can stay still, scale back, or blur.
Avoid when
Avoid it for a permanent top-level destination or a deep flow that needs its own navigation stack.

Add it to a route rule

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

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

const config = {
  transitions: [
    { on: "/compose", transition: sheet() },
  ],
};

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.

  • static

    type: staticdefault

    The sheet rises while the page underneath stays fixed. The clearest, quietest option.

    A temporary task slides up as a bottom sheet over a stationary page.
    Mobile · Gamja Market
    A YouTube Music now-playing screen rises over the stationary desktop web app, then closes back to the home screen.
    Web · YouTube Music
    sheet({ type: "static" })

    Open live demo 1 · Open live demo 2Opens at the source screen

  • scale

    type: scale

    The page scales back as the sheet rises, creating stacked-card depth.

    A compose sheet rises while the page beneath scales into the background.
    sheet({ type: "scale" })

    Open live demoOpens at the source screen

  • blur

    type: blur

    A live backdrop sits between the two pages, blurring and dimming the origin while the sheet rises above it.

    A compose sheet rises while the originating page recedes into blur.
    sheet({ type: "blur" })

    Open live demoOpens at the source screen

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

Read next