3D Astronomy
3D Solar System & Planetary Orbits
Hierarchical multi-body 3D planetary physics, orbiting satellites, glowing sun mesh, and 3D camera controls.
Ready-to-Run CairnJS Examples
Explore production examples, reactive patterns, and framework integrations with React, Vue, Svelte, SolidJS, and Web Components.
Parametric 3D
3D Kinetic Helix & Parametric Ring
18 synchronized polyhedra meshes rotating in wave harmonics with orbiting dynamic lights and central glowing core.
3D Studio
3D Interactive Product Studio
360° mouse orbit controls, pedestal floor, dynamic studio lighting presets (Cyberpunk/Gold/Arctic), and wireframe toggle.
3D Perspective
3D Flippable Interactive Cards
CSS 3D perspective transform with smooth flip transitions, backface-visibility, and signal toggles.
Gesture Physics
Touch & Drag Gesture Physics
Interactive draggable cards with dynamic rotation angle, fling-out velocity detection, and spring snap-back.
Particle Physics
N-Body Gravitational Physics
Verlet kinematic particles with elastic wall bounce, cursor attractor gravity well, and click repulsion burst.
Transitions
Fluid View Transitions & Morph
Smooth animated element expansion, staggered entry badges, and 60fps view transitions.
3D WebGL
3D WebGL Scene Graph Engine
Lightweight 3D meshes, directional lighting, orbiting camera, rotating shaded cubes, and sphere geometries.
2D Graphics
2D Canvas & Particle Kinematics
Hardware accelerated Canvas 2D scene graph, 60fps glowing particle halo, and parametric kinematics.
Real-Time
Real-Time Collab & Chat Room
Multi-user reactive message stream with shared state synchronization, dynamic typing, and instant updates.
Data Viz
Real-Time Streaming Charts
Reactive Canvas bar & line charting engine that re-renders dynamically on signal mutations without dependencies.
Developer Tools
DevTools & State Time-Travel
Inspect component tree, monitor signal changes, record state timeline snapshots, and benchmark execution traces.
Reconciler
Keyed List Reconciler (`For`)
Surgical DOM diffing that swaps, reorders, inserts, and removes list items without destroying DOM elements.
Social Media
Interactive Social Feed & Posts
Rich image cards, 60fps spring bounce like buttons, expandable comments, bookmarking, and tag filtering.
E-Commerce
Reactive Store & Cart Drawer
Dynamic product catalog, computed discounts/taxes, quantity controls, and slide-over cart drawer.
Fundamentals
Reactive Counter
Fine-grained signals, computed state multiplier, and direct DOM update bindings with zero virtual diffing.
Collections
Filterable Todo Application
Dynamic reactive list arrays, filtering (All, Active, Completed), item toggling, and local deletions.
Showcase
Kitchen Sink Master Playground
Comprehensive showcase featuring signals, forms, animated accordions, tabs, canvas particles, and overlays.
W3C Standards
Custom Elements & Web Components
Standard custom elements (`
React Bridge
React 18 / 19 Integration
Bi-directional reactive bridge connecting React parent states and Cairn high-frequency signals seamlessly.
Vue Bridge
Vue 3 Template Ref Integration
Mounting Cairn widgets inside Vue 3 composition API template refs with automatic unmount lifecycle handling.
Svelte Bridge
Svelte Island Action (`use:cairn`)
Svelte custom action pattern mounting micro-reactive Cairn widgets with reactive prop updates.
SolidJS Bridge
SolidJS Signals Pipeline
Fine-grained signal interoperability between Cairn and SolidJS without Virtual DOM overhead.