├── .DS_Store
├── .env.example
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
├── .DS_Store
├── SF-Pro-Display-Bold.otf
├── android-icon-144x144.png
├── android-icon-192x192.png
├── android-icon-36x36.png
├── android-icon-48x48.png
├── android-icon-72x72.png
├── android-icon-96x96.png
├── apple-icon-114x114.png
├── apple-icon-120x120.png
├── apple-icon-144x144.png
├── apple-icon-152x152.png
├── apple-icon-180x180.png
├── apple-icon-57x57.png
├── apple-icon-60x60.png
├── apple-icon-72x72.png
├── apple-icon-76x76.png
├── apple-icon-precomposed.png
├── apple-icon.png
├── audio
│ ├── .DS_Store
│ ├── 1.mp3
│ ├── 10.mp3
│ ├── 11.mp3
│ ├── 12.mp3
│ ├── 13.mp3
│ ├── 14.mp3
│ ├── 15.mp3
│ ├── 16.mp3
│ ├── 17.mp3
│ ├── 18.mp3
│ ├── 19.mp3
│ ├── 2.mp3
│ ├── 20.mp3
│ ├── 21.mp3
│ ├── 3.mp3
│ ├── 4.mp3
│ ├── 5.mp3
│ ├── 6.mp3
│ ├── 7.mp3
│ ├── 8.mp3
│ ├── 9.mp3
│ ├── arpC.mp3
│ ├── casette.mp3
│ ├── enter.mp3
│ ├── padC.mp3
│ └── padFAndArp.mp3
├── browserconfig.xml
├── diamond.glb
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── favicon.ico
├── index.html
├── kanji.svg
├── manifest.json
├── ms-icon-144x144.png
├── ms-icon-150x150.png
├── ms-icon-310x310.png
├── ms-icon-70x70.png
└── wordmark.svg
├── screenshot.png
├── screenshot2.png
├── screenshot3.png
├── src
├── .DS_Store
├── App.js
├── AudioController.js
├── Diamond.js
├── Env.js
├── GradientBackground.js
├── InputBar.js
├── Postproduction.js
├── Scene.js
├── index.js
├── shaders
│ ├── AdditiveBlendingShader.js
│ ├── GrainyShader.js
│ ├── Particles.js
│ ├── TrailsShader.js
│ └── VolumetricLightShader.js
├── store.js
└── styles.css
└── yarn.lock
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/.DS_Store
--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | REACT_APP_OPENAI_API_KEY="openai api key here"
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .env
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | The Element
7 |
8 |
9 | https://theelement.vercel.app
10 |
21 |
22 | 
23 | 
24 | 
25 | 
26 | 
27 | 
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | ## Screenshots
37 |
38 |
39 |
40 |
#ffffff The Element
32 |
33 |
34 | You need to enable JavaScript to run this app.
35 |
36 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/public/kanji.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
17 |
18 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "The Element",
3 | "short_name": "The Element",
4 | "theme_color": "#fc038c",
5 | "background_color": "#000000",
6 | "display": "browser",
7 | "orientation": "portrait",
8 | "scope": "/app/",
9 | "start_url": "",
10 | "icons": [
11 | {
12 | "src": "\/android-icon-36x36.png",
13 | "sizes": "36x36",
14 | "type": "image\/png",
15 | "density": "0.75"
16 | },
17 | {
18 | "src": "\/android-icon-48x48.png",
19 | "sizes": "48x48",
20 | "type": "image\/png",
21 | "density": "1.0"
22 | },
23 | {
24 | "src": "\/android-icon-72x72.png",
25 | "sizes": "72x72",
26 | "type": "image\/png",
27 | "density": "1.5"
28 | },
29 | {
30 | "src": "\/android-icon-96x96.png",
31 | "sizes": "96x96",
32 | "type": "image\/png",
33 | "density": "2.0"
34 | },
35 | {
36 | "src": "\/android-icon-144x144.png",
37 | "sizes": "144x144",
38 | "type": "image\/png",
39 | "density": "3.0"
40 | },
41 | {
42 | "src": "\/android-icon-192x192.png",
43 | "sizes": "192x192",
44 | "type": "image\/png",
45 | "density": "4.0"
46 | }
47 | ]
48 | }
--------------------------------------------------------------------------------
/public/ms-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/public/ms-icon-144x144.png
--------------------------------------------------------------------------------
/public/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/public/ms-icon-150x150.png
--------------------------------------------------------------------------------
/public/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/public/ms-icon-310x310.png
--------------------------------------------------------------------------------
/public/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/public/ms-icon-70x70.png
--------------------------------------------------------------------------------
/public/wordmark.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/screenshot.png
--------------------------------------------------------------------------------
/screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/screenshot2.png
--------------------------------------------------------------------------------
/screenshot3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/screenshot3.png
--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonzhep/theelement/c534b5c53815916072fb6c8d41acd2ad959ae9f2/src/.DS_Store
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import "./styles.css";
2 | import { Canvas } from "@react-three/fiber";
3 | import useStore from "./store";
4 | import { useSpring, animated } from "@react-spring/web";
5 | import { PulseLoader } from "react-spinners";
6 | import InputBar from "./InputBar";
7 | import AudioController from "./AudioController";
8 | import { Configuration, OpenAIApi } from "openai";
9 |
10 | import {
11 | Image,
12 | Text,
13 | Group,
14 | Center as CenterMantine,
15 | Container,
16 | ActionIcon,
17 | Stack,
18 | Modal,
19 | } from "@mantine/core";
20 | import { useState, useEffect, useRef } from "react";
21 | import { isMobile } from "react-device-detect";
22 | import { VscTwitter, VscQuestion } from "react-icons/vsc";
23 | import { BsFillArrowRightCircleFill, BsWordpress } from "react-icons/bs";
24 | import { FaDiscord } from "react-icons/fa";
25 | import { MdOutlineMail } from "react-icons/md";
26 | import Env from "./Env";
27 | import Scene from "./Scene";
28 | import Postproduction from "./Postproduction";
29 | import TypeIt from "typeit-react";
30 | import { Perf } from 'r3f-perf'
31 | import { Leva } from 'leva'
32 |
33 | import {
34 | EthereumClient,
35 | modalConnectors,
36 | walletConnectProvider,
37 | } from "@web3modal/ethereum";
38 |
39 |
40 |
41 | import { Web3Modal } from "@web3modal/react";
42 |
43 | import { configureChains, createClient, WagmiConfig } from "wagmi";
44 |
45 | import { arbitrum, mainnet, polygon } from "wagmi/chains";
46 |
47 | import { Web3Button } from "@web3modal/react";
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | const chains = [arbitrum, mainnet, polygon];
56 |
57 | // Wagmi client
58 | const { provider } = configureChains(chains, [
59 | walletConnectProvider({ projectId: "adc7318acda7c5926f7c5fe38010f1e1" }),
60 | ]);
61 | const wagmiClient = createClient({
62 | autoConnect: true,
63 | connectors: modalConnectors({
64 | projectId: "adc7318acda7c5926f7c5fe38010f1e1",
65 | version: "1", // or "2"
66 | appName: "web3Modal",
67 | chains,
68 | }),
69 | provider,
70 | });
71 |
72 | // Web3Modal Ethereum Client
73 | const ethereumClient = new EthereumClient(wagmiClient, chains);
74 |
75 |
76 |
77 |
78 | function App() {
79 |
80 |
81 |
82 |
83 |
84 |
85 | const configuration = new Configuration({
86 | apiKey: process.env.REACT_APP_OPENAI_API_KEY,
87 | });
88 | const openai = new OpenAIApi(configuration);
89 |
90 | const [colorOne, setColorOne] = useState("#000000");
91 | const [colorTwo, setColorTwo] = useState("#150050");
92 | const [colorThree, setColorThree] = useState("#3F0071");
93 | const [colorFour, setColorFour] = useState("#000000");
94 | const [colorFive, setColorFive] = useState("#000000");
95 |
96 |
97 | const [word, setWord] = useState("");
98 |
99 | const [finalPrompt, setFinalPrompt] = useState(
100 | "The following is a conversation with an extremely rude and pesimistic AI Philosopher. The philosopher is really rude in replies, says bit in every reply, gives japanese haiku's in kanji randomly, and asks deep questions about insecurities.\n\nHuman: Hello, who are you?\nAI: I am an AI created by OpenAI. Why are you here? "
101 | );
102 | const [firstClick, setFirstClick] = useState(0);
103 | const [aiOutput, setAiOutput] = useState();
104 | const inputStore = useStore((state) => state.inputStore);
105 | const [firstInput, setFirstInput] = useState(false);
106 | const [inputHeaderText, setInputHeaderText] = useState("");
107 | const [enterIncrement, setEnterIncrement] = useState(0);
108 | const [loading, setLoading] = useState(false);
109 | const [opened, setOpened] = useState(false);
110 | const [about, setAbout] = useState(false);
111 | const [modalSize, setModalSize] = useState("25%");
112 | const [modalFont, setModalFont] = useState(20);
113 | const [typeIts, setTypeIts] = useState([]);
114 |
115 | const generateResponse2 = async (inputt) => {
116 | setFirstClick(firstClick + 1);
117 | const combined = finalPrompt + "\nHuman:" + inputt + "\nAI:";
118 |
119 | const response = await openai.createCompletion({
120 | model: "text-davinci-003",
121 | prompt: combined,
122 | temperature: 0.9,
123 | max_tokens: 300,
124 | top_p: 1,
125 | frequency_penalty: 0.76,
126 | presence_penalty: 0.75,
127 | stop: [" Human:", " AI:"],
128 | });
129 | const response2 = await openai.createCompletion({
130 | model: "text-davinci-003",
131 | prompt:
132 | "Five different hex value colors that are a color palette for " +
133 | inputt +
134 | " , and then on a new line describe that sentiment as either optimistic or pessimistic: \n\n",
135 | temperature: 0,
136 | max_tokens: 64,
137 | top_p: 1.0,
138 | frequency_penalty: 0.0,
139 | presence_penalty: 0.0,
140 | stop: [";"],
141 | });
142 |
143 | setAiOutput(response.data.choices[0].text);
144 | api4.start({
145 | delay: 200,
146 |
147 | from: {
148 | opacity: 1,
149 | },
150 | to: {
151 | opacity: 0,
152 | },
153 | config: {
154 | duration: 1500,
155 | },
156 | onResolve: () => {
157 | setLoading(false);
158 | },
159 | });
160 |
161 | api3.start({
162 | delay: 1000,
163 |
164 | from: {
165 | opacity: 0,
166 | },
167 | to: {
168 | opacity: 1,
169 | },
170 | config: {
171 | duration: 1000,
172 | },
173 | });
174 | let split = response2.data.choices[0].text
175 | .split(",")
176 | .map((color) => color.split("#")[1]);
177 | console.log(response2.data.choices[0].text);
178 |
179 | setColorOne("#" + split[0].slice(0, 6));
180 | setColorTwo("#" + split[1].slice(0, 6));
181 | setColorThree("#" + split[2].slice(0, 6));
182 | setColorFour("#" + split[3].slice(0, 6));
183 | setColorFive("#" + split[4].slice(0, 6));
184 | if (
185 | split[4].trim().includes("Optimistic") ||
186 | split[4].trim().includes("optimistic")
187 | ) {
188 | setWord("optimistic");
189 | }
190 | if (
191 | split[4].trim().includes("Pessimistic") ||
192 | split[4].trim().includes("pessimistic")
193 | ) {
194 | setWord("pessimistic");
195 | }
196 | const appended = combined + response.data.choices[0].text;
197 | setFinalPrompt(appended);
198 | };
199 |
200 | useEffect(() => {
201 | if (aiOutput === undefined) return;
202 | const newTypeIt = (
203 | {
207 | document.querySelector(".ti-cursor").style.display = "none";
208 | },
209 | speed: 60,
210 | }}
211 | >
212 | {aiOutput}
213 |
214 | );
215 |
216 | setTypeIts([...typeIts, newTypeIt]);
217 | }, [aiOutput]);
218 |
219 | useEffect(() => {
220 | setEnterIncrement(enterIncrement + 1);
221 | if (inputStore.length > 0) {
222 | setLoading(true);
223 |
224 | api.start({
225 | delay: 100,
226 |
227 | from: {
228 | opacity: 1,
229 | },
230 | to: {
231 | opacity: 0,
232 | },
233 | config: {
234 | duration: 2000,
235 | },
236 | onResolve: () => {
237 | setFirstInput(true);
238 | },
239 | });
240 | api2.start({
241 | delay: 100,
242 |
243 | from: {
244 | opacity: 1,
245 | },
246 | to: {
247 | opacity: 0,
248 | },
249 | config: {
250 | duration: 2000,
251 | },
252 | onResolve: () => {
253 | setInputHeaderText(inputStore);
254 | },
255 | });
256 | api2.start({
257 | delay: 2000,
258 |
259 | from: {
260 | opacity: 0,
261 | },
262 | to: {
263 | opacity: 1,
264 | },
265 | config: {
266 | duration: 2000,
267 | },
268 | });
269 | api3.start({
270 | delay: 0,
271 |
272 | from: {
273 | opacity: 1,
274 | },
275 | to: {
276 | opacity: 0,
277 | },
278 | config: {
279 | duration: 1000,
280 | },
281 | });
282 | api4.start({
283 | delay: 1500,
284 |
285 | from: {
286 | opacity: 0,
287 | },
288 | to: {
289 | opacity: 1,
290 | },
291 | config: {
292 | duration: 1500,
293 | },
294 | });
295 |
296 | generateResponse2(inputStore);
297 | }
298 | }, [inputStore]);
299 |
300 | const [springs, api] = useSpring(() => ({
301 | from: { opacity: 0 },
302 | }));
303 | const [springs2, api2] = useSpring(() => ({
304 | from: { opacity: 0 },
305 | }));
306 | const [springs3, api3] = useSpring(() => ({
307 | from: { opacity: 1 },
308 | }));
309 | const [springs4, api4] = useSpring(() => ({
310 | from: { opacity: 1 },
311 | }));
312 | const [springs5, api5] = useSpring(() => ({
313 | from: { opacity: 0 },
314 | }));
315 |
316 | useEffect(() => {
317 | api.start({
318 | delay: 1000,
319 |
320 | from: {
321 | opacity: 0,
322 | },
323 | to: {
324 | opacity: 1,
325 | },
326 | config: {
327 | duration: 7000,
328 | },
329 | });
330 | api5.start({
331 | delay: 1000,
332 |
333 | from: {
334 | opacity: 0,
335 | },
336 | to: {
337 | opacity: 1,
338 | },
339 | config: {
340 | duration: 3000,
341 | },
342 | });
343 | }, []);
344 |
345 | useEffect(() => {
346 | if (isMobile) {
347 | setOpened(true);
348 | setModalSize("100%");
349 | setModalFont(18);
350 | }
351 | }, [isMobile]);
352 |
353 | return (
354 | <>
355 | {/* Wordmark and Question Mark */}
356 | {/*
377 |
378 |
379 | setAbout(true)}
381 | className="questionIcon"
382 | size={25}
383 | style={{ fill: "black" }}
384 | />
385 |
386 |
387 |
400 |
401 |
402 |
403 | {firstInput ? (
404 |
405 |
406 | {inputHeaderText}
407 |
408 |
409 | ) : (
410 |
411 | {
415 | document.querySelector(".ti-cursor").style.display =
416 | "none";
417 | },
418 | }}
419 | >
420 | Hello, why are you here?
421 |
422 |
423 | )}
424 |
425 | {loading ? (
426 |
427 |
434 | ) : (
435 |
436 | {typeIts.map((typeIt, index) => {
437 | if (index === typeIts.length - 1) {
438 | return {typeIt}
;
439 | }
440 | })}
441 |
442 | )}
443 |
444 |
445 |
446 |
450 |
452 |
453 | {/* About */}
454 |
455 |
456 |
457 |
458 |
459 |
460 | setAbout(false)}
474 | transition="fade"
475 | transitionDuration={2000}
476 | transitionTimingFunction="ease"
477 | exitTransitionDuration={2000}
478 | >
479 |
480 |
481 |
484 | Let The Alchemist take you on a reflective journey
485 |
486 | {"\n"}
487 |
488 |
489 | Created by Charm
490 |
491 |
492 |
493 |
494 |
496 | window.open("https://twitter.com/EmpireofCHARM", "_blank")
497 | }
498 | >
499 |
501 |
503 | window.open(
504 | "https://discord.gg/KfhCscmcF7",
505 | "_blank"
506 | )
507 | }
508 | >
509 |
511 |
512 |
513 |
516 |
517 |
518 |
519 | {/* Modal to display if user is on mobile */}
520 | {/* {isMobile && (
521 | setOpened(false)}
529 | transition="fade"
530 | transitionDuration={600}
531 | transitionTimingFunction="ease"
532 | exitTransitionDuration={600}
533 | >
534 |
535 |
536 |
537 | Visit The Element on desktop for audio.
538 |
539 | setOpened(false)}
541 | style={{ fill: "#ffffff" }}
542 | size={30}
543 | />
544 |
545 |
546 |
547 | )} */}
548 |
549 | {/* React Three Fiber Canvas */}
550 |
560 |
561 |
562 |
572 |
576 |
577 | );
578 | }
579 |
580 | export default App;
581 |
--------------------------------------------------------------------------------
/src/AudioController.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import ReactHowler from "react-howler";
3 | import gsap from "gsap";
4 |
5 | export default function AudioController(props) {
6 | useEffect(() => {
7 | if (props.firstInteraction === 1) {
8 | setPadCPlaying(true);
9 | setPadFPlaying(true);
10 | setCasettePlaying(true);
11 | setArpCPlaying(true);
12 | gsap.to(padCVolume, {
13 | delay: 6,
14 | volume: 0.5,
15 | duration: 4,
16 | onUpdate: () => setPadCVolume({ volume: padCVolume.volume }),
17 | });
18 | gsap.to(casetteVolume, {
19 | delay: 4,
20 | volume: 0.3,
21 | duration: 3,
22 | onUpdate: () => setCasetteVolume({ volume: casetteVolume.volume }),
23 | });
24 | }
25 | }, [props.firstInteraction]);
26 |
27 | useEffect(() => {
28 | if (props.word === "optimistic") {
29 | gsap.to(padCVolume, {
30 | volume: 0.5,
31 | duration: 3,
32 | onUpdate: () => setPadCVolume({ volume: padCVolume.volume }),
33 | });
34 | gsap.to(padFVolume, {
35 | volume: 0,
36 | duration: 5,
37 | onUpdate: () => setPadFVolume({ volume: padFVolume.volume }),
38 | });
39 | gsap.to(arpCVolume, {
40 | volume: 0.5,
41 | duration: 5,
42 | onUpdate: () => setArpCVolume({ volume: arpCVolume.volume }),
43 | });
44 | }
45 |
46 | if (props.word === "pessimistic") {
47 | gsap.to(padCVolume, {
48 | volume: 0,
49 | duration: 5,
50 | onUpdate: () => setPadCVolume({ volume: padCVolume.volume }),
51 | });
52 | gsap.to(padFVolume, {
53 | volume: 0.5,
54 | duration: 5,
55 | onUpdate: () => setPadFVolume({ volume: padFVolume.volume }),
56 | });
57 | gsap.to(arpCVolume, {
58 | volume: 0,
59 | duration: 5,
60 | onUpdate: () => setArpCVolume({ volume: arpCVolume.volume }),
61 | });
62 | }
63 | }, [props.word]);
64 |
65 | const [padCVolume, setPadCVolume] = useState({ volume: 0 });
66 | const [padFVolume, setPadFVolume] = useState({ volume: 0 });
67 | const [casetteVolume, setCasetteVolume] = useState({ volume: 0 });
68 | const [arpCVolume, setArpCVolume] = useState({ volume: 0.5 });
69 | const [padCPlaying, setPadCPlaying] = useState(false);
70 | const [padFPlaying, setPadFPlaying] = useState(false);
71 | const [casettePlaying, setCasettePlaying] = useState(false);
72 | const [arpCPlaying, setArpCPlaying] = useState(false);
73 |
74 | return (
75 | <>
76 | {props.firstInteraction !== 0 && (
77 | <>
78 |
58 |
59 |
61 | {config.meshPhysicalMaterial ?
63 |
64 |
65 |
77 |
78 |
79 |
80 |
81 | );
82 | }
83 |
84 | useGLTF.preload("/diamond.glb");
85 |
--------------------------------------------------------------------------------
/src/Env.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useFrame } from "@react-three/fiber";
3 | import * as THREE from "three";
4 | import { Environment } from "@react-three/drei";
5 |
6 | export default function Env(props) {
7 | let vec = new THREE.Vector3();
8 | let enterIncrement = 0;
9 | useFrame((state) => {
10 | enterIncrement = props.enterIncrement % 13;
11 |
12 | if (enterIncrement === 2) {
13 | state.camera.position.lerp(vec.set(5, 0, 0), 0.01);
14 | state.camera.lookAt(0, 0, 0);
15 | }
16 | if (enterIncrement === 3) {
17 | state.camera.position.lerp(vec.set(0, 0, 2.5), 0.01);
18 | state.camera.lookAt(0, 0, 0);
19 | }
20 | if (enterIncrement === 4) {
21 | state.camera.position.lerp(vec.set(-5, 0, 2.5), 0.01);
22 | state.camera.lookAt(0, 0, 0);
23 | }
24 | if (enterIncrement === 5) {
25 | state.camera.position.lerp(
26 | vec.set(4, 0, 3),
27 | 0.01
28 | );
29 | state.camera.lookAt(0, 0, 0);
30 | }
31 | if (enterIncrement === 6) {
32 | state.camera.position.lerp(
33 | vec.set(0, 4, 8),
34 | 0.01
35 | );
36 | state.camera.lookAt(0, 0, 0);
37 | }
38 | if (enterIncrement === 7) {
39 | state.camera.position.lerp(
40 | vec.set(0, 1, 6),
41 | 0.01
42 | );
43 | state.camera.lookAt(0, 0, 0);
44 | }
45 | if (enterIncrement === 8) {
46 | state.camera.position.lerp(
47 | vec.set(0, -0.902270925328769, 7.929117645891684),
48 | 0.01
49 | );
50 | state.camera.lookAt(0, 0, 0);
51 | }
52 | if (enterIncrement === 9) {
53 | state.camera.position.lerp(
54 | vec.set(9, 1.52257694562051415, 1.19680788578111),
55 | 0.01
56 | );
57 | state.camera.lookAt(0, 0, 0);
58 | }
59 | if (enterIncrement === 10) {
60 | state.camera.position.lerp(
61 | vec.set(10.830953118825398, 0.6206651180632762, -0.40251601096885026),
62 | 0.01
63 | );
64 | state.camera.lookAt(0, 0, 0);
65 | }
66 | if (enterIncrement === 11) {
67 | state.camera.position.lerp(
68 | vec.set(-3, 0, 3),
69 | 0.01
70 | );
71 | state.camera.lookAt(0, 0, 0);
72 | }
73 | if (enterIncrement === 12) {
74 | state.camera.position.lerp(
75 | vec.set(0, 0, 500),
76 | 0.001
77 | );
78 | state.camera.lookAt(0, 0, 0);
79 | }
80 | });
81 |
82 | return
340 |
345 |
346 |
355 |
356 | );
357 | }
358 |
--------------------------------------------------------------------------------
/src/InputBar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useState, useEffect, useRef } from "react";
3 | import { Howl } from "howler";
4 | import { Center, ActionIcon } from "@mantine/core";
5 | import useStore from "./store";
6 | import { useSpring } from "@react-spring/web";
7 | import gsap from "gsap";
8 | import { isMobile } from "react-device-detect";
9 | import { VscArrowSmallRight } from "react-icons/vsc";
10 | import AudioController from "./AudioController";
11 |
12 | export default function InputBar(props) {
13 | const changeInput = useStore((state) => state.changeInput);
14 |
15 | const [playing, setPlaying] = useState(false);
16 | const [currentNote, setCurrentNote] = useState(0);
17 | const [entered, setEntered] = useState(false);
18 | const keySound = new Howl({
19 | src: [`/audio/${currentNote}.mp3`],
20 | volume: 0.9,
21 | });
22 | const enterSound = new Howl({
23 | src: [`/audio/enter.mp3`],
24 | volume: 0.9,
25 | });
26 |
27 |
28 |
29 |
30 | const handleKeyPress = (event) => {
31 |
32 | setFirstInteraction(firstInteraction + 1);
33 | if (isMobile) {
34 | if (event.key === "Enter")
35 | {
36 | setEntered(true);
37 |
38 |
39 |
40 |
41 | }
42 | } else {
43 | if (event.key === " ") {
44 | setPlaying(true);
45 | } else if (playing) {
46 | keySound.play();
47 | setCurrentNote((currentNote + 1) % 22);
48 | setPlaying(false);
49 | }
50 | if (event.key === "Enter") {
51 | enterSound.play();
52 | setEntered(true);
53 | }
54 | }
55 | };
56 | const inputElement = document.querySelector(".theInput");
57 |
58 | useEffect(() => {
59 | if (entered) {
60 | gsap.to(inputElement, {
61 | delay: 0.0,
62 | opacity: 0,
63 | duration: 2,
64 | onComplete: () => {
65 | setInputValue("");
66 | },
67 | });
68 | gsap.to(inputElement, {
69 | delay: 2.0,
70 | opacity: 1,
71 | duration: 2,
72 | });
73 | changeInput(inputValue);
74 |
75 | api.start({
76 | from: {
77 | opacity: 1,
78 | },
79 | to: {
80 | opacity: 0,
81 | },
82 | duration: 3000,
83 | });
84 | setEntered(false);
85 | }
86 | }, [entered]);
87 |
88 | const [inputValue, setInputValue] = useState("");
89 |
90 | const [springs, api] = useSpring(() => ({
91 | from: { opacity: 1 },
92 | }));
93 |
94 | const [firstInteraction, setFirstInteraction] = useState(0);
95 |
96 | return (
97 | <>
98 |
99 | {isMobile ? (
100 | <>
101 |
113 |
114 |
setInputValue(e.target.value)}
117 | spellCheck="false"
118 | autoFocus
119 | type="text"
120 | className="theInput"
121 | style={{
122 | caretColor: "white",
123 | fontSize: 20,
124 | textAlign: "left",
125 | width: "100%",
126 |
127 | height: "25px",
128 |
129 | }}
130 |
131 | onKeyDown={handleKeyPress}
132 | />
133 |
setEntered(true)}>
134 |
136 |
137 |
165 | {!isMobile && (
166 |
30 |
33 |
40 | {/*
46 |
47 |
65 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/Scene.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useRef } from "react";
3 | import { AccumulativeShadows, RandomizedLight } from "@react-three/drei";
4 | import GradientBackground from "./GradientBackground";
5 | import Diamond from "./Diamond";
6 |
7 | export default function Scene(props) {
8 | const randomLight = useRef();
9 | return (
10 | <>
11 |
19 |
20 |
28 |
29 |
30 |
39 |
40 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./styles.css";
4 | import App from "./App";
5 | import { MantineProvider } from "@mantine/core";
6 |
7 | const root = ReactDOM.createRoot(document.getElementById("root"));
8 | root.render(
9 |
10 |
31 |
33 |
34 | );
35 |
--------------------------------------------------------------------------------
/src/shaders/AdditiveBlendingShader.js:
--------------------------------------------------------------------------------
1 | export const AdditiveBlendingShader = {
2 | uniforms: {
3 | tDiffuse: { value: null },
4 | tAdd: { value: null },
5 | },
6 |
7 | vertexShader: `
8 | varying vec2 vUv;
9 | void main() {
10 | vUv = uv;
11 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
12 | }`,
13 |
14 | fragmentShader: `
15 | uniform sampler2D tDiffuse;
16 | uniform sampler2D tAdd;
17 | varying vec2 vUv;
18 | void main() {
19 | vec4 color = texture2D( tDiffuse, vUv );
20 | vec4 add = texture2D( tAdd, vUv );
21 | gl_FragColor = color + add;
22 | }`,
23 | };
24 |
--------------------------------------------------------------------------------
/src/shaders/GrainyShader.js:
--------------------------------------------------------------------------------
1 | export const GrainyShader = {
2 | uniforms: {
3 | tDiffuse: { value: null },
4 | radius: { value: 1.0 },
5 | time: { value: 0.0 },
6 | },
7 | vertexShader: `
8 | varying vec2 vUv;
9 | void main() {
10 | vUv = uv;
11 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
12 | }`,
13 | fragmentShader: `
14 | uniform sampler2D tDiffuse;
15 | uniform float radius;
16 | uniform float time;
17 | varying vec2 vUv;
18 | void main() {
19 | vec2 center = vec2(0.5, 0.5);
20 | float dist = distance(vUv, center);
21 | float distort = smoothstep(radius - 0.1, radius, dist + sin(time) * 0.1);
22 | vec4 color = texture2D(tDiffuse, vUv);
23 | if (distort > 0.0) {
24 | color = mix(color, vec4(1.0), distort);
25 | float angle = atan(vUv.y - center.y, vUv.x - center.x);
26 | float offset = distort * 0.5;
27 | color = texture2D(tDiffuse, vec2(vUv.x + cos(angle) * offset, vUv.y + sin(angle) * offset));
28 | }
29 | gl_FragColor = color;
30 | }
31 |
32 |
33 |
34 | // uniform sampler2D tDiffuse;
35 | // uniform float time;
36 | // uniform vec2 uResolution;
37 | // varying vec2 vUv;
38 |
39 | // void main() {
40 | // vec2 uv = vUv;
41 | // uv.y += sin(uv.x * 10.0 + time * 1.0) * 0.001;
42 | // uv.y += sin(uv.x * 15.0 + time * 1.5) * 0.001;
43 | // uv.y += sin(uv.x * 25.0 + time * 2.0) * 0.001;
44 | // uv.y += sin(uv.x * 50.0 + time * 2.5) * 0.001;
45 | // gl_FragColor = texture2D(tDiffuse, uv);
46 | // }
47 | `,
48 | };
49 |
--------------------------------------------------------------------------------
/src/shaders/Particles.js:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import * as THREE from "three";
3 | import { useState } from "react";
4 | import { useFrame } from "@react-three/fiber";
5 |
6 | function SandParticle() {
7 | const meshRef = useRef();
8 |
9 | return (
10 |
11 |
14 | );
15 | }
16 |
17 | export default function Particles() {
18 | const [windForce] = useState(new THREE.Vector3(1, 0, 0));
19 | const [particles, setParticles] = useState([]);
20 |
21 | useFrame(() => {
22 | windForce.x = Math.sin(Date.now() * 0.001) * 10;
23 | setParticles(
24 | particles.map((particle) => ({
25 | ...particle,
26 | position: particle.position.add(windForce.clone().multiplyScalar(0.01)),
27 | }))
28 | );
29 | });
30 |
31 | // Generate the particles
32 | for (let i = 0; i < 100; i++) {
33 | particles.push({
34 | position: new THREE.Vector3(
35 | Math.random() * 100 - 50,
36 | Math.random() * 100 - 50,
37 | Math.random() * 100 - 50
38 | ),
39 | });
40 | }
41 |
42 | return (
43 |
44 | {particles.map((particle, index) => (
45 |
46 |
49 | ))}
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/shaders/TrailsShader.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 |
3 | export const TrailsShader = {
4 | // uniforms: {
5 | // tDiffuse: { value: null },
6 | // radius: { value: 0.5 },
7 | // time: { value: 0.0 },
8 | // },
9 | // vertexShader: `
10 | // varying vec2 vUv;
11 | // void main() {
12 | // vUv = uv;
13 | // gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
14 | // }`,
15 | // fragmentShader: `
16 | // uniform sampler2D tDiffuse;
17 | // uniform float radius;
18 | // uniform float time;
19 | // varying vec2 vUv;
20 | // void main() {
21 | // vec2 center = vec2(0.5, 0.5);
22 | // float dist = distance(vUv, center);
23 | // float distort = smoothstep(radius - 0.1, radius, dist + sin(time) * 0.1);
24 | // vec4 color = texture2D(tDiffuse, vUv);
25 | // if (distort > 0.0) {
26 | // color = mix(color, vec4(1.0), distort);
27 | // float angle = atan(vUv.y - center.y, vUv.x - center.x);
28 | // float offset = distort * 0.5;
29 | // color = texture2D(tDiffuse, vec2(vUv.x + cos(angle) * offset, vUv.y + sin(angle) * offset));
30 | // }
31 | // gl_FragColor = color;
32 | // }`,
33 |
34 | uniforms: {
35 | tDiffuse: { value: null },
36 | time: { value: 0.0 },
37 | affect: { value: 1.0 },
38 | },
39 | vertexShader: `
40 | varying vec2 vUv;
41 | void main() {
42 | vUv = uv;
43 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
44 | }`,
45 | fragmentShader: `
46 | uniform sampler2D tDiffuse;
47 | uniform float time;
48 | uniform float affect;
49 | varying vec2 vUv;
50 | void main() {
51 | vec4 color = texture2D(tDiffuse, vUv);
52 | vec2 center = vec2(0.5, 0.5);
53 | float dist = distance(vUv, center);
54 | float angle = atan(vUv.y - center.y , vUv.x - center.x );
55 | // float offset = sin(time * 0.5 + dist * 10.0 + angle * 1.0) * 0.0075 * affect ;
56 | float offset = sin(time * 0.5 + dist * -20.0 + angle * 1.0) * 0.15 * affect ;
57 |
58 | color = mix(color, texture2D(tDiffuse, vUv + vec2(offset)), 0.1 );
59 | gl_FragColor = color;
60 | }
61 | `,
62 | };
63 |
--------------------------------------------------------------------------------
/src/shaders/VolumetricLightShader.js:
--------------------------------------------------------------------------------
1 | import * as THREE from "three";
2 |
3 | export const VolumetricLightShader = {
4 | uniforms: {
5 | tDiffuse: { value: null },
6 | lightPosition: { value: new THREE.Vector2(0.5, 0.75) },
7 | // lightPosition: { value: new THREE.Vector2(-10, 20) },
8 |
9 | exposure: { value: 0.05 },
10 | decay: { value: 0.1 },
11 | density: { value: 0.5 },
12 | weight: { value: 0.4 },
13 | samples: { value: 5 },
14 | },
15 |
16 | vertexShader: `
17 | varying vec2 vUv;
18 | void main() {
19 | vUv = uv;
20 | gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
21 | }`,
22 |
23 | fragmentShader: `
24 | varying vec2 vUv;
25 | uniform sampler2D tDiffuse;
26 | uniform vec2 lightPosition;
27 | uniform float exposure;
28 | uniform float decay;
29 | uniform float density;
30 | uniform float weight;
31 | uniform int samples;
32 | const int MAX_SAMPLES = 100;
33 | void main()
34 | {
35 | vec2 texCoord = vUv;
36 | vec2 deltaTextCoord = texCoord - lightPosition;
37 | deltaTextCoord *= 1.0 / float(samples) * density;
38 | vec4 color = texture2D(tDiffuse, texCoord);
39 | float illuminationDecay = 1.0;
40 | for(int i=0; i < MAX_SAMPLES; i++) {
41 | if(i == samples) break;
42 | texCoord -= deltaTextCoord;
43 | vec4 tex = texture2D(tDiffuse, texCoord);
44 | tex *= illuminationDecay * weight;
45 | color += tex;
46 | illuminationDecay *= decay;
47 | }
48 | gl_FragColor = color * exposure;
49 | }`,
50 | };
51 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import create from "zustand";
2 |
3 | const useStore = create((set) => ({
4 | step: 0,
5 | incrementStep: () => set((state) => ({ step: state.step + 1 })),
6 | inputStore: "",
7 | changeInput: (input) => set(() => ({ inputStore: input })),
8 | }));
9 |
10 | export default useStore;
11 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://rsms.me/inter/inter.css');
2 |
3 | * {
4 | box-sizing: border-box;
5 | }
6 |
7 | html,
8 | body,
9 | #root {
10 | width: 100%;
11 | height: 100%;
12 | margin: 0;
13 | padding: 0;
14 | overflow: hidden;
15 | }
16 |
17 | body {
18 | overscroll-behavior-y: none;
19 | font-family: 'Inter var', sans-serif;
20 | text-rendering: optimizeLegibility;
21 | -webkit-font-smoothing: antialiased;
22 | color: black;
23 | background: black;
24 | background-color: black;
25 |
26 | }
27 |
28 | a {
29 | pointer-events: all;
30 | color: black;
31 | text-decoration: none;
32 | }
33 |
34 | svg {
35 | fill: black;
36 | }
37 |
38 | @keyframes fade-in {
39 | from {
40 | opacity: 0;
41 | }
42 | to {
43 | opacity: 1;
44 | }
45 | }
46 |
47 | canvas {
48 | opacity: 0;
49 | touch-action: none;
50 | animation: fade-in 5s ease 0.5s forwards;
51 | }
52 |
53 | input {
54 | font-family: 'Inter';
55 | width: 100px;
56 | border: none;
57 | background-image: none;
58 | background-color: transparent;
59 | color: transparent;
60 | caret-color: #ffffffeb;
61 | -webkit-box-shadow: none;
62 | -moz-box-shadow: none;
63 | box-shadow: none;
64 | font-weight: 400;
65 |
66 |
67 |
68 | }
69 |
70 | /* input:focus {
71 | outline: none;
72 | box-shadow: none !important;
73 | } */
74 |
75 | @font-face {
76 | font-family: "customFont";
77 | src: url("/public/SF-Pro-Display-Bold.otf");
78 | }
79 |
80 | .theHeader {
81 | font-family: "customFont";
82 | font-size:60px;
83 | text-align: "center";
84 |
85 | color: #ffffffeb;
86 | background-color: rgba(0, 0, 0, 0.741);
87 |
88 |
89 | }
90 |
91 | .theHeaderInput {
92 | font-family: "customFont";
93 | font-size:55px;
94 | text-align: "center";
95 | line-height: 1.2;
96 | color: #ffffffeb;
97 | background-color: rgba(0, 0, 0, 0.741);
98 |
99 | ;
100 | }
101 | .theInput {
102 | font-family: "customFont";
103 | font-size:45px;
104 | color: #ffffffeb;
105 |
106 | background-color: rgba(0, 0, 0, 0.475);
107 | border: none;
108 | border-radius: 3px;
109 | box-shadow: rgba(72, 0, 255, 0.799) 0px 0px 1.5em, rgba(255, 0, 0, 0.799) 0px 0.5em 1.5em;
110 | transition: box-shadow 1.5s ease-in-out;
111 | height: 2px;
112 | }
113 |
114 | .theInput:focus {
115 | outline: none;
116 |
117 | }
118 |
119 | .theResponse {
120 | font-family: "customFont";
121 | font-size:28px;
122 | text-align: "center";
123 | color: #ffffffeb;
124 | background-color: rgba(0, 0, 0, 0.741);
125 |
126 | }
127 |
128 |
129 | @media only screen and (max-width: 600px) {
130 | .theInput {
131 | font-family: "customFont";
132 | font-size:45px;
133 | color: #ffffffeb;
134 | background-color: rgba(0, 0, 0, 0);
135 | border: none;
136 |
137 | box-shadow: none;
138 |
139 |
140 | }
141 |
142 | .theHeader {
143 | font-family: "customFont";
144 | font-size:30px;
145 | text-align: "center";
146 | color: #ffffffeb;
147 | background-color: rgba(0, 0, 0, 0.741);
148 | }
149 |
150 | .theHeaderInput {
151 | font-family: "customFont";
152 | font-size:25px;
153 | text-align: "center";
154 | line-height: 1.2;
155 | opacity: 0.5;
156 | color: #ffffffeb;
157 | background-color: rgba(0, 0, 0, 0.741);
158 | ;
159 | }
160 | .theResponse {
161 | font-family: "customFont";
162 | font-size:20px;
163 | text-align: "center";
164 | color: #ffffffeb;
165 | background-color: rgba(0, 0, 0, 0.741);
166 | }
167 |
168 | }
169 |
170 | .questionIcon {
171 | opacity: 0;
172 | animation: fadeInIcon 7s ease-in-out forwards;
173 | transition: all 0.2s ease-in-out;
174 |
175 | }
176 | .questionIcon:hover{
177 | transform: scale(1.1);
178 | }
179 |
180 | @keyframes fadeInIcon {
181 | 50% {
182 | opacity: 0;
183 | }
184 | 100% {
185 | opacity: 0.5;
186 | }
187 | }
188 |
189 | .wordmark {
190 | opacity: 0.6;
191 |
192 |
193 | }
194 |
195 | .wordmark:hover{
196 | cursor: pointer;
197 | }
198 |
199 |
200 |
201 | .mobileModal{
202 | font-family: "customFont";
203 | font-size:22px;
204 | color: #ffffff;
205 | text-align: center;
206 | }
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
--------------------------------------------------------------------------------
39 | 
40 | 
3 |
4 |
5 |
6 |