Animation
3D Shiny Book Interaction in Framer
This is a recreation of the shiny 3D book hover interaction from the Stripe Press website. It uses 3D transforms to bring the book to life in Framer. Feel free to remix the project and see how you can build something like this without writing any code.
Created by
About the resource
To create the shiny 3D book interaction, I started by projecting the book cover in 3D space using 3D transforms. Each visible side of the book—front cover, back, spine, top, bottom and right —was built using separate frames to add depth and volume, creating a more realistic structure.
For the cover image, I used GPT-4o to recreate the book image. To recreate the canvas or linen texture on the surface, I generated a black-and-white linen texture overlay using AI and applied it to the book frames. I used a high z-index and experimented with overlay blending at different opacities to achieve a subtle but realistic texture.
For the shiny text effect, I converted the text layers into SVGs and placed them inside a masked frame. Inside this mask, I added within a radial gradient layer. To bring the shine to intersect, I used our parallax floating component, making the light layer respond subtly to cursor movement—mimicking a reactive, glossy finish as you hover over the book.
Finally, I wrapped the book in a 3D book holder frame and connected it to the 3D Look component so it follows the cursor as we’re hovering around.
About the resource
To create the shiny 3D book interaction, I started by projecting the book cover in 3D space using 3D transforms. Each visible side of the book—front cover, back, spine, top, bottom and right —was built using separate frames to add depth and volume, creating a more realistic structure.
For the cover image, I used GPT-4o to recreate the book image. To recreate the canvas or linen texture on the surface, I generated a black-and-white linen texture overlay using AI and applied it to the book frames. I used a high z-index and experimented with overlay blending at different opacities to achieve a subtle but realistic texture.
For the shiny text effect, I converted the text layers into SVGs and placed them inside a masked frame. Inside this mask, I added within a radial gradient layer. To bring the shine to intersect, I used our parallax floating component, making the light layer respond subtly to cursor movement—mimicking a reactive, glossy finish as you hover over the book.
Finally, I wrapped the book in a 3D book holder frame and connected it to the 3D Look component so it follows the cursor as we’re hovering around.
About the resource
To create the shiny 3D book interaction, I started by projecting the book cover in 3D space using 3D transforms. Each visible side of the book—front cover, back, spine, top, bottom and right —was built using separate frames to add depth and volume, creating a more realistic structure.
For the cover image, I used GPT-4o to recreate the book image. To recreate the canvas or linen texture on the surface, I generated a black-and-white linen texture overlay using AI and applied it to the book frames. I used a high z-index and experimented with overlay blending at different opacities to achieve a subtle but realistic texture.
For the shiny text effect, I converted the text layers into SVGs and placed them inside a masked frame. Inside this mask, I added within a radial gradient layer. To bring the shine to intersect, I used our parallax floating component, making the light layer respond subtly to cursor movement—mimicking a reactive, glossy finish as you hover over the book.
Finally, I wrapped the book in a 3D book holder frame and connected it to the 3D Look component so it follows the cursor as we’re hovering around.
The 3D book setup with shiny text layer for the 3D book interaction.
The 3D book setup with shiny text layer for the 3D book interaction.
The 3D book setup with shiny text layer for the 3D book interaction.
