vanilla example

apps/docs/package.json

@@ -15,9 +15,12 @@
     "@astrojs/starlight-tailwind": "^2.0.1",
     "@astrojs/svelte": "^4.0.3",
     "@astrojs/tailwind": "^5.0.2",
+    "@threejs-kit/materials": "workspace:^",
+    "@threejs-kit/instanced-sprite-mesh": "workspace:^",
     "astro": "^3.5.4",
     "sharp": "^0.32.6",
     "svelte": "^4.2.3",
-    "tailwindcss": "^3.3.5"
+    "tailwindcss": "^3.3.5",
+    "three": "^0.158.0"
   }
 }

apps/docs/src/content/docs/sprites/instanced-sprite-mesh.mdx

@@ -1,9 +1,7 @@
 ---
 title: InstancedSpriteMesh
-description: Parallax Occlusion material for three.js
+description: InstancedSpriteMesh
 ---
 
-import { Image } from "astro:assets";
-
 
 ### InstancedSpriteMesh

apps/playground/src/routes/+layout.svelte

@@ -1,22 +1,5 @@
-<script lang="ts">
-	import App from '$lib/components/App.svelte';
+<script>
+	export const ssr = false;
 </script>
 
-<div>
-	<App>
-		<slot />
-	</App>
-</div>
-
-<style>
-	:global(body) {
-		margin: 0;
-	}
-
-	div {
-		width: 100vw;
-		height: 100vh;
-		background: rgb(13, 19, 32);
-		background: linear-gradient(180deg, rgba(13, 19, 32, 1) 0%, rgba(8, 12, 21, 1) 100%);
-	}
-</style>
+<slot />

apps/playground/src/routes/glint/+page.svelte

@@ -1,5 +1,23 @@
-<script lang="ts">
+<script>
 	import GlintScene from '$lib/glint/GlintScene.svelte';
+	import App from '$lib/components/App.svelte';
 </script>
 
-<GlintScene />
+<div>
+	<App>
+		<GlintScene />
+	</App>
+</div>
+
+<style>
+	:global(body) {
+		margin: 0;
+	}
+
+	div {
+		width: 100vw;
+		height: 100vh;
+		background: rgb(13, 19, 32);
+		background: linear-gradient(180deg, rgba(13, 19, 32, 1) 0%, rgba(8, 12, 21, 1) 100%);
+	}
+</style>

apps/playground/src/routes/instanced-sprite/+page.svelte

@@ -1,5 +1,23 @@
 <script>
 	import Scene from './Scene.svelte';
+	import App from '$lib/components/App.svelte';
 </script>
 
-<Scene />
+<div>
+	<App>
+		<Scene />
+	</App>
+</div>
+
+<style>
+	:global(body) {
+		margin: 0;
+	}
+
+	div {
+		width: 100vw;
+		height: 100vh;
+		background: rgb(13, 19, 32);
+		background: linear-gradient(180deg, rgba(13, 19, 32, 1) 0%, rgba(8, 12, 21, 1) 100%);
+	}
+</style>

apps/playground/src/routes/instanced-sprite/vanilla/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { onMount } from 'svelte';
+	import { start } from './instancedSprite';
+
+	onMount(() => {
+		start();
+	});
+</script>