Three drifting colour fields behind a container. Only transform animates, so a full-bleed hero holds 60fps where an animated filter would not.
import { useState } from "react";
import { AuroraSurface } from "@/components/ui/klyv-aurora-surface";
import { Button } from "@/components/ui/klyv-aurora-surface-utils/components-Button-Button";
import { SegmentedControl } from "@/components/ui/klyv-aurora-surface-utils/components-SegmentedControl-SegmentedControl";
import { Tag } from "@/components/ui/klyv-aurora-surface-utils/components-Tag-Tag";
import { Text } from "@/components/ui/klyv-aurora-surface-utils/components-Text-Text";
import { type AuroraIntensity } from "@/components/ui/klyv-aurora-surface";
function AuroraExample() {
const [intensity, setIntensity] = useState<AuroraIntensity>('medium')
const [paused, setPaused] = useState(false)
return (
<div className="flex w-full flex-col gap-3">
<div className="flex flex-wrap items-center gap-2">
<SegmentedControl
label="Intensity"
size="sm"
value={intensity}
onValueChange={(value) => setIntensity(value as AuroraIntensity)}
options={[
{ value: 'soft', label: 'Soft' },
{ value: 'medium', label: 'Medium' },
{ value: 'bold', label: 'Bold' },
]}
/>
<Button size="sm" variant="outline" onClick={() => setPaused((value) => !value)}>
{paused ? 'Play' : 'Pause'}
</Button>
</div>
<AuroraSurface
intensity={intensity}
paused={paused}
grain
className="min-h-[240px]"
contentClassName="flex flex-col items-start gap-3 p-8"
>
<Tag size="sm" tone="accent">
New this month
</Tag>
<Text as="h3" size="display" className="max-w-[18ch]">
Everything you spend, in one place.
</Text>
<Text size="body" weight="medium" tone="soft" leading="normal" className="max-w-[46ch]">
The light behind this panel is three blurred gradients on transform loops at co-prime
durations, so the composite never visibly repeats.
</Text>
<Button size="sm">Open the dashboard</Button>
</AuroraSurface>
</div>
)
}
export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><AuroraExample /></div></div>}