Linear Vaporwave Three.js scene

Overview

Linear Vaporwave Three.js scene

This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page.

Demo

Head over to https://linear-vaporwave-react-three-fiber.vercel.app/ to see the project live.

Learn how it's built

I dedicated a blog post on how I implemented this scene 👉 Building a Vaporwave scene with Three.js.

Getting started

First, install the dependencies:

npm i
# or
yarn

Then, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You might also like...
vfx - a visual effects library for react-three-fiber
vfx - a visual effects library for react-three-fiber

vfx is a visual effects library for react-three-fiber. It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.

🤳 VR/AR with react-three-fiber
🤳 VR/AR with react-three-fiber

@react-three/xr React components and hooks for creating VR/AR applications with @react-three/fiber npm install @react-three/xr Examples These demos ar

VFX Composer (formerly known as three-vfx, or 3VFX) is a visual effects library for Three.js and react-three-fiber
VFX Composer (formerly known as three-vfx, or 3VFX) is a visual effects library for Three.js and react-three-fiber

VFX Composer (formerly known as three-vfx, or 3VFX) is a visual effects library for Three.js and react-three-fiber. It aims to be highly performant (with effects almost entirely simulated on the GPU) and easy to extend.

React bindings to create and control a 3D scene using three.js

react-three-legacy Create/control a three.js canvas using React. To use React for drawing 2D using WebGL, try react-pixi. This react-three is deprecat

React bindings to create and control a 3D scene using three.js

react-three-legacy Create/control a three.js canvas using React. To use React for drawing 2D using WebGL, try react-pixi. This react-three is deprecat

Bruno Simon's first journey scene in React Three Fiber and Storybook
Bruno Simon's first journey scene in React Three Fiber and Storybook

Bruno Simon's first journey scene in React Three Fiber and Storybook Cody Bennett transcribed Bruno Simon's first journey scene into React. @0xca0a ra

👀 ✏️ Edit your react-three-fiber scene with a visual editor without giving up control over your code.

React Three Editable React Three Editable is a library for React and react-three-fiber that lets you edit your scene in a visual editor while requirin

r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber
r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber

r3f-spline r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber. 🌈 Spline is a friendly 3d collaborative design tool

Provides a native React view that transitions between multiple colors in a linear direction

react-native-background-gradient Provides a native React view that transitions between multiple colors in a linear direction Install yarn add react-na

A clone of Linear app made with React & Tailwind CSS
A clone of Linear app made with React & Tailwind CSS

A Linear App clone with React and Tailwind CSS

A linear progressbar component

react-progressbar-line A linear progressbar component. Demo Install npm install --save react-progressbar-line Usage import React, { Component } from '

PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.
Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

A react-three-fiber component for rendering high quality 3d landscapes. If you prefer to use vanilla three.js you can also just use the custom material on its own.
A react-three-fiber component for rendering high quality 3d landscapes. If you prefer to use vanilla three.js you can also just use the custom material on its own.

A react-three-fiber component for rendering high quality 3d landscapes. If you prefer to use vanilla three.js you can also just use the custom material on its own.

Next.js, Typescript, Jsx, Three.js, react-three-fibre, Custom Sanity CMS, Vercel - built blog for friend

Blogging with Sanity and Next.js Read the tutorial Get started # Install the Sanity command line interface ~/ npm i -g @sanity/cli # Initiate your

React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

React-three-ts-bp - [TS] Stable version for React-Three + Spring & Tailwind bp

React-three-lgl - A React(-three-fiber) abstraction for the LGL-Raytracer
React-three-lgl - A React(-three-fiber) abstraction for the LGL-Raytracer

A React(-three-fiber) abstraction for the LGL-Raytracer. It does its best to rem

A Progressive Solution for Query Table Scene

English | 简体中文 @ahooks/useTable A Progressive Solution for Query Table Scene, RFC for more information Features 🔗 Plugins: Some plugins for different

Raycasting engine that renders scene in HTML using React (no canvas) and renders as text in textarea or console 😅
Raycasting engine that renders scene in HTML using React (no canvas) and renders as text in textarea or console 😅

ReactCasting Raycasting algorithm that renders pseudo 3D scene in HTML using React (no canvas) and renders as text in textarea or console Live demo WA

Comments
  • Great Project, License Question

    Great Project, License Question

    Hey @MaximeHeckel I love this project! I actually forked it here https://github.com/ChristianOConnor/linear-vaporwave-react-three-fiber-typescript. I added a custom layout with a daisyui tailwind css theme and components. I'm planning on improving the code of my fork and incorporating it into more projects as well. Could you consider making this project (https://github.com/MaximeHeckel/linear-vaporwave-react-three-fiber) MIT License so I can also make my fork MIT License?

    opened by ChristianOConnor 2
A small 3D game built with react-three-fiber

Avoid the cubes while the speed progressively increases! Can you beat the rainbow level? The game is inspired by an old flash game I used to play in t

Adam Karlsten 200 Jan 1, 2023
An example project integrating React with three.js

React with three.js example See the demo Created in response to this question on Stack Overflow.

Will Bamford 28 Sep 9, 2022
A React component for viewing an STL object from a given URL by utilizing Three.js

React STL Viewer New maintainer needed. A React component for viewing an STL object from a given URL by utilizing Three.js Looking for contributors Se

Generate Impact 133 Dec 19, 2022
Our SDK for the 3D rendering platform React-Three-Fiber.

Zappar for React Three Fiber This library allows you use Zappar's best-in-class AR technology with content built using the 3D rendering platform React

Zappar 36 Dec 28, 2022
Small React three fiber multiplayer template

R3F.Multiplayer React three fiber, socket.io boilerplate multiplayer server and client ?? Getting started Getting started To quickly get started Clone

Or Fleisher 81 Dec 24, 2022
📬 postprocessing for react-three-fiber

react-postprocessing react-postprocessing is a postprocessing wrapper for @react-three/fiber. This is not (yet) meant for complex orchestration of eff

Poimandres 731 Jan 7, 2023
In-browser lightmap/AO baker for react-three-fiber and ThreeJS

react-three-lightmap In-browser lightmap and ambient occlusion (AO map) baker for react-three-fiber and ThreeJS. Live editable sandbox. Local Developm

Poimandres 99 Dec 27, 2022
R3f-homunculus - Ripple Effect and Distortion Effect using React Three Fiber

About このアプリケーションは、React Three Fiberを使用したPost-processingの学習結果として作成したものです。 Post-pr

null 11 Nov 13, 2022
Gamedex built with React.js and Three.js

?? Gamedex Hello world! My internet name is Suboptimal and I am an Indian software engineer. Gamedex is the repo where I keep track of my game dev + c

Suboptimal Engineer 184 Dec 27, 2022
React Three Fiber FPS control for mobile and desktop

React Three Fiber FPS control for mobile and desktop

Antony Budianto 21 Jul 13, 2022