@intuix/core

Next-Gen Living UI Components for React — 130+ components with AI-powered interactions, neumorphic design, CID patterns, and 3D scenes.

Install

npm install @intuix/core framer-motion

For 3D components (optional):

npm install three @react-three/fiber @react-three/drei

Living UI Components

MorphingBlob

Fluid action blob that replaces traditional buttons. Morphs shape on hover/click/loading.

import { MorphingBlob } from '@intuix/core';

<MorphingBlob
  label="Create"
  color="#6366f1"
  size={120}
  onExecute={async () => { await saveProject(); }}
  actions={[
    { id: '1', label: 'Save', onClick: () => {} },
    { id: '2', label: 'Share', onClick: () => {} },
  ]}
/>

Props: label color? size? onExecute? actions?: { id, label, onClick }[] aiSuggestedAction? theme? animation?

FlowSurface

Gravitational data dashboard — items float, attract by weight, cluster by tags.

import { FlowSurface } from '@intuix/core';

<FlowSurface
  items={[
    { id: 'revenue', label: 'Revenue', value: '$45K', icon: <span>💰</span>,
      weight: 0.95, heat: 0.9, tags: ['finance'], color: '#10b981' },
    { id: 'users', label: 'Users', value: '1.2K', icon: <span>👥</span>,
      weight: 0.7, heat: 0.6, tags: ['growth'], color: '#6366f1' },
  ]}
  width={600}
  height={400}
  gravity={0.6}
  enableClustering
  enableAnomalyPulse
  onItemClick={(item) => console.log(item)}
  onItemDismiss={(item) => remove(item.id)}
/>

Props: items: FlowItem[] width? height? gravity? decay? enableClustering? enableAnomalyPulse? enablePredictiveFocus? enableParallax? onItemClick? onItemDismiss? onClusterForm?

NeuralGrid

Interactive node-based data visualization with connections and AI insights.

import { NeuralGrid } from '@intuix/core';

<NeuralGrid
  width={600}
  height={400}
  nodes={[
    { id: '1', label: 'Sales', value: '$12K', importance: 0.9,
      color: '#6366f1', connections: ['2', '3'] },
    { id: '2', label: 'Users', value: '1.2K', importance: 0.7,
      color: '#8b5cf6', connections: ['1'] },
    { id: '3', label: 'Revenue', value: '$45K', importance: 1,
      color: '#a78bfa', connections: ['1'] },
  ]}
  aiInsights={['Revenue is trending up']}
  onNodeClick={(node) => console.log(node)}
/>

Props: nodes: NeuralNode[] width? height? aiInsights? highlightedNodes? onNodeClick? onNodeHover? theme? animation?

IntentSlider

Continuous intent-based range filter with step labels and preview.

import { IntentSlider } from '@intuix/core';

const [value, setValue] = useState(0.5);

<IntentSlider
  range={{ min: 'Budget', max: 'Premium', color: ['#6366f1', '#ec4899'] }}
  value={value}
  onChange={setValue}
  size="lg"
  steps={['Budget', 'Standard', 'Premium']}
  showPreview={(v) => <span>{v < 0.5 ? '💰 Budget' : '✨ Premium'}</span>}
  onIntentChange={(intent, confidence) => console.log(intent, confidence)}
/>

Props: range: { min, max, color? } value? onChange steps? size?: 'sm' | 'md' | 'lg' showPreview? onIntentChange? theme? animation?

MagneticField

Cursor-attracting action elements — items pull toward mouse based on priority.

import { MagneticField } from '@intuix/core';

<MagneticField
  radius={250}
  strength={0.9}
  items={[
    { id: '1', label: 'Edit', icon: <span>✏️</span>, priority: 0.9,
      color: '#6366f1', onClick: () => {} },
    { id: '2', label: 'Share', icon: <span>📤</span>, priority: 0.7,
      color: '#8b5cf6', onClick: () => {} },
    { id: '3', label: 'Delete', icon: <span>🗑️</span>, priority: 0.3,
      color: '#ef4444', onClick: () => {} },
  ]}
/>

