@checkstack/ui 1.3.3 → 1.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/src/components/AmbientBackground.tsx +10 -24
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @checkstack/ui
2
2
 
3
+ ## 1.3.4
4
+
5
+ ### Patch Changes
6
+
7
+ - 692c717: Increased the brightness and color intensity of the AmbientBackground auroras to ensure high visibility through the 1px grid lines.
8
+
3
9
  ## 1.3.3
4
10
 
5
11
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@checkstack/ui",
3
- "version": "1.3.3",
3
+ "version": "1.3.4",
4
4
  "type": "module",
5
5
  "main": "src/index.ts",
6
6
  "dependencies": {
package/src/components/AmbientBackground.tsx CHANGED
@@ -24,35 +24,19 @@ export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
24
24
  return (
25
25
  <>
26
26
  <div
27
- className="aurora-blob absolute w-[50%] h-[50%] -top-[10%] -left-[10%]"
27
+ className="aurora-blob absolute w-[100%] h-[100%] -top-[40%] -left-[20%]"
28
28
  style={{
29
29
  background:
30
- "radial-gradient(circle at center, hsl(var(--primary) / 0.8), transparent 60%)",
31
- animation: "aurora-float-1 25s ease-in-out infinite",
30
+ "radial-gradient(circle at center, hsl(var(--primary) / 0.9) 0%, hsl(var(--primary) / 0.3) 50%, transparent 90%)",
31
+ animation: "aurora-float-1 60s ease-in-out infinite",
32
32
  }}
33
33
  />
34
34
  <div
35
- className="aurora-blob absolute w-[40%] h-[40%] bottom-[10%] right-[10%]"
35
+ className="aurora-blob absolute w-[90%] h-[90%] -bottom-[30%] -right-[20%]"
36
36
  style={{
37
37
  background:
38
- "radial-gradient(circle at center, hsl(var(--chart-2) / 0.7), transparent 60%)",
39
- animation: "aurora-float-2 20s ease-in-out infinite",
40
- }}
41
- />
42
- <div
43
- className="aurora-blob absolute w-[35%] h-[35%] top-[30%] left-[40%]"
44
- style={{
45
- background:
46
- "radial-gradient(circle at center, hsl(var(--primary) / 0.6), transparent 60%)",
47
- animation: "aurora-float-3 30s ease-in-out infinite",
48
- }}
49
- />
50
- <div
51
- className="aurora-blob absolute w-[45%] h-[45%] bottom-[20%] left-[10%]"
52
- style={{
53
- background:
54
- "radial-gradient(circle at center, hsl(var(--chart-1) / 0.5), transparent 60%)",
55
- animation: "aurora-float-4 35s ease-in-out infinite",
38
+ "radial-gradient(circle at center, hsl(var(--chart-2) / 0.8) 0%, hsl(var(--chart-2) / 0.2) 50%, transparent 90%)",
39
+ animation: "aurora-float-2 50s ease-in-out infinite",
56
40
  }}
57
41
  />
58
42
  </>
@@ -67,8 +51,10 @@ export const AmbientBackground: React.FC<AmbientBackgroundProps> = ({
67
51
  )}
68
52
  >
69
53
  <div className="pointer-events-none fixed inset-0 overflow-hidden">
70
- {/* Layer 1: Aurora Blobs (Bottom) */}
71
- {auroraBlobs}
54
+ {/* Layer 1: Aurora Blobs (Bottom) - Centered in content area */}
55
+ <div className="max-w-7xl mx-auto h-full relative">
56
+ {auroraBlobs}
57
+ </div>
72
58
 
73
59
  {/* Layer 2: Grid Mask - Switches mode based on performance capability */}
74
60
  <div