Motion+ Ticker

An infinitely-scrolling, accessible, and flexible ticker component for React and Vue.

Loading...

Simple API

Simple API

Ship in seconds

Create an infinite scrolling marquee with a simple component. Built in Typescript, it's fast to build and easy to maintain.

<Ticker items={items} />

Velocity

Velocity

Velocity

Easy configuration

Easy configuration

Easy configuration

Unlike CSS solutions, velocity is defined in pixels per second, so speeds remain predictable and stable between tickers of different lengths.

Unlike CSS solutions, velocity is defined in pixels per second, so speeds remain predictable and stable between tickers of different lengths.

Unlike CSS solutions, velocity is defined in pixels per second, so speeds remain predictable and stable between tickers of different lengths.

<Ticker

items={items}
velocity={50}
hoverFactor={0}
/>

Loading...
Loading...

Performant

Performant

Performant

Speed demon

Speed demon

Speed demon

Traditional tickers achieve infinite looping by cloning elements. Motion+ Ticker's unique renderer allows it to clone the bare minimum, often eliminating cloning completely.

Traditional tickers achieve infinite looping by cloning elements. Motion+ Ticker's unique renderer allows it to clone the bare minimum, often eliminating cloning completely.

Composable

Composable

Composable

Scroll & Drag

Scroll & Drag

Scroll & Drag

Ticker is fully integrated with Motion, making it simple to hook it up to scroll-driven animations or drag gestures using APIs like useScroll or drag.

Ticker is fully integrated with Motion, making it simple to hook it up to scroll-driven animations or drag gestures using APIs like useScroll or drag.

Ticker is fully integrated with Motion, making it simple to hook it up to scroll-driven animations or drag gestures using APIs like useScroll or drag.

const { scrollY } = useScroll()

<Ticker items={items} offset={scrollY} />

Loading...

This is no ordinary ticker. Motion+ Ticker is fast, flexible, and built to integrate with the rest of Motion for limitless possibilities. It's the modern alternative to old-school CSS marquees.

I had a ton of fun creating its unique reprojection renderer for high-performance looping. This renderer will also power the Carousel component, coming soon to Motion+!

Matt Perry
Creator of Motion

Pricing

Pricing

Pricing

Ticker is available via Motion+

Join over 1000 developers already building with Motion+. One-time fee, lifetime updates.

Motion+

Team

(+ tax)

180+ code examples

Premium APIs

Visual editor for VS Code

alpha

Discord community

Early access

Lifetime updates

members

Save

Motion+

Team

(+ tax)

180+ code examples

Premium APIs

Visual editor for VS Code

alpha

Discord community

Early access

Lifetime updates

members

Save

Motion+

Team

(+ tax)

180+ code examples

Premium APIs

Visual editor for VS Code

alpha

Discord community

Early access

Lifetime updates

members

Save

FAQ

FAQ

FAQ

Frequently asked questions

What does ”lifetime” access mean?

Lifetime access means exactly that. You pay once, and then get access to all future updates to examples, premium components, and AI/visual editing editing features.

This isn’t yet another subscription!

Can I use Motion+ for commercial projects?

Yes!

Motion Examples and Motion UI are both licensed under MIT.

This means once you’ve copy/pasted the code, or included it into your site, it’s yours forever.

Exception: Website Builders

If your product is a website builder (think Framer, Figma, Webflow etc) then while using these APIs in your product is permitted, if you wish to allow your users to use these APIs in their own websites, we ask you enquire about the Builder's License to maintain access to Motion+

Do you offer PPP or student discounts?

We do offer student discounts in some countries and PPP for others - you can send proof of residence or student ID to matt@motion.dev for a discount code.

How does the Team package work?

Motion+ can be purchased for teams of any size, from 3 to ∞.

Every third seat is free! More seats can be purchased at any time.

After purchase, you can assign @yourcompany.com email addresses to Motion+ by sending them to matt@motion.dev.

Important: Motion+ by more than one person requires purchase of a Team package. Email sharing is forbidden and may lead to the cancellation of services without refund.

How do I get access to the private GitHub?

After purchase, you can invite your GitHub profile to the private repo via your Motion+ profile page.

What is your refund policy?

You can contact matt@motion.dev for a full refund within the first 7 days of purchase.

Still have questions? Email us at matt@motion.dev

What does ”lifetime” access mean?

Lifetime access means exactly that. You pay once, and then get access to all future updates to examples, premium components, and AI/visual editing editing features.

This isn’t yet another subscription!

Can I use Motion+ for commercial projects?

Yes!

Motion Examples and Motion UI are both licensed under MIT.

This means once you’ve copy/pasted the code, or included it into your site, it’s yours forever.

Exception: Website Builders

If your product is a website builder (think Framer, Figma, Webflow etc) then while using these APIs in your product is permitted, if you wish to allow your users to use these APIs in their own websites, we ask you enquire about the Builder's License to maintain access to Motion+

Do you offer PPP or student discounts?

We do offer student discounts in some countries and PPP for others - you can send proof of residence or student ID to matt@motion.dev for a discount code.

How does the Team package work?

Motion+ can be purchased for teams of any size, from 3 to ∞.

Every third seat is free! More seats can be purchased at any time.

After purchase, you can assign @yourcompany.com email addresses to Motion+ by sending them to matt@motion.dev.

Important: Motion+ by more than one person requires purchase of a Team package. Email sharing is forbidden and may lead to the cancellation of services without refund.

How do I get access to the private GitHub?

After purchase, you can invite your GitHub profile to the private repo via your Motion+ profile page.

What is your refund policy?

You can contact matt@motion.dev for a full refund within the first 7 days of purchase.

Still have questions? Email us at matt@motion.dev

What does ”lifetime” access mean?

Lifetime access means exactly that. You pay once, and then get access to all future updates to examples, premium components, and AI/visual editing editing features.

This isn’t yet another subscription!

Can I use Motion+ for commercial projects?

Yes!

Motion Examples and Motion UI are both licensed under MIT.

This means once you’ve copy/pasted the code, or included it into your site, it’s yours forever.

Exception: Website Builders

If your product is a website builder (think Framer, Figma, Webflow etc) then while using these APIs in your product is permitted, if you wish to allow your users to use these APIs in their own websites, we ask you enquire about the Builder's License to maintain access to Motion+

Do you offer PPP or student discounts?

We do offer student discounts in some countries and PPP for others - you can send proof of residence or student ID to matt@motion.dev for a discount code.

How does the Team package work?

Motion+ can be purchased for teams of any size, from 3 to ∞.

Every third seat is free! More seats can be purchased at any time.

After purchase, you can assign @yourcompany.com email addresses to Motion+ by sending them to matt@motion.dev.

Important: Motion+ by more than one person requires purchase of a Team package. Email sharing is forbidden and may lead to the cancellation of services without refund.

How do I get access to the private GitHub?

After purchase, you can invite your GitHub profile to the private repo via your Motion+ profile page.

What is your refund policy?

You can contact matt@motion.dev for a full refund within the first 7 days of purchase.

Still have questions? Email us at matt@motion.dev

Motion is supported by the best in the industry.