Text Parallax Content (scroll)

TextParallaxContent: Engaging Scroll-Triggered Narratives Unleash a dynamic storytelling experience on your website with TextParallaxContent, a versatile React component designed to blend captivating visuals with compelling narratives. This component creates an immersive scrolling effect where text overlays animate in and out, while a "sticky" image scales and fades, providing a truly engaging user journey. Features Interactive Parallax Effect: As users scroll, a large background image remains "sticky" in the viewport while subtly scaling down and fading out. Simultaneously, a headline and subheading animate into view, crossfade, and then exit, creating a powerful visual and textual interplay. Modular Content Blocks: The component is designed to be easily repeatable. You can stack multiple TextParallaxContent instances to create a series of distinct narrative sections, each with its own image and text, allowing you to tell a sequential story or highlight different aspects of your product or service. Customizable Content: Each instance accepts imgUrl, subheading, and heading props, along with children for additional customizable content below the main parallax section. This allows for flexible integration of more detailed information, calls to action, or other elements. Smooth Animations: Built with Framer Motion, all animations are fluid and performant, ensuring a seamless and delightful user experience. Responsive Design: The component adapts beautifully to various screen sizes, maintaining its visual impact on both desktop and mobile devices. How it Works TextParallaxContent leverages Framer Motion's powerful useScroll and useTransform hooks to link scroll progress to various CSS properties: StickyImage: This sub-component uses useTransform to control the scale and opacity of the image based on scroll position, creating the "sticky" and fading effect. OverlayCopy: This sub-component also uses useTransform to animate the y position and opacity of the text overlays, making them slide and fade in and out as they pass through the viewport. useRef: Used to target specific DOM elements for scroll tracking, ensuring precise animation triggers. TextParallaxContent is ideal for "about us" sections, product features, service descriptions, or any part of your site where you want to combine strong imagery with a narrative flow that unfolds as the user scrolls.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Parallax Content (scroll) to your project and fits it to your theme.

import { TextParallaxContentExample } from "@/components/ui/text-parallax-content-scroll";

const DemoOne = () => {
  return <TextParallaxContentExample />;
};

export { DemoOne };