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

iondrimba/interactive-repulsive-effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

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.

Image Title

Article on Codrops

Demo

Requirements

  • nodejs 14+

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

Credits

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Ion Drimba Filho: Twitter, Codepen, GitHub

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

© Codrops 2018

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •