Visual Experiences

2 layouts · 12 components

Interactive Visual Experience

Six live effects with quality, speed, and preset controls; the code sample regenerates as you change them.

1280px

Visual effects

Rendered live at low quality — nothing here is a screenshot.

WebGL & canvas

Aurora mesh gradient

Soft drifting colour fields with a fine grain pass.

Controls

Effect
Quality
Speed0.60

Generated code

AuroraMeshGradient.tsx

import { AuroraMeshGradient } from "@coloxo/ui/visuals";

export function AuroraMeshGradientDemo() {
  return (
    <div className="relative h-[22rem] w-full overflow-hidden rounded-xl">
      <AuroraMeshGradient
        className="absolute inset-0"
        speed={0.6}
        quality="low"
        paused={false}
        softness={0.65}
        grain={0.035}
        colorA="#2348ff"
        colorB="#7c3aed"
        colorC="#22d3ee"
      />
    </div>
  );
}

Components used

  • AuroraMeshGradient
  • Badge
  • Button
  • Card
  • Heading
  • InteractiveRippleField
  • LiquidMetalMorph
  • Select
  • SpatialGlassLayers
  • Text
  • Vortex
  • WaveBackground

Install

npm install @coloxo/ui

The block imports only from @coloxo/ui and lucide-react. Styling uses the package token layer, so no Tailwind setup is required.

All blocksBrowse components