Container Scroll 3d

A container that rotates in 3D as you scroll to reveal its content, flattening out from a tilted-back angle to push the view right up to the viewer.

As the page scrolls, the container flattens out from a tilted-back perspective to face the viewer — a good fit for revealing a product screen, dashboard, or chart in a hero or feature section. useScroll binds to the element's travel through the viewport, so the flattening, scaling, and shadow are all driven by scroll progress.

Loading preview…

npx shadcn@latest add https://webberui.com/r/container-scroll-3d.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Initial elevation (degrees)rotate

Initial zoomscaleFrom

1.05

Title lift distance (px)titleTranslate

Perspective depth (px)perspective

1000

<ContainerScroll3d />

Installation

npx shadcn@latest add https://webberui.com/r/container-scroll-3d.json

Or, once registries are configured in components.json, install it as @webberui/container-scroll-3d.

Usage

import { ContainerScroll3d } from "@/components/ui/container-scroll-3d";

<ContainerScroll3d title={<h2 className="text-3xl font-bold">Scroll to reveal</h2>}>
  <img src="/dashboard.png" alt="Dashboard" className="w-full" />
</ContainerScroll3d>;

children is the content revealed once the card flattens out, and it can be any JSX: a screenshot, a video, a chart, or a live component. title is optional and rises slightly while fading in as you scroll.

Props

Prop	Type	Default	Description
`title`	`React.ReactNode`	—	Title above the card; rises and fades in with the scroll
`children`	`React.ReactNode`	—	The content revealed inside the card
`rotate`	`number`	`22`	Initial backward tilt angle (deg); reaches zero and flattens mid-way
`scaleFrom`	`number`	`1.05`	Initial scale, converging to `1` once flattened
`titleTranslate`	`number`	`40`	Distance the title rises (px)
`perspective`	`number`	`1000`	3D perspective depth (px); smaller values exaggerate the perspective
`container`	`React.RefObject`	—	Ref of the nested scroll container; the window is the scroll container by default
`className`	`string`	—	Styling for the outer container
`cardClassName`	`string`	—	Styling for the card frame

Accessibility

When the user has "reduce motion" enabled at the system level, the card is presented flat and static with no scroll transforms applied
useScroll binds to the element's travel through the viewport, so computation stops once it leaves the viewport and no extra resources are consumed