The Conveyor component is a complete components that allows you to create a conveyor belt of elements. It can be used to create a carousel, a news ticker, or any other kind of conveyor belt.
The conveyor from pol-ui has a stable animation and a good performance as it uses CSS transitions.
Importation
Import the component from pol-ui to use the conveyor element:
import { Conveyor } from "pol-ui";Default conveyor
The default conveyor is a conveyor that moves the children from left to right.
💡
You can use the pauseOnHover prop to pause the conveyor when the mouse is over or disable it.
Default conveyor
import { Conveyor } from "pol-ui";
import React from "react";
const ConveyorComponent = () => {
return (
<Conveyor direction="right" speed="slow">
{testimonials.map((testimonial, i) => (
<div
key={i}
className="w-[350px] h-full max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-secondary-500 px-8 py-6 md:w-[450px] bg-secondary-300 flex flex-col justify-between"
>
<div className="flex items-center mb-4">
{Array.from({ length: testimonial.stars }).map((_, i) => (
<TbStarFilled key={i} className=" text-2xl" />
))}
{Array.from({ length: 5 - testimonial.stars }).map((_, i) => (
<TbStar key={i} className=" text-2xl" />
))}
</div>
<p className="text-lg mb-4">{testimonial.review}</p>
<div className="flex flex-col">
<p className="text-xl font-semibold">{testimonial.name}</p>
</div>
</div>
))}
</Conveyor>
);
};
export default ConveyorComponent;Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The children of the conveyor. |
| direction | ConveyorDirection | "horizontal" | The direction of the conveyor. |
| speed | ConveyorSpeed | "normal" | The speed of the conveyor. |
| pauseOnHover | boolean | false | Pause the conveyor when the mouse is over. |
| theme | ConveyorTheme | - | The theme of the conveyor. |
| className | string | - | The class name of the conveyor. |
Examples
Logos conveyor
This example shows a conveyor with logos that moves from right to left.
Default conveyor
import { Conveyor } from "pol-ui";
import React from "react";
const ConveyorComponent = () => {
return (
<Conveyor>
<div className="w-[200px] h-[200px] mr-20">
<svg
height="2500"
viewBox="175.7 78 490.6 436.9"
width="2194"
className="w-full h-full"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="#61dafb">
<path d="m666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9v-22.3c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6v-22.3c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zm-101.4 106.7c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24s9.5 15.8 14.4 23.4zm73.9-208.1c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6 58.3-50.6c8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zm53.8 142.9c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6z" />
<circle cx="420.9" cy="296.5" r="45.7" />
</g>
</svg>
</div>
<div className="w-[200px] h-[200px] mr-20">
<svg
xmlns="http://www.w3.org/2000/svg"
width="2500"
height="2500"
className="w-full h-full"
viewBox="0 0 498.503 498.503"
>
<path d="M249.251 498.503c66.577 0 129.168-25.928 176.247-73.005 47.077-47.078 73.005-109.67 73.005-176.247 0-66.576-25.928-129.168-73.005-176.246C378.42 25.927 315.828 0 249.251 0 111.813 0 0 111.813 0 249.251c0 66.577 25.927 129.169 73.005 176.247 47.078 47.077 109.67 73.005 176.246 73.005z" />
<path
d="M8.624 249.251c0-64.272 25.03-124.699 70.479-170.148 45.449-45.45 105.875-70.479 170.148-70.479s124.7 25.029 170.148 70.479c45.449 45.449 70.479 105.875 70.479 170.148 0 132.683-107.945 240.628-240.627 240.628-64.273 0-124.699-25.03-170.148-70.479C33.654 373.95 8.624 313.524 8.624 249.251z"
fill="#fff"
/>
<path d="M249.251 18.541c-127.416 0-230.71 103.294-230.71 230.71s103.294 230.711 230.71 230.711c127.416 0 230.71-103.295 230.71-230.711s-103.294-230.71-230.71-230.71z" />
<path
d="M249.251 396.621c-81.389 0-147.37-65.98-147.37-147.37 0-81.389 65.981-147.37 147.37-147.37 81.389 0 147.37 65.981 147.37 147.37 0 81.39-65.98 147.37-147.37 147.37z"
fill="#fff"
/>
<path d="M111.362 249.251h137.889V111.362c-76.153 0-137.889 61.737-137.889 137.889zM249.251 249.251v137.89c76.153 0 137.889-61.736 137.889-137.89H249.251z" />
<path
d="M140.952 108.643c-4.885-4.748-12.436-6.179-19.525-1.784 1.354-3.509.801-7.09.082-9.066-3.054-5.569-4.12-6.266-6.637-8.378-8.148-6.837-16.723-1-22.856 6.309l-29.632 35.313 46.581 39.087 31.249-37.24c7.14-8.509 8.244-16.945.738-24.241zM256.97 91.863l15.997-42.401v42.401h12.158V31.137h-18.267l-16.615 43.479h.172L233.8 31.137h-18.266v60.726h12.157V49.462l15.998 42.401h13.281zM420.43 117.127l-22.89 32.407 35.486-16.847 9.396 11.603-55.854 27.075-11.027-13.727 21.969-32.123-.13-.161-35.989 14.81-11.135-13.64 38.097-49.004 9.396 11.603-23.857 31.208 36.458-15.652 10.08 12.448z"
fill="#fff"
/>
<path d="M98.491 104.464c2.062-2.458 6.722-2.357 9.719.157 3.295 2.765 3.303 6.685 1.09 9.321l-17.597 20.971-11.01-9.239 17.798-21.21zM129.8 129.203l-18.553 22.11-11.634-9.762 18.703-22.29c2.112-2.517 6.821-3.25 9.997-.584 3.595 3.015 3.951 7.59 1.487 10.526z" />
</svg>
</div>
<div className="w-[200px] h-[200px] mr-20">
<svg
viewBox="-0.12979372698077785 0 32.42343730730004 32"
xmlns="http://www.w3.org/2000/svg"
width="2500"
className="w-full h-full"
height="2458"
>
<circle cx="17" cy="6" fill="#7b83eb" r="4.667" />
<path
d="M16.667 7H12.44l.021.093.002.008.022.086A4.671 4.671 0 0 0 18 10.559V8.333A1.337 1.337 0 0 0 16.667 7z"
opacity=".1"
/>
<path
d="M15.667 8h-2.884A4.667 4.667 0 0 0 17 10.667V9.333A1.337 1.337 0 0 0 15.667 8z"
opacity=".2"
/>
<circle cx="27.5" cy="7.5" fill="#5059c9" r="3.5" />
<path
d="M30.5 12h-7.861a.64.64 0 0 0-.64.64v8.11a5.121 5.121 0 0 0 3.967 5.084A5.006 5.006 0 0 0 32 20.938V13.5a1.5 1.5 0 0 0-1.5-1.5z"
fill="#5059c9"
/>
<path
d="M25 13.5V23a7.995 7.995 0 0 1-14.92 4 7.173 7.173 0 0 1-.5-1 8.367 8.367 0 0 1-.33-1A8.24 8.24 0 0 1 9 23v-9.5a1.498 1.498 0 0 1 1.5-1.5h13a1.498 1.498 0 0 1 1.5 1.5z"
fill="#7b83eb"
/>
<path
d="M15.667 8h-2.884A4.667 4.667 0 0 0 17 10.667V9.333A1.337 1.337 0 0 0 15.667 8z"
opacity=".2"
/>
<path
d="M18 12v12.67a1.32 1.32 0 0 1-1.04 1.29.966.966 0 0 1-.29.04H9.58a8.367 8.367 0 0 1-.33-1A8.24 8.24 0 0 1 9 23v-9.5a1.498 1.498 0 0 1 1.5-1.5z"
opacity=".1"
/>
<path
d="M17 12v13.67a.967.967 0 0 1-.04.29A1.32 1.32 0 0 1 15.67 27h-5.59a7.173 7.173 0 0 1-.5-1 8.367 8.367 0 0 1-.33-1A8.24 8.24 0 0 1 9 23v-9.5a1.498 1.498 0 0 1 1.5-1.5z"
opacity=".2"
/>
<path
d="M17 12v11.67A1.336 1.336 0 0 1 15.67 25H9.25A8.24 8.24 0 0 1 9 23v-9.5a1.498 1.498 0 0 1 1.5-1.5z"
opacity=".2"
/>
<path
d="M10.5 12A1.498 1.498 0 0 0 9 13.5V23a8.24 8.24 0 0 0 .25 2h5.42A1.336 1.336 0 0 0 16 23.67V12z"
opacity=".2"
/>
<path
d="M1.333 8h13.334A1.333 1.333 0 0 1 16 9.333v13.334A1.333 1.333 0 0 1 14.667 24H1.333A1.333 1.333 0 0 1 0 22.667V9.333A1.333 1.333 0 0 1 1.333 8z"
fill="#4b53bc"
/>
<path
d="M11.98 12.975H8.99v8.02H7.028v-8.02H4.02v-1.97h7.96z"
fill="#fff"
/>
<path d="M0 0h32v32H0z" fill="none" />
</svg>
</div>
<div className="w-[200px] h-[200px] mr-20">
<svg
enableBackground="new 0 0 2447.6 2452.5"
className="w-full h-full"
viewBox="0 0 2447.6 2452.5"
xmlns="http://www.w3.org/2000/svg"
>
<g clipRule="evenodd" fillRule="evenodd">
<path
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
fill="#36c5f0"
/>
<path
d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
fill="#2eb67d"
/>
<path
d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
fill="#ecb22e"
/>
<path
d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
fill="#e01e5a"
/>
</g>
</svg>
</div>
<div className="w-[200px] h-[200px] mr-20">
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-full h-full"
width="2500"
height="2438"
viewBox="0 130.746 595.279 580.398"
>
<radialGradient
id="a"
cx="-183.69"
cy="328.972"
r=".76"
gradientTransform="matrix(545.6736 0 0 528.3113 100439.305 -173525.125)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stopColor="#4b2d4f" stopOpacity=".98" />
<stop offset="1" stopColor="#180024" />
</radialGradient>
<path
d="M24.803 155.549h545.674v530.792H24.803V155.549z"
fill="url(#a)"
/>
<path
d="M24.803 155.549h545.674v530.792H24.803V155.549zM0 711.145h595.28V130.746H0v580.399zm357.168-335.342c0-2.977 0-10.169-1.24-24.06 0-1.984.248-2.48 1.984-3.224 15.13-6.201 50.599-17.114 90.78-17.114 1.984 0 2.976.496 2.976 2.48v35.965c0 1.984-.744 2.48-2.728 2.48-15.627-.744-38.197 1.24-46.879 4.96v156.262c0 1.983-.744 2.976-2.977 2.976h-38.94c-1.984 0-2.977-.744-2.977-2.976V375.803zm-158.741 22.571c5.704.496 10.169.496 20.091.496 29.02 0 56.304-10.169 56.304-49.606 0-31.5-19.347-47.375-52.584-47.375-9.921 0-19.346.496-23.811.744v95.741zm-43.902-131.706c0-1.736.496-2.977 2.48-2.977 15.874-.744 39.189-1.24 63.745-1.24 68.705 0 98.717 37.701 98.717 86.068 0 63-45.638 90.036-101.693 90.036-9.426 0-12.65-.496-19.347-.496v95.245c0 1.984-.744 2.976-2.977 2.976h-38.197c-1.984 0-2.977-.744-2.977-2.976V266.668h.249z"
fill="#e579ff"
/>
</svg>
</div>
<div className="w-[200px] h-[200px] mr-20">
<svg
height="2500"
width="2490"
xmlns="http://www.w3.org/2000/svg"
className="w-full h-full"
viewBox="0 0 256 256"
>
<g fill="none">
<path
d="M0 18.338C0 8.216 8.474 0 18.92 0h218.16C247.53 0 256 8.216 256 18.338v219.327C256 247.79 247.53 256 237.08 256H18.92C8.475 256 0 247.791 0 237.668V18.335z"
fill="#069"
/>
<path
d="M77.796 214.238V98.986H39.488v115.252H77.8zM58.65 83.253c13.356 0 21.671-8.85 21.671-19.91-.25-11.312-8.315-19.915-21.417-19.915-13.111 0-21.674 8.603-21.674 19.914 0 11.06 8.312 19.91 21.169 19.91h.248zM99 214.238h38.305v-64.355c0-3.44.25-6.889 1.262-9.346 2.768-6.885 9.071-14.012 19.656-14.012 13.858 0 19.405 10.568 19.405 26.063v61.65h38.304v-66.082c0-35.399-18.896-51.872-44.099-51.872-20.663 0-29.738 11.549-34.78 19.415h.255V98.99H99.002c.5 10.812-.003 115.252-.003 115.252z"
fill="#fff"
/>
</g>
</svg>
</div>
</Conveyor>
);
};
export default ConveyorComponent;Fast conveyor
The speed prop can be used to change the speed of the conveyor. The speed can be "slow", "normal" or "fast".
Default conveyor
import { Conveyor } from "pol-ui";
import React from "react";
const ConveyorComponent = () => {
return (
<Conveyor direction="right" speed="fast">
{["1", "2", "3", "4", "5", "6"].map((item) => (
<div
key={item}
className="w-[350px] h-full max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-secondary-500 px-8 py-6 md:w-[450px] bg-secondary-300 flex justify-center"
>
{item}
</div>
))}
</Conveyor>
);
};
export default ConveyorComponent;Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface ConveyorTheme {
scroller: string;
list: string;
pauseAnimation: string;
animation: string;
}