Aurora Bars

Backgrounds

About

An animated bar visualizer with aurora-inspired gradient colors and organic sine-wave motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aurora Bars to your project and fits it to your theme.

Code

How Aurora Bars is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { AuroraBars, type AuroraBarsProps } from "@/components/ui/aurora-bars";

type AuroraBarsDemoProps = Pick<
  AuroraBarsProps,
  "barCount" | "speed" | "gap" | "blur" | "maxHeightRatio" | "minHeightRatio"
>;

const AuroraBarsDemo = ({
  barCount = 24,
  speed = 0.5,
  gap = 3,
  blur = 18,
  maxHeightRatio = 0.92,
  minHeightRatio = 0.18,
}: AuroraBarsDemoProps) => {
  return (
    <div className="relative w-full h-full min-h-[720px] overflow-hidden bg-black">
      <AuroraBars
        barCount={barCount}
        speed={speed}
        gap={gap}
        blur={blur}
        maxHeightRatio={maxHeightRatio}
        minHeightRatio={minHeightRatio}
        className="absolute inset-0 h-full w-full"
      />
    </div>
  );
};

export default AuroraBarsDemo;