Home

Library

Code components

Search a component or section

Last updated on:

Updated on:

August 3, 2026

Copy code

3D Bend effect for pages

3D Bend Effect wraps your entire Framer page onto the face of a cube, so the top and bottom edges fold away in real 3D as visitors scroll. Drop this component anywhere on the page, and it takes over the effect as you scroll.

...

Variants:

Theme:

Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Copying disabled

Preview the component

How to use the component?

Copy the 3D Bend component into your project.
Unable to copy? Sign in and try again.
Or you can copy the component directly from the Framer marketplace.

Drop it anywhere on the page. There is nothing to connect. On preview and publish, it automatically wraps every other layer on that page into its own scroller, so place it directly on the page (not inside a section or a stack) and use only one per page. Size and position on canvas don't matter; it renders as a full-screen overlay.

Customize in the properties panel, with the layer selected, set the following to shape the bend.

Fold Zone - How tall the folded band is at each edge, in pixels. Larger values wrap more of the page over the edge.
Angle - How far the edges rotate away at full fold. Around 80° reads like a real cube face.
Rounding & Smooth Steps - Rounding softens the crease into a curve, Smooth Steps sets how many hinged segments build that curve. More steps look smoother but cost more performance.
Perspective - Depth of the 3D camera. Lower values exaggerate the fold, higher values keep it subtle.
Direction - Fold Out bends the edges away from the visitor, Fold In bends them toward the visitor.
Ease Distance & Smoothing - Ease Distance is the scroll range over which the fold opens and flattens, Smoothing adds inertia so the motion trails the scroll.
Top Edge / Bottom Edge - Turn either fold off if you only want one edge to bend.
Tumble & Tilt - Tumble rocks the whole page when visitors overscroll past the ends, Tilt adds a light cursor-following lean. Set either to 0 to disable.
Scrollbar & Z Index - Show or hide the scrollbar, and set the stacking order of the overlay.

Preview to see the effect. The canvas shows a static placeholder by design; press Preview (or publish) and scroll to see the page bend over its edges. Reduced-motion visitors automatically get the effect without tumble and tilt.
Good to know: Because the page renders inside a 3D transform, sticky navs, floating CTAs, and cookie banners position against the overlay instead of the viewport, and in-page anchor links no longer drive the scroll. Best used on pages built without those.
Check out more components like this on our main collection page (All code components).
If you need the full React code file of this component, sign in and copy the code.

Where to use?

Best placements:

Portfolio and agency sites - Give a single-page portfolio a signature scroll that visitors remember long after they leave.
Product and campaign landing pages - Product drops, launch pages and teaser sites where the scroll itself is part of the story.
Case studies and project pages - Long-form scrolling pages that need motion between sections without extra animation work.
Coming-soon and 404 pages - Short pages with little content, where one bold interactive effect carries the whole experience.
Awwwards-style experimental pages - Any dark, immersive layout aiming for a 3D, editorial feel.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.

Life time access

Save hundreds of hours

10x design speed

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

3D Bend effect for pages

...

Variants:

Theme:

Please note: This component is available only for active license holders. Sign in with your license key or purchase one.

Copying disabled

Preview the component

How to use the component?

Copy the 3D Bend component into your project.
Unable to copy? Sign in and try again.
Or you can copy the component directly from the Framer marketplace.

Drop it anywhere on the page. There is nothing to connect. On preview and publish, it automatically wraps every other layer on that page into its own scroller, so place it directly on the page (not inside a section or a stack) and use only one per page. Size and position on canvas don't matter; it renders as a full-screen overlay.

Customize in the properties panel, with the layer selected, set the following to shape the bend.

Fold Zone - How tall the folded band is at each edge, in pixels. Larger values wrap more of the page over the edge.
Angle - How far the edges rotate away at full fold. Around 80° reads like a real cube face.
Rounding & Smooth Steps - Rounding softens the crease into a curve, Smooth Steps sets how many hinged segments build that curve. More steps look smoother but cost more performance.
Perspective - Depth of the 3D camera. Lower values exaggerate the fold, higher values keep it subtle.
Direction - Fold Out bends the edges away from the visitor, Fold In bends them toward the visitor.
Ease Distance & Smoothing - Ease Distance is the scroll range over which the fold opens and flattens, Smoothing adds inertia so the motion trails the scroll.
Top Edge / Bottom Edge - Turn either fold off if you only want one edge to bend.
Tumble & Tilt - Tumble rocks the whole page when visitors overscroll past the ends, Tilt adds a light cursor-following lean. Set either to 0 to disable.
Scrollbar & Z Index - Show or hide the scrollbar, and set the stacking order of the overlay.

Preview to see the effect. The canvas shows a static placeholder by design; press Preview (or publish) and scroll to see the page bend over its edges. Reduced-motion visitors automatically get the effect without tumble and tilt.
Good to know: Because the page renders inside a 3D transform, sticky navs, floating CTAs, and cookie banners position against the overlay instead of the viewport, and in-page anchor links no longer drive the scroll. Best used on pages built without those.
Check out more components like this on our main collection page (All code components).
If you need the full React code file of this component, sign in and copy the code.

Where to use?

Best placements:

Portfolio and agency sites - Give a single-page portfolio a signature scroll that visitors remember long after they leave.
Product and campaign landing pages - Product drops, launch pages and teaser sites where the scroll itself is part of the story.
Case studies and project pages - Long-form scrolling pages that need motion between sections without extra animation work.
Coming-soon and 404 pages - Short pages with little content, where one bold interactive effect carries the whole experience.
Awwwards-style experimental pages - Any dark, immersive layout aiming for a 3D, editorial feel.

LIMITED TIME OFFER

Launch amazing websites with

Framerstacks

Still trying to design and launch a website from scratch? Check out 800+ pre-built Framer components and sections that 10x your design speed.

Life time access

Save hundreds of hours

10x design speed

Weekly new releases

Premium designs

Color theme responsiveness

Starts from

$79.00

$99

One-time

Buy now

Library overview

Framerstacks hosts one of the largest collections of pre-built Framer components and website sections. With 200+ professionally designed components and 800+ variants.

Our library spans 40+ webpage section categories, enabling creators to build beautiful, high-performance websites in Framer faster than ever.

Explore the main library page.

Contribution

Have something creative on your mind? Or wish to become a contributor inside Framerstacks?

You're welcome. Join as a contributor and help to shape the future of high-quality Framer components and sections gallery. Head over to the submission page and contribute.