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

Introduction

BubbleHeading is a fancy component thought to be used as a heading for your website in a langing page, for instance.

It has a motion effect that tracks your mouse movement each time you hover it. It can be highly customized to fit your needs.

Import

import { BubbleHeading } from "pol-ui";

Default BubbleHeading

For a basic usage, you can use the BubbleHeading component with no props, but a string as a child.

💡

Feel free to use the as property to change the tag of the heading, it can be h1, h2, h3, h4, h5 or h6. By default it's h2.

Default BubbleHeading

import { Breadcrumb, BreadcrumbItem } from "pol-ui";
import React from "react";
const BubbleHeadingComponent = () => {
  return (
    <BubbleHeadingProps>Pol-ui, powering web development</BubbleHeadingProps>
  );
};
export default BubbleHeadingComponent;

Props

Prop name	Type	Default	Description
children	string		The text to be displayed in the heading
minWeight	number	100	The minimum weight of the bubble
maxWeight	number	900	The maximum weight of the bubble
step	number	100	More amount -> less letters affected
opposite	bool	false	Change the behavior of the heading
as	HeadingLevel	h1	The tag to be used as the heading
className	string		Custom class to be used in the heading
theme	BubbleHeadingTheme		The theme to be used in the heading
transitionDuration	number	0.25	The duration of the transition effect (in miliseconds)

Customization

Opposite prop

You can use the opposite prop to change the behavior of the heading, it will

Opposite variant

import { Breadcrumb, BreadcrumbItem } from "pol-ui";
import React from "react";
const BubbleHeadingComponent = () => {
  return (
    <BubbleHeadingProps opposite>Pol-ui, powering web development</BubbleHeadingProps>
  );
};
export default BubbleHeadingComponent;

Custom steps

Steps mean the amount of letters affected by the mouse movement, the default value is 100. The bigger the number, the less letters will be affected by the mouse movement.

Custom step variant

import { Breadcrumb, BreadcrumbItem } from "pol-ui";
import React from "react";
const BubbleHeadingComponent = () => {
  return (
    <BubbleHeadingProps step={200}>
      Pol-ui, powering web development
    </BubbleHeadingProps>
  );
};
export default BubbleHeadingComponent;

Custom Duration

You can use the transitionDuration prop to change the duration of the transition effect, the default value is 0.25 seconds. It will change directly the speed of the effect in the CSS transition.

Custom duration

import { Breadcrumb, BreadcrumbItem } from "pol-ui";
import React from "react";
const BubbleHeadingComponent = () => {
  return (
    <BubbleHeadingProps transitionDuration={0.7}>
      Pol-ui, powering web development
    </BubbleHeadingProps>
  );
};
export default BubbleHeadingComponent;

Dark mode support

The only change when using the dark mode is the color of the heading, it will be lighter by default.

💡

You can always use the theme or className props to customize the color of the heading.

Dark mode BubbleHeading

import { Breadcrumb, BreadcrumbItem } from "pol-ui";
import React from "react";
const BubbleHeadingComponent = () => {
  return (
    <div className="dark bg-secondary-900 p-5 rounded-xl">
      <BubbleHeading>Pol-ui, powering web development</BubbleHeading>
    </div>
  );
};
export default BubbleHeadingComponent;

Custom class

The only change when using the dark mode is the color of the heading, it will be lighter by default.

Dark mode BubbleHeading

import { Breadcrumb, BreadcrumbItem } from "pol-ui";
import React from "react";
const BubbleHeadingComponent = () => {
  return (
    <BubbleHeading className="text-8xl text-error-500 italic">
      Pol-ui, powering web development
    </BubbleHeading>
  );
};
export default BubbleHeadingComponent;

Theme

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

BubbleHeading uses a basic theme to customize the color of the heading because it's basically just a heading tag with motion effects.

interface BubbleHeadingTheme {
  base: string;
}