open-index/open-npm huggingface dataset:
npm package: @heliguy-xyz/splat-viewer
Description: A standalone 3D Gaussian Splat viewer web component with multi-model support, transform system, fly camera, and scene configuration
Author: Heliguy
Latest version: 1.0.0-rc.41

# @heliguy-xyz/splat-viewer

A standalone 3D Gaussian Splat viewer web component with multi-model support, transform system, fly camera, and scene configuration. Framework-agnostic and works with vanilla JavaScript, React, Vue, Angular, and any other framework.

## Installation

```bash
npm install @heliguy-xyz/splat-viewer
```

## Quick Start

### Vanilla JavaScript / HTML

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module" src="node_modules/@heliguy-xyz/splat-viewer/dist/splat-viewer.esm.js"></script>
</head>
<body>
  <splat-viewer
    src="path/to/model.splat"
    width="800"
    height="600"
    auto-focus
  ></splat-viewer>
</body>
</html>
```

### React

```tsx
import '@heliguy-xyz/splat-viewer';
import { useRef, useEffect } from 'react';

function App() {
  const viewerRef = useRef(null);

  useEffect(() => {
    const viewer = viewerRef.current;
    if (!viewer) return;

    viewer.addEventListener('loaded', (e) => {
      console.log('Model loaded:', e.detail);
    });
  }, []);

  return (
    <splat-viewer
      ref={viewerRef}
      src="/model.splat"
      width="100%"
      height="600px"
      auto-focus
    />
  );
}
```

## Features

- 🎨 **Multi-Model Support** - Load and manage multiple models in one scene
- 🎥 **Dual Camera Modes** - Orbit and fly camera controls
- 🔧 **Transform System** - Position, rotate, and scale models programmatically
- 📦 **Multiple Formats** - Support for PLY, SPLAT, and SOG files
- ⚡ **High Performance** - Optimized rendering with PlayCanvas
- 🎯 **Selection Tools** - Box and sphere selection for splats
- 🎨 **Scene Configuration** - Background, grid, FOV, and more
- 📱 **Responsive** - Works on desktop, tablet, and mobile

## API

See the full [API documentation](https://github.com/Heliguy-com/3d-web-viewer/tree/main/packages/core/docs) for detailed information.

## Development

This package is part of the `@heliguy-xyz/splat-viewer` monorepo.

```bash
# Build
npm run build

# Development server
npm run dev

# Type check
npm run type-check
```

## License

MIT © Heliguy

## Related Packages

- [@heliguy-xyz/splat-viewer-react-ui](https://www.npmjs.com/package/@heliguy-xyz/splat-viewer-react-ui) - Full-featured React UI component
npm package: @helikarlab/design-system
Description: A library of helikarlab UI components.
Author: Helikar Lab
Latest version: 0.1.12

<p align="center">
  <a href="https://cellcollective.org/">
    <img alt="Cellcollective" src="https://avatars.githubusercontent.com/u/33356742?s=200&v=4" width="60" />
  </a>
</p>

<h1 align="center">
  Digital Twin Innovation Hub UI design kit
</h1>

Global components used for development of Cellcollective and Digital Twin Innovation Hub portal

## 🚅 Quick start

1.  **Install the dependencies.**

    Navigate into your new site’s directory and install the necessary dependencies.

    ```shell
    # Navigate to the directory
    cd design-system/

    # Install the dependencies
    yarn
    ```

1.  **Browse stories**

    Run `yarn storybook` to see your component's stories at `http://localhost:6006`

## 🛠️ Current status of components

 | Component | Status | Jira Issue |
  |-----------|--------|--------------|
 | Menu | ✅ | [CC-799](https://cchl.atlassian.net/browse/CC-799) |
 | ToolBar | ✅ | |
 | AppBar | ✅ | |
 | Styled Element | ✅ | |
 | Basic Button | ✅ | |
 | Basic Options | ✅ | |
 | Checkbox | ✅ | |
 | Search | ✅ | |
 | Usermenu | ✅ | |
 | Dashboard wrapper | ✅ | |
 | Dashboard card | ✅ | |
 | Carousel | ✅ | |
 | Table | ✅ | |
 | Table row | ✅ | |
 | Table cell | ✅ | |
 | Table head | ✅ | |
 | Table body | ✅ | |
 | Table Search | ✅ | |
 | Grid | ✅ | |
 | Panel | ✅ | |
 | Panel layout | ✅ | |
 | Scrollable | ✅ | |
 | View | ✅ | |
 | Model graph | ✅ | |
 | Editable | ✅ | |
 | Droppable | ✅ | |
 | Draggable | ✅ | |
 | Simulation control | ✅ | |
 | Simulation graph | ✅ | |
 | File upload | ✅ | |
 | Rich text editor | ✅ | |
 | Options list | ✅ | |
 | Range input | ✅ | |
 | Error Boundary | ✅ | |
 | Sortable list | ✅ | |
 | Slider | ✅ | |
 | Collapsible | ✅ | |
 | Dropdown Text | ✅ | |
 | Transition item | ✅ | |
 | Spinner | ✅ | |
 | Preview | ✅ | |
 | CheckboxN | ✅ | |
 | Slider input | ✅ | |
 | Dynamic slider input | ✅ | |
 | Context menu | ✅ | |
 | Movable List | ✅ | |
 | Notification Icon | ✅ | |
 | Notification component | ✅ | |
# Design Library
- This is a set of UI components for use in Helikar Lab projects.