Skip to content

An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot "Holographic-Interactions".

License

Notifications You must be signed in to change notification settings

eldair/interactive-repulsive-effect

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2018

About

An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot "Holographic-Interactions".

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 42.1%
  • CSS 40.3%
  • HTML 17.6%