Hero & Presentation / COMPONENT

Scroll Parallax Hero

A scroll-driven perspective reveal hero where a centered heading gives way to decoupled multi-layer parallax cards, expanding to a full-bleed cinematic image and narrative feature cards.

Live preview

Make room for a different perspective.

Look closer.

A study in scale and perspective

A landscape photograph in the image accordion preview

Focus

Look closer.

A study in scale and perspective

Depth

Multi-layer perspective

Decoupled planes move at independent speeds for tactile dimension.

Expansion

Full-bleed scale

The framed view gracefully opens to immerse the entire viewport.

Precision

Harmonic physics

Spring damping and easing curves tuned to feel weighted and steady.

View the Scroll Parallax Hero source on GitHub

How it works

Scrolls smoothly using calibrated spring damping. The hero headline lifts and blurs before the frame expands into full viewport scale with narrative features.

Accessibility

Gracefully honors prefers-reduced-motion preferences by disabling heavy rotational and 3D transforms while preserving clean opacity transitions.

Limitations

Best placed inside scrollable pages with enough scroll length (default 380svh) to allow the stages of perspective and scale to unfold naturally.

Features

  • Decoupled multi-layer floating parallax side cards
  • Full-bleed adaptive viewport expansion
  • Spring-damped physics for natural tactile scroll feel
  • Fully customizable text, images, and feature cards via props
  • Theme-aware colors using global CSS variables
  • Reduced motion fallback support

Installation

Choose the CLI command or install the component manually.

Package manager
$ npx @istmx/ui add scroll-parallax-hero

Copies the install command for your selected package manager.

Dependencies

motionclsxtailwind-merge

Usage

Import the component from the file you copied it to, then use it like any other React component.

Usage
import ScrollParallaxHero from '@/components/ui/scroll-parallax-hero'
 
export default function HeroSection() {
  return (
    <ScrollParallaxHero
      image="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80"
      imageAlt="Circuit board macro photography"
      heroHeading="Make room for\na different perspective."
      sectionHeading="Look closer."
      sectionSubheading="A study in scale and perspective"
    />
  )
}

Composition

Composition
Sticky viewport container with perspective 1400px
Multi-word staggered parallax entrance and exit
Expanding rounded frame with dynamic scale and radius
Narrative feature cards with frosted glass styling
Chapter scrubber and progress tracker

API reference

imagestring

Main image source URL to reveal.

imageAlt?string

Accessible alt text for the main image.

sideImages?[string, string]

Tuple of [leftImage, rightImage] for floating side cards.

heroHeading?string

Opening headline in the sticky hero (supports \n line breaks).

hintText?string

Prompt text next to the scroll indicator (defaults to "Scroll to begin").

sectionHeading?string

Subsequent section heading appearing as the frame expands (defaults to "Look closer.").

sectionSubheading?string

Subheading describing the study or scene.

captionEyebrow?string

Eyebrow tag above the final caption (defaults to "Focus").

captionHeading?string

Heading displayed over the expanded image (defaults to sectionHeading).

captionSubheading?string

Subheading displayed over the expanded image (defaults to sectionSubheading).

marqueeText?string

Repeating background marquee outline text.

chapters?[string, string, string]

Three chapter labels shown in the bottom scrubber.

features?ScrollParallaxHeroFeature[]

Three narrative cards displayed after scrolling over the image.

scrollLength?number

Total scroll container height in svh (defaults to 380).

fullBleed?boolean

Whether the section spans full viewport width even inside constrained containers.

The listed props match the current component implementation.

Data attributes

Scroll Parallax Hero does not expose custom data attributes.

Examples

ScrollParallaxHero creates a cinematic pinned scroll experience. As you scroll, the opening headline lifts and blurs away, giving way to decoupled floating side cards and an expanding frame that fills the screen with narrative feature cards.

Credits & inspiration

Created by Aryan (istmX) for ISTMX. The source-first, copy-and-own philosophy is inspired by shadcn/ui. About the creator