Animations & Motion
Inception Fold
Corner reveal effect that peels back like a page fold.
scrollrevealfoldcornerpeel
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 |