A versatile, elliptical gradient-based background component that creates smooth, elongated color transitions from a specified position. Perfect for adding depth and visual interest to your layouts with organic, directional gradient effects featuring independent X and Y radius control.
1"use client";
2
3import EllipseBackground from '@/components/component-x/ellipse-background';
4
5export function EllipseBackgroundPreview() {
6return (
7 <div className="relative w-full h-full overflow-hidden border flex items-center justify-center">
8 <EllipseBackground
9 position="top-center"
10 variant="fade"
11 colorOne="hsl(var(--primary)/0.6)"
12 colorTwo="transparent"
13 radiusX={60}
14 radiusY={100}
15 />
16 <h3 className="text-2xl text-foreground">Ellipse Background</h3>
17 </div>
18);
19}
20Run the following command to add the component:
npx cx add ellipse-background1"use client";
2
3import EllipseBackground, {
4type RadialPosition,
5} from "@/components/component-x/ellipse-background";
6
7function capitalizeFirstLetter(str: string): string {
8if (!str) return str;
9return str.charAt(0).toUpperCase() + str.slice(1);
10}
11
12export function EllipseBackgroundPositions() {
13const radialPositions: RadialPosition[] = [
14 "top-left",
15 "top-center",
16 "top-right",
17 "left-center",
18 "right-center",
19 "bottom-left",
20 "bottom-center",
21 "bottom-right",
22];
23
24return (
25 <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
26 {radialPositions.map((pos) => (
27 <div
28 key={pos}
29 className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
30 >
31 <EllipseBackground
32 position={pos}
33 variant="fade"
34 colorOne="hsl(var(--primary)/0.6)"
35 colorTwo="transparent"
36 radiusX={60}
37 radiusY={100}
38 />
39 <div className="relative z-10 flex items-center justify-center h-full">
40 <h3 className="text-2xl text-foreground">
41 {pos.split('-').map(capitalizeFirstLetter).join(' ')}
42 </h3>
43 </div>
44 </div>
45 ))}
46 </div>
47);
48}
49Smooth gradient fade
Bright glowing effect
1"use client";
2
3import EllipseBackground, {
4type RadialVariant,
5} from "@/components/component-x/ellipse-background";
6
7function capitalizeFirstLetter(str: string): string {
8if (!str) return str;
9return str.charAt(0).toUpperCase() + str.slice(1);
10}
11
12export function EllipseBackgroundVariants() {
13const variants: RadialVariant[] = ["fade", "glow"];
14
15return (
16 <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
17 {variants.map((variant) => (
18 <div
19 key={variant}
20 className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
21 >
22 <EllipseBackground
23 position="top-center"
24 variant={variant}
25 colorOne="hsl(var(--primary)/0.7)"
26 colorTwo="transparent"
27 radiusX={60}
28 radiusY={100}
29 />
30 <div className="relative z-10 flex flex-col items-center justify-center h-full">
31 <h3 className="text-2xl text-foreground">
32 {capitalizeFirstLetter(variant)}
33 </h3>
34 <p className="text-sm text-muted-foreground mt-[1px]">
35 {variant === 'fade'
36 ? 'Smooth gradient fade'
37 : 'Bright glowing effect'}
38 </p>
39 </div>
40 </div>
41 ))}
42 </div>
43);
44}
45X: 120% × Y: 40%
X: 60% × Y: 60%
1"use client";
2
3import EllipseBackground from '@/components/component-x/ellipse-background';
4
5export function EllipseBackgroundDimensions() {
6const dimensions = [
7 { label: "Wide Ellipse", radiusX: 120, radiusY: 40 },
8 { label: "Balanced", radiusX: 60, radiusY: 60 },
9];
10
11return (
12 <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
13 {dimensions.map(({ label, radiusX, radiusY }, index) => (
14 <div
15 key={index}
16 className="relative flex-none w-full h-full overflow-hidden border flex items-center justify-center"
17 >
18 <EllipseBackground
19 position="top-center"
20 variant="fade"
21 colorOne="hsl(var(--primary)/0.6)"
22 colorTwo="transparent"
23 radiusX={radiusX}
24 radiusY={radiusY}
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 X: {radiusX}% × Y: {radiusY}%
30 </p>
31 </div>
32 </div>
33 ))}
34 </div>
35);
36}
37Transition: 40%
Transition: 80%
Transition: 120%
1"use client";
2
3import EllipseBackground from '@/components/component-x/ellipse-background';
4
5export function EllipseBackgroundTransition() {
6const transitions = [
7 { label: "Sharp", value: 40 },
8 { label: "Medium", value: 80 },
9 { label: "Smooth", value: 120 },
10];
11
12return (
13 <div className="w-full h-full overflow-y-auto flex flex-col gap-4">
14 {transitions.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"
18 >
19 <EllipseBackground
20 position="top-center"
21 variant="fade"
22 colorOne="hsl(var(--primary)/0.6)"
23 colorTwo="transparent"
24 radiusX={60}
25 radiusY={100}
26 transition={value}
27 />
28 <div className="relative z-10 flex flex-col items-center justify-center h-full">
29 <h3 className="text-2xl text-foreground">{label}</h3>
30 <p className="text-sm text-muted-foreground mt-[1px]">
31 Transition: {value}%
32 </p>
33 </div>
34 </div>
35 ))}
36 </div>
37);
38}
39Pulse animation effect
1"use client";
2
3import EllipseBackground from '@/components/component-x/ellipse-background';
4
5export function EllipseBackgroundAnimated() {
6return (
7 <div className="relative w-full h-96 bg-gradient-to-b from-muted to-background rounded-lg overflow-hidden border">
8 <EllipseBackground
9 position="top-center"
10 variant="glow"
11 colorOne="hsl(var(--primary)/0.8)"
12 colorTwo="transparent"
13 animate={true}
14 radiusX={60}
15 radiusY={100}
16 />
17 <div className="relative z-10 flex items-center justify-center h-full">
18 <div className="text-center">
19 <h3 className="text-2xl font-bold text-foreground">
20 Animated Ellipse
21 </h3>
22 <p className="text-muted-foreground mt-2">Pulse animation effect</p>
23 </div>
24 </div>
25 </div>
26);
27}
28