├── .eslintrc.json ├── .gitignore ├── README.md ├── app ├── data.ts ├── favicon.ico ├── globals.css ├── lab │ ├── 3d-car-slider │ │ └── page.tsx │ ├── 3d-paper-menu │ │ └── page.tsx │ ├── cloud69-scene │ │ └── page.tsx │ ├── color-boost │ │ └── page.tsx │ ├── curved-image-gallery │ │ └── page.tsx │ ├── distortion-effect │ │ └── page.tsx │ ├── earth-day-and-night │ │ └── page.tsx │ ├── earth │ │ └── page.tsx │ ├── encrypt-slider │ │ └── page.tsx │ ├── exploding-particles │ │ └── page.tsx │ ├── fireworks │ │ └── page.tsx │ ├── forest-road │ │ └── page.tsx │ ├── galaxy │ │ └── page.tsx │ ├── glass-effect │ │ └── page.tsx │ ├── gpgpu-particles │ │ └── page.tsx │ ├── halftone-shading │ │ └── page.tsx │ ├── image-transition │ │ └── page.tsx │ ├── infinite-gallery │ │ └── page.tsx │ ├── interactive-objects │ │ └── page.tsx │ ├── interactive-particles │ │ └── page.tsx │ ├── isabella-explorer │ │ └── page.tsx │ ├── kitchen-smoke │ │ └── page.tsx │ ├── lab.css │ ├── layout.tsx │ ├── light-shading │ │ └── page.tsx │ ├── mesmerized-3d │ │ └── page.tsx │ ├── page-transition │ │ ├── [slug] │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ └── page.tsx │ ├── paint-reveal │ │ └── page.tsx │ ├── particle-constellation │ │ └── page.tsx │ ├── particles-morphing │ │ └── page.tsx │ ├── pixalated │ │ └── page.tsx │ ├── pocketmonster-portals │ │ └── page.tsx │ ├── portal │ │ └── page.tsx │ ├── procedural-terrain │ │ ├── layout.tsx │ │ ├── page.css │ │ └── page.tsx │ ├── product-showcase │ │ └── page.tsx │ ├── raging-sea │ │ └── page.tsx │ ├── ruins-scene │ │ └── page.tsx │ ├── scene-transition │ │ └── page.tsx │ ├── scifi-coridor │ │ └── page.tsx │ ├── scroll-gallery │ │ ├── page.css │ │ └── page.tsx │ ├── scroll-gallery2 │ │ └── page.tsx │ ├── scroll-plane │ │ ├── layout.tsx │ │ ├── page.css │ │ └── page.tsx │ ├── scroll-text-gallery │ │ └── page.tsx │ ├── sdf-shapes │ │ └── page.tsx │ ├── shaders-selector │ │ └── page.tsx │ ├── shaman │ │ └── page.tsx │ ├── shoe-configurator │ │ └── page.tsx │ ├── skateboard-configurator │ │ └── page.tsx │ ├── sliced-model │ │ └── page.tsx │ ├── star-wars-hologram │ │ └── page.tsx │ ├── truck-shader │ │ └── page.tsx │ ├── vending-machine │ │ └── page.tsx │ ├── warp-slider │ │ ├── layout.tsx │ │ └── page.tsx │ ├── water-effect │ │ └── page.tsx │ ├── wobbly-sphere │ │ └── page.tsx │ └── wormhole │ │ └── page.tsx ├── layout.tsx └── page.tsx ├── components ├── CanvasWrapper.tsx ├── Credits.tsx ├── FeatureCard.tsx ├── Icons │ ├── Click.tsx │ ├── Mouse.tsx │ └── index.ts ├── MouseIndicator.tsx ├── PixelSizeCamera.tsx └── materials │ ├── Hologram │ ├── HologramMaterial.tsx │ ├── index.ts │ └── shaders │ │ ├── fragmentShader.glsl │ │ └── vertexShader.glsl │ └── SmokeMaterial │ ├── SmokeMaterial.tsx │ ├── index.ts │ └── shaders │ ├── fragmentShader.glsl │ └── vertexShader.glsl ├── features ├── 3dCarSlider │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Overlay.tsx │ │ ├── Scene.tsx │ │ ├── SlideButton.tsx │ │ └── WorldCamera.tsx │ ├── data │ │ └── index.ts │ └── store │ │ └── useStore.ts ├── 3dPaperMenu │ └── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Model.tsx ├── Cloud69Scene │ └── components │ │ ├── Cloud69.tsx │ │ ├── Effects.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Scene.tsx ├── ColorBoost │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Model.tsx │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── CurvedImageGallery │ ├── components │ │ ├── Experience.tsx │ │ ├── ImageModel.tsx │ │ ├── Layout.tsx │ │ ├── Links.tsx │ │ └── layout.css │ ├── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl │ └── store │ │ └── useStore.ts ├── DistortionEffect │ ├── components │ │ ├── DesertModel.tsx │ │ ├── Experience.tsx │ │ └── Layout.tsx │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── Earth │ ├── components │ │ ├── Atmosphere.tsx │ │ ├── CameraSetup.tsx │ │ ├── EarthModel.tsx │ │ ├── EarthStage.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Sun.tsx │ └── shaders │ │ ├── atmosphere │ │ ├── fragment.glsl │ │ └── vertex.glsl │ │ └── earth │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── EarthDayAndNight │ ├── components │ │ ├── Experience.tsx │ │ ├── Lights.tsx │ │ ├── MouseTrack.tsx │ │ ├── Overlay.tsx │ │ ├── PlaneModel.tsx │ │ ├── Planes.tsx │ │ ├── PlanetScene.tsx │ │ ├── RingsScene.tsx │ │ └── Scene.tsx │ ├── constants │ │ └── index.ts │ └── stores │ │ └── useStore.ts ├── EncryptSlider │ ├── components │ │ ├── BackgroundParticles.tsx │ │ ├── DividerLayer.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── ParticlesGroup.tsx │ │ ├── Slider.tsx │ │ ├── SliderGroup.tsx │ │ ├── SliderImages.tsx │ │ ├── SliderText.tsx │ │ └── TextCardItem.tsx │ ├── shaders │ │ ├── backgroundFrag.glsl │ │ ├── backgroundVertex.glsl │ │ ├── blendFrag.glsl │ │ ├── blendVertex.glsl │ │ ├── dividerFrag.glsl │ │ ├── dividerLineFrag.glsl │ │ ├── dividerLineVertex.glsl │ │ └── dividerVertex.glsl │ └── store │ │ └── useStore.ts ├── ExpodingParticles │ ├── components │ │ ├── Expirience.tsx │ │ └── Model.tsx │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── Fireworks │ ├── components │ │ ├── Experience.tsx │ │ ├── Firework.tsx │ │ ├── Layout.tsx │ │ ├── Lights.tsx │ │ ├── Park.tsx │ │ └── StreetLight.tsx │ ├── hooks │ │ └── useFireworks.ts │ ├── shaders │ │ ├── fragmentShader.glsl │ │ └── vertexShader.glsl │ └── stores │ │ └── useStore.ts ├── ForestRoad │ └── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── LowpolycarModel.tsx ├── GPGPUParticles │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Model.tsx │ ├── hooks │ │ └── useGPGPU.ts │ └── shaders │ │ ├── gpgpu │ │ └── particles.glsl │ │ └── particles │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── Galaxy │ ├── components │ │ ├── Experience.tsx │ │ ├── Model.tsx │ │ └── ModelStatic.tsx │ ├── hooks │ │ ├── useModelControls.ts │ │ └── useModelControlsStatic.ts │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── GlassEffect │ └── components │ │ ├── Experience.tsx │ │ ├── Images.tsx │ │ ├── Layout.tsx │ │ ├── Lens.tsx │ │ └── Typography.tsx ├── HalftoneShading │ ├── components │ │ ├── Experience.tsx │ │ ├── GwenModel.tsx │ │ ├── Layout.tsx │ │ ├── Stage.tsx │ │ └── TransitionEffect.tsx │ ├── hooks │ │ └── useHalftoneMateria.ts │ └── shaders │ │ ├── fragment.glsl │ │ ├── transitionFragment.glsl │ │ ├── transitionVertex.glsl │ │ └── vertex.glsl ├── ImageTransition │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Model.tsx │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── InfiniteGalery │ ├── components │ │ ├── BackroundBlocks.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Model.tsx │ │ └── Overlay.tsx │ ├── data │ │ └── index.ts │ ├── shaders │ │ ├── fragment.glsl │ │ └── vertext.glsl │ └── stores │ │ └── useStore.ts ├── InteractiveObjects │ └── components │ │ ├── EffectsContainer.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Objects.tsx │ │ └── PlayerObject.tsx ├── InteractiveParticles │ ├── components │ │ ├── Experience.tsx │ │ ├── Model.tsx │ │ └── Trail.tsx │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── IsabellaExplorer │ ├── components │ │ ├── CameraControl.tsx │ │ ├── Experience.tsx │ │ ├── FireParticles.tsx │ │ ├── Lantern.tsx │ │ ├── Layout.tsx │ │ ├── Lights.tsx │ │ ├── Model.tsx │ │ ├── Monster.tsx │ │ └── Title.tsx │ └── shaders │ │ └── fire │ │ ├── fragmentShader.glsl │ │ └── vertexShader.glsl ├── KitchenSmoke │ └── components │ │ ├── CameraSetup.tsx │ │ ├── Eggs.tsx │ │ ├── Experience.tsx │ │ ├── KitchenModel.tsx │ │ ├── Layout.tsx │ │ ├── Lights.tsx │ │ ├── Mug.tsx │ │ ├── Smoke.tsx │ │ ├── Teapot.tsx │ │ ├── Toaser.tsx │ │ └── VentLight.tsx ├── LightShading │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Models.tsx │ └── shaders │ │ ├── fragmentShader.glsl │ │ └── vertexShader.glsl ├── Mesmerized3d │ ├── components │ │ ├── CampingModel.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── OverlayItem.tsx │ │ └── Ui.tsx │ ├── store │ │ └── useStore.ts │ └── types │ │ └── index.ts ├── PageTransition │ ├── components │ │ ├── BackLink.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Model.tsx │ │ └── layout.module.css │ ├── data │ │ └── index.ts │ ├── hooks │ │ └── usePlaneDimension.ts │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── PaintReveal │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── RevealMaterial.tsx │ │ ├── RevealTexture.tsx │ │ ├── Scene.tsx │ │ └── SobelMaterial.tsx │ ├── hooks │ │ └── usePersistentTrailTexture.tsx │ └── shaders │ │ ├── revealFragment.glsl │ │ ├── revealVertex.glsl │ │ ├── sobelFragment.glsl │ │ └── sobelVertex.glsl ├── ParticleConstellation │ ├── components │ │ ├── ConnectionLines.tsx │ │ ├── Constellation.tsx │ │ ├── Experience.tsx │ │ └── Layout.tsx │ └── shaders │ │ ├── constellationFragment.glsl │ │ └── constellationVertex.glsl ├── ParticlesMorphing │ ├── components │ │ ├── Experience.tsx │ │ ├── GroupControl.tsx │ │ ├── Layout.tsx │ │ └── Models.tsx │ └── shaders │ │ ├── fragmentShader.glsl │ │ └── vertexShader.glsl ├── Pixalated │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Slide.tsx │ │ └── Slider.tsx │ ├── data │ │ └── index.ts │ ├── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl │ └── store │ │ └── useStore.ts ├── PocketmonsterPortals │ ├── components │ │ ├── Cursor.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Portal.tsx │ │ └── models │ │ │ ├── CactoroModel.tsx │ │ │ ├── DragonModel.tsx │ │ │ └── FishModel.tsx │ └── store │ │ └── useStore.ts ├── Portal │ ├── components │ │ └── Experience.tsx │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── ProceduralTerrain │ ├── components │ │ ├── Container.tsx │ │ ├── Experience.tsx │ │ ├── Interface.tsx │ │ ├── Layout.tsx │ │ └── Model.tsx │ └── shaders │ │ └── terrain │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── ProductShowcase │ ├── components │ │ ├── Credits.tsx │ │ ├── FloatMenu.tsx │ │ ├── Icons │ │ │ ├── ArrowIcon.tsx │ │ │ ├── PenIcon.tsx │ │ │ └── WorkerIcon.tsx │ │ ├── InfoSlider │ │ │ ├── Column.tsx │ │ │ ├── Row.tsx │ │ │ ├── SimpleCenter.tsx │ │ │ └── Table.tsx │ │ ├── Layout.tsx │ │ ├── Main3DSlider │ │ │ ├── FakeShadow.tsx │ │ │ ├── MainSlider.tsx │ │ │ ├── MainSliderRenderer.tsx │ │ │ ├── RenderScene.tsx │ │ │ ├── Slide1.tsx │ │ │ ├── Slide2.tsx │ │ │ ├── Slide3.tsx │ │ │ ├── SlideBackground.tsx │ │ │ ├── SlideText.tsx │ │ │ ├── SlideTextItem.tsx │ │ │ └── TrackableObject.tsx │ │ ├── Models │ │ │ ├── BouncyTop.tsx │ │ │ ├── CouchCake.tsx │ │ │ ├── CouchCapsule.tsx │ │ │ ├── GardenChair.tsx │ │ │ ├── GardenLigh.tsx │ │ │ ├── GardenThing.tsx │ │ │ ├── Plant.tsx │ │ │ ├── Purifier.tsx │ │ │ └── Worktop.tsx │ │ ├── RulerIcon.tsx │ │ └── SvgIcon.tsx │ ├── hooks │ │ └── useMotionPath.ts │ ├── shaders │ │ ├── blur │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── fakeShadow │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── stores │ │ └── useStore.ts │ └── types │ │ └── index.ts ├── RagingSea │ ├── components │ │ ├── BoatLampLights.tsx │ │ ├── BoatLamps.tsx │ │ ├── BoatModel.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Rain.tsx │ │ └── Sea.tsx │ └── shaders │ │ ├── fragment.glsl │ │ ├── includes │ │ └── perlinClassic3D.glsl │ │ ├── rainFragment.glsl │ │ ├── rainVertex.glsl │ │ └── vertex.glsl ├── RuinsScene │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── RuinScene.tsx │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── SceneTransition │ ├── components │ │ ├── Experience.tsx │ │ └── SceneTransitionMaterial.tsx │ └── shader │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── SciFiCoridor │ └── components │ │ ├── Effects.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Lights.tsx │ │ └── Model.tsx ├── ScrollGallery │ ├── components │ │ ├── Experience.tsx │ │ ├── Item.tsx │ │ ├── Layout.tsx │ │ └── Minimap.tsx │ ├── constants │ │ └── index.ts │ └── store │ │ └── useStore.ts ├── ScrollGallery2 │ └── components │ │ ├── Experience.tsx │ │ ├── Gallery.tsx │ │ ├── GalleryItem.tsx │ │ ├── Layout.tsx │ │ └── TextGallery.tsx ├── ScrollPlane │ ├── components │ │ ├── Airplane.tsx │ │ ├── Background.tsx │ │ ├── Cloud.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Overlay.tsx │ │ ├── Speed.tsx │ │ └── TextSection.tsx │ ├── stores │ │ └── useStore.ts │ └── utils │ │ └── fadeMaterial.ts ├── ScrollTextGallery │ ├── components │ │ ├── Cover.tsx │ │ ├── Experience.tsx │ │ ├── IndexTracker.tsx │ │ ├── Layout.tsx │ │ ├── Ripple.tsx │ │ ├── TextItem.tsx │ │ └── Texts.tsx │ ├── data │ │ └── index.ts │ ├── shaders │ │ ├── rippleFragment.glsl │ │ ├── rippleVertex.glsl │ │ ├── textFragment.glsl │ │ └── textVertex.glsl │ └── store │ │ └── useStore.ts ├── SdfShapes │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Model.tsx │ └── shaders │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── ShadersSelector │ ├── components │ │ ├── Expirience.tsx │ │ ├── Layout.tsx │ │ └── Preview.tsx │ ├── data │ │ └── fragmentOptions.ts │ └── shaders │ │ ├── fragment1.glsl │ │ ├── fragment10.glsl │ │ ├── fragment11.glsl │ │ ├── fragment12.glsl │ │ ├── fragment13.glsl │ │ ├── fragment14.glsl │ │ ├── fragment15.glsl │ │ ├── fragment16.glsl │ │ ├── fragment17.glsl │ │ ├── fragment18.glsl │ │ ├── fragment19.glsl │ │ ├── fragment2.glsl │ │ ├── fragment20.glsl │ │ ├── fragment21.glsl │ │ ├── fragment22.glsl │ │ ├── fragment23.glsl │ │ ├── fragment24.glsl │ │ ├── fragment25.glsl │ │ ├── fragment26.glsl │ │ ├── fragment27.glsl │ │ ├── fragment28.glsl │ │ ├── fragment29.glsl │ │ ├── fragment3.glsl │ │ ├── fragment30.glsl │ │ ├── fragment31.glsl │ │ ├── fragment32.glsl │ │ ├── fragment33.glsl │ │ ├── fragment34.glsl │ │ ├── fragment35.glsl │ │ ├── fragment36.glsl │ │ ├── fragment37.glsl │ │ ├── fragment38.glsl │ │ ├── fragment39.glsl │ │ ├── fragment4.glsl │ │ ├── fragment40.glsl │ │ ├── fragment41.glsl │ │ ├── fragment42.glsl │ │ ├── fragment43.glsl │ │ ├── fragment44.glsl │ │ ├── fragment45.glsl │ │ ├── fragment46.glsl │ │ ├── fragment47.glsl │ │ ├── fragment48.glsl │ │ ├── fragment49.glsl │ │ ├── fragment5.glsl │ │ ├── fragment50.glsl │ │ ├── fragment51.glsl │ │ ├── fragment6.glsl │ │ ├── fragment7.glsl │ │ ├── fragment8.glsl │ │ ├── fragment9.glsl │ │ └── vertex.glsl ├── Shaman │ ├── components │ │ ├── Experience.tsx │ │ ├── Grass.tsx │ │ ├── GrassMaterial.tsx │ │ ├── Layout.tsx │ │ ├── Lights.tsx │ │ ├── ShamanScene.tsx │ │ ├── Terrain.tsx │ │ └── Wisp.tsx │ ├── hooks │ │ └── useFollowPath.ts │ └── shaders │ │ ├── grassFragment.glsl │ │ ├── grassVertex.glsl │ │ ├── wispFragment.glsl │ │ └── wispVertex.glsl ├── ShoeConfigurator │ ├── components │ │ ├── ClickIndicator.tsx │ │ ├── Experience.tsx │ │ ├── Overlay.tsx │ │ └── ShoeModel.tsx │ └── stores │ │ └── useStore.ts ├── SkateboardConfigurator │ ├── animation │ │ ├── configuratorAnimation.ts │ │ └── wheelModelAnimation.ts │ ├── components │ │ ├── Button.tsx │ │ ├── Configurator │ │ │ ├── BoardPart.tsx │ │ │ ├── Configurator.tsx │ │ │ ├── TruckPart.tsx │ │ │ └── WheelPart.tsx │ │ ├── Experience.tsx │ │ ├── FakeShadow.tsx │ │ ├── ImageSliderWithMagnifier.tsx │ │ ├── Layout.tsx │ │ ├── Models │ │ │ ├── BoardModel.tsx │ │ │ ├── TruckModel.tsx │ │ │ └── WheelModel.tsx │ │ ├── Overlay │ │ │ ├── BaseOverlay.tsx │ │ │ ├── BoardOverlay.tsx │ │ │ ├── FinalOverlay.tsx │ │ │ ├── InfoCard.tsx │ │ │ ├── Overlay.tsx │ │ │ ├── TruckOverlay.tsx │ │ │ └── WheelOverlay.tsx │ │ └── Sliders │ │ │ ├── BoardSlider │ │ │ ├── BoardSlide.tsx │ │ │ ├── BoardSlider.tsx │ │ │ └── index.ts │ │ │ ├── TruckSlider │ │ │ ├── TruckSlide.tsx │ │ │ ├── TruckSlider.tsx │ │ │ └── index.ts │ │ │ └── WheelSlider.tsx │ │ │ ├── WheelSlider.tsx │ │ │ └── index.ts │ ├── data │ │ └── index.ts │ ├── hooks │ │ ├── useConfiguratorAnimation.ts │ │ ├── useSlidePositionCalculator.ts │ │ └── useTruckAnimation.ts │ ├── shaders │ │ ├── fragment.glsl │ │ ├── vertex.glsl │ │ └── wheel-transition │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── stores │ │ └── useStore.ts │ ├── types │ │ └── index.ts │ └── utils │ │ └── index.ts ├── SlicedModel │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── Model.tsx │ └── shaders │ │ └── sliced │ │ ├── fragment.glsl │ │ └── vertex.glsl ├── StarWarsHologram │ ├── components │ │ ├── Beam.tsx │ │ ├── DeathStar.tsx │ │ ├── Experience.tsx │ │ ├── ImperialFighter.tsx │ │ ├── Layout.tsx │ │ ├── Model.tsx │ │ ├── StarWarsScene.tsx │ │ └── XWing.tsx │ └── hooks │ │ └── useFollowPath.ts ├── TruckShader │ ├── components │ │ ├── CybertruckModel.tsx │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ └── TruckShaderMaterial.tsx │ └── shaders │ │ ├── diskFragment.glsl │ │ ├── stripesFragment.glsl │ │ └── vertex.glsl ├── VendingMachine │ ├── assets │ │ └── placeholder.json │ ├── components │ │ ├── CabineLight.tsx │ │ ├── CameraSetup.tsx │ │ ├── Chimney.tsx │ │ ├── DamagedBarrel.tsx │ │ ├── Experience.tsx │ │ ├── FireParticles.tsx │ │ ├── Layout.tsx │ │ ├── LeftDisplay.tsx │ │ ├── Lights.tsx │ │ ├── Loader.tsx │ │ ├── RightDisplay.tsx │ │ ├── Smoke.tsx │ │ ├── StreetLight.tsx │ │ ├── TopDisplay.tsx │ │ ├── VendingMachineScene.tsx │ │ ├── VentRibbons.tsx │ │ └── VideoMaterial.tsx │ ├── shaders │ │ ├── fire │ │ │ ├── fragmentShader.glsl │ │ │ └── vertexShader.glsl │ │ ├── leftDisplay │ │ │ ├── fragmentShader.glsl │ │ │ └── vertexShader.glsl │ │ └── topDisplay │ │ │ ├── fragmentShader.glsl │ │ │ └── vertexShader.glsl │ └── store │ │ └── useStore.ts ├── WarpSlider │ ├── components │ │ ├── AnimatedBackground.tsx │ │ ├── Experience.tsx │ │ ├── ImageSlider.tsx │ │ ├── ImageSliderMaterial.tsx │ │ ├── Layout.tsx │ │ └── Slider.tsx │ ├── shaders │ │ ├── fragmentShader.glsl │ │ └── vertexShader.glsl │ └── store │ │ └── useStore.ts ├── WaterEffect │ ├── components │ │ ├── Experience.tsx │ │ ├── ImageTile.tsx │ │ ├── InnerScene.tsx │ │ ├── Layout.tsx │ │ └── WaterTexture.tsx │ └── shaders │ │ ├── fragmentShader.glsl │ │ └── vertexShader.glsl ├── WobblySphere │ ├── components │ │ ├── Experience.tsx │ │ ├── Layout.tsx │ │ ├── Lights.tsx │ │ └── Model.tsx │ └── shaders │ │ └── wobble │ │ ├── fragment.glsl │ │ └── vertex.glsl └── Wormhole │ ├── components │ ├── EffectsContainer.tsx │ ├── Experience.tsx │ ├── Layout.tsx │ ├── Object.tsx │ ├── Objects.tsx │ └── Wormhole.tsx │ └── hooks │ └── useMotionPath.ts ├── hooks └── usePointerMove.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── assets │ ├── 3dCarSlider │ │ └── cars │ │ │ ├── car_scene_1.gltf │ │ │ ├── car_scene_2.gltf │ │ │ └── car_scene_3.gltf │ ├── 3dPaperMenu │ │ └── paper-menu2.glb │ ├── Cloud69Scene │ │ └── cloud69.glb │ ├── ColorBoost │ │ └── japan.jpg │ ├── CurvedImageGallery │ │ ├── Default_A_vibrant_description_of_an_underwater_world_with_bril_2_88e679c9-1c55-4344-8c98-f765821ac660_0.jpg │ │ ├── Default_The_hippo_roars_and_swings_his_massive_fist_towards_th_0_709a5817-a2f0-433d-bc72-e62d0447cbae_0.jpg │ │ ├── Default_high_quality_8K_Ultra_HD_3D_effect_A_digital_illustrat_3_0fb418a6-a38c-4a84-b687-49944f494963_0.jpg │ │ ├── Default_landscapebeautifulrainsunnyfantasyephemeralBlueanimebr_0_e8e7644a-046a-4a72-b9c4-13bf09bef291_0.jpg │ │ ├── Leonardo_Anime_XL_A_beautiful_woman_immersed_in_music_through_1.jpg │ │ ├── Leonardo_Anime_XL_imagine_prompt_Viral_anime_space_wallpaper_i_2.jpg │ │ └── Leonardo_Phoenix_A_quiet_cozy_neighborhood_with_small_houses_a_2.jpg │ ├── DistortionEffect │ │ ├── cooking-maps.jpg │ │ ├── cooking.jpg │ │ ├── desert-maps.jpg │ │ ├── desert.jpg │ │ ├── noise.png │ │ ├── water-maps.jpg │ │ └── water.jpg │ ├── Earth │ │ ├── lenses │ │ │ ├── lensflare0.png │ │ │ └── lensflare1.png │ │ └── textures │ │ │ ├── day.jpg │ │ │ ├── height.jpg │ │ │ ├── night.jpg │ │ │ ├── normalMap.jpg │ │ │ └── specularClouds.jpg │ ├── EarthDayAndNight │ │ ├── earthbump.jpg │ │ ├── earthmap.jpg │ │ ├── earthspec.jpg │ │ ├── kloofendal_overcast_puresky_2k.hdr │ │ ├── mask.png │ │ └── scene.glb │ ├── EncryptSlider │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ └── 5.jpg │ ├── ExplodingParticles │ │ ├── video-01-end.jpg │ │ ├── video-01-start.jpg │ │ ├── video-01.mp4 │ │ ├── video-02-end.jpg │ │ ├── video-02-start.jpg │ │ ├── video-02.mp4 │ │ ├── video-03-end.jpg │ │ ├── video-03-start.jpg │ │ └── video-03.mp4 │ ├── Firework │ │ ├── park.glb │ │ └── particles │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ └── 8.png │ ├── ForestRoad │ │ ├── ForestRoad-RoadRoughness.png │ │ ├── forest_road3js.glb │ │ ├── forestroad-baked.jpg │ │ └── lowpolycar.glb │ ├── FurnitureGallery │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 13.jpg │ │ ├── 14.jpg │ │ ├── 15.jpg │ │ ├── 16.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── GPGPUParticles │ │ └── model.glb │ ├── GlassEffect │ │ └── lens-transformed.glb │ ├── HalftoneShading │ │ ├── bg2.jpg │ │ └── gwen.glb │ ├── ImageTransition │ │ ├── displacement │ │ │ ├── 11.jpg │ │ │ ├── 12.jpg │ │ │ └── 19.jpg │ │ ├── full_body.jpg │ │ ├── full_body2.jpg │ │ ├── portrait.jpg │ │ └── portrait2.jpg │ ├── InfiniteGallery │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ ├── 9.jpg │ │ └── freight-text-pro.woff │ ├── InteractiveParticles │ │ ├── bear-texture.jpg │ │ ├── corgi-texture.jpg │ │ ├── corgi-texture2.jpg │ │ ├── fox-texture.jpg │ │ ├── lion-texture2.jpg │ │ ├── panda-texture.jpg │ │ ├── panda-texture2.jpg │ │ └── tiger-texture4.jpg │ ├── IsabellaExplorer │ │ └── isabella.glb │ ├── KitchenSmoke │ │ ├── Kitchen.glb │ │ └── perlin.png │ ├── Mesmerized3d │ │ └── camping.glb │ ├── PageTransition │ │ ├── calanques.jpg │ │ ├── forest.jpg │ │ ├── galapagos.jpg │ │ ├── grand-canyon.jpg │ │ ├── plitvice-lakes.jpg │ │ ├── seven-sisters.jpg │ │ ├── tongariro.jpg │ │ ├── vatnajokull.jpg │ │ ├── wadi-rum.jpg │ │ └── yellowstone.jpg │ ├── PaintReveal │ │ ├── city.glb │ │ └── texture-mask.jpg │ ├── ParticlesMorphing │ │ ├── models.glb │ │ └── particles-models.glb │ ├── Pixalated │ │ ├── img_1.jpg │ │ ├── img_2.jpg │ │ ├── img_3.jpg │ │ ├── img_4.jpg │ │ ├── img_5.jpg │ │ ├── img_6.jpg │ │ ├── img_7.jpg │ │ └── img_8.jpg │ ├── PocketmonsterPortals │ │ ├── models │ │ │ ├── Cactoro.gltf │ │ │ ├── Dragon_Evolved.gltf │ │ │ └── Fish.gltf │ │ └── textures │ │ │ ├── fire.jpg │ │ │ ├── jungle.jpg │ │ │ └── water.jpg │ ├── Portal │ │ ├── portal3js.glb │ │ └── texture.jpg │ ├── ProceduralTerrain │ │ └── spruit_sunrise.hdr │ ├── ProductShowcase │ │ ├── frostglass2.jpg │ │ ├── product-showcase.glb │ │ ├── scene-1.glb │ │ ├── scene-2.glb │ │ ├── scene-3.glb │ │ └── scene-global.glb │ ├── RagingSea │ │ ├── boat.glb │ │ └── boat.mtl │ ├── RuinsScene │ │ ├── ruins-baked.jpg │ │ └── ruins3js.glb │ ├── SceneTransition │ │ └── modern_kitchen.glb │ ├── SciFiCoridor │ │ ├── peppermint_powerplant_1k.hdr │ │ └── scificoridor-threejs.glb │ ├── ScrollPlane │ │ ├── airplane.glb │ │ ├── cloud.gltf │ │ └── spinner.svg │ ├── ScrollTextGallery │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── Shaman │ │ ├── grass │ │ │ ├── blade_alpha.jpg │ │ │ └── blade_diffuse.jpg │ │ └── shaman.glb │ ├── ShoeConfigurator │ │ ├── normal.jpg │ │ ├── occlusionRougnessMetalness.jpg │ │ ├── shoe.bin │ │ └── shoe.gltf │ ├── SkateboardConfigurator │ │ ├── images │ │ │ ├── board │ │ │ │ ├── board-001.jpg │ │ │ │ ├── board-002.jpg │ │ │ │ ├── board-003.jpg │ │ │ │ ├── board-004.jpg │ │ │ │ ├── board-005.jpg │ │ │ │ ├── board-006.jpg │ │ │ │ ├── board-007.jpg │ │ │ │ ├── board-008.jpg │ │ │ │ ├── board-009.jpg │ │ │ │ ├── board-010.jpg │ │ │ │ ├── board-011.jpg │ │ │ │ ├── board-012.jpg │ │ │ │ ├── board-013.jpg │ │ │ │ ├── board-014.jpg │ │ │ │ └── board-015.jpg │ │ │ ├── griptape.jpg │ │ │ ├── truck │ │ │ │ ├── truck-001.png │ │ │ │ ├── truck-002.png │ │ │ │ ├── truck-003.png │ │ │ │ ├── truck-004.png │ │ │ │ ├── truck-005.png │ │ │ │ ├── truck-006.png │ │ │ │ └── truck-007.png │ │ │ └── wheel │ │ │ │ ├── wheel-001.png │ │ │ │ ├── wheel-002.png │ │ │ │ ├── wheel-003.png │ │ │ │ ├── wheel-004.png │ │ │ │ ├── wheel-005.png │ │ │ │ ├── wheel-006.png │ │ │ │ ├── wheel-007.png │ │ │ │ ├── wheel-008.png │ │ │ │ ├── wheel-009.png │ │ │ │ ├── wheel-010.png │ │ │ │ └── wheel-011.png │ │ ├── models │ │ │ ├── skateboard-board.glb │ │ │ ├── skateboard-truck.glb │ │ │ └── skateboard-wheels.glb │ │ ├── roundshadow.png │ │ ├── textures │ │ │ ├── board │ │ │ │ ├── Board.001_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.002_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.003_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.004_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.005_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.006_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.007_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.008_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.009_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.010_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.011_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.012_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.013_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.014_Bake1_PBR_Diffuse.png │ │ │ │ ├── Board.015_Bake1_PBR_Diffuse.png │ │ │ │ └── Board_Bake1_PBR_Ambient Occlusion.png │ │ │ ├── truck │ │ │ │ ├── Truck001_Bake1_PBR_Diffuse.png │ │ │ │ ├── Truck002_Bake1_PBR_Diffuse.png │ │ │ │ ├── Truck003_Bake1_PBR_Diffuse.png │ │ │ │ ├── Truck004_Bake1_PBR_Diffuse.png │ │ │ │ ├── Truck005_Bake1_PBR_Diffuse.png │ │ │ │ ├── Truck006_Bake1_PBR_Diffuse.png │ │ │ │ ├── Truck007_Bake1_PBR_Diffuse.png │ │ │ │ ├── Truck_Bake1_PBR_Ambient Occlusion.png │ │ │ │ ├── Truck_Bake1_PBR_Metalness.png │ │ │ │ └── Truck_Bake1_PBR_Roughness.png │ │ │ └── wheel │ │ │ │ ├── Wheels.001_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.002_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.003_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.004_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.005_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.006_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.007_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.008_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.009_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.010_Bake1_PBR_Diffuse.png │ │ │ │ ├── Wheels.011_Bake1_PBR_Diffuse.png │ │ │ │ └── Wheels_Bake1_PBR_Ambient Occlusion.png │ │ └── trucks-images │ │ │ ├── Wheels.001_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.002_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.003_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.004_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.005_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.006_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.007_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.008_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.009_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.010_Bake1_PBR_Diffuse.png │ │ │ ├── Wheels.011_Bake1_PBR_Diffuse.png │ │ │ └── Wheels_Bake1_PBR_Ambient Occlusion.png │ ├── SlicedModel │ │ ├── aerodynamics_workshop.hdr │ │ └── gears.glb │ ├── StarWarsHologram │ │ └── StarWars.glb │ ├── TruckShader │ │ └── cybertruck.gltf │ ├── VendingMachine │ │ ├── banner1.png │ │ ├── banner2.png │ │ ├── commercial.webm │ │ ├── cyberpank-vendor-machine.glb │ │ ├── fire.jpg │ │ ├── fire_sprite.png │ │ ├── vendingmachine-sign.jpg │ │ └── wave.jpg │ ├── WarpSlider │ │ └── textures │ │ │ └── optimized │ │ │ ├── 1.jpg │ │ │ ├── 10.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── 7.jpg │ │ │ ├── 8.jpg │ │ │ ├── 9.jpg │ │ │ └── displacement.jpg │ ├── WobblySphere │ │ ├── suzanne.glb │ │ └── urban_alley_01_1k.hdr │ ├── checker.jpg │ ├── mouse.png │ └── perlin.png ├── fonts │ ├── DMSerifDisplay-Regular.ttf │ ├── Inter-Medium.ttf │ ├── Inter-Regular.ttf │ ├── Poppins │ │ └── Poppins-Black.ttf │ └── RobotoMono.ttf ├── next.svg └── vercel.svg ├── shaders ├── includes │ ├── ambientLight.glsl │ ├── directionalLight.glsl │ └── pointLight.glsl └── lygia │ └── generative │ ├── cnoise.glsl │ ├── curl.glsl │ ├── fbm.glsl │ └── worley.glsl ├── tailwind.config.ts ├── tsconfig.json ├── types ├── global.d.ts ├── glsl.d.ts ├── index.ts └── resolve-lygia.d.ts └── utils └── index.ts /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## About 2 | 3 | Collection of ThreeJS experiments using React Three Fiber. Please see homepage for the list of implemented solutions 4 | 5 | ## Production 6 | 7 | Link is available via: https://threejslab.vercel.app/ 8 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SerMedvid/threejslab/c4175b7fcac682c9ec467df39703d33e386078f4/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | svg { 6 | display: inline-block; 7 | } 8 | 9 | @layer base { 10 | .text-outline-px { 11 | -webkit-text-stroke: 1px white; 12 | } 13 | .text-outline-0\.5 { 14 | -webkit-text-stroke: 2px white; 15 | } 16 | .text-outline-1 { 17 | -webkit-text-stroke: 4px white; 18 | } 19 | } -------------------------------------------------------------------------------- /app/lab/3d-car-slider/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/3dCarSlider/components/Layout"; 2 | import React from "react"; 3 | 4 | export default function Page() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /app/lab/3d-paper-menu/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/3dPaperMenu/components/Layout"; 2 | 3 | export default function ThreedPaperMenupage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/cloud69-scene/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/Cloud69Scene/components/Layout"; 2 | 3 | export default function Cloud69ScenePage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/color-boost/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ColorBoost/components/Layout"; 2 | 3 | export default function ColorBoostPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/curved-image-gallery/page.tsx: -------------------------------------------------------------------------------- 1 | import dynamic from "next/dynamic"; 2 | import { Suspense } from "react"; 3 | 4 | const Layout = dynamic( 5 | () => import("@/features/CurvedImageGallery/components/Layout"), 6 | { 7 | ssr: false, 8 | } 9 | ); 10 | 11 | export default function CurvedImageGalleryPage() { 12 | return ( 13 | Loading...}> 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /app/lab/distortion-effect/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/DistortionEffect/components/Layout"; 2 | 3 | export default function DistortionEffectPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/earth-day-and-night/page.tsx: -------------------------------------------------------------------------------- 1 | import CanvasWrapper from "@/components/CanvasWrapper"; 2 | import Experience from "@/features/EarthDayAndNight/components/Experience"; 3 | import Overlay from "@/features/EarthDayAndNight/components/Overlay"; 4 | 5 | export default function Page() { 6 | return ( 7 | <> 8 | 9 | 10 | 19 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /app/lab/earth/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/Earth/components/Layout"; 2 | 3 | export default function EarthPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/encrypt-slider/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/EncryptSlider/components/Layout"; 2 | 3 | export default function EncryptSliderPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/fireworks/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/Fireworks/components/Layout"; 2 | 3 | export default function FireworksPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/forest-road/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ForestRoad/components/Layout"; 2 | 3 | export default function ForestRoadPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/galaxy/page.tsx: -------------------------------------------------------------------------------- 1 | import CanvasWrapper from "@/components/CanvasWrapper"; 2 | import Experience from "@/features/Galaxy/components/Experience"; 3 | 4 | export default function Page() { 5 | return ( 6 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /app/lab/glass-effect/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/GlassEffect/components/Layout"; 2 | 3 | export default function GlassEffectPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/gpgpu-particles/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/GPGPUParticles/components/Layout"; 2 | 3 | export default function GPGPUPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/halftone-shading/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/HalftoneShading/components/Layout"; 2 | 3 | export default function HalftoneShadingPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/image-transition/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ImageTransition/components/Layout"; 2 | 3 | export default function ImageTransitionPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/infinite-gallery/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/InfiniteGalery/components/Layout"; 2 | 3 | export default function Page() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/interactive-objects/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/InteractiveObjects/components/Layout"; 2 | 3 | export default function InteractiveObjectsPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/interactive-particles/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "@/features/InteractiveParticles/components/Experience"; 5 | 6 | export default function Page() { 7 | return ( 8 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /app/lab/isabella-explorer/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/IsabellaExplorer/components/Layout"; 2 | 3 | export default function IsabellaExplorerPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/kitchen-smoke/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/KitchenSmoke/components/Layout"; 2 | 3 | export default function KitchenSmokePage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/lab.css: -------------------------------------------------------------------------------- 1 | html, 2 | body 3 | { 4 | /* position: fixed; */ 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100%; 9 | min-height: 100svh; 10 | } 11 | -------------------------------------------------------------------------------- /app/lab/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import "./lab.css"; 3 | 4 | export const metadata: Metadata = { 5 | title: "ThreeJS lab", 6 | description: "Collection of ThreeJS Experinces", 7 | }; 8 | 9 | export default function Layout({ children }: { children: React.ReactNode }) { 10 | return ( 11 |
{children}
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /app/lab/light-shading/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/LightShading/components/Layout"; 2 | 3 | export default function LightShadingPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/mesmerized-3d/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/Mesmerized3d/components/Layout"; 2 | 3 | export default function Mesmerize3dPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/page-transition/layout.tsx: -------------------------------------------------------------------------------- 1 | import ExperienceLayout from "@/features/PageTransition/components/Layout"; 2 | 3 | export default function Laout({ children }: { children: React.ReactNode }) { 4 | return ( 5 | <> 6 | 7 | {children} 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /app/lab/page-transition/page.tsx: -------------------------------------------------------------------------------- 1 | export default function Page() { 2 | return null; 3 | } 4 | -------------------------------------------------------------------------------- /app/lab/paint-reveal/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/PaintReveal/components/Layout"; 2 | 3 | export default function PaintRevealPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/particle-constellation/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ParticleConstellation/components/Layout"; 2 | 3 | export default function page() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/particles-morphing/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ParticlesMorphing/components/Layout"; 2 | 3 | export default function ParticlesMorphingPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/pixalated/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/Pixalated/components/Layout"; 2 | 3 | export default function PixaletedPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/pocketmonster-portals/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/PocketmonsterPortals/components/Layout"; 2 | 3 | export default function PocketMonsterPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/portal/page.tsx: -------------------------------------------------------------------------------- 1 | import CanvasWrapper from "@/components/CanvasWrapper"; 2 | import Experience from "@/features/Portal/components/Experience"; 3 | 4 | export default function PortalPage() { 5 | return ( 6 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /app/lab/procedural-terrain/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./page.css"; 2 | import type { Metadata } from "next"; 3 | 4 | export const metadata: Metadata = { 5 | title: "Scroll Procedural Terrain", 6 | description: "Scene with scroll animation", 7 | }; 8 | 9 | export default function Laout({ children }: { children: React.ReactNode }) { 10 | return children; 11 | } 12 | -------------------------------------------------------------------------------- /app/lab/procedural-terrain/page.css: -------------------------------------------------------------------------------- 1 | .yearWrapper { 2 | position: fixed!important; 3 | top: 30vh!important; 4 | } 5 | 6 | @media screen and (min-width: 1024px) { 7 | .yearWrapper { 8 | top: 33vh!important; 9 | } 10 | } -------------------------------------------------------------------------------- /app/lab/procedural-terrain/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ProceduralTerrain/components/Layout"; 2 | 3 | export default function ProceduralTerrainPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/product-showcase/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ProductShowcase/components/Layout"; 2 | 3 | export default function ProductShowcasePage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/raging-sea/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/RagingSea/components/Layout"; 2 | 3 | export default function RagingSeaPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/ruins-scene/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/RuinsScene/components/Layout"; 2 | 3 | export default function RuinsScenePage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/scene-transition/page.tsx: -------------------------------------------------------------------------------- 1 | import CanvasWrapper from "@/components/CanvasWrapper"; 2 | import Experience from "@/features/SceneTransition/components/Experience"; 3 | 4 | export default function SceneTransitionPage() { 5 | return ( 6 | 7 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /app/lab/scifi-coridor/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/SciFiCoridor/components/Layout"; 2 | 3 | export default function SciFiCoridorPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/scroll-gallery/page.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | height: 2px; 3 | } 4 | 5 | /* TRACK */ 6 | ::-webkit-scrollbar-track { 7 | background: rgba(255, 255, 255, 0.23); 8 | } 9 | 10 | /* HANDLE */ 11 | ::-webkit-scrollbar-thumb { 12 | background: white; 13 | } -------------------------------------------------------------------------------- /app/lab/scroll-gallery/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ScrollGallery/components/Layout"; 2 | 3 | import "./page.css"; 4 | 5 | export default function ScrollGalleryPage() { 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /app/lab/scroll-gallery2/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ScrollGallery2/components/Layout"; 2 | 3 | export default function ScrollGallery2Page() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/scroll-plane/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./page.css"; 2 | import type { Metadata } from "next"; 3 | import { DM_Serif_Display } from "next/font/google"; 4 | 5 | const dmSerif = DM_Serif_Display({ weight: "400", subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Scroll Plain", 9 | description: "Scene with scroll animation", 10 | }; 11 | 12 | export default function Laout({ children }: { children: React.ReactNode }) { 13 | return
{children}
; 14 | } 15 | -------------------------------------------------------------------------------- /app/lab/scroll-plane/page.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | width: 2px; 3 | } 4 | 5 | /* TRACK */ 6 | ::-webkit-scrollbar-track { 7 | background: rgba(255, 255, 255, 0.23); 8 | } 9 | 10 | /* HANDLE */ 11 | ::-webkit-scrollbar-thumb { 12 | background: white; 13 | height: 10%; 14 | } -------------------------------------------------------------------------------- /app/lab/scroll-plane/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ScrollPlane/components/Layout"; 2 | 3 | export default function Page() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/scroll-text-gallery/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ScrollTextGallery/components/Layout"; 2 | 3 | export default function ScrollTextGalleryPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/sdf-shapes/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/SdfShapes/components/Layout"; 2 | 3 | export default function page() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/shaders-selector/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/ShadersSelector/components/Layout"; 2 | 3 | export default function Page() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/shaman/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/Shaman/components/Layout"; 2 | 3 | export default function ShamanPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/shoe-configurator/page.tsx: -------------------------------------------------------------------------------- 1 | import CanvasWrapper from "@/components/CanvasWrapper"; 2 | import Experience from "@/features/ShoeConfigurator/components/Experience"; 3 | import Overlay from "@/features/ShoeConfigurator/components/Overlay"; 4 | 5 | export default function Page() { 6 | return ( 7 | <> 8 | 17 | 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /app/lab/skateboard-configurator/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/SkateboardConfigurator/components/Layout"; 2 | 3 | export default function ScateboardConfiguratorPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/sliced-model/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/SlicedModel/components/Layout"; 2 | 3 | export default function SlicedModelPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/star-wars-hologram/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/StarWarsHologram/components/Layout"; 2 | 3 | export default function StarWarsHologramsPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/truck-shader/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/TruckShader/components/Layout"; 2 | 3 | export default function TruckShaderPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/vending-machine/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/VendingMachine/components/Layout"; 2 | 3 | export default function VendingMachinePage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/warp-slider/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/WarpSlider/components/Layout"; 2 | 3 | export default function WarpSliderPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/water-effect/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/WaterEffect/components/Layout"; 2 | 3 | export default function WaterEffectPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/wobbly-sphere/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/WobblySphere/components/Layout"; 2 | 3 | export default function WobblySpherePage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /app/lab/wormhole/page.tsx: -------------------------------------------------------------------------------- 1 | import Layout from "@/features/Wormhole/components/Layout"; 2 | 3 | export default function TubePage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /components/Credits.tsx: -------------------------------------------------------------------------------- 1 | type Props = { 2 | name: string; 3 | href: string; 4 | }; 5 | 6 | export default function Credits({ name, href }: Props) { 7 | return ( 8 |

9 | {"Design credits: "} 10 | 14 | {name} 15 | 16 |

17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /components/Icons/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Mouse } from "./Mouse"; 2 | export { default as Click } from "./Click"; 3 | -------------------------------------------------------------------------------- /components/materials/Hologram/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./HologramMaterial"; 2 | -------------------------------------------------------------------------------- /components/materials/SmokeMaterial/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SmokeMaterial"; 2 | -------------------------------------------------------------------------------- /features/3dCarSlider/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import React from "react"; 5 | import Experience from "./Experience"; 6 | import { Leva } from "leva"; 7 | import Overlay from "./Overlay"; 8 | 9 | export default function Layout() { 10 | return ( 11 | <> 12 | 13 | 14 | 18 | 22 | 23 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /features/3dPaperMenu/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { Environment } from "@react-three/drei"; 2 | import { Model } from "./Model"; 3 | 4 | export default function Experience() { 5 | return ( 6 | <> 7 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /features/3dPaperMenu/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import Credits from "@/components/Credits"; 6 | 7 | export default function Layout() { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /features/Cloud69Scene/components/Effects.tsx: -------------------------------------------------------------------------------- 1 | import { Bloom, EffectComposer } from "@react-three/postprocessing"; 2 | 3 | export default function Effects() { 4 | return ( 5 | 6 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /features/Cloud69Scene/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import Effects from "./Effects"; 6 | 7 | export default function Layout() { 8 | return ( 9 | 16 | 17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /features/Cloud69Scene/components/Scene.tsx: -------------------------------------------------------------------------------- 1 | import { useGLTF } from "@react-three/drei"; 2 | import { useEffect } from "react"; 3 | import { Mesh } from "three"; 4 | 5 | export default function Scene() { 6 | const { scene } = useGLTF("/assets/Cloud69Scene/cloud69.glb"); 7 | 8 | useEffect(() => { 9 | scene.traverse((child) => { 10 | if (child instanceof Mesh) { 11 | child.receiveShadow = true; 12 | child.castShadow = true; 13 | } 14 | }); 15 | }, [scene]); 16 | 17 | return ; 18 | } 19 | -------------------------------------------------------------------------------- /features/ColorBoost/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { OrbitControls } from "@react-three/drei"; 2 | import Model from "./Model"; 3 | 4 | export default function Experience() { 5 | return ( 6 | <> 7 | {/* */} 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/ColorBoost/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/ColorBoost/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 5 | 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /features/CurvedImageGallery/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import ImageModel from "./ImageModel"; 2 | 3 | export default function Experience() { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /features/CurvedImageGallery/components/layout.css: -------------------------------------------------------------------------------- 1 | #image-canvas { 2 | pointer-events: none !important; 3 | } -------------------------------------------------------------------------------- /features/CurvedImageGallery/shaders/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D uImage; 2 | uniform float uOpacity; 3 | 4 | varying vec2 vUv; 5 | 6 | void main() { 7 | vec4 image = texture2D(uImage, vUv); 8 | gl_FragColor = vec4(image.rgb, uOpacity); 9 | } -------------------------------------------------------------------------------- /features/CurvedImageGallery/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | uniform vec2 uOffset; 2 | 3 | varying vec2 vUv; 4 | 5 | void main() { 6 | vUv = uv; 7 | 8 | vec3 pos = position; 9 | 10 | pos.x += sin(uv.y * 3.14) * uOffset.x * 0.1; 11 | pos.y += sin(uv.x * 3.14) * uOffset.y * 0.07; 12 | 13 | gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); 14 | } -------------------------------------------------------------------------------- /features/DistortionEffect/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { PixelSizeCamera } from "@/components/PixelSizeCamera"; 2 | import DesertModel from "./DesertModel"; 3 | 4 | export default function Experience() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/DistortionEffect/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import CanvasWrapper from "@/components/CanvasWrapper"; 2 | import Experience from "./Experience"; 3 | 4 | export default function Layout() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /features/DistortionEffect/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | vec4 mvPosition = modelViewMatrix * vec4(position, 1.); 7 | gl_Position = projectionMatrix * mvPosition; 8 | } -------------------------------------------------------------------------------- /features/Earth/components/CameraSetup.tsx: -------------------------------------------------------------------------------- 1 | import { CameraControls } from "@react-three/drei"; 2 | import { ElementRef, forwardRef, useRef } from "react"; 3 | 4 | export const CameraSetup = forwardRef, {}>( 5 | (props, refForwarded) => { 6 | const innerRef = useRef>(null); 7 | 8 | const ref = refForwarded ?? innerRef; 9 | 10 | return ( 11 | 15 | ); 16 | } 17 | ); 18 | 19 | CameraSetup.displayName = "CameraSetup"; 20 | 21 | export default CameraSetup; 22 | -------------------------------------------------------------------------------- /features/Earth/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /features/Earth/shaders/atmosphere/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 vPosition; 2 | varying vec3 vNormal; 3 | 4 | void main() { 5 | vec4 modelPosition = modelMatrix * vec4(position, 1.); 6 | 7 | gl_Position = projectionMatrix * viewMatrix * modelPosition; 8 | 9 | vPosition = modelPosition.xyz; 10 | vNormal = vec4(modelMatrix * vec4(normal, 0.0)).xyz; 11 | } -------------------------------------------------------------------------------- /features/EarthDayAndNight/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEnvironment } from "@react-three/drei"; 4 | import PlanetScene from "./PlanetScene"; 5 | import RingsScene from "./RingsScene"; 6 | import MouseTrack from "./MouseTrack"; 7 | 8 | export default function Experience() { 9 | const envMap = useEnvironment({ 10 | files: "/assets/EarthDayAndNight/kloofendal_overcast_puresky_2k.hdr", 11 | }); 12 | 13 | return ( 14 | <> 15 | 16 | 17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /features/EarthDayAndNight/components/MouseTrack.tsx: -------------------------------------------------------------------------------- 1 | import { useFrame } from "@react-three/fiber"; 2 | import useStore from "../stores/useStore"; 3 | 4 | export default function MouseTrack() { 5 | const { toggleDaytime } = useStore(); 6 | 7 | useFrame((state) => { 8 | const { pointer } = state; 9 | 10 | if (pointer.x < -0.75) toggleDaytime(false); 11 | 12 | if (pointer.x > 0.75) toggleDaytime(true); 13 | }); 14 | 15 | return null; 16 | } 17 | -------------------------------------------------------------------------------- /features/EarthDayAndNight/components/Planes.tsx: -------------------------------------------------------------------------------- 1 | import { useMemo } from "react"; 2 | import { PlaneModel } from "./PlaneModel"; 3 | 4 | type Props = { 5 | count: number; 6 | }; 7 | 8 | export default function Planes({ count }: Props) { 9 | const planes = useMemo(() => { 10 | return [...Array(count)].map((_, idx) => ( 11 | 15 | )); 16 | }, [count]); 17 | 18 | return planes; 19 | } 20 | -------------------------------------------------------------------------------- /features/EarthDayAndNight/components/Scene.tsx: -------------------------------------------------------------------------------- 1 | import { SceneProps } from "@react-three/fiber"; 2 | import React from "react"; 3 | import { Scene } from "three"; 4 | 5 | const SceneContainer = React.forwardRef( 6 | ({ children, ...rest }, ref) => { 7 | return ( 8 | 12 | {children} 13 | 14 | ); 15 | } 16 | ); 17 | 18 | SceneContainer.displayName = "SceneContainer"; 19 | 20 | export default SceneContainer; 21 | -------------------------------------------------------------------------------- /features/EarthDayAndNight/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const ANIMATION_DURATION = 0.5; 2 | 3 | export const ANIMATION_EASE = "power1.inOut"; 4 | -------------------------------------------------------------------------------- /features/EarthDayAndNight/stores/useStore.ts: -------------------------------------------------------------------------------- 1 | import { create } from "zustand"; 2 | import { subscribeWithSelector } from "zustand/middleware"; 3 | 4 | type Store = { 5 | isDay: boolean; 6 | toggleDaytime: (isDay: boolean) => void; 7 | }; 8 | 9 | const useStore = create()( 10 | subscribeWithSelector((set) => ({ 11 | isDay: true, 12 | toggleDaytime: (isDay: boolean) => set({ isDay }), 13 | })) 14 | ); 15 | 16 | export default useStore; 17 | -------------------------------------------------------------------------------- /features/EncryptSlider/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 |
9 |
16 | 17 | 18 | 19 |
20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /features/EncryptSlider/components/ParticlesGroup.tsx: -------------------------------------------------------------------------------- 1 | import useStore from "../store/useStore"; 2 | import BackgroundParticles from "./BackgroundParticles"; 3 | import DividerLayer from "./DividerLayer"; 4 | 5 | export default function ParticlesGroup() { 6 | const height = useStore((state) => state.height); 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /features/EncryptSlider/components/SliderText.tsx: -------------------------------------------------------------------------------- 1 | import { VisualData } from "./Slider"; 2 | import TextCardItem from "./TextCardItem"; 3 | 4 | type Props = { 5 | items: VisualData[]; 6 | }; 7 | 8 | export default function SliderText({ items }: Props) { 9 | return ( 10 | 11 | {items.map(({ width, height, offset }, idx) => ( 12 | 19 | ))} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /features/EncryptSlider/shaders/backgroundFrag.glsl: -------------------------------------------------------------------------------- 1 | varying float vRandom; 2 | 3 | void main() { 4 | float distanceToCenter = distance(gl_PointCoord, vec2(0.5)); 5 | 6 | float strength = 0.4 / distanceToCenter - 0.8; 7 | vec3 finalColor = mix(vec3(1.), vec3(0.392, 0.196, 0.902), vRandom); 8 | 9 | gl_FragColor = vec4(finalColor, strength * 0.4); 10 | } -------------------------------------------------------------------------------- /features/EncryptSlider/shaders/backgroundVertex.glsl: -------------------------------------------------------------------------------- 1 | attribute float aVelocity; 2 | attribute float aRandom; 3 | attribute float size; 4 | 5 | uniform float uTime; 6 | uniform float uWidth; 7 | 8 | varying float vRandom; 9 | 10 | void main() { 11 | vRandom = aRandom; 12 | 13 | vec3 pos = position; 14 | pos.x = fract(aVelocity * uTime * 0.2 - aRandom); 15 | pos.x = (pos.x - 0.5) * uWidth; 16 | 17 | vec4 mvPosition = modelViewMatrix * vec4(pos, 1.); 18 | gl_PointSize = size * (1. / -mvPosition.z); 19 | gl_Position = projectionMatrix * mvPosition; 20 | } -------------------------------------------------------------------------------- /features/EncryptSlider/shaders/blendFrag.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D uImageTexture; 2 | uniform sampler2D uTextTexture; 3 | 4 | varying vec2 vUv; 5 | 6 | void main() { 7 | float progress = smoothstep(0.5, 0.51, vUv.x); 8 | vec4 imageTexture = texture(uImageTexture, vUv); 9 | 10 | vec4 textTexture = texture(uTextTexture, vUv); 11 | 12 | gl_FragColor = mix(imageTexture, textTexture, progress); 13 | } -------------------------------------------------------------------------------- /features/EncryptSlider/shaders/blendVertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); 7 | } -------------------------------------------------------------------------------- /features/EncryptSlider/shaders/dividerFrag.glsl: -------------------------------------------------------------------------------- 1 | uniform float uOpacity; 2 | 3 | varying float vTreveledDistance; 4 | 5 | void main() { 6 | 7 | if(length(gl_PointCoord - vec2(0.5)) >= 0.5) { 8 | discard; 9 | } 10 | 11 | float alpha = (1. - vTreveledDistance) * uOpacity; 12 | 13 | gl_FragColor = vec4(1., 1., 1., alpha); 14 | } -------------------------------------------------------------------------------- /features/EncryptSlider/shaders/dividerLineVertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); 7 | } -------------------------------------------------------------------------------- /features/EncryptSlider/shaders/dividerVertex.glsl: -------------------------------------------------------------------------------- 1 | attribute float aVelocity; 2 | attribute float aDistance; 3 | attribute float size; 4 | 5 | uniform float uTime; 6 | uniform float uMaxOffset; 7 | 8 | varying float vTreveledDistance; 9 | 10 | void main() { 11 | vec3 pos = position; 12 | pos.x = mod(aVelocity * uTime, aDistance) * uMaxOffset; 13 | vTreveledDistance = pos.x; 14 | 15 | vec4 mvPosition = modelViewMatrix * vec4(pos, 1.); 16 | gl_PointSize = size * (1. / -mvPosition.z); 17 | gl_Position = projectionMatrix * mvPosition; 18 | } -------------------------------------------------------------------------------- /features/ExpodingParticles/shaders/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uProgress; 2 | uniform sampler2D uTStart; 3 | uniform sampler2D uTEnd; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | float PI = 3.141592653589793; 9 | 10 | void main() { 11 | vec4 ttStart = texture(uTStart, vUv); 12 | vec4 ttEnd = texture(uTEnd, vUv); 13 | 14 | vec4 finalTexture = mix(ttStart, ttEnd, uProgress); 15 | gl_FragColor = finalTexture; 16 | 17 | if(gl_FragColor.r < 0.1 && gl_FragColor.b < 0.1 && gl_FragColor.g < 0.1) 18 | discard; 19 | } -------------------------------------------------------------------------------- /features/Fireworks/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { OrbitControls, SoftShadows } from "@react-three/drei"; 2 | import Firework from "./Firework"; 3 | import { ParkModel } from "./Park"; 4 | import Lights from "./Lights"; 5 | 6 | export default function Experience() { 7 | return ( 8 | <> 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /features/Fireworks/components/Firework.tsx: -------------------------------------------------------------------------------- 1 | import useFireworks from "../hooks/useFireworks"; 2 | 3 | export default function Firework() { 4 | useFireworks(); 5 | 6 | return null; 7 | } 8 | -------------------------------------------------------------------------------- /features/Fireworks/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import useStore from "../stores/useStore"; 6 | 7 | export default function Layout() { 8 | const setClicked = useStore((state) => state.setClicked); 9 | 10 | return ( 11 | setClicked(true)} 16 | onPointerUp={() => setClicked(false)} 17 | > 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /features/Fireworks/components/Lights.tsx: -------------------------------------------------------------------------------- 1 | import { useRef } from "react"; 2 | import { DirectionalLight } from "three"; 3 | 4 | export default function Lights() { 5 | const lightRef = useRef(null); 6 | 7 | return ( 8 | <> 9 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /features/Fireworks/shaders/fragmentShader.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTexture; 2 | uniform vec3 uColor; 3 | 4 | void main() { 5 | float textureAlpha = texture(uTexture, gl_PointCoord).r; 6 | 7 | gl_FragColor = vec4(uColor, textureAlpha); 8 | #include 9 | #include 10 | } -------------------------------------------------------------------------------- /features/Fireworks/stores/useStore.ts: -------------------------------------------------------------------------------- 1 | import { create } from "zustand"; 2 | import { subscribeWithSelector } from "zustand/middleware"; 3 | 4 | type Store = { 5 | clicked: boolean; 6 | setClicked: (clicked: boolean) => void; 7 | }; 8 | 9 | const useStore = create()( 10 | subscribeWithSelector((set) => ({ 11 | clicked: false, 12 | setClicked: (clicked) => set({ clicked }), 13 | })) 14 | ); 15 | 16 | export default useStore; 17 | -------------------------------------------------------------------------------- /features/GPGPUParticles/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { OrbitControls } from "@react-three/drei"; 2 | import Model from "./Model"; 3 | 4 | export default function Experience() { 5 | return ( 6 | <> 7 | 11 | 12 | 13 | 14 | {/* 15 | 16 | 17 | */} 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /features/GPGPUParticles/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import { NoToneMapping } from "three"; 6 | 7 | export default function Layout() { 8 | return ( 9 | 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /features/GPGPUParticles/shaders/particles/fragment.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 vColor; 2 | 3 | void main() 4 | { 5 | float distanceToCenter = length(gl_PointCoord - 0.5); 6 | if(distanceToCenter > 0.5) 7 | discard; 8 | 9 | gl_FragColor = vec4(vColor, 1.0); 10 | 11 | #include 12 | #include 13 | } -------------------------------------------------------------------------------- /features/GlassEffect/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { Preload, Scroll } from "@react-three/drei"; 2 | import { Lens } from "./Lens"; 3 | import Images from "./Images"; 4 | import Typography from "./Typography"; 5 | 6 | export default function Experience() { 7 | return ( 8 | <> 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /features/GlassEffect/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import { ScrollControls } from "@react-three/drei"; 6 | 7 | export default function Layout() { 8 | return ( 9 | 10 | 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /features/HalftoneShading/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { Environment, OrbitControls } from "@react-three/drei"; 2 | import { Leva, useControls } from "leva"; 3 | import TransitionEffect from "./TransitionEffect"; 4 | 5 | export default function Experience() { 6 | const { clearColor } = useControls({ 7 | clearColor: { 8 | value: "#26132f", 9 | }, 10 | }); 11 | 12 | return ( 13 | <> 14 | 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /features/HalftoneShading/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import { Leva } from "leva"; 6 | 7 | export default function Layout() { 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /features/HalftoneShading/components/Stage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { GwenModel } from "./GwenModel"; 3 | import { Environment } from "@react-three/drei"; 4 | import { ShaderMaterial } from "three"; 5 | 6 | type Props = { 7 | shaderMaterial?: ShaderMaterial; 8 | bgColor: string; 9 | }; 10 | 11 | export default function Stage({ shaderMaterial, bgColor }: Props) { 12 | return ( 13 | <> 14 | 18 | 19 | {!shaderMaterial && } 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /features/HalftoneShading/shaders/transitionFragment.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D uStartTexture; 2 | uniform sampler2D uEndTexture; 3 | uniform float uProgress; 4 | 5 | varying vec2 vUv; 6 | 7 | void main() { 8 | vec4 startTexture = texture(uStartTexture, vUv); 9 | vec4 endTexture = texture(uEndTexture, vUv); 10 | 11 | vec4 finalTexure = mix(startTexture, endTexture, step(1. - uProgress, 1. - vUv.y)); 12 | 13 | gl_FragColor = finalTexure; 14 | 15 | // gl_FragColor = vec4(1., 0., 0., 1.); 16 | } -------------------------------------------------------------------------------- /features/HalftoneShading/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 vNormal; 2 | varying vec3 vPosition; 3 | 4 | void main() 5 | { 6 | // Position 7 | vec4 modelPosition = modelMatrix * vec4(position, 1.0); 8 | gl_Position = projectionMatrix * viewMatrix * modelPosition; 9 | 10 | // Model normal 11 | vec3 modelNormal = (modelMatrix * vec4(normal, 0.0)).xyz; 12 | 13 | // Varyings 14 | vNormal = modelNormal; 15 | vPosition = modelPosition.xyz; 16 | } -------------------------------------------------------------------------------- /features/ImageTransition/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import Model from "./Model"; 2 | 3 | export default function Experience() { 4 | return ( 5 | <> 6 | 12 | 13 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /features/ImageTransition/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /features/ImageTransition/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | } -------------------------------------------------------------------------------- /features/InfiniteGalery/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /features/InfiniteGalery/shaders/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform vec2 uRatio; 2 | uniform sampler2D uTexture; 3 | 4 | varying vec2 vUv; 5 | 6 | void main() { 7 | vec2 uv = vec2(vUv.x * uRatio.x + (1. - uRatio.x) * 0.5, vUv.y * uRatio.y + (1. - uRatio.y) * 0.5); 8 | 9 | vec4 texture = texture(uTexture, uv); 10 | 11 | gl_FragColor = vec4(texture.rgb, 1.); 12 | } -------------------------------------------------------------------------------- /features/InfiniteGalery/shaders/vertext.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform float uSpeed; 3 | 4 | varying vec2 vUv; 5 | 6 | void main() { 7 | vUv = uv; 8 | 9 | vec3 p = position; 10 | 11 | p.z = (sin(p.x * 4. + uTime) * 1.5 + cos(p.y * 2. + uTime) * 1.5) * (0.1 + uSpeed * 0.5); 12 | 13 | vec4 mvPosition = modelViewMatrix * vec4(p, 1.); 14 | vec4 finalPosition = projectionMatrix * mvPosition; 15 | 16 | gl_Position = finalPosition; 17 | } -------------------------------------------------------------------------------- /features/InteractiveObjects/components/EffectsContainer.tsx: -------------------------------------------------------------------------------- 1 | import { Bloom, EffectComposer } from "@react-three/postprocessing"; 2 | 3 | export default function EffectsContainer() { 4 | return ( 5 | 6 | 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /features/InteractiveObjects/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import EffectsContainer from "./EffectsContainer"; 6 | 7 | export default function Layout() { 8 | return ( 9 | 10 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /features/IsabellaExplorer/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /features/IsabellaExplorer/components/Lights.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Lights() { 4 | return ( 5 | <> 6 | 7 | 8 | 14 | 15 | 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /features/IsabellaExplorer/shaders/fire/fragmentShader.glsl: -------------------------------------------------------------------------------- 1 | uniform vec3 color; 2 | uniform sampler2D map; 3 | uniform float spriteRowLenght; 4 | 5 | varying float vSprite; 6 | varying float vOpacity; 7 | 8 | void main() { 9 | vec2 texCoord = vec2(gl_PointCoord.x * spriteRowLenght + vSprite, gl_PointCoord.y); 10 | 11 | gl_FragColor = vec4(texture(map, texCoord).xyz * color * vOpacity, 1.0); 12 | 13 | #include 14 | #include 15 | } -------------------------------------------------------------------------------- /features/KitchenSmoke/components/CameraSetup.tsx: -------------------------------------------------------------------------------- 1 | import { CameraControls } from "@react-three/drei"; 2 | import { useThree } from "@react-three/fiber"; 3 | 4 | export default function CameraSetup() { 5 | const camera = useThree((state) => state.camera); 6 | 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /features/KitchenSmoke/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /features/KitchenSmoke/components/Lights.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { PointLight } from "three"; 3 | 4 | export default function Lights() { 5 | const lightRef = useRef(null); 6 | 7 | return ( 8 | <> 9 | 10 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /features/LightShading/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { OrbitControls } from "@react-three/drei"; 2 | import Models from "./Models"; 3 | 4 | export default function Experience() { 5 | return ( 6 | <> 7 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /features/LightShading/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import { NoToneMapping } from "three"; 6 | 7 | export default function Layout() { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /features/LightShading/shaders/vertexShader.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 vNormal; 2 | varying vec3 vPosition; 3 | 4 | void main() { 5 | vec4 modelPosition = modelMatrix * vec4(position, 1.); 6 | 7 | gl_Position = projectionMatrix * viewMatrix * modelPosition; 8 | 9 | // Model normal 10 | vec4 modelNormal = modelMatrix * vec4(normal, 0.); 11 | 12 | vNormal = modelNormal.xyz; 13 | vPosition = modelPosition.xyz; 14 | } -------------------------------------------------------------------------------- /features/Mesmerized3d/store/useStore.ts: -------------------------------------------------------------------------------- 1 | import { create } from "zustand"; 2 | import { subscribeWithSelector } from "zustand/middleware"; 3 | import { Mesmerized3dPage } from "../types"; 4 | 5 | type Store = { 6 | currentPage: Mesmerized3dPage; 7 | setCurrentPage: (page: Mesmerized3dPage) => void; 8 | }; 9 | 10 | const DEFAULT_PROPS = { 11 | currentPage: Mesmerized3dPage.INTRO, 12 | }; 13 | 14 | const useStore = create()( 15 | subscribeWithSelector((set) => ({ 16 | ...DEFAULT_PROPS, 17 | setCurrentPage: (currentPage) => set({ currentPage }), 18 | })) 19 | ); 20 | 21 | export default useStore; 22 | -------------------------------------------------------------------------------- /features/Mesmerized3d/types/index.ts: -------------------------------------------------------------------------------- 1 | export enum Mesmerized3dPage { 2 | HOME = "home", 3 | INTRO = "intro", 4 | STORE = "store", 5 | } 6 | -------------------------------------------------------------------------------- /features/PageTransition/components/layout.module.css: -------------------------------------------------------------------------------- 1 | .container ::-webkit-scrollbar { 2 | height: 0px; 3 | } 4 | -------------------------------------------------------------------------------- /features/PageTransition/hooks/usePlaneDimension.ts: -------------------------------------------------------------------------------- 1 | import { useThree } from "@react-three/fiber"; 2 | 3 | export const usePlaneDimension = () => { 4 | const { width } = useThree((state) => state.size); 5 | 6 | const planeWidth = Math.ceil(width * 0.28); 7 | const planeOfftet = Math.ceil(width * 0.06); 8 | const totalOffset = planeWidth + planeOfftet; 9 | 10 | return { planeWidth, planeOfftet, totalOffset }; 11 | }; 12 | -------------------------------------------------------------------------------- /features/PaintReveal/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import RevealTexture from "./RevealTexture"; 2 | import Scene from "./Scene"; 3 | 4 | export default function Experience() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /features/PaintReveal/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/PaintReveal/components/Scene.tsx: -------------------------------------------------------------------------------- 1 | import { Environment, useGLTF } from "@react-three/drei"; 2 | 3 | export default function Scene() { 4 | const { scene } = useGLTF("/assets/PaintReveal/city.glb"); 5 | 6 | return ( 7 | <> 8 | 12 | 16 | 17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /features/PaintReveal/shaders/revealFragment.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTextureStart; 2 | uniform sampler2D uTextureEnd; 3 | uniform sampler2D uTextureProgress; 4 | varying vec2 vUv; 5 | 6 | void main(void) { 7 | vec4 textureStart = texture(uTextureStart, vUv); 8 | vec4 textureEnd = texture(uTextureEnd, vUv); 9 | float progress = step(0.01, texture(uTextureProgress, vUv).r); 10 | 11 | gl_FragColor = mix(textureStart, textureEnd, progress); 12 | } -------------------------------------------------------------------------------- /features/PaintReveal/shaders/revealVertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); 7 | } -------------------------------------------------------------------------------- /features/PaintReveal/shaders/sobelVertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); 7 | } -------------------------------------------------------------------------------- /features/ParticleConstellation/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { OrbitControls } from "@react-three/drei"; 2 | import Constellation from "./Constellation"; 3 | import { useControls } from "leva"; 4 | 5 | export default function Experience() { 6 | const { count } = useControls({ 7 | count: { 8 | value: 150, 9 | min: 1, 10 | max: 1000, 11 | step: 1, 12 | }, 13 | }); 14 | 15 | return ( 16 | <> 17 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /features/ParticleConstellation/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/ParticleConstellation/shaders/constellationFragment.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 vColor; 2 | 3 | void main() { 4 | float distanceToCenter = distance(gl_PointCoord, vec2(0.5)); 5 | 6 | float strength = 0.4 / distanceToCenter - 0.8; 7 | 8 | gl_FragColor = vec4(vColor, strength); 9 | 10 | } -------------------------------------------------------------------------------- /features/ParticleConstellation/shaders/constellationVertex.glsl: -------------------------------------------------------------------------------- 1 | attribute float size; 2 | 3 | uniform float uWidth; 4 | 5 | varying vec3 vColor; 6 | 7 | vec3 hsl2rgb(vec3 c) { 8 | vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0); 9 | 10 | return c.z + c.y * (rgb - 0.5) * (1.0 - abs(2.0 * c.z - 1.0)); 11 | } 12 | 13 | void main() { 14 | vec3 pos = position; 15 | vec4 mvPosition = modelViewMatrix * vec4(pos, 1.); 16 | gl_PointSize = size * (1. / -mvPosition.z); 17 | gl_Position = projectionMatrix * mvPosition; 18 | 19 | vColor = hsl2rgb(vec3((pos.x + uWidth / 2.) / uWidth, 0.85, 0.5)); 20 | 21 | } -------------------------------------------------------------------------------- /features/ParticlesMorphing/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { Stars } from "@react-three/drei"; 2 | import Models from "./Models"; 3 | 4 | export default function Experience() { 5 | return ( 6 | <> 7 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /features/ParticlesMorphing/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import { ScrollControls } from "@react-three/drei"; 6 | 7 | export default function Layout() { 8 | return ( 9 | 10 | 15 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /features/ParticlesMorphing/shaders/fragmentShader.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 vColor; 2 | 3 | void main() { 4 | vec2 uv = gl_PointCoord; 5 | float distanceToCenter = distance(vec2(0.5), uv); 6 | 7 | float alpha = 0.05 / distanceToCenter - 0.05 * 2.; 8 | 9 | gl_FragColor = vec4(vColor, alpha); 10 | #include 11 | #include 12 | } -------------------------------------------------------------------------------- /features/Pixalated/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import Slider from "./Slider"; 2 | 3 | export default function Experience() { 4 | return ( 5 | <> 6 | 10 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /features/Pixalated/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/Pixalated/components/Slider.tsx: -------------------------------------------------------------------------------- 1 | import Slide from "./Slide"; 2 | import useStore from "../store/useStore"; 3 | 4 | export default function Slider() { 5 | const slides = useStore((state) => state.slides); 6 | 7 | return slides.map(({ id, img, prompt }, index) => ( 8 | 14 | )); 15 | } 16 | -------------------------------------------------------------------------------- /features/Pixalated/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 5 | 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /features/Pixalated/store/useStore.ts: -------------------------------------------------------------------------------- 1 | import { create } from "zustand"; 2 | import { subscribeWithSelector } from "zustand/middleware"; 3 | 4 | import { slides } from "../data"; 5 | 6 | type Store = { 7 | isHovered: boolean; 8 | setIsHovered: (isHovered: boolean) => void; 9 | slides: typeof slides; 10 | slideLength: number; 11 | }; 12 | 13 | const useStore = create()( 14 | subscribeWithSelector((set, get) => ({ 15 | isHovered: false, 16 | setIsHovered: (isHovered) => set({ isHovered }), 17 | slides, 18 | slideLength: slides.length, 19 | })) 20 | ); 21 | 22 | export default useStore; 23 | -------------------------------------------------------------------------------- /features/PocketmonsterPortals/components/Cursor.tsx: -------------------------------------------------------------------------------- 1 | import { useCursor } from "@react-three/drei"; 2 | import useStore from "../store/useStore"; 3 | 4 | export default function Cursor() { 5 | const hovered = useStore((state) => state.hovered); 6 | 7 | useCursor(!!hovered); 8 | 9 | return null; 10 | } 11 | -------------------------------------------------------------------------------- /features/PocketmonsterPortals/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /features/Portal/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); 7 | } -------------------------------------------------------------------------------- /features/ProductShowcase/components/Credits.tsx: -------------------------------------------------------------------------------- 1 | export default function Credits() { 2 | return ( 3 |

4 | Design credits: 5 | 9 | Cosmin Capitanu 10 | 11 |

12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /features/ProductShowcase/components/Icons/ArrowIcon.tsx: -------------------------------------------------------------------------------- 1 | import SvgIcon from "../SvgIcon"; 2 | 3 | export default function ArrowIcon() { 4 | return ( 5 | 6 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /features/ProductShowcase/components/SvgIcon.tsx: -------------------------------------------------------------------------------- 1 | import { SVGProps } from "react"; 2 | 3 | type Props = SVGProps & { 4 | size?: number; 5 | children: React.ReactNode; 6 | }; 7 | 8 | export default function SvgIcon({ 9 | children, 10 | viewBox = "0 0 64 64", 11 | size = 24, 12 | fill = "#000000", 13 | ...rest 14 | }: Props) { 15 | return ( 16 | 24 | {children} 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /features/ProductShowcase/shaders/blur/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main() { 5 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 6 | 7 | vUv = uv; 8 | vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz; 9 | } 10 | -------------------------------------------------------------------------------- /features/ProductShowcase/shaders/fakeShadow/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 5 | 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /features/ProductShowcase/types/index.ts: -------------------------------------------------------------------------------- 1 | export type IconProps = { 2 | size?: number 3 | } -------------------------------------------------------------------------------- /features/RagingSea/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import { Bloom, EffectComposer } from "@react-three/postprocessing"; 6 | 7 | export default function Layout() { 8 | return ( 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /features/RagingSea/shaders/rainFragment.glsl: -------------------------------------------------------------------------------- 1 | void main() { 2 | float strenght = step(0.9, gl_PointCoord.x); 3 | strenght *= 0.75; 4 | 5 | gl_FragColor = vec4(vec3(0.85), strenght); 6 | } -------------------------------------------------------------------------------- /features/RagingSea/shaders/rainVertex.glsl: -------------------------------------------------------------------------------- 1 | attribute float aVelocity; 2 | 3 | uniform float uTime; 4 | uniform vec2 uResolution; 5 | 6 | void main() { 7 | vec3 newPosition = position; 8 | 9 | newPosition.y -= mod(aVelocity * uTime * 2., 1.); 10 | 11 | vec4 viewPosition = viewMatrix * vec4(newPosition, 1.); 12 | 13 | gl_Position = projectionMatrix * viewPosition; 14 | gl_PointSize = uResolution.y * 0.002; 15 | gl_PointSize *= 1. / -viewPosition.z; 16 | } -------------------------------------------------------------------------------- /features/RuinsScene/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { OrbitControls } from "@react-three/drei"; 2 | 3 | import RuinsScene from "./RuinScene"; 4 | 5 | export default function Experience() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/RuinsScene/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); 7 | } -------------------------------------------------------------------------------- /features/SceneTransition/shader/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); 7 | } -------------------------------------------------------------------------------- /features/SciFiCoridor/components/Effects.tsx: -------------------------------------------------------------------------------- 1 | import { Bloom, EffectComposer, SSAO } from "@react-three/postprocessing"; 2 | import { BlendFunction } from "postprocessing"; 3 | 4 | export default function Effects() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /features/SciFiCoridor/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { Environment, OrbitControls, Stars } from "@react-three/drei"; 2 | import { Model } from "./Model"; 3 | import Lights from "./Lights"; 4 | 5 | export default function Experience() { 6 | return ( 7 | <> 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /features/SciFiCoridor/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import { NoToneMapping } from "three"; 6 | 7 | export default function Layout() { 8 | return ( 9 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /features/ScrollGallery/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 9 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /features/ScrollGallery/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_DAMP_SPEED = 0.15; 2 | -------------------------------------------------------------------------------- /features/ScrollGallery2/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { Scroll, ScrollControls } from "@react-three/drei"; 2 | import Gallery from "./Gallery"; 3 | import TextGallery from "./TextGallery"; 4 | 5 | export default function Experience() { 6 | return ( 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /features/ScrollGallery2/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/ScrollGallery2/components/TextGallery.tsx: -------------------------------------------------------------------------------- 1 | const text = ["home", "to", "be"]; 2 | const textItems = [...text, ...text, ...text]; 3 | 4 | export default function TextGallery() { 5 | return textItems.map((item, idx) => ( 6 |

11 | {item} 12 |

13 | )); 14 | } 15 | -------------------------------------------------------------------------------- /features/ScrollTextGallery/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/ScrollTextGallery/shaders/rippleVertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); 7 | } -------------------------------------------------------------------------------- /features/ScrollTextGallery/shaders/textFragment.glsl: -------------------------------------------------------------------------------- 1 | uniform vec3 uColor; 2 | 3 | void main() { 4 | gl_FragColor = vec4(uColor, 1.); 5 | } -------------------------------------------------------------------------------- /features/SdfShapes/components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import Model from "./Model"; 2 | 3 | export default function Experience() { 4 | return ( 5 | <> 6 | 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /features/SdfShapes/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | 6 | export default function Layout() { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /features/SdfShapes/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 5 | 6 | vUv = uv; 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/components/Preview.tsx: -------------------------------------------------------------------------------- 1 | import SyntaxHighlighter from "react-syntax-highlighter"; 2 | import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; 3 | 4 | type Props = { 5 | shader: string; 6 | }; 7 | 8 | export default function Preview({ shader }: Props) { 9 | return ( 10 | 19 | {shader} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment1.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | gl_FragColor = vec4(vUv, 1., 1.); 5 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment10.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = mod(vUv.x * 10., 1.); 5 | 6 | strength = step(0.8, strength); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment11.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = step(0.8, mod(vUv.x * 10., 1.)); 5 | 6 | strength += step(0.8, mod(vUv.y * 10., 1.)); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } 10 | -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment12.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = step(0.8, mod(vUv.x * 10., 1.)); 5 | 6 | strength *= step(0.8, mod(vUv.y * 10., 1.)); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } 10 | -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment13.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = step(0.4, mod(vUv.x * 10., 1.)); 5 | 6 | strength *= step(0.8, mod(vUv.y * 10., 1.)); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } 10 | -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment14.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float barX = step(0.4, mod(vUv.x * 10., 1.)); 5 | 6 | barX *= step(0.8, mod(vUv.y * 10., 1.)); 7 | 8 | float barY = step(0.8, mod(vUv.x * 10., 1.)); 9 | 10 | barY *= step(0.4, mod(vUv.y * 10., 1.)); 11 | 12 | float strength = barX + barY; 13 | 14 | gl_FragColor = vec4(strength, strength, strength, 1.); 15 | } 16 | -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment15.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float barX = step(0.4, mod(vUv.x * 10., 1.)); 5 | 6 | barX *= step(0.8, mod(vUv.y * 10. + 0.2, 1.)); 7 | 8 | float barY = step(0.8, mod(vUv.x * 10. + 0.2, 1.)); 9 | 10 | barY *= step(0.4, mod(vUv.y * 10., 1.)); 11 | 12 | float strength = barX + barY; 13 | 14 | gl_FragColor = vec4(strength, strength, strength, 1.); 15 | } 16 | -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment16.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = abs(vUv.x - 0.5); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment17.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = min(abs(vUv.x - 0.5), abs(vUv.y - 0.5)); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment18.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment19.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = step(0.2, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5))); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment2.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | gl_FragColor = vec4(vUv, 0., 1.); 5 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment20.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float square1 = step(0.2, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5))); 5 | 6 | float square2 = 1. - step(0.25, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5))); 7 | 8 | float strength = square1 * square2; 9 | 10 | gl_FragColor = vec4(strength, strength, strength, 1.); 11 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment21.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = floor(vUv.x * 10.) / 10.; 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment22.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float x = floor(vUv.x * 10.) / 10.; 5 | float y = floor(vUv.y * 10.) / 10.; 6 | 7 | float strength = x * y; 8 | 9 | gl_FragColor = vec4(strength, strength, strength, 1.); 10 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment23.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | float random(vec2 st) { 4 | return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); 5 | } 6 | 7 | void main() { 8 | float strength = random(vUv); 9 | 10 | gl_FragColor = vec4(strength, strength, strength, 1.); 11 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment24.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | float random(vec2 st) { 4 | return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); 5 | } 6 | 7 | void main() { 8 | float strength = random(floor(vUv * 10.) / 10.); 9 | 10 | gl_FragColor = vec4(strength, strength, strength, 1.); 11 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment25.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | float random(vec2 st) { 4 | return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); 5 | } 6 | 7 | void main() { 8 | vec2 gridUv = vec2(floor(vUv.x * 10.) / 10., floor((vUv.y + vUv.x * 0.5) * 10.) / 10.); 9 | float strength = random(gridUv); 10 | 11 | gl_FragColor = vec4(strength, strength, strength, 1.); 12 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment26.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = length(vUv); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment27.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = distance(vUv, vec2(0.5)); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment28.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = 1. - distance(vUv, vec2(0.5)); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment29.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = 0.015 / distance(vUv, vec2(0.5)); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment3.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = vUv.x; 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment30.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vec2 lightUv = vec2(vUv.x * 0.1 + 0.45, vUv.y * 0.4 + 0.3); 5 | 6 | float strength = 0.015 / distance(lightUv, vec2(0.5)); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment31.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vec2 lightUvX = vec2(vUv.x * 0.1 + 0.45, vUv.y * 0.5 + 0.25); 5 | 6 | float lightX = 0.015 / distance(lightUvX, vec2(0.5)); 7 | 8 | vec2 lightUvY = vec2(vUv.x * 0.5 + 0.25, vUv.y * 0.1 + 0.45); 9 | 10 | float lightY = 0.015 / distance(lightUvY, vec2(0.5)); 11 | 12 | float strength = lightX * lightY; 13 | 14 | gl_FragColor = vec4(strength, strength, strength, 1.); 15 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment33.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = step(0.25, distance(vUv, vec2(0.5))); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment34.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = abs(distance(vUv, vec2(0.5)) - 0.25); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment35.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = step(0.01, abs(distance(vUv, vec2(0.5)) - 0.25)); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment36.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = 1. - step(0.01, abs(distance(vUv, vec2(0.5)) - 0.25)); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment37.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vec2 wavedUv = vec2(vUv.x, vUv.y + sin(vUv.x * 30.) * 0.1); 5 | 6 | float strength = 1. - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25)); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment38.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vec2 wavedUv = vec2(vUv.x + sin(vUv.y * 30.) * 0.1, vUv.y + sin(vUv.x * 30.) * 0.1); 5 | 6 | float strength = 1. - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25)); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment39.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vec2 wavedUv = vec2(vUv.x + sin(vUv.y * 100.) * 0.1, vUv.y + sin(vUv.x * 100.) * 0.1); 5 | 6 | float strength = 1. - step(0.01, abs(distance(wavedUv, vec2(0.5)) - 0.25)); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment4.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = vUv.y; 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment40.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = atan(vUv.x, vUv.y); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment41.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = atan(vUv.x - .5, vUv.y - .5); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment42.glsl: -------------------------------------------------------------------------------- 1 | #define PI 3.1415926535897932384626433832795 2 | 3 | varying vec2 vUv; 4 | 5 | void main() { 6 | float angle = atan(vUv.x - .5, vUv.y - .5); 7 | angle /= PI * 2.; 8 | angle += 0.5; 9 | float strength = angle; 10 | 11 | gl_FragColor = vec4(strength, strength, strength, 1.); 12 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment43.glsl: -------------------------------------------------------------------------------- 1 | #define PI 3.1415926535897932384626433832795 2 | 3 | varying vec2 vUv; 4 | 5 | void main() { 6 | float angle = atan(vUv.x - .5, vUv.y - .5); 7 | angle /= PI * 2.; 8 | angle += 0.5; 9 | angle *= 20.; 10 | angle = mod(angle, 1.); 11 | float strength = angle; 12 | 13 | gl_FragColor = vec4(strength, strength, strength, 1.); 14 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment44.glsl: -------------------------------------------------------------------------------- 1 | #define PI 3.1415926535897932384626433832795 2 | 3 | varying vec2 vUv; 4 | 5 | void main() { 6 | float angle = atan(vUv.x - .5, vUv.y - .5); 7 | angle /= PI * 2.; 8 | angle += 0.5; 9 | angle = sin(angle * 100.); 10 | 11 | float strength = angle; 12 | 13 | gl_FragColor = vec4(strength, strength, strength, 1.); 14 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment45.glsl: -------------------------------------------------------------------------------- 1 | #define PI 3.1415926535897932384626433832795 2 | 3 | varying vec2 vUv; 4 | 5 | void main() { 6 | float angle = atan(vUv.x - .5, vUv.y - .5); 7 | angle /= PI * 2.; 8 | angle += 0.5; 9 | float sinusoid = sin(angle * 100.); 10 | 11 | float radius = 0.25 + sinusoid * 0.02; 12 | float strength = 1. - step(0.01, abs(distance(vUv, vec2(0.5)) - radius)); 13 | 14 | gl_FragColor = vec4(strength, strength, strength, 1.); 15 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment5.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = 1. - vUv.y; 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment6.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = (vUv.y) * 10.; 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment7.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = mod(vUv.y * 10., 1.); 5 | 6 | gl_FragColor = vec4(strength, strength, strength, 1.); 7 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment8.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = mod(vUv.y * 10., 1.); 5 | 6 | strength = step(0.5, strength); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/fragment9.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | float strength = mod(vUv.y * 10., 1.); 5 | 6 | strength = step(0.8, strength); 7 | 8 | gl_FragColor = vec4(strength, strength, strength, 1.); 9 | } -------------------------------------------------------------------------------- /features/ShadersSelector/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1); 7 | } -------------------------------------------------------------------------------- /features/Shaman/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import CanvasWrapper from "@/components/CanvasWrapper"; 4 | import Experience from "./Experience"; 5 | import { Leva } from "leva"; 6 | 7 | export default function Layout() { 8 | return ( 9 | <> 10 | 16 | 17 | 18 |