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.

by Arlan

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

const settings = {
  fold: 74,
  depth: 620,
  softness: 8,
};

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