Gradient Bars

"use client"

import { GradientBars } from "@/registry/aliimam/components/gradient-bars"

export function DemoOne() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GradientBars />
    </div>
  )
}

"use client"

import { GradientBars } from "@/registry/aliimam/components/gradient-bars"

export function DemoOne() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GradientBars colors={["#6366f1", "#22d3ee", "transparent"]} />
    </div>
  )
}

"use client"

import { GradientBars } from "@/registry/aliimam/components/gradient-bars"

export function DemoOne() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GradientBars
        orientation="horizontal"
        colors={["#ff0000", "transparent"]}
      />
      <GradientBars
        orientation="horizontal"
        colors={["#ff0000", "transparent"]}
        className="rotate-180"
      />
    </div>
  )
}

"use client"

import { GradientBars } from "@/registry/aliimam/components/gradient-bars"

export function DemoOne() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GradientBars
        animation="wave"
        duration={3}
        colors={["#f97316", "transparent"]}
      />
    </div>
  )
}

"use client"

import { GradientBars } from "@/registry/aliimam/components/gradient-bars"

export function DemoOne() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <GradientBars
        numBars={40}
        minScale={0.1}
        maxScale={1}
        colors={["#00ff00", "transparent"]}
      />
    </div>
  )
}