--- title: "Text Scroll Velocity — Framer component · Best of Framer" description: "$15.00 · Framer component · by Igor Reif · Text. Text Scroll Velocity with Parallax effect is an interactive Framer component that creates an infinite scrolling text effect that reacts…" canonical: "https://framer.elliotli.dev/component/text-scroll-velocity" --- [Home](/)/[Components](/components)/[Text](/components/category/text)/Text Scroll Velocity # Text Scroll Velocity [View on Framer](https://framer.com/marketplace/components/text-scroll-velocity/?via=elliot-li) ![Text Scroll Velocity preview image 1](https://framer.elliotli.dev/og/component/text-scroll-velocity/ee338c418d2be5fb/1600x1200.jpg) ## Summary Text Scroll Velocity with Parallax effect is an interactive Framer component that creates an infinite scrolling text effect that reacts to the speed of scrolling. ## Description Text Scroll Velocity with Parallax effect is an interactive Framer component that creates an infinite scrolling text effect that reacts to the speed of scrolling. The text moves in a smooth, parallax-like motion, speeding up or reversing direction based on scroll velocity. **SEO ready:** Ideal for highlighting keywords or brand messages in a dynamic way. It feels light, snappy, and works well in almost any layout. ### Ensure the component width is set to 100% (relative) or Fill. 2 licenses available: - REGULAR: Unlimited personal or client projects. One license covers one Framer account. If you hand the project over to a client, the client needs their own Regular license. - COMMERCIAL: Perfect for creative agencies and anyone building Framer templates. This license allows reuse across unlimited client projects and template releases (free or paid), making it a better long term choice than a regular single project license. ## Features - Real HTML text, searchable and indexable - Infinite horizontal looping without visible seams - Reactive scrolling, the text speeds up or reverses based on scroll velocity - Different speeds per line for a layered parallax feel - Adjustable damping and stiffness for softer or tighter motion - Custom horizontal spacing between text lines - Full text styling through Framer’s font controls - Individual colors for each line ## Use case ideas **Tech and SaaS.** Feature highlights or onboarding steps that keep long layouts from feeling static. **Creative studios and agencies.** Service tags, project keywords or client names that add motion to portfolio sections. **Artist and designer portfolios.** Project titles, medium tags or typography accents that guide users through gallery sections. **Events and conferences.** Use scrolling text to show speaker names, schedules or sponsor lines in a lively way. **Fitness and wellness.** Let training goals, class types or motivational lines slide through the layout for studios, gyms or supplement brands. **Fashion and lifestyle.** Editorial headlines, trend names or collection themes drifting at different speeds. **Music and culture.** Great for album pages, festival sites or artist portfolios where you want text to feel part of the rhythm. **Food and beverage.** Highlight signature dishes, tasting notes or menu sections with a slow parallax drift. Nice for cafés, bars or breweries. **Hospitality and travel.** Use moving destination names, room features or short taglines to set the mood for hotels, resorts or tour packages. **Sports and outdoor brands.** Gear specs, training goals or activity types presented with a light parallax shift. **E-commerce.** Show seasonal promos, shipping perks or product categories drifting at different speeds. Works well for fashion drops or tech gear. ## Component settings guide **Texts.** A list of text lines that will scroll in loops. Add up to ten. Each line becomes a separate row. **Text Colors.** Lets you set a different color for each text row. If a row has no assigned color, it falls back to the default color. **Tag.** Changes the HTML tag used for each text item. Useful if you want stronger SEO weight with headings or a lighter span element. **Base Velocity.** Controls how fast the text moves on its own, even without user scrolling. **Damping.** Smooths out the animation. Higher damping makes the motion settle quicker. Lower values feel more loose. **Stiffness.** Changes how reactive the spring is. Higher stiffness makes movement snap back faster when scrolling changes direction. **Velocity Min / Max.** These define the range of scroll velocity that the component listens to. They decide when the effect starts and how strong it gets. **Output Min / Max.** These map the scroll velocity to animation speed. They control how much the text speeds up or slows down while the user scrolls. **Default Text Color.** Used when there are more text rows than assigned colors. **Font.** Sets the font family, size, weight and spacing. The component waits until your font is fully loaded before animating. **Transform.** Applies text casing. Choose between none, uppercase, lowercase or capitalized words. **Text Spacing.** Sets the horizontal gap between repeated text blocks. Larger spacing makes the loop look more open. **Parallax Effect (ms).** Adds speed variation between rows. Higher values make rows drift at different speeds for a stronger parallax feel. ## Rank history [How rankings work →](/terms#rankings) - All · #7967 ## Details - **Author**: Igor Reif - **Price**: $15.00 - **Published**: 2025-12-29 - **Updated**: 2026-01-15 - **Added**: 2025-12-13 - **Categories**: Text ## More like this - [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer. - [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors - [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend - [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing