Aurora

Heroes 23

About

Great animated gradient fully customizable

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aurora to your project and fits it to your theme.

Code

How Aurora is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React, { useState, useEffect } from "react";
import { Aurora } from "@/components/ui/aurora"; // Adjust path if needed

const DemoAurora = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  // Example color stops for light and dark themes
  const lightThemeColors: [string, string, string] = ["#FF9A8B", "#FF6A88", "#FF99AC"];
  const darkThemeColors: [string, string, string] = ["#3A29FF", "#00A9FF", "#7A00FF"];
  
  const [auroraColors, setAuroraColors] = useState<[string, string, string]>(darkThemeColors);

  useEffect(() => {
    const storedTheme = localStorage.getItem('theme');
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    if (storedTheme === 'dark' || (!storedTheme && systemPrefersDark)) {
      document.documentElement.classList.add('dark');
      setIsDarkMode(true);
      setAuroraColors(darkThemeColors);
    } else {
      document.documentElement.classList.remove('dark');
      setIsDarkMode(false);
      setAuroraColors(lightThemeColors);
    }
  }, []);

  const toggleDarkMode = () => {
    setIsDarkMode(prev => {
      const newMode = !prev;
      if (newMode) {
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
        setAuroraColors(darkThemeColors);
      } else {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
        setAuroraColors(lightThemeColors);
      }
      return newMode;
    });
  };

  return (
    <div className="flex flex-col w-full min-h-screen justify-center items-center 
                   bg-slate-100 dark:bg-slate-950 
                   py-10 px-4 relative overflow-hidden transition-colors duration-300">
      
      <div className="absolute inset-0 z-0">
        <Aurora
          colorStops={auroraColors}
          blend={0.4} // Softer blend
          amplitude={0.8} // Less aggressive amplitude
          speed={0.15} // Slower speed
        />
      </div>
    </div>
  );
};

export { DemoAurora };