Props: items: MagneticItem[] radius? strength? theme? animation?

PredictiveHover

Shows predicted outcomes when hovering over an action button.

import { PredictiveHover } from '@intuix/core';

<PredictiveHover
  predictions={[
    { label: 'Removes 3 items', impact: 'negative', confidence: 0.9 },
    { label: 'Frees 2.4MB', impact: 'positive', confidence: 0.85 },
  ]}
  position="top"
>
  <button>🗑️ Delete All</button>
</PredictiveHover>

Props: children predictions: HoverPrediction[] position?: 'top' | 'bottom' | 'left' | 'right' delay? onPredict? theme? animation?

GlassCommandCube

3D rotatable glass cube with actions on each face.

import { GlassCommandCube } from '@intuix/core';

<GlassCommandCube
  size={160}
  faces={[
    { id: '1', label: 'Home', icon: <span>🏠</span>, color: '#6366f1', onClick: () => {} },
    { id: '2', label: 'Search', icon: <span>🔍</span>, color: '#8b5cf6', onClick: () => {} },
    { id: '3', label: 'Profile', icon: <span>👤</span>, color: '#a78bfa', onClick: () => {} },
    { id: '4', label: 'Settings', icon: <span>⚙️</span>, color: '#7c3aed', onClick: () => {} },
  ]}
/>

Props: faces: CubeFace[] size? aiReorderByUsage? theme? animation?

OrbitNavigation

Orbital navigation with items rotating around a center point.

import { OrbitNavigation } from '@intuix/core';

<OrbitNavigation
  radius={120}
  size={320}
  centerLabel="Menu"
  items={[
    { id: '1', label: 'Dashboard', icon: <span>📊</span>, frequency: 0.9,
      color: '#6366f1', onClick: () => {} },
    { id: '2', label: 'Projects', icon: <span>📁</span>, frequency: 0.7,
      color: '#8b5cf6', onClick: () => {} },
  ]}
/>

Props: items: OrbitItem[] radius? size? centerLabel? centerIcon? onCenterClick? theme? animation?

AdaptivePanel

Self-rearranging panel — sections reorder based on usage patterns.

import { AdaptivePanel } from '@intuix/core';

<AdaptivePanel
  aiAdapt={true}
  storageKey="my-panel"
  sections={[
    { id: 'analytics', title: 'Analytics', icon: <span>📊</span>,
      collapsible: true, color: '#6366f1', priority: 0.9,
      content: <Chart /> },
    { id: 'tasks', title: 'Tasks', icon: <span>✅</span>,
      collapsible: true, color: '#10b981',
      content: <TaskList /> },
  ]}
  onReorder={(sections) => console.log(sections)}
/>

Props: sections: PanelSection[] aiAdapt? storageKey? onReorder? theme? animation?

GestureSurface

Canvas-based gesture recognition — draw patterns to trigger actions.

import { GestureSurface } from '@intuix/core';

<GestureSurface
  width={300}
  height={300}
  color="#6366f1"
  showGuide
  gestures={[
    { name: 'circle', pattern: 'CW', label: 'Create', icon: <span>➕</span>,
      action: () => createItem() },
    { name: 'swipe-right', pattern: 'R', label: 'Next',
      action: () => nextPage() },
    { name: 'zigzag', pattern: 'RLR', label: 'Delete',
      action: () => deleteItem() },
  ]}
  onGestureRecognized={(g) => console.log(g.label)}
/>

Props: gestures: GesturePattern[] width? height? color? showGuide? onGestureRecognized? theme? animation?

MoodScape

Sentiment-reactive background — analyzes content and adapts atmosphere.

import { MoodScape } from '@intuix/core';

<MoodScape
  intensity={0.6}
  onMoodChange={(mood, score) => console.log(mood, score)}
>
  <div className="p-6">
    <h3>Project Approved! ✅</h3>
    <p>All systems verified and stable.</p>
  </div>
</MoodScape>

// Override mood manually
<MoodScape mood="urgent">
  <AlertBanner />
</MoodScape>

Props: children mood? content? intensity? animated? onMoodChange? theme? animation?

GravityMenu

