diff --git a/public/index.html b/public/index.html index 42ae2d2..1bc8e7e 100644 --- a/public/index.html +++ b/public/index.html @@ -1,17 +1,16 @@ - - - - - - - - - - React App - + WebXR Particles + - - -
- - - - \ No newline at end of file + + diff --git a/src/App.tsx b/src/App.tsx index 080de2c..7de5764 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import React, { useMemo, useRef } from 'react' import { useFrame } from 'react-three-fiber' import { BufferGeometry, InterleavedBuffer, InterleavedBufferAttribute, Vector3 } from 'three' -const count = 50_000 +const count = 40_000 const stride = 10 const total = count * stride const dots = new Float32Array(total) @@ -141,17 +141,23 @@ function Dots() { export function App() { return ( - - - - - - - - - - - - + <> +
+

WebXR Particles

+

Hold trigger to pull particles

+
+ + + + + + + + + + + + + ) } diff --git a/src/styles.css b/src/styles.css index 1b30464..77dc418 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap'); + * { box-sizing: border-box; } @@ -9,8 +11,19 @@ body, height: 100%; margin: 0; padding: 0; + font-family: 'Inter', sans-serif; + font-weight: 900; +} + +#intro { + position: fixed; + bottom: 130px; + width: 100%; + z-index: 1; + color: #fff; + text-align: center; } -body { - /* background: aquamarine; */ +h1 { + font-size: 48px; }