Moving Background

1"use client";
2
3import MovingBackground from '@/components/component-x/moving-background';
4
5export function MovingBackgroundPreview() {
6return (
7  <div className="relative w-full h-full overflow-hidden border flex items-center justify-center">
8    <div className="relative px-4 py-2 border shadow-md rounded">
9      <MovingBackground
10        backgroundColor="hsl(var(--muted)/0.4)"
11        shineColor="hsl(var(--primary)/0.4)"
12        animationDuration={6000}
13        gradientAngle={110}
14      />
15      <h3 className="text-foreground relative z-10">Moving Background</h3>
16    </div>
17  </div>
18);
19}
20

1"use client";
2
3import MovingBackground from '@/components/component-x/moving-background';
4
5export function MovingBackgroundDurations() {
6const durations = [
7  { label: "Fast", value: 3000 },
8  { label: "Normal", value: 6000 },
9  { label: "Slow", value: 10000 },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14    {durations.map(({ label, value }) => (
15      <div
16        key={value}
17        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center rounded-lg"
18      >
19        <MovingBackground
20          backgroundColor="hsl(var(--muted)/0.4)"
21          shineColor="hsl(var(--primary)/0.4)"
22          animationDuration={value}
23          gradientAngle={110}
24        />
25        <div className="relative z-10 flex flex-col items-center justify-center h-full">
26          <h3 className="text-2xl text-foreground">{label}</h3>
27          <p className="text-sm text-muted-foreground mt-[1px]">
28            {value}ms duration
29          </p>
30        </div>
31      </div>
32    ))}
33  </div>
34);
35}
36

1"use client";
2
3import MovingBackground from '@/components/component-x/moving-background';
4
5export function MovingBackgroundAngles() {
6const angles = [
7  { label: "45°", value: 45 },
8  { label: "135°", value: 135 },
9];
10
11return (
12  <div className="w-full h-full overflow-y-auto flex flex-col items-center justify-center gap-4">
13    <div className="flex flex-col gap-4">
14      {angles.map(({ label, value }) => (
15        <div
16          key={value}
17          className="relative px-4 py-2 border shadow-md rounded w-full"
18        >
19          <MovingBackground
20            backgroundColor="hsl(var(--muted)/0.4)"
21            shineColor="hsl(var(--primary)/0.4)"
22            animationDuration={6000}
23            gradientAngle={value}
24          />
25          <h3 className="text-foreground relative z-10 text-center">
26            Moving Background {label}
27          </h3>
28        </div>
29      ))}
30    </div>
31  </div>
32);
33}
34

1"use client";
2
3import MovingBackground from '@/components/component-x/moving-background';
4
5export function MovingBackgroundShineWidth() {
6const widths = [
7  { label: "Narrow", value: 5 },
8  { label: "Medium", value: 10 },
9  { label: "Wide", value: 20 },
10];
11
12return (
13  <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14    {widths.map(({ label, value }) => (
15      <div
16        key={value}
17        className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center rounded-lg"
18      >
19        <MovingBackground
20          backgroundColor="hsl(var(--muted)/0.4)"
21          shineColor="hsl(var(--primary)/0.4)"
22          animationDuration={6000}
23          gradientAngle={110}
24          shineWidth={value}
25        />
26        <div className="relative z-10 flex flex-col items-center justify-center h-full">
27          <h3 className="text-2xl text-foreground">{label}</h3>
28          <p className="text-sm text-muted-foreground mt-[1px]">
29            Width: {value}%
30          </p>
31        </div>
32      </div>
33    ))}
34  </div>
35);
36}
37

1"use client";
2
3import { useState } from 'react';
4import MovingBackground from '@/components/component-x/moving-background';
5import { Button } from '@/components/ui/button';
6
7export function MovingBackgroundControl() {
8const [animated, setAnimated] = useState(true);
9
10return (
11  <div className="relative w-full h-96 overflow-hidden border flex flex-col items-center justify-center bg-background rounded-lg gap-4">
12    <MovingBackground
13      backgroundColor="hsl(var(--muted)/0.4)"
14      shineColor="hsl(var(--primary)/0.4)"
15      animationDuration={6000}
16      animated={animated}
17    />
18    <div className="relative z-10 flex flex-col items-center justify-center gap-4">
19      <h3 className="text-2xl text-foreground">Animation Control</h3>
20      <Button onClick={() => setAnimated(!animated)} variant="outline">
21        {animated ? 'Pause' : 'Play'}
22      </Button>
23    </div>
24  </div>
25);
26}
27