An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot "Holographic-Interactions".
Switch branches/tags
Nothing to show
Clone or download
Latest commit a967395 Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
first-demo update first demo readme Dec 8, 2018
second-demo update second demo readme Dec 8, 2018
LICENSE Initial Commit Dec 6, 2018
README.md Update README.md Dec 10, 2018
package-lock.json update first demo readme Dec 8, 2018

README.md

Interactive Repulsion Effect with Three.js

A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold's Dribbble shot "Holographic-Interactions". By Ion D. Filho.

Interactive repulsion effect

Article on Codrops

Demo

Requirements

  • nodejs 8+

Contents

first-demo/ and second-demo/
  src/
    scripts/...
    styles/...
    index.html
    index.js
    config files...
LICENSE
README.md

Installation

$ cd first-demo or second-demo
$ npm install
$ npm start

Build

$ cd first-demo or second-demo
$ npm run build

output folder

first-demo/ and second-demo/
  public/
    app.##hash##.js
    app.##hash##.css
    index.html

Follow Ion Drimba Filho: Twitter, Codepen, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2018