https://github.com/agconti/tv

less of a slide show, more like a tv.
https://github.com/agconti/tv

carousel gifs shaders threejs webgl

Last synced: about 1 month ago
JSON representation

less of a slide show, more like a tv.

• Host: GitHub
• URL: https://github.com/agconti/tv
• Owner: agconti
• License: mit
• Created: 2017-01-20T16:01:13.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-23T22:06:17.000Z (over 7 years ago)
• Last Synced: 2024-11-10T19:26:25.257Z (3 months ago)
• Topics: carousel, gifs, shaders, threejs, webgl
• Language: JavaScript
• Homepage: http://agconti.github.io/tv
• Size: 4.55 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tv

![tv](https://media.giphy.com/media/l4FGIUP7ctUBrk0W4/giphy.gif)

An example of the breath of the effects we can use on gifs using only client side processing power and a responsive masonry layout with just css.

Check out it out [here](https://agconti.github.io/tv/).

## Features

- Live postprocessing of gifs for a _artsy_ busted tv effect using webgl [shaders](https://github.com/agconti/tv/blob/master/src/tv/TVShader.js).

- Fully [responsive gif grid](https://github.com/agconti/tv/blob/master/src/grid/ml.css) using a [CSS multi-column layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts).

- Support lower load times on desktop using webps and dynamically changes to gifs for mobile support using [`srcSet`](https://github.com/agconti/tv/blob/0a046cf845ef6e601f7668e3fd9e4157907fa245/src/grid/GridItem.js#L26-L29) over browser sniffing.

## Setup

Clone the repository:

```

git clone [email protected]:agconti/tv.git

```

Install the projects dependencies:

```

npm i

```

Start the dev server

```

npm start

```