tapspace

tapspace

We believe zoomable touch user interfaces to be the best way for humans to explore and manipulate two-dimensional content. Therefore we built Tapspace, a JavaScript library dedicated for building such dynamic front-ends. It implements a scene graph that provides an infinite, scalable, and rotatable space for you to represent HTML content and for your users to play with. Tapspace uses pure CSS3 and DOM instead of Canvas or WebGL and therefore is able to handle any HTML content you throw at it, including iframes and SVG, and also Canvas- and WebGL-rendered elements. And of course, we provide a clean, documented API for you to build your best.

Tutorial is a good place to start for newcomers.

API Reference comes handy when coding.

Developer’s Cheat Sheet for hard-core folks who want to take Tapspace to a next level.

GitHub for the source code and bug reports.

NPM for the stable release and popularity statistics.

Install

With npm or yarn:

$ npm install tapspace
$ yarn add tapspace

Features

Examples

Whether you dream about a Google Maps clone, a Prezi flavored home page, or a real-time strategy game, these example apps give you a major head start in implementing your zoomable user interface and touch integration. To get the most out of the example apps, use a touch device. See the source code for tutoring comments!

Tiles

Pinch-zoomable grid of 400 tile images
[Try app] [See source]

HTML

An arrangement of custom HTML content, including a YouTube video
[Try app] [See source]

Infinity

Zoom into infinity
[Try app] [See source]

Book

Infinite amount of content within a finite space.
[Try app] [See source]

Go

Play Go!
[Try app] [See source]

Minimal

Your first minimal Tapspace app
[Try app] [See source]

Canvas

Animated zoomable HTML5 Canvas
[Try app] [See source]

Gears

Gears with rotation handles
[Try app] [See source]

Grid

A snapping grid that snaps translations and rotations
[Try app] [See source]

Pixels

Lenna, a `SpaceGroup` of `SpacePixels`
[Try app] [See source]

Multiview

Multiple views to single `Space`
[Try app] [See source]

Modes

Modes of direct manipulation allowed by `Touchable`
[Try app] [See source]

HammerJS

What if touch interaction is implemented with HammerJS instead of `Touchable`?
[Try app] [See source]

Thanks to

Members of the Tapspace v0 code inspection group on 2013-Nov-18