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.

Questions or custom requests?

• We design and build custom Framer components. Get in touch at contact@teampixel.com.au.