docs: grammar corrections

docs/examples/lights-shadows.md

@@ -2,17 +2,17 @@
 
 This guide will help you get started with simple light and shadows in TresJS.
 
-We will build a simple scene with a three meshes and a plane but only two will have shadows.
+We will build a simple scene with three meshes and a plane but only two will have shadows.
 <SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />
 
 ## Let's first setup our scene (optional)
 
-We import all the modules that we need, for confort we can use the orbit-controls from cientos,
+We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
 [check here to know how](/examples/orbit-controls).
 
-Let's put 4 objects in our scene, one will be the plane that receive shadows, two of them will cast shadow and the last one will not cast shadow at all.
+Let's put four objects in our scene, one will be the plane that receive shadows, two of them will cast shadows and the last one will not cast any shadow at all.
 
-I'm going to use [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial). Simple because you could see the "soft shadow" easily.
+I'm going to use [MeshToonMaterial](https://threejs.org/docs/index.html?q=toon#api/en/materials/MeshToonMaterial). Simply because we can see the "soft shadow" easily.
 
 ```vue
 <script setup lang="ts">
@@ -60,19 +60,19 @@ import { OrbitControls } from '@tresjs/cientos'
 
 ## Lights (explanation)
 
-As you know every instance in [ThreeJs](https://threejs.org/) is available in **TresJs** so is all the light types, we just need to add the `Tres` prefix to use it.
+As you know every instance in [ThreeJs](https://threejs.org/) is available in **TresJs** so are all the light types, we just need to add the `Tres` prefix to use them.
 
-But not all lights can cast shadows, this definition comes directly from ThreeJs and made sense, for example the purpose of an (ambientLight)[https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight] is to iluminate everysingle side of your scene, so make no sense to cast shadows, at the contrary a (DirectionalLight)[https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper] that is similar to the sun, can cast shadow.
+But not all lights can cast shadows, this definition comes directly from ThreeJs and makes sense, for example the purpose of an (ambientLight)[https://threejs.org/docs/index.html?q=ambient#api/en/lights/AmbientLight] is to iluminate everysingle side of your scene, so it makes no sense for it to cast shadows, on the contrary, a (DirectionalLight)[https://threejs.org/docs/index.html?q=light#api/en/helpers/DirectionalLightHelper] immitating the sun can and should cast shadows.
 
 ## Shadows (explanation)
 
-There are also many types of shadows, for example the "soft shadow" it's generated automatially when an object receive more light from one side, but in summary a "normal", shadows that get projected in another surface it needs and mesh to be casted and an mesh to be receive. As we see in our example the `Plane` is receiving a shadow but not casting it. Please not that not all materials can cast or receive shadows
+There are also many types of shadows, for example the "soft shadow" is generated automatially when an object receives more light from one side, but in summary a "ThreeJS default shadow" that is directed towards another surface needs to be cast by a mesh and another mesh needs to receive it. As we see in our example, the `Plane` is receiving a shadow but not casting it. Please note that not all materials can cast or receive shadows.
 
-Internally ThreeJS generate automatically a new mesh with a (ShadowMaterial)[https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial] and it get update in each frame, that is why if you apply animations, the shadow also get animated, but also why you've to use shadows with careful, because could take your performance down.
+Internally, ThreeJS automatically generates a new mesh with a (ShadowMaterial)[https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial] which gets updated in each frame, that is why if you apply animations, the shadow also is animated, but also why you have to use shadows carefully, because they could slow your performance down.
 
 ## Setting our lights and shadow
 
-We could divide this in three step
+We could divide this into three steps.
 
 **Number 1**: Set the shadows on the renderer
 
@@ -108,9 +108,9 @@ _The AmbientLight doesn't generate any type of shadow here_
   //...
 </template>
 ```
-**Number 3**: Set the objects to cast shadow or receive shadows
+**Number 3**: Set the objects to cast or receive shadows
 
-Similar to the previus step, we set the mesh that we want to cast shadow (our sphere) with the `cast-shadow` prop, and set the object that will receive shadow (our plane) with the `receive-shadow` prop.
+Similarly to the previous step, we set the mesh that we want to cast shadow (our sphere) with the `cast-shadow` prop, and set the object to receive shadow (our plane) with the `receive-shadow` prop.
 
 ```vue
 //...
@@ -135,7 +135,7 @@ Similar to the previus step, we set the mesh that we want to cast shadow (our sp
 </template>
 ```
 
-Now we have all the necessary step to add shadows to our scene, but if we apply what we learn in [basic animations](/examples/basic-animations), and we add shadow and movement to our cube, you will see the shadows getting animated as well 🤩
+Now we have all the necessary steps to add shadows to our scene, and if we apply what we learned in [basic animations](/examples/basic-animations), and we add movement to our cube, you will see the shadow is animated as well 🤩
 
 ```vue
 <script setup>
@@ -167,8 +167,8 @@ onLoop(() => {
 </template>
 ```
 
