Parallax Image 3D is a scroll-driven 3D card component that flips from a fully customizable back face into an image-rich front face as visitors scroll down the page. It pairs a smooth card flip with true image parallax, dynamic specular lighting, and interactive hover tilt — perfect for product reveals, portfolio showcases, and landing page hero moments where first impressions count.
Scroll-driven 3D flip animation with adjustable speed and smooth S-curve easing — no click triggers or interaction setup required
True image parallax on the front face that shifts the background as visitors scroll, creating natural depth and visual richness
Interactive hover tilt that responds to mouse movement
Fully customizable back face with gradient colors, optional background image, decorative patterns (dots, grid, diagonal, noise), and editable tagline, hero text, and prompt
Responsive layout with configurable border radius, text overlay positioning (top, center, bottom), and full Framer font controls for every text element
Front Face
Front Image
Title
Subtitle
Back Face
Color Start / Color End
Gradient Angle
Text Color / Accent Color
Back Image
Pattern (None, Dots, Grid, Diagonal, Noise)
Pattern Opacity
Tagline / Hero Text / Prompt Text
Animation
Flip Speed
Parallax Depth
Scroll Tilt
Hover
Tilt on Hover
Tilt Intensity
Card Style
Border Radius
Text Overlay Opacity
Text Position (Bottom, Center, Top)
Title Color / Subtitle Color
Typography
Title Font
Subtitle Font
Back Tagline Font
Back Hero Text Font
Back Prompt Font
Product reveal cards on e-commerce landing pages and drop announcements
Portfolio hero sections that unveil featured projects as visitors scroll
Storytelling blocks on editorial and campaign pages that reward scrolling with cinematic transitions
Feature highlights on SaaS and app landing pages where depth and motion reinforce a premium brand
Drop it onto your canvas, swap the image, edit the text, and publish. A scroll-stopping 3D reveal in under a minute.
Aidan Looker
