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.
import { FoldGradient } from "@/components/ui/dia-gradient";
const settings = {
peak: 0.98,
valley: 0.55,
blur: 15,
fold: 74,
depth: 620,
softness: 8,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<FoldGradient
fold={s.fold}
depth={s.depth}
softness={s.softness}
peak={s.peak}
valley={s.valley}
blur={s.blur}
/>
</div>
);
}
