From f66e619d13b44c0d0525dd2e8c70daa58773af90 Mon Sep 17 00:00:00 2001
From: Matt Jennings <me@mattjennings.io>
Date: Sun, 3 Dec 2023 22:28:46 -0600
Subject: [PATCH] fix examples to not be 0-based coordinates but still be
 responsive

---
 .../docs/api/components/animated-sprite.mdx   |  4 ++
 .../docs/api/components/application.mdx       | 14 +++---
 .../docs/api/components/assets-loader.mdx     |  2 +
 .../docs/api/components/bitmap-text.mdx       |  3 +-
 .../content/docs/api/components/container.mdx |  6 +--
 .../content/docs/api/components/graphics.mdx  |  2 +
 .../content/docs/api/components/html-text.mdx |  2 +
 docs/src/content/docs/api/components/mesh.mdx | 10 +++-
 .../docs/api/components/nine-slice-plane.mdx  |  2 +
 .../api/components/particle-container.mdx     |  6 +--
 .../content/docs/api/components/renderer.mdx  | 16 +++----
 .../docs/api/components/simple-plane.mdx      |  4 +-
 .../docs/api/components/simple-rope.mdx       |  3 +-
 .../content/docs/api/components/sprite.mdx    |  2 +
 docs/src/content/docs/api/components/text.mdx |  2 +
 .../content/docs/api/components/ticker.mdx    |  2 +
 .../docs/api/components/tiling-sprite.mdx     |  2 +
 .../content/docs/api/utilities/on-tick.mdx    |  2 +-
 docs/src/content/docs/api/utilities/track.mdx | 14 +++---
 .../content/docs/getting-started/usage.mdx    | 48 ++++++++++++-------
 docs/src/content/docs/guides/animation.mdx    |  9 ++--
 .../src/content/docs/guides/binding-props.mdx | 19 ++++----
 .../docs/guides/optimizing-performance.mdx    | 18 +++----
 .../layouts/examples/wrappers/Empty.svelte    |  4 +-
 .../layouts/examples/wrappers/WithApp.svelte  | 23 +++++++--
 25 files changed, 140 insertions(+), 79 deletions(-)

