Inception Fold
Corner reveal effect that peels back like a page fold.
Main Features of Inception Fold
How to Use Inception Fold in Next.js
Installation Guide for Inception Fold
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1000&auto=format&fit=crop | Image URL |
backgroundColor | string | bg-zinc-900 | Background color of the component |
containerHeight | string | h-[300vh] | Height of the container |
backgroundColor2 | string | bg-yellow-400 | Secondary background color |
backgroundText | string | SECRET | Background text displayed |
backgroundTextColor | string | text-black | Color of background text |
backgroundTextSize | string | text-[15vw] | Size of background text |
backgroundTextRotation | number | 45 | Rotation of background text in degrees |
backgroundTextOpacity | number | 0.2 | Opacity of background text |
imageWidth | string | w-[400px] | Width of the image |
imageHeight | string | h-[500px] | Height of the image |
imageRotation | number | 12 | Rotation of image in degrees |
imageBorderColor | string | border-white | Border color of image |
imageBorderWidth | string | border-8 | Border width of image |
foldBgColor | string | bg-white | Background color of fold |
foldTitle | string | PEEL | Title text on fold |
foldTitleColor | string | text-black | Color of fold title |
foldTitleSize | string | text-8xl | Size of fold title |
foldDescription | string | Scroll to tear reality | Description text on fold |
foldDescriptionColor | string | text-gray-500 | Color of fold description |
foldDescriptionSize | string | text-2xl | Size of fold description |
foldPadding | string | p-20 | Padding of fold content |
rotateRange | [number, number] | [0, -90] | Rotation range in degrees |
xRange | [number, number] | [0, -500] | X position range |
yRange | [number, number] | [0, 500] | Y position range |
borderRadiusRange | [string, string] | ["0%", "50%"] | Border radius range |
scrollOffset | [string, string] | ["start start", "end end"] | Scroll offset configuration |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for creative portfolios, 'Easter egg' reveals, and Next.js applications that want to emphasize discovery. Use this React component when you want to create a tactile 'peel back' effect that reveals hidden content in the corner of the screen.
Best Practices
Maintain consistent spacing within your design system by ensuring the hidden text doesn't overflow when the fold is open. Follow React best practices by using high-contrast colors for the `foldBgColor` to make the peel effect obvious. Optimize for performance by keeping the `containerHeight` sufficient for a slow, satisfying peel.
Why This Component Matters in Modern UI Development
Corner peels and page folds add a layer of physical interaction to digital interfaces. This reusable React component provide a robust implementation of complex 2D transitions that add semantic authority and surprise to your real-world application architecture.
Frequently Asked Questions
QCan I peel from a different corner?
The current implementation is optimized for a top-right peel, but the rotation and X/Y ranges can be mirrored for any corner of the screen.
QWhat should I put under the fold?
The hidden layer is perfect for 'secret' links, social media icons, or high-impact keywords that define your brand.
QIs it responsive?
Yes, the component uses viewport-based text sizes and flexible container heights to ensure the peel effect works on all screen sizes.