Discover the best threejs websites created by professional designers. Get inspired and start planning your perfect threejs web design today!

CJ Hersh

Motion Hover Effects with Image Distortions using Three.js!

The project is based on the beautiful work of creative developers Niccolò Miranda and Clément Roche. Their respective contact details can be found within the project - I encourage you to contact them for any high-quality freelance work. 

Original Repo: https://github.com/clementroche/motion-hover-effects

* All images are subject to Copyright © 2019 ∆ Studio–JQ ∆ (https://dribbble.com/STUDIOJQ)

Motion Hover Effect

Mike Delsing

With the new Ghostbusters movie coming, I wanted to build a proper movie site for such an amazing franchise. Celebrating the new and showcasing the originals.

I've also made the project cloneable. I'm new to development and have pulled snippets from multiple different projects. I still have a lot to learn but if this project is helpful to you, that's awesome!!

𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 𝗮𝗻𝗱 𝗔𝗰𝗰𝗼𝗹𝗮𝗱𝗲𝘀:
• Mocktober 2020 winner
• CSS Design Awards
  → Special Kudos
  → Best UI Design
  → Best UX Design
  → Best Innovation
• CSS Winner: Site of the Day
• One Page Love
• Muzli 

All visuals belong to their respective owners.

———

⇨ dribbble.com/m_delsing
⇨ instagram.com/mike.d.design
⇨ twitter.com/mdelsing06

Unofficial Ghostbusters Afterlife Website

Niccolò Miranda

Amsterdam-based independent Designer & Developer with focus on Art Direction, Motion Design and Creative Development.

Miranda – Paper Portfolio

Hover interaction using Three.js. Simple to integrate and customize with any Webflow project.

Credit: Robin Delaporte (@robindelaporte) with source code available here:  https://github.com/robin-dela/hover-effect/

*Updated: 11/2019

WebGL Hover Effect

Diego Toda de Oliveira

I finally decided to get my hands dirty and learn ThreeJS + React Three Fiber to give life to my ideas using interactive 3D. This project is the end result of my tests and study.

Highly inspired by the Work Louder(c) Creator Micro pad (https://worklouder.cc/creator-micro/), I created a fictional collab between your favorite website builder and this amazing product for a limited edition with custom shortcuts to improve your workflow.

My process:
- 3D model, materials, lights and animation done in Blender
- Used CodeSandbox Cloud to put everything together in R3F (plus some custom scripts used on the Webflow page via data attritbutes)
- Loaded the generated JS bundle in Webflow using custom code

- YOUTUBE TUTORIAL: https://youtu.be/XOIU3mdR9Sc
- Link to the CodeSandbox template: https://codesandbox.io/p/sandbox/flowboard-r3f-b95nx9

Flowboard - Webflow + ThreeJS template

Maria Karavá

Feel free to play around with the settings

Spiral Galaxy with GUI

Redis Agency

In just a year with Webflow, we have launched dozens of projects, won international awards and expanded the team to 6 creative developers. It is about time that we open a separate department for creative development. We are celebrating this by launching the Webflow department website.

This landing page is dedicated to our love for Webflow, our clients and their projects, and our team. It also showcases the new corporate identity of Redis Agency. Noteworthy that smooth scroll and while scrolling in view animations are implemented without code.

Click the link to see it for yourself. Let it Webflow!

Redis Agency Webflow

Dominik Fojcik

Javascript Music Player with Three.js

My Social Media:
https://www.linkedin.com/in/fojcikdominik
https://www.instagram.com/_fojciko

Portfolio: https://fojcikdominik.com


Three.js: https://threejs.org

Resources i used for this project:
https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player
https://github.com/santosharron/audio-visualizer-three-js

MUSIC PLAYER with THREE.JS

JP Dionisio

Trying out how to work out 3d files into Webflow.

Also, I did an animated 3d icon to indicate interactivity. 
Had fun doing this bit. haha.

⚠️ YesCode: Code-heavy project! ⚠️

Codepen from Arden
https://codepen.io/aderaaij/pen/BapYONL

You can use this as a starter template for glb/gltf files.

Feel free to clone and enjoy!

Portal Journey - Three.js

Matthew Bozanich

Implementation of this awesome Star system.

Original doc can be found at: https://codepen.io/seanseansean/pen/vEjOvy

three-js-stars

Eli Shmerler

Enjoy yourself having text explode into particles...
Edit to show your personal text.

Brilliant for eye catching landing pages.
Feel free to clone and use in your upcoming projects

--> Follow my profile for cool projects coming soon

Credits and source for custom code: https://codepen.io/sanprieto/pen/XWNjBdb

Text Particles with ThreeJS

Jakob Wrs

OPEN IN BROWSER

Source:
https://github.com/ma77os/InteractiveLandscape

Interactive Three.js Road

three.js and vanta.js  :)

You can edit:
  skyColor: 0x5eb7d9,
  cloudColor: 0xb1c2dc,
  cloudShadowColor: 0x1b3a57,
  sunColor: 0xff9c21,
  sunGlareColor: 0xfa6331,
  sunlightColor: 0xfa9531

https://github.com/tengbao/vanta/tree/master/dist

Interactive sky

Threejs + Vanta.js

https://github.com/tengbao/vanta/tree/master/dist

Interactive Halo Background

Dhruv Sachdev

Three.JS is used to generate an interactive twisting sphere. You can click and drag anywhere to rotate it.

Playing with settings, especially "phase", will produce interesting (colourful) results!

Inspired by https://github.com/codrops/WebGLBlobs

Interactive 3D Sphere

Three.js and vanta.js :D

https://github.com/tengbao/vanta/tree/master/dist

Random Strokes Background

Federico

MIGHT HAVE DELETED THE SANDBOX WITH THE CODE :), project is dead until I recover it (probably never)

WebGl (THREE.js) based circular drag+scroll slider with nice (potential) transition as seen on awwwards. All data pulled from our beloved CMS.
Clone away!

* Will love a preloader, and an image does not load just needs to be switched up but no time fo that!
* Mobile only for now, and wheel event is not really cross browser!


👀
@fpalla

Lions Slider WebGl ⟋ webgl

Hey I found this cool Distortion Slider and rebuilt it in Webflow 😊

1) Clickable Arrows
2) Mousemove Interaction
3) Drag to Left or Right to change the Image


Setup:
1) Upload all your Images
2) Change the Links in the custom Code Section (before </body>)
3) Replace the Head- & Subline in the Section below
Thats it!

You also can change the Font in the „googleFonts“ settings 
(before </body>)


Source:
https://github.com/hmongouachon/rgbKineticSlider

Discover threejs websites built by the Webflow community

Discover threejs websites built by the Webflow community