{"id":50602362,"url":"https://github.com/travisbreaks/kimi-agent-mandala","last_synced_at":"2026-06-05T19:33:13.741Z","repository":{"id":349064636,"uuid":"1169547660","full_name":"travisbreaks/kimi-agent-mandala","owner":"travisbreaks","description":"Interactive 3D Sri Yantra mandala with 50K+ particles. Scroll-driven sacred geometry that builds, breathes, and explodes. React Three Fiber + custom GLSL shaders.","archived":false,"fork":false,"pushed_at":"2026-03-01T04:37:22.000Z","size":102,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-04T03:35:48.681Z","etag":null,"topics":["generative-art","glsl","interactive-art","particles","r3f","react","sacred-geometry","shaders","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://travisbreaks.org/research/kimi-agent-mandala/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/travisbreaks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"agents.md","dco":null,"cla":null}},"created_at":"2026-02-28T21:12:08.000Z","updated_at":"2026-03-19T00:42:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/travisbreaks/kimi-agent-mandala","commit_stats":null,"previous_names":["travisbreaks/kimi-agent-mandala"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/travisbreaks/kimi-agent-mandala","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travisbreaks%2Fkimi-agent-mandala","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travisbreaks%2Fkimi-agent-mandala/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travisbreaks%2Fkimi-agent-mandala/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travisbreaks%2Fkimi-agent-mandala/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/travisbreaks","download_url":"https://codeload.github.com/travisbreaks/kimi-agent-mandala/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/travisbreaks%2Fkimi-agent-mandala/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33957498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["generative-art","glsl","interactive-art","particles","r3f","react","sacred-geometry","shaders","threejs","webgl"],"created_at":"2026-06-05T19:33:13.254Z","updated_at":"2026-06-05T19:33:13.736Z","avatar_url":"https://github.com/travisbreaks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kimi Agent Mandala\n\nAn interactive 3D visualization of a Sri Yantra mandala that responds to scroll, hover, and click interactions. Built with React Three Fiber and custom WebGL shaders.\n\n[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://travisbreaks.org/research/kimi-agent-mandala/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n[![React](https://img.shields.io/badge/React-19-61dafb)](https://react.dev)\n[![Three.js](https://img.shields.io/badge/Three.js-r182-black)](https://threejs.org)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6)](https://typescriptlang.org)\n\n![kimi-agent-mandala](https://assets.travisbreaks.com/github/kimi-agent-mandala.png)\n\n## Features\n\n### Two-Phase Scroll Animation\n\n- **Phase 1 (0-50% scroll)**: Build - Particles fly in from all directions to form the sacred Sri Yantra geometry\n- **Phase 2 (50-100% scroll)**: Explode - The mandala explodes outward with a spiral motion while a fractal tunnel emerges in the background\n\n### Interactive Elements\n\n- **Hover**: Tilt the mandala based on pointer position\n- **Click**: Create a pulse effect that radiates through the particles\n- **Scroll Velocity**: Particle spin speed and visual effects respond to scroll speed\n\n### Accessibility \u0026 Performance\n\n- **Adaptive Quality**: Automatically detects GPU capabilities and adjusts particle count\n  - High-end: 50,000 particles\n  - Medium: 25,000 particles\n  - Low-end/integrated GPUs: 10,000 particles\n- **Reduced Motion**: Respects `prefers-reduced-motion` media query, reducing particle count for accessibility\n- **Error Boundary**: Graceful error handling with fallback UI\n\n## Tech Stack\n\n### Core\n- **React** 19.2 - UI framework\n- **TypeScript** 5.9 - Type safety\n- **Vite** 7.2 - Build tool \u0026 dev server\n\n### 3D Graphics\n- **Three.js** 0.182 - WebGL 3D library\n- **@react-three/fiber** - React renderer for Three.js\n- **@react-three/drei** - Helper components for R3F\n\n### Styling\n- **Tailwind CSS** - Utility-first CSS framework\n- **Custom Shaders** - GLSL vertex \u0026 fragment shaders for procedural effects\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- npm or yarn\n\n### Installation\n\n```bash\n# Clone or download the project\ncd Kimi_Agent_Mandala\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\nOpen [http://localhost:5173](http://localhost:5173) in your browser.\n\n### Build for Production\n\n```bash\nnpm run build\n```\n\nThe optimized build will be in the `dist/` directory.\n\n### Preview Production Build\n\n```bash\nnpm run preview\n```\n\n## Project Structure\n\n```\nsrc/\n├── App.tsx                    # Main application component (~114 lines)\n├── App.css                    # Styles\n├── main.tsx                   # Entry point\n├── index.css                  # Global styles\n│\n├── shaders/                   # WebGL shader code\n│   ├── sandGrain.ts           # Sand particle shaders\n│   └── fractalTunnel.ts       # Fractal tunnel background shaders\n│\n├── utils/                     # Utility functions\n│   ├── geometry.ts            # Sri Yantra geometry generation\n│   └── performanceDetector.ts # GPU performance detection\n│\n├── constants/                 # Configuration constants\n│   ├── colors.ts              # Color palettes\n│   └── config.ts              # App configuration\n│\n├── types/                     # TypeScript type definitions\n│   └── index.ts               # All type exports\n│\n├── hooks/                     # React hooks\n│   ├── useScrollTelemetry.ts  # Scroll tracking \u0026 velocity\n│   ├── useInteraction.ts      # Pointer event handling\n│   ├── useReducedMotion.ts    # Accessibility detection\n│   └── useAdaptiveQuality.ts  # Performance-based quality\n│\n└── components/                # React components\n    ├── ErrorBoundary.tsx      # Error handling\n    ├── LoadingState.tsx       # Loading indicator\n    ├── Scene.tsx              # Main 3D scene\n    ├── SriYantraMandala.tsx   # Mandala particle system\n    ├── FractalTunnel.tsx      # Background tunnel effect\n    ├── HUD.tsx                # Scroll velocity display\n    ├── PhaseIndicator.tsx     # BUILD/EXPLODE indicator\n    └── ProgressBar.tsx        # Scroll progress bar\n```\n\n## How It Works\n\n### Sacred Geometry\n\nThe Sri Yantra is an ancient sacred geometry pattern consisting of nine interlocking triangles arranged in a specific configuration. This implementation generates 50,000 particles (on high-end devices) distributed across:\n\n- **Center Bindu**: The central point\n- **9 Triangle Layers**: Alternating upward and downward pointing triangles\n- **Concentric Rings**: Circular layers radiating outward\n- **16 Lotus Petals**: Outer decorative ring\n- **Outer Square**: Gates in cardinal directions\n- **Protective Circle**: Outermost boundary\n\n### Particle System\n\nEach particle has:\n- Position (x, y, z coordinates)\n- Color (from a 9-color sacred palette)\n- Scale (size variation)\n- Phase (animation timing offset)\n\n### Shader Pipeline\n\n1. **Vertex Shader**: Calculates particle position and size\n   - Simplex noise for organic variation\n   - Phase-based animation (build vs explode)\n   - Scroll-driven transformations\n   - Interactive tilt and pulse effects\n\n2. **Fragment Shader**: Renders particle appearance\n   - Procedural sand grain texture\n   - Multiple noise layers for realism\n   - Velocity-based glow effects\n   - Alpha fading during explosion\n\n### Scroll System\n\nThe scroll telemetry system tracks:\n- **Progress**: 0 to 1 (where 0.5 is the transition point)\n- **Velocity**: Pixels per second (smoothed)\n- **Direction**: Up, Down, or Idle\n- **Speed**: Normalized 0-1 based on max velocity (2400px/s)\n\n## Performance Notes\n\n### Bundle Size\n\nAfter refactoring:\n- **Before**: ~2.7MB (with 62 unused dependencies)\n- **After**: ~500KB (5 essential dependencies)\n- **Reduction**: ~81% smaller\n\n### Optimization Strategies\n\n- Geometry generation is memoized\n- Shader calculations run on GPU\n- Adaptive particle count based on hardware\n- Efficient Three.js buffer attributes\n- Additive blending for particles\n\n### Browser Support\n\n- Modern browsers with WebGL support\n- Chrome, Firefox, Safari, Edge (latest versions)\n- Mobile browsers supported (with reduced particle count)\n\n## Development\n\n### Linting\n\n```bash\nnpm run lint\n```\n\n### Type Checking\n\nTypeScript is configured with strict mode enabled. The project uses:\n- `strict: true`\n- `noUnusedLocals: true`\n- `noUnusedParameters: true`\n\n## Customization\n\n### Particle Count\n\nEdit `src/constants/config.ts`:\n\n```typescript\nexport const PARTICLE_COUNTS = {\n  high: 50000,   // High-end GPUs\n  medium: 25000, // Mid-range\n  low: 10000,    // Integrated/mobile\n}\n```\n\n### Colors\n\nEdit `src/constants/colors.ts`:\n\n```typescript\nexport const MANDALA_COLOR_PALETTE = [\n  new THREE.Color(0x8b0000), // Dark red\n  // ... add your colors\n]\n```\n\n### Scroll Speed\n\nEdit `src/constants/config.ts`:\n\n```typescript\nexport const SCROLL_CONFIG = {\n  maxVelocity: 2400, // pixels per second\n}\n```\n\n## License\n\nMIT\n\n## Credits\n\nBuilt with Claude Code and inspired by sacred geometry traditions.\n\n---\n\nPart of the [travisBREAKS](https://travisbreaks.org) portfolio.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftravisbreaks%2Fkimi-agent-mandala","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftravisbreaks%2Fkimi-agent-mandala","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftravisbreaks%2Fkimi-agent-mandala/lists"}