Auralis

Heroes 316

About

A WebGL animated background with layered simplex noise, glowing light, vignette, and film grain for a dramatic ambient hero effect.

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

Code

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

Usage.tsx

"use client";

import Auralis from "@/components/ui/auralis";

export default function AuralisDemo() {
  return (
    <div className="relative w-full">
      <Auralis height="500px" />
      <div className="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center px-6 text-center">
        <h1 className="text-4xl font-semibold tracking-tight text-white md:text-6xl">
          Auralis
        </h1>
        <p className="mt-4 max-w-md text-sm text-white/70 md:text-base">
          A WebGL ambient background with layered noise, glowing light, and film grain.
        </p>
      </div>
    </div>
  );
}