Usage-weighted menu — frequently clicked items sink to the top.

import { GravityMenu } from '@intuix/core';

<GravityMenu
  storageKey="my-nav"
  gravity={0.8}
  showWeights
  items={[
    { id: 'home', label: 'Dashboard', icon: <span>📊</span>,
      color: '#6366f1', onClick: () => navigate('/') },
    { id: 'projects', label: 'Projects', icon: <span>📁</span>,
      color: '#8b5cf6', onClick: () => navigate('/projects') },
    { id: 'settings', label: 'Settings', icon: <span>⚙️</span>,
      color: '#64748b', onClick: () => navigate('/settings') },
  ]}
  onReorder={(sorted) => console.log(sorted)}
/>

Props: items: GravityMenuItem[] storageKey? gravity? direction?: 'vertical' | 'horizontal' showWeights? onReorder? theme? animation?

PulseMetric

Heartbeat-synced live metric — pulse speed matches data velocity.

import { PulseMetric } from '@intuix/core';

<PulseMetric
  value={45200}
  previousValue={44800}
  label="Revenue"
  format={(v) => '$' + (v / 1000).toFixed(1) + 'K'}
  color="#10b981"
  size="lg"
  showPulse
  showDelta
  anomalyDetection
/>

Props: value label previousValue? format? color? size?: 'sm' | 'md' | 'lg' showPulse? showDelta? trend? anomalyDetection? theme? animation?

Neumorphic Design System (50+ components)

All neumorphic components accept theme?: Partial<NeuTheme> and animation?: Partial<NeuAnimation>.

NeuButton

import { NeuButton } from '@intuix/core';

<NeuButton variant="primary" size="md" onClick={() => {}}>
  Click me
</NeuButton>
<NeuButton variant="secondary" icon={<span>💾</span>}>Save</NeuButton>
<NeuButton variant="ghost" fullWidth disabled>Disabled</NeuButton>

Props: children onClick? variant?: 'primary' | 'secondary' | 'ghost' size?: 'sm' | 'md' | 'lg' disabled? icon? fullWidth?

NeuCard

import { NeuCard } from '@intuix/core';

<NeuCard padding={20} hoverable onClick={() => {}}>
  <h3>Card Title</h3>
  <p>Card content here</p>
</NeuCard>
<NeuCard inset>Inset card style</NeuCard>

Props: children padding? hoverable? inset? onClick? theme?

NeuInput

import { NeuInput } from '@intuix/core';

const [value, setValue] = useState('');

<NeuInput
  label="Email"
  value={value}
  onChange={(e) => setValue(e.target.value)}
  error="Invalid email"
  icon={<span>📧</span>}
  size="md"
/>

Props: label? error? icon? size?: 'sm' | 'md' | 'lg' + all standard <input> props

NeuToggle

import { NeuToggle } from '@intuix/core';

<NeuToggle checked={darkMode} onChange={setDarkMode} label="Dark Mode" />

Props: checked onChange label? disabled? size?: 'sm' | 'md' | 'lg'

NeuTabs

import { NeuTabs } from '@intuix/core';

<NeuTabs
  tabs={[
    { id: 'overview', label: 'Overview' },
    { id: 'analytics', label: 'Analytics', icon: <span>📊</span> },
    { id: 'settings', label: 'Settings' },
  ]}
  active="overview"
  onChange={(id) => setTab(id)}
/>

Props: tabs: { id, label, icon? }[] active onChange

NeuNavbar

import { NeuNavbar } from '@intuix/core';

<NeuNavbar
  logo={<span className="font-bold">Brand</span>}
  links={[
    { label: 'Home', href: '/', active: true },
    { label: 'About', href: '/about' },
    { label: 'Contact', href: '/contact' },
  ]}
  onLinkClick={(href) => router.push(href)}
/>

Props: logo links: { label, href, active? }[] actions? onLinkClick?

NeuStatCard

import { NeuStatCard } from '@intuix/core';

<NeuStatCard
  label="Revenue"
  value="$45.2K"
  icon={<span>💰</span>}
  trend={{ value: 12, label: 'vs last month' }}
  color="#10b981"