diff --git a/docs/src/content/docs/api/components/animated-sprite.mdx b/docs/src/content/docs/api/components/animated-sprite.mdx
index 70536d1..bca8f02 100644
--- a/docs/src/content/docs/api/components/animated-sprite.mdx
+++ b/docs/src/content/docs/api/components/animated-sprite.mdx
@@ -19,6 +19,8 @@ I recommend using spritesheets created by TexturePacker ([they have a great tuto
 
 <AssetsLoader assets={['/assets/adventurer-spritesheet.json']}>
   <AnimatedSprite
+    x={360}
+    y={200}
     textures={[
       PIXI.Texture.from('adventurer-idle-00.png'),
       PIXI.Texture.from('adventurer-idle-01.png'),
@@ -54,6 +56,8 @@ I recommend using spritesheets created by TexturePacker ([they have a great tuto
 
 <AnimatedSprite
   {textures}
+  x={360}
+  y={200}
   playing
   animationSpeed={0.1}
   anchor={0.5}
diff --git a/docs/src/content/docs/api/components/application.mdx b/docs/src/content/docs/api/components/application.mdx
index d004d88..2948030 100644
--- a/docs/src/content/docs/api/components/application.mdx
+++ b/docs/src/content/docs/api/components/application.mdx
@@ -14,9 +14,9 @@ Just like `PIXI.Application`, it sets up the [Renderer](/docs/components/rendere
   import { Application, Text } from 'svelte-pixi'
 </script>
 
-<Application width={700} height={400} antialias>
+<Application width={400} height={400} antialias>
   <Text
-    x={350}
+    x={200}
     y={200}
     anchor={0.5}
     text="Hello World"
@@ -34,14 +34,14 @@ If you want to customize the element that the canvas is rendered into, you can u
   import { Application, Text } from 'svelte-pixi'
 </script>
 
-<Application width={700} height={400} antialias>
+<Application width={400} height={400} antialias>
   <div slot="view" class="custom">
     <!-- canvas will be placed here -->
   </div>
 
   <!-- pixi components go here -->
   <Text
-    x={350}
+    x={200}
     y={200}
     anchor={0.5}
     text="Hello World"
@@ -67,15 +67,15 @@ If you want to customize the element that the canvas is rendered into, you can u
 </script>
 
 <Application
-  width={700}
+  width={400}
   height={400}
   antialias
   render="demand"
   on:postrender={() => console.log('render')}
 >
-  <DraggableCircle x={350} y={200} />
+  <DraggableCircle x={200} y={200} />
   <Text
-    x={350}
+    x={200}
     y={300}
     text="Click and drag"
     style={{ fill: 'white' }}
diff --git a/docs/src/content/docs/api/components/assets-loader.mdx b/docs/src/content/docs/api/components/assets-loader.mdx
index e6d8c32..05225df 100644
--- a/docs/src/content/docs/api/components/assets-loader.mdx
+++ b/docs/src/content/docs/api/components/assets-loader.mdx
@@ -25,6 +25,8 @@ render until the loading has completed. You can show progress by using the `prog
   </slot>
 
   <Sprite
+    x={360}
+    y={200}
     texture={PIXI.Texture.from('/assets/great-success.png')}
     anchor={0.5}
     width={360}
diff --git a/docs/src/content/docs/api/components/bitmap-text.mdx b/docs/src/content/docs/api/components/bitmap-text.mdx
index bdc78d0..3f4217f 100644
--- a/docs/src/content/docs/api/components/bitmap-text.mdx
+++ b/docs/src/content/docs/api/components/bitmap-text.mdx
@@ -28,7 +28,8 @@ A BitmapText can only be created when the font is loaded.
 <AssetsLoader assets={['/assets/desyrel.xml']}>
   <BitmapText
     text={'the fox jumps over\nthe lazy dog'}
-    x={10}
+    x={380}
+    y={200}
     anchor={0.5}
     style={{ fontName: 'Desyrel', fontSize: 48, align: 'center' }}
   />
diff --git a/docs/src/content/docs/api/components/container.mdx b/docs/src/content/docs/api/components/container.mdx
index cb4b312..22dab8e 100644
--- a/docs/src/content/docs/api/components/container.mdx
+++ b/docs/src/content/docs/api/components/container.mdx
@@ -16,9 +16,9 @@ When child components are rendered inside, their coordinates become local to the
   import { Container, Text } from 'svelte-pixi'
 </script>
 
-<Container>
-  <Text text="Hello" x={-10} y={-60} style={{ fill: 'white' }} />
-  <Text text="World" x={-10} y={0} style={{ fill: 'white' }} />
+<Container x={360} y={160}>
+  <Text text="Hello" x={0} y={0} anchor={0.5} style={{ fill: 'white' }} />
+  <Text text="World" x={0} y={60} anchor={0.5} style={{ fill: 'white' }} />
 </Container>
 ```
 
diff --git a/docs/src/content/docs/api/components/graphics.mdx b/docs/src/content/docs/api/components/graphics.mdx
index 049f9fa..d3ee88f 100644
--- a/docs/src/content/docs/api/components/graphics.mdx
+++ b/docs/src/content/docs/api/components/graphics.mdx
@@ -25,6 +25,8 @@ Graphics can be used for any kind of drawing. Use the `draw` prop to interact wi
 </script>
 
 <Graphics
+  x={375}
+  y={200}
   draw={(graphics) => {
     graphics.clear()
     graphics.beginFill(0xde3249)
diff --git a/docs/src/content/docs/api/components/html-text.mdx b/docs/src/content/docs/api/components/html-text.mdx
index 388cf36..9af3563 100644
--- a/docs/src/content/docs/api/components/html-text.mdx
+++ b/docs/src/content/docs/api/components/html-text.mdx
@@ -17,6 +17,8 @@ Renders text with support for styling via HTML tags. The rendering can vary acro
 </script>
 
 <HTMLText
+  x={360}
+  y={200}
   text="<strong>Hello</strong> <em>World</em>"
   anchor={0.5}
   style={{
diff --git a/docs/src/content/docs/api/components/mesh.mdx b/docs/src/content/docs/api/components/mesh.mdx
index 9dc190d..f7e30bc 100644
--- a/docs/src/content/docs/api/components/mesh.mdx
+++ b/docs/src/content/docs/api/components/mesh.mdx
@@ -97,7 +97,15 @@ Pretty much all WebGL can be broken down into the following:
   })
 </script>
 
-<Mesh anchor={0.5} scale={2} {geometry} {shader} {rotation} />
+<Mesh 
+  x={360} 
+  y={200} 
+  anchor={0.5} 
+  scale={2} 
+  {geometry} 
+  {shader} 
+  {rotation} 
+/>
 ```
 
 ## API
diff --git a/docs/src/content/docs/api/components/nine-slice-plane.mdx b/docs/src/content/docs/api/components/nine-slice-plane.mdx
index 03d73df..6c30b3c 100644
--- a/docs/src/content/docs/api/components/nine-slice-plane.mdx
+++ b/docs/src/content/docs/api/components/nine-slice-plane.mdx
@@ -27,6 +27,8 @@ Allows you to stretch a texture using 9-slice scaling. The corners will remain u
 </script>
 
 <NineSlicePlane
+  x={360}
+  y={200}
   texture={PIXI.Texture.from('/assets/nine-slice-blue.png')}
   leftWidth={12}
   topHeight={12}
diff --git a/docs/src/content/docs/api/components/particle-container.mdx b/docs/src/content/docs/api/components/particle-container.mdx
index 687f432..453b3f0 100644
--- a/docs/src/content/docs/api/components/particle-container.mdx
+++ b/docs/src/content/docs/api/components/particle-container.mdx
@@ -21,7 +21,7 @@ Note: when working with thousands of components, it is **much** more performant
   import { Sprite, onTick, ParticleContainer } from 'svelte-pixi'
   import { onMount } from 'svelte'
 
-  const width = 800
+  const width = 720
   const height = 400
   const speed = 0.025
   const fov = 20
@@ -70,8 +70,8 @@ Note: when working with thousands of components, it is **much** more performant
     star.scale.set(distance * starSize)
     star.anchor.set(0.5, 0.7)
 
-    star.x = star.initX * (fov / z) * width
-    star.y = star.initY * (fov / z) * width
+    star.x = star.initX * (fov / z) * width + width / 2
+    star.y = star.initY * (fov / z) * height + height / 2
   }
 
   // move the camera forward
diff --git a/docs/src/content/docs/api/components/renderer.mdx b/docs/src/content/docs/api/components/renderer.mdx
index 6a48a76..13f2935 100644
--- a/docs/src/content/docs/api/components/renderer.mdx
+++ b/docs/src/content/docs/api/components/renderer.mdx
@@ -23,7 +23,7 @@ This is an alternative to using the [Application](/docs/components/application)
 <Renderer
   bind:instance={renderer}
   bind:stage
-  width={700}
+  width={400}
   height={400}
   antialias
 >
@@ -38,9 +38,9 @@ This is an alternative to using the [Application](/docs/components/application)
       can access it with getStage()
     -->
     <Container bind:instance={stage}>
-      <DraggableCircle x={350} y={200} />
+      <DraggableCircle x={200} y={200} />
       <Text
-        x={350}
+        x={200}
         y={300}
         text="Click and drag"
         style={{ fill: 'white' }}
@@ -66,7 +66,7 @@ If you want to customize the element that the canvas is rendered into, you can u
 <Renderer
   bind:instance={renderer}
   bind:stage
-  width={700}
+  width={400}
   height={400}
   antialias
 >
@@ -82,7 +82,7 @@ If you want to customize the element that the canvas is rendered into, you can u
       }}
     />
     <Text
-      x={350}
+      x={200}
       y={200}
       anchor={0.5}
       text="Hello World"
@@ -116,7 +116,7 @@ we can still implement this ourselves:
 
 <Renderer
   bind:instance={renderer}
-  width={700}
+  width={400}
   height={400}
   antialias
   on:invalidate={() => {
@@ -134,9 +134,9 @@ we can still implement this ourselves:
     }}
   >
     <Container bind:instance={stage}>
-      <DraggableCircle x={350} y={200} />
+      <DraggableCircle x={200} y={200} />
       <Text
-        x={350}
+        x={200}
         y={300}
         text="Click and drag"
         style={{ fill: 'white' }}
diff --git a/docs/src/content/docs/api/components/simple-plane.mdx b/docs/src/content/docs/api/components/simple-plane.mdx
index 39e34f2..78a4fb0 100644
--- a/docs/src/content/docs/api/components/simple-plane.mdx
+++ b/docs/src/content/docs/api/components/simple-plane.mdx
@@ -31,8 +31,8 @@ The SimplePlane allows you to draw a texture across several points and then mani
 </script>
 
 <SimplePlane
-  x={-300}
-  y={-200}
+  x={75}
+  y={0}
   bind:instance={plane}
   anchor={0.5}
   texture={PIXI.Texture.from('/assets/bg_grass.jpg')}
diff --git a/docs/src/content/docs/api/components/simple-rope.mdx b/docs/src/content/docs/api/components/simple-rope.mdx
index 28d0a19..2a9ae14 100644
--- a/docs/src/content/docs/api/components/simple-rope.mdx
+++ b/docs/src/content/docs/api/components/simple-rope.mdx
@@ -32,8 +32,9 @@ The rope allows you to draw a texture across several points and then manipulate
 </script>
 
 <SimpleRope
+  x={100}
+  y={200}
   texture={PIXI.Texture.from('/assets/snake.png')}
-  x={-275}
   scale={0.6}
   {points}
 />
diff --git a/docs/src/content/docs/api/components/sprite.mdx b/docs/src/content/docs/api/components/sprite.mdx
index c9e0b79..6902c94 100644
--- a/docs/src/content/docs/api/components/sprite.mdx
+++ b/docs/src/content/docs/api/components/sprite.mdx
@@ -16,6 +16,8 @@ Sprites are the base for all textured objects that are rendered to the screen
 </script>
 
 <Sprite
+  x={360}
+  y={200}
   texture={PIXI.Texture.from('/assets/adventurer.png')}
   anchor={0.5}
   scale={3}
diff --git a/docs/src/content/docs/api/components/text.mdx b/docs/src/content/docs/api/components/text.mdx
index 4b052ad..0f65ebc 100644
--- a/docs/src/content/docs/api/components/text.mdx
+++ b/docs/src/content/docs/api/components/text.mdx
@@ -21,6 +21,8 @@ To split a line you can use '\n' in your text string, or, on the style prop, cha
 </script>
 
 <Text
+  x={360}
+  y={200}
   text="Hello World"
   anchor={0.5}
   style={{
diff --git a/docs/src/content/docs/api/components/ticker.mdx b/docs/src/content/docs/api/components/ticker.mdx
index 43339a8..a7ee0a0 100644
--- a/docs/src/content/docs/api/components/ticker.mdx
+++ b/docs/src/content/docs/api/components/ticker.mdx
@@ -24,6 +24,8 @@ Children of this component can use [onTick](/docs/utilities/on-tick) to hook int
   }}
 >
   <Text
+    x={360}
+    y={200}
     text={`Frame ${frame}\nDelta: ${delta.toFixed(10)}`}
     style={{ fill: 'white' }}
     anchor={0.5}
diff --git a/docs/src/content/docs/api/components/tiling-sprite.mdx b/docs/src/content/docs/api/components/tiling-sprite.mdx
index 4da54ea..3b1d452 100644
--- a/docs/src/content/docs/api/components/tiling-sprite.mdx
+++ b/docs/src/content/docs/api/components/tiling-sprite.mdx
@@ -26,6 +26,8 @@ import ComponentAPI from '$lib/components/ComponentAPI.astro'
 </script>
 
 <TilingSprite
+  x={360}
+  y={200}
   texture={PIXI.Texture.from('/assets/tiling-sprite.jpeg')}
   anchor={0.5}
   width={400}
diff --git a/docs/src/content/docs/api/utilities/on-tick.mdx b/docs/src/content/docs/api/utilities/on-tick.mdx
index 2463322..9201fb6 100644
--- a/docs/src/content/docs/api/utilities/on-tick.mdx
+++ b/docs/src/content/docs/api/utilities/on-tick.mdx
@@ -15,7 +15,7 @@ Child components of [Ticker](/docs/components/ticker) can use `onTick` to add a
   })
 </script>
 
-<Text {text} style={{ fill: 'white' }} anchor={0.5} />
+<Text x={360} y={200} {text} style={{ fill: 'white' }} anchor={0.5} />
 ```
 
 ## Type Definition
diff --git a/docs/src/content/docs/api/utilities/track.mdx b/docs/src/content/docs/api/utilities/track.mdx
index 125f567..31d0b88 100644
--- a/docs/src/content/docs/api/utilities/track.mdx
+++ b/docs/src/content/docs/api/utilities/track.mdx
@@ -11,17 +11,17 @@ This is useful for watching a property on a PixiJS instance that is getting upda
   import { Container, Text, onTick, track } from 'svelte-pixi'
 
   let instance
-  let x = track(() => instance.x, -200)
-  let y = track(() => instance.y, 0)
+  let x = track(() => instance.x, 200)
+  let y = track(() => instance.y, 200)
 
-  $: text = $x < -75 ? "I'm on the left!" : "I'm on the right!"
+  $: text = $x < 300 ? "I'm on the left!" : "I'm on the right!"
 
+  // modify the instance directly
   onTick((delta) => {
-    if (instance.x < 100) {
-      // modify the instance directly
-      instance.x += 1 * delta
+    if (instance.x < 500) {
+      instance.x += delta
     } else {
-      instance.x = -200
+      instance.x = 200
     }
   })
 </script>
diff --git a/docs/src/content/docs/getting-started/usage.mdx b/docs/src/content/docs/getting-started/usage.mdx
index dec74fa..1e97999 100644
--- a/docs/src/content/docs/getting-started/usage.mdx
+++ b/docs/src/content/docs/getting-started/usage.mdx
@@ -15,9 +15,9 @@ All Svelte Pixi components should be children of `Application`.
   import { Application, Text } from 'svelte-pixi'
 </script>
 
-<Application width={700} height={400} antialias>
+<Application width={400} height={400} antialias>
   <Text
-    x={350}
+    x={200}
     y={200}
     anchor={0.5}
     text="Hello World"
@@ -42,12 +42,12 @@ PixiJS will load the texture in the background and show it when it's ready - sim
   import { Application, Sprite } from 'svelte-pixi'
 </script>
 
-<Application width={700} height={400} antialias>
+<Application width={400} height={400} antialias>
   <Sprite
+    x={200}
+    y={200}
     texture={PIXI.Texture.from('/assets/adventurer.png')}
     anchor={0.5}
-    x={350}
-    y={200}
     scale={3}
   />
 </Application>
@@ -72,13 +72,13 @@ _Note: You may want to enable network throttling in your browser dev tools to ac
   ]
 </script>
 
-<Application width={700} height={400}>
+<Application width={400} height={400}>
   <AssetsLoader assets={images}>
     <slot slot="loading">
       <Text
         text="Loading..."
         anchor={0.5}
-        x={350}
+        x={200}
         y={200}
         style={{
           fill: 'white',
@@ -90,7 +90,7 @@ _Note: You may want to enable network throttling in your browser dev tools to ac
       <Sprite
         texture={PIXI.Texture.from(image)}
         anchor={0.5}
-        x={300 + i * 50}
+        x={150 + i * 50}
         y={200}
         scale={2}
       />
@@ -113,8 +113,8 @@ components can hook into the loop with `onTick`.
   import * as PIXI from 'pixi.js'
   import { Sprite, onTick } from 'svelte-pixi'
 
-  let x = 0
-  let y = 0
+  let x = 360
+  let y = 200
 
   let time = 0
   onTick((delta) => {
@@ -122,8 +122,8 @@ components can hook into the loop with `onTick`.
     // for any kind of movement, you should multiply by delta
     // to ensure it moves at the same speed regardless of framerate
     time += delta * 0.05
-    x = Math.cos(time) * 50
-    y = Math.sin(time) * 50
+    x = 360 + Math.cos(time) * 50
+    y = 200 + Math.sin(time) * 50
   })
 </script>
 
@@ -142,7 +142,7 @@ Most Svelte Pixi components have an `instance` prop that
 contains the underlying PixiJS instance. It's akin to the `this` prop for HTML elements, 
 so you can bind to it if you need to access it.
 
-```svelte live
+```svelte live {5,14}
 <script>
   import { onMount } from 'svelte'
   import { Text } from 'svelte-pixi'
@@ -151,11 +151,17 @@ so you can bind to it if you need to access it.
 
   onMount(() => {
     // manually set property on the PIXI.Text instance    
-    text.style.fill = 'yellow'
+    text.style.fill = '#00ff00'
   })
 </script>
 
-<Text bind:instance={text} text="Hello World" anchor={0.5} />
+<Text 
+  bind:instance={text} 
+  x={360} 
+  y={200} 
+  text="Hello World" 
+  anchor={0.5} 
+/>
 ```
 
 ## Using a Custom Instance
@@ -164,7 +170,7 @@ The `instance` prop also lets you pass down a custom PixiJS class
 that you've instantiated yourself. This is particularly useful 
 if you have a custom class (whether that be your own or from a third-party library).
 
-```svelte live
+```svelte live {14}
 <script>
   import * as PIXI from 'pixi.js'
   import { Text } from 'svelte-pixi'
@@ -172,10 +178,16 @@ if you have a custom class (whether that be your own or from a third-party libra
   class YellowText extends PIXI.Text {
     constructor(text, style) {
       super(text, style)
-      this.style.fill = 'yellow'
+      this.style.fill = '#00ff00'
     }
   }
 </script>
 
-<Text instance={new YellowText()} text="Hello World" anchor={0.5} />
+<Text 
+  instance={new YellowText()} 
+  x={360} 
+  y={200} 
+  text="Hello World" 
+  anchor={0.5} 
+/>
 ```
diff --git a/docs/src/content/docs/guides/animation.mdx b/docs/src/content/docs/guides/animation.mdx
index a58884f..5dc9047 100644
--- a/docs/src/content/docs/guides/animation.mdx
+++ b/docs/src/content/docs/guides/animation.mdx
@@ -14,7 +14,7 @@ You can animate using `svelte/motion` just like you would in other Svelte applic
 
   let dragging = false
   let offset = { x: 0, y: 0 }
-  let startingPosition = { x: 0, y: 0 }
+  let startingPosition = { x: 360, y: 200 }
 
   let position = spring(startingPosition, {
     stiffness: 0.2,
@@ -66,9 +66,10 @@ You can animate using `svelte/motion` just like you would in other Svelte applic
 />
 
 <Text
-  y={100}
+  x={360}
+  y={300}
   anchor={0.5}
-  text="Try clicking and dragging the mushroom"
+  text="Click and drag the mushroom"
   style={{ fill: 'white', fontSize: 20 }}
 />
 ```
@@ -107,6 +108,8 @@ You can animate using `svelte/motion` just like you would in other Svelte applic
 </script>
 
 <Graphics
+  x={360}
+  y={200}
   pivot={{ x: barWidth / 2 }}
   draw={(graphics) => {
     graphics.clear()
diff --git a/docs/src/content/docs/guides/binding-props.mdx b/docs/src/content/docs/guides/binding-props.mdx
index 35c150e..cc1a854 100644
--- a/docs/src/content/docs/guides/binding-props.mdx
+++ b/docs/src/content/docs/guides/binding-props.mdx
@@ -14,20 +14,21 @@ Instead, Svelte Pixi provides a [track](/docs/utilities/track) utility function
 
   let instance
 
-  let x = track(() => instance.x, -300)
-  let y = track(() => instance.y, -150)
+  let x = track(() => instance.x, 360)
+  let y = track(() => instance.y, 200)
 
   function reset() {
-    $x = -300
-    $y = -150
+    $x = 360
+    $y = 200
+    time = 0
   }
 
+  let time = 0
   onTick((delta) => {
-    if (instance.x < 200) {
-      instance.x += 0.5 * delta
-      instance.y += 0.2 * delta
-    }
-  })
+    time += delta * 0.02
+    instance.x = 360 + Math.cos(time) * 50
+    instance.y = 200 + Math.sin(time) * 50
+  })  
 </script>
 
 <Graphics
diff --git a/docs/src/content/docs/guides/optimizing-performance.mdx b/docs/src/content/docs/guides/optimizing-performance.mdx
index a0037e3..742a6db 100644
--- a/docs/src/content/docs/guides/optimizing-performance.mdx
+++ b/docs/src/content/docs/guides/optimizing-performance.mdx
@@ -13,7 +13,7 @@ You may find yourself needing to render and update many components at once. Take
   import * as PIXI from 'pixi.js'
   import { Sprite, onTick } from 'svelte-pixi'
 
-  const width = 800
+  const width = 720
   const height = 400
   const speed = 0.025
   const fov = 20
@@ -49,8 +49,8 @@ You may find yourself needing to render and update many components at once. Take
     texture={PIXI.Texture.from('/assets/star.png')}
     anchor={{ x: 0.5, y: 0.7 }}
     scale={{ x: distance * starSize, y: distance * starSize }}
-    x={star.x * (fov / z) * width}
-    y={star.y * (fov / z) * width}
+    x={star.x * (fov / z) * width + width / 2}
+    y={star.y * (fov / z) * height + height / 2}
   />
 {/each}
 
@@ -74,7 +74,7 @@ Let's take another approach by using Pixi a bit more directly:
   import { Sprite, onTick, Container } from 'svelte-pixi'
   import { onMount } from 'svelte'
 
-  const width = 800
+  const width = 720
   const height = 400
   const speed = 0.025
   const fov = 20
@@ -127,8 +127,8 @@ Let's take another approach by using Pixi a bit more directly:
     star.scale.set(distance * starSize)
     star.anchor.set(0.5, 0.7)
 
-    star.x = star.initX * (fov / z) * width
-    star.y = star.initY * (fov / z) * width
+    star.x = star.initX * (fov / z) * width + width / 2
+    star.y = star.initY * (fov / z) * height + height / 2
   }
 
   // move the camera forward
@@ -173,15 +173,15 @@ You can set `render="demand"` on the `Application` component to opt into this be
 </script>
 
 <Application
-  width={700}
+  width={400}
   height={400}
   antialias
   render="demand"
   on:postrender={() => console.log('render')}
 >
-  <DraggableCircle x={350} y={200} />
+  <DraggableCircle x={200} y={200} />
   <Text
-    x={350}
+    x={200}
     y={300}
     text="Click and drag"
     style={{ fill: 'white' }}
diff --git a/docs/src/layouts/examples/wrappers/Empty.svelte b/docs/src/layouts/examples/wrappers/Empty.svelte
index fdbeb4b..2d8d1e5 100644
--- a/docs/src/layouts/examples/wrappers/Empty.svelte
+++ b/docs/src/layouts/examples/wrappers/Empty.svelte
@@ -1,4 +1,6 @@
-<div class="with-app-container w-full h-full overflow-hidden block">
+<div
+  class="with-app-container w-full h-full overflow-hidden flex items-center justify-center bg-gray-900"
+>
   <slot />
 </div>
 
diff --git a/docs/src/layouts/examples/wrappers/WithApp.svelte b/docs/src/layouts/examples/wrappers/WithApp.svelte
index 2cf7d96..4378c65 100644
--- a/docs/src/layouts/examples/wrappers/WithApp.svelte
+++ b/docs/src/layouts/examples/wrappers/WithApp.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Application, AssetsLoader } from 'svelte-pixi'
+  import { Application, AssetsLoader, Container } from 'svelte-pixi'
   import { onMount } from 'svelte'
   import { Layout } from 'svelte-pixi/experimental'
   import IntersectionObserver from 'svelte-intersection-observer'
@@ -24,6 +24,11 @@
   let width
   let height
 
+  const resolution = {
+    width: 718,
+    height: 400,
+  }
+
   // only render while in view
   $: if (app) {
     if (!intersecting) {
@@ -70,8 +75,8 @@
   <Application
     bind:instance={app}
     autoStart={false}
-    width={800}
-    height={400}
+    width={resolution.width}
+    height={resolution.height}
     backgroundColor={bg}
   >
     <div bind:this={element} class="relative not-content" slot="view">
@@ -86,9 +91,17 @@
     </div>
 
     <AssetsLoader {assets}>
-      <Layout align="center" sortableChildren {width} {height}>
+      <!--
+        offset X to account for coordinates when width is less than 800. when width is 800, x should be 0.
+        but if width is 400, x should be -400. this will center the content while keeping the coordinates
+        the same for examples.
+       -->
+      <Container
+        x={-((resolution.width - width) / 2)}
+        y={-((resolution.height - height) / 2)}
+      >
         <slot />
-      </Layout>
+      </Container>
     </AssetsLoader>
   </Application>
 </div>