Bug Report: AuroraText Overlay Issue in Magic UI

[dev25-hs]

When importing and using the AuroraText component from Magic UI, the color shift effect does not apply correctly inside the text. Instead, it appears as if a div with changing colors is placed over the text, rather than blending seamlessly with the text itself.

To Reproduce
Steps to reproduce the issue:

Install and import AuroraText from Magic UI.
Use the component in a Next.js/React project with the following sample code:

import { AuroraText } from "magic-ui";

export default function Example() {
  return  <h1 className="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
      <AuroraText>Free Trial</AuroraText> classes for 3 days
    </h1>
}

Run the application and observe the text rendering.

Expected Behavior
The color shifting effect should be applied inside the text itself, rather than appearing as an overlay outside of the text boundaries.

Screenshots
Attached is an image showing the issue where the gradient effect is appearing as a separate overlay instead of affecting the text properly.

This issue may be related to improper styling or missing blending properties in the component. If there's a workaround (such as additional CSS or props to modify the effect), please advise.

[SikandarJODD]

hey i found the solution if you are using tailwind css add this

@layer base {
  :root {
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
  }

  .dark {
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
  }
}

[DaniloTrotta]

--color-1: 0 100% 63%;
--color-2: 270 100% 63%;
--color-3: 210 100% 63%;
--color-4: 195 100% 63%;
--color-5: 90 100% 63%;

I have the same problem and this doesn't fix it for me

[SikandarJODD]

@DaniloTrotta @WasiHaiderHS
check this out : This works we need to add bg-background in body as shown below

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
  }

.dark {
    --background: 240 10% 3.9%;
  }
}

@layer base {
  body {
    @apply bg-background ;
  }
}

here is my tailwind.config.ts file

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: ["./src/**/*.{html,js,svelte,ts}"],
  safelist: ["dark"],
  theme: {
    extend: {
      colors: {
        "color-1": "hsl(var(--color-1))",
        "color-2": "hsl(var(--color-2))",
        "color-3": "hsl(var(--color-3))",
        "color-4": "hsl(var(--color-4))",
        "color-5": "hsl(var(--color-5))",
        background: "hsl(var(--background) / <alpha-value>)",
      },
      keyframes: {
        "aurora-border": {
          "0%, 100%": { borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%" },
          "25%": { borderRadius: "47% 29% 39% 49% / 61% 19% 66% 26%" },
          "50%": { borderRadius: "57% 23% 47% 72% / 63% 17% 66% 33%" },
          "75%": { borderRadius: "28% 49% 29% 100% / 93% 20% 64% 25%" },
        },
        "aurora-1": {
          "0%, 100%": { top: "0", right: "0" },
          "50%": { top: "50%", right: "25%" },
          "75%": { top: "25%", right: "50%" },
        },
        "aurora-2": {
          "0%, 100%": { top: "0", left: "0" },
          "60%": { top: "75%", left: "25%" },
          "85%": { top: "50%", left: "50%" },
        },
        "aurora-3": {
          "0%, 100%": { bottom: "0", left: "0" },
          "40%": { bottom: "50%", left: "25%" },
          "65%": { bottom: "25%", left: "50%" },
        },
        "aurora-4": {
          "0%, 100%": { bottom: "0", right: "0" },
          "50%": { bottom: "25%", right: "40%" },
          "90%": { bottom: "50%", right: "25%" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "caret-blink": "caret-blink 1.25s ease-out infinite",
      },
    },
  },
};

export default config;

well guys above it for svelte - this might be somewhat diff for react projects - i hope you get the idea
we need to add background: "hsl(var(--background) / <alpha-value>)",

[dev25-hs]

@DaniloTrotta @WasiHaiderHS check this out : This works we need to add bg-background in body as shown below

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--color-1: 0 100% 63%;
--color-2: 270 100% 63%;
--color-3: 210 100% 63%;
--color-4: 195 100% 63%;
--color-5: 90 100% 63%;
}

.dark {
--background: 240 10% 3.9%;
}
}

@layer base {
body {
@apply bg-background ;
}
}

here is my tailwind.config.ts file

import type { Config } from "tailwindcss";

const config: Config = {
darkMode: ["class"],
content: ["./src/**/*.{html,js,svelte,ts}"],
safelist: ["dark"],
theme: {
extend: {
colors: {
"color-1": "hsl(var(--color-1))",
"color-2": "hsl(var(--color-2))",
"color-3": "hsl(var(--color-3))",
"color-4": "hsl(var(--color-4))",
"color-5": "hsl(var(--color-5))",
background: "hsl(var(--background) / )",
},
keyframes: {
"aurora-border": {
"0%, 100%": { borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%" },
"25%": { borderRadius: "47% 29% 39% 49% / 61% 19% 66% 26%" },
"50%": { borderRadius: "57% 23% 47% 72% / 63% 17% 66% 33%" },
"75%": { borderRadius: "28% 49% 29% 100% / 93% 20% 64% 25%" },
},
"aurora-1": {
"0%, 100%": { top: "0", right: "0" },
"50%": { top: "50%", right: "25%" },
"75%": { top: "25%", right: "50%" },
},
"aurora-2": {
"0%, 100%": { top: "0", left: "0" },
"60%": { top: "75%", left: "25%" },
"85%": { top: "50%", left: "50%" },
},
"aurora-3": {
"0%, 100%": { bottom: "0", left: "0" },
"40%": { bottom: "50%", left: "25%" },
"65%": { bottom: "25%", left: "50%" },
},
"aurora-4": {
"0%, 100%": { bottom: "0", right: "0" },
"50%": { bottom: "25%", right: "40%" },
"90%": { bottom: "50%", right: "25%" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"caret-blink": "caret-blink 1.25s ease-out infinite",
},
},
},
};

export default config;

well guys above it for svelte - this might be somewhat diff for react projects - i hope you get the idea we need to add background: "hsl(var(--background) / <alpha-value>)",

Most of these dependencies are usually added when you run the installation command, but I tried the code above and it's still not working for me.

[1chooo]

I have the same issue when using in Safari

please visit https://stonix.1chooo.com to see the bug

[dillionverma]

Hi! Can you please try the latest version of aurora text? We just merged in #580 which aims to address these issues :)

[1chooo]

@dillionverma

There is still the same issue in Safari, but it works in Chrome. Could you help me fix it?

[dillionverma]

Try on safari now! Updated the latest version @1chooo

[dillionverma]

Working for you? @1chooo

[dev25-hs]

The text functionality works well on Chrome, but there are issues on Firefox also where the text briefly appears before disappearing entirely.

[1chooo]

Hi @dillionverma ! Sorry for the late replying. It's still not work; however, it will show up immediately when refreshing the website in Safari.

Screen.Recording.2025-03-15.at.4.07.54.PM.mov

[dillionverma]

Hi all! Thanks for reporting this.

We re-did the component again recently with a much simpler implementation and cross-browser support!

Feel free to try the latest version on the site and let me know if you have any feedback :)

Will close issue for now

https://magicui.design/docs/components/aurora-text