ParallaxText | Pol-ui - A beautiful and functional UI library for React and Next.js

The ParallaxText from pol-ui represents a component that animates a text as a infinite carrousel with a parallax effect.

When you scroll, the text will move at a faster speed than usual and when inverting the scroll, the text will also invert the direction.

import { ParallaxText } from "pol-ui";

Default ParallaxText

import { ParallaxText } from "pol-ui";
 
const ParallaxTextComponent = () => {
  const text = "Parallax text in Pol-ui";
 
  return (
    <section>
      <ParallaxText velocity={-5} className="">
        {text}
      </ParallaxText>
      <ParallaxText velocity={1}>{text}</ParallaxText>
      <ParallaxText>{text}</ParallaxText>
    </section>
  );
};
export default ParallaxTextComponent;

Props

Prop name	Type	Default	Description
children	string	-	The text to be displayed.
velocity	number	5	The speed of the parallax effect.
className	string	-	The class to be applied to the component.
as	T	'span'	The HTML tag to be used.
resistence	number	1000	The resistence of the parallax effect.
renderedElements	number	Math.ceil(100 / children.length)	Number of elements to render.
theme	ParallaxTextTheme	{}	The theme to be applied to the component.

💡

The renderedElements are the concrete number of elements (copies) to render. This is a performance optimization, the lower the number the better, but you need to make sure that the text is long enough to cover the whole screen.

💡

You can also provide any prop comming from the As prop, HTML span tag by default.

Examples

Blurred ParallaxText

import { ParallaxText } from "pol-ui";
 
const ParallaxTextComponent = () => {
  const text = "Parallax text in Pol-ui";
 
  return (
    <section>
      <ParallaxText velocity={-2} className="blur-[5px]">
        {text}
      </ParallaxText>
      <ParallaxText className="blur-[2px]" velocity={1}>
        {text}
      </ParallaxText>
      <ParallaxText>{text}</ParallaxText>
    </section>
  );
};
export default ParallaxTextComponent;

ParallaxText in the same direction

Use velocity prop to make the parallax effect in the same direction. Positive values will make the elements move right when scrolling down and left when scrolling up.

The opposite happens with negative values.

The higher the number, the faster the parallax effect.

Same direction

import { ParallaxText } from "pol-ui";
 
const ParallaxTextComponent = () => {
  const text = "Parallax text in Pol-ui";
  return (
    <section>
      <ParallaxText velocity={1}>{text}</ParallaxText>
      <ParallaxText velocity={2}>{text}</ParallaxText>
      <ParallaxText velocity={3}>{text}</ParallaxText>
      <ParallaxText velocity={5}>{text}</ParallaxText>
      <ParallaxText velocity={6}>{text}</ParallaxText>
    </section>
  );
};
export default ParallaxTextComponent;

Custom classes

You can customize any CSS property of the ParallaxText component by using the className and Tailwind CSS classes.

Custom clases

import { ParallaxText } from "pol-ui";
 
const ParallaxTextComponent = () => {
  const text = "Parallax text in Pol-ui";
 
  return (
    <section>
      <ParallaxText className="text-error">{text}</ParallaxText>
      <ParallaxText className="text-success">{text}</ParallaxText>
      <ParallaxText className="text-info">{text}</ParallaxText>
      <ParallaxText className="text-warning">{text}</ParallaxText>
      <ParallaxText className="text-secondary">{text}</ParallaxText>
    </section>
  );
};
export default ParallaxTextComponent;

Custom elements amount

The number of elements to render. This is a performance optimization, the lower the number the better, but you need to make sure that the text is long enough to cover the whole screen. By default is:

Math.ceil(100 / children.length) ?? 10;

Custom elements amount

import { ParallaxText } from "pol-ui";
 
const ParallaxTextComponent = () => {
  const text = "Parallax text in Pol-ui";
 
  return (
    <section>
      <ParallaxText className="text-sm" renderedElements={20}>
        {text}
      </ParallaxText>
      <ParallaxText className="text-md" renderedElements={18}>
        {text}
      </ParallaxText>
      <ParallaxText className="text-lg" renderedElements={16}>
        {text}
      </ParallaxText>
      <ParallaxText className="text-xl" renderedElements={14}>
        {text}
      </ParallaxText>
      <ParallaxText className="text-2xl" renderedElements={12}>
        {text}
      </ParallaxText>
    </section>
  );
};
export default ParallaxTextComponent;

Custom elements tag

By default, the ParallaxText component uses the span tag, but you can customize it using the as prop.

Custom elements tag

import { ParallaxText } from "pol-ui";
 
const ParallaxTextComponent = () => {
  return (
    <section>
      <ParallaxText as="h1">I'm a H1</ParallaxText>
      <ParallaxText as="h2">I'm a H2</ParallaxText>
      <ParallaxText as="h3">I'm a H3</ParallaxText>
      <ParallaxText as="h3">I'm a H4</ParallaxText>
      <ParallaxText as="button">I'm a button 😵‍💫</ParallaxText>
    </section>
  );
};
export default ParallaxTextComponent;

Custom resistance

To customize the resistance of the parallax effect, you can use the resistance prop, the higher the number, the slower the parallax effect.

Resistance

import { ParallaxText } from "pol-ui";
 
const ParallaxTextComponent = () => {
  return <ParallaxText resistence={6000}>I'm a H1</ParallaxText>;
};
export default ParallaxTextComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface ParallaxTextTheme {
  base: string;
}