Dhileep Kumar GM

Aura Core

Shaders

About

"Aura Core," is designed to feel like a prime, luxurious, and powerful energy source, fitting the "Dubai 2048 Winner" theme. It combines procedural noise, geometric rays, and smooth particle motion into a single, cohesive visual. The key feature is the interactive UI panel that allows you to control the shader's parameters in real-time, transforming it from a simple animation into a creative tool.

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

Code

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

Usage.tsx

import AuraCore from "@/components/ui/aura-core";

const settings = {
  hue: 150,
  power: 1.2,
  focus: 60,
  distortion: 0.6,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <AuraCore
        hue={s.hue}
        power={s.power}
        focus={s.focus}
        distortion={s.distortion}
      />
    </div>
  );
}

Explore more

Part of Freedom — browse the full library on 21st.dev.