# html-hyperdrive

> CSS3D renderer for a dynamic, interactive flying space environment.

Latest version **0.0.15** (published 2016-11-24) · WTFPL license · 0 weekly downloads

## Install

```sh
npm install html-hyperdrive
pnpm add html-hyperdrive
yarn add html-hyperdrive
bun add html-hyperdrive
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.15 |
| Published | 2016-11-24 |
| First published | 2016-07-13 |
| Weekly downloads | 0 |
| License | WTFPL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | manny404 |
| Maintainers | artnotfound |

## Links

- npm: https://www.npmjs.com/package/html-hyperdrive
- npm.io page: https://npm.io/package/html-hyperdrive

## Dependencies (1)

- [css3d](https://npm.io/package/css3d.md) 1.0.0

## Recent versions

- 0.0.15 (latest) — 2016-11-24
- 0.0.14 — 2016-09-16
- 0.0.13 — 2016-09-16
- 0.0.12 — 2016-09-12
- 0.0.11 — 2016-07-21
- 0.0.10 — 2016-07-21
- 0.0.9 — 2016-07-18
- 0.0.8 — 2016-07-17
- 0.0.6 — 2016-07-17
- 0.0.5 — 2016-07-17
- 0.0.4 — 2016-07-13
- 0.0.3 — 2016-07-13
- 0.0.2 — 2016-07-13
- 0.0.1 — 2016-07-13

## README

<p align="center">
  <br />
  <img src="https://raw.githubusercontent.com/mannynotfound/html-hyperdrive/master/hyperdrive.gif" />
</p>

# :zap: HTML Hyperdrive :zap:

__Work In Progress__

A utility library for creating spatial, interactive CSS3D experiences.

### Usage

See the `example/index.js` file for reference.

HTML Hyperdrive renders HML (Hyperdrive Markup Language), which is just HTML as a string with some configuration...

eg:

```js
var HTMLHyperDrive = require('html-hyperdrive');
var htmlElms = [
  {
    style: {
      height: '400px',
      width: '300px',
    },
    html: '<h1>Title</h1>'
  },
  {
    style: {
      height: '400px',
      width: '300px',
      boxSizing: 'border-box',
    },
    html: '<h2>Sub Title</h2>'
  },
  {
    style: {
      height: '600px',
      width: '800px',
    },
    html: '<p>Body <img src="lol.jpg" /></p>'
  }
];

var app = new HTMLHyperDrive(document.getElementById('container'), htmlElms);
app.startScene();
```

will render 3 stream elements with the provided styles (write in JS syntax), and markup.

### Configuration

optionally, you can pass a config object as the 3rd parameter as so

```js
var container = document.getElementById( ... );
var htmlElms = { ... };
var config = { ... };
var app = new HTMLHyperDrive(container, htmlElms, config);
```

Key | Description
:------- | :----------
moveSpeed | Speed for "automove". Default is 3
xRange | The range of possible x values (affects how close/far elements are from each other)
zDepth | The z depth of the total cluster of elements.
zoomInCb | Callback fired when an element is clicked and "zoomed" into. Will callback with the obj as first parameter.
zoomOutCb | Callback fired when body is clicked from "zoomed" state and return to all elements.
mountCb | Callback fired when an element is initially rendered into DOM. Will callback with the obj as first parameter.


#### Controls:

* `s` : start/stop auto drift 
* `esc` : zoom out of zoomed in view

---
_Source: https://npm.io/package/html-hyperdrive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._