/>

Props: label value icon? trend?: { value, label? } color?

NeuTable

import { NeuTable } from '@intuix/core';

<NeuTable
  columns={[
    { key: 'name', label: 'Name', width: 2 },
    { key: 'price', label: 'Price', render: (v) => `$${v}` },
    { key: 'status', label: 'Status' },
  ]}
  data={[
    { name: 'Product A', price: 29, status: 'Active' },
    { name: 'Product B', price: 49, status: 'Draft' },
  ]}
  onRowClick={(row) => console.log(row)}
/>

Props: columns: { key, label, width?, render? }[] data: Record[] onRowClick?

NeuModal

import { NeuModal, NeuButton } from '@intuix/core';

<NeuModal open={isOpen} onClose={() => setOpen(false)} title="Confirm" width={480}>
  <p>Are you sure?</p>
  <footer>
    <NeuButton variant="ghost" onClick={() => setOpen(false)}>Cancel</NeuButton>
    <NeuButton onClick={handleConfirm}>Confirm</NeuButton>
  </footer>
</NeuModal>

Props: open onClose title? children footer? width?

NeuAlert

import { NeuAlert } from '@intuix/core';

<NeuAlert type="success" title="Saved!" dismissible>
  Your changes have been saved.
</NeuAlert>
<NeuAlert type="error">Something went wrong.</NeuAlert>

Props: type?: 'success' | 'error' | 'warning' | 'info' title? children dismissible? icon?

NeuPricingCard

import { NeuPricingCard } from '@intuix/core';

<NeuPricingCard
  name="Pro"
  price={29}
  period="/month"
  features={['Unlimited projects', 'Priority support', 'Custom themes']}
  featured
  cta="Get Started"
  onSelect={() => subscribe('pro')}
/>

Props: name price period? features: string[] featured? cta? onSelect?

More Neumorphic Components

NeuSlider NeuCheckbox NeuRadio NeuAvatar NeuBadge NeuSidebar NeuDropdown NeuTooltip NeuAccordion NeuBreadcrumb NeuProgress NeuCircularProgress NeuToast NeuSkeleton NeuTextarea NeuSelect NeuSwitch NeuRating NeuSearchBar NeuCalendar NeuTimePicker NeuFileUpload NeuColorPicker NeuStepper NeuClock NeuKnob NeuMusicPlayer NeuWeatherCard NeuNotificationBell NeuDivider NeuTag NeuSpinner NeuIconButton NeuTimeline NeuEmptyState NeuCounter NeuProfileCard NeuSwipeCard NeuPagination

CID Patterns (20+ components)

Contextual Inference Design — components that predict user intent.

PredictiveFilter

import { PredictiveFilter } from '@intuix/core';

<PredictiveFilter
  filters={[
    { id: 'f1', label: 'Electronics', value: 'electronics', count: 120 },
    { id: 'f2', label: 'Books', value: 'books', count: 85 },
  ]}
  onFilterChange={(selected) => setFilters(selected)}
  showPrecedent
/>

SmartSearch

import { SmartSearch } from '@intuix/core';

<SmartSearch
  suggestions={[
    { id: '1', text: 'laptop', category: 'devices' },
    { id: '2', text: 'laptop stand', category: 'accessories' },
  ]}
  onSearch={(query) => search(query)}
  onSuggestionSelect={(s) => navigate(s)}
  placeholder="Search..."
/>

ContextualConfirm

import { ContextualConfirm } from '@intuix/core';

<ContextualConfirm
  title="Delete Item?"
  message="This action cannot be undone."
  options={[
    { id: '1', label: 'Delete', action: () => deleteItem(), riskLevel: 'high' },
    { id: '2', label: 'Cancel', action: () => close(), riskLevel: 'low' },
  ]}
/>

More CID Components

ContextualSort FilterMemory QueryBuilder AdaptiveForm ContextualAutofill ConditionalInput SmartDefaults ConfirmationPreview PredictiveNav ContextualBreadcrumbs SmartSidebar IntentMenu PathSuggestion PredictiveAction SmartUndo ActionHistory RiskIndicator DecisionGraph CognitionMeter GhostPreview AttentionHeatmap FeedbackLoop ContextRadar AdaptiveGrid SentimentWave IntentTimeline CorrectionRipple

3D Scenes (50+ components)

Requires: npm install three @react-three/fiber @react-three/drei

StarField

import { StarField } from '@intuix/core';

<StarField
  width="100%"
  height={400}
  count={5000}
  color="#ffffff"
  speed={0.3}
  bgColor="#000011"
/>

CarConfigurator

import { CarConfigurator } from '@intuix/core';

<CarConfigurator
  width="100%"
  height={400}
  bodyColor="#ef4444"
  wheelColor="#222222"
  glassColor="#88ccff"
  showLights
/>

DNAHelix

import { DNAHelix } from '@intuix/core';

<DNAHelix
  width="100%"
  height={400}
  pairs={20}
  speed={0.5}
  bgColor="#0a0a1a"
/>

All 3D Components

Space: StarField PlanetViewer GalaxySpiral BlackHole SolarSystem WarpTunnel NebulaClouds AsteroidBelt SpaceStation CosmicDust

Business: DataTower ProfitGlobe BoardroomTable OrgChart3D MetricCubes RevenueFlow MarketShare3D PipelineRings SalesFunnel3D DealRadar GrowthHelix NetworkGraph3D StockTerrain

E-commerce: ProductSpinner AddToCartBurst FlashSaleBadge TryOnMirror CheckoutFlow ProductExploder ShelfDisplay CouponWheel DeliveryTracker PackageUnbox InventoryGrid PriceOrbit ShoppingCart3D WishlistGalaxy

Education: DNAHelix MoleculeViewer BrainMap ChalkBoard3D PeriodicTable3D MathSurface AtomModel GlobeEarth Telescope3D LabFlask BookStack3D KnowledgeTree LessonPath QuizSphere TimelineRuins

Automotive: CarConfigurator SpeedGauge3D EngineExploder TireSpinner DashboardHUD WindTunnel SuspensionDemo GearMesh RacingLine FuelCell

Liquid Design System

A reactive design system where UI adapts like water — 7 principles: Flow, Absorption, Erosion, Pressure, Temperature, Surface Tension, Memory.

import { LiquidProvider, LiquidSurface, LiquidText, useLiquid } from '@intuix/core';

function App() {
  return (
    <LiquidProvider tick={800}>
      <Dashboard />
    </LiquidProvider>
  );
}

function Dashboard() {
  const { tokens } = useLiquid();

  return (
    <div>
      <LiquidSurface id="revenue" importance={0.9}>
        <LiquidText as="label">Revenue</LiquidText>
        <LiquidText as="h2" mono>$45.2K</LiquidText>
        <LiquidText as="caption" importance={0.3}>+12.3% growth</LiquidText>
      </LiquidSurface>

      {/* Read live tokens */}
      <p>Flow speed: {tokens.flow.speed}</p>
      <p>Temperature: {tokens.temperature.value}</p>
      <p>Mood: {tokens.absorption.mood}</p>
    </div>
  );
}

Theming

All components support theme customization:

// Neumorphic theme
<NeuButton theme={{ accent: '#ec4899' }}>Pink Button</NeuButton>

// Living UI theme
<MorphingBlob theme={{ primaryColor: '#10b981' }} label="Go" />

// Global theme via CSS variables
:root {
  --ix-accent: #6366f1;
  --ix-bg: #0a0a0f;
  --ix-text: #e2e8f0;
}

Requirements

| Dependency | Version | Required | |-----------|---------|----------| | react | ≥18.0.0 | ✅ Yes | | react-dom | ≥18.0.0 | ✅ Yes | | framer-motion | ≥10.0.0 | ✅ Yes | | three | ≥0.160.0 | Optional (3D only) | | @react-three/fiber | ≥8.0.0 | Optional (3D only) | | @react-three/drei | ≥9.0.0 | Optional (3D only) | | d3 | ≥7.0.0 | Optional (data viz) |

License

MIT © HoshMe