Animated Button

A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.

Usage

Apple style dock

Sunt id fugiat dolor nostrud aute eiusmod ea sint. Ea laborum do irure et. Ea elit incididunt velit veniam anim ullamco elit sunt. Ea veniam nisi elit nostrud eu sit ut non Lorem adipisicing non ut excepteur. Sint elit cupidatat reprehenderit nulla ipsum enim Lorem cillum velit veniam. Esse elit sit irure Lorem. Esse aliqua incididunt amet est voluptate esse adipisicing culpa commodo est. random

Code

'use client';

import { cn } from '@/lib/utils';
import React, { HTMLAttributes } from 'react';

export interface BlurBottomProps extends HTMLAttributes<HTMLDivElement> {}

const BlurBottom = React.forwardRef<HTMLDivElement, BlurBottomProps>(
  (
    {
      children,
      className,

      ...props
    },
    ref
  ) => {
    return (
      <div
        className={cn(
          'after:[-webkit-mask:_linear-gradient(180deg,_transparent 60%,_#000_95.5%,_#000)] pointer-events-none absolute bottom-0 z-10 h-[10%] w-full before:absolute before:inset-0 before:z-[1] before:backdrop-blur-[0.5px] before:[-webkit-mask:_linear-gradient(180deg,_transparent_0%,_#000_12.5%,_#000_25%,_transparent_37.5%)] before:[mask:_linear-gradient(180deg,_transparent_0%,_#000_12.5%,_#000_25%,_transparent_37.5%)] after:absolute after:inset-0 after:backdrop-blur-[32px] after:backdrop-saturate-200 after:[mask:_linear-gradient(180deg,_transparent_75%,_#000_87.5%,_#000)]',
          className
        )}
        ref={ref}
        {...props}
      >
        {Array.from({ length: 5 }).map((_, index) => {
          const mask = `linear-gradient(180deg, transparent ${12.5 * (index + 1)}%, #000 ${25 + 12.5 * index}%, #000 ${37.5 + 12.5 * index}%, transparent ${50 + 12.5 * index}%)`;
          return (
            <div
              key={`${index}-bottom-blur`}
              className='absolute inset-0'
              style={{
                zIndex: index + 2,
                backdropFilter: `blur(${2 ** index}px) `,
                WebkitBackdropFilter: `blur(${2 ** index}px) `,
                mask: mask,
                WebkitMask: mask,
              }}
            />
          );
        })}
      </div>
    );
  }
);

export { BlurBottom };

Component API

BlurBottom

Prop	Type	Default	Description
children	ReactNode		The content to display in the button.
asChild	boolean	false	Replaces the button tag with the provided child.
bgColors	string[]	['#a374ff', '#17f1d1', '#ffd074']	Colors for the waves that animate on hover.
variant	'default' \| 'light' \| 'dark'	'default'	The visual style of the button.
size	'default' \| 'large'	'default'	The size of the button, with 'large' being bigger.
ref	`Ref<Button or Link Element>`		Provides a reference to the button or link DOM element, depending on `asChild`.