stars landing page demo

docs/package.json

@@ -12,11 +12,11 @@
   "dependencies": {
     "@astrojs/check": "^0.3.1",
     "@astrojs/mdx": "^2.0.0",
-    "@astrojs/starlight": "^0.14.0",
+    "@astrojs/starlight": "^0.15.0",
     "@astrojs/starlight-tailwind": "^2.0.1",
     "@astrojs/svelte": "^5.0.0",
     "@astrojs/tailwind": "^5.0.3",
-    "astro": "^4.0.1",
+    "astro": "^4.0.3",
     "astro-live-code": "^0.0.1",
     "sharp": "^0.32.5",
     "svelte": "^4.2.5",

docs/src/components/Hero/Hero.astro

@@ -0,0 +1,79 @@
+---
+import Stars from './Stars.svelte'
+---
+
+<div class="app-container">
+  <Stars client:only="svelte" />
+</div>
+
+<style>
+  .app-container {
+    z-index: -10000;
+    position: absolute;
+    display: flex;
+    width: 100vw;
+    min-height: calc(100vh - var(--sl-nav-height));
+    top: var(--sl-nav-height);
+    left: 0px;
+    right: 0px;
+    overflow: hidden;
+  }
+</style>
+
+<style is:global>
+  /* apply dark mode styles for content because background is black */
+  main {
+    --sl-color-white: #fff;
+    --sl-color-gray-1: #eceef2;
+    --sl-color-gray-2: #c0c2c7;
+    --sl-color-gray-3: #888b96;
+    --sl-color-gray-4: #4b5563;
+    --sl-color-gray-5: #353841;
+    --sl-color-gray-6: #24272f;
+    --sl-color-black: #17181c;
+    --sl-color-accent-low: #131e4f;
+    --sl-color-accent: #4a64bf;
+    --sl-color-accent-high: #b3c7ff;
+    --sl-color-text-accent: var(--sl-color-accent-high);
+  }
+
+  .main-frame {
+    display: flex;
+    min-height: 100vh;
+    min-width: 100vw;
+  }
+
+  .main-frame > div {
+    flex: 1;
+    overflow: hidden;
+  }
+  .main-pane {
+    height: 100%;
+    max-height: 100%;
+    background: black !important;
+  }
+
+  .hero .stack {
+    /* black fade out to transparent */
+    background: radial-gradient(
+      circle,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(0, 0, 0, 0.15) 80%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .hero {
+    display: grid !important;
+    align-items: center !important;
+    gap: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  @media (min-width: 40rem) {
+    .hero .stack {
+      padding-inline: 8rem;
+      padding-block: 2rem;
+    }
+  }
+</style>

docs/src/components/Hero/Stars.svelte

@@ -0,0 +1,112 @@
+<script>
+  /**
+   * This is recreated from a pixi.js example
+   *
+   * https://github.com/pixijs/examples/blob/gh-pages/examples/js/demos-advanced/star-warp.js
+   */
+  import * as PIXI from 'pixi.js'
+  import { Application, ParticleContainer, Ticker } from 'svelte-pixi'
+
+  const speed = 0.25
+  const fov = 20
+  const starBaseSize = 0.05
+
+  let app
+  let width
+  let height
+
+  let container
+  let alpha = 0
+  let cameraZ = 1000
+  let starAmount = 0
+  let stars = []
+
+  const MAX_Z = 2000
+
+  function init(container, amount) {
+    stars.forEach((star) => star.destroy())
+    stars = new Array(amount).fill(null).map(() => {
+      const star = new PIXI.Sprite(PIXI.Texture.from('/assets/star.png'))
+
+      const deg = Math.random() * Math.PI * 2
+      const distance = Math.random() * 50 + 1
+      star.anchor.set(0.5, 0.7)
+      star.initX = Math.cos(deg) * distance
+      star.initY = Math.sin(deg) * distance
+      star.initZ = Math.random() * 1000 + MAX_Z
+
+      return star
+    })
+
+    container.addChild(...stars)
+  }
+
+  $: if (container) {
+    init(container, starAmount)
+  }
+
+  function tick({ detail: delta }) {
+    if (alpha < 1) {
+      alpha += 0.05
+    }
+    cameraZ += delta * speed
+
+    stars.forEach((star) => {
+      // update scale
+      const z = star.initZ - cameraZ
+      const distanceScale = Math.max(0, (MAX_Z - z) / MAX_Z)
+      star.scale.set(distanceScale * starBaseSize, distanceScale * starBaseSize)
+
+      // update rotation
+      const dxCenter = star.x - app.renderer.screen.width / 2
+      const dyCenter = star.y - app.renderer.screen.height / 2
+      star.rotation = Math.atan2(dyCenter, dxCenter) + Math.PI / 2
+
+      // reset
+      if (star.initZ < cameraZ) {
+        const deg = Math.random() * Math.PI * 2
+        const distance = Math.random() * 50 + 1
+        star.initX = Math.cos(deg) * distance
+        star.initY = Math.sin(deg) * distance
+        star.initZ = Math.random() * 1000 + MAX_Z + cameraZ
+      }
+      // move closer to camera
+      else {
+        star.x =
+          star.initX * (fov / z) * app.renderer.screen.width +
+          app.renderer.screen.width / 2
+        star.y =
+          star.initY * (fov / z) * app.renderer.screen.height +
+          app.renderer.screen.height / 2
+      }
+    })
+  }
+
+  $: if (app && width && height) {
+    app.renderer.resize(width, height)
+
+    if (width < 700) {
+      starAmount = 5000
+    } else {
+      starAmount = 10000
+    }
+  }
+</script>
+
+<div style="flex: 1;" bind:clientWidth={width} bind:clientHeight={height}>
+  <Application bind:instance={app}>
+    <Ticker on:tick={tick} />
+    <ParticleContainer
+      bind:instance={container}
+      {alpha}
+      autoResize
+      properties={{
+        scale: true,
+        position: true,
+        rotation: true,
+        uvs: true,
+        alpha: true,
+      }}
+    />
+  </Application>
+</div>

docs/src/content/docs/guides/optimizing-performance.mdx

@@ -71,7 +71,7 @@ Let's take another approach by using Pixi a bit more directly:
 ```svelte live props={{ stats: true }}
 <script>
   import * as PIXI from 'pixi.js'
-  import { Sprite, onTick, Container } from 'svelte-pixi'
+  import { onTick, Container } from 'svelte-pixi'
   import { onMount } from 'svelte'
 
   const width = 720

docs/src/content/docs/index.mdx

@@ -15,3 +15,6 @@ hero:
       icon: external
       link: https://github.com/mattjennings/svelte-pixi
 ---
+import Hero from '../../components/Hero/Hero.astro'
+
+<Hero />