-_Note that I intentionally did not apply `cast-shadow` to the ``Cone` So it doesn't cast any shadow_
+_Note that I intentionally did not apply `cast-shadow` to the ``Cone` so it doesn't cast any shadow_
 
 ::: warning
-The overuse of shadows in this way could drop your performance, exists ways to increase your performance, for more information please check out [this video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
+The overuse of shadows in this way could drop your performance. However, there are ways to increase your performance, for more information please check out [this video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
 :::

docs/examples/shaders.md

@@ -10,12 +10,12 @@ _Basic knowledge of how shaders work is necessary_
 
 ## Let's first setup our scene (optional)
 
-We import all the modules that we need, for confort we can use the orbit-controls from cientos,
-[check here to know how](/examples/orbit-controls).
+We import all the modules that we need, for comfort we can use the orbit-controls from cientos,
+[look here to see how](/examples/orbit-controls).
 
-Also let's put our camera in the `[11,11,11]` position.
+Now, let's put our camera in the `[11,11,11]` position.
 
-Lastly just for help us with the location, let's add a simple plane, rotate in the X axis, with `[10, 10]` units in the geometry.
+Lastly just to help us with the location, let's add a simple plane, rotated in the X axis, with `[10, 10]` units.
 
 ```vue
 <script setup lang="ts">
@@ -41,9 +41,9 @@ import { OrbitControls } from '@tresjs/cientos'
 
 ## ShaderMaterial
 
-As you know every instance in [ThreeJs](https://threejs.org/) is available in **TresJs** so is the `ShaderMaterial`, we just need to add the `Tres` prefix to use it.
+As you know every instance in [ThreeJs](https://threejs.org/) is available in **TresJs**, so is the `ShaderMaterial`, we just need to add the `Tres` prefix to use it.
 
-For our blob, we could use a simple `SphereGeometry` adding some widthSegments and heightSegments to create a smooth effect. Also let's put our blob 4 units in the Y positive axis
+For our blob, we could use a simple `SphereGeometry` adding some widthSegments and heightSegments to create a smooth effect, and put our blob 4 units in the Y positive axis
 
 ```vue
     <TresMesh :position="[0, 4, 0]">
@@ -52,9 +52,9 @@ For our blob, we could use a simple `SphereGeometry` adding some widthSegments a
     </TresMesh>
 ```
 
-The `ShaderMaterial` accept special properties like `uniforms` `vertexShader` and `fragmentShader`, so we can create it in our script section and make the bound with our instance.
+The `ShaderMaterial` accepts special properties, like `uniforms` `vertexShader` and `fragmentShader`, so we can create it in our script section and make the bind with our instance.
 
-For this example our uniforms end like this:
+For this example, our uniforms look like this:
 
 ```ts
 import { Vector2 } from 'three'
@@ -68,7 +68,7 @@ const uniforms = {
 //..
 ```
 
-Our fragment shader, like this:
+Our fragment shader looks like this:
 
 ```ts
 //...
@@ -108,9 +108,7 @@ void main() {
 
 ## Animating the blob
 
-Similar to what we learn in the [Basic animations](/examples/basic-animations) example.
-
-We start by referencing our blob, using [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
+Similar to what we learn in the [Basic animations](/examples/basic-animations) example, we start by referencing our blob, using [Template Ref](https://vuejs.org/guide/essentials/template-refs.html)
 
 ```vue
 <script setup lang="ts">
@@ -139,7 +137,7 @@ const blobRef = shallowRef(null)
   </TresCanvas>
 </template>
 ```
- Once we got that we could use the `onLoop` callback to animate our `uTime`
+ Once we have got that, we could use the `onLoop` callback to animate our `uTime`.
 
  ```ts
 import { TresCanvas, useRenderLoop } from '@tresjs/core'
@@ -155,15 +153,15 @@ onLoop(({ elapsed }) => {
  //...
 ```
 
-And that it is, we have our basic shader running smoothly
+And that it is, we have our basic shader running smoothly.
 
 ## Using GLSL vite-pluging (optional)
 
 _This step is completly optional and is out of the scope of the **TresJs** team_
 
-Defining our shader inline, is not always the best idea, but if you're using VITE you can put your `GLSL` files in a different file just by using the (vite-plugin-glsl)[https://www.npmjs.com/package/vite-plugin-glsl].
+Defining our shader inline is not always the best idea, but if you're using VITE you can put your `GLSL` files in a different file just by using the (vite-plugin-glsl)[https://www.npmjs.com/package/vite-plugin-glsl] (check out the link for the official documentation).
 
-you could have a struncture similar to this:
+And you could have a structure similar to this:
 
 ├── src/
 │   ├── myTresJsComponent.vue