Dia Gradient

Dia Browser's signature aurora glow — a rainbow field anchored to the bottom that rises up on mount via a scaleY transform, unfurling from the floor like an aurora. Zero dependencies, no canvas, no per-frame work. Ships four self-contained renderings of the same idea: DiaGradient (a bell-curve row of tall, heavily-blurred full-rainbow columns — the original footer look), PeakedGradient (stacked smooth bezier peaks, light front to dark back, one soft mountain of colour with a pointiness control and a scroll-driven reveal option), FoldGradient (the bar field on a 3D plane folded away from the viewer via CSS perspective and rotateX, like a glowing floor receding toward a horizon), and DodgeGradient (a vertical black-to-white fade color-dodge-blended over a horizontal rainbow, masked into a dome bloom). Each honours prefers-reduced-motion and is a drop-in background layer.

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

import { DodgeGradient } from "@/components/ui/dia-gradient";

const settings = {
  angle: 90,
  fade: 0.38,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-[500px] w-full bg-background">
      <DodgeGradient angle={s.angle} fade={s.fade} />
    </div>
  );
}