A suite of premium SolidJS UI animations and micro-interactions for AI & agent interfaces. Includes Thinking Orbs dotted loading indicators, Metal FX liquid metal WebGL shader rings, Border Beam dynamic traveling & breathing glowing borders, Agent Thinking multi-line reasoning streams, and Web Search live radar discovery indicators.
npm install solid-thinking-orbs
# or
pnpm add solid-thinking-orbs
# or
bun add solid-thinking-orbsDotted thought-orb loading indicators for AI & agent UIs with 13 hand-crafted animated states. Rendered on high-performance 2D canvas with automatic dark/light theme adaptation.
import { ThinkingOrb } from 'solid-thinking-orbs';
// Avatar / Hero scale
<ThinkingOrb state="searching" size={64} />
// Inline text scale
<ThinkingOrb state="listening" size={20} />- Original V1:
working,searching,solving,listening,composing,shaping - Extended V2:
syncing,evolving,building,hypercube,conjuring,conjuring_static,assembling,blooming
Liquid metal WebGL shader ring for buttons, badges, and icon controls with realtime luminance-driven catch-glow and proximity reflections on neighboring elements.
import { MetalFx } from 'solid-thinking-orbs';
// Pill Button with Blueberry preset
<MetalFx preset="blueberry" variant="button">
<button class="h-10 px-6 rounded-full bg-zinc-900 text-white">
Upgrade to Pro
</button>
</MetalFx>
// Icon Button with Chromatic preset
<MetalFx preset="chromatic" variant="circle">
<button class="h-10 w-10 rounded-full bg-zinc-900 text-white">
↑
</button>
</MetalFx>chromatic: Rainbow spectrumsilver: Polished chromegold: Warm metallic goldblueberry: Deep indigo & electric bluerose: Vivid crimson & pinkcopper: Warm amber & fiery orange
Animated glowing border effect that traces element edges with smooth radial and conic gradients, breathing pulse modes, and traveling spotlights.
import { BorderBeam } from 'solid-thinking-orbs';
// Contained Breathing Glow
<div class="relative w-96 h-48 rounded-2xl bg-zinc-900">
<BorderBeam size="pulse-inner" colorVariant="ocean" borderRadius={16}>
<div class="p-6">Content</div>
</BorderBeam>
</div>
// Outward Bloom Halo
<BorderBeam size="pulse-outside" colorVariant="colorful" borderRadius={16}>
<div class="p-6">Content with outward halo</div>
</BorderBeam>
// Traveling Spotlight Line
<BorderBeam size="line" colorVariant="sunset" borderRadius={16}>
<div class="p-6">Bottom traveling glow</div>
</BorderBeam>pulse-inner: Contained breathing glowpulse-outside: Radiating outward bloom halomd: Full rotating perimeter beamsm: Compact button-sized glowline: Bottom traveling spotlight with breathing spike
Collapsible multi-line reasoning stream displaying step-by-step thoughts from LLMs and agentic workflows with live elapsed timer.
import { AgentThinking } from 'solid-thinking-orbs';
<AgentThinking
showTimer={true}
autoCollapse={true}
onComplete={() => console.log('Thinking finished!')}
/>Live search radar component displaying real-time URL discovery and web queries for search-augmented agents.
import { WebSearch } from 'solid-thinking-orbs';
<WebSearch
query="JWT security best practices and authorization flaws"
loop={true}
/>A Cursor-style to-do list for agent reasoning: a collapsible card showing completed, active in-progress, and pending item states, with a progress pie ring and rolling counter numbers.
import { TodoList } from 'solid-thinking-orbs';
<TodoList
labels={[
"Scaffold the project structure",
"Build the component registry",
"Implement entitlement gating",
"Wire up Stripe checkout",
"Polish the landing page",
]}
stepMs={2250}
/>Interactive GitHub activity cards with staggered animations, tooltips, and expandable repository breakdown drawers.
1:1 port of Rare UI's expandable activity heatmap with month labels, staggered column entrance, and spring-animated breakdown list.
import { ActivityHeatmapV2, type RepoContribution } from 'solid-thinking-orbs';
const repos: RepoContribution[] = [
{ name: 'solid-thinking-orbs', count: 320, color: '#38bdf8' },
{ name: 'antigravity-core', count: 184, color: '#a855f7' },
{ name: 'flow-engine', count: 76, color: '#34d399' },
];
<ActivityHeatmapV2
username="Mvkweb"
totalContributions={580}
topRepos={repos}
weeks={20}
/>Classic activity heatmaps with rounded cell grids and palette presets.
import { ActivityHeatmap } from 'solid-thinking-orbs';
<ActivityHeatmap accentColor="green" weeks={20} />
<ActivityHeatmap accentColor="blue" weeks={20} />
<ActivityHeatmap accentColor="purple" weeks={20} />A SolidJS port of Jakub Antalík's liquid-gooey library. Renders a hardware-accelerated SVG silhouette layer with real box-shadow filter pipelines behind crisp interactive UI content.
import { Liquid } from 'solid-thinking-orbs';
<Liquid blur={6} contrast={18} fill="#ffffff" shadow="0 2px 8px rgba(0,0,0,0.1)">
{/* Satellite buttons that split like fluid droplets */}
<Liquid.Item x={open() ? -54 : 0} y={open() ? -34 : 0} transition={{ duration: 550, ease: 'bouncy' }}>
<button class="pm-btn pm-sat">File</button>
</Liquid.Item>
<Liquid.Item x={0} y={open() ? -64 : 0} transition={{ duration: 550, ease: 'bouncy' }} delay={40}>
<button class="pm-btn pm-sat">Image</button>
</Liquid.Item>
<Liquid.Item x={open() ? 54 : 0} y={open() ? -34 : 0} transition={{ duration: 550, ease: 'bouncy' }} delay={80}>
<button class="pm-btn pm-sat">Folder</button>
</Liquid.Item>
{/* Main Trigger Button */}
<Liquid.Item>
<button class="pm-btn pm-main" onClick={toggle}>+</button>
</Liquid.Item>
</Liquid>morph: Touching pieces merge with organic fluid bridges and cross-blur content transitions (shape,bounce,speed).move: Liquid rubber trailing moving elements with velocity stretch and trailing droplet tails (springiness,wobble,stretch,trail).dissolve: Contact melt with turbulence displacement, two-liquid mixing erosion, and directional flow gravity.
bun run dev # Start showcase dev server
bun run build:lib # Build library for npm distribution
bun run build:demo # Build showcase site
bun run typecheck # Validate TypeScript types- SolidJS port, extended V2 states, and additional UI modules by Mvkweb.
- Original Thinking Orbs concept & Liquid Gooey physics by Jakub Antalík.
- GitHub Activity V2 design inspired by Rare UI.
- Licensed under the MIT License.