The ImageTrail is a perfect component for landing pages where you want to transmit a motion and a dynamic feeling to the user. It's a component that allows you to display a set of images in a sequence, creating a trail effect while the user is hovering the component.
import { ImageTrail } from "pol-ui";Default ImageTrail
Default
import { ImageTrail } from "pol-ui";
import { TbMouse } from "react-icons/tb";
import React from "react";
const ImageTrailComponent = () => {
const images: [
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
],
return (
<ImageTrail renderImageBuffer={50} images={images} rotationRange={20}>
<section className="flex h-[400px] w-full place-content-center bg-primary-200">
<p className="flex items-center gap-2 text-3xl font-bold uppercase text-black">
<TbMouse />
<span>Hover me</span>
</p>
</section>
</ImageTrail>
);
};
export default ImageTrailComponent;Props
The IconButton component has the following props:
| Prop name | Type | Default | Description |
|---|---|---|---|
| images | string[] | - | An array of strings containing the URLs of the images to be displayed |
| renderImageBuffer | number | 50 | The amount pixels between mouse moves that will trigger a new image |
| rotationRange | number | 20 | The range of rotation in degrees that the images will randomly have |
| className | string | - | The className of the component |
| imageClassName | string | - | The className of the images |
| disapearDelay | number | 1 | The time in milliseconds that the images will take to disapear |
| theme | ImageTrailTheme | - | The theme of the component |
💡
You can also provide any prop comming from the HTML div tag
Examples
More rotation
To manipulate the rotation of the images, you can use the rotationRange prop. This prop will allow you to set the range of rotation in degrees that the images will randomly have.
More rotation
import { ImageTrail } from "pol-ui";
import { TbMouse } from "react-icons/tb";
import React from "react";
const ImageTrailComponent = () => {
const images: [
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
],
return (
<ImageTrail renderImageBuffer={50} images={images} rotationRange={80}>
<section className="flex h-[400px] w-full place-content-center bg-primary-200">
<p className="flex items-center gap-2 text-3xl font-bold uppercase text-black">
<TbMouse />
<span>Hover me</span>
</p>
</section>
</ImageTrail>
);
};
export default ImageTrailComponent;More render buffer
To change the render buffer of the images, use the renderImageBuffer prop.
This prop will allow you to set the amount pixels between mouse moves that will trigger a new image.
More render buffer
import { ImageTrail } from "pol-ui";
import { TbMouse } from "react-icons/tb";
import React from "react";
const ImageTrailComponent = () => {
const images: [
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/59992/crocus-flower-spring-purple-59992.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/139205/pexels-photo-139205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
'https://images.pexels.com/photos/1555900/pexels-photo-1555900.jpeg?auto=compress&cs=tinysrgb&w=600',
'https://images.pexels.com/photos/45180/crocus-flowers-violet-spring-45180.jpeg?auto=compress&cs=tinysrgb&w=600',
],
return (
<ImageTrail renderImageBuffer={300} images={images} rotationRange={20}>
<section className="flex h-[400px] w-full place-content-center bg-primary-200">
<p className="flex items-center gap-2 text-3xl font-bold uppercase text-black">
<TbMouse />
<span>Hover me</span>
</p>
</section>
</ImageTrail>
);
};
export default ImageTrailComponent;Props
Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface ImageTrailTheme {
base: string;
image: string;
}