react-ai-orb-csp/dist/index.esm.css

A beautiful, customizable animated orb component for React applications! Perfect for AI interfaces, assistants, interactive chatbots, or anywhere you need a glowing orb.

.orb-size-xs{--react-ai-orb-size:41px;--shapes-size:36px}.orb-size-sm{--react-ai-orb-size:62px;--shapes-size:54px}.orb-size-md{--react-ai-orb-size:82px;--shapes-size:72px}.orb-size-lg{--react-ai-orb-size:143px;--shapes-size:126px}.orb-size-xl{--react-ai-orb-size:205px;--shapes-size:180px}.orb-size-xxl{--react-ai-orb-size:246px;--shapes-size:216px}.orb-speed-slow{--animation-rotation-speed-base:4s;--animation-hue-speed-base:4s}.orb-speed-medium{--animation-rotation-speed-base:2s;--animation-hue-speed-base:2s}.orb-speed-fast{--animation-rotation-speed-base:1s;--animation-hue-speed-base:1s}.orb-speed-very-fast{--animation-rotation-speed-base:0.5s;--animation-hue-speed-base:0.5s}.orb-hue-small{--hue-rotation:60deg}.orb-hue-medium{--hue-rotation:120deg}.orb-hue-large{--hue-rotation:240deg}.orb-hue-full{--hue-rotation:360deg}.blob-a-opacity-10{--blob-a-opacity:0.1}.blob-a-opacity-30{--blob-a-opacity:0.3}.blob-a-opacity-50{--blob-a-opacity:0.5}.blob-a-opacity-70{--blob-a-opacity:0.7}.blob-a-opacity-90{--blob-a-opacity:0.9}.blob-b-opacity-10{--blob-b-opacity:0.1}.blob-b-opacity-30{--blob-b-opacity:0.3}.blob-b-opacity-50{--blob-b-opacity:0.5}.blob-b-opacity-70{--blob-b-opacity:0.7}.blob-b-opacity-90{--blob-b-opacity:0.9}.orb-main-hue-animated{--main-hue-animation:hueShift var(--animation-hue-speed-base) linear infinite}.orb-no-shadow{--main-shadow:none}.orb-palette-cosmicNebula{--main-bg-start:#ec85ff;--main-bg-end:#318aff;--shadow-color-1:rgba(166,35,248,0);--shadow-color-2:rgba(121,19,255,.5);--shadow-color-3:hsla(0,0%,100%,.9);--shadow-color-4:#fda4fa;--shape-a-start:#85d2ff;--shape-a-end:rgba(115,49,255,0);--shape-b-start:#fef5fe;--shape-b-middle:#fd6dff;--shape-b-end:rgba(203,56,255,0);--shape-c-start:hsla(0,0%,100%,0);--shape-c-middle:rgba(254,111,255,0);--shape-c-end:#7006fe;--shape-d-start:hsla(0,0%,100%,0);--shape-d-middle:rgba(142,111,255,0);--shape-d-end:#0ef}.orb-palette-caribean{--main-bg-start:#40e0d0;--main-bg-end:#4cbdff;--shadow-color-1:rgba(8,226,255,0);--shadow-color-2:rgba(43,173,216,.5);--shadow-color-3:hsla(0,0%,100%,.9);--shadow-color-4:#48d1cc;--shape-a-start:#7fffd4;--shape-a-end:rgba(0,105,148,0);--shape-b-start:#f0f1ff;--shape-b-middle:#40e0d0;--shape-b-end:rgba(0,128,128,0);--shape-c-start:rgba(224,255,255,0);--shape-c-middle:rgba(32,178,170,0);--shape-c-end:#006064;--shape-d-start:rgba(224,255,255,0);--shape-d-middle:rgba(45,8,255,0);--shape-d-end:#00838f}.orb-palette-cherryBlossom{--main-bg-start:#ffcce5;--main-bg-end:#f69;--shadow-color-1:rgba(255,153,204,0);--shadow-color-2:rgba(255,102,178,.5);--shadow-color-3:hsla(0,0%,100%,.9);--shadow-color-4:#ffb7c5;--shape-a-start:#ffe4f0;--shape-a-end:rgba(255,140,189,0);--shape-b-start:#fff0f5;--shape-b-middle:#ff69b4;--shape-b-end:rgba(255,20,147,0);--shape-c-start:hsla(0,100%,99%,0);--shape-c-middle:rgba(255,182,193,0);--shape-c-end:#ff69b4;--shape-d-start:rgba(255,245,247,0);--shape-d-middle:rgba(255,92,143,0);--shape-d-end:#ff1493}.orb-palette-galaxy{--main-bg-start:#282863;--main-bg-end:#323264;--shadow-color-1:rgba(166,35,248,0);--shadow-color-2:rgba(121,19,255,.5);--shadow-color-3:hsla(0,0%,100%,.9);--shadow-color-4:#fda4fa;--shape-a-start:#85d2ff;--shape-a-end:rgba(115,49,255,0);--shape-b-start:#fef5fe;--shape-b-middle:#fd6dff;--shape-b-end:rgba(203,56,255,0);--shape-c-start:hsla(0,0%,100%,0);--shape-c-middle:rgba(254,111,255,0);--shape-c-end:#7006fe;--shape-d-start:hsla(0,0%,100%,0);--shape-d-middle:rgba(142,111,255,0);--shape-d-end:#0ef}.orb-palette-oceanDepths{--main-bg-start:#043fff;--main-bg-end:#111352;--shadow-color-1:rgba(0,149,182,0);--shadow-color-2:rgba(0,96,128,.5);--shadow-color-3:hsla(0,0%,100%,.9);--shadow-color-4:#48d1cc;--shape-a-start:#7fffd4;--shape-a-end:rgba(0,105,148,0);--shape-b-start:azure;--shape-b-middle:#40e0d0;--shape-b-end:rgba(0,128,128,0);--shape-c-start:rgba(224,255,255,0);--shape-c-middle:rgba(32,178,170,0);--shape-c-end:#006064;--shape-d-start:rgba(224,255,255,0);--shape-d-middle:rgba(0,128,128,0);--shape-d-end:#00838f}.orb-palette-emerald{--main-bg-start:#2ecc71;--main-bg-end:#27ae60;--shadow-color-1:rgba(0,128,64,0);--shadow-color-2:rgba(46,204,113,.5);--shadow-color-3:hsla(0,0%,100%,.8);--shadow-color-4:#58d68d;--shape-a-start:#66ffb2;--shape-a-end:rgba(39,174,96,0);--shape-b-start:#9fc;--shape-b-middle:#2ecc71;--shape-b-end:rgba(0,128,64,0);--shape-c-start:rgba(230,255,240,0);--shape-c-middle:rgba(102,255,178,.3);--shape-c-end:#2ecc71;--shape-d-start:rgba(240,255,250,0);--shape-d-middle:rgba(88,214,141,.4);--shape-d-end:#1e8449}.orb-palette-goldenGlow{--main-bg-start:#fc0;--main-bg-end:orange;--shadow-color-1:rgba(255,215,0,0);--shadow-color-2:rgba(255,215,0,.5);--shadow-color-3:hsla(0,0%,100%,.8);--shadow-color-4:#ff8c00;--shape-a-start:#ffe964;--shape-a-end:rgba(255,215,0,0);--shape-b-start:#ffd250;--shape-b-middle:#ffb432;--shape-b-end:rgba(255,140,0,0);--shape-c-start:hsla(0,0%,100%,0);--shape-c-middle:rgba(255,245,100,.5);--shape-c-end:gold;--shape-d-start:hsla(0,0%,100%,0);--shape-d-middle:rgba(255,215,0,.5);--shape-d-end:#ffb800}.orb-palette-volcanic{--main-bg-start:#320a00;--main-bg-end:#961400;--shadow-color-1:rgba(255,69,0,0);--shadow-color-2:rgba(255,69,0,.4);--shadow-color-3:rgba(255,140,0,.7);--shadow-color-4:red;--shape-a-start:#ff5722;--shape-a-end:rgba(255,69,0,0);--shape-b-start:tomato;--shape-b-middle:#ff4500;--shape-b-end:rgba(200,0,0,0);--shape-c-start:rgba(255,87,34,.5);--shape-c-middle:rgba(255,140,0,.7);--shape-c-end:#ff4500;--shape-d-start:rgba(50,10,0,.5);--shape-d-middle:rgba(200,30,10,.7);--shape-d-end:rgba(255,69,0,.8)}.blob-a.orb-palette-cosmicNebula .blob-gradient{fill:url(#gradient-cosmic-a)}.blob-b.orb-palette-cosmicNebula .blob-gradient{fill:url(#gradient-cosmic-b)}.blob-a.orb-palette-caribean .blob-gradient{fill:url(#gradient-caribean-a)}.blob-b.orb-palette-caribean .blob-gradient{fill:url(#gradient-caribean-b)}