Inception Fold
Corner reveal effect that peels back like a page fold.
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 |
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
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.
FAQ
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.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.