Shaders
High-performance grain-gradient shaders for heroes, sections, and immersive backgrounds. Copy the source and tune speed and intensity with a few props.
Flowing blue gradient waves inspired by deep ocean currents. Perfect for hero sections and landing pages.
import OceanWave from "@/registry/infinity-ui/ocean-wave";
export default function OceanWaveDemo() {
return <OceanWave className="h-screen w-full" />;
}
Warm orange and pink gradients that evoke golden hour. Ideal for creative portfolios and warm-themed sites.
import SunsetGlow from "@/registry/infinity-ui/sunset-glow";
export default function SunsetGlowDemo() {
return <SunsetGlow className="h-screen w-full" />;
}
Vibrant multicolor aurora borealis effect with flowing gradients. Great for creative and artistic projects.
import AuroraDream from "@/registry/infinity-ui/aurora-dream";
export default function AuroraDreamDemo() {
return <AuroraDream className="h-screen w-full" />;
}
Modern mesh-style gradient with smooth purple and pink transitions. Perfect for SaaS and modern web apps.
import MeshGradient from "@/registry/infinity-ui/mesh-gradient";
export default function MeshGradientDemo() {
return <MeshGradient className="h-screen w-full" />;
}
Deep space-themed shader with dark purple and starlight accents. Ideal for dark-themed applications.
import CosmicDust from "@/registry/infinity-ui/cosmic-dust";
export default function CosmicDustDemo() {
return <CosmicDust className="h-screen w-full" />;
}
Glowing neon-inspired shader with pulsing cyan and magenta. Perfect for gaming sites and creative portfolios.
import NeonPulse from "@/registry/infinity-ui/neon-pulse";
export default function NeonPulseDemo() {
return <NeonPulse className="h-screen w-full" />;
}
Floating particle-style gradient creating a sense of depth. Great for tech-focused landing pages.
import ParticleField from "@/registry/infinity-ui/particle-field";
export default function ParticleFieldDemo() {
return <ParticleField className="h-screen w-full" />;
}
Structured geometric gradient with warm amber tones. Ideal for corporate and professional designs.
import GeometricPattern from "@/registry/infinity-ui/geometric-pattern";
export default function GeometricPatternDemo() {
return <GeometricPattern className="h-screen w-full" />;
}
Morphing grid-inspired gradient with cool indigo and slate tones. Perfect for developer tools and dashboards.
import GridMorph from "@/registry/infinity-ui/grid-morph";
export default function GridMorphDemo() {
return <GridMorph className="h-screen w-full" />;
}
Digital distortion-style shader with bold red and dark accents. Great for edgy, modern designs.
import GlitchWave from "@/registry/infinity-ui/glitch-wave";
export default function GlitchWaveDemo() {
return <GlitchWave className="h-screen w-full" />;
}
Vibrant dark-mode gradient with green and purple undertones. Excellent for modern, high-contrast dark UIs.
import UndertonesOne from "@/registry/infinity-ui/undertones-one";
export default function UndertonesOneDemo() {
return <UndertonesOne className="h-screen w-full" />;
}
Minimalist dark gradient with warm orange streaks. Perfect for sleek, sophisticated dark-themed applications.
import UndertonesTwo from "@/registry/infinity-ui/undertones-two";
export default function UndertonesTwoDemo() {
return <UndertonesTwo className="h-screen w-full" />;
}
Clean, bright gradient with soft blue and silver tones. Ideal for light-mode hero sections and clean pages.
import UndertonesThree from "@/registry/infinity-ui/undertones-three";
export default function UndertonesThreeDemo() {
return <UndertonesThree className="h-screen w-full" />;
}
More shaders on the way…