Apply Premium Background

apply-premium-background

When to Use

• Building hero sections, landing pages, or splash screens that need depth
• Card backgrounds that feel more polished than a flat color
• Dark-mode UIs that benefit from subtle animated grain or aurora effects
• When the design calls for layered CSS backgrounds without JS overhead

Do NOT use for

• Content-heavy reading areas (backgrounds distract from text)
• Tables, data grids, code blocks — use --color-background-subtle token instead
• Any surface where reduced-motion users will see animation — always respect prefers-reduced-motion

Dot Grid Background

/* Dot grid — light and dark variants */
.bg-dot-grid {
  background-color: var(--color-background);
  background-image: radial-gradient(
    circle,
    hsl(var(--dot-color, 215 20% 65%) / 0.4) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

/* Dark mode */
.dark .bg-dot-grid {
  --dot-color: 215 20% 35%;
}

// Tailwind + inline CSS
export function DotGrid({ children }) {
  return (
    <div
      className="relative min-h-screen bg-white dark:bg-gray-950"
      style={{
        backgroundImage:
          "radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px)",
        backgroundSize: "24px 24px",
      }}
    >
      {children}
    </div>
  );
}

Line Grid Background

.bg-line-grid {
  background-color: var(--color-background);
  background-image:
    linear-gradient(var(--grid-color, rgba(100,100,100,0.08)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color, rgba(100,100,100,0.08)) 1px, transparent 1px);
  background-size: 40px 40px;
}

Aurora / Mesh Gradient

/* Animated aurora — GPU-composited, uses transform only */
.bg-aurora {
  position: relative;
  overflow: hidden;
}

.bg-aurora::before {
  content: "";
  position: absolute;
  inset: -50%;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, hsl(270 60% 60% / 0.35), transparent),
    radial-gradient(ellipse 60% 80% at 80% 20%, hsl(200 80% 60% / 0.3), transparent),
    radial-gradient(ellipse 70% 60% at 50% 80%, hsl(320 70% 65% / 0.25), transparent);
  animation: aurora-drift 12s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes aurora-drift {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(5%, 3%) rotate(3deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-aurora::before { animation: none; }
}

Noise Texture Overlay

/* Subtle grain — adds organic texture over flat or gradient backgrounds */
.bg-noise {
  position: relative;
}

.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

Radial Spotlight (Cursor-Tracked)

"use client";
import { useRef } from "react";

export function SpotlightCard({ children }: { children: React.ReactNode }) {
  const ref = useRef<HTMLDivElement>(null);

  const handleMouseMove = (e: React.MouseEvent) => {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    el.style.setProperty("--mouse-x", `${x}%`);
    el.style.setProperty("--mouse-y", `${y}%`);
  };

  return (
    <div
      ref={ref}
     
      className="relative overflow-hidden rounded-2xl border border-white/10 bg-gray-900 p-8"
      style={{
        background:
          "radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.15) 0%, transparent 60%), hsl(222 84% 5%)",
      }}
    >
      {children}
    </div>
  );
}

Anti-Fake-Pass Checklist

• prefers-reduced-motion respected — animation disabled when user prefers no motion
• will-change: transform used on animated elements (compositor-only — no layout reflows)
• No arbitrary hex colors — all color values from design token system or HSL with CSS variables
• Background does not reduce text contrast below 4.5:1 (verify with contrast checker)
• pointer-events: none on decorative pseudo-elements (::before/::after)
• overflow: hidden on parent to prevent background bleed outside border-radius
• Noise SVG uses stitchTiles='stitch' to tile seamlessly without seams
• Aurora animation uses transform only — never top/left/width/height (no layout thrash)