About Parallax Image 3D

What is Parallax Image 3D?

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.

Core Features

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

Controls inside Framer

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

Best use cases

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.