Home

Library

Code components

Search a component or section

Last updated on:

Updated on:

August 7, 2026

Copy code

Set up guide

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. Easy to connect your page content with this code component.

...

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 for FREE from the Framer marketplace.

Drop it on the desktop breakpoint.
Then wrap all of your page sections or containers with a stack and name it "Main". Add an Accessibility tag main.
Drag this stack (Main) outside the desktop breakpoint.
Click on the CubeBend component.
Go to the property panel and choose Main on the content label.
Set the Width of the component to Fill.
Set the Height to 100vh
Add a Max Width property and set a value (1200px is recommended).

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. Value 300px is recommended for a balanced view.
Angle - How far the edges rotate away at full fold. Around 40° is recommended.
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. Fold In is highly recommended.
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.
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

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. Easy to connect your page content with this code component.

...

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 for FREE from the Framer marketplace.

Drop it on the desktop breakpoint.
Then wrap all of your page sections or containers with a stack and name it "Main". Add an Accessibility tag main.
Drag this stack (Main) outside the desktop breakpoint.
Click on the CubeBend component.
Go to the property panel and choose Main on the content label.
Set the Width of the component to Fill.
Set the Height to 100vh
Add a Max Width property and set a value (1200px is recommended).

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. Value 300px is recommended for a balanced view.
Angle - How far the edges rotate away at full fold. Around 40° is recommended.
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. Fold In is highly recommended.
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.
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.