Parallax Scrolling Text Effect

This code implements a captivating parallax scrolling effect on a text element using Framer Motion. It leverages scroll position and velocity to dynamically alter the text's skew and horizontal position, creating a visually engaging user experience. The effect is achieved by using Framer Motion's hooks: `useScroll`, `useVelocity`, and `useTransform` to map scroll progress and velocity to CSS transformations. `useSpring` adds a smooth, springy animation to the transformations, enhancing the visual appeal. The code defines a section with a significant height (`h-[1000vh]`) to provide ample scroll space. A `motion.p` element contains the text; its `skewX` and `x` styles are dynamically updated based on the scroll position and velocity. The `offset` property in `useScroll` ensures the effect starts and ends at specific points within the section. The `useTransform` hook maps the scroll velocity to a skew angle, creating a tilting effect as the user scrolls, and maps the scroll progress to a horizontal displacement, adding a parallax effect. The `useSpring` hook applies spring physics to both the skew and horizontal displacement, resulting in a smooth and natural animation. This technique can be applied to various scenarios, including hero sections, website headers, and other interactive elements to enhance user engagement and create a more dynamic visual experience. For example, imagine a website promoting a new product; this effect could be used to highlight the product title or tagline as the user scrolls down the page. The effect is highly customizable; by adjusting the parameters of `useTransform` and `useSpring`, developers can tailor the animation to match their specific design requirements. Framer Motion's declarative approach simplifies the implementation of complex animations, making this a relatively straightforward solution for developers of all skill levels.

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

import { VelocityText } from "@/components/ui/parallax-scrolling-text-effect";

export default function DemoOne() {
  return <VelocityText />;
}