Parallax Scroll Header UI: Smooth Depth on Mobile

A parallax header, where a hero image moves slower than the content scrolling over it, adds a premium sense of depth to profile and detail screens. The short answer: build it from a free VP0 design, drive the effect from the scroll offset, and keep it perfectly smooth, because the moment parallax stutters, it cheapens the whole app. Smoothness has headroom on modern devices: ProMotion displays refresh up to 120Hz, roughly 2x a standard screen, so there is no excuse for a janky header.

What makes parallax feel premium

Parallax works on subtlety. The header image should move at a fraction of the scroll speed, and often scale slightly or stay pinned while the content slides up over it. As the user scrolls past it, the header should gracefully collapse into a compact, solid navigation bar with the title, so it stays useful rather than just disappearing. Two things make or break it: performance (it must track the finger at a steady frame rate) and readability (any text over the image needs a scrim or shadow so it stays legible against varied photos). Apple’s Human Interface Guidelines favor motion that supports content, not motion for its own sake.

Build it from a free design

VP0 is a free iOS design library for AI builders. Pick a profile, detail, or hero design, copy its link, and have Cursor or Claude Code rebuild it in SwiftUI or React Native. Drive the header transform directly from the scroll offset so it is perfectly in sync, and keep the work on the main-thread-friendly path (in React Native, use the native driver for scroll-linked animation) to hold a steady frame rate. Add a scrim gradient behind any overlaid text, define the collapse into a solid nav bar at a clear threshold, and provide a reduced or static version when Reduce Motion is on. For the navigation bar it collapses into, see iOS 18 custom tab bar UI template, and for polish overall, see how to make my app look better.

Parallax header building blocks

Each detail keeps it smooth and legible.

Element	Job	Get it right
Hero image	The depth layer	Moves slower than content
Scroll link	Drive the effect	Tied to offset, native driver
Scrim	Keep text readable	Gradient behind overlaid text
Collapse	Stay useful	Solid nav bar past a threshold
Reduce Motion	Inclusive	Static fallback when set

Common mistakes

The first mistake is jank: a header that lags the scroll, instantly cheapening the app. The second is unreadable text over a bright or busy photo with no scrim. The third is a header that just vanishes instead of collapsing into a usable nav bar. The fourth is heavy work on every scroll frame (large images, layout thrash) that drops frames. The fifth is ignoring Reduce Motion, which can make parallax nauseating for sensitive users. Smoothness and readability are non-negotiable.

A worked example

Say you have a profile screen. You build it from a VP0 design with a hero photo that scrolls at half speed and scales subtly. Text over it sits on a soft bottom gradient so it stays readable on any photo. As the user scrolls up, the header collapses smoothly into a solid bar with the name and a back button. The animation is driven straight from the scroll offset on the native path, so it holds frame rate even on older devices, and Reduce Motion swaps to a static header. For a refresh interaction on the same screen, see iOS pull-to-refresh Lottie animation free, and for the in-car platform next, see Apple CarPlay audio app UI template.

Key takeaways

• A parallax header adds depth by moving the hero slower than the content.
• Build it from a free VP0 design and drive it from the scroll offset.
• Keep it locked to a steady frame rate; jank cheapens the whole app.
• Add a scrim for readable text and collapse into a solid nav bar.
• Respect Reduce Motion with a static fallback.

Frequently asked questions

How do I build a parallax scroll header? Build it from a free VP0 design, drive the header transform from the scroll offset, move the hero slower than the content, add a scrim for text, and collapse it into a solid nav bar past a threshold.

How do I keep a parallax header smooth? Tie the animation directly to the scroll offset, use the native animation driver (in React Native), avoid heavy per-frame work, and use appropriately sized images so the frame rate stays steady.

Why does my parallax feel janky? Usually too much work per scroll frame: oversized images, layout thrashing, or animation running off the native path. Optimize the image, use scroll-linked native animation, and profile the frame rate.

Should I support Reduce Motion for parallax? Yes. Parallax can cause discomfort for motion-sensitive users, so provide a static header when Reduce Motion is enabled.