Skip to main content

Background Scaling Effect

Temper includes native iOS-style page background scaling. When the drawer opens, the application content smoothly scales down, rounds its corners, and recedes into the background.

Step 1: Wrap App Layout​

Wrap your main application root content with the data-temper-drawer-wrapper attribute:

app/layout.tsx or App.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {/* Highlighted wrapper attribute */}
        <div data-temper-drawer-wrapper>
          {children}
        </div>
      </body>
    </html>
  );
}

Step 2: Enable shouldScaleBackground​

Pass the shouldScaleBackground prop to Drawer.Root:

<Drawer.Root shouldScaleBackground>
  <Drawer.Trigger>Open Sheet</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay className="fixed inset-0 bg-black/40" />
    <Drawer.Content className="bg-white fixed bottom-0 left-0 right-0 p-6 rounded-t-2xl">
      <Drawer.Title>Scalable Drawer</Drawer.Title>
      {/* Content */}
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>

Customizing Background Scaling Behavior​

setBackgroundColorOnScale​

By default (setBackgroundColorOnScale = true), Temper dynamically sets document.body.style.backgroundColor = 'black' while the drawer is open to match iOS native modal presentation.

To disable body background color changes:

<Drawer.Root shouldScaleBackground setBackgroundColorOnScale={false}>
  {/* Drawer components */}
</Drawer.Root>

Custom Styling Attributes​

Temper automatically applies CSS dataset flags during drag interactions:

  • [data-temper-drawer-wrapper]
  • [data-temper-drawer-wrapper][data-temper-drawer-visible="true"]

You can add custom transition styles in CSS:

[data-temper-drawer-wrapper] {
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}