diff --git a/apps/cientos-docs-vitepress/guide/abstractions/edges.md b/apps/cientos-docs-vitepress/guide/abstractions/edges.md
index 26ae86f01..fac2bdf9f 100644
--- a/apps/cientos-docs-vitepress/guide/abstractions/edges.md
+++ b/apps/cientos-docs-vitepress/guide/abstractions/edges.md
@@ -42,21 +42,3 @@ import { Box, Edges } from '@tresjs/cientos'
 | :---------------- | :--------------------------------------------------- | ------------------------- |
 | **color**        | `THREE.Color` — Color of the edges. <br> More informations : [TresColor](https://docs.tresjs.org/api/instances-arguments-and-props.html#colors) — [THREE.Color](https://threejs.org/docs/#api/en/math/Color) | `#ff0000`                   |
 | **threshold**        | `number` — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value  | `1`                   |
-
-## Exposed properties
-
-| Event       | Description                                                      |
-| :---------- | :--------------------------------------------------------------- |
-| `instance` | Instance reference — Inheritance of [LineSegments](https://threejs.org/docs/#api/en/objects/LineSegments).|
-
-```typescript{1}
-const edgesRef = shallowRef(null)
-
-console.log(edgesRef.value.instance) // instance properties
-```
-
-```vue{2}
-<template>
-    <Edges ref="edgesRef" />
-</template>
-```
diff --git a/apps/cientos-docs/.data/content/contents.sqlite b/apps/cientos-docs/.data/content/contents.sqlite
index 25c49c660..2bf06fb58 100644
Binary files a/apps/cientos-docs/.data/content/contents.sqlite and b/apps/cientos-docs/.data/content/contents.sqlite differ
diff --git a/apps/cientos-docs/.editorconfig b/apps/cientos-docs/.editorconfig
new file mode 100644
index 000000000..00ab93732
--- /dev/null
+++ b/apps/cientos-docs/.editorconfig
@@ -0,0 +1,11 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/apps/cientos-docs/.gitignore b/apps/cientos-docs/.gitignore
new file mode 100644
index 000000000..4a7f73a2e
--- /dev/null
+++ b/apps/cientos-docs/.gitignore
@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
diff --git a/apps/cientos-docs/.npmrc b/apps/cientos-docs/.npmrc
new file mode 100644
index 000000000..bf2e7648b
--- /dev/null
+++ b/apps/cientos-docs/.npmrc
@@ -0,0 +1 @@
+shamefully-hoist=true
diff --git a/apps/cientos-docs/CLAUDE.md b/apps/cientos-docs/CLAUDE.md
new file mode 100644
index 000000000..7398be60e
--- /dev/null
+++ b/apps/cientos-docs/CLAUDE.md
@@ -0,0 +1,281 @@
+# Cientos docs - CLAUDE.md
+
+This is a documentation app built with Nuxt v4 and Nuxt UI v4. It serves as a reference implementation for creating new documentation sites in the TresJS ecosystem.
+
+## Overview
+
+This docs provides a complete setup for creating documentation sites with:
+
+- Nuxt v4 with compatibility mode enabled
+- Nuxt UI v4 for beautiful, accessible components
+- Nuxt Content for markdown-based content
+- TresJS integration for 3D examples
+- Full-text search functionality
+- Dark mode support
+- SEO optimization
+
+## Architecture
+
+### App Structure
+
+```
+app/
+├── app.config.ts           # UI theme and app configuration
+├── app.vue                 # Root application component
+├── error.vue               # Error page component
+├── assets/css/             # Global styles
+├── components/             # Vue components
+│   ├── content/            # MDC prose components
+│   └── diagrams/           # Custom diagram components
+├── composables/            # Composable functions (useNavigation)
+├── layouts/                # Page layouts (docs.vue)
+├── pages/                  # Route pages
+│   ├── index.vue           # Landing page
+│   └── [...slug].vue       # Dynamic docs pages
+└── utils/                  # Utility functions
+```
+
+### Content Structure
+
+Content is organized in numbered directories for ordering:
+
+```
+content/
+├── index.md                # Landing page content
+├── 1.getting-started/      # Getting started section
+├── 2.guide/                # Guide section
+└── 3.api/                  # API reference section
+```
+
+## Key Features
+
+### Nuxt UI v4
+
+- Uses Nuxt UI v4 components (`UApp`, `UPage`, `UMain`, etc.)
+- Custom theme configuration in `app.config.ts`
+- Teal color scheme as primary
+- Custom CSS variables for patterns and gradients
+
+### Nuxt Content
+
+- Markdown with MDC (Markdown Components) syntax
+- Collection-based content management
+- Automatic table of contents generation
+- Search integration
+
+### TresJS Integration
+
+- Vue template compiler options configured for TresJS
+- Support for 3D scene components
+- Ready for interactive 3D examples
+
+### SEO & Meta
+
+- Configured SEO meta tags
+- Open Graph and Twitter card support
+- Dynamic titles and descriptions
+- Sitemap generation ready
+
+## Configuration
+
+### Theme Customization
+
+Edit `app/app.config.ts` to customize:
+
+```
+ui: {
+  colors: {
+    primary: 'teal',      // Change primary color
+    neutral: 'zinc'       // Change neutral color
+  },
+}
+```
+
+### Navigation
+
+Edit `app/composables/useNavigation.ts` to modify header navigation links.
+
+### Content Collections
+
+Content is organized using Nuxt Content collections defined in `content.config.ts`:
+
+- `landing` - Landing page (index.md)
+- `docs` - All documentation pages
+
+### LLM Documentation
+
+The `nuxt-llms` module is configured to generate LLM-friendly documentation at `/llms.txt` and `/llms-full.txt`.
+
+## Components
+
+### Layout Components
+
+- **AppHeader** - Site header with navigation, search, and color mode toggle
+- **AppFooter** - Footer with links and copyright
+- **AppSide** - Sidebar navigation for docs layout
+
+### Content Components
+
+- **ProseA** - Enhanced anchor links in markdown content
+
+### Diagram Components
+
+Custom SVG diagram components for technical documentation.
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- pnpm package manager
+
+### Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Development server
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Preview production build
+pnpm preview
+
+# Lint code
+pnpm lint
+
+# Type checking
+pnpm typecheck
+```
+
+## Styling
+
+### CSS Architecture
+
+- **Tailwind CSS v4** via `@import 'tailwindcss'`
+- **Nuxt UI** styles via `@import '@nuxt/ui'`
+- Custom theme variables in `main.css`
+- Pattern backgrounds (`.pattern-bg`, `.pattern-dot-bg`)
+
+### Color Palette
+
+Two custom color palettes are defined:
+
+- **Teal** (50-950) - Primary brand color
+- **Yellow/Brown** (50-950) - Accent color
+
+### Dark Mode
+
+Automatic dark mode with theme-aware pattern backgrounds and custom favicon switching.
+
+## Content Writing
+
+### Markdown Format
+
+```md
+---
+title: Page Title
+description: Page description for SEO
+---
+
+# Heading
+
+Content here with **bold** and *italic* text.
+
+::callout
+Custom MDC component
+::
+```
+
+### MDC Components
+
+Use Vue components directly in markdown:
+
+```md
+::block-hero
+---
+cta:
+  - Get started
+  - /getting-started
+---
+
+#title
+Hero Title
+
+#description
+Hero description
+::
+```
+
+## Deployment
+
+### Static Site Generation
+
+Configured for static site generation with Nitro prerendering:
+
+```
+nitro: {
+  prerender: {
+    routes: ['/'],
+    crawlLinks: true,
+  },
+}
+```
+
+### Environment Variables
+
+Create `.env` file for environment-specific configuration (use `.env.example` as reference).
+
+## Best Practices
+
+1. **Content Organization** - Use numbered prefixes for ordering
+2. **Component Naming** - Use PascalCase for components
+3. **MDC Syntax** - Leverage MDC for rich content
+4. **Accessibility** - All UI components are accessible by default
+5. **Performance** - Images are optimized via @nuxt/image
+6. **SEO** - Always include title and description frontmatter
+
+## Extending the Boilerplate
+
+### Adding New Sections
+
+1. Create new directory in `content/`
+2. Add index page with navigation
+3. Update `useNavigation.ts` if needed
+4. Update `llms` configuration in `nuxt.config.ts`
+
+### Custom Components
+
+1. Add components in `app/components/`
+2. MDC components go in `app/components/content/`
+3. Auto-imported by Nuxt
+
+### Styling Customization
+
+1. Update theme variables in `app.config.ts`
+2. Add custom CSS in `app/assets/css/main.css`
+3. Use Tailwind utilities for component styles
+
+## Troubleshooting
+
+### Build Issues
+
+- Ensure Node.js 18+ is installed
+- Clear `.nuxt` and `node_modules`, reinstall
+- Check `pnpm-workspace.yaml` includes `apps/*`
+
+### Content Not Rendering
+
+- Check frontmatter syntax
+- Verify collection configuration in `content.config.ts`
+- Ensure files use `.md` extension
+
+## Resources
+
+- [Nuxt Documentation](https://nuxt.com)
+- [Nuxt UI Documentation](https://ui.nuxt.com)
+- [Nuxt Content Documentation](https://content.nuxt.com)
+- [TresJS Documentation](https://docs.tresjs.org)
diff --git a/apps/cientos-docs/README.md b/apps/cientos-docs/README.md
new file mode 100644
index 000000000..e1fb321c8
--- /dev/null
+++ b/apps/cientos-docs/README.md
@@ -0,0 +1,120 @@
+# Cientos docs
+
+A modern documentation site built with Nuxt v4 and Nuxt UI v4.
+
+## Features
+
+- 🚀 **Nuxt v4** - Latest Nuxt framework with improved performance
+- 🎨 **Nuxt UI v4** - Beautiful, accessible UI components
+- 📝 **Nuxt Content** - File-based CMS for markdown content
+- 🔍 **Full-text Search** - Built-in search functionality
+- 🌙 **Dark Mode** - Automatic dark mode support
+- 📱 **Responsive** - Mobile-first responsive design
+- ⚡ **Fast** - Optimized for performance
+- 🎯 **SEO Optimized** - Built-in SEO best practices
+
+## Project Structure
+
+```
+apps/cientos-docs/
+├── app/                      # Nuxt app directory
+│   ├── assets/               # Styles and static assets
+│   ├── components/           # Vue components
+│   │   ├── content/          # MDC components
+│   │   └── diagrams/         # Diagram components
+│   ├── composables/          # Composable functions
+│   ├── layouts/              # Page layouts
+│   ├── pages/                # Route pages
+│   └── utils/                # Utility functions
+├── content/                  # Markdown content
+│   ├── 1.getting-started/    # Getting started docs
+│   ├── 2.guide/              # Guide section
+│   └── 3.api/                # API reference
+├── public/                   # Public static files
+└── nuxt.config.ts            # Nuxt configuration
+```
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 24+
+- pnpm package manager
+
+### Installation
+
+Install dependencies:
+
+```bash
+pnpm install --frozen-lockfile
+```
+
+### Development
+
+Start the development server:
+
+```bash
+pnpm dev
+```
+
+The site will be available at `http://localhost:3000`.
+
+### Build
+
+Build for production:
+
+```bash
+pnpm build
+```
+
+### Preview
+
+Preview the production build:
+
+```bash
+pnpm preview
+```
+
+## Content
+
+Content is written in Markdown with MDC (Markdown Components) syntax support. Add your content files in the `content/` directory.
+
+### Content Structure
+
+- `content/index.md` - Landing page
+- `content/1.getting-started/` - Getting started section
+- `content/2.guide/` - Guide section
+- `content/3.api/` - API reference section
+
+## Configuration
+
+### App Configuration
+
+Edit `app/app.config.ts` to customize:
+
+- UI theme colors
+- Header links
+- Footer links
+- SEO metadata
+
+### Nuxt Configuration
+
+Edit `nuxt.config.ts` to configure:
+
+- Nuxt modules
+- Build settings
+- Runtime config
+- SEO settings
+
+## Components
+
+The site includes several pre-built components:
+
+- **AppHeader** - Site header with navigation
+- **AppFooter** - Site footer with links
+- **AppSide** - Sidebar navigation
+- **ProseA** - Enhanced link component for content
+
+## License
+
+MIT
diff --git a/apps/cientos-docs/app/app.config.ts b/apps/cientos-docs/app/app.config.ts
new file mode 100644
index 000000000..73a65ba4f
--- /dev/null
+++ b/apps/cientos-docs/app/app.config.ts
@@ -0,0 +1,89 @@
+import type { AppConfigInput } from 'nuxt/schema'
+
+const newLocal = {
+  ui: {
+    colors: {
+      primary: 'yellow',
+      neutral: 'zinc',
+    },
+    card: {
+      slots: {
+        root: 'hover:bg-linear-[115deg,#272727 .06%,#171717]',
+        body: 'p-2 sm:p-3',
+      },
+    },
+    footer: {
+      slots: {
+        root: 'border-t border-default',
+        left: 'text-sm text-muted',
+      },
+    },
+  },
+  seo: {
+    siteName: 'Cientos docs',
+  },
+  header: {
+    title: '',
+    to: '/',
+    logo: {
+      alt: '',
+      light: '',
+      dark: '',
+    },
+    search: true,
+    colorMode: true,
+    links: [
+      {
+        icon: 'i-simple-icons-github',
+        to: 'https://github.com/tresjs/tres',
+        target: '_blank',
+        ariaLabel: 'GitHub',
+      },
+    ],
+  },
+  footer: {
+    credits: `Copyright © ${new Date().getFullYear()}`,
+    colorMode: false,
+    links: [{
+      'icon': 'i-lucide-globe',
+      'to': 'https://tresjs.org',
+      'target': '_blank',
+      'aria-label': 'TresJS Website',
+    }, {
+      'icon': 'i-simple-icons-discord',
+      'to': 'https://tresjs.org/discord',
+      'target': '_blank',
+      'aria-label': 'TresJS on Discord',
+    }, {
+      'icon': 'i-simple-icons-x',
+      'to': 'https://x.com/tresjs_dev',
+      'target': '_blank',
+      'aria-label': 'TresJS on X',
+    }, {
+      'icon': 'i-simple-icons-github',
+      'to': 'https://github.com/tresjs/tres',
+      'target': '_blank',
+      'aria-label': 'TresJS on GitHub',
+    }],
+  },
+  toc: {
+    title: 'Table of Contents',
+    bottom: {
+      title: 'Community',
+      edit: 'https://github.com/edit/main/docs/content',
+      links: [{
+        icon: 'i-lucide-heart',
+        label: 'Become a sponsor',
+        to: 'https://github.com/sponsors/tresjs',
+        target: '_blank',
+      }, {
+        icon: 'i-lucide-star',
+        label: 'Star on GitHub',
+        to: 'https://github.com/tresjs/tres',
+        target: '_blank',
+      }],
+    },
+  },
+} satisfies AppConfigInput
+
+export default defineAppConfig(newLocal)
diff --git a/apps/cientos-docs/app/app.vue b/apps/cientos-docs/app/app.vue
new file mode 100644
index 000000000..b68064b03
--- /dev/null
+++ b/apps/cientos-docs/app/app.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const { seo } = useAppConfig()
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
+})
+
+useHead({
+  meta: [
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+  ],
+  link: [
+    { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+  ],
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+useSeoMeta({
+  titleTemplate: title => title ? `${title} · Docs` : 'Cientos docs',
+  ogSiteName: seo?.siteName,
+  twitterCard: 'summary_large_image',
+  ogImage: '/og-image.png',
+  twitterImage: '/og-image.png',
+  ogUrl: 'https://example.com',
+  twitterTitle: 'Cientos docs',
+  twitterDescription: 'A documentation site for cientos package built with Nuxt v4 and Nuxt UI v4.',
+})
+
+provide(navigationInjectionKey, navigation)
+</script>
+
+<template>
+  <UApp>
+    <NuxtLoadingIndicator />
+
+    <AppHeader />
+
+    <UMain class="pattern-bg">
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </UMain>
+
+    <AppFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+  </UApp>
+</template>
diff --git a/apps/cientos-docs/app/assets/css/main.css b/apps/cientos-docs/app/assets/css/main.css
new file mode 100644
index 000000000..a74e3b22a
--- /dev/null
+++ b/apps/cientos-docs/app/assets/css/main.css
@@ -0,0 +1,70 @@
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+@source "../../../content/**/*";
+
+@theme static {
+  --font-display: 'Manrope', sans-serif;
+  --font-sans: 'Inter', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --breakpoint-3xl: 1920px;
+  --ui-pattern-fg: color-mix(in oklab, var(--ui-text) 5%, transparent);
+  --ui-pattern-bg: repeating-linear-gradient(
+    315deg,
+    var(--ui-pattern-fg) 0,
+    var(--ui-pattern-fg) 1px,
+    transparent 0,
+    transparent 50%
+  );
+  --ui-pattern-dot-fg: color-mix(in oklab, oklch(0.18 0.04 266.75) 5%, transparent);
+  --ui-pattern-dot-bg: radial-gradient(var(--ui-pattern-dot-fg) 1px, transparent 0);
+  --ui-header-height: 3rem;
+  /* Technical blueprint styles */
+  --ui-line-gap: 5px;
+  --ui-line-width: 1px;
+  --ui-line-offset: 172px;
+  --ui-line-color: var(--color-gray-200);
+
+  /* Teal Palette */
+  --color-teal-50: #f2fbf8;
+  --color-teal-100: #d3f4ea;
+  --color-teal-200: #a6e9d6;
+  --color-teal-300: #82dbc5;
+  --color-teal-400: #44bda2;
+  --color-teal-500: #2ba189;
+  --color-teal-600: #20816f;
+  --color-teal-700: #1d685b;
+  --color-teal-800: #1c534b;
+  --color-teal-900: #1b463f;
+  --color-teal-950: #0a2925;
+
+  /* Yellow/Brown Palette */
+  --color-yellow-50: #fff8eb;
+  --color-yellow-100: #feeac7;
+  --color-yellow-200: #fdd48a;
+  --color-yellow-300: #fbb03b;
+  --color-yellow-400: #fa9e25;
+  --color-yellow-500: #f47a0c;
+  --color-yellow-600: #b85607;
+  --color-yellow-700: #b3390a;
+  --color-yellow-800: #922b0e;
+  --color-yellow-900: #78250f;
+  --color-yellow-950: #451003;
+}
+
+.dark {
+  --ui-line-color: var(--color-gray-800);
+  --ui-pattern-dot-fg: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
+}
+
+.pattern-bg {
+  background-image: var(--ui-pattern-bg);
+  background-size: 10px 10px;
+  background-attachment: fixed;
+}
+
+.pattern-dot-bg {
+  background-image: var(--ui-pattern-dot-bg);
+  background-size: 10px 10px;
+  background-attachment: fixed;
+}
diff --git a/apps/cientos-docs/app/components/ApiList.vue b/apps/cientos-docs/app/components/ApiList.vue
new file mode 100644
index 000000000..d093e0c3f
--- /dev/null
+++ b/apps/cientos-docs/app/components/ApiList.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{
+  listName: string
+  path?: string
+}>()
+const route = useRoute()
+const base = props.path || (route.path || '/').replace(/\/$/, '')
+
+const { data } = await useAsyncData(props.listName, () =>
+  queryCollection('docs').where('path', 'LIKE', `${base}/%`).all())
+</script>
+
+<template>
+  <UPageGrid class="grid-cols-1 lg:grid-cols-2">
+    <UPageCard
+      v-for="doc in data"
+      :key="doc.path"
+      :title="doc.title || doc.path.split('/').pop()"
+      :description="doc.description"
+      :to="doc.path"
+    />
+  </UPageGrid>
+</template>
diff --git a/apps/cientos-docs/app/components/AppFooter.vue b/apps/cientos-docs/app/components/AppFooter.vue
new file mode 100644
index 000000000..a13a72945
--- /dev/null
+++ b/apps/cientos-docs/app/components/AppFooter.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const { footer } = useAppConfig()
+</script>
+
+<template>
+  <UFooter>
+    <template #left>
+      {{ footer.credits }}
+    </template>
+
+    <template #right>
+      <UColorModeButton v-if="footer?.colorMode" />
+
+      <template v-if="footer?.links">
+        <UButton
+          v-for="(link, index) of footer?.links"
+          :key="index"
+          v-bind="{ color: 'neutral',
+                    variant: 'ghost',
+                    ...link }"
+        />
+      </template>
+    </template>
+  </UFooter>
+</template>
diff --git a/apps/cientos-docs/app/components/AppHeader.vue b/apps/cientos-docs/app/components/AppHeader.vue
new file mode 100644
index 000000000..813e4aee7
--- /dev/null
+++ b/apps/cientos-docs/app/components/AppHeader.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const navigation = inject(navigationInjectionKey)
+
+const { header } = useAppConfig()
+
+const navItems: NavigationMenuItem[] = [
+  {
+    label: 'Guide',
+    to: '/getting-started/',
+  },
+  {
+    label: 'API',
+    to: '/api',
+  },
+]
+
+const route = useRoute()
+
+const version = useRuntimeConfig().public.pkgVersion
+</script>
+
+<template>
+  <UHeader
+    :ui="{ center: 'flex-1' }"
+    :to="header?.to || '/'"
+  >
+    <UContentSearchButton
+      v-if="header?.search"
+      :collapsed="false"
+      class="w-full"
+      variant="subtle"
+    />
+
+    <template
+      v-if="header?.logo?.dark || header?.logo?.light || header?.title"
+      #title
+    >
+      <UColorModeImage
+        v-if="header?.logo?.dark || header?.logo?.light"
+        :light="header?.logo?.light!"
+        :dark="header?.logo?.dark!"
+        :alt="header?.logo?.alt"
+        class="h-6 w-auto shrink-0"
+      />
+
+      <span v-else-if="header?.title">
+        {{ header.title }}
+      </span>
+    </template>
+
+    <template
+      v-else
+      #left
+    >
+      <NuxtLink
+        :to="header?.to || '/'"
+        class="mr-2"
+      >
+        <TheLogo class="w-auto h-6 shrink-0" />
+      </NuxtLink>
+      <UBadge
+        color="primary"
+        variant="subtle"
+        size="sm"
+      >
+        {{ version }}
+      </UBadge>
+    </template>
+
+    <template #right>
+      <UContentSearchButton
+        v-if="header?.search"
+        class="lg:hidden"
+        variant="subtle"
+      />
+
+      <UNavigationMenu
+        v-if="route.path === '/'"
+        :items="navItems"
+        class="hidden md:flex"
+      />
+
+      <UColorModeButton v-if="header?.colorMode" />
+
+      <template v-if="header?.links">
+        <UButton
+          v-for="(link, index) of header.links"
+          :key="index"
+          class="hidden md:flex"
+          v-bind="{ color: 'neutral',
+                    variant: 'ghost',
+                    ...link }"
+        />
+      </template>
+    </template>
+
+    <template #body>
+      <UContentNavigation
+        highlight
+        :navigation="navigation"
+      />
+    </template>
+  </UHeader>
+</template>
diff --git a/apps/cientos-docs/app/components/AppSide.vue b/apps/cientos-docs/app/components/AppSide.vue
new file mode 100644
index 000000000..937a93aba
--- /dev/null
+++ b/apps/cientos-docs/app/components/AppSide.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const navigation = inject(navigationInjectionKey)
+
+const route = useRoute()
+
+const { headerLinks } = useHeaderLinks()
+const links = computed(() => headerLinks.value ?? [])
+
+const asideNavigation = computed(() => {
+  const localPath = [route.params.slug?.[0]].filter(Boolean).join('/')
+
+  const result = navPageFromPath(`/${localPath}`, navigation?.value || [])?.children || []
+
+  return result
+})
+</script>
+
+<template>
+  <UPageAside>
+    <UPageAnchors :links="links" />
+    <USeparator
+      type="dashed"
+      class="my-6"
+    />
+    <UContentNavigation
+      class="pr-4"
+      highlight
+      :navigation="asideNavigation"
+      :default-open="false"
+    />
+  </UPageAside>
+</template>
diff --git a/apps/cientos-docs/app/components/DottedDiagram.vue b/apps/cientos-docs/app/components/DottedDiagram.vue
new file mode 100644
index 000000000..7b7b50774
--- /dev/null
+++ b/apps/cientos-docs/app/components/DottedDiagram.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="aspect-video p-2 my-8 w-full rounded-lg border border-gray-100 dark:border-gray-800 pattern-dot-bg bg-neutral-50 dark:bg-neutral-900 flex justify-center items-center">
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/cientos-docs/app/components/GithubMagicLink.vue b/apps/cientos-docs/app/components/GithubMagicLink.vue
new file mode 100644
index 000000000..578735408
--- /dev/null
+++ b/apps/cientos-docs/app/components/GithubMagicLink.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computedAsync } from '@vueuse/core'
+
+interface GitHubURLInfo {
+  type: 'permalink' | 'issue' | 'pr' | 'repo' | 'wiki' | 'unknown' // Only declare 'type' once, including 'wiki'
+  owner: string
+  repo: string
+  path?: string
+  lines?: string
+  number?: string
+  title?: string
+  page?: string // For wiki page name
+}
+
+const props = defineProps<{
+  href: string
+  target: string
+}>()
+
+// Parse GitHub URL to determine type and extract information
+const parseGitHubURL = (url: string): GitHubURLInfo => {
+  try {
+    const urlObj = new URL(url)
+    if (urlObj.hostname !== 'github.com') {
+      return { type: 'unknown', owner: '', repo: '' }
+    }
+    const pathParts = urlObj.pathname.split('/').filter(Boolean)
+    // Repo root: https://github.com/owner/repo
+    if (pathParts.length === 2) {
+      return { type: 'repo', owner: pathParts[0] || '', repo: pathParts[1] || '' }
+    }
+    if (pathParts.length < 2) {
+      return { type: 'unknown', owner: '', repo: '' }
+    }
+    const owner = pathParts[0] || ''
+    const repo = pathParts[1] || ''
+    // Check for issue URL
+    if (pathParts[2] === 'issues' && pathParts[3]) {
+      return {
+        type: 'issue',
+        owner,
+        repo,
+        number: pathParts[3]!,
+      }
+    }
+    // Check for PR URL
+    if (pathParts[2] === 'pull' && pathParts[3]) {
+      return {
+        type: 'pr',
+        owner,
+        repo,
+        number: pathParts[3]!,
+      }
+    }
+    // Check for wiki URL
+    if (pathParts[2] === 'wiki' && pathParts[3]) {
+      // Handles links like https://github.com/owner/repo/wiki/Page-Name
+      return {
+        type: 'wiki',
+        owner,
+        repo,
+        page: pathParts[3],
+      }
+    }
+    // Check for permalink URL (blob/commit/tree)
+    if (pathParts[2] === 'blob' && pathParts.length > 4) {
+      const filePath = pathParts.slice(4).join('/')
+      const hashLines = urlObj.hash ? urlObj.hash.substring(1) : ''
+      return {
+        type: 'permalink',
+        owner,
+        repo,
+        path: filePath,
+        lines: hashLines || undefined,
+      }
+    }
+    return { type: 'unknown', owner, repo }
+  }
+  catch {
+    return { type: 'unknown', owner: '', repo: '' }
+  }
+}
+
+// Fetch issue or PR title from GitHub API
+const fetchGitHubTitle = async (owner: string, repo: string, type: 'issue' | 'pr', number: string): Promise<string> => {
+  try {
+    const endpoint = type === 'issue' ? 'issues' : 'pulls'
+    const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/${endpoint}/${number}`)
+    if (!response.ok) {
+      throw new Error(`GitHub API error: ${response.status}`)
+    }
+    const data = await response.json()
+    return data.title || `${type === 'issue' ? 'Issue' : 'PR'} #${number}`
+  }
+  catch (error) {
+    console.warn('Failed to fetch GitHub title:', error)
+    return `${type === 'issue' ? 'Issue' : 'PR'} #${number}`
+  }
+}
+
+// Parse URL and get display information
+const urlInfo = computed(() => parseGitHubURL(props.href))
+
+const displayTitle = computedAsync(async () => {
+  if (urlInfo.value.type === 'permalink') {
+    return `${urlInfo.value.repo}/${urlInfo.value.path}`
+  }
+  else if (urlInfo.value.type === 'repo') {
+    return `${urlInfo.value.owner}/${urlInfo.value.repo}`
+  }
+  else if (urlInfo.value.type === 'issue' || urlInfo.value.type === 'pr') {
+    return await fetchGitHubTitle(urlInfo.value.owner, urlInfo.value.repo, urlInfo.value.type, urlInfo.value.number!)
+  }
+  else if (urlInfo.value.type === 'wiki') {
+    // For wiki, use the page slug (replace dashes with spaces for readability)
+    // Optionally, you could fetch the actual page title from the HTML, but this is a simple fallback
+    return urlInfo.value.page ? urlInfo.value.page.replace(/-/g, ' ') : 'Wiki Page'
+  }
+  else {
+    return props.href
+  }
+})
+
+const suffix = computed(() => {
+  if (urlInfo.value.type === 'permalink') {
+    return urlInfo.value.lines ? `#${urlInfo.value.lines}` : ''
+  }
+  else if (urlInfo.value.type === 'issue' || urlInfo.value.type === 'pr') {
+    return `#${urlInfo.value.number}`
+  }
+  else if (urlInfo.value.type === 'wiki') {
+    // For wiki links, always show 'wiki' as the suffix
+    return 'wiki'
+  }
+  else {
+    return ''
+  }
+})
+
+const icon = computed(() => {
+  if (urlInfo.value.type === 'issue') {
+    return 'octicon:issue-opened-16'
+  }
+  else if (urlInfo.value.type === 'pr') {
+    return 'octicon:git-pull-request-16'
+  }
+  else {
+    return 'i-simple-icons-github'
+  }
+})
+</script>
+
+<template>
+  <a
+    v-if="urlInfo.type !== 'unknown'"
+    :href="props.href"
+    :target="props.target"
+    class="inline-flex translate-y-0.5 items-center gap-1 bg-gray-100 hover:bg-gray-200 border border-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-md text-xs text-muted no-underline transition-colors"
+  >
+    <span class="flex items-center gap-1 px-1 py-0.5">
+      <UIcon
+        v-if="icon"
+        :name="icon"
+      />
+      {{ displayTitle }}
+    </span>
+    <span
+      v-if="suffix"
+      class="bg-gray-300 dark:bg-gray-700 px-1 py-0.5 rounded-r-md"
+    >
+      {{ suffix }}
+    </span>
+  </a>
+  <NuxtLink
+    v-else
+    class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary"
+    :href="props.href"
+    :target="props.target"
+  >
+    <slot></slot>
+  </NuxtLink>
+</template>
diff --git a/apps/cientos-docs/app/components/HomeScene.vue b/apps/cientos-docs/app/components/HomeScene.vue
new file mode 100644
index 000000000..8355b1e2a
--- /dev/null
+++ b/apps/cientos-docs/app/components/HomeScene.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <div class="w-full aspect-video">
+    <ClientOnly>
+      <TresCanvas alpha>
+        <TresPerspectiveCamera
+          :position="[5, 5, 5]"
+          :look-at="[0, 0, 0]"
+        />
+        <TresMesh>
+          <TresBoxGeometry />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </TresCanvas>
+    </ClientOnly>
+  </div>
+</template>
diff --git a/apps/cientos-docs/app/components/IntroScene.vue b/apps/cientos-docs/app/components/IntroScene.vue
new file mode 100644
index 000000000..84a68a50c
--- /dev/null
+++ b/apps/cientos-docs/app/components/IntroScene.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { NoToneMapping } from 'three'
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    :tone-mapping="NoToneMapping"
+  >
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :fov="45"
+      :aspect="1"
+      :near="0.1"
+      :far="1000"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh
+      :position="[-2, 6, 0]"
+      :rotation="[0, Math.PI, 0]"
+      cast-shadow
+    >
+      <TresConeGeometry :args="[1, 1.5, 3]" />
+      <TresMeshToonMaterial color="#82DBC5" />
+    </TresMesh>
+    <TresMesh
+      :position="[0, 4, 0]"
+      cast-shadow
+    >
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
+    </TresMesh>
+    <TresMesh
+      :position="[2, 2, 0]"
+      cast-shadow
+    >
+      <TresSphereGeometry />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresDirectionalLight
+      :position="[0, 8, 4]"
+      :intensity="0.7"
+      cast-shadow
+    />
+    <TresMesh
+      :rotation="[-Math.PI / 2, 0, 0]"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial color="#D3FC8A" />
+    </TresMesh>
+    <TresAmbientLight :intensity="0.75" />
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="2"
+      cast-shadow
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/ReadMore.vue b/apps/cientos-docs/app/components/ReadMore.vue
new file mode 100644
index 000000000..eb0feb818
--- /dev/null
+++ b/apps/cientos-docs/app/components/ReadMore.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { splitByCase, upperFirst } from 'scule'
+
+const props = defineProps<{
+  to: string
+  title: string
+}>()
+
+const createBreadcrumb = (link: string = 'Missing link') => {
+  if (link.startsWith('http')) {
+    return link
+  }
+  return link
+    .split('/')
+    .filter(Boolean)
+    .map(part =>
+      splitByCase(part)
+        .map(p => upperFirst(p))
+        .join(' '),
+    )
+    .join(' > ')
+    .replace('Api', 'API')
+}
+
+const computedTitle = computed<string>(() => props.title || createBreadcrumb(props.to))
+</script>
+
+<template>
+  <ProseCallout
+    icon="i-lucide-bookmark"
+    :to="to"
+    :aria-label="computedTitle"
+  >
+    <slot mdc-unwrap="p">
+      Read more in <span
+        class="font-bold"
+        v-text="computedTitle"
+      ></span>.
+    </slot>
+  </ProseCallout>
+</template>
diff --git a/apps/cientos-docs/app/components/RecipesList.vue b/apps/cientos-docs/app/components/RecipesList.vue
new file mode 100644
index 000000000..9ea8fb4fb
--- /dev/null
+++ b/apps/cientos-docs/app/components/RecipesList.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const { data } = await useAsyncData(() => queryCollection('docs').where('path', 'LIKE', '/cookbook/%').where('extension', '=', 'md').all())
+
+const recipes = computed(() => Array.from(data.value || []))
+</script>
+
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <UPageCard
+      v-for="recipe in recipes"
+      :key="recipe.id"
+      :title="recipe.title"
+      :description="recipe.description"
+      :to="recipe.path"
+      reverse
+      spotlight
+    >
+      <img
+        v-if="recipe.meta"
+        :src="recipe.meta.thumbnail as string"
+        alt="recipe thumbnail"
+        class="w-full h-full object-cover"
+      />
+    </UPageCard>
+  </div>
+</template>
diff --git a/apps/cientos-docs/app/components/SceneControlsWrapper.vue b/apps/cientos-docs/app/components/SceneControlsWrapper.vue
new file mode 100644
index 000000000..8f4a419f5
--- /dev/null
+++ b/apps/cientos-docs/app/components/SceneControlsWrapper.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TresLeches } from '@tresjs/leches'
+
+const route = useRoute()
+
+const uuid = `leches-${route.path.split('/').pop()}`
+
+provide(`uuid`, uuid)
+</script>
+
+<template>
+  <div class="w-full relative rounded-lg overflow-hidden border-1 border-muted dark:border-transparent">
+    <ClientOnly>
+      <div class="aspect-video">
+        <slot></slot>
+      </div>
+      <TresLeches :uuid="uuid" :float="false" class="!rounded-none" />
+    </ClientOnly>
+  </div>
+</template>
diff --git a/apps/cientos-docs/app/components/SceneWrapper.vue b/apps/cientos-docs/app/components/SceneWrapper.vue
new file mode 100644
index 000000000..0a6af07d9
--- /dev/null
+++ b/apps/cientos-docs/app/components/SceneWrapper.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// Simple wrapper for components without controls
+</script>
+
+<template>
+  <div class="w-full relative rounded-lg overflow-hidden border-1 border-muted dark:border-transparent">
+    <ClientOnly>
+      <div class="aspect-video">
+        <slot></slot>
+      </div>
+    </ClientOnly>
+  </div>
+</template>
diff --git a/apps/cientos-docs/app/components/TheGraph.vue b/apps/cientos-docs/app/components/TheGraph.vue
new file mode 100644
index 000000000..864c6da6d
--- /dev/null
+++ b/apps/cientos-docs/app/components/TheGraph.vue
@@ -0,0 +1,336 @@
+<script setup lang="ts">
+// I was trying to make this a generic graph component that could be reused in the docs
+// but it got a bit out of hand. Still, it might be useful for future stuff
+// so I'm keeping it here for now.
+import { useElementSize } from '@vueuse/core'
+
+interface DataPoint {
+  x: number
+  y: number
+}
+
+interface Dataset {
+  label: string
+  points: DataPoint[]
+  color: string
+  strokeWidth?: number
+  strokeDasharray?: string | number
+  strokeDashoffset?: string | number
+}
+
+interface UIConfig {
+  strokeWidth?: number
+  fillColor?: string
+  backgroundColor?: string
+  gridColor?: string
+  showGrid?: boolean
+  showAxes?: [boolean, boolean] // [x-axis, y-axis]
+  showLabels?: [boolean, boolean] // [x-labels, y-labels]
+  axisColor?: string
+  labelColor?: string
+  fontSize?: number
+  padding?: number
+  dataPadding?: [number, number] // [x-padding %, y-padding %] - extends data bounds
+  labelIntervals?: [number, number] // [x-interval, y-interval] - step size for labels
+}
+
+const props = withDefaults(defineProps<{
+  data: Dataset[]
+  ui?: UIConfig
+}>(), {
+  ui: () => ({}),
+})
+
+const defaultUI: Required<UIConfig> = {
+  strokeWidth: 1.5,
+  fillColor: 'transparent',
+  backgroundColor: 'transparent',
+  gridColor: '#e5e7eb',
+  showGrid: false,
+  showAxes: [false, false], // [x-axis, y-axis]
+  showLabels: [false, false], // [x-labels, y-labels]
+  axisColor: '#6b7280',
+  labelColor: '#374151',
+  fontSize: 12,
+  padding: 40,
+  dataPadding: [5, 10], // [x-padding %, y-padding %] - 5% x, 10% y
+  labelIntervals: [1, 0.5], // [x-interval, y-interval] - auto-calculated if not set
+}
+
+const config = computed(() => ({ ...defaultUI, ...props.ui }))
+
+const containerRef = ref<HTMLElement>()
+const { width, height } = useElementSize(containerRef)
+
+const viewBox = computed(() => `0 0 ${width.value} ${height.value}`)
+
+const bounds = computed(() => {
+  if (props.data.length === 0) {
+    return { minX: 0, maxX: 1, minY: 0, maxY: 1 }
+  }
+
+  const allPoints = props.data.flatMap(dataset => dataset.points)
+  const xs = allPoints.map(d => d.x)
+  const ys = allPoints.map(d => d.y)
+
+  const rawMinX = Math.min(...xs)
+  const rawMaxX = Math.max(...xs)
+  const rawMinY = Math.min(...ys)
+  const rawMaxY = Math.max(...ys)
+
+  // Apply data padding (percentage of range)
+  const [xPaddingPercent, yPaddingPercent] = config.value.dataPadding
+
+  const xRange = rawMaxX - rawMinX
+  const yRange = rawMaxY - rawMinY
+
+  const xPadding = (xRange * xPaddingPercent) / 100
+  const yPadding = (yRange * yPaddingPercent) / 100
+
+  return {
+    minX: rawMinX - xPadding,
+    maxX: rawMaxX + xPadding,
+    minY: rawMinY - yPadding,
+    maxY: rawMaxY + yPadding,
+  }
+})
+
+const scale = computed(() => {
+  const { minX, maxX, minY, maxY } = bounds.value
+  const { padding } = config.value
+
+  const dataWidth = maxX - minX
+  const dataHeight = maxY - minY
+
+  return {
+    x: (width.value - 2 * padding) / (dataWidth || 1),
+    y: (height.value - 2 * padding) / (dataHeight || 1),
+  }
+})
+
+const transformPoint = (point: DataPoint) => {
+  const { minX, minY } = bounds.value
+  const { padding } = config.value
+
+  return {
+    x: padding + (point.x - minX) * scale.value.x,
+    y: height.value - padding - (point.y - minY) * scale.value.y,
+  }
+}
+
+const createPathData = (points: DataPoint[]) => {
+  if (points.length === 0) {
+    return ''
+  }
+
+  const transformedPoints = points.map(transformPoint)
+
+  return transformedPoints.reduce((path, point, index) => {
+    const command = index === 0 ? 'M' : 'L'
+    return `${path} ${command} ${point.x} ${point.y}`
+  }, '').trim()
+}
+
+const gridLines = computed(() => {
+  const { padding } = config.value
+  const lines = []
+
+  // Vertical grid lines
+  for (let i = 1; i < 10; i++) {
+    const x = padding + (width.value - 2 * padding) * (i / 10)
+    lines.push({ x1: x, y1: padding, x2: x, y2: height.value - padding })
+  }
+
+  // Horizontal grid lines
+  for (let i = 1; i < 5; i++) {
+    const y = padding + (height.value - 2 * padding) * (i / 5)
+    lines.push({ x1: padding, y1: y, x2: width.value - padding, y2: y })
+  }
+
+  return lines
+})
+
+const axisLabels = computed(() => {
+  const { minX, maxX, minY, maxY } = bounds.value
+  const { padding, fontSize, labelIntervals } = config.value
+  const [xInterval, yInterval] = labelIntervals
+  const labels = []
+
+  // Y-axis labels (left side) - use interval
+  if (yInterval > 0) {
+    const startY = Math.ceil(minY / yInterval) * yInterval
+    const endY = Math.floor(maxY / yInterval) * yInterval
+
+    for (let value = startY; value <= endY; value += yInterval) {
+      // Handle floating point precision
+      const roundedValue = Math.round(value / yInterval) * yInterval
+      const y = height.value - padding - (roundedValue - minY) * scale.value.y
+
+      labels.push({
+        type: 'y',
+        x: padding - 10,
+        y: y + fontSize / 3,
+        text: roundedValue.toFixed(yInterval < 1 ? 1 : 0),
+      })
+    }
+  }
+
+  // X-axis labels (bottom) - use interval
+  if (xInterval > 0) {
+    const startX = Math.ceil(minX / xInterval) * xInterval
+    const endX = Math.floor(maxX / xInterval) * xInterval
+
+    for (let value = startX; value <= endX; value += xInterval) {
+      // Handle floating point precision
+      const roundedValue = Math.round(value / xInterval) * xInterval
+      const x = padding + (roundedValue - minX) * scale.value.x
+
+      labels.push({
+        type: 'x',
+        x,
+        y: height.value - padding + fontSize + 5,
+        text: roundedValue.toFixed(xInterval < 1 ? 1 : 0),
+      })
+    }
+  }
+
+  return labels
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="graph-container">
+    <svg
+      :viewBox="viewBox"
+      :width="width"
+      :height="height"
+      class="svg-graph"
+      :style="{ backgroundColor: config.backgroundColor }"
+    >
+      <!-- Background -->
+      <rect
+        :width="width"
+        :height="height"
+        :fill="config.backgroundColor"
+      />
+
+      <!-- Grid -->
+      <g v-if="config.showGrid" class="grid">
+        <line
+          v-for="(line, index) in gridLines"
+          :key="`grid-${index}`"
+          :x1="line.x1"
+          :y1="line.y1"
+          :x2="line.x2"
+          :y2="line.y2"
+          :stroke="config.gridColor"
+          stroke-width="1"
+          opacity="0.3"
+        />
+      </g>
+
+      <!-- Axes -->
+      <g class="axes">
+        <!-- X axis (y=0 line) -->
+        <line
+          v-if="config.showAxes[0]"
+          :x1="config.padding"
+          :y1="transformPoint({ x: 0,
+                                y: 0 }).y"
+          :x2="width - config.padding"
+          :y2="transformPoint({ x: 0,
+                                y: 0 }).y"
+          :stroke="config.axisColor"
+          stroke-width="2"
+        />
+
+        <!-- Y axis (x=0 line) -->
+        <line
+          v-if="config.showAxes[1]"
+          :x1="transformPoint({ x: 0,
+                                y: 0 }).x"
+          :y1="config.padding"
+          :x2="transformPoint({ x: 0,
+                                y: 0 }).x"
+          :y2="height - config.padding"
+          :stroke="config.axisColor"
+          stroke-width="2"
+        />
+      </g>
+
+      <!-- Axis labels -->
+      <g class="labels">
+        <text
+          v-for="(label, index) in axisLabels"
+          v-show="(label.type === 'x' && config.showLabels[0]) || (label.type === 'y' && config.showLabels[1])"
+          :key="`label-${index}`"
+          :x="label.x"
+          :y="label.y"
+          :fill="config.labelColor"
+          :font-size="config.fontSize"
+          :text-anchor="label.type === 'x' ? 'middle' : 'end'"
+          font-family="system-ui, sans-serif"
+        >
+          {{ label.text }}
+        </text>
+      </g>
+
+      <!-- Data paths and points for each dataset -->
+      <g v-for="(dataset, datasetIndex) in data" :key="`dataset-${datasetIndex}`">
+        <!-- Data path -->
+        <path
+          v-if="createPathData(dataset.points)"
+          :d="createPathData(dataset.points)"
+          :stroke="dataset.color"
+          :stroke-width="dataset.strokeWidth ?? config.strokeWidth"
+          v-bind="{
+            ...(dataset.strokeDasharray ? { 'stroke-dasharray': dataset.strokeDasharray } : {}),
+            ...(dataset.strokeDashoffset ? { 'stroke-dashoffset': dataset.strokeDashoffset } : {}),
+          }"
+          :fill="config.fillColor"
+          vector-effect="non-scaling-stroke"
+        />
+
+        <!-- Data points -->
+        <!-- <g class="data-points">
+          <circle
+            v-for="(point, index) in dataset.points"
+            :key="`point-${datasetIndex}-${index}`"
+            :cx="transformPoint(point).x"
+            :cy="transformPoint(point).y"
+            :r="(dataset.strokeWidth ?? config.strokeWidth) + 1"
+            :fill="dataset.color"
+          />
+        </g> -->
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.graph-container {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+.svg-graph {
+  width: 100%;
+  height: 100%;
+  transition: all 0.3s ease;
+}
+
+.grid line {
+  transition: opacity 0.3s ease;
+}
+
+path {
+  transition: d 0.5s ease;
+}
+
+circle {
+  transition:
+    cx 0.5s ease,
+    cy 0.5s ease;
+}
+</style>
diff --git a/apps/cientos-docs/app/components/TheLogo.vue b/apps/cientos-docs/app/components/TheLogo.vue
new file mode 100644
index 000000000..6c7b7930b
--- /dev/null
+++ b/apps/cientos-docs/app/components/TheLogo.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="flex items-center">
+    <img
+      src="/logo.svg"
+      alt="cientos.js"
+      class="h-3 mr-4"
+    />
+    <a
+      class="font-bold text-dark font-sans text-sm"
+      href="/"
+      title="Home"
+    >Cientos</a>
+  </div>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/Align.vue b/apps/cientos-docs/app/components/abstractions/Align.vue
new file mode 100644
index 000000000..7c7141d38
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/Align.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Align, OrbitControls } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+import { TresCanvas } from '@tresjs/core'
+
+const uuid = inject(`uuid`)
+
+const { top, bottom, left, right, front, back } = useControls({
+  top: false,
+  bottom: false,
+  left: false,
+  right: false,
+  front: false,
+  back: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#222">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <TresAxesHelper :scale="2" />
+
+    <Align :top="top" :right="right" :back="back" :left="left" :bottom="bottom" :front="front">
+      <TresMesh>
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </Align>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/Billboard.vue b/apps/cientos-docs/app/components/abstractions/Billboard.vue
new file mode 100644
index 000000000..3256e6e9d
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/Billboard.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Billboard, Box, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+import { Vector3 } from 'three'
+
+const uuid = inject(`uuid`)
+
+const COUNT = 5 * 5
+const positions = Array.from({ length: COUNT }).fill(0).map((_, i) => {
+  return new Vector3(
+    i % 5 - 2,
+    Math.floor(i / 5) - 2,
+    0,
+  )
+})
+
+const { lockX, lockY, lockZ } = useControls({
+  lockX: false,
+  lockY: false,
+  lockZ: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#222">
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[0, 0, 10]" />
+    <Billboard v-for="position, i of positions" :key="i" :position="position" :lock-x="lockX" :lock-y="lockY" :lock-z="lockZ">
+      <Box :scale="[0.5, 0.5, 0.001]">
+        <TresMeshNormalMaterial />
+      </Box>
+    </Billboard>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/CameraShake.vue b/apps/cientos-docs/app/components/abstractions/CameraShake.vue
new file mode 100644
index 000000000..a6751ae57
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/CameraShake.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { Box, CameraShake, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const {
+  intensity,
+  decay,
+  decayRate,
+  maxYaw,
+  maxPitch,
+  maxRoll,
+  yawFrequency,
+  pitchFrequency,
+  rollFrequency,
+} = useControls({
+  intensity: { value: 1, min: 0, max: 3, step: 0.01 },
+  decay: false,
+  decayRate: { value: 0.65, min: 0, max: 5, step: 0.01 },
+  maxYaw: { value: 0.01, min: 0, max: 0.5, step: 0.001 },
+  maxPitch: { value: 0.01, min: 0, max: 0.5, step: 0.001 },
+  maxRoll: { value: 0.01, min: 0, max: 0.5, step: 0.001 },
+  yawFrequency: { value: 0.1, min: 0, max: 5, step: 0.01 },
+  pitchFrequency: { value: 0.1, min: 0, max: 5, step: 0.01 },
+  rollFrequency: { value: 0.1, min: 0, max: 5, step: 0.01 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 2, 6]" />
+    <OrbitControls make-default />
+
+    <CameraShake
+      :intensity="intensity"
+      :decay="decay"
+      :decay-rate="decayRate"
+      :max-yaw="maxYaw"
+      :max-pitch="maxPitch"
+      :max-roll="maxRoll"
+      :yaw-frequency="yawFrequency"
+      :pitch-frequency="pitchFrequency"
+      :roll-frequency="rollFrequency"
+    />
+    <TresAxesHelper :scale="2" />
+    <TresGridHelper :position-y="-0.5" />
+    <Box>
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/Edges.vue b/apps/cientos-docs/app/components/abstractions/Edges.vue
new file mode 100644
index 000000000..3b17f60bc
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/Edges.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box, ContactShadows, Edges, OrbitControls } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const gl = {
+  clearColor: '#f6f6f6',
+  alpha: false,
+}
+
+const { colorEdges } = useControls({
+  colorEdges: '#505050',
+}, { uuid })
+
+const dataBoxes = ['#82DBC5', '#505050', '#F6B03B']
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <OrbitControls make-default auto-rotate />
+
+    <Box
+      v-for="(x, index) in [-1.5, 0, 1.5]"
+      :key="`docs-edges-demo-box-${index}`"
+      :position="[x, 0, 0]"
+    >
+      <TresMeshBasicMaterial :color="dataBoxes[index]" />
+      <Edges :color="colorEdges" />
+    </Box>
+
+    <ContactShadows :blur="2" :resolution="512" :opacity="0.25" :position-y="-1" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/Fit.vue b/apps/cientos-docs/app/components/abstractions/Fit.vue
new file mode 100644
index 000000000..86d42fb77
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/Fit.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Fit, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BoxGeometry, MeshNormalMaterial } from 'three'
+
+const positions: number[][] = []
+for (let y = 100; y <= 120; y += 10) {
+  for (let x = 100; x <= 120; x += 10) {
+    positions.push([x, y, 9999])
+  }
+}
+const geom = new BoxGeometry()
+const mat = new MeshNormalMaterial()
+</script>
+
+<template>
+  <TresCanvas clear-color="#4F4F4F">
+    <TresPerspectiveCamera :position="[1, 1, 1]" />
+    <OrbitControls />
+    <Fit>
+      <TresMesh
+        v-for="(pos, index) in positions"
+        :key="index"
+        :position="pos as [number, number, number]"
+        :args="[geom, mat]"
+      />
+    </Fit>
+    <TresGridHelper :args="[1, 1]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/Levioso.vue b/apps/cientos-docs/app/components/abstractions/Levioso.vue
new file mode 100644
index 000000000..0cf501700
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/Levioso.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Levioso, OrbitControls, useGLTF } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+import { shallowRef, watch } from 'vue'
+
+const uuid = inject(`uuid`)
+
+const { state } = useGLTF('/feather.glb')
+
+const featherRef = shallowRef()
+
+const { speed, rotationFactor, floatFactor } = useControls({
+  speed: { value: 4, min: 0, max: 10, step: 0.1 },
+  rotationFactor: { value: 1, min: 0, max: 5, step: 0.1 },
+  floatFactor: { value: 1, min: 0, max: 5, step: 0.1 },
+}, { uuid })
+
+watch((featherRef), (_feather) => {
+  if (_feather) {
+    _feather.rotation.y = -Math.PI / 4
+    _feather.updateMatrixWorld()
+  }
+})
+</script>
+
+<template>
+  <TresCanvas :clear-color="0x82DBC5">
+    <TresPerspectiveCamera :position="[0, 0, 5]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Levioso :speed="speed" :rotation-factor="rotationFactor" :float-factor="floatFactor">
+      <primitive
+        v-if="state?.scene"
+        ref="featherRef"
+        :object="state?.scene"
+        :position-y="-Math.PI / 4"
+      />
+    </Levioso>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
+    <TresGridHelper :position="[0, -1, 0]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/Mask.vue b/apps/cientos-docs/app/components/abstractions/Mask.vue
new file mode 100644
index 000000000..5a0f791dd
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/Mask.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Mask, OrbitControls, useMask } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { colorWrite } = useControls({
+  colorWrite: true,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas :stencil="true" clear-color="#4f4f4f">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <TresGroup :scale="2">
+      <TresMesh>
+        <TresRingGeometry :args="[0.95, 1, 64]" />
+        <TresMeshBasicMaterial color="white" />
+      </TresMesh>
+      <Mask :id="1" :color-write="colorWrite">
+        <TresCircleGeometry />
+        <TresMeshBasicMaterial color="#fbb03b" />
+      </Mask>
+    </TresGroup>
+
+    <TresMesh :position-z="-1">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial v-bind="useMask(1)" />
+    </TresMesh>
+
+    <TresMesh :position-z="-3">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial v-bind="useMask(1)" />
+    </TresMesh>
+
+    <TresMesh :position-z="-5">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/Outline.vue b/apps/cientos-docs/app/components/abstractions/Outline.vue
new file mode 100644
index 000000000..8acc35a41
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/Outline.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, Outline } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { color, screenspace, opacity, transparent, thickness, angle } = useControls({
+  color: '#82dbc5',
+  screenspace: false,
+  opacity: { value: 1, min: 0, max: 1, step: 0.1 },
+  transparent: false,
+  thickness: { value: 7.5, min: 0, max: 20, step: 0.5 },
+  angle: { value: Math.PI, min: 0, max: Math.PI, step: 0.1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#4f4f4f">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <TresAmbientLight :intensity="3.14" />
+    <TresPointLight :intensity="50" :position="[2, 2, 0]" />
+    <TresMesh :position-x="-0.75">
+      <TresBoxGeometry />
+      <TresMeshPhongMaterial />
+      <Outline :thickness="thickness" :color="color" :screenspace="screenspace" :opacity="opacity" :transparent="transparent" :angle="angle" />
+    </TresMesh>
+    <TresMesh :position-x="0.75">
+      <TresSphereGeometry :args="[0.5]" />
+      <TresMeshPhongMaterial />
+      <Outline :thickness="thickness" :color="color" :screenspace="screenspace" :opacity="opacity" :transparent="transparent" :angle="angle" />
+    </TresMesh>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/Sampler.vue b/apps/cientos-docs/app/components/abstractions/Sampler.vue
new file mode 100644
index 000000000..4ac5b6bb3
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/Sampler.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { OrbitControls, Sampler } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { count } = useControls({
+  count: { value: 50, min: 1, max: 500, step: 10 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+
+    <Sampler :count="count">
+      <TresMesh>
+        <TresTorusGeometry />
+      </TresMesh>
+
+      <TresInstancedMesh :args="[null!, null!, 1000]">
+        <TresBoxGeometry :args="[0.1, 0.1, 0.1]" />
+        <TresMeshNormalMaterial />
+      </TresInstancedMesh>
+    </Sampler>
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/ScreenSizer.vue b/apps/cientos-docs/app/components/abstractions/ScreenSizer.vue
new file mode 100644
index 000000000..b481e0087
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/ScreenSizer.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, ScreenSizer } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas clear-color="#3f3f3f">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+    <ScreenSizer>
+      <TresMesh>
+        <TresBoxGeometry :args="[100, 100, 100]" />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSizer>
+    <TresMesh :position-x="5">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/abstractions/ScreenSpace.vue b/apps/cientos-docs/app/components/abstractions/ScreenSpace.vue
new file mode 100644
index 000000000..ca8d09884
--- /dev/null
+++ b/apps/cientos-docs/app/components/abstractions/ScreenSpace.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { OrbitControls, ScreenSpace } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { top, left, depth } = useControls({
+  top: { value: 0.5, min: 0, max: 1, step: 0.05 },
+  left: { value: 0.5, min: 0, max: 1, step: 0.05 },
+  depth: { value: 5, min: -10, max: 30, step: 0.1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <!-- By default, children are centrered -->
+    <ScreenSpace :depth="depth" :top="top" :left="left">
+      <TresMesh>
+        <TresTorusGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSpace>
+
+    <ScreenSpace :depth="8" :left="0.1" :top="0.2">
+      <TresMesh>
+        <TresTorusGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSpace>
+
+    <ScreenSpace :depth="10" :right="0" :bottom="0">
+      <TresMesh>
+        <TresTorusGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSpace>
+
+    <ScreenSpace :depth="25" :left="0.25" :bottom="0.25">
+      <TresMesh>
+        <TresTorusGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSpace>
+
+    <ScreenSpace :depth="15" :right="0.25">
+      <TresMesh>
+        <TresTorusGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSpace>
+
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/content/ProseA.vue b/apps/cientos-docs/app/components/content/ProseA.vue
new file mode 100644
index 000000000..c68e17602
--- /dev/null
+++ b/apps/cientos-docs/app/components/content/ProseA.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = defineProps<
+  {
+    href: string
+    target: '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined
+  }
+>()
+
+const type = computed(() => {
+  if (props.href.startsWith('https://github.com/')) {
+    return 'github-at'
+  }
+  return 'link'
+})
+</script>
+
+<template>
+  <GithubMagicLink
+    v-if="type === 'github-at'"
+    :href="href"
+    target="_blank"
+  >
+    <slot></slot>
+  </GithubMagicLink>
+  <NuxtLink
+    v-else
+    class="text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary"
+    :href="href"
+    :target="target"
+  >
+    <slot></slot>
+  </NuxtLink>
+</template>
diff --git a/apps/cientos-docs/app/components/controls/CameraControls.vue b/apps/cientos-docs/app/components/controls/CameraControls.vue
new file mode 100644
index 000000000..cb5328ed2
--- /dev/null
+++ b/apps/cientos-docs/app/components/controls/CameraControls.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { Box, CameraControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { minPolarAngle, maxPolarAngle, minAzimuthAngle, maxAzimuthAngle, minDistance, maxDistance, minZoom, maxZoom, smoothTime, azimuthRotateSpeed, polarRotateSpeed, dollySpeed, truckSpeed } = useControls({
+  minPolarAngle: { value: 0, min: 0, max: Math.PI, step: 0.1 },
+  maxPolarAngle: { value: Math.PI, min: 0, max: Math.PI, step: 0.1 },
+  minAzimuthAngle: { value: -Infinity, min: -Math.PI * 2, max: Math.PI * 2, step: 0.1 },
+  maxAzimuthAngle: { value: Infinity, min: -Math.PI * 2, max: Math.PI * 2, step: 0.1 },
+  minDistance: { value: 0.001, min: 0, max: 20, step: 0.5 },
+  maxDistance: { value: 100, min: 5, max: 500, step: 5 },
+  minZoom: { value: 0.01, min: 0.01, max: 1, step: 0.01 },
+  maxZoom: { value: Infinity, min: 5, max: 100, step: 5 },
+  smoothTime: { value: 0.25, min: 0, max: 2, step: 0.05 },
+  azimuthRotateSpeed: { value: 1.0, min: 0, max: 5, step: 0.1 },
+  polarRotateSpeed: { value: 1.0, min: 0, max: 5, step: 0.1 },
+  dollySpeed: { value: 1.0, min: 0, max: 5, step: 0.1 },
+  truckSpeed: { value: 2.0, min: 0, max: 10, step: 0.5 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <CameraControls
+      make-default
+      :min-polar-angle="minPolarAngle"
+      :max-polar-angle="maxPolarAngle"
+      :min-azimuth-angle="minAzimuthAngle"
+      :max-azimuth-angle="maxAzimuthAngle"
+      :min-distance="minDistance"
+      :max-distance="maxDistance"
+      :min-zoom="minZoom"
+      :max-zoom="maxZoom"
+      :smooth-time="smoothTime"
+      :azimuth-rotate-speed="azimuthRotateSpeed"
+      :polar-rotate-speed="polarRotateSpeed"
+      :dolly-speed="dollySpeed"
+      :truck-speed="truckSpeed"
+    />
+    <TresGridHelper :position="[0, -1, 0]" />
+    <Box :scale="2">
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/controls/KeyboardControls.vue b/apps/cientos-docs/app/components/controls/KeyboardControls.vue
new file mode 100644
index 000000000..bb7021b49
--- /dev/null
+++ b/apps/cientos-docs/app/components/controls/KeyboardControls.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Box, KeyboardControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { moveSpeed } = useControls({
+  moveSpeed: { value: 0.1, min: 0.01, max: 1, step: 0.05 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 2, 8]" :look-at="[0, 0, 0]" />
+    <Box :scale="2">
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <KeyboardControls :move-speed="moveSpeed" />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/controls/MapControls.vue b/apps/cientos-docs/app/components/controls/MapControls.vue
new file mode 100644
index 000000000..806cdc00b
--- /dev/null
+++ b/apps/cientos-docs/app/components/controls/MapControls.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Box, MapControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { enableDamping, dampingFactor, autoRotate, autoRotateSpeed, enablePan, enableZoom, zoomSpeed, enableRotate, rotateSpeed, maxAzimuthAngle, minAzimuthAngle, maxPolarAngle, minPolarAngle, minDistance, maxDistance, minZoom, maxZoom } = useControls({
+  enableDamping: true,
+  dampingFactor: { value: 0.05, min: 0, max: 0.2, step: 0.01 },
+  autoRotate: false,
+  autoRotateSpeed: { value: 2, min: 0, max: 10, step: 0.5 },
+  enablePan: true,
+  enableZoom: true,
+  zoomSpeed: { value: 1, min: 0, max: 5, step: 0.1 },
+  enableRotate: true,
+  rotateSpeed: { value: 1, min: 0, max: 5, step: 0.1 },
+  maxAzimuthAngle: { value: Infinity, min: -Math.PI * 2, max: Math.PI * 2, step: 0.1 },
+  minAzimuthAngle: { value: -Infinity, min: -Math.PI * 2, max: Math.PI * 2, step: 0.1 },
+  maxPolarAngle: { value: Math.PI, min: 0, max: Math.PI, step: 0.1 },
+  minPolarAngle: { value: 0, min: 0, max: Math.PI, step: 0.1 },
+  minDistance: { value: 0, min: 0, max: 20, step: 0.5 },
+  maxDistance: { value: Infinity, min: 5, max: 100, step: 1 },
+  minZoom: { value: 0, min: 0, max: 10, step: 0.1 },
+  maxZoom: { value: Infinity, min: 5, max: 100, step: 1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <MapControls
+      :enable-damping="enableDamping"
+      :damping-factor="dampingFactor"
+      :auto-rotate="autoRotate"
+      :auto-rotate-speed="autoRotateSpeed"
+      :enable-pan="enablePan"
+      :enable-zoom="enableZoom"
+      :zoom-speed="zoomSpeed"
+      :enable-rotate="enableRotate"
+      :rotate-speed="rotateSpeed"
+      :max-azimuth-angle="maxAzimuthAngle"
+      :min-azimuth-angle="minAzimuthAngle"
+      :max-polar-angle="maxPolarAngle"
+      :min-polar-angle="minPolarAngle"
+      :min-distance="minDistance"
+      :max-distance="maxDistance"
+      :min-zoom="minZoom"
+      :max-zoom="maxZoom"
+    />
+    <Box :scale="2">
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/controls/OrbitControls.vue b/apps/cientos-docs/app/components/controls/OrbitControls.vue
new file mode 100644
index 000000000..3452d5969
--- /dev/null
+++ b/apps/cientos-docs/app/components/controls/OrbitControls.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Box, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { enableDamping, dampingFactor, autoRotate, autoRotateSpeed, enablePan, enableZoom, zoomSpeed, enableRotate, rotateSpeed, maxAzimuthAngle, minAzimuthAngle, maxPolarAngle, minPolarAngle, minDistance, maxDistance, minZoom, maxZoom } = useControls({
+  enableDamping: true,
+  dampingFactor: { value: 0.05, min: 0, max: 0.2, step: 0.01 },
+  autoRotate: false,
+  autoRotateSpeed: { value: 2, min: 0, max: 10, step: 0.5 },
+  enablePan: true,
+  enableZoom: true,
+  zoomSpeed: { value: 1, min: 0, max: 5, step: 0.1 },
+  enableRotate: true,
+  rotateSpeed: { value: 1, min: 0, max: 5, step: 0.1 },
+  maxAzimuthAngle: { value: Infinity, min: -Math.PI * 2, max: Math.PI * 2 },
+  minAzimuthAngle: { value: -Infinity, min: -Math.PI * 2, max: Math.PI * 2 },
+  maxPolarAngle: { value: Math.PI, min: 0, max: Math.PI, step: 0.1 },
+  minPolarAngle: { value: 0, min: 0, max: Math.PI, step: 0.1 },
+  minDistance: { value: 0, min: 0, max: 20, step: 0.5 },
+  maxDistance: { value: Infinity, min: 5, max: 100 },
+  minZoom: { value: 0, min: 0, max: 10, step: 0.1 },
+  maxZoom: { value: Infinity, min: 5, max: 100 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls
+      :enable-damping="enableDamping"
+      :damping-factor="dampingFactor"
+      :auto-rotate="autoRotate"
+      :auto-rotate-speed="autoRotateSpeed"
+      :enable-pan="enablePan"
+      :enable-zoom="enableZoom"
+      :zoom-speed="zoomSpeed"
+      :enable-rotate="enableRotate"
+      :rotate-speed="rotateSpeed"
+      :max-azimuth-angle="maxAzimuthAngle"
+      :min-azimuth-angle="minAzimuthAngle"
+      :max-polar-angle="maxPolarAngle"
+      :min-polar-angle="minPolarAngle"
+      :min-distance="minDistance"
+      :max-distance="maxDistance"
+      :min-zoom="minZoom"
+      :max-zoom="maxZoom"
+    />
+    <Box :scale="2">
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/controls/PointerLockControls.vue b/apps/cientos-docs/app/components/controls/PointerLockControls.vue
new file mode 100644
index 000000000..7373329e8
--- /dev/null
+++ b/apps/cientos-docs/app/components/controls/PointerLockControls.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Box, PointerLockControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { maxPolarAngle, minPolarAngle, pointerSpeed } = useControls({
+  maxPolarAngle: { value: Math.PI, min: 0, max: Math.PI, step: 0.1 },
+  minPolarAngle: { value: 0, min: 0, max: Math.PI, step: 0.1 },
+  pointerSpeed: { value: 1, min: 0.1, max: 5, step: 0.1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 0, 10]" />
+    <Box :scale="2">
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <PointerLockControls
+      :max-polar-angle="maxPolarAngle"
+      :min-polar-angle="minPolarAngle"
+      :pointer-speed="pointerSpeed"
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/controls/TransformControls.vue b/apps/cientos-docs/app/components/controls/TransformControls.vue
new file mode 100644
index 000000000..9f7ea75e6
--- /dev/null
+++ b/apps/cientos-docs/app/components/controls/TransformControls.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { OrbitControls, TransformControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { ref } from 'vue'
+
+const uuid = inject(`uuid`)
+
+const gl = {
+  clearColor: '#201919',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const boxRef = ref()
+
+const { mode, space, size, showX, showY, showZ } = useControls({
+  mode: {
+    value: 'translate',
+    options: [
+      {
+        text: 'Translate',
+        value: 'translate',
+      },
+      {
+        text: 'Rotate',
+        value: 'rotate',
+      },
+      {
+        text: 'Scale',
+        value: 'scale',
+      },
+    ],
+  },
+  space: {
+    value: 'local',
+    options: [
+      {
+        text: 'Local',
+        value: 'local',
+      },
+      {
+        text: 'World',
+        value: 'world',
+      },
+    ],
+  },
+  size: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  showX: true,
+  showY: true,
+  showZ: true,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :fov="45"
+      :near="0.1"
+      :far="1000"
+      :look-at="[-8, 3, -3]"
+    />
+    <OrbitControls make-default />
+    <TransformControls
+      :object="boxRef"
+      :mode="mode"
+      :space="space"
+      :size="size"
+      :show-x="showX"
+      :show-y="showY"
+      :show-z="showZ"
+    />
+    <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial />
+    </TresMesh>
+    <TresAmbientLight :intensity="0.5" />
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="1.5" cast-shadow />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/debug-performance/Helper.vue b/apps/cientos-docs/app/components/debug-performance/Helper.vue
new file mode 100644
index 000000000..d6889d183
--- /dev/null
+++ b/apps/cientos-docs/app/components/debug-performance/Helper.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Helper, OrbitControls } from '@tresjs/cientos'
+import { BoxHelper } from 'three'
+</script>
+
+<template>
+  <TresCanvas clear-color="#222">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial />
+      <Helper :type="BoxHelper" :args="[0xFF0000]" />
+    </TresMesh>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/debug-performance/Lod.vue b/apps/cientos-docs/app/components/debug-performance/Lod.vue
new file mode 100644
index 000000000..65bb41315
--- /dev/null
+++ b/apps/cientos-docs/app/components/debug-performance/Lod.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { LOD } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BoxGeometry, IcosahedronGeometry, MeshBasicMaterial, Vector3 } from 'three'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const COUNT = 100
+const positions = Array.from({ length: COUNT })
+  .fill(0)
+  .map((_, i) => {
+    return new Vector3(
+      Math.cos(i) * 1000,
+      Math.sin(i) * 1000,
+      8000 * ((2 * i) / COUNT - 1),
+    )
+  })
+
+const geometries = [
+  new IcosahedronGeometry(100, 4),
+  new IcosahedronGeometry(100, 0),
+  new BoxGeometry(100, 100, 100),
+]
+
+const materials = [
+  new MeshBasicMaterial({ color: '#fbb03b', wireframe: true }),
+  new MeshBasicMaterial({ color: '#82dbc5', wireframe: true }),
+  new MeshBasicMaterial({ color: '#4f4f4f', wireframe: true }),
+]
+
+const z = ref(0)
+let intervalId: ReturnType<typeof setInterval>
+let elapsed = 0
+
+onMounted(() => {
+  intervalId = setInterval(() => {
+    elapsed += 0.005
+    z.value = Math.cos(elapsed) * 5000
+  }, 1000 / 30)
+})
+
+onUnmounted(() => {
+  clearInterval(intervalId)
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="gray">
+    <TresPerspectiveCamera :near="1" :far="25000" :position="[0, 0, 0]" />
+    <TresGroup :position-z="z">
+      <LOD
+        v-for="(position, i) of positions"
+        :key="i"
+        :levels="[1500, 3000, 4000]"
+        :position="position"
+      >
+        <TresMesh :geometry="geometries[0]" :material="materials[0]" />
+        <TresMesh :geometry="geometries[1]" :material="materials[1]" />
+        <TresMesh :geometry="geometries[2]" :material="materials[2]" />
+      </LOD>
+    </TresGroup>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/diagrams/RenderLoop.vue b/apps/cientos-docs/app/components/diagrams/RenderLoop.vue
new file mode 100644
index 000000000..d2184a246
--- /dev/null
+++ b/apps/cientos-docs/app/components/diagrams/RenderLoop.vue
@@ -0,0 +1,611 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <svg
+    width="698"
+    height="242"
+    viewBox="0 0 698 242"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    class="transform scale-110"
+  >
+    <g filter="url(#filter0_dd_3619_2000)">
+      <rect
+        x="21"
+        y="47"
+        width="44.6549"
+        height="44.6549"
+        rx="6"
+        class="fill-white dark:fill-gray-800"
+      />
+    </g>
+    <path
+      d="M33.1134 86.1C32.6401 86.1 32.2268 86.0133 31.8734 85.84C31.5268 85.66 31.2568 85.41 31.0634 85.09C30.8701 84.7633 30.7734 84.38 30.7734 83.94V82.56C30.7734 82.12 30.8701 81.74 31.0634 81.42C31.2568 81.0933 31.5268 80.8433 31.8734 80.67C32.2268 80.49 32.6401 80.4 33.1134 80.4C33.8001 80.4 34.3501 80.58 34.7634 80.94C35.1834 81.2933 35.4034 81.7767 35.4234 82.39H34.1934C34.1734 82.1033 34.0634 81.8833 33.8634 81.73C33.6701 81.57 33.4201 81.49 33.1134 81.49C32.7734 81.49 32.5068 81.5833 32.3134 81.77C32.1201 81.95 32.0234 82.21 32.0234 82.55V83.94C32.0234 84.28 32.1201 84.5433 32.3134 84.73C32.5068 84.9167 32.7734 85.01 33.1134 85.01C33.4268 85.01 33.6801 84.9333 33.8734 84.78C34.0668 84.62 34.1734 84.3967 34.1934 84.11H35.4234C35.4034 84.7233 35.1834 85.21 34.7634 85.57C34.3501 85.9233 33.8001 86.1 33.1134 86.1ZM39.5195 86.1C39.1329 86.1 38.8095 86.0033 38.5495 85.81C38.2895 85.6167 38.1095 85.3467 38.0095 85V86H36.7895V78.7H38.0395V80.24L37.9995 81.5C38.1062 81.1533 38.2895 80.8833 38.5495 80.69C38.8162 80.4967 39.1395 80.4 39.5195 80.4C40.0595 80.4 40.4929 80.59 40.8195 80.97C41.1462 81.35 41.3095 81.8633 41.3095 82.51V84C41.3095 84.64 41.1429 85.15 40.8095 85.53C40.4829 85.91 40.0529 86.1 39.5195 86.1ZM39.0495 85.02C39.3695 85.02 39.6162 84.9333 39.7895 84.76C39.9695 84.5867 40.0595 84.32 40.0595 83.96V82.54C40.0595 82.18 39.9695 81.9133 39.7895 81.74C39.6162 81.5667 39.3695 81.48 39.0495 81.48C38.7295 81.48 38.4795 81.5767 38.2995 81.77C38.1262 81.9633 38.0395 82.2367 38.0395 82.59V83.91C38.0395 84.2633 38.1262 84.5367 38.2995 84.73C38.4795 84.9233 38.7295 85.02 39.0495 85.02ZM46.8656 87.2C45.8523 86.9667 45.069 86.51 44.5156 85.83C43.9623 85.1433 43.6856 84.2967 43.6856 83.29V81.5C43.6856 80.5 43.9623 79.66 44.5156 78.98C45.069 78.3 45.8523 77.84 46.8656 77.6V78.84C46.2723 78.98 45.8023 79.29 45.4556 79.77C45.1156 80.2433 44.9456 80.82 44.9456 81.5V83.29C44.9456 83.97 45.1156 84.55 45.4556 85.03C45.8023 85.5033 46.2723 85.81 46.8656 85.95V87.2ZM49.4117 83.28V82.12H52.6117V83.28H49.4117ZM54.7778 86V80.5H55.9978V81.53C56.0645 81.1833 56.2278 80.91 56.4878 80.71C56.7478 80.5033 57.0778 80.4 57.4778 80.4C58.0178 80.4 58.4478 80.58 58.7678 80.94C59.0945 81.3 59.2578 81.7833 59.2578 82.39V86H58.0078V82.54C58.0078 82.2 57.9178 81.94 57.7378 81.76C57.5645 81.5733 57.3278 81.48 57.0278 81.48C56.7145 81.48 56.4678 81.5733 56.2878 81.76C56.1145 81.9467 56.0278 82.2133 56.0278 82.56V86H54.7778ZM61.1539 87.2V85.95C61.7472 85.81 62.2139 85.5033 62.5539 85.03C62.9006 84.55 63.0739 83.97 63.0739 83.29V81.5C63.0739 80.82 62.9006 80.2433 62.5539 79.77C62.2139 79.29 61.7472 78.98 61.1539 78.84V77.6C62.1672 77.84 62.9506 78.3 63.5039 78.98C64.0572 79.66 64.3339 80.5 64.3339 81.5V83.29C64.3339 84.2967 64.0572 85.1433 63.5039 85.83C62.9506 86.51 62.1672 86.9667 61.1539 87.2Z"
+      class="fill-neutral-400 dark:fill-neutral-300"
+    />
+    <g filter="url(#filter1_dd_3619_2000)">
+      <rect
+        x="112"
+        y="47"
+        width="44.6549"
+        height="44.6549"
+        rx="6"
+        class="fill-white dark:fill-gray-800"
+      />
+    </g>
+    <path
+      d="M130.11 86.1C129.636 86.1 129.223 86.0133 128.87 85.84C128.523 85.66 128.253 85.41 128.06 85.09C127.866 84.7633 127.77 84.38 127.77 83.94V82.56C127.77 82.12 127.866 81.74 128.06 81.42C128.253 81.0933 128.523 80.8433 128.87 80.67C129.223 80.49 129.636 80.4 130.11 80.4C130.796 80.4 131.346 80.58 131.76 80.94C132.18 81.2933 132.4 81.7767 132.42 82.39H131.19C131.17 82.1033 131.06 81.8833 130.86 81.73C130.666 81.57 130.416 81.49 130.11 81.49C129.77 81.49 129.503 81.5833 129.31 81.77C129.116 81.95 129.02 82.21 129.02 82.55V83.94C129.02 84.28 129.116 84.5433 129.31 84.73C129.503 84.9167 129.77 85.01 130.11 85.01C130.423 85.01 130.676 84.9333 130.87 84.78C131.063 84.62 131.17 84.3967 131.19 84.11H132.42C132.4 84.7233 132.18 85.21 131.76 85.57C131.346 85.9233 130.796 86.1 130.11 86.1ZM136.516 86.1C136.129 86.1 135.806 86.0033 135.546 85.81C135.286 85.6167 135.106 85.3467 135.006 85V86H133.786V78.7H135.036V80.24L134.996 81.5C135.102 81.1533 135.286 80.8833 135.546 80.69C135.812 80.4967 136.136 80.4 136.516 80.4C137.056 80.4 137.489 80.59 137.816 80.97C138.142 81.35 138.306 81.8633 138.306 82.51V84C138.306 84.64 138.139 85.15 137.806 85.53C137.479 85.91 137.049 86.1 136.516 86.1ZM136.046 85.02C136.366 85.02 136.612 84.9333 136.786 84.76C136.966 84.5867 137.056 84.32 137.056 83.96V82.54C137.056 82.18 136.966 81.9133 136.786 81.74C136.612 81.5667 136.366 81.48 136.046 81.48C135.726 81.48 135.476 81.5767 135.296 81.77C135.122 81.9633 135.036 82.2367 135.036 82.59V83.91C135.036 84.2633 135.122 84.5367 135.296 84.73C135.476 84.9233 135.726 85.02 136.046 85.02ZM143.862 87.2C142.848 86.9667 142.065 86.51 141.512 85.83C140.958 85.1433 140.682 84.2967 140.682 83.29V81.5C140.682 80.5 140.958 79.66 141.512 78.98C142.065 78.3 142.848 77.84 143.862 77.6V78.84C143.268 78.98 142.798 79.29 142.452 79.77C142.112 80.2433 141.942 80.82 141.942 81.5V83.29C141.942 83.97 142.112 84.55 142.452 85.03C142.798 85.5033 143.268 85.81 143.862 85.95V87.2ZM148.008 86.1C147.534 86.1 147.124 86.01 146.778 85.83C146.431 85.65 146.161 85.3967 145.968 85.07C145.781 84.7433 145.688 84.36 145.688 83.92V80.78C145.688 80.34 145.781 79.9567 145.968 79.63C146.161 79.3033 146.431 79.05 146.778 78.87C147.124 78.69 147.534 78.6 148.008 78.6C148.481 78.6 148.891 78.69 149.238 78.87C149.584 79.05 149.851 79.3033 150.038 79.63C150.231 79.9567 150.328 80.34 150.328 80.78V83.92C150.328 84.36 150.231 84.7433 150.038 85.07C149.851 85.3967 149.584 85.65 149.238 85.83C148.891 86.01 148.481 86.1 148.008 86.1ZM148.008 85.02C148.354 85.02 148.631 84.92 148.838 84.72C149.044 84.52 149.148 84.2533 149.148 83.92V80.78C149.148 80.4467 149.044 80.18 148.838 79.98C148.638 79.78 148.361 79.68 148.008 79.68C147.654 79.68 147.374 79.78 147.168 79.98C146.968 80.18 146.868 80.4467 146.868 80.78V83.92C146.868 84.2533 146.971 84.52 147.178 84.72C147.384 84.92 147.661 85.02 148.008 85.02ZM148.008 82.95C147.808 82.95 147.648 82.8967 147.528 82.79C147.408 82.6767 147.348 82.52 147.348 82.32C147.348 82.12 147.408 81.97 147.528 81.87C147.648 81.7633 147.808 81.71 148.008 81.71C148.208 81.71 148.368 81.7633 148.488 81.87C148.608 81.97 148.668 82.12 148.668 82.32C148.668 82.52 148.608 82.6767 148.488 82.79C148.368 82.8967 148.208 82.95 148.008 82.95ZM152.154 87.2V85.95C152.747 85.81 153.214 85.5033 153.554 85.03C153.901 84.55 154.074 83.97 154.074 83.29V81.5C154.074 80.82 153.901 80.2433 153.554 79.77C153.214 79.29 152.747 78.98 152.154 78.84V77.6C153.167 77.84 153.951 78.3 154.504 78.98C155.057 79.66 155.334 80.5 155.334 81.5V83.29C155.334 84.2967 155.057 85.1433 154.504 85.83C153.951 86.51 153.167 86.9667 152.154 87.2Z"
+      class="fill-neutral-400 dark:fill-neutral-300"
+    />
+    <g filter="url(#filter2_dd_3619_2000)">
+      <rect
+        x="203"
+        y="47"
+        width="44.6549"
+        height="44.6549"
+        rx="6"
+        class="fill-white dark:fill-gray-800"
+      />
+    </g>
+    <path
+      d="M221.11 86.1C220.636 86.1 220.223 86.0133 219.87 85.84C219.523 85.66 219.253 85.41 219.06 85.09C218.866 84.7633 218.77 84.38 218.77 83.94V82.56C218.77 82.12 218.866 81.74 219.06 81.42C219.253 81.0933 219.523 80.8433 219.87 80.67C220.223 80.49 220.636 80.4 221.11 80.4C221.796 80.4 222.346 80.58 222.76 80.94C223.18 81.2933 223.4 81.7767 223.42 82.39H222.19C222.17 82.1033 222.06 81.8833 221.86 81.73C221.666 81.57 221.416 81.49 221.11 81.49C220.77 81.49 220.503 81.5833 220.31 81.77C220.116 81.95 220.02 82.21 220.02 82.55V83.94C220.02 84.28 220.116 84.5433 220.31 84.73C220.503 84.9167 220.77 85.01 221.11 85.01C221.423 85.01 221.676 84.9333 221.87 84.78C222.063 84.62 222.17 84.3967 222.19 84.11H223.42C223.4 84.7233 223.18 85.21 222.76 85.57C222.346 85.9233 221.796 86.1 221.11 86.1ZM227.516 86.1C227.129 86.1 226.806 86.0033 226.546 85.81C226.286 85.6167 226.106 85.3467 226.006 85V86H224.786V78.7H226.036V80.24L225.996 81.5C226.102 81.1533 226.286 80.8833 226.546 80.69C226.812 80.4967 227.136 80.4 227.516 80.4C228.056 80.4 228.489 80.59 228.816 80.97C229.142 81.35 229.306 81.8633 229.306 82.51V84C229.306 84.64 229.139 85.15 228.806 85.53C228.479 85.91 228.049 86.1 227.516 86.1ZM227.046 85.02C227.366 85.02 227.612 84.9333 227.786 84.76C227.966 84.5867 228.056 84.32 228.056 83.96V82.54C228.056 82.18 227.966 81.9133 227.786 81.74C227.612 81.5667 227.366 81.48 227.046 81.48C226.726 81.48 226.476 81.5767 226.296 81.77C226.122 81.9633 226.036 82.2367 226.036 82.59V83.91C226.036 84.2633 226.122 84.5367 226.296 84.73C226.476 84.9233 226.726 85.02 227.046 85.02ZM234.862 87.2C233.848 86.9667 233.065 86.51 232.512 85.83C231.958 85.1433 231.682 84.2967 231.682 83.29V81.5C231.682 80.5 231.958 79.66 232.512 78.98C233.065 78.3 233.848 77.84 234.862 77.6V78.84C234.268 78.98 233.798 79.29 233.452 79.77C233.112 80.2433 232.942 80.82 232.942 81.5V83.29C232.942 83.97 233.112 84.55 233.452 85.03C233.798 85.5033 234.268 85.81 234.862 85.95V87.2ZM236.778 86V80.5H237.998V81.53C238.064 81.1833 238.228 80.91 238.488 80.71C238.748 80.5033 239.078 80.4 239.478 80.4C240.018 80.4 240.448 80.58 240.768 80.94C241.094 81.3 241.258 81.7833 241.258 82.39V86H240.008V82.54C240.008 82.2 239.918 81.94 239.738 81.76C239.564 81.5733 239.328 81.48 239.028 81.48C238.714 81.48 238.468 81.5733 238.288 81.76C238.114 81.9467 238.028 82.2133 238.028 82.56V86H236.778ZM243.154 87.2V85.95C243.747 85.81 244.214 85.5033 244.554 85.03C244.901 84.55 245.074 83.97 245.074 83.29V81.5C245.074 80.82 244.901 80.2433 244.554 79.77C244.214 79.29 243.747 78.98 243.154 78.84V77.6C244.167 77.84 244.951 78.3 245.504 78.98C246.057 79.66 246.334 80.5 246.334 81.5V83.29C246.334 84.2967 246.057 85.1433 245.504 85.83C244.951 86.51 244.167 86.9667 243.154 87.2Z"
+      class="fill-neutral-400 dark:fill-neutral-300"
+    />
+    <path
+      d="M134.354 150.646C134.158 150.451 133.842 150.451 133.646 150.646L130.464 153.828C130.269 154.024 130.269 154.34 130.464 154.536C130.66 154.731 130.976 154.731 131.172 154.536L134 151.707L136.828 154.536C137.024 154.731 137.34 154.731 137.536 154.536C137.731 154.34 137.731 154.024 137.536 153.828L134.354 150.646ZM134 203H134.5V151H134H133.5V203H134Z"
+      class="fill-neutral-400 dark:fill-neutral-200"
+    />
+    <path
+      d="M571.354 150.646C571.158 150.451 570.842 150.451 570.646 150.646L567.464 153.828C567.269 154.024 567.269 154.34 567.464 154.536C567.66 154.731 567.976 154.731 568.172 154.536L571 151.707L573.828 154.536C574.024 154.731 574.34 154.731 574.536 154.536C574.731 154.34 574.731 154.024 574.536 153.828L571.354 150.646ZM571 203H571.5V151H571H570.5V203H571Z"
+      class="fill-neutral-400 dark:fill-neutral-200"
+    />
+    <g filter="url(#filter3_dd_3619_2000)">
+      <rect
+        x="27"
+        y="212"
+        width="221"
+        height="26"
+        rx="13"
+        class="fill-white dark:fill-gray-800"
+      />
+    </g>
+    <path
+      d="M68 228.09C67.2933 228.09 66.7333 227.893 66.32 227.5C65.9067 227.1 65.7 226.563 65.7 225.89V224.61C65.7 223.93 65.9067 223.393 66.32 223C66.7333 222.607 67.2933 222.41 68 222.41C68.7067 222.41 69.2667 222.607 69.68 223C70.0933 223.393 70.3 223.93 70.3 224.61V225.89C70.3 226.563 70.0933 227.1 69.68 227.5C69.2667 227.893 68.7067 228.09 68 228.09ZM68 227C68.3333 227 68.59 226.91 68.77 226.73C68.9567 226.543 69.05 226.277 69.05 225.93V224.57C69.05 224.223 68.9567 223.96 68.77 223.78C68.59 223.593 68.3333 223.5 68 223.5C67.6667 223.5 67.4067 223.593 67.22 223.78C67.04 223.96 66.95 224.223 66.95 224.57V225.93C66.95 226.277 67.04 226.543 67.22 226.73C67.4067 226.91 67.6667 227 68 227ZM71.7661 228V222.5H72.9861V223.53C73.0528 223.183 73.2161 222.91 73.4761 222.71C73.7361 222.503 74.0661 222.4 74.4661 222.4C75.0061 222.4 75.4361 222.58 75.7561 222.94C76.0828 223.3 76.2461 223.783 76.2461 224.39V228H74.9961V224.54C74.9961 224.2 74.9061 223.94 74.7261 223.76C74.5528 223.573 74.3161 223.48 74.0161 223.48C73.7028 223.48 73.4561 223.573 73.2761 223.76C73.1028 223.947 73.0161 224.213 73.0161 224.56V228H71.7661ZM77.7622 228V220.7H80.0022C80.7022 220.7 81.2589 220.87 81.6722 221.21C82.0922 221.55 82.3022 222.007 82.3022 222.58C82.3022 222.98 82.1855 223.323 81.9522 223.61C81.7255 223.897 81.4289 224.07 81.0622 224.13V224.15C81.3355 224.183 81.5789 224.283 81.7922 224.45C82.0055 224.61 82.1722 224.82 82.2922 225.08C82.4122 225.333 82.4722 225.613 82.4722 225.92C82.4722 226.34 82.3755 226.707 82.1822 227.02C81.9889 227.333 81.7155 227.577 81.3622 227.75C81.0089 227.917 80.5922 228 80.1122 228H77.7622ZM78.9822 223.71H79.9822C80.3089 223.71 80.5689 223.623 80.7622 223.45C80.9555 223.27 81.0522 223.027 81.0522 222.72C81.0522 222.42 80.9555 222.183 80.7622 222.01C80.5755 221.83 80.3155 221.74 79.9822 221.74H78.9822V223.71ZM78.9822 226.96H80.0422C80.4089 226.96 80.6955 226.863 80.9022 226.67C81.1155 226.47 81.2222 226.2 81.2222 225.86C81.2222 225.52 81.1155 225.247 80.9022 225.04C80.6955 224.827 80.4089 224.72 80.0422 224.72H78.9822V226.96ZM85.9983 228.1C85.5316 228.1 85.1249 228.01 84.7783 227.83C84.4316 227.65 84.1616 227.397 83.9683 227.07C83.7816 226.737 83.6883 226.347 83.6883 225.9V224.6C83.6883 224.153 83.7816 223.767 83.9683 223.44C84.1616 223.107 84.4316 222.85 84.7783 222.67C85.1249 222.49 85.5316 222.4 85.9983 222.4C86.4583 222.4 86.8583 222.49 87.1983 222.67C87.5449 222.85 87.8116 223.103 87.9983 223.43C88.1916 223.75 88.2883 224.127 88.2883 224.56V225.56H84.8883V225.94C84.8883 226.313 84.9849 226.597 85.1783 226.79C85.3716 226.977 85.6449 227.07 85.9983 227.07C86.2583 227.07 86.4783 227.027 86.6583 226.94C86.8449 226.847 86.9549 226.713 86.9883 226.54H88.2283C88.1416 227.013 87.8949 227.393 87.4883 227.68C87.0816 227.96 86.5849 228.1 85.9983 228.1ZM84.8883 224.56V224.75L87.0883 224.74V224.55C87.0883 224.17 86.9949 223.877 86.8083 223.67C86.6216 223.463 86.3516 223.36 85.9983 223.36C85.6316 223.36 85.3549 223.467 85.1683 223.68C84.9816 223.887 84.8883 224.18 84.8883 224.56ZM90.9844 228V224.38H89.4744V223.25H90.9844V222.28C90.9844 221.8 91.1444 221.417 91.4644 221.13C91.7844 220.843 92.2077 220.7 92.7344 220.7H94.3444V221.8H92.7644C92.6044 221.8 92.4744 221.847 92.3744 221.94C92.281 222.027 92.2344 222.147 92.2344 222.3V223.25H94.3444V224.38H92.2344V228H90.9844ZM97.9805 228.09C97.2738 228.09 96.7138 227.893 96.3005 227.5C95.8871 227.1 95.6805 226.563 95.6805 225.89V224.61C95.6805 223.93 95.8871 223.393 96.3005 223C96.7138 222.607 97.2738 222.41 97.9805 222.41C98.6871 222.41 99.2471 222.607 99.6605 223C100.074 223.393 100.28 223.93 100.28 224.61V225.89C100.28 226.563 100.074 227.1 99.6605 227.5C99.2471 227.893 98.6871 228.09 97.9805 228.09ZM97.9805 227C98.3138 227 98.5705 226.91 98.7505 226.73C98.9371 226.543 99.0305 226.277 99.0305 225.93V224.57C99.0305 224.223 98.9371 223.96 98.7505 223.78C98.5705 223.593 98.3138 223.5 97.9805 223.5C97.6471 223.5 97.3871 223.593 97.2005 223.78C97.0205 223.96 96.9305 224.223 96.9305 224.57V225.93C96.9305 226.277 97.0205 226.543 97.2005 226.73C97.3871 226.91 97.6471 227 97.9805 227ZM101.947 228V222.5H103.167V223.57C103.233 223.21 103.397 222.927 103.657 222.72C103.923 222.507 104.267 222.4 104.687 222.4C105.247 222.4 105.683 222.58 105.997 222.94C106.31 223.3 106.467 223.803 106.467 224.45V224.97H105.217V224.51C105.217 224.177 105.13 223.923 104.957 223.75C104.783 223.57 104.537 223.48 104.217 223.48C103.883 223.48 103.63 223.58 103.457 223.78C103.283 223.98 103.197 224.263 103.197 224.63V228H101.947ZM109.983 228.1C109.516 228.1 109.109 228.01 108.763 227.83C108.416 227.65 108.146 227.397 107.953 227.07C107.766 226.737 107.673 226.347 107.673 225.9V224.6C107.673 224.153 107.766 223.767 107.953 223.44C108.146 223.107 108.416 222.85 108.763 222.67C109.109 222.49 109.516 222.4 109.983 222.4C110.443 222.4 110.843 222.49 111.183 222.67C111.529 222.85 111.796 223.103 111.983 223.43C112.176 223.75 112.273 224.127 112.273 224.56V225.56H108.873V225.94C108.873 226.313 108.969 226.597 109.163 226.79C109.356 226.977 109.629 227.07 109.983 227.07C110.243 227.07 110.463 227.027 110.643 226.94C110.829 226.847 110.939 226.713 110.973 226.54H112.213C112.126 227.013 111.879 227.393 111.473 227.68C111.066 227.96 110.569 228.1 109.983 228.1ZM108.873 224.56V224.75L111.073 224.74V224.55C111.073 224.17 110.979 223.877 110.793 223.67C110.606 223.463 110.336 223.36 109.983 223.36C109.616 223.36 109.339 223.467 109.153 223.68C108.966 223.887 108.873 224.18 108.873 224.56ZM113.739 228V220.7H116.039C116.525 220.7 116.945 220.79 117.299 220.97C117.659 221.15 117.939 221.403 118.139 221.73C118.339 222.05 118.439 222.43 118.439 222.87C118.439 223.357 118.319 223.783 118.079 224.15C117.839 224.51 117.515 224.767 117.109 224.92L118.539 228H117.169L115.889 225.1H114.979V228H113.739ZM114.979 224H116.039C116.392 224 116.669 223.903 116.869 223.71C117.069 223.517 117.169 223.25 117.169 222.91C117.169 222.57 117.065 222.3 116.859 222.1C116.659 221.9 116.385 221.8 116.039 221.8H114.979V224ZM121.975 228.1C121.508 228.1 121.102 228.01 120.755 227.83C120.408 227.65 120.138 227.397 119.945 227.07C119.758 226.737 119.665 226.347 119.665 225.9V224.6C119.665 224.153 119.758 223.767 119.945 223.44C120.138 223.107 120.408 222.85 120.755 222.67C121.102 222.49 121.508 222.4 121.975 222.4C122.435 222.4 122.835 222.49 123.175 222.67C123.522 222.85 123.788 223.103 123.975 223.43C124.168 223.75 124.265 224.127 124.265 224.56V225.56H120.865V225.94C120.865 226.313 120.962 226.597 121.155 226.79C121.348 226.977 121.622 227.07 121.975 227.07C122.235 227.07 122.455 227.027 122.635 226.94C122.822 226.847 122.932 226.713 122.965 226.54H124.205C124.118 227.013 123.872 227.393 123.465 227.68C123.058 227.96 122.562 228.1 121.975 228.1ZM120.865 224.56V224.75L123.065 224.74V224.55C123.065 224.17 122.972 223.877 122.785 223.67C122.598 223.463 122.328 223.36 121.975 223.36C121.608 223.36 121.332 223.467 121.145 223.68C120.958 223.887 120.865 224.18 120.865 224.56ZM125.731 228V222.5H126.951V223.53C127.018 223.183 127.181 222.91 127.441 222.71C127.701 222.503 128.031 222.4 128.431 222.4C128.971 222.4 129.401 222.58 129.721 222.94C130.048 223.3 130.211 223.783 130.211 224.39V228H128.961V224.54C128.961 224.2 128.871 223.94 128.691 223.76C128.518 223.573 128.281 223.48 127.981 223.48C127.668 223.48 127.421 223.573 127.241 223.76C127.068 223.947 126.981 224.213 126.981 224.56V228H125.731ZM133.457 228.1C132.924 228.1 132.49 227.91 132.157 227.53C131.83 227.15 131.667 226.64 131.667 226V224.51C131.667 223.863 131.83 223.35 132.157 222.97C132.484 222.59 132.917 222.4 133.457 222.4C133.837 222.4 134.157 222.497 134.417 222.69C134.684 222.883 134.87 223.153 134.977 223.5L134.937 222.24V220.7H136.187V228H134.967V227C134.867 227.347 134.687 227.617 134.427 227.81C134.167 228.003 133.844 228.1 133.457 228.1ZM133.927 227.02C134.247 227.02 134.494 226.923 134.667 226.73C134.847 226.537 134.937 226.263 134.937 225.91V224.59C134.937 224.237 134.847 223.963 134.667 223.77C134.494 223.577 134.247 223.48 133.927 223.48C133.607 223.48 133.357 223.567 133.177 223.74C133.004 223.913 132.917 224.18 132.917 224.54V225.96C132.917 226.32 133.004 226.587 133.177 226.76C133.357 226.933 133.607 227.02 133.927 227.02ZM139.963 228.1C139.496 228.1 139.09 228.01 138.743 227.83C138.396 227.65 138.126 227.397 137.933 227.07C137.746 226.737 137.653 226.347 137.653 225.9V224.6C137.653 224.153 137.746 223.767 137.933 223.44C138.126 223.107 138.396 222.85 138.743 222.67C139.09 222.49 139.496 222.4 139.963 222.4C140.423 222.4 140.823 222.49 141.163 222.67C141.51 222.85 141.776 223.103 141.963 223.43C142.156 223.75 142.253 224.127 142.253 224.56V225.56H138.853V225.94C138.853 226.313 138.95 226.597 139.143 226.79C139.336 226.977 139.61 227.07 139.963 227.07C140.223 227.07 140.443 227.027 140.623 226.94C140.81 226.847 140.92 226.713 140.953 226.54H142.193C142.106 227.013 141.86 227.393 141.453 227.68C141.046 227.96 140.55 228.1 139.963 228.1ZM138.853 224.56V224.75L141.053 224.74V224.55C141.053 224.17 140.96 223.877 140.773 223.67C140.586 223.463 140.316 223.36 139.963 223.36C139.596 223.36 139.32 223.467 139.133 223.68C138.946 223.887 138.853 224.18 138.853 224.56ZM143.919 228V222.5H145.139V223.57C145.206 223.21 145.369 222.927 145.629 222.72C145.896 222.507 146.239 222.4 146.659 222.4C147.219 222.4 147.656 222.58 147.969 222.94C148.283 223.3 148.439 223.803 148.439 224.45V224.97H147.189V224.51C147.189 224.177 147.103 223.923 146.929 223.75C146.756 223.57 146.509 223.48 146.189 223.48C145.856 223.48 145.603 223.58 145.429 223.78C145.256 223.98 145.169 224.263 145.169 224.63V228H143.919Z"
+      fill="#6A7282"
+    />
+    <path
+      d="M153.795 229.2C152.782 228.967 151.999 228.51 151.445 227.83C150.892 227.143 150.615 226.297 150.615 225.29V223.5C150.615 222.5 150.892 221.66 151.445 220.98C151.999 220.3 152.782 219.84 153.795 219.6V220.84C153.202 220.98 152.732 221.29 152.385 221.77C152.045 222.243 151.875 222.82 151.875 223.5V225.29C151.875 225.97 152.045 226.55 152.385 227.03C152.732 227.503 153.202 227.81 153.795 227.95V229.2ZM158.031 228.1C157.558 228.1 157.145 228.013 156.791 227.84C156.445 227.66 156.175 227.41 155.981 227.09C155.788 226.763 155.691 226.38 155.691 225.94V224.56C155.691 224.12 155.788 223.74 155.981 223.42C156.175 223.093 156.445 222.843 156.791 222.67C157.145 222.49 157.558 222.4 158.031 222.4C158.718 222.4 159.268 222.58 159.681 222.94C160.101 223.293 160.321 223.777 160.341 224.39H159.111C159.091 224.103 158.981 223.883 158.781 223.73C158.588 223.57 158.338 223.49 158.031 223.49C157.691 223.49 157.425 223.583 157.231 223.77C157.038 223.95 156.941 224.21 156.941 224.55V225.94C156.941 226.28 157.038 226.543 157.231 226.73C157.425 226.917 157.691 227.01 158.031 227.01C158.345 227.01 158.598 226.933 158.791 226.78C158.985 226.62 159.091 226.397 159.111 226.11H160.341C160.321 226.723 160.101 227.21 159.681 227.57C159.268 227.923 158.718 228.1 158.031 228.1ZM164.438 228.1C164.051 228.1 163.728 228.003 163.468 227.81C163.208 227.617 163.028 227.347 162.928 227V228H161.708V220.7H162.958V222.24L162.918 223.5C163.024 223.153 163.208 222.883 163.468 222.69C163.734 222.497 164.058 222.4 164.438 222.4C164.978 222.4 165.411 222.59 165.738 222.97C166.064 223.35 166.228 223.863 166.228 224.51V226C166.228 226.64 166.061 227.15 165.728 227.53C165.401 227.91 164.971 228.1 164.438 228.1ZM163.968 227.02C164.288 227.02 164.534 226.933 164.708 226.76C164.888 226.587 164.978 226.32 164.978 225.96V224.54C164.978 224.18 164.888 223.913 164.708 223.74C164.534 223.567 164.288 223.48 163.968 223.48C163.648 223.48 163.398 223.577 163.218 223.77C163.044 223.963 162.958 224.237 162.958 224.59V225.91C162.958 226.263 163.044 226.537 163.218 226.73C163.398 226.923 163.648 227.02 163.968 227.02ZM168.834 229.6L169.364 226.54H170.794L170.034 229.6H168.834ZM173.7 229.8V222.5H174.92V223.51C175.02 223.163 175.2 222.893 175.46 222.7C175.72 222.5 176.043 222.4 176.43 222.4C176.783 222.4 177.093 222.487 177.36 222.66C177.633 222.833 177.843 223.08 177.99 223.4C178.143 223.713 178.22 224.08 178.22 224.5V225.99C178.22 226.623 178.056 227.133 177.73 227.52C177.403 227.907 176.97 228.1 176.43 228.1C176.043 228.1 175.716 228 175.45 227.8C175.19 227.6 175.01 227.32 174.91 226.96L174.95 228.26V229.8H173.7ZM175.96 227.02C176.28 227.02 176.526 226.933 176.7 226.76C176.88 226.587 176.97 226.32 176.97 225.96V224.54C176.97 224.18 176.88 223.913 176.7 223.74C176.526 223.567 176.28 223.48 175.96 223.48C175.64 223.48 175.39 223.577 175.21 223.77C175.036 223.963 174.95 224.237 174.95 224.59V225.91C174.95 226.263 175.036 226.537 175.21 226.73C175.39 226.923 175.64 227.02 175.96 227.02ZM179.896 228V222.5H181.116V223.57C181.182 223.21 181.346 222.927 181.606 222.72C181.872 222.507 182.216 222.4 182.636 222.4C183.196 222.4 183.632 222.58 183.946 222.94C184.259 223.3 184.416 223.803 184.416 224.45V224.97H183.166V224.51C183.166 224.177 183.079 223.923 182.906 223.75C182.732 223.57 182.486 223.48 182.166 223.48C181.832 223.48 181.579 223.58 181.406 223.78C181.232 223.98 181.146 224.263 181.146 224.63V228H179.896ZM185.682 228V226.87H187.562V223.63H185.882V222.5H188.812V226.87H190.502V228H185.682ZM188.102 221.58C187.849 221.58 187.649 221.517 187.502 221.39C187.355 221.257 187.282 221.08 187.282 220.86C187.282 220.64 187.355 220.467 187.502 220.34C187.649 220.207 187.849 220.14 188.102 220.14C188.355 220.14 188.555 220.207 188.702 220.34C188.849 220.467 188.922 220.64 188.922 220.86C188.922 221.08 188.849 221.257 188.702 221.39C188.555 221.517 188.355 221.58 188.102 221.58ZM193.918 228.09C193.211 228.09 192.651 227.893 192.238 227.5C191.825 227.1 191.618 226.563 191.618 225.89V224.61C191.618 223.93 191.825 223.393 192.238 223C192.651 222.607 193.211 222.41 193.918 222.41C194.625 222.41 195.185 222.607 195.598 223C196.011 223.393 196.218 223.93 196.218 224.61V225.89C196.218 226.563 196.011 227.1 195.598 227.5C195.185 227.893 194.625 228.09 193.918 228.09ZM193.918 227C194.251 227 194.508 226.91 194.688 226.73C194.875 226.543 194.968 226.277 194.968 225.93V224.57C194.968 224.223 194.875 223.96 194.688 223.78C194.508 223.593 194.251 223.5 193.918 223.5C193.585 223.5 193.325 223.593 193.138 223.78C192.958 223.96 192.868 224.223 192.868 224.57V225.93C192.868 226.277 192.958 226.543 193.138 226.73C193.325 226.91 193.585 227 193.918 227ZM197.884 228V222.5H199.104V223.57C199.171 223.21 199.334 222.927 199.594 222.72C199.861 222.507 200.204 222.4 200.624 222.4C201.184 222.4 201.621 222.58 201.934 222.94C202.247 223.3 202.404 223.803 202.404 224.45V224.97H201.154V224.51C201.154 224.177 201.067 223.923 200.894 223.75C200.721 223.57 200.474 223.48 200.154 223.48C199.821 223.48 199.567 223.58 199.394 223.78C199.221 223.98 199.134 224.263 199.134 224.63V228H197.884ZM203.67 228V226.87H205.55V223.63H203.87V222.5H206.8V226.87H208.49V228H203.67ZM206.09 221.58C205.837 221.58 205.637 221.517 205.49 221.39C205.343 221.257 205.27 221.08 205.27 220.86C205.27 220.64 205.343 220.467 205.49 220.34C205.637 220.207 205.837 220.14 206.09 220.14C206.343 220.14 206.543 220.207 206.69 220.34C206.837 220.467 206.91 220.64 206.91 220.86C206.91 221.08 206.837 221.257 206.69 221.39C206.543 221.517 206.343 221.58 206.09 221.58ZM212.456 228C211.943 228 211.533 227.853 211.226 227.56C210.926 227.26 210.776 226.857 210.776 226.35V223.63H209.256V222.5H210.776V220.95H212.036V222.5H214.226V223.63H212.036V226.32C212.036 226.48 212.08 226.613 212.166 226.72C212.26 226.82 212.386 226.87 212.546 226.87H214.176V228H212.456ZM216.552 229.8L217.332 227.7L215.262 222.5H216.582L217.642 225.31C217.702 225.477 217.762 225.66 217.822 225.86C217.882 226.053 217.926 226.233 217.952 226.4C217.972 226.233 218.009 226.053 218.062 225.86C218.122 225.66 218.182 225.477 218.242 225.31L219.222 222.5H220.542L217.862 229.8H216.552ZM222.048 229.2V227.95C222.642 227.81 223.108 227.503 223.448 227.03C223.795 226.55 223.968 225.97 223.968 225.29V223.5C223.968 222.82 223.795 222.243 223.448 221.77C223.108 221.29 222.642 220.98 222.048 220.84V219.6C223.062 219.84 223.845 220.3 224.398 220.98C224.952 221.66 225.228 222.5 225.228 223.5V225.29C225.228 226.297 224.952 227.143 224.398 227.83C223.845 228.51 223.062 228.967 222.048 229.2Z"
+      fill="#A1A1A1"
+    />
+    <circle
+      cx="40"
+      cy="225"
+      r="12"
+      class="fill-neutral-300 dark:fill-gray-900"
+    />
+    <path
+      d="M41.592 221.39C41.564 221.362 41.4753 221.311 41.326 221.236C41.186 221.161 41.0507 221.124 40.92 221.124C40.836 221.124 40.7333 221.138 40.612 221.166C40.4907 221.185 40.374 221.236 40.262 221.32C40.15 221.395 40.052 221.507 39.968 221.656C39.8933 221.805 39.856 222.001 39.856 222.244C39.856 222.347 39.8607 222.463 39.87 222.594C39.8887 222.725 39.9213 222.869 39.968 223.028H41.704L41.508 224.162H40.052V229.65C40.052 230.21 39.9773 230.677 39.828 231.05C39.688 231.433 39.5013 231.75 39.268 232.002C39.0347 232.263 38.7733 232.478 38.484 232.646C38.204 232.823 37.924 232.982 37.644 233.122L37 232.058C37.3453 231.881 37.616 231.689 37.812 231.484C38.008 231.288 38.1527 231.087 38.246 230.882C38.3487 230.686 38.4093 230.495 38.428 230.308C38.4467 230.121 38.456 229.953 38.456 229.804V224.162H37.196V223.028H38.414C38.3767 222.888 38.3487 222.743 38.33 222.594C38.3207 222.445 38.316 222.305 38.316 222.174C38.316 221.801 38.3813 221.469 38.512 221.18C38.652 220.891 38.834 220.653 39.058 220.466C39.2913 220.279 39.5573 220.139 39.856 220.046C40.164 219.943 40.4813 219.892 40.808 219.892C41.172 219.892 41.4707 219.953 41.704 220.074C41.9373 220.186 42.1287 220.321 42.278 220.48L41.592 221.39Z"
+      class="fill-neutral-400 dark:fill-neutral-200"
+    />
+    <g filter="url(#filter4_dd_3619_2000)">
+      <rect
+        x="474"
+        y="211"
+        width="173"
+        height="26"
+        rx="13"
+        class="fill-white dark:fill-gray-800"
+      />
+    </g>
+    <path
+      d="M515 227.09C514.293 227.09 513.733 226.893 513.32 226.5C512.907 226.1 512.7 225.563 512.7 224.89V223.61C512.7 222.93 512.907 222.393 513.32 222C513.733 221.607 514.293 221.41 515 221.41C515.707 221.41 516.267 221.607 516.68 222C517.093 222.393 517.3 222.93 517.3 223.61V224.89C517.3 225.563 517.093 226.1 516.68 226.5C516.267 226.893 515.707 227.09 515 227.09ZM515 226C515.333 226 515.59 225.91 515.77 225.73C515.957 225.543 516.05 225.277 516.05 224.93V223.57C516.05 223.223 515.957 222.96 515.77 222.78C515.59 222.593 515.333 222.5 515 222.5C514.667 222.5 514.407 222.593 514.22 222.78C514.04 222.96 513.95 223.223 513.95 223.57V224.93C513.95 225.277 514.04 225.543 514.22 225.73C514.407 225.91 514.667 226 515 226ZM518.766 227V221.5H519.986V222.53C520.053 222.183 520.216 221.91 520.476 221.71C520.736 221.503 521.066 221.4 521.466 221.4C522.006 221.4 522.436 221.58 522.756 221.94C523.083 222.3 523.246 222.783 523.246 223.39V227H521.996V223.54C521.996 223.2 521.906 222.94 521.726 222.76C521.553 222.573 521.316 222.48 521.016 222.48C520.703 222.48 520.456 222.573 520.276 222.76C520.103 222.947 520.016 223.213 520.016 223.56V227H518.766ZM524.762 227V219.7H527.062C527.549 219.7 527.969 219.79 528.322 219.97C528.682 220.15 528.962 220.403 529.162 220.73C529.362 221.05 529.462 221.43 529.462 221.87C529.462 222.357 529.342 222.783 529.102 223.15C528.862 223.51 528.539 223.767 528.132 223.92L529.562 227H528.192L526.912 224.1H526.002V227H524.762ZM526.002 223H527.062C527.416 223 527.692 222.903 527.892 222.71C528.092 222.517 528.192 222.25 528.192 221.91C528.192 221.57 528.089 221.3 527.882 221.1C527.682 220.9 527.409 220.8 527.062 220.8H526.002V223ZM532.998 227.1C532.532 227.1 532.125 227.01 531.778 226.83C531.432 226.65 531.162 226.397 530.968 226.07C530.782 225.737 530.688 225.347 530.688 224.9V223.6C530.688 223.153 530.782 222.767 530.968 222.44C531.162 222.107 531.432 221.85 531.778 221.67C532.125 221.49 532.532 221.4 532.998 221.4C533.458 221.4 533.858 221.49 534.198 221.67C534.545 221.85 534.812 222.103 534.998 222.43C535.192 222.75 535.288 223.127 535.288 223.56V224.56H531.888V224.94C531.888 225.313 531.985 225.597 532.178 225.79C532.372 225.977 532.645 226.07 532.998 226.07C533.258 226.07 533.478 226.027 533.658 225.94C533.845 225.847 533.955 225.713 533.988 225.54H535.228C535.142 226.013 534.895 226.393 534.488 226.68C534.082 226.96 533.585 227.1 532.998 227.1ZM531.888 223.56V223.75L534.088 223.74V223.55C534.088 223.17 533.995 222.877 533.808 222.67C533.622 222.463 533.352 222.36 532.998 222.36C532.632 222.36 532.355 222.467 532.168 222.68C531.982 222.887 531.888 223.18 531.888 223.56ZM536.754 227V221.5H537.974V222.53C538.041 222.183 538.204 221.91 538.464 221.71C538.724 221.503 539.054 221.4 539.454 221.4C539.994 221.4 540.424 221.58 540.744 221.94C541.071 222.3 541.234 222.783 541.234 223.39V227H539.984V223.54C539.984 223.2 539.894 222.94 539.714 222.76C539.541 222.573 539.304 222.48 539.004 222.48C538.691 222.48 538.444 222.573 538.264 222.76C538.091 222.947 538.004 223.213 538.004 223.56V227H536.754ZM544.48 227.1C543.947 227.1 543.514 226.91 543.18 226.53C542.854 226.15 542.69 225.64 542.69 225V223.51C542.69 222.863 542.854 222.35 543.18 221.97C543.507 221.59 543.94 221.4 544.48 221.4C544.86 221.4 545.18 221.497 545.44 221.69C545.707 221.883 545.894 222.153 546 222.5L545.96 221.24V219.7H547.21V227H545.99V226C545.89 226.347 545.71 226.617 545.45 226.81C545.19 227.003 544.867 227.1 544.48 227.1ZM544.95 226.02C545.27 226.02 545.517 225.923 545.69 225.73C545.87 225.537 545.96 225.263 545.96 224.91V223.59C545.96 223.237 545.87 222.963 545.69 222.77C545.517 222.577 545.27 222.48 544.95 222.48C544.63 222.48 544.38 222.567 544.2 222.74C544.027 222.913 543.94 223.18 543.94 223.54V224.96C543.94 225.32 544.027 225.587 544.2 225.76C544.38 225.933 544.63 226.02 544.95 226.02ZM550.987 227.1C550.52 227.1 550.113 227.01 549.767 226.83C549.42 226.65 549.15 226.397 548.957 226.07C548.77 225.737 548.677 225.347 548.677 224.9V223.6C548.677 223.153 548.77 222.767 548.957 222.44C549.15 222.107 549.42 221.85 549.767 221.67C550.113 221.49 550.52 221.4 550.987 221.4C551.447 221.4 551.847 221.49 552.187 221.67C552.533 221.85 552.8 222.103 552.987 222.43C553.18 222.75 553.277 223.127 553.277 223.56V224.56H549.877V224.94C549.877 225.313 549.973 225.597 550.167 225.79C550.36 225.977 550.633 226.07 550.987 226.07C551.247 226.07 551.467 226.027 551.647 225.94C551.833 225.847 551.943 225.713 551.977 225.54H553.217C553.13 226.013 552.883 226.393 552.477 226.68C552.07 226.96 551.573 227.1 550.987 227.1ZM549.877 223.56V223.75L552.077 223.74V223.55C552.077 223.17 551.983 222.877 551.797 222.67C551.61 222.463 551.34 222.36 550.987 222.36C550.62 222.36 550.343 222.467 550.157 222.68C549.97 222.887 549.877 223.18 549.877 223.56ZM554.943 227V221.5H556.163V222.57C556.229 222.21 556.393 221.927 556.653 221.72C556.919 221.507 557.263 221.4 557.683 221.4C558.243 221.4 558.679 221.58 558.993 221.94C559.306 222.3 559.463 222.803 559.463 223.45V223.97H558.213V223.51C558.213 223.177 558.126 222.923 557.953 222.75C557.779 222.57 557.533 222.48 557.213 222.48C556.879 222.48 556.626 222.58 556.453 222.78C556.279 222.98 556.193 223.263 556.193 223.63V227H554.943Z"
+      fill="#6A7282"
+    />
+    <path
+      d="M564.819 228.2C563.805 227.967 563.022 227.51 562.469 226.83C561.915 226.143 561.639 225.297 561.639 224.29V222.5C561.639 221.5 561.915 220.66 562.469 219.98C563.022 219.3 563.805 218.84 564.819 218.6V219.84C564.225 219.98 563.755 220.29 563.409 220.77C563.069 221.243 562.899 221.82 562.899 222.5V224.29C562.899 224.97 563.069 225.55 563.409 226.03C563.755 226.503 564.225 226.81 564.819 226.95V228.2ZM569.055 227.1C568.582 227.1 568.168 227.013 567.815 226.84C567.468 226.66 567.198 226.41 567.005 226.09C566.812 225.763 566.715 225.38 566.715 224.94V223.56C566.715 223.12 566.812 222.74 567.005 222.42C567.198 222.093 567.468 221.843 567.815 221.67C568.168 221.49 568.582 221.4 569.055 221.4C569.742 221.4 570.292 221.58 570.705 221.94C571.125 222.293 571.345 222.777 571.365 223.39H570.135C570.115 223.103 570.005 222.883 569.805 222.73C569.612 222.57 569.362 222.49 569.055 222.49C568.715 222.49 568.448 222.583 568.255 222.77C568.062 222.95 567.965 223.21 567.965 223.55V224.94C567.965 225.28 568.062 225.543 568.255 225.73C568.448 225.917 568.715 226.01 569.055 226.01C569.368 226.01 569.622 225.933 569.815 225.78C570.008 225.62 570.115 225.397 570.135 225.11H571.365C571.345 225.723 571.125 226.21 570.705 226.57C570.292 226.923 569.742 227.1 569.055 227.1ZM575.461 227.1C575.074 227.1 574.751 227.003 574.491 226.81C574.231 226.617 574.051 226.347 573.951 226V227H572.731V219.7H573.981V221.24L573.941 222.5C574.048 222.153 574.231 221.883 574.491 221.69C574.758 221.497 575.081 221.4 575.461 221.4C576.001 221.4 576.434 221.59 576.761 221.97C577.088 222.35 577.251 222.863 577.251 223.51V225C577.251 225.64 577.084 226.15 576.751 226.53C576.424 226.91 575.994 227.1 575.461 227.1ZM574.991 226.02C575.311 226.02 575.558 225.933 575.731 225.76C575.911 225.587 576.001 225.32 576.001 224.96V223.54C576.001 223.18 575.911 222.913 575.731 222.74C575.558 222.567 575.311 222.48 574.991 222.48C574.671 222.48 574.421 222.577 574.241 222.77C574.068 222.963 573.981 223.237 573.981 223.59V224.91C573.981 225.263 574.068 225.537 574.241 225.73C574.421 225.923 574.671 226.02 574.991 226.02ZM579.857 228.6L580.387 225.54H581.817L581.057 228.6H579.857ZM584.723 228.8V221.5H585.943V222.51C586.043 222.163 586.223 221.893 586.483 221.7C586.743 221.5 587.066 221.4 587.453 221.4C587.806 221.4 588.116 221.487 588.383 221.66C588.656 221.833 588.866 222.08 589.013 222.4C589.166 222.713 589.243 223.08 589.243 223.5V224.99C589.243 225.623 589.08 226.133 588.753 226.52C588.426 226.907 587.993 227.1 587.453 227.1C587.066 227.1 586.74 227 586.473 226.8C586.213 226.6 586.033 226.32 585.933 225.96L585.973 227.26V228.8H584.723ZM586.983 226.02C587.303 226.02 587.55 225.933 587.723 225.76C587.903 225.587 587.993 225.32 587.993 224.96V223.54C587.993 223.18 587.903 222.913 587.723 222.74C587.55 222.567 587.303 222.48 586.983 222.48C586.663 222.48 586.413 222.577 586.233 222.77C586.06 222.963 585.973 223.237 585.973 223.59V224.91C585.973 225.263 586.06 225.537 586.233 225.73C586.413 225.923 586.663 226.02 586.983 226.02ZM590.919 227V221.5H592.139V222.57C592.206 222.21 592.369 221.927 592.629 221.72C592.896 221.507 593.239 221.4 593.659 221.4C594.219 221.4 594.656 221.58 594.969 221.94C595.283 222.3 595.439 222.803 595.439 223.45V223.97H594.189V223.51C594.189 223.177 594.103 222.923 593.929 222.75C593.756 222.57 593.509 222.48 593.189 222.48C592.856 222.48 592.603 222.58 592.429 222.78C592.256 222.98 592.169 223.263 592.169 223.63V227H590.919ZM596.705 227V225.87H598.585V222.63H596.905V221.5H599.835V225.87H601.525V227H596.705ZM599.125 220.58C598.872 220.58 598.672 220.517 598.525 220.39C598.379 220.257 598.305 220.08 598.305 219.86C598.305 219.64 598.379 219.467 598.525 219.34C598.672 219.207 598.872 219.14 599.125 219.14C599.379 219.14 599.579 219.207 599.725 219.34C599.872 219.467 599.945 219.64 599.945 219.86C599.945 220.08 599.872 220.257 599.725 220.39C599.579 220.517 599.379 220.58 599.125 220.58ZM604.941 227.09C604.235 227.09 603.675 226.893 603.261 226.5C602.848 226.1 602.641 225.563 602.641 224.89V223.61C602.641 222.93 602.848 222.393 603.261 222C603.675 221.607 604.235 221.41 604.941 221.41C605.648 221.41 606.208 221.607 606.621 222C607.035 222.393 607.241 222.93 607.241 223.61V224.89C607.241 225.563 607.035 226.1 606.621 226.5C606.208 226.893 605.648 227.09 604.941 227.09ZM604.941 226C605.275 226 605.531 225.91 605.711 225.73C605.898 225.543 605.991 225.277 605.991 224.93V223.57C605.991 223.223 605.898 222.96 605.711 222.78C605.531 222.593 605.275 222.5 604.941 222.5C604.608 222.5 604.348 222.593 604.161 222.78C603.981 222.96 603.891 223.223 603.891 223.57V224.93C603.891 225.277 603.981 225.543 604.161 225.73C604.348 225.91 604.608 226 604.941 226ZM608.908 227V221.5H610.128V222.57C610.194 222.21 610.358 221.927 610.618 221.72C610.884 221.507 611.228 221.4 611.648 221.4C612.208 221.4 612.644 221.58 612.958 221.94C613.271 222.3 613.428 222.803 613.428 223.45V223.97H612.178V223.51C612.178 223.177 612.091 222.923 611.918 222.75C611.744 222.57 611.498 222.48 611.178 222.48C610.844 222.48 610.591 222.58 610.418 222.78C610.244 222.98 610.158 223.263 610.158 223.63V227H608.908ZM614.694 227V225.87H616.574V222.63H614.894V221.5H617.824V225.87H619.514V227H614.694ZM617.114 220.58C616.86 220.58 616.66 220.517 616.514 220.39C616.367 220.257 616.294 220.08 616.294 219.86C616.294 219.64 616.367 219.467 616.514 219.34C616.66 219.207 616.86 219.14 617.114 219.14C617.367 219.14 617.567 219.207 617.714 219.34C617.86 219.467 617.934 219.64 617.934 219.86C617.934 220.08 617.86 220.257 617.714 220.39C617.567 220.517 617.367 220.58 617.114 220.58ZM623.48 227C622.966 227 622.556 226.853 622.25 226.56C621.95 226.26 621.8 225.857 621.8 225.35V222.63H620.28V221.5H621.8V219.95H623.06V221.5H625.25V222.63H623.06V225.32C623.06 225.48 623.103 225.613 623.19 225.72C623.283 225.82 623.41 225.87 623.57 225.87H625.2V227H623.48ZM627.576 228.8L628.356 226.7L626.286 221.5H627.606L628.666 224.31C628.726 224.477 628.786 224.66 628.846 224.86C628.906 225.053 628.949 225.233 628.976 225.4C628.996 225.233 629.032 225.053 629.086 224.86C629.146 224.66 629.206 224.477 629.266 224.31L630.246 221.5H631.566L628.886 228.8H627.576ZM633.072 228.2V226.95C633.665 226.81 634.132 226.503 634.472 226.03C634.819 225.55 634.992 224.97 634.992 224.29V222.5C634.992 221.82 634.819 221.243 634.472 220.77C634.132 220.29 633.665 219.98 633.072 219.84V218.6C634.085 218.84 634.869 219.3 635.422 219.98C635.975 220.66 636.252 221.5 636.252 222.5V224.29C636.252 225.297 635.975 226.143 635.422 226.83C634.869 227.51 634.085 227.967 633.072 228.2Z"
+      fill="#A1A1A1"
+    />
+    <circle
+      cx="487"
+      cy="224"
+      r="12"
+      class="fill-neutral-300 dark:fill-gray-900"
+    />
+    <path
+      d="M488.592 220.39C488.564 220.362 488.475 220.311 488.326 220.236C488.186 220.161 488.051 220.124 487.92 220.124C487.836 220.124 487.733 220.138 487.612 220.166C487.491 220.185 487.374 220.236 487.262 220.32C487.15 220.395 487.052 220.507 486.968 220.656C486.893 220.805 486.856 221.001 486.856 221.244C486.856 221.347 486.861 221.463 486.87 221.594C486.889 221.725 486.921 221.869 486.968 222.028H488.704L488.508 223.162H487.052V228.65C487.052 229.21 486.977 229.677 486.828 230.05C486.688 230.433 486.501 230.75 486.268 231.002C486.035 231.263 485.773 231.478 485.484 231.646C485.204 231.823 484.924 231.982 484.644 232.122L484 231.058C484.345 230.881 484.616 230.689 484.812 230.484C485.008 230.288 485.153 230.087 485.246 229.882C485.349 229.686 485.409 229.495 485.428 229.308C485.447 229.121 485.456 228.953 485.456 228.804V223.162H484.196V222.028H485.414C485.377 221.888 485.349 221.743 485.33 221.594C485.321 221.445 485.316 221.305 485.316 221.174C485.316 220.801 485.381 220.469 485.512 220.18C485.652 219.891 485.834 219.653 486.058 219.466C486.291 219.279 486.557 219.139 486.856 219.046C487.164 218.943 487.481 218.892 487.808 218.892C488.172 218.892 488.471 218.953 488.704 219.074C488.937 219.186 489.129 219.321 489.278 219.48L488.592 220.39Z"
+      class="fill-neutral-400 dark:fill-neutral-200"
+    />
+    <path
+      d="M108.6 12.12C107.784 12.12 107.16 11.896 106.728 11.448C106.296 10.992 106.08 10.376 106.08 9.6V3.24H107.16V9.6C107.16 10.08 107.276 10.46 107.508 10.74C107.748 11.02 108.112 11.16 108.6 11.16C109.08 11.16 109.44 11.02 109.68 10.74C109.92 10.46 110.04 10.08 110.04 9.6V3.24H111.12V9.6C111.12 10.384 110.904 11 110.472 11.448C110.048 11.896 109.424 12.12 108.6 12.12ZM113.299 14.16V5.4H114.379V6.66H114.391C114.447 6.228 114.635 5.892 114.955 5.652C115.275 5.404 115.683 5.28 116.179 5.28C116.843 5.28 117.371 5.5 117.763 5.94C118.155 6.372 118.351 6.968 118.351 7.728V9.66C118.351 10.42 118.155 11.02 117.763 11.46C117.371 11.9 116.843 12.12 116.179 12.12C115.683 12.12 115.275 11.996 114.955 11.748C114.635 11.5 114.447 11.164 114.391 10.74H114.355L114.379 12.24V14.16H113.299ZM115.819 11.184C116.275 11.184 116.631 11.064 116.887 10.824C117.143 10.584 117.271 10.196 117.271 9.66V7.74C117.271 7.196 117.143 6.808 116.887 6.576C116.631 6.336 116.275 6.216 115.819 6.216C115.379 6.216 115.027 6.356 114.763 6.636C114.507 6.916 114.379 7.304 114.379 7.8V9.6C114.379 10.096 114.507 10.484 114.763 10.764C115.027 11.044 115.379 11.184 115.819 11.184ZM122.607 12.12C121.951 12.12 121.423 11.9 121.023 11.46C120.631 11.02 120.435 10.424 120.435 9.672V7.74C120.435 6.98 120.631 6.38 121.023 5.94C121.415 5.5 121.943 5.28 122.607 5.28C123.103 5.28 123.511 5.404 123.831 5.652C124.159 5.9 124.355 6.236 124.419 6.66H124.431L124.407 5.16V3.24H125.487V12H124.407V10.74H124.395C124.339 11.172 124.151 11.512 123.831 11.76C123.511 12 123.103 12.12 122.607 12.12ZM122.967 11.184C123.415 11.184 123.767 11.044 124.023 10.764C124.279 10.484 124.407 10.096 124.407 9.6V7.8C124.407 7.304 124.279 6.916 124.023 6.636C123.767 6.356 123.415 6.216 122.967 6.216C122.511 6.216 122.155 6.336 121.899 6.576C121.643 6.808 121.515 7.196 121.515 7.74V9.66C121.515 10.196 121.643 10.584 121.899 10.824C122.155 11.064 122.511 11.184 122.967 11.184ZM129.61 12.12C128.93 12.12 128.39 11.932 127.99 11.556C127.59 11.172 127.39 10.672 127.39 10.056C127.39 9.648 127.482 9.292 127.666 8.988C127.85 8.684 128.106 8.448 128.434 8.28C128.762 8.104 129.138 8.016 129.562 8.016H131.602V7.5C131.602 6.644 131.134 6.216 130.198 6.216C129.782 6.216 129.446 6.292 129.19 6.444C128.934 6.596 128.798 6.808 128.782 7.08H127.702C127.742 6.56 127.982 6.132 128.422 5.796C128.87 5.452 129.462 5.28 130.198 5.28C130.998 5.28 131.61 5.472 132.034 5.856C132.466 6.24 132.682 6.776 132.682 7.464V12H131.614V10.8H131.59C131.526 11.208 131.322 11.532 130.978 11.772C130.634 12.004 130.178 12.12 129.61 12.12ZM129.874 11.208C130.402 11.208 130.822 11.08 131.134 10.824C131.446 10.568 131.602 10.22 131.602 9.78V8.856H129.682C129.33 8.856 129.042 8.964 128.818 9.18C128.602 9.388 128.494 9.668 128.494 10.02C128.494 10.388 128.614 10.68 128.854 10.896C129.102 11.104 129.442 11.208 129.874 11.208ZM138.041 12C137.497 12 137.061 11.844 136.733 11.532C136.405 11.212 136.241 10.788 136.241 10.26V6.384H134.345V5.4H136.241V3.54H137.321V5.4H140.021V6.384H137.321V10.26C137.321 10.484 137.385 10.668 137.513 10.812C137.649 10.948 137.825 11.016 138.041 11.016H139.961V12H138.041ZM144.577 12.12C143.801 12.12 143.173 11.888 142.693 11.424C142.221 10.952 141.985 10.304 141.985 9.48V7.92C141.985 7.096 142.221 6.452 142.693 5.988C143.173 5.516 143.801 5.28 144.577 5.28C145.097 5.28 145.549 5.384 145.933 5.592C146.325 5.8 146.629 6.092 146.845 6.468C147.061 6.844 147.169 7.288 147.169 7.8V8.976H143.041V9.6C143.041 10.088 143.181 10.476 143.461 10.764C143.741 11.044 144.113 11.184 144.577 11.184C144.977 11.184 145.305 11.108 145.561 10.956C145.825 10.796 145.985 10.584 146.041 10.32H147.121C147.049 10.872 146.781 11.312 146.317 11.64C145.853 11.96 145.273 12.12 144.577 12.12ZM143.041 8.136H146.113V7.8C146.113 7.28 145.977 6.88 145.705 6.6C145.441 6.312 145.065 6.168 144.577 6.168C144.089 6.168 143.709 6.312 143.437 6.6C143.173 6.88 143.041 7.28 143.041 7.8V8.136ZM151.508 12.096C150.772 12.096 150.2 11.932 149.792 11.604C149.392 11.268 149.192 10.796 149.192 10.188H150.272C150.272 10.492 150.38 10.732 150.596 10.908C150.812 11.076 151.116 11.16 151.508 11.16H152.036C152.436 11.16 152.744 11.072 152.96 10.896C153.184 10.72 153.296 10.472 153.296 10.152C153.296 9.584 153.036 9.264 152.516 9.192L150.692 8.928C150.244 8.864 149.896 8.68 149.648 8.376C149.4 8.064 149.276 7.656 149.276 7.152C149.276 6.576 149.472 6.124 149.864 5.796C150.264 5.468 150.812 5.304 151.508 5.304H152.036C152.676 5.304 153.196 5.464 153.596 5.784C154.004 6.096 154.224 6.508 154.256 7.02H153.164C153.148 6.788 153.036 6.596 152.828 6.444C152.628 6.292 152.364 6.216 152.036 6.216H151.508C151.14 6.216 150.852 6.3 150.644 6.468C150.436 6.636 150.332 6.864 150.332 7.152C150.332 7.616 150.544 7.88 150.968 7.944L152.672 8.184C153.792 8.344 154.352 9 154.352 10.152C154.352 10.768 154.148 11.248 153.74 11.592C153.34 11.928 152.772 12.096 152.036 12.096H151.508Z"
+      class="fill-neutral-500 dark:fill-neutral-200"
+    />
+    <path
+      d="M513.104 12V3.24H515.924C516.74 3.24 517.388 3.476 517.868 3.948C518.356 4.412 518.6 5.036 518.6 5.82C518.6 6.604 518.356 7.232 517.868 7.704C517.388 8.168 516.74 8.4 515.924 8.4H514.184V12H513.104ZM514.184 7.428H515.924C516.396 7.428 516.772 7.284 517.052 6.996C517.34 6.7 517.484 6.308 517.484 5.82C517.484 5.324 517.34 4.932 517.052 4.644C516.772 4.356 516.396 4.212 515.924 4.212H514.184V7.428ZM522.795 12.096C522.003 12.096 521.371 11.864 520.899 11.4C520.435 10.936 520.203 10.288 520.203 9.456V7.944C520.203 7.104 520.435 6.456 520.899 6C521.363 5.536 521.995 5.304 522.795 5.304C523.595 5.304 524.227 5.536 524.691 6C525.155 6.456 525.387 7.104 525.387 7.944V9.456C525.387 10.288 525.151 10.936 524.679 11.4C524.215 11.864 523.587 12.096 522.795 12.096ZM522.795 11.136C523.267 11.136 523.635 11.004 523.899 10.74C524.171 10.476 524.307 10.088 524.307 9.576V7.824C524.307 7.312 524.171 6.924 523.899 6.66C523.635 6.396 523.267 6.264 522.795 6.264C522.331 6.264 521.963 6.396 521.691 6.66C521.419 6.924 521.283 7.312 521.283 7.824V9.576C521.283 10.088 521.419 10.476 521.691 10.74C521.963 11.004 522.331 11.136 522.795 11.136ZM529.727 12.096C528.991 12.096 528.419 11.932 528.011 11.604C527.611 11.268 527.411 10.796 527.411 10.188H528.491C528.491 10.492 528.599 10.732 528.815 10.908C529.031 11.076 529.335 11.16 529.727 11.16H530.255C530.655 11.16 530.963 11.072 531.179 10.896C531.403 10.72 531.515 10.472 531.515 10.152C531.515 9.584 531.255 9.264 530.735 9.192L528.911 8.928C528.463 8.864 528.115 8.68 527.867 8.376C527.619 8.064 527.495 7.656 527.495 7.152C527.495 6.576 527.691 6.124 528.083 5.796C528.483 5.468 529.031 5.304 529.727 5.304H530.255C530.895 5.304 531.415 5.464 531.815 5.784C532.223 6.096 532.443 6.508 532.475 7.02H531.383C531.367 6.788 531.255 6.596 531.047 6.444C530.847 6.292 530.583 6.216 530.255 6.216H529.727C529.359 6.216 529.071 6.3 528.863 6.468C528.655 6.636 528.551 6.864 528.551 7.152C528.551 7.616 528.763 7.88 529.187 7.944L530.891 8.184C532.011 8.344 532.571 9 532.571 10.152C532.571 10.768 532.367 11.248 531.959 11.592C531.559 11.928 530.991 12.096 530.255 12.096H529.727ZM537.846 12C537.302 12 536.866 11.844 536.538 11.532C536.21 11.212 536.046 10.788 536.046 10.26V6.384H534.15V5.4H536.046V3.54H537.126V5.4H539.826V6.384H537.126V10.26C537.126 10.484 537.19 10.668 537.318 10.812C537.454 10.948 537.63 11.016 537.846 11.016H539.766V12H537.846ZM542.461 8.52V7.56H546.301V8.52H542.461ZM551.673 12.12C550.873 12.12 550.233 11.896 549.753 11.448C549.273 11 549.033 10.384 549.033 9.6V7.8C549.033 7.016 549.273 6.4 549.753 5.952C550.233 5.504 550.873 5.28 551.673 5.28C552.433 5.28 553.045 5.484 553.509 5.892C553.981 6.3 554.229 6.856 554.253 7.56H553.173C553.149 7.136 553.005 6.812 552.741 6.588C552.477 6.356 552.121 6.24 551.673 6.24C551.201 6.24 550.821 6.376 550.533 6.648C550.253 6.912 550.113 7.292 550.113 7.788V9.6C550.113 10.096 550.253 10.48 550.533 10.752C550.821 11.024 551.201 11.16 551.673 11.16C552.121 11.16 552.477 11.044 552.741 10.812C553.005 10.58 553.149 10.256 553.173 9.84H554.253C554.229 10.544 553.981 11.1 553.509 11.508C553.045 11.916 552.433 12.12 551.673 12.12ZM558.196 12.12C557.516 12.12 556.976 11.932 556.576 11.556C556.176 11.172 555.976 10.672 555.976 10.056C555.976 9.648 556.068 9.292 556.252 8.988C556.436 8.684 556.692 8.448 557.02 8.28C557.348 8.104 557.724 8.016 558.148 8.016H560.188V7.5C560.188 6.644 559.72 6.216 558.784 6.216C558.368 6.216 558.032 6.292 557.776 6.444C557.52 6.596 557.384 6.808 557.368 7.08H556.288C556.328 6.56 556.568 6.132 557.008 5.796C557.456 5.452 558.048 5.28 558.784 5.28C559.584 5.28 560.196 5.472 560.62 5.856C561.052 6.24 561.268 6.776 561.268 7.464V12H560.2V10.8H560.176C560.112 11.208 559.908 11.532 559.564 11.772C559.22 12.004 558.764 12.12 558.196 12.12ZM558.46 11.208C558.988 11.208 559.408 11.08 559.72 10.824C560.032 10.568 560.188 10.22 560.188 9.78V8.856H558.268C557.916 8.856 557.628 8.964 557.404 9.18C557.188 9.388 557.08 9.668 557.08 10.02C557.08 10.388 557.2 10.68 557.44 10.896C557.688 11.104 558.028 11.208 558.46 11.208ZM566.927 12C566.343 12 565.875 11.832 565.523 11.496C565.179 11.152 565.007 10.7 565.007 10.14V4.224H562.727V3.24H566.087V10.14C566.087 10.412 566.163 10.628 566.315 10.788C566.467 10.94 566.671 11.016 566.927 11.016H568.967V12H566.927ZM573.259 12.12C572.459 12.12 571.819 11.896 571.339 11.448C570.859 11 570.619 10.384 570.619 9.6V7.8C570.619 7.016 570.859 6.4 571.339 5.952C571.819 5.504 572.459 5.28 573.259 5.28C574.019 5.28 574.631 5.484 575.095 5.892C575.567 6.3 575.815 6.856 575.839 7.56H574.759C574.735 7.136 574.591 6.812 574.327 6.588C574.063 6.356 573.707 6.24 573.259 6.24C572.787 6.24 572.407 6.376 572.119 6.648C571.839 6.912 571.699 7.292 571.699 7.788V9.6C571.699 10.096 571.839 10.48 572.119 10.752C572.407 11.024 572.787 11.16 573.259 11.16C573.707 11.16 574.063 11.044 574.327 10.812C574.591 10.58 574.735 10.256 574.759 9.84H575.839C575.815 10.544 575.567 11.1 575.095 11.508C574.631 11.916 574.019 12.12 573.259 12.12ZM580.346 12.12C579.586 12.12 578.978 11.896 578.522 11.448C578.066 10.992 577.838 10.376 577.838 9.6V5.4H578.918V9.6C578.918 10.08 579.046 10.464 579.302 10.752C579.558 11.032 579.906 11.172 580.346 11.172C580.794 11.172 581.146 11.032 581.402 10.752C581.666 10.464 581.798 10.08 581.798 9.6V5.4H582.878V9.6C582.878 10.376 582.646 10.992 582.182 11.448C581.718 11.896 581.106 12.12 580.346 12.12ZM588.513 12C587.929 12 587.461 11.832 587.109 11.496C586.765 11.152 586.593 10.7 586.593 10.14V4.224H584.313V3.24H587.673V10.14C587.673 10.412 587.749 10.628 587.901 10.788C588.053 10.94 588.257 11.016 588.513 11.016H590.553V12H588.513ZM594.172 12.12C593.492 12.12 592.952 11.932 592.552 11.556C592.152 11.172 591.952 10.672 591.952 10.056C591.952 9.648 592.044 9.292 592.228 8.988C592.412 8.684 592.668 8.448 592.996 8.28C593.324 8.104 593.7 8.016 594.124 8.016H596.164V7.5C596.164 6.644 595.696 6.216 594.76 6.216C594.344 6.216 594.008 6.292 593.752 6.444C593.496 6.596 593.36 6.808 593.344 7.08H592.264C592.304 6.56 592.544 6.132 592.984 5.796C593.432 5.452 594.024 5.28 594.76 5.28C595.56 5.28 596.172 5.472 596.596 5.856C597.028 6.24 597.244 6.776 597.244 7.464V12H596.176V10.8H596.152C596.088 11.208 595.884 11.532 595.54 11.772C595.196 12.004 594.74 12.12 594.172 12.12ZM594.436 11.208C594.964 11.208 595.384 11.08 595.696 10.824C596.008 10.568 596.164 10.22 596.164 9.78V8.856H594.244C593.892 8.856 593.604 8.964 593.38 9.18C593.164 9.388 593.056 9.668 593.056 10.02C593.056 10.388 593.176 10.68 593.416 10.896C593.664 11.104 594.004 11.208 594.436 11.208ZM602.604 12C602.06 12 601.624 11.844 601.296 11.532C600.968 11.212 600.804 10.788 600.804 10.26V6.384H598.908V5.4H600.804V3.54H601.884V5.4H604.584V6.384H601.884V10.26C601.884 10.484 601.948 10.668 602.076 10.812C602.212 10.948 602.388 11.016 602.604 11.016H604.524V12H602.604ZM606.559 12V11.016H608.899V6.384H606.799V5.4H609.979V11.016H612.199V12H606.559ZM609.319 4.212C609.055 4.212 608.847 4.144 608.695 4.008C608.543 3.872 608.467 3.688 608.467 3.456C608.467 3.216 608.543 3.028 608.695 2.892C608.847 2.748 609.055 2.676 609.319 2.676C609.583 2.676 609.791 2.748 609.943 2.892C610.095 3.028 610.171 3.216 610.171 3.456C610.171 3.688 610.095 3.872 609.943 4.008C609.791 4.144 609.583 4.212 609.319 4.212ZM616.334 12.096C615.542 12.096 614.91 11.864 614.438 11.4C613.974 10.936 613.742 10.288 613.742 9.456V7.944C613.742 7.104 613.974 6.456 614.438 6C614.902 5.536 615.534 5.304 616.334 5.304C617.134 5.304 617.766 5.536 618.23 6C618.694 6.456 618.926 7.104 618.926 7.944V9.456C618.926 10.288 618.69 10.936 618.218 11.4C617.754 11.864 617.126 12.096 616.334 12.096ZM616.334 11.136C616.806 11.136 617.174 11.004 617.438 10.74C617.71 10.476 617.846 10.088 617.846 9.576V7.824C617.846 7.312 617.71 6.924 617.438 6.66C617.174 6.396 616.806 6.264 616.334 6.264C615.87 6.264 615.502 6.396 615.23 6.66C614.958 6.924 614.822 7.312 614.822 7.824V9.576C614.822 10.088 614.958 10.476 615.23 10.74C615.502 11.004 615.87 11.136 616.334 11.136ZM621.034 12V5.4H622.114V6.66H622.126C622.182 6.22 622.362 5.88 622.666 5.64C622.97 5.4 623.374 5.28 623.878 5.28C624.542 5.28 625.07 5.484 625.462 5.892C625.854 6.3 626.05 6.856 626.05 7.56V12H624.97V7.752C624.97 7.248 624.842 6.864 624.586 6.6C624.338 6.328 623.998 6.192 623.566 6.192C623.118 6.192 622.762 6.332 622.498 6.612C622.242 6.892 622.114 7.288 622.114 7.8V12H621.034ZM630.461 12.096C629.725 12.096 629.153 11.932 628.745 11.604C628.345 11.268 628.145 10.796 628.145 10.188H629.225C629.225 10.492 629.333 10.732 629.549 10.908C629.765 11.076 630.069 11.16 630.461 11.16H630.989C631.389 11.16 631.697 11.072 631.913 10.896C632.137 10.72 632.249 10.472 632.249 10.152C632.249 9.584 631.989 9.264 631.469 9.192L629.645 8.928C629.197 8.864 628.849 8.68 628.601 8.376C628.353 8.064 628.229 7.656 628.229 7.152C628.229 6.576 628.425 6.124 628.817 5.796C629.217 5.468 629.765 5.304 630.461 5.304H630.989C631.629 5.304 632.149 5.464 632.549 5.784C632.957 6.096 633.177 6.508 633.209 7.02H632.117C632.101 6.788 631.989 6.596 631.781 6.444C631.581 6.292 631.317 6.216 630.989 6.216H630.461C630.093 6.216 629.805 6.3 629.597 6.468C629.389 6.636 629.285 6.864 629.285 7.152C629.285 7.616 629.497 7.88 629.921 7.944L631.625 8.184C632.745 8.344 633.305 9 633.305 10.152C633.305 10.768 633.101 11.248 632.693 11.592C632.293 11.928 631.725 12.096 630.989 12.096H630.461Z"
+      class="fill-neutral-500 dark:fill-neutral-200"
+    />
+    <path
+      d="M340.344 173V166.4H341.424V167.66H341.448C341.504 167.236 341.684 166.9 341.988 166.652C342.292 166.404 342.7 166.28 343.212 166.28C343.9 166.28 344.428 166.488 344.796 166.904C345.172 167.312 345.36 167.896 345.36 168.656V169.22H344.28V168.656C344.28 167.696 343.812 167.216 342.876 167.216C342.404 167.216 342.044 167.352 341.796 167.624C341.548 167.896 341.424 168.288 341.424 168.8V173H340.344ZM349.795 173.12C349.019 173.12 348.391 172.888 347.911 172.424C347.439 171.952 347.203 171.304 347.203 170.48V168.92C347.203 168.096 347.439 167.452 347.911 166.988C348.391 166.516 349.019 166.28 349.795 166.28C350.315 166.28 350.767 166.384 351.151 166.592C351.543 166.8 351.847 167.092 352.063 167.468C352.279 167.844 352.387 168.288 352.387 168.8V169.976H348.259V170.6C348.259 171.088 348.399 171.476 348.679 171.764C348.959 172.044 349.331 172.184 349.795 172.184C350.195 172.184 350.523 172.108 350.779 171.956C351.043 171.796 351.203 171.584 351.259 171.32H352.339C352.267 171.872 351.999 172.312 351.535 172.64C351.071 172.96 350.491 173.12 349.795 173.12ZM348.259 169.136H351.331V168.8C351.331 168.28 351.195 167.88 350.923 167.6C350.659 167.312 350.283 167.168 349.795 167.168C349.307 167.168 348.927 167.312 348.655 167.6C348.391 167.88 348.259 168.28 348.259 168.8V169.136ZM354.495 173V166.4H355.575V167.66H355.587C355.643 167.22 355.823 166.88 356.127 166.64C356.431 166.4 356.835 166.28 357.339 166.28C358.003 166.28 358.531 166.484 358.923 166.892C359.315 167.3 359.511 167.856 359.511 168.56V173H358.431V168.752C358.431 168.248 358.303 167.864 358.047 167.6C357.799 167.328 357.459 167.192 357.027 167.192C356.579 167.192 356.223 167.332 355.959 167.612C355.703 167.892 355.575 168.288 355.575 168.8V173H354.495ZM363.802 173.12C363.146 173.12 362.618 172.9 362.218 172.46C361.826 172.02 361.63 171.424 361.63 170.672V168.74C361.63 167.98 361.826 167.38 362.218 166.94C362.61 166.5 363.138 166.28 363.802 166.28C364.298 166.28 364.706 166.404 365.026 166.652C365.354 166.9 365.55 167.236 365.614 167.66H365.626L365.602 166.16V164.24H366.682V173H365.602V171.74H365.59C365.534 172.172 365.346 172.512 365.026 172.76C364.706 173 364.298 173.12 363.802 173.12ZM364.162 172.184C364.61 172.184 364.962 172.044 365.218 171.764C365.474 171.484 365.602 171.096 365.602 170.6V168.8C365.602 168.304 365.474 167.916 365.218 167.636C364.962 167.356 364.61 167.216 364.162 167.216C363.706 167.216 363.35 167.336 363.094 167.576C362.838 167.808 362.71 168.196 362.71 168.74V170.66C362.71 171.196 362.838 171.584 363.094 171.824C363.35 172.064 363.706 172.184 364.162 172.184ZM371.381 173.12C370.605 173.12 369.977 172.888 369.497 172.424C369.025 171.952 368.789 171.304 368.789 170.48V168.92C368.789 168.096 369.025 167.452 369.497 166.988C369.977 166.516 370.605 166.28 371.381 166.28C371.901 166.28 372.353 166.384 372.737 166.592C373.129 166.8 373.433 167.092 373.649 167.468C373.865 167.844 373.973 168.288 373.973 168.8V169.976H369.845V170.6C369.845 171.088 369.985 171.476 370.265 171.764C370.545 172.044 370.917 172.184 371.381 172.184C371.781 172.184 372.109 172.108 372.365 171.956C372.629 171.796 372.789 171.584 372.845 171.32H373.925C373.853 171.872 373.585 172.312 373.121 172.64C372.657 172.96 372.077 173.12 371.381 173.12ZM369.845 169.136H372.917V168.8C372.917 168.28 372.781 167.88 372.509 167.6C372.245 167.312 371.869 167.168 371.381 167.168C370.893 167.168 370.513 167.312 370.241 167.6C369.977 167.88 369.845 168.28 369.845 168.8V169.136ZM376.321 173V166.4H377.401V167.66H377.425C377.481 167.236 377.661 166.9 377.965 166.652C378.269 166.404 378.677 166.28 379.189 166.28C379.877 166.28 380.405 166.488 380.773 166.904C381.149 167.312 381.337 167.896 381.337 168.656V169.22H380.257V168.656C380.257 167.696 379.789 167.216 378.853 167.216C378.381 167.216 378.021 167.352 377.773 167.624C377.525 167.896 377.401 168.288 377.401 168.8V173H376.321Z"
+      class="fill-neutral-500 dark:fill-neutral-200"
+    />
+    <g filter="url(#filter5_dd_3619_2000)">
+      <rect
+        x="322"
+        y="16"
+        width="77"
+        height="77"
+        rx="6"
+        class="fill-white dark:fill-gray-800"
+      />
+    </g>
+    <path
+      d="M393.855 36.6948H366.233V64.3164H393.855V36.6948Z"
+      fill="url(#pattern0_3619_2000)"
+    />
+    <path
+      d="M358.054 30H331V60.8378H358.054V30Z"
+      fill="url(#pattern1_3619_2000)"
+    />
+    <path
+      d="M375.565 44.2202H348.511V75.0581H375.565V44.2202Z"
+      fill="url(#pattern2_3619_2000)"
+    />
+    <path
+      d="M0.333333 142C0.333333 143.473 1.52724 144.667 3 144.667C4.47276 144.667 5.66667 143.473 5.66667 142C5.66667 140.527 4.47276 139.333 3 139.333C1.52724 139.333 0.333333 140.527 0.333333 142ZM692.333 142C692.333 143.473 693.527 144.667 695 144.667C696.473 144.667 697.667 143.473 697.667 142C697.667 140.527 696.473 139.333 695 139.333C693.527 139.333 692.333 140.527 692.333 142ZM3 142V142.5H695V142V141.5H3V142Z"
+      class="fill-neutral-400 dark:fill-neutral-200"
+    />
+    <path
+      d="M358.333 142C358.333 143.473 359.527 144.667 361 144.667C362.473 144.667 363.667 143.473 363.667 142C363.667 140.527 362.473 139.333 361 139.333C359.527 139.333 358.333 140.527 358.333 142ZM361 142H361.5V99.5H361H360.5V142H361Z"
+      fill="#9CA3AF"
+    />
+    <g filter="url(#filter6_dd_3619_2000)">
+      <rect
+        x="547"
+        y="47"
+        width="44.6549"
+        height="44.6549"
+        rx="6"
+        class="fill-white dark:fill-gray-800"
+      />
+    </g>
+    <path
+      d="M553.117 86.1C552.644 86.1 552.231 86.0133 551.877 85.84C551.531 85.66 551.261 85.41 551.067 85.09C550.874 84.7633 550.777 84.38 550.777 83.94V82.56C550.777 82.12 550.874 81.74 551.067 81.42C551.261 81.0933 551.531 80.8433 551.877 80.67C552.231 80.49 552.644 80.4 553.117 80.4C553.804 80.4 554.354 80.58 554.767 80.94C555.187 81.2933 555.407 81.7767 555.427 82.39H554.197C554.177 82.1033 554.067 81.8833 553.867 81.73C553.674 81.57 553.424 81.49 553.117 81.49C552.777 81.49 552.511 81.5833 552.317 81.77C552.124 81.95 552.027 82.21 552.027 82.55V83.94C552.027 84.28 552.124 84.5433 552.317 84.73C552.511 84.9167 552.777 85.01 553.117 85.01C553.431 85.01 553.684 84.9333 553.877 84.78C554.071 84.62 554.177 84.3967 554.197 84.11H555.427C555.407 84.7233 555.187 85.21 554.767 85.57C554.354 85.9233 553.804 86.1 553.117 86.1ZM559.523 86.1C559.137 86.1 558.813 86.0033 558.553 85.81C558.293 85.6167 558.113 85.3467 558.013 85V86H556.793V78.7H558.043V80.24L558.003 81.5C558.11 81.1533 558.293 80.8833 558.553 80.69C558.82 80.4967 559.143 80.4 559.523 80.4C560.063 80.4 560.497 80.59 560.823 80.97C561.15 81.35 561.313 81.8633 561.313 82.51V84C561.313 84.64 561.147 85.15 560.813 85.53C560.487 85.91 560.057 86.1 559.523 86.1ZM559.053 85.02C559.373 85.02 559.62 84.9333 559.793 84.76C559.973 84.5867 560.063 84.32 560.063 83.96V82.54C560.063 82.18 559.973 81.9133 559.793 81.74C559.62 81.5667 559.373 81.48 559.053 81.48C558.733 81.48 558.483 81.5767 558.303 81.77C558.13 81.9633 558.043 82.2367 558.043 82.59V83.91C558.043 84.2633 558.13 84.5367 558.303 84.73C558.483 84.9233 558.733 85.02 559.053 85.02ZM566.87 87.2C565.856 86.9667 565.073 86.51 564.52 85.83C563.966 85.1433 563.69 84.2967 563.69 83.29V81.5C563.69 80.5 563.966 79.66 564.52 78.98C565.073 78.3 565.856 77.84 566.87 77.6V78.84C566.276 78.98 565.806 79.29 565.46 79.77C565.12 80.2433 564.95 80.82 564.95 81.5V83.29C564.95 83.97 565.12 84.55 565.46 85.03C565.806 85.5033 566.276 85.81 566.87 85.95V87.2ZM568.786 86V80.5H570.006V81.53C570.072 81.1833 570.236 80.91 570.496 80.71C570.756 80.5033 571.086 80.4 571.486 80.4C572.026 80.4 572.456 80.58 572.776 80.94C573.102 81.3 573.266 81.7833 573.266 82.39V86H572.016V82.54C572.016 82.2 571.926 81.94 571.746 81.76C571.572 81.5733 571.336 81.48 571.036 81.48C570.722 81.48 570.476 81.5733 570.296 81.76C570.122 81.9467 570.036 82.2133 570.036 82.56V86H568.786ZM576.392 85.08V83.28H574.602V82.12H576.392V80.32H577.632V82.12H579.422V83.28H577.632V85.08H576.392ZM580.848 86V84.87H582.748V79.91L580.838 81.31V79.91L582.518 78.7H583.998V84.87H585.528V86H580.848ZM587.154 87.2V85.95C587.747 85.81 588.214 85.5033 588.554 85.03C588.901 84.55 589.074 83.97 589.074 83.29V81.5C589.074 80.82 588.901 80.2433 588.554 79.77C588.214 79.29 587.747 78.98 587.154 78.84V77.6C588.167 77.84 588.951 78.3 589.504 78.98C590.057 79.66 590.334 80.5 590.334 81.5V83.29C590.334 84.2967 590.057 85.1433 589.504 85.83C588.951 86.51 588.167 86.9667 587.154 87.2Z"
+      class="fill-neutral-400 dark:fill-neutral-300"
+    />
+    <defs>
+      <filter
+        id="filter0_dd_3619_2000"
+        x="18"
+        y="45"
+        width="50.6549"
+        height="50.6548"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood
+          flood-opacity="0"
+          result="BackgroundImageFix"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3619_2000"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_3619_2000"
+          result="effect2_dropShadow_3619_2000"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect2_dropShadow_3619_2000"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter1_dd_3619_2000"
+        x="109"
+        y="45"
+        width="50.6549"
+        height="50.6548"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood
+          flood-opacity="0"
+          result="BackgroundImageFix"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3619_2000"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_3619_2000"
+          result="effect2_dropShadow_3619_2000"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect2_dropShadow_3619_2000"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter2_dd_3619_2000"
+        x="200"
+        y="45"
+        width="50.6549"
+        height="50.6548"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood
+          flood-opacity="0"
+          result="BackgroundImageFix"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3619_2000"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_3619_2000"
+          result="effect2_dropShadow_3619_2000"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect2_dropShadow_3619_2000"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter3_dd_3619_2000"
+        x="24"
+        y="210"
+        width="227"
+        height="32"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood
+          flood-opacity="0"
+          result="BackgroundImageFix"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3619_2000"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_3619_2000"
+          result="effect2_dropShadow_3619_2000"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect2_dropShadow_3619_2000"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter4_dd_3619_2000"
+        x="471"
+        y="209"
+        width="179"
+        height="32"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood
+          flood-opacity="0"
+          result="BackgroundImageFix"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3619_2000"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_3619_2000"
+          result="effect2_dropShadow_3619_2000"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect2_dropShadow_3619_2000"
+          result="shape"
+        />
+      </filter>
+      <filter
+        id="filter5_dd_3619_2000"
+        x="319"
+        y="14"
+        width="83"
+        height="83"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood
+          flood-opacity="0"
+          result="BackgroundImageFix"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3619_2000"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_3619_2000"
+          result="effect2_dropShadow_3619_2000"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect2_dropShadow_3619_2000"
+          result="shape"
+        />
+      </filter>
+      <pattern
+        id="pattern0_3619_2000"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use
+          xlink:href="#image0_3619_2000"
+          transform="scale(0.00684932)"
+        />
+      </pattern>
+      <pattern
+        id="pattern1_3619_2000"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use
+          xlink:href="#image1_3619_2000"
+          transform="scale(0.00699301 0.00613497)"
+        />
+      </pattern>
+      <pattern
+        id="pattern2_3619_2000"
+        patternContentUnits="objectBoundingBox"
+        width="1"
+        height="1"
+      >
+        <use
+          xlink:href="#image2_3619_2000"
+          transform="scale(0.00699301 0.00613497)"
+        />
+      </pattern>
+      <filter
+        id="filter6_dd_3619_2000"
+        x="544"
+        y="45"
+        width="50.6549"
+        height="50.6548"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood
+          flood-opacity="0"
+          result="BackgroundImageFix"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="BackgroundImageFix"
+          result="effect1_dropShadow_3619_2000"
+        />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="1.5" />
+        <feColorMatrix
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+        />
+        <feBlend
+          mode="normal"
+          in2="effect1_dropShadow_3619_2000"
+          result="effect2_dropShadow_3619_2000"
+        />
+        <feBlend
+          mode="normal"
+          in="SourceGraphic"
+          in2="effect2_dropShadow_3619_2000"
+          result="shape"
+        />
+      </filter>
+      <image
+        id="image0_3619_2000"
+        width="146"
+        height="146"
+        preserveAspectRatio="none"
+        xlink:href="data:image/png;base64,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"
+      />
+      <image
+        id="image1_3619_2000"
+        width="143"
+        height="163"
+        preserveAspectRatio="none"
+        xlink:href="data:image/png;base64,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"
+      />
+      <image
+        id="image2_3619_2000"
+        width="143"
+        height="163"
+        preserveAspectRatio="none"
+        xlink:href="data:image/png;base64,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"
+      />
+    </defs>
+  </svg>
+</template>
diff --git a/apps/cientos-docs/app/components/light-shadow/AccumulativeShadows.vue b/apps/cientos-docs/app/components/light-shadow/AccumulativeShadows.vue
new file mode 100644
index 000000000..5d1f94b95
--- /dev/null
+++ b/apps/cientos-docs/app/components/light-shadow/AccumulativeShadows.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { AccumulativeShadows, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { once, accumulate, frames, blend, limit, scale, opacity, alphaTest, color, colorBlend, resolution, toneMapped } = useControls({
+  once: true,
+  accumulate: true,
+  frames: { value: 40, min: 1, max: 100, step: 1 },
+  blend: { value: 100, min: 0, max: 200, step: 5 },
+  limit: Infinity,
+  scale: { value: 10, min: 1, max: 30, step: 1 },
+  opacity: { value: 1, min: 0, max: 1, step: 0.1 },
+  alphaTest: { value: 0.65, min: 0, max: 1, step: 0.05 },
+  color: '#000000',
+  colorBlend: { value: 2, min: 0, max: 5, step: 0.1 },
+  resolution: { value: 1024, min: 256, max: 2048, step: 256 },
+  toneMapped: true,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#fbb03b" :shadows="true">
+    <OrbitControls />
+    <TresMesh :position-y="0.3" :scale="0.4" :cast-shadow="true">
+      <TresTorusKnotGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <AccumulativeShadows
+      :blend="blend"
+      :color="color"
+      :once="once"
+      :accumulate="accumulate"
+      :frames="frames"
+      :limit="limit"
+      :scale="scale"
+      :opacity="opacity"
+      :alpha-test="alphaTest"
+      :color-blend="colorBlend"
+      :resolution="resolution"
+      :tone-mapped="toneMapped"
+      :position-y="-0.4"
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/light-shadow/BakeShadows.vue b/apps/cientos-docs/app/components/light-shadow/BakeShadows.vue
new file mode 100644
index 000000000..fa82834e1
--- /dev/null
+++ b/apps/cientos-docs/app/components/light-shadow/BakeShadows.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { BakeShadows } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
+
+const cubeRef = shallowRef()
+
+function onLoop({ elapsed }: { elapsed: number }) {
+  if (cubeRef.value) {
+    cubeRef.value.rotation.y = elapsed * 0.5
+    cubeRef.value.rotation.x = elapsed * 0.5
+  }
+}
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5" shadows @loop="onLoop">
+    <TresPerspectiveCamera :position="[0, 2, 5]" :look-at="[0, 0, 0]" />
+    <BakeShadows />
+    <TresMesh ref="cubeRef" cast-shadow>
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial color="orange" />
+    </TresMesh>
+    <TresMesh receive-shadow :position="[0, -2, 0]" :rotation-x="-Math.PI / 2">
+      <TresPlaneGeometry :args="[5, 5]" />
+      <TresMeshStandardMaterial :color="0xF7F7F7" />
+    </TresMesh>
+    <TresDirectionalLight cast-shadow :position="[0, 10, 0]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/light-shadow/CircleShadow.vue b/apps/cientos-docs/app/components/light-shadow/CircleShadow.vue
new file mode 100644
index 000000000..a67c8e42f
--- /dev/null
+++ b/apps/cientos-docs/app/components/light-shadow/CircleShadow.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { CircleShadow, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { color, opacity, offset } = useControls({
+  color: '#000000',
+  opacity: { value: 0.5, min: 0, max: 1, step: 0.1 },
+  offset: { value: 0, min: 0, max: 1, step: 0.05 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <TresGroup :position-y="-0.5">
+      <TresMesh :position-y="1">
+        <TresBoxGeometry />
+        <TresMeshToonMaterial color="orange" />
+      </TresMesh>
+      <CircleShadow :scale="1.5" :color="color" :opacity="opacity" :offset="offset" />
+    </TresGroup>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/light-shadow/ContactShadow.vue b/apps/cientos-docs/app/components/light-shadow/ContactShadow.vue
new file mode 100644
index 000000000..1b2204e2b
--- /dev/null
+++ b/apps/cientos-docs/app/components/light-shadow/ContactShadow.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { opacity, blur, color, tint, scale, width, height, far, smooth, resolution, frames } = useControls({
+  opacity: { value: 1, min: 0, max: 1, step: 0.1 },
+  blur: { value: 1, min: 0, max: 5, step: 0.1 },
+  color: '#000000',
+  tint: '#335',
+  scale: { value: 20, min: 1, max: 50, step: 1 },
+  width: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  height: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  far: { value: 10, min: 1, max: 50, step: 1 },
+  smooth: true,
+  resolution: { value: 512, min: 256, max: 1024, step: 256 },
+  frames: Number.POSITIVE_INFINITY,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <Levioso :speed="2" :range="[0, 0.7]" :rotation-factor="9">
+      <TorusKnot :scale="0.45">
+        <TresMeshNormalMaterial />
+      </TorusKnot>
+    </Levioso>
+    <ContactShadows
+      :position-y="-1"
+      :color="color"
+      :tint="tint"
+      :scale="scale"
+      :opacity="opacity"
+      :blur="blur"
+      :width="width"
+      :height="height"
+      :far="far"
+      :smooth="smooth"
+      :resolution="resolution"
+      :frames="frames"
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/light-shadow/Lensflare.vue b/apps/cientos-docs/app/components/light-shadow/Lensflare.vue
new file mode 100644
index 000000000..0cd75109a
--- /dev/null
+++ b/apps/cientos-docs/app/components/light-shadow/Lensflare.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Lensflare, OrbitControls, Torus } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+import { shallowRef } from 'vue'
+
+const uuid = inject(`uuid`)
+
+const [x, z] = [shallowRef(0), shallowRef(0)]
+
+const { scale, seed, color, distance, size } = useControls({
+  scale: { value: 0.33, min: 0.1, max: 2, step: 0.1 },
+  seed: { value: 1028, min: 1, max: 5000, step: 1 },
+  color: '#ffffff',
+  distance: { value: 0, min: -2, max: 2, step: 0.1 },
+  size: { value: 1, min: 0.1, max: 10, step: 0.5 },
+}, { uuid })
+
+function onLoop({ elapsed }: { elapsed: number }) {
+  z.value = Math.cos(elapsed * 0.5) * 2
+  x.value = Math.sin(elapsed)
+}
+</script>
+
+<template>
+  <TresCanvas clear-color="#333" @loop="onLoop">
+    <OrbitControls />
+    <TresPointLight :position="[x, 0, z]">
+      <Lensflare
+        :seed="seed"
+        :scale="scale"
+        :color="color"
+        :distance="distance"
+        :size="size"
+      />
+    </TresPointLight>
+    <Torus
+      v-for="n in [-2, 0, 2]"
+      :key="n"
+      :args="[0.7, 0.15]"
+      :position-z="n"
+      :rotation-y="Math.PI * 0.5"
+    >
+      <TresMeshPhongMaterial color="#888" />
+    </Torus>
+    <TresGridHelper :position="[0, -0.9, 0]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/light-shadow/RandomizedLights.vue b/apps/cientos-docs/app/components/light-shadow/RandomizedLights.vue
new file mode 100644
index 000000000..35b78b742
--- /dev/null
+++ b/apps/cientos-docs/app/components/light-shadow/RandomizedLights.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import {
+  AccumulativeShadows,
+  OrbitControls,
+  Plane,
+  RandomizedLights,
+} from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas shadows>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <OrbitControls />
+    <AccumulativeShadows :blend="100" color="#fbb03b" once :position-y="-1">
+      <RandomizedLights
+        :ambient="0.25"
+        :bias="0.001"
+        :count="8"
+        :intensity="Math.PI"
+        :map-size="1024"
+        :position="[5, 5, -10]"
+        :radius="2"
+      />
+    </AccumulativeShadows>
+    <TresMesh cast-shadow>
+      <TresBoxGeometry />
+      <TresMeshToonMaterial color="orange" />
+    </TresMesh>
+    <Plane :position="[0, -2, 0]" receive-shadow :args="[10, 10]">
+      <TresMeshStandardMaterial />
+    </Plane>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/light-shadow/SoftShadows.vue b/apps/cientos-docs/app/components/light-shadow/SoftShadows.vue
new file mode 100644
index 000000000..422b176f6
--- /dev/null
+++ b/apps/cientos-docs/app/components/light-shadow/SoftShadows.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Levioso, Plane, SoftShadows, TorusKnot } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { size, samples, focus } = useControls({
+  size: { value: 25, min: 5, max: 100, step: 5 },
+  samples: { value: 10, min: 1, max: 32, step: 1 },
+  focus: { value: 0, min: 0, max: 1, step: 0.1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas shadows clear-color="#82DBC5">
+    <Levioso :speed="4" :range="[0, 0.7]" :rotation-factor="9">
+      <TorusKnot cast-shadow :scale="0.45">
+        <TresMeshStandardMaterial color="orange" />
+      </TorusKnot>
+    </Levioso>
+    <Plane :position="[0, -2, 0]" receive-shadow :args="[10, 10]">
+      <TresMeshStandardMaterial />
+    </Plane>
+    <TresDirectionalLight cast-shadow :position="[0, 3, 0]" />
+    <TresAmbientLight :intensity="0.5" />
+    <SoftShadows :size="size" :samples="samples" :focus="focus" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/loaders/fbx.vue b/apps/cientos-docs/app/components/loaders/fbx.vue
new file mode 100644
index 000000000..332cb0c8b
--- /dev/null
+++ b/apps/cientos-docs/app/components/loaders/fbx.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { FBXModel, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <FBXModel
+      path="https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx"
+      cast-shadow
+      :scale="0.01"
+      :position="[0, -1.6, 0]"
+      :rotation-y="-Math.PI * 0.5"
+    />
+    <TresMesh
+      :rotate-x="Math.PI * -0.5"
+      :position-y="-2"
+      receive-shadow
+    >
+      <TresPlaneGeometry :args="[40, 40]" />
+      <TresMeshStandardMaterial :color="0xF7F7F7" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="1"
+      cast-shadow
+      :position="[5, 10, 5]"
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/loaders/gltf.vue b/apps/cientos-docs/app/components/loaders/gltf.vue
new file mode 100644
index 000000000..5229af450
--- /dev/null
+++ b/apps/cientos-docs/app/components/loaders/gltf.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { GLTFModel, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#F78B3D">
+    <TresPerspectiveCamera :position="[3, 2, 5]" />
+    <OrbitControls />
+    <GLTFModel draco path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb" />
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/loaders/useSvg.vue b/apps/cientos-docs/app/components/loaders/useSvg.vue
new file mode 100644
index 000000000..1bee9d615
--- /dev/null
+++ b/apps/cientos-docs/app/components/loaders/useSvg.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { OrbitControls, UseSVG } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+
+const svgURL = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/svgs/cientos_heart.svg'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <OrbitControls />
+    <Suspense>
+      <UseSVG
+        :src="svgURL"
+        :position="[-0.4, 1, 0]"
+        :scale="0.01"
+      />
+    </Suspense>
+    <TresGridHelper />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/loaders/useTexture.vue b/apps/cientos-docs/app/components/loaders/useTexture.vue
new file mode 100644
index 000000000..39fa68031
--- /dev/null
+++ b/apps/cientos-docs/app/components/loaders/useTexture.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { OrbitControls, useTexture } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+
+const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'
+const { state: texture } = useTexture(path)
+</script>
+
+<template>
+  <TresCanvas clear-color="#FBB03B">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshStandardMaterial :map="texture" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/loaders/useTextures.vue b/apps/cientos-docs/app/components/loaders/useTextures.vue
new file mode 100644
index 000000000..df9f8f8e9
--- /dev/null
+++ b/apps/cientos-docs/app/components/loaders/useTextures.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'
+import type { MeshStandardMaterial } from 'three'
+
+// Load the 3D model
+const {
+  nodes,
+  materials,
+} = useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
+  { draco: true },
+)
+const cube = computed(() => nodes.value?.BlenderCube)
+const material = computed(() => materials.value?.Material)
+
+// Define texture paths
+const texturePaths = [
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Color.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_NormalGL.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Roughness.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Metalness.jpg',
+  'https://raw.githubusercontent.com/Tresjs/assets/main/textures/rusted-metal/Metal053C_4K-JPG_Displacement.jpg',
+]
+
+// Load all PBR textures at once
+const { textures, isLoading, error } = useTextures(texturePaths)
+
+// Apply textures to material when loaded
+watch([material, textures], ([modelMaterial, textures]) => {
+  if (modelMaterial && textures && textures.length === texturePaths.length) {
+    // Cast to MeshStandardMaterial to access PBR properties
+    const pbrMaterial = modelMaterial as MeshStandardMaterial
+
+    // Apply textures
+    pbrMaterial.map = textures[0] ?? null
+    pbrMaterial.normalMap = textures[1] ?? null
+    pbrMaterial.roughnessMap = textures[2] ?? null
+    pbrMaterial.metalnessMap = textures[3] ?? null
+    pbrMaterial.displacementMap = textures[4] ?? null
+
+    // Set material properties
+    pbrMaterial.displacementScale = 0
+    pbrMaterial.metalness = 0.8
+    pbrMaterial.roughness = 0.2
+  }
+})
+
+watch(error, (errs) => {
+  if (errs) {
+    console.error('Error loading textures:', errs)
+  }
+})
+</script>
+
+<template>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="isLoading"
+      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">Loading...</div>
+    </div>
+  </Transition>
+  <TresCanvas clear-color="#4f4f4f">
+    <Suspense>
+      <Environment preset="studio" background :blur="1" />
+    </Suspense>
+    <TresPerspectiveCamera :position="[2, 2, 4]" :look-at="[0, 2, 0]" />
+    <OrbitControls :target="[0, 2, 0]" />
+    <TresGridHelper />
+    <TresAmbientLight :intensity="2" />
+    <TresGroup position-y="2">
+      <primitive v-if="cube" :object="cube" />
+    </TresGroup>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/loaders/useVideoTexture.vue b/apps/cientos-docs/app/components/loaders/useVideoTexture.vue
new file mode 100644
index 000000000..624271dbc
--- /dev/null
+++ b/apps/cientos-docs/app/components/loaders/useVideoTexture.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { OrbitControls, Sphere, useVideoTexture } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { ref } from 'vue'
+
+const exampleVideo = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'
+const texture = ref()
+texture.value = await useVideoTexture(exampleVideo, { loop: false })
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera
+      :position="[0, 5, 9]"
+      :look-at="[0, 1, 0]"
+    />
+    <OrbitControls />
+    <Sphere :position="[0, 2, 0]">
+      <TresMeshBasicMaterial :map="texture" />
+    </Sphere>
+    <TresGridHelper />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/materials/CustomShaderMaterial.vue b/apps/cientos-docs/app/components/materials/CustomShaderMaterial.vue
new file mode 100644
index 000000000..bb95450b5
--- /dev/null
+++ b/apps/cientos-docs/app/components/materials/CustomShaderMaterial.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { CustomShaderMaterial } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { MeshBasicMaterial } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+}
+
+const materialProps = {
+  baseMaterial: MeshBasicMaterial,
+  fragmentShader: `
+    varying float vWobble;
+
+    uniform float u_Time;
+
+    void main() {
+      float wobble = vWobble * 0.5 + 0.5;
+      csm_FragColor = mix(vec4(0.0, 0.4, 1.5, 1.0), vec4(1.2, 0.6, 0.8, 1.0), wobble);
+    }
+  `,
+  vertexShader: `
+    uniform float u_Time;
+    uniform float u_WobbleSpeed;
+    uniform float u_WobbleAmplitude;
+    uniform float u_WobbleFrequency;
+
+    varying float vWobble;
+
+    void main() {
+      float wobble = sin(csm_Position.z * u_WobbleFrequency + u_Time * u_WobbleSpeed);
+      csm_Position += normal * wobble * u_WobbleAmplitude;
+
+      vWobble = wobble;
+    }
+  `,
+  uniforms: {
+    u_Time: { value: 0 },
+    u_WobbleSpeed: { value: 3 },
+    u_WobbleAmplitude: { value: 0.07 },
+    u_WobbleFrequency: { value: 3 },
+  },
+}
+
+function onLoop() {
+  materialProps.uniforms.u_Time.value
+    += 0.01 * materialProps.uniforms.u_WobbleSpeed.value
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl" @loop="onLoop">
+    <TresPerspectiveCamera :position="[0, 2, 4]" :look-at="[0, 0, 0]" />
+    <TresMesh>
+      <TresTorusKnotGeometry :args="[1, 0.3, 512, 32]" />
+      <CustomShaderMaterial v-bind="materialProps" />
+    </TresMesh>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/materials/GlassMaterial.vue b/apps/cientos-docs/app/components/materials/GlassMaterial.vue
new file mode 100644
index 000000000..e6ab60da8
--- /dev/null
+++ b/apps/cientos-docs/app/components/materials/GlassMaterial.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshGlassMaterial, OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresTorusKnotGeometry />
+      <MeshGlassMaterial />
+    </TresMesh>
+    <TresMesh :position="[0, 0, -3]">
+      <TresPlaneGeometry :args="[10, 10]" />
+      <TresMeshStandardMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/materials/HolographicMaterial.vue b/apps/cientos-docs/app/components/materials/HolographicMaterial.vue
new file mode 100644
index 000000000..7ed5c1320
--- /dev/null
+++ b/apps/cientos-docs/app/components/materials/HolographicMaterial.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box, HolographicMaterial, OrbitControls } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { fresnelOpacity, fresnelAmount, scanlineSize, hologramBrightness, signalSpeed, hologramColor, enableBlinking, blinkFresnelOnly, hologramOpacity } = useControls({
+  fresnelOpacity: { value: 1, min: 0, max: 1, step: 0.1 },
+  fresnelAmount: { value: 1, min: 0, max: 2, step: 0.1 },
+  scanlineSize: { value: 1, min: 0, max: 10, step: 0.5 },
+  hologramBrightness: { value: 1, min: 0, max: 3, step: 0.1 },
+  signalSpeed: { value: 1, min: 0, max: 5, step: 0.1 },
+  hologramColor: '#00ff00',
+  enableBlinking: true,
+  blinkFresnelOnly: false,
+  hologramOpacity: { value: 0.5, min: 0, max: 1, step: 0.1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[2, 2, 2]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Box :scale="0.5">
+      <HolographicMaterial
+        :fresnel-opacity="fresnelOpacity"
+        :fresnel-amount="fresnelAmount"
+        :scanline-size="scanlineSize"
+        :hologram-brightness="hologramBrightness"
+        :signal-speed="signalSpeed"
+        :hologram-color="hologramColor"
+        :enable-blinking="enableBlinking"
+        :blink-fresnel-only="blinkFresnelOnly"
+        :hologram-opacity="hologramOpacity"
+      />
+    </Box>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/materials/MeshReflectionMaterial.vue b/apps/cientos-docs/app/components/materials/MeshReflectionMaterial.vue
new file mode 100644
index 000000000..cbee4a2de
--- /dev/null
+++ b/apps/cientos-docs/app/components/materials/MeshReflectionMaterial.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshReflectionMaterial, OrbitControls } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { resolution, mix, blurMixSmooth, blurMixRough, blurDepthEdgeMin, blurDepthEdgeMax, blurDepthScale, blurDepthBias, distortion, reflectorOffset } = useControls({
+  resolution: { value: 256, min: 64, max: 2048, step: 64 },
+  mix: { value: 1, min: 0, max: 1, step: 0.1 },
+  blurMixSmooth: { value: 1, min: 0, max: 2, step: 0.1 },
+  blurMixRough: { value: 1, min: 0, max: 2, step: 0.1 },
+  blurDepthEdgeMin: { value: 0, min: 0, max: 1, step: 0.05 },
+  blurDepthEdgeMax: { value: 0.2, min: 0, max: 1, step: 0.05 },
+  blurDepthScale: { value: 1, min: 0, max: 3, step: 0.1 },
+  blurDepthBias: { value: 0, min: -1, max: 1, step: 0.1 },
+  distortion: { value: 0, min: 0, max: 1, step: 0.1 },
+  reflectorOffset: { value: 0, min: -1, max: 1, step: 0.1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
+      <TresPlaneGeometry :args="[10, 10]" />
+      <MeshReflectionMaterial
+        :blur="[300, 100]"
+        :mixBlur="30"
+        :mixStrength="80"
+        :mixContrast="1"
+        color="#a0a0a0"
+        :metalness="0.5"
+        :roughness="1"
+        mirror="0"
+        :resolution="resolution"
+        :mix="mix"
+        :blur-mix-smooth="blurMixSmooth"
+        :blur-mix-rough="blurMixRough"
+        :blur-depth-edge-min="blurDepthEdgeMin"
+        :blur-depth-edge-max="blurDepthEdgeMax"
+        :blur-depth-scale="blurDepthScale"
+        :blur-depth-bias="blurDepthBias"
+        :distortion="distortion"
+        :reflector-offset="reflectorOffset"
+      />
+    </TresMesh>
+    <TresMesh :position="[0, 1, 0]">
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/materials/PointMaterial.vue b/apps/cientos-docs/app/components/materials/PointMaterial.vue
new file mode 100644
index 000000000..e96eaa7e0
--- /dev/null
+++ b/apps/cientos-docs/app/components/materials/PointMaterial.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, PointMaterial } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TresPoints>
+      <TresIcosahedronGeometry :args="[1, 4]" />
+      <PointMaterial :size="5" color="orange" />
+    </TresPoints>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/materials/WobbleMaterial.vue b/apps/cientos-docs/app/components/materials/WobbleMaterial.vue
new file mode 100644
index 000000000..fffc67893
--- /dev/null
+++ b/apps/cientos-docs/app/components/materials/WobbleMaterial.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshWobbleMaterial, OrbitControls } from '@tresjs/cientos'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { speed, factor, color } = useControls({
+  speed: { value: 1, min: 0, max: 5, step: 0.1 },
+  factor: { value: 0.6, min: 0, max: 2, step: 0.1 },
+  color: '#ff8800',
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresTorusGeometry />
+      <MeshWobbleMaterial :color="color" :speed="speed" :factor="factor" />
+    </TresMesh>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/miscellaneous/Bounds.vue b/apps/cientos-docs/app/components/miscellaneous/Bounds.vue
new file mode 100644
index 000000000..e8b1eb64d
--- /dev/null
+++ b/apps/cientos-docs/app/components/miscellaneous/Bounds.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Bounds, OrbitControls } from '@tresjs/cientos'
+import { shallowRef } from 'vue'
+
+const boundsRef = shallowRef()
+const objectRef = shallowRef()
+
+function focusObject() {
+  boundsRef.value?.instance.lookAt(objectRef.value)
+}
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <OrbitControls make-default />
+    <Bounds ref="boundsRef" clip use-mounted :offset="0.75">
+      <TresMesh ref="objectRef" @click="(e) => focusObject()">
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </Bounds>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/miscellaneous/MouseParallax.vue b/apps/cientos-docs/app/components/miscellaneous/MouseParallax.vue
new file mode 100644
index 000000000..8cf84fb6a
--- /dev/null
+++ b/apps/cientos-docs/app/components/miscellaneous/MouseParallax.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { MouseParallax, TorusKnot } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { disabled, factor, ease } = useControls({
+  disabled: false,
+  factor: { value: 5, min: 0, max: 20, step: 0.5 },
+  ease: { value: 0.1, min: 0, max: 1, step: 0.05 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 0, 7.5]" :fov="75" />
+    <TorusKnot>
+      <TresMeshToonMaterial color="orange" />
+    </TorusKnot>
+    <MouseParallax :factor="factor" :ease="ease" :disabled="disabled" />
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/miscellaneous/PositionalAudio.vue b/apps/cientos-docs/app/components/miscellaneous/PositionalAudio.vue
new file mode 100644
index 000000000..717b7dc1b
--- /dev/null
+++ b/apps/cientos-docs/app/components/miscellaneous/PositionalAudio.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { OrbitControls, PositionalAudio, Sphere, useGLTF } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+import { gsap } from 'gsap'
+import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+
+const uuid = inject(`uuid`)
+
+let tl: gsap.core.Timeline, ctx: gsap.Context
+
+const ready = ref(false)
+const positionalAudioRef = shallowRef(null)
+const ballRef = shallowRef(null)
+
+const { distance, helper, loop, innerAngle, outerAngle, outerGain } = useControls({
+  distance: { value: 2, min: 0, max: 10, step: 0.1 },
+  helper: false,
+  loop: false,
+  innerAngle: { value: 195, min: 0, max: 360, step: 5 },
+  outerAngle: { value: 260, min: 0, max: 360, step: 5 },
+  outerGain: { value: 0.3, min: 0, max: 1, step: 0.1 },
+}, { uuid })
+
+const { state } = useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/positional-audio/ping-pong.glb', { draco: true })
+
+const onBallBounce = () => {
+  const iteration = tl.iteration() % 2
+
+  if (!iteration) {
+    positionalAudioRef?.value?.play()
+  }
+}
+
+watch([ready], () => {
+  if (!ballRef?.value || !ready.value) { return }
+
+  ctx.add(() => {
+    tl = gsap
+      .timeline({ repeat: -1, yoyo: true, onRepeat: onBallBounce })
+      .to(ballRef.value.instance.position, { y: 0, ease: 'power1.in', duration: 0.35 })
+  })
+})
+
+onMounted(() => {
+  ctx = gsap.context(() => { })
+})
+
+onUnmounted(() => {
+  positionalAudioRef?.value?.dispose()
+  ctx?.revert()
+})
+</script>
+
+<template>
+  <div
+    v-if="!ready"
+    class="ready"
+  >
+    <button @click="ready = true">
+      click to continue
+    </button>
+  </div>
+
+  <div
+    v-if="ready"
+    class="controls"
+  >
+    <button @click="tl?.play()">
+      play
+    </button>
+    <button @click="tl?.pause()">
+      pause
+    </button>
+  </div>
+
+  <TresCanvas
+    clear-color="#333"
+  >
+    <TresPerspectiveCamera :position="[0, 0.5, 15]" />
+    <OrbitControls make-default />
+
+    <Sphere
+      ref="ballRef"
+      :args="[1, 16, 16]"
+      :position="[0, 3, 0]"
+      :rotation-x="Math.PI / -2"
+    >
+      <TresMeshStandardMaterial />
+
+      <Suspense>
+        <PositionalAudio
+          ref="positionalAudioRef"
+          :ready
+          :distance="distance"
+          :helper="helper"
+          :loop="loop"
+          :inner-angle="innerAngle"
+          :outer-angle="outerAngle"
+          :outer-gain="outerGain"
+          url="https://raw.githubusercontent.com/Tresjs/assets/main/music/ping-pong.mp3"
+        />
+      </Suspense>
+    </Sphere>
+    <primitive
+      v-if="state?.scene"
+      :scale="[.2, .2, .2]"
+      :position="[0, -1.15, 0]"
+      receive-shadow
+      :object="state?.scene"
+    />
+    <TresAmbientLight
+      color="#ffffff"
+      :intensity="2"
+    />
+    <TresDirectionalLight
+      :position="[5, 10, 0]"
+      :intensity="2"
+    />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.ready {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 24;
+  background-color: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(5px);
+}
+
+.controls {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(5px);
+  top: 25px;
+  left: 25px;
+  column-gap: 5px;
+}
+
+.ready button,
+.controls button {
+  padding: 5px 10px;
+  background: #1b1c1e;
+  border: 1px solid #161618;
+}
+</style>
diff --git a/apps/cientos-docs/app/components/objects/AnimatedSprite.vue b/apps/cientos-docs/app/components/objects/AnimatedSprite.vue
new file mode 100644
index 000000000..805b52c11
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/AnimatedSprite.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { AnimatedSprite } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const ASSETS_URL = 'https://raw.githubusercontent.com/Tresjs/'
+  + 'assets/main/textures/animated-sprite/'
+
+const { fps, paused, loop, flipX, animation } = useControls({
+  fps: { value: 15, min: 1, max: 60, step: 1 },
+  paused: false,
+  loop: true,
+  flipX: false,
+  animation: { value: 'cientosIdle', options: ['cientosIdle', 'cientosWalk'] },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#FBB03B">
+    <TresPerspectiveCamera :position="[0, 0, 15]" />
+    <Suspense>
+      <AnimatedSprite
+        :image="`${ASSETS_URL}cientosTexture.png`"
+        :atlas="`${ASSETS_URL}cientosAtlas.json`"
+        :animation="animation"
+        :fps="fps"
+        :paused="paused"
+        :loop="loop"
+        :flip-x="flipX"
+      />
+    </Suspense>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/objects/CubeCamera.vue b/apps/cientos-docs/app/components/objects/CubeCamera.vue
new file mode 100644
index 000000000..49702592c
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/CubeCamera.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { CubeCamera, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { onMounted, onUnmounted, shallowRef } from 'vue'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const x = shallowRef(1)
+const y0 = shallowRef(1)
+const y1 = shallowRef(1)
+let intervalId: ReturnType<typeof setInterval>
+
+let elapsed = 0
+onMounted(() => {
+  intervalId = setInterval(() => {
+    elapsed += 1000 / 30
+    x.value = Math.cos(elapsed * 0.001) * 3
+    y0.value = (Math.sin(elapsed * 0.001) + 1) * 2
+    y1.value = (Math.sin(elapsed * 0.001 + Math.PI) + 1) * 2
+  }, 1000 / 30)
+})
+
+onUnmounted(() => { clearInterval(intervalId) })
+
+const { frames } = useControls({
+  frames: { value: Infinity, options: [1, 2, 5, 10, 30, 60, Infinity] },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#222">
+    <TresPerspectiveCamera :position="[0, 5, 20]" />
+    <OrbitControls />
+
+    <CubeCamera :position-y="5" :frames="frames">
+      <TresMesh :position="[-2, y0, 0]" :scale="2">
+        <TresSphereGeometry />
+        <TresMeshPhysicalMaterial :roughness="0" :metalness="1" />
+      </TresMesh>
+      <TresMesh :position="[2, y1, 0]" :scale="2">
+        <TresSphereGeometry />
+        <TresMeshPhysicalMaterial :roughness="0.25" :metalness="1" />
+      </TresMesh>
+    </CubeCamera>
+
+    <TresMesh :position="[x, 1, 0]">
+      <TresSphereGeometry />
+      <TresMeshBasicMaterial color="#fbb03b" />
+    </TresMesh>
+
+    <TresGridHelper :args="[100, 10]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/objects/Fbo.vue b/apps/cientos-docs/app/components/objects/Fbo.vue
new file mode 100644
index 000000000..debce8006
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/Fbo.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Fbo, OrbitControls } from '@tresjs/cientos'
+import type { TresObject } from '@tresjs/core'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
+
+const fboRef = shallowRef<InstanceType<typeof Fbo> | null>(null)
+const torusRef = shallowRef<TresObject | null>(null)
+
+function onLoop({ elapsed }: { elapsed: number }) {
+  if (!torusRef.value) {
+    return
+  }
+
+  torusRef.value.rotation.x = elapsed * 0.745
+  torusRef.value.rotation.y = elapsed * 0.361
+}
+</script>
+
+<template>
+  <TresCanvas :clear-color="0x222" @loop="onLoop">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+
+    <TresGridHelper :args="[10, 10]" />
+    <Fbo ref="fboRef" :depth="false" :settings="{ samples: 1 }" />
+    <TresMesh>
+      <TresBoxGeometry :args="[1, 1, 1]" />
+
+      <TresMeshBasicMaterial
+        :color="0xFFFFFF"
+        :map="fboRef?.instance?.texture ?? null"
+      />
+    </TresMesh>
+
+    <TresMesh ref="torusRef" :position="[3, 0, 0]">
+      <TresTorusGeometry :args="[1, 0.5, 16, 100]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/objects/GradientTexture.vue b/apps/cientos-docs/app/components/objects/GradientTexture.vue
new file mode 100644
index 000000000..2372fe034
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/GradientTexture.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { GradientTexture } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera :position="[0, 0, 3]" />
+    <TresMesh>
+      <TresPlaneGeometry />
+      <TresMeshBasicMaterial>
+        <GradientTexture
+          :stops="[0.1, 0.5, 0.9]"
+          :colors="['#4f4f4f', '#82dbc5', '#fbb03b']"
+        />
+      </TresMeshBasicMaterial>
+    </TresMesh>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/objects/Html.vue b/apps/cientos-docs/app/components/objects/Html.vue
new file mode 100644
index 000000000..a0d2822af
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/Html.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Html, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[2, 2, 5]" />
+    <OrbitControls />
+    <TresMesh :position="[1, 1, 1]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        center
+        transform
+        :distance-factor="4"
+        :position="[0, 0, 0.65]"
+        :scale="[0.75, 0.75, 0.75]"
+      >
+        <h1 class="title">I'm a Box 📦</h1>
+      </Html>
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.title {
+  background-color: #1e1e1e;
+  color: #ffffff;
+  font-size: 0.75rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+}
+</style>
diff --git a/apps/cientos-docs/app/components/objects/HtmlIframeDemo.vue b/apps/cientos-docs/app/components/objects/HtmlIframeDemo.vue
new file mode 100644
index 000000000..2f75012b2
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/HtmlIframeDemo.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { ContactShadows, Environment, Html, Levioso, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { MathUtils } from 'three'
+import { ref } from 'vue'
+
+const gl = {
+  clearColor: '#F6B03B',
+  shadows: true,
+  antialias: true,
+}
+
+const n = 30
+const portalRef = ref<HTMLElement>()
+
+type Vec3Tuple = [number, number, number]
+interface Item {
+  position: Vec3Tuple
+  scale: number
+  rotation: Vec3Tuple
+}
+
+const items: Item[] = Array.from({ length: n }, (): Item => ({
+  position: [
+    MathUtils.randFloat(-10, 10),
+    MathUtils.randFloat(-2, 6.5),
+    MathUtils.randFloat(3.5, 8),
+  ] as Vec3Tuple,
+  scale: MathUtils.randFloat(0.25, 0.5),
+  rotation: [
+    MathUtils.randFloat(0, Math.PI),
+    MathUtils.randFloat(0, Math.PI),
+    0,
+  ] as Vec3Tuple,
+}))
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 8.5, 22]" />
+    <OrbitControls make-default :enable-pan="false" :domElement="portalRef" :maxPolarAngle="Math.PI / 2.2" :target="[0, 2, 0]" />
+
+    <Levioso v-for="(item, index) in items" :key="index" :speed="2">
+      <TresMesh
+        :position="[item.position[0], item.position[1], item.position[2]]"
+        :scale="[item.scale, item.scale, item.scale]"
+        :rotation="[item.rotation[0], item.rotation[1], item.rotation[2]]"
+      >
+        <TresMeshStandardMaterial color="white" attach="material" />
+
+        <TresTetrahedronGeometry v-if="index % 9 === 0" :args="[2]" />
+        <TresCylinderGeometry v-else-if="index % 9 === 1" :args="[0.8, 0.8, 2, 32]" />
+        <TresConeGeometry v-else-if="index % 9 === 2" :args="[1.1, 1.7, 32]" />
+        <TresSphereGeometry v-else-if="index % 9 === 3" :args="[1.5, 32, 32]" />
+        <TresIcosahedronGeometry v-else-if="index % 9 === 4" :args="[2]" />
+        <TresTorusGeometry v-else-if="index % 9 === 5" :args="[1.1, 0.35, 16, 32]" />
+        <TresOctahedronGeometry v-else-if="index % 9 === 6" :args="[2]" />
+        <TresSphereGeometry v-else-if="index % 9 === 7" :args="[1.5, 32, 32]" />
+        <TresBoxGeometry v-else-if="index % 9 === 8" :args="[2.5, 2.5, 2.5]" />
+      </TresMesh>
+    </Levioso>
+
+    <Levioso :speed="1.5">
+      <Html
+        transform
+        center
+        :cast-shadow="true"
+        :receive-shadow="true"
+        occlude="blending"
+        :z-index-range="[28, 0]"
+        :position-y="2.5"
+        :portal="portalRef"
+        :style="{ userSelect: 'none' }"
+      >
+        <iframe
+          class="w-[700px] h-[500px]"
+          src="https://tresjs.org"
+          frameborder="0"
+          :width="700"
+          :height="500"
+        ></iframe>
+      </Html>
+    </Levioso>
+
+    <ContactShadows
+      :blur="1"
+      :opacity="0.85"
+      :position-y="-5.5"
+      :scale="30"
+      :far="25"
+    />
+
+    <Suspense>
+      <Environment preset="city" />
+    </Suspense>
+  </TresCanvas>
+  <div ref="portalRef" class="html-tresjs-portal"></div>
+</template>
+
+<style scoped>
+.html-tresjs-portal {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+canvas {
+  pointer-events: none !important;
+}
+</style>
diff --git a/apps/cientos-docs/app/components/objects/HtmlOccludeBlendingDemo.vue b/apps/cientos-docs/app/components/objects/HtmlOccludeBlendingDemo.vue
new file mode 100644
index 000000000..33bb4c62f
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/HtmlOccludeBlendingDemo.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { Html, Levioso, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
+import { CircleGeometry, MeshStandardMaterial } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  clearAlpha: 1,
+  shadows: true,
+  alpha: true,
+}
+
+const targetDirectionLightRef = shallowRef(null)
+
+const geometries = [
+  {
+    component: 'TresBoxGeometry',
+    args: [1, 1, 1],
+  },
+  {
+    component: 'TresSphereGeometry',
+    args: [0.7, 32, 32],
+  },
+  {
+    component: 'TresTorusGeometry',
+    args: [0.5, 0.2, 16, 100],
+    bind: { castShadow: true, receiveShadow: true },
+  },
+]
+
+const customGeometry = shallowRef(new CircleGeometry(1.25, 32))
+
+const customMaterial = shallowRef(new MeshStandardMaterial({
+  color: 'red',
+  side: 2,
+  opacity: 1,
+  transparent: true,
+}))
+</script>
+
+<template>
+  <div class="html-demo-wrapper aspect-video">
+    <TresCanvas v-bind="gl">
+      <TresPerspectiveCamera :position="[0, 1.5, 7.5]" />
+      <OrbitControls />
+
+      <Levioso
+        v-for="(geometry, index) in geometries"
+        :key="`html-occlude-blending-demo-${index}`"
+        :speed="3"
+        :float-factor="3.5"
+        :rotation-factor="1"
+        :range="[-0.35, 0.35]"
+      >
+        <TresMesh :position="[index * 3.5 - 3.5, 1, 0]" v-bind="geometry.bind">
+          <component :is="geometry.component" :args="geometry.args" />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </Levioso>
+
+      <Html
+        center
+        transform
+        occlude="blending"
+        :position="[-4, .75, -2]"
+        :z-index-range="[28, 0]"
+      >
+        <div class="text-center text-s p-2 bg-[#1B1C1E] text-light">
+          BASIC 💛 <br />
+          <em>occlude=blending</em>
+        </div>
+      </Html>
+
+      <Html
+        center
+        transform
+        occlude="blending"
+        :position="[0, .85, -2]"
+        :geometry="customGeometry"
+        :z-index-range="[28, 0]"
+      >
+        <div class="text-xs p-8 text-center bg-[#F6B03B] text-dark">
+          CUSTOM <br /> <strong>CIRCLE <br /> GEOMETRY</strong>
+        </div>
+      </Html>
+
+      <Html
+        ref="targetDirectionLightRef"
+        center
+        transform
+        occlude="blending"
+        :position="[4, .5, -2]"
+        :material="customMaterial"
+        receive-shadow
+        :z-index-range="[28, 0]"
+      >
+        <div style="width: 100px; height: auto; aspect-ratio: 250/250;"></div>
+      </Html>
+
+      <Html
+        center
+        transform
+        occlude="blending"
+        :position="[4, 2.5, -2]"
+        :z-index-range="[28, 0]"
+      >
+        <div class="text-center text-xs p-2 text-dark bg-[#FF0000]">
+          <strong>HTML + Custom material </strong> <br />
+          <em>+ receive-shadow </em> ⬇️
+        </div>
+      </Html>
+
+      <TresDirectionalLight
+        v-if="targetDirectionLightRef?.instance"
+        :target="targetDirectionLightRef?.instance"
+        :shadow-normalBias="0.075"
+        :position="[5, 0, 5]"
+        :intensity="2"
+        cast-shadow
+      />
+
+      <TresGridHelper :position-y="-1" />
+      <TresAmbientLight :intensity="1" />
+    </TresCanvas>
+  </div>
+</template>
+
+<style scoped>
+.html-demo-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background-color: #82dbc5;
+}
+</style>
diff --git a/apps/cientos-docs/app/components/objects/HtmlOccludeComplexDemo.vue b/apps/cientos-docs/app/components/objects/HtmlOccludeComplexDemo.vue
new file mode 100644
index 000000000..2ef22efcd
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/HtmlOccludeComplexDemo.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { Html, OrbitControls } from '@tresjs/cientos'
+import type { TresObject3D } from '@tresjs/core'
+import { TresCanvas } from '@tresjs/core'
+import { computed, ref, toRaw, useTemplateRef } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+}
+
+const htmlProps = {
+  center: true,
+  transform: true,
+  sprite: true,
+}
+
+const count = 4
+const radius = 4
+
+const isOccluded = ref(false)
+
+const spheresParams = computed(() =>
+  Array.from({ length: count }, (_, i) => {
+    const angle = (i * 2 * Math.PI) / count
+    const x = Math.cos(angle) * radius
+    const z = Math.sin(angle) * radius
+    return { position: [x, 1, z] as [number, number, number] }
+  }),
+)
+
+const spheresOccludeRef = useTemplateRef<TresObject3D[]>('spheresOcclude')
+
+const occluderRefs = computed<TresObject3D[]>(() => {
+  const arr = spheresOccludeRef.value ?? []
+  return arr.map((occluder: TresObject3D) => toRaw(occluder))
+})
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3.5, 2.5, 9.5]" />
+    <OrbitControls />
+
+    <TresMesh :position="[0, 1, 0]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        v-bind="htmlProps"
+        :occlude="occluderRefs"
+        :distance-factor="4"
+        :z-index-range="[28, 0]"
+        @on-occlude="(event: boolean) => isOccluded = event"
+      >
+        <h1 class="box">Move camera</h1>
+      </Html>
+    </TresMesh>
+
+    <TresMesh
+      v-for="(sphere, index) in spheresParams"
+      :key="`html-demo-occlude-complex-${index}`"
+      ref="spheresOcclude"
+      :position="sphere.position"
+    >
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial />
+      <Html v-bind="htmlProps" :distance-factor="4" :z-index-range="[28, 0]">
+        <h1
+          class="text-xs p-1 rounded"
+          :class="[isOccluded ? 'box' : 'bg-dark text-white']"
+        >
+          Occlude {{ index + 1 }}
+        </h1>
+      </Html>
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.box {
+  background-color: #1e1e1e;
+  color: #ffffff;
+  font-size: 1.5rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+}
+</style>
diff --git a/apps/cientos-docs/app/components/objects/HtmlOcclusion.vue b/apps/cientos-docs/app/components/objects/HtmlOcclusion.vue
new file mode 100644
index 000000000..7a9910f34
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/HtmlOcclusion.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Html, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+
+const gl = {
+  clearColor: '#82DBC5',
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[7, 2, 3]" />
+    <OrbitControls auto-rotate :auto-rotate-speed="3" />
+
+    <TresMesh :position="[0, 1, -2]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        center
+        transform
+        occlude
+        :distance-factor="4"
+        :position="[0, 0, 2]"
+        :z-index-range="[28, 0]"
+      >
+        <h1 class="box">Move camera</h1>
+      </Html>
+    </TresMesh>
+    <TresMesh :position="[0, 1, 2]">
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.box {
+  background-color: #1e1e1e;
+  color: #ffffff;
+  font-size: 1.5rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+}
+</style>
diff --git a/apps/cientos-docs/app/components/objects/HtmlSingleOccluder.vue b/apps/cientos-docs/app/components/objects/HtmlSingleOccluder.vue
new file mode 100644
index 000000000..1191a9874
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/HtmlSingleOccluder.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Html, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { ref } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+}
+
+const sphereRef = ref(null)
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 8]" />
+    <OrbitControls />
+    <TresMesh :position="[0, 1, 0]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        center
+        transform
+        :occlude="[sphereRef]"
+        :distance-factor="4"
+        :z-index-range="[28, 0]"
+      >
+        <h1 class="box">Move camera</h1>
+      </Html>
+    </TresMesh>
+    <TresMesh ref="sphereRef" :position="[3, 1, 1]">
+      <TresSphereGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+
+<style scoped>
+.box {
+  background-color: #1e1e1e;
+  color: #ffffff;
+  font-size: 1.5rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+}
+</style>
diff --git a/apps/cientos-docs/app/components/objects/HtmlTransitionDemo.vue b/apps/cientos-docs/app/components/objects/HtmlTransitionDemo.vue
new file mode 100644
index 000000000..4e4d32dd5
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/HtmlTransitionDemo.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { Html, Levioso, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { ref } from 'vue'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const gl = {
+  clearColor: '#82DBC5',
+  clearAlpha: 0,
+  shadows: true,
+  alpha: true,
+  antialias: true,
+}
+
+const rootRef = ref<HTMLElement>()
+
+const bgColor = ref('#F6B03B')
+
+const geometries = [
+  {
+    component: 'TresBoxGeometry',
+    args: [1, 1, 1],
+  },
+  {
+    component: 'TresSphereGeometry',
+    args: [0.7, 32, 32],
+  },
+  {
+    component: 'TresTorusGeometry',
+    args: [0.5, 0.2, 16, 100],
+  },
+  {
+    component: 'TresConeGeometry',
+    args: [0.7, 1.4, 32],
+  },
+]
+
+const { showTransition } = useControls({
+  showTransition: true,
+}, { uuid })
+
+const getRandomBackgroundColor = (): string => {
+  const colors = ['#F6B03B', '#82DBC5', '#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF5']
+  const idx = Math.floor(Math.random() * colors.length)
+  return colors[idx] ?? '#F6B03B'
+}
+
+const updateBackgroundColor = () => {
+  bgColor.value = getRandomBackgroundColor()
+}
+</script>
+
+<template>
+  <div ref="rootRef" class="html-demo-wrapper">
+    <TresCanvas v-bind="gl" class="!pointer-events-none">
+      <TresPerspectiveCamera :position="[0, 1.5, 7.5]" />
+      <OrbitControls :dom-element="rootRef" />
+
+      <Levioso
+        v-for="(geometry, index) in geometries"
+        :key="`html-occlude-blending-demo-${index}`"
+        :speed="3"
+        :float-factor="3.5"
+        :rotation-factor="1"
+        :range="[-0.4, 0.4]"
+      >
+        <TresMesh :position="[(index - (geometries.length - 1) / 2) * 2, 1, 0]">
+          <component :is="geometry.component" :args="geometry.args" />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </Levioso>
+
+      <Html
+        center
+        transform
+        occlude="blending"
+        :position="[0, .75, -2]"
+        :scale="1.15"
+        :z-index-range="[28, 0]"
+      >
+        <Transition name="transition-basic">
+          <h1
+            v-if="showTransition"
+            :style="{ backgroundColor: bgColor }"
+            class="html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg"
+            @click="updateBackgroundColor"
+          >
+            <strong>TRANSITION + </strong><br />
+            <em>occlude=blending 💛</em>
+          </h1>
+        </Transition>
+      </Html>
+
+      <TresGridHelper :position-y="-1.25" />
+      <TresAmbientLight :intensity="1" />
+    </TresCanvas>
+  </div>
+</template>
diff --git a/apps/cientos-docs/app/components/objects/Image.vue b/apps/cientos-docs/app/components/objects/Image.vue
new file mode 100644
index 000000000..e9d1908de
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/Image.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Image } from '@tresjs/cientos'
+import { BackSide, DoubleSide, FrontSide } from 'three'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const {
+  scaleX,
+  scaleY,
+  opacity,
+  transparent,
+  toneMapped,
+  side,
+} = useControls({
+  scaleX: { value: 2, min: 0.1, max: 10, step: 0.1 },
+  scaleY: { value: 2, min: 0.1, max: 10, step: 0.1 },
+  opacity: { value: 1, min: 0, max: 1, step: 0.01 },
+  transparent: false,
+  toneMapped: true,
+  side: { value: DoubleSide, options: [FrontSide, BackSide, DoubleSide] },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 0, 5]" />
+
+    <Image
+      url="https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG"
+      :scale="[scaleX, scaleY]"
+      :opacity="opacity"
+      :transparent="transparent"
+      :tone-mapped="toneMapped"
+      :side="side"
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/objects/MarchingCubes.vue b/apps/cientos-docs/app/components/objects/MarchingCubes.vue
new file mode 100644
index 000000000..6963ee10f
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/MarchingCubes.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping, Vector3 } from 'three'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const rand = () => (Math.random() - 0.5) * 1.25
+const positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))
+
+const {
+  resolution,
+  maxPolyCount,
+  enableUvs,
+  enableColors,
+  planeType,
+  strength,
+  subtract,
+  color,
+} = useControls({
+  resolution: { value: 40, min: 8, max: 128, step: 1 },
+  maxPolyCount: { value: 40000, min: 1000, max: 200000, step: 1000 },
+  enableUvs: false,
+  enableColors: false,
+  planeType: { value: 'y', options: ['x', 'y', 'z'] },
+  strength: { value: 0.5, min: 0.01, max: 5, step: 0.01 },
+  subtract: { value: 12, min: 0, max: 50, step: 1 },
+  color: '#049ef4',
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#222" :tone-mapping="NoToneMapping">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <MarchingCubes :resolution="resolution" :max-poly-count="maxPolyCount" :enable-uvs="enableUvs" :enable-colors="enableColors">
+      <MarchingPlane :plane-type="planeType" />
+      <MarchingCube
+        v-for="position, i of positions"
+        :key="i"
+        :position="position"
+        :strength="strength"
+        :subtract="subtract"
+        :color="color"
+      />
+      <TresMeshPhongMaterial specular="#111111" :shininess="30" :color="color" :reflectivity="1" />
+    </MarchingCubes>
+
+    <TresAxesHelper />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/objects/Reflector.vue b/apps/cientos-docs/app/components/objects/Reflector.vue
new file mode 100644
index 000000000..8dfccc343
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/Reflector.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+  MeshWobbleMaterial,
+  OrbitControls,
+  Reflector,
+} from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { color } = useControls({
+  color: '#f7f7f7',
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#111">
+    <TresPerspectiveCamera :position="[3, 2, 6]" />
+    <TresMesh>
+      <TresTorusGeometry />
+      <MeshWobbleMaterial color="orange" :speed="1" :factor="2" />
+    </TresMesh>
+    <Reflector :rotation="[-Math.PI * 0.5, 0, 0]" :position="[0, -2, 0]" :color="color">
+      <TresCircleGeometry :args="[10, 32]" />
+    </Reflector>
+    <TresAmbientLight :intensity="1" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/objects/Text.vue b/apps/cientos-docs/app/components/objects/Text.vue
new file mode 100644
index 000000000..f995701f9
--- /dev/null
+++ b/apps/cientos-docs/app/components/objects/Text.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { OrbitControls, Text3D } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+import { ref } from 'vue'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const fontPath
+  = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
+
+const reactiveText = ref('You can edit me...')
+
+const {
+  size,
+  height,
+  curveSegments,
+  bevelEnabled,
+  bevelThickness,
+  bevelSize,
+  bevelOffset,
+  bevelSegments,
+  center,
+  needUpdates,
+} = useControls({
+  size: { value: 0.3, min: 0.05, max: 2, step: 0.05 },
+  height: { value: 0.01, min: 0, max: 1, step: 0.01 },
+  curveSegments: { value: 12, min: 1, max: 64, step: 1 },
+  bevelEnabled: false,
+  bevelThickness: { value: 0.01, min: 0, max: 0.5, step: 0.01 },
+  bevelSize: { value: 0.01, min: 0, max: 0.5, step: 0.01 },
+  bevelOffset: { value: 0, min: 0, max: 0.5, step: 0.01 },
+  bevelSegments: { value: 3, min: 0, max: 16, step: 1 },
+  center: true,
+  needUpdates: true,
+}, { uuid })
+</script>
+
+<template>
+  <div class="bg-gray-100 flex justify-center absolute top-0 left-0 w-full h-full">
+    <input
+      v-model="reactiveText"
+      class="p-2 m-2 rounded-md bg-white border text-red-500 border-gray-400"
+    />
+  </div>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+    <Suspense>
+      <Text3D
+        :text="reactiveText"
+        :size="size"
+        :height="height"
+        :curve-segments="curveSegments"
+        :bevel-enabled="bevelEnabled"
+        :bevel-thickness="bevelThickness"
+        :bevel-size="bevelSize"
+        :bevel-offset="bevelOffset"
+        :bevel-segments="bevelSegments"
+        :font="fontPath"
+        :center="center"
+        :need-updates="needUpdates"
+      >
+        <TresMeshNormalMaterial />
+      </Text3D>
+    </Suspense>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Box.vue b/apps/cientos-docs/app/components/shapes/Box.vue
new file mode 100644
index 000000000..a19e6afc2
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Box.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Box, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { width, height, depth, widthSegments, heightSegments, depthSegments, showWireframe } = useControls({
+  width: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  height: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  depth: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  widthSegments: { value: 1, min: 1, max: 32, step: 1 },
+  heightSegments: { value: 1, min: 1, max: 32, step: 1 },
+  depthSegments: { value: 1, min: 1, max: 32, step: 1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Box :args="[width, height, depth, widthSegments, heightSegments, depthSegments]" :widthSegments="widthSegments">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/CatmullRomCurve3.vue b/apps/cientos-docs/app/components/shapes/CatmullRomCurve3.vue
new file mode 100644
index 000000000..330049207
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/CatmullRomCurve3.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { CatmullRomCurve3, OrbitControls } from '@tresjs/cientos'
+import { Vector3 } from 'three'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <CatmullRomCurve3
+      :points="[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]"
+      :segments="50"
+      color="orange"
+      :line-width="6"
+    />
+    <TresGridHelper :position-y="-0.5" />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Circle.vue b/apps/cientos-docs/app/components/shapes/Circle.vue
new file mode 100644
index 000000000..855c1c226
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Circle.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Circle, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, segments, thetaStart, thetaLength, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  segments: { value: 32, min: 3, max: 128, step: 1 },
+  thetaStart: { value: 0, min: 0, max: Math.PI * 2, step: 0.01 },
+  thetaLength: { value: Math.PI * 2, min: 0.01, max: Math.PI * 2, step: 0.01 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Circle :args="[radius, segments, thetaStart, thetaLength]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Circle>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Cone.vue b/apps/cientos-docs/app/components/shapes/Cone.vue
new file mode 100644
index 000000000..ff2825adf
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Cone.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Cone, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  height: { value: 2, min: 0.1, max: 10, step: 0.1 },
+  radialSegments: { value: 16, min: 3, max: 64, step: 1 },
+  heightSegments: { value: 1, min: 1, max: 32, step: 1 },
+  openEnded: false,
+  thetaStart: { value: 0, min: 0, max: Math.PI * 2, step: 0.01 },
+  thetaLength: { value: Math.PI * 2, min: 0.01, max: Math.PI * 2, step: 0.01 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Cone :args="[radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Cone>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/CubicBezierLine.vue b/apps/cientos-docs/app/components/shapes/CubicBezierLine.vue
new file mode 100644
index 000000000..584fc7633
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/CubicBezierLine.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { CubicBezierLine, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <CubicBezierLine
+      :start="[-1, 0, 0]"
+      :end="[1, 0, 0]"
+      :midA="[-1, 2, -2]"
+      :midB="[1, 2, 2]"
+      :line-width="10"
+      color="orange"
+    />
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Cylinder.vue b/apps/cientos-docs/app/components/shapes/Cylinder.vue
new file mode 100644
index 000000000..2745f5b9b
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Cylinder.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Cylinder, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength, showWireframe } = useControls({
+  radiusTop: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  radiusBottom: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  height: { value: 2, min: 0.1, max: 10, step: 0.1 },
+  radialSegments: { value: 16, min: 3, max: 64, step: 1 },
+  heightSegments: { value: 1, min: 1, max: 32, step: 1 },
+  openEnded: false,
+  thetaStart: { value: 0, min: 0, max: Math.PI * 2, step: 0.01 },
+  thetaLength: { value: Math.PI * 2, min: 0.01, max: Math.PI * 2, step: 0.01 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Cylinder :args="[radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Cylinder>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Dodecahedron.vue b/apps/cientos-docs/app/components/shapes/Dodecahedron.vue
new file mode 100644
index 000000000..64d933d57
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Dodecahedron.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Dodecahedron, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, detail, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  detail: { value: 0, min: 0, max: 5, step: 1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Dodecahedron :args="[radius, detail]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Dodecahedron>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Grid.vue b/apps/cientos-docs/app/components/shapes/Grid.vue
new file mode 100644
index 000000000..4a3e2df8b
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Grid.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Grid, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { cellSize, cellThickness, cellColor, sectionSize, sectionThickness, sectionColor, followCamera, infiniteGrid, fadeDistance, fadeStrength, fadeFrom } = useControls({
+  cellSize: { value: 0.6, min: 0.1, max: 2, step: 0.1 },
+  cellThickness: { value: 0.5, min: 0.1, max: 2, step: 0.1 },
+  cellColor: '#82dbc5',
+  sectionSize: { value: 2, min: 0.5, max: 5, step: 0.1 },
+  sectionThickness: { value: 1.3, min: 0.1, max: 2, step: 0.1 },
+  sectionColor: '#fbb03b',
+  followCamera: false,
+  infiniteGrid: true,
+  fadeDistance: { value: 12, min: 0, max: 100, step: 1 },
+  fadeStrength: { value: 1, min: 0, max: 2, step: 0.1 },
+  fadeFrom: { value: 0, min: 0, max: 1, step: 0.1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#222222">
+    <TresPerspectiveCamera :position="[8, 10, 10]" :fov="25" />
+    <OrbitControls />
+    <Grid
+      :args="[10.5, 10.5]"
+      :cell-color="cellColor"
+      :cell-size="cellSize"
+      :cell-thickness="cellThickness"
+      :section-color="sectionColor"
+      :section-size="sectionSize"
+      :section-thickness="sectionThickness"
+      :infinite-grid="infiniteGrid"
+      :fade-from="fadeFrom"
+      :fade-distance="fadeDistance"
+      :fade-strength="fadeStrength"
+      :follow-camera="followCamera"
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Icosahedron.vue b/apps/cientos-docs/app/components/shapes/Icosahedron.vue
new file mode 100644
index 000000000..3252ab847
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Icosahedron.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Icosahedron, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, detail, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  detail: { value: 0, min: 0, max: 5, step: 1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Icosahedron :args="[radius, detail]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Icosahedron>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Line2.vue b/apps/cientos-docs/app/components/shapes/Line2.vue
new file mode 100644
index 000000000..f3269f4f2
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Line2.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Line2, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Line2
+      :points="[
+        [-0.5, 0, 0],
+        [0.5, 0, 0],
+        [0, 0.866, 0],
+        [-0.5, 0, 0],
+      ]"
+      :line-width="10"
+      color="orange"
+    />
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Octahedron.vue b/apps/cientos-docs/app/components/shapes/Octahedron.vue
new file mode 100644
index 000000000..56a484870
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Octahedron.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Octahedron, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, detail, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  detail: { value: 0, min: 0, max: 5, step: 1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Octahedron :args="[radius, detail]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Octahedron>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Plane.vue b/apps/cientos-docs/app/components/shapes/Plane.vue
new file mode 100644
index 000000000..a0e69b976
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Plane.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { OrbitControls, Plane } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { width, height, widthSegments, heightSegments, showWireframe } = useControls({
+  width: { value: 5, min: 0.1, max: 20, step: 0.1 },
+  height: { value: 5, min: 0.1, max: 20, step: 0.1 },
+  widthSegments: { value: 1, min: 1, max: 64, step: 1 },
+  heightSegments: { value: 1, min: 1, max: 64, step: 1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Plane :args="[width, height, widthSegments, heightSegments]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Plane>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/QuadraticBezierLine.vue b/apps/cientos-docs/app/components/shapes/QuadraticBezierLine.vue
new file mode 100644
index 000000000..017e24e0d
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/QuadraticBezierLine.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { OrbitControls, QuadraticBezierLine } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <QuadraticBezierLine
+      :start="[-1, 0, 0]"
+      :end="[1, 2, 0]"
+      :line-width="10"
+      color="orange"
+    />
+    <TresGridHelper />
+    <OrbitControls />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Ring.vue b/apps/cientos-docs/app/components/shapes/Ring.vue
new file mode 100644
index 000000000..d091df1fc
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Ring.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { OrbitControls, Ring } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength, showWireframe } = useControls({
+  innerRadius: { value: 0.5, min: 0.1, max: 5, step: 0.1 },
+  outerRadius: { value: 1.5, min: 0.1, max: 10, step: 0.1 },
+  thetaSegments: { value: 8, min: 3, max: 64, step: 1 },
+  phiSegments: { value: 1, min: 1, max: 32, step: 1 },
+  thetaStart: { value: 0, min: 0, max: Math.PI * 2, step: 0.01 },
+  thetaLength: { value: Math.PI * 2, min: 0.01, max: Math.PI * 2, step: 0.01 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Ring :args="[innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Ring>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/RoundedBox.vue b/apps/cientos-docs/app/components/shapes/RoundedBox.vue
new file mode 100644
index 000000000..fca30da5d
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/RoundedBox.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { OrbitControls, RoundedBox } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { width, height, depth, radius, segments, showWireframe } = useControls({
+  width: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  height: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  depth: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  radius: { value: 0.1, min: 0.01, max: 1, step: 0.01 },
+  segments: { value: 2, min: 1, max: 16, step: 1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 0, 3]" />
+    <OrbitControls />
+    <RoundedBox :args="[width, height, depth, segments, radius]">
+      <TresMeshBasicMaterial color="orange" :wireframe="showWireframe" />
+    </RoundedBox>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/ScreenQuad.vue b/apps/cientos-docs/app/components/shapes/ScreenQuad.vue
new file mode 100644
index 000000000..ba562eaf6
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/ScreenQuad.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ScreenQuad } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresOrthographicCamera />
+    <ScreenQuad>
+      <TresMeshToonMaterial color="orange" />
+    </ScreenQuad>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Sphere.vue b/apps/cientos-docs/app/components/shapes/Sphere.vue
new file mode 100644
index 000000000..e1addd3ff
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Sphere.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { OrbitControls, Sphere } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, widthSegments, heightSegments, thetaStart, thetaLength, phiStart, phiLength, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  widthSegments: { value: 16, min: 3, max: 64, step: 1 },
+  heightSegments: { value: 12, min: 2, max: 64, step: 1 },
+  thetaStart: { value: 0, min: 0, max: Math.PI * 2, step: 0.01 },
+  thetaLength: { value: Math.PI * 2, min: 0.01, max: Math.PI * 2, step: 0.01 },
+  phiStart: { value: 0, min: 0, max: Math.PI, step: 0.01 },
+  phiLength: { value: Math.PI, min: 0.01, max: Math.PI, step: 0.01 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Sphere :args="[radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Sphere>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/SuperFormula.vue b/apps/cientos-docs/app/components/shapes/SuperFormula.vue
new file mode 100644
index 000000000..3e3e6dc0b
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/SuperFormula.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { OrbitControls, Superformula } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { numArmsA, numArmsB, expA1 } = useControls({
+  numArmsA: { value: 1, min: 1, max: 40, step: 1 },
+  numArmsB: { value: 1, min: 1, max: 40, step: 0.1 },
+  expA1: { value: 8, min: 4, max: 40, step: 0.01 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Superformula
+      :width-segments="128"
+      :height-segments="128"
+      :num-arms-a="numArmsA"
+      :num-arms-b="numArmsB"
+      :exp-a="[expA1, 8, 0]"
+      :exp-b="[2, 1, 2]"
+    >
+      <TresMeshPhongMaterial color="orange" :shininess="1000" />
+    </Superformula>
+    <TresAmbientLight color="pink" />
+    <TresDirectionalLight :position="[1, 1, 1]" :intensity="4" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Tetrahedron.vue b/apps/cientos-docs/app/components/shapes/Tetrahedron.vue
new file mode 100644
index 000000000..183ca2795
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Tetrahedron.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { OrbitControls, Tetrahedron } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, detail, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  detail: { value: 8, min: 0, max: 16, step: 1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Tetrahedron :args="[radius, detail]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Tetrahedron>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Torus.vue b/apps/cientos-docs/app/components/shapes/Torus.vue
new file mode 100644
index 000000000..a0dc4ac39
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Torus.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { OrbitControls, Torus } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, tube, radialSegments, tubularSegments, arc, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  tube: { value: 0.4, min: 0.05, max: 2, step: 0.05 },
+  radialSegments: { value: 16, min: 3, max: 64, step: 1 },
+  tubularSegments: { value: 32, min: 3, max: 128, step: 1 },
+  arc: { value: Math.PI * 2, min: 0.1, max: Math.PI * 2, step: 0.1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Torus :args="[radius, tube, radialSegments, tubularSegments, arc]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </Torus>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/TorusKnot.vue b/apps/cientos-docs/app/components/shapes/TorusKnot.vue
new file mode 100644
index 000000000..d3829013a
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/TorusKnot.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { OrbitControls, TorusKnot } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { radius, tube, tubularSegments, radialSegments, p, q, showWireframe } = useControls({
+  radius: { value: 1, min: 0.1, max: 5, step: 0.1 },
+  tube: { value: 0.4, min: 0.05, max: 2, step: 0.05 },
+  tubularSegments: { value: 64, min: 3, max: 256, step: 1 },
+  radialSegments: { value: 8, min: 3, max: 64, step: 1 },
+  p: { value: 2, min: 1, max: 10, step: 1 },
+  q: { value: 3, min: 1, max: 10, step: 1 },
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <TorusKnot :args="[radius, tube, tubularSegments, radialSegments, p, q]">
+      <TresMeshToonMaterial color="orange" :wireframe="showWireframe" />
+    </TorusKnot>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/shapes/Tube.vue b/apps/cientos-docs/app/components/shapes/Tube.vue
new file mode 100644
index 000000000..07ca00e80
--- /dev/null
+++ b/apps/cientos-docs/app/components/shapes/Tube.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { OrbitControls, Tube } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { CubicBezierCurve3, DoubleSide, Vector3 } from 'three'
+import { ref } from 'vue'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const tubePath = ref(
+  new CubicBezierCurve3(
+    new Vector3(-1, 0, 0),
+    new Vector3(-0.5, -1, 0),
+    new Vector3(0.5, 1, 0),
+    new Vector3(1, 0, 0),
+  ),
+)
+
+const { tubularSegments, radius, radialSegments, closed, showWireframe } = useControls({
+  tubularSegments: { value: 20, min: 3, max: 256, step: 1 },
+  radius: { value: 0.2, min: 0.05, max: 2, step: 0.05 },
+  radialSegments: { value: 8, min: 3, max: 64, step: 1 },
+  closed: false,
+  showWireframe: false,
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Tube :args="[tubePath, tubularSegments, radius, radialSegments, closed]">
+      <TresMeshToonMaterial color="orange" :side="DoubleSide" :wireframe="showWireframe" />
+    </Tube>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper :position-y="-0.5" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Backdrop.vue b/apps/cientos-docs/app/components/staging/Backdrop.vue
new file mode 100644
index 000000000..4283cad1b
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Backdrop.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { Backdrop, GLTFModel, OrbitControls, useProgress } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import type { Camera } from 'three'
+import { PCFSoftShadowMap, SRGBColorSpace } from 'three'
+import { ref, watchEffect } from 'vue'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const gl = {
+  clearColor: 'pink',
+  shadows: true,
+  alpha: false,
+  shadowMapType: PCFSoftShadowMap,
+  outputColorSpace: SRGBColorSpace,
+}
+
+const cameraRef = ref(null)
+
+watchEffect(() => {
+  if (cameraRef.value) {
+    (cameraRef.value as Camera).lookAt(0, 5, 0)
+  }
+})
+
+const { hasFinishLoading, progress } = await useProgress()
+
+const { floor, segments, receiveShadow } = useControls({
+  floor: { value: 1.5, min: 0, max: 5, step: 0.05 },
+  segments: { value: 20, min: 1, max: 128, step: 1 },
+  receiveShadow: true,
+}, { uuid })
+</script>
+
+<template>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="!hasFinishLoading"
+      class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">
+        Loading... {{ progress }} %
+      </div>
+    </div>
+  </Transition>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera
+      :position="[0.07224002153117198, 2, 2.9469498522622626]"
+      :rotation="[-0.04419077275543715, 0.025561987075415186, 0.0011302162688196786]"
+      :fov="35"
+    />
+    <OrbitControls />
+    <Suspense>
+      <GLTFModel
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb"
+        :rotation="[0, 0.5, 0]"
+        :position="[0, 1, 0]"
+        :scale="0.5"
+        castShadow
+        draco
+      />
+    </Suspense>
+    <Backdrop
+      :floor="floor"
+      :segments="segments"
+      :scale="[10, 3, 3]"
+      :position="[0, 0, -3]"
+      :receive-shadow="receiveShadow"
+    >
+      <TresMeshPhysicalMaterial
+        :roughness="1"
+        color="pink"
+        :side="2"
+      />
+    </Backdrop>
+    <TresAmbientLight :intensity="0.5" />
+    <TresDirectionalLight
+      :args="['white', 2]"
+      cast-shadow
+      :position="[3, 4, 4]"
+      :look-at="[0, 0, 0]"
+      :shadow-camera-near="0.5"
+      :shadow-camera-left="-10"
+    />
+    <TresDirectionalLight
+      :args="['pink', 1]"
+      cast-shadow
+      :position="[-3, 2, 4]"
+      :look-at="[0, 0, 0]"
+      :shadow-camera-near="0.5"
+      :shadow-camera-left="-10"
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Environment.vue b/apps/cientos-docs/app/components/staging/Environment.vue
new file mode 100644
index 000000000..6c09bec39
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Environment.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { Environment, OrbitControls, Sphere, useProgress } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']
+
+const { progress, hasFinishLoading } = await useProgress()
+
+const { background, blur, preset, backgroundIntensity, environmentIntensity, backgroundRotationY, syncMaterials, environmentRotationY } = useControls({
+  background: true,
+  blur: { value: 0, min: 0, max: 1, step: 0.01 },
+  preset: { value: 'sunset', options: ['sunset', 'dawn', 'night', 'warehouse', 'forest', 'apartment', 'studio', 'city', 'park', 'lobby'] },
+  backgroundIntensity: { value: 1, min: 0, max: 2, step: 0.01 },
+  environmentIntensity: { value: 1, min: 0, max: 2, step: 0.01 },
+  backgroundRotationY: { value: 0, min: 0, max: Math.PI * 2, step: 0.01 },
+  environmentRotationY: { value: 0, min: 0, max: Math.PI * 2, step: 0.01 },
+  syncMaterials: false,
+}, { uuid })
+</script>
+
+<template>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="!hasFinishLoading"
+      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">
+        Loading... {{ progress }} %
+        <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+      </div>
+    </div>
+  </Transition>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[7, 7, 7]" />
+    <OrbitControls />
+    <Suspense>
+      <Environment
+        :background="background"
+        :files="environmentFiles"
+        :blur="blur"
+        :preset="preset"
+        :background-intensity="backgroundIntensity"
+        :environment-intensity="environmentIntensity"
+        :background-rotation="[0, backgroundRotationY, 0]"
+        :environment-rotation="[0, environmentRotationY, 0]"
+        :syncMaterials="syncMaterials"
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap"
+      />
+    </Suspense>
+    <Sphere>
+      <TresMeshStandardMaterial
+        color="yellow"
+        :roughness="0"
+        :metalness="0.5"
+      />
+    </Sphere>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Lightformer.vue b/apps/cientos-docs/app/components/staging/Lightformer.vue
new file mode 100644
index 000000000..a8f62fb12
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Lightformer.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import {
+  Environment,
+  Lightformer,
+  OrbitControls,
+  Sphere,
+  useProgress,
+} from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const environmentFiles = [
+  '/px.jpg',
+  '/nx.jpg',
+  '/py.jpg',
+  '/ny.jpg',
+  '/pz.jpg',
+  '/nz.jpg',
+]
+
+const { progress, hasFinishLoading } = await useProgress()
+
+const { intensity, form, toneMapped, color } = useControls({
+  intensity: { value: 100, min: 0, max: 200, step: 1 },
+  form: { value: 'rect', options: ['circle', 'ring', 'rect'] },
+  toneMapped: false,
+  color: '#ffffff',
+}, { uuid })
+</script>
+
+<template>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="!hasFinishLoading"
+      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">
+        Loading... {{ progress }} %
+        <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+      </div>
+    </div>
+  </Transition>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Suspense>
+      <Environment
+        :files="environmentFiles"
+        :blur="10"
+        :environmentIntensity="0.05"
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap"
+      >
+        <Lightformer :intensity="intensity" :position="[0, -2, 3]" :scale="2" :form="form" :tone-mapped="toneMapped" :color="color" />
+        <Lightformer :intensity="intensity" :position="[0, 2, -3]" :scale="2" :form="form" :tone-mapped="toneMapped" :color="color" />
+      </Environment>
+    </Suspense>
+    <Sphere>
+      <TresMeshStandardMaterial color="yellow" :roughness="0" :metalness="0.5" />
+    </Sphere>
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Ocean.vue b/apps/cientos-docs/app/components/staging/Ocean.vue
new file mode 100644
index 000000000..5188539b5
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Ocean.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Ocean, OrbitControls, Sky } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 1, 1]" />
+    <Sky :azimuth="0" />
+    <Suspense>
+      <Ocean />
+    </Suspense>
+    <TresMesh :position-y="1">
+      <TresBoxGeometry :args="[1, 1, 1]" />
+    </TresMesh>
+    <OrbitControls
+      :enable-pan="false"
+      :enable-zoom="false"
+      :max-polar-angle="Math.PI * 0.495"
+      :min-distance="40.0"
+      :max-distance="200.0"
+    />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Precipitation.vue b/apps/cientos-docs/app/components/staging/Precipitation.vue
new file mode 100644
index 000000000..4ab068438
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Precipitation.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Precipitation } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { size, color, alphaTest, opacity, count, speed, randomness } = useControls({
+  size: { value: 0.1, min: 0.01, max: 1, step: 0.01 },
+  color: '#ffffff',
+  alphaTest: { value: 0.01, min: 0, max: 1, step: 0.01 },
+  opacity: { value: 0.8, min: 0, max: 1, step: 0.1 },
+  count: { value: 5000, min: 500, max: 20000, step: 500 },
+  speed: { value: 0.1, min: 0.01, max: 1, step: 0.01 },
+  randomness: { value: 0.5, min: 0, max: 1, step: 0.1 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera :position="[0, 2, 15]" />
+    <Precipitation
+      :size="size"
+      :color="color"
+      :alpha-test="alphaTest"
+      :opacity="opacity"
+      :count="count"
+      :speed="speed"
+      :randomness="randomness"
+    />
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Sky.vue b/apps/cientos-docs/app/components/staging/Sky.vue
new file mode 100644
index 000000000..cc36701dc
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Sky.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { OrbitControls, Sky } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { turbidity, rayleigh, mieCoefficient, mieDirectionalG, elevation, azimuth, distance } = useControls({
+  turbidity: { value: 3.4, min: 0, max: 20, step: 0.1 },
+  rayleigh: { value: 3, min: 0, max: 4, step: 0.1 },
+  mieCoefficient: { value: 0.005, min: 0, max: 0.1, step: 0.001 },
+  mieDirectionalG: { value: 0.7, min: 0, max: 1, step: 0.01 },
+  elevation: { value: 0.6, min: -Math.PI, max: Math.PI, step: 0.01 },
+  azimuth: { value: 180, min: 0, max: 360, step: 1 },
+  distance: { value: 450000, min: 100000, max: 1000000, step: 10000 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas :tone-mapping-exposure="0.25">
+    <TresPerspectiveCamera :position="[0, 15, 200]" />
+    <Sky
+      :turbidity="turbidity"
+      :rayleigh="rayleigh"
+      :mie-coefficient="mieCoefficient"
+      :mie-directional-g="mieDirectionalG"
+      :elevation="elevation"
+      :azimuth="azimuth"
+      :distance="distance"
+    />
+    <OrbitControls />
+    <TresGridHelper :args="[1000, 20]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Smoke.vue b/apps/cientos-docs/app/components/staging/Smoke.vue
new file mode 100644
index 000000000..1efe4aab4
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Smoke.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { OrbitControls, Smoke } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const {
+  segments,
+  opacity,
+  speed,
+  depth,
+  color,
+  depthTest,
+  spreadY,
+  spreadX,
+  scale,
+} = useControls(
+  {
+    segments: {
+      label: 'Segments',
+      value: 5,
+      min: 1,
+      max: 20,
+      step: 1,
+    },
+    opacity: {
+      label: 'Opacity',
+      value: 0.5,
+      min: 0,
+      max: 1,
+      step: 0.1,
+    },
+    speed: {
+      label: 'Speed',
+      value: 0.4,
+      min: 0,
+      max: 1,
+      step: 0.1,
+    },
+    depth: {
+      label: 'Depth',
+      value: 0.3,
+      min: 0,
+      max: 1,
+      step: 0.1,
+    },
+    color: {
+      type: 'color',
+      label: 'Color',
+      value: '#f7f7f7',
+    },
+    depthTest: {
+      type: 'boolean',
+      label: 'Depth Test',
+      value: false,
+    },
+    spreadY: {
+      label: 'Spread Y',
+      value: 0.1,
+      min: 0,
+      max: 4,
+      step: 0.1,
+    },
+    spreadX: {
+      label: 'Spread X',
+      value: 0.5,
+      min: 0,
+      max: 4,
+      step: 0.1,
+    },
+    scale: {
+      label: 'Scale',
+      value: 1,
+      min: 0.1,
+      max: 4,
+      step: 0.1,
+    },
+  },
+  { uuid },
+)
+</script>
+
+<template>
+  <TresCanvas clear-color="#111">
+    <TresPerspectiveCamera :position="[0, 1.25, 2.5]" />
+    <OrbitControls />
+    <Suspense>
+      <Smoke
+        :segments="segments"
+        :opacity="opacity"
+        :speed="speed"
+        :depth="depth"
+        :color="color"
+        :depth-test="depthTest"
+        :spreadY="spreadY"
+        :spreadX="spreadX"
+        :scale="scale"
+      />
+    </Suspense>
+    <TresAmbientLight :intensity="0.75" />
+    <TresGridHelper :args="[10, 20]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Stage.vue b/apps/cientos-docs/app/components/staging/Stage.vue
new file mode 100644
index 000000000..6806a5da3
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Stage.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, Plane, Stage } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas shadows clear-color="#222">
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <OrbitControls make-default />
+    <Stage
+      lighting="rembrandt"
+      shadows="contact"
+      :adjust-camera="true"
+      environment="city"
+      :intensity="0.5"
+    >
+      <TresMesh cast-shadow>
+        <TresBoxGeometry />
+        <TresMeshStandardMaterial color="orange" />
+      </TresMesh>
+      <Plane :position="[0, -2, 0]" receive-shadow :args="[5, 5]">
+        <TresMeshStandardMaterial />
+      </Plane>
+    </Stage>
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/components/staging/Stars.vue b/apps/cientos-docs/app/components/staging/Stars.vue
new file mode 100644
index 000000000..b5697efe2
--- /dev/null
+++ b/apps/cientos-docs/app/components/staging/Stars.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { OrbitControls, Stars } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { useControls } from '@tresjs/leches'
+
+const uuid = inject(`uuid`)
+
+const { size, sizeAttenuation, transparent, alphaTest, count, depth, radius } = useControls({
+  size: { value: 0.1, min: 0.01, max: 1, step: 0.01 },
+  sizeAttenuation: true,
+  transparent: true,
+  alphaTest: { value: 0.01, min: 0, max: 10, step: 0.1 },
+  count: { value: 5000, min: 100, max: 20000, step: 100 },
+  depth: { value: 50, min: 10, max: 200, step: 10 },
+  radius: { value: 100, min: 50, max: 500, step: 10 },
+}, { uuid })
+</script>
+
+<template>
+  <TresCanvas clear-color="#111">
+    <TresPerspectiveCamera :position="[0, 5, 10]" />
+    <OrbitControls />
+    <Stars
+      :size="size"
+      :size-attenuation="sizeAttenuation"
+      :transparent="transparent"
+      :alpha-test="alphaTest"
+      :count="count"
+      :depth="depth"
+      :radius="radius"
+    />
+    <TresGridHelper :args="[10, 20]" />
+  </TresCanvas>
+</template>
diff --git a/apps/cientos-docs/app/composables/useNavigation.ts b/apps/cientos-docs/app/composables/useNavigation.ts
new file mode 100644
index 000000000..47efe667a
--- /dev/null
+++ b/apps/cientos-docs/app/composables/useNavigation.ts
@@ -0,0 +1,35 @@
+import { createSharedComposable } from '@vueuse/core'
+
+export interface HeaderLink {
+  label: string
+  description: string
+  icon: string
+  to: string
+  search?: boolean
+  children?: HeaderLink[]
+}
+
+function _useHeaderLinks() {
+  const route = useRoute()
+  const headerLinks = computed<HeaderLink[]>(() => {
+    const to = ''
+
+    return [{
+      label: 'Get Started',
+      description: 'Learn how to get started.',
+      icon: 'i-lucide-rocket',
+      to: `${to}/getting-started`,
+      active: route.path.startsWith(`${to}/getting-started`),
+    }, {
+      label: 'API',
+      description: 'Explore the API reference.',
+      icon: 'i-lucide-code-xml',
+      to: `${to}/api`,
+      active: route.path.startsWith(`${to}/api`),
+    }]
+  })
+
+  return { headerLinks }
+}
+
+export const useHeaderLinks = import.meta.client ? createSharedComposable(_useHeaderLinks) : _useHeaderLinks
diff --git a/apps/cientos-docs/app/error.vue b/apps/cientos-docs/app/error.vue
new file mode 100644
index 000000000..35ec260ca
--- /dev/null
+++ b/apps/cientos-docs/app/error.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+defineProps<{
+  error: NuxtError
+}>()
+
+useHead({
+  htmlAttrs: {
+    lang: 'en',
+  },
+})
+
+useSeoMeta({
+  title: 'Page not found',
+  description: 'We are sorry but this page could not be found.',
+})
+
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
+  server: false,
+})
+
+provide(navigationInjectionKey, navigation)
+</script>
+
+<template>
+  <UApp>
+    <AppHeader />
+
+    <UError :error="error" />
+
+    <AppFooter />
+
+    <ClientOnly>
+      <LazyUContentSearch
+        :files="files"
+        :navigation="navigation"
+      />
+    </ClientOnly>
+  </UApp>
+</template>
diff --git a/apps/cientos-docs/app/layouts/docs.vue b/apps/cientos-docs/app/layouts/docs.vue
new file mode 100644
index 000000000..c0e62a08e
--- /dev/null
+++ b/apps/cientos-docs/app/layouts/docs.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="bg-pattern px-0 md:px-8 w-full ">
+    <UPage class="bg-default border-l border-r border-gray-200 dark:border-gray-800 px-4">
+      <template #left>
+        <AppSide />
+      </template>
+      <UContainer>
+        <slot></slot>
+      </UContainer>
+    </UPage>
+  </div>
+</template>
diff --git a/apps/cientos-docs/app/pages/[...slug].vue b/apps/cientos-docs/app/pages/[...slug].vue
new file mode 100644
index 000000000..4e7b9a588
--- /dev/null
+++ b/apps/cientos-docs/app/pages/[...slug].vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'docs',
+})
+
+const route = useRoute()
+const { toc } = useAppConfig()
+
+const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
+
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+}
+
+const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
+  return queryCollectionItemSurroundings('docs', route.path, {
+    fields: ['description'],
+  })
+})
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+
+useSeoMeta({
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+  twitterTitle: title,
+  twitterDescription: description,
+})
+
+const links = computed(() => {
+  const links = []
+  if (toc?.bottom?.edit) {
+    links.push({
+      icon: 'i-lucide-external-link',
+      label: 'Edit this page',
+      to: `${toc.bottom.edit}/${page?.value?.stem}.${page?.value?.extension}`,
+      target: '_blank',
+    })
+  }
+
+  return [...links, ...(toc?.bottom?.links || [])].filter(Boolean)
+})
+</script>
+
+<template>
+  <UPage v-if="page">
+    <UPageHeader
+      :title="page.title"
+      :description="page.description"
+      :links="page.links"
+      :ui="{
+        headline: 'uppercase font-mono font-light text-default-500 text-dim',
+      }"
+    />
+
+    <UPageBody>
+      <ContentRenderer
+        v-if="page"
+        :value="page"
+      />
+
+      <USeparator v-if="surround?.length" />
+
+      <UContentSurround :surround="surround" />
+    </UPageBody>
+
+    <template
+      v-if="page?.body?.toc?.links?.length"
+      #right
+    >
+      <UContentToc
+        :title="toc?.title"
+        :links="page.body?.toc?.links"
+      >
+        <template
+          v-if="toc?.bottom"
+          #bottom
+        >
+          <div
+            class="hidden lg:block space-y-6"
+            :class="{ '!mt-6': page.body?.toc?.links?.length }"
+          >
+            <USeparator
+              v-if="page.body?.toc?.links?.length"
+              type="dashed"
+            />
+
+            <UPageLinks
+              :title="toc.bottom.title"
+              :links="links"
+            />
+          </div>
+        </template>
+      </UContentToc>
+    </template>
+  </UPage>
+</template>
diff --git a/apps/cientos-docs/app/pages/index.vue b/apps/cientos-docs/app/pages/index.vue
new file mode 100644
index 000000000..6dc542237
--- /dev/null
+++ b/apps/cientos-docs/app/pages/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const { data: page } = await useAsyncData('index', () => queryCollection('landing').path('/').first())
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+
+const title = page.value.seo?.title || page.value.title
+const description = page.value.seo?.description || page.value.description
+const siteName = typeof page.value.seo?.siteName === 'string' ? page.value.seo.siteName : 'Docs'
+
+useSeoMeta({
+  titleTemplate: title,
+  ogTitle: title,
+  description,
+  ogSiteName: siteName,
+  ogDescription: description,
+  twitterCard: 'summary_large_image',
+  ogImage: '/og-image.png',
+  twitterImage: '/og-image.png',
+  ogUrl: 'https://example.com',
+  twitterTitle: title,
+  twitterDescription: description,
+})
+</script>
+
+<template>
+  <ContentRenderer
+    v-if="page"
+    class="bg-default"
+    :value="page"
+    :prose="false"
+  />
+</template>
diff --git a/apps/cientos-docs/app/utils/content.ts b/apps/cientos-docs/app/utils/content.ts
new file mode 100644
index 000000000..4e83d6142
--- /dev/null
+++ b/apps/cientos-docs/app/utils/content.ts
@@ -0,0 +1,18 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+
+export const navigationInjectionKey: InjectionKey<Ref<ContentNavigationItem[] | undefined>> = Symbol('navigation')
+
+export function navPageFromPath(path: string, tree: ContentNavigationItem[]): ContentNavigationItem | undefined {
+  for (const file of tree) {
+    if (file.path === path) {
+      return file
+    }
+
+    if (file.children) {
+      const result = navPageFromPath(path, file.children)
+      if (result) {
+        return result
+      }
+    }
+  }
+}
diff --git a/apps/cientos-docs/content.config.ts b/apps/cientos-docs/content.config.ts
new file mode 100644
index 000000000..8760af561
--- /dev/null
+++ b/apps/cientos-docs/content.config.ts
@@ -0,0 +1,25 @@
+import { defineCollection, defineContentConfig, z } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    landing: defineCollection({
+      type: 'page',
+      source: 'index.md',
+    }),
+    docs: defineCollection({
+      type: 'page',
+      source: {
+        include: '**',
+        exclude: ['index.md'],
+      },
+      schema: z.object({
+        links: z.array(z.object({
+          label: z.string(),
+          icon: z.string(),
+          to: z.string(),
+          target: z.string().optional(),
+        })).optional(),
+      }),
+    }),
+  },
+})
diff --git a/apps/cientos-docs/content/1.getting-started/1.index.md b/apps/cientos-docs/content/1.getting-started/1.index.md
new file mode 100644
index 000000000..e1c4555e8
--- /dev/null
+++ b/apps/cientos-docs/content/1.getting-started/1.index.md
@@ -0,0 +1,20 @@
+---
+title: Getting Started
+description: Learn how to get started with cientos
+---
+
+Cientos (Spanish word for "hundreds", pronounced `/θjentos/`) is a collection of useful ready-to-go helpers and components that are not part of the **core** package. The name uses the word in Spanish to multiply by 100, to refer to the potential reach of the package to hold amazing abstractions.
+
+::prose-note
+The cientos package uses three-stdlib module under the hood instead of the `three/examples/jsm` module. This means that you don't need to extend the catalogue of components using the extend method, cientos does it for you
+::
+
+It just works. 💯
+
+## Next Steps
+
+Continue your journey:
+
+- [Installation](/getting-started/installation)
+- [Usage](/getting-started/usage)
+- [Upgrade guide](/getting-started/upgrade-guide)
diff --git a/apps/cientos-docs/content/1.getting-started/2.installation.md b/apps/cientos-docs/content/1.getting-started/2.installation.md
new file mode 100644
index 000000000..661917b9c
--- /dev/null
+++ b/apps/cientos-docs/content/1.getting-started/2.installation.md
@@ -0,0 +1,52 @@
+---
+title: Installation Guide
+description: Get started with cientos
+---
+
+## Manual installation
+
+If you prefer to set up Cientos manually or add it to an existing [Tres.js](https://tresjs.org/) project
+
+ ::code-group
+```bash [pnpm]
+pnpm add @tresjs/cientos
+```
+
+```bash [npm]
+npm install @tresjs/cientos
+```
+
+```bash [yarn]
+yarn add @tresjs/cientos
+```
+::
+
+## Via `create-tres` wizard
+
+When using `create-tres` to create a new project, the cli will prompt you to install cientos.
+
+::code-group
+```bash [npm]
+npx create-tres my-tres-project
+```
+
+```bash [yarn]
+yarn create tres my-tres-project
+```
+
+```bash [pnpm]
+pnpm create tres my-tres-project
+```
+::
+
+::read-more{to="https://docs.tresjs.org/getting-started/installation#quick-start-recommended"}
+For more information about the `create-tres` wizard please refer to this link.
+::
+
+## Nuxt <UIcon name="i-simple-icons-nuxt" />
+
+If you're using nuxt, installing our nuxt module will detect automatically cientos.
+
+::read-more{to="https://docs.tresjs.org/getting-started/installation#nuxt-project"}
+For more information about the Nuxt module please refer to this link.
+::
diff --git a/apps/cientos-docs/content/1.getting-started/3.usage.md b/apps/cientos-docs/content/1.getting-started/3.usage.md
new file mode 100644
index 000000000..7be4f516f
--- /dev/null
+++ b/apps/cientos-docs/content/1.getting-started/3.usage.md
@@ -0,0 +1,95 @@
+---
+title: Usage
+description: Learn how to get use cientos here
+---
+
+## Basic Usage
+
+All instance of cientos provide one (or many) examples of how to use it, similar to this one:
+
+```js
+import { OrbitControls } from '@tresjs/cientos'
+```
+
+Now you can use the `OrbitControls` component in your scene.
+```vue
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <OrbitControls />
+  </TresCanvas>
+</template>
+```
+
+::prose-note
+Note that you don’t need to include the **Tres** prefix (for example, `<TresOrbitControl />`) to use the component.
+::
+
+### Props
+
+All the props are listed with their respective instance and in case is not specified all the props are, **reactive**, for example:
+
+```vue{3,15-16}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshWobbleMaterial } from '@tresjs/cientos'
+
+const speed = ref(0.1)
+const factor = ref(0.6)
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <TresMesh>
+      <TresTorusGeometry />
+      <MeshWobbleMaterial
+        :speed="speed"
+        :factor="factor"
+      />
+    </TresMesh>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+::prose-note
+All the props and properties are **Reactive** unless the docs of the instance says the contrary.
+::
+
+### Events
+
+Some instance emit events which you can listen as you normally do using vue [emits](https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events), for example:
+
+```vue{3,5,11}
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { GlobalAudio } from '@tresjs/cientos'
+
+const onPlay = (e) => console.log(e) // will trigger when the event change state
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 0, 7.5]" />
+    <GlobalAudio :src="exampleAudio" @is-playing="onPlay" />
+  </TresCanvas>
+</template>
+```
+
+### Exposed properties
+
+All instances expose a `instance` property by default which contains the base of the of its abstractions. For example
+
+```vue{2}
+<script setup>
+const edgesRef = shallowRef(null)
+
+console.log(edgesRef.value.instance) // Inheritance of [LineSegments](https://threejs.org/docs/#api/en/objects/LineSegments)
+
+<template>
+    <Edges ref="edgesRef" />
+</template>
+```
+
+Some instances expose more object
diff --git a/apps/cientos-docs/content/1.getting-started/4.upgrade-guide.md b/apps/cientos-docs/content/1.getting-started/4.upgrade-guide.md
new file mode 100644
index 000000000..d62cd2667
--- /dev/null
+++ b/apps/cientos-docs/content/1.getting-started/4.upgrade-guide.md
@@ -0,0 +1,79 @@
+---
+title: Upgrade Guide
+description: Migration guide for cientos
+---
+
+## From v4 to v5
+
+Cientos doesn't have any breaking changes from v4 to v5 but please check the [Upgrade Guide](https://docs.tresjs.org/getting-started/upgrade-guide) of the core.
+
+## Migration Guide from v3
+
+### Updated defineExport properties
+
+Since the beginning we exported our components' underlying `Three.js` instances using the name `value`. This created a very ambiguos situation with some components. When we access them using a `ref` in `<template>`, we ended up with something like:
+
+```html
+<script>
+  import { shallowRef, watch } from 'vue'
+  import { TresCanvas } from '@tresjs/core'
+  import { Stars } from '@tresjs/cientos'
+
+  const starsRef = shallowRef()
+
+  watch(starsRef, () => {
+    // to access the instance we have a nested `value.value`
+    console.log(starsRef.value.value)
+    // Wrong in v4 ❌
+  })
+</script>
+
+<template>
+  <TresCanvas>
+    ...
+    <Stars ref="starsRef" />
+    ...
+  </TresCanvas>
+</template>
+```
+
+This behavior caused confusion and resulted in a poor developer experience. To address it properly, we needed to introduce a breaking change, and we felt this was the right moment to do so.
+
+The new implementation remains very similar conceptually. However, instead of having two ambiguous `value` references, we’ve standardized all components around `instance`. To access the component, you should now use:
+
+```
+// Correct in v4 ✅
+console.log(starsRef.value.instance)
+```
+
+### Remove TweakPane from deps
+
+We removed the built-in `useTweakPane` integration because it was adding overhead and friction:
+
+- Incompatible with [Tweakpane v4](https://tweakpane.github.io/docs/)
+- Large bundle impact
+- Repetitive boilerplate and not very intuitive
+
+If you still want to use Tweakpane with Tres, follow the cookbook recipe: https://docs.tresjs.org/cookbook/tweakpane.html
+
+### Move directives to core
+
+Community adoption of directives has been solid, so they now live in the core package. Import them from `@tresjs/core`:
+
+```ts
+// Correct ✅
+import { vLog } from '@tresjs/core'
+```
+
+Instead of:
+
+```ts
+// Wrong ❌
+import { vLog } from '@tresjs/cientos'
+```
+
+### Changes in KeyboardControls
+
+`KeyboardControls` was redesigned to provide floating controls similar to Unreal Engine, which better matches the component’s intent. We also bundled `PointerLockControls` inside `KeyboardControls`, so you don’t need to wire it manually anymore.
+
+Learn more: https://cientos.tresjs.org/guide/controls/keyboard-controls
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/align.md b/apps/cientos-docs/content/2.api/1.abstractions/align.md
new file mode 100644
index 000000000..e74f6a92c
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/align.md
@@ -0,0 +1,77 @@
+---
+title: Align
+description: Calculate and align children within their parent using bounding boxes.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsAlign
+  ::
+::
+
+Calculates a bounding box around its children and aligns them as a group within their parent. The component measures its contents and realigns on every frame unless `cacheKey` is set.
+
+## Usage
+
+```vue{2,13,18}
+<script setup lang="ts">
+import { Align, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#222">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <TresAxesHelper :scale="2" />
+
+    <Align top right back>
+      <TresMesh>
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </Align>
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+All props are optional.
+
+| Prop         | Description                         | Default |
+| ------------ | ----------------------------------- | ------- |
+| `top`        | If `true`, aligns bounding box bottom to `0` on the y-axis | `false` |
+| `bottom`     | If `true`, aligns bounding box top to `0` on the y-axis. | `false` |
+| `left`       | If `true`, aligns bounding box right to `0` on the x-axis. | `false` |
+| `right`      | If `true`, aligns bounding box left to `0` on the x-axis. | `false` |
+| `front`      | If `true`, aligns bounding box back to `0` on the z-axis. | `false` |
+| `back`       | If `true`, aligns bounding box front to `0` on the z-axis. | `false` |
+| `disable`    | If `true`, disables alignment on all axes. | `false` |
+| `disableX`   | If `true`, disables alignment on the x-axis. | `false` |
+| `disableY`   | If `true`, disables alignment on the y-axis. | `false` |
+| `disableZ`   | If `true`, disables alignment on the z-axis. | `false` |
+| `precise`    | See [Box3.setFromObject](https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject). | `true` |
+| `onAlign`    | Callback that fires when updating, after measurement. | |
+| `cacheKey`   | If set, component will only update when `cacheKey`'s value changes. If unset, component will update every frame. | `undefined` |
+
+## AlignCallbackOptions
+
+```ts
+export interface AlignCallbackOptions {
+  /** The next parent above <Align /> */
+  parent: Object3D
+  /** The outmost container group of the <Align/> component */
+  container: Object3D
+  width: number
+  height: number
+  depth: number
+  boundingBox: Box3
+  boundingSphere: Sphere
+  center: Vector3
+  verticalAlignment: number
+  horizontalAlignment: number
+  depthAlignment: number
+}
+```
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/billboard.md b/apps/cientos-docs/content/2.api/1.abstractions/billboard.md
new file mode 100644
index 000000000..b053547fc
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/billboard.md
@@ -0,0 +1,42 @@
+---
+title: Billboard
+description: Make objects always face the camera automatically.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsBillboard
+  ::
+::
+
+Adds a `THREE.Group` that always faces the camera.
+
+## Usage
+
+```vue{2,10,14}
+<script setup lang="ts">
+import { Billboard, Box, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333333">
+    <OrbitControls />
+    <TresPerspectiveCamera :position="[0, 0, 10]" />
+    <Billboard>
+      <Box :scale="[0.5, 0.5, 0.001]">
+        <TresMeshNormalMaterial />
+      </Box>
+    </Billboard>
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Prop             | Description                                          | Default       |
+| :--------------- | :--------------------------------------------------- | ------------- |
+| `autoUpdate`     | Whether the `<Billboard />` should face the camera automatically on every frame.       | `true`  |
+| `lockX`          | Whether to lock the x-axis.                          | `false` |
+| `lockY`          | Whether to lock the y-axis.                          | `false` |
+| `lockZ`          | Whether to lock the z-axis.                          | `false` |
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/camera-shake.md b/apps/cientos-docs/content/2.api/1.abstractions/camera-shake.md
new file mode 100644
index 000000000..1ece691ab
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/camera-shake.md
@@ -0,0 +1,58 @@
+---
+title: Camera Shake
+description: Apply smooth camera shake to the active camera.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsCameraShake
+  ::
+::
+
+`<CameraShake />` is a component that adds **natural**, *noise-driven motion* to the **active camera**.
+It offers **per-axis control**, **adjustable intensity**, and *optional decay* — perfect for *handheld feel*, *footsteps*, *impacts*, or *engine rumble* — and is based on the [Drei `CameraShake` component](https://drei.docs.pmnd.rs/staging/camera-shake#camerashake).
+
+## Usage
+
+```vue{2,11,16}
+<script setup lang="ts">
+import { CameraShake, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#222">
+    <TresPerspectiveCamera :position="[0, 2, 6]" />
+    <OrbitControls make-default />
+
+    <CameraShake :intensity="1" :max-yaw="0.01" :max-pitch="0.01" :max-roll="0.01" />
+      <TresAxesHelper :scale="2" />
+      <TresMesh :position-y="0.5">
+        <TresBoxGeometry :args="[1, 1, 1]" />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+::prose-note
+`<CameraShake />` is fully compatible with **`<OrbitControls />`**.
+To ensure it works *as expected*, make sure to add the **`make-default`** prop:
+
+```vue
+<OrbitControls make-default />
+```
+::
+
+## Props
+
+| Prop               | Description                                           | Default |
+| ------------------ | ----------------------------------------------------- | ------- |
+| `intensity`        | The intensity of the shake (0–1).                     | `1`     |
+| `decay`            | If `true`, intensity decays over time.                | `false` |
+| `decayRate`        | How fast intensity changes when `decay` is enabled.   | `0.65`  |
+| `maxYaw`           | Maximum yaw angle in radians.                         | `0.01`  |
+| `maxPitch`         | Maximum pitch angle in radians.                       | `0.01`  |
+| `maxRoll`          | Maximum roll angle in radians.                        | `0.01`  |
+| `yawFrequency`     | Frequency of yaw oscillation.                         | `0.1`   |
+| `pitchFrequency`   | Frequency of pitch oscillation.                       | `0.1`   |
+| `rollFrequency`    | Frequency of roll oscillation.                        | `0.1`   |
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/edges.md b/apps/cientos-docs/content/2.api/1.abstractions/edges.md
new file mode 100644
index 000000000..8def0ee8b
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/edges.md
@@ -0,0 +1,40 @@
+---
+title: Edges
+description: Render visible edges of objects with enhanced visual quality.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsEdges
+  ::
+::
+
+The `cientos` package provides an abstraction of [EdgesGeometry](https://threejs.org/docs/#api/en/geometries/EdgesGeometry) from Three.js, `<Edges>` is specifically designed for rendering visible edges of objects in a scene graph. This enhances the visual quality by highlighting contours and providing a stylized appearance which contributes to the artistic aspect of 3D visualizations.
+
+## Usage
+
+```vue{3,12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Box, Edges, OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <OrbitControls />
+    <Box>
+      <TresMeshBasicMaterial />
+      <Edges />
+    </Box>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+`<Edges>` is based on [LineSegments](https://threejs.org/docs/#api/en/objects/LineSegments) & [Line](https://threejs.org/docs/#api/en/objects/Line) and supports all of its props.
+
+| Prop              | Description                                          | Default                   |
+| :---------------- | :--------------------------------------------------- | ------------------------- |
+| **color**        | `THREE.Color` — Color of the edges. <br> More informations : [TresColor](https://docs.tresjs.org/api/instances-arguments-and-props.html#colors) — [THREE.Color](https://threejs.org/docs/#api/en/math/Color) | `#ff0000`                   |
+| **threshold**        | `number` — An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value  | `1`                   |
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/fit.md b/apps/cientos-docs/content/2.api/1.abstractions/fit.md
new file mode 100644
index 000000000..bb8c790df
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/fit.md
@@ -0,0 +1,58 @@
+---
+title: Fit
+description: Uniformly scale and position children to fit into a defined space.
+---
+
+::SceneWrapper
+  ::AbstractionsFit
+  ::
+::
+
+`<Fit />` uniformly scales and positions its children as a group. By default, it fits its children into a 1 × 1 × 1 box at the world origin.
+
+Alternatively, the children can be fit into a `Box3` or an `Object3D`.
+
+Or the children can simply be resized. With `<Fit />` the children are scaled relative to the center of their calculated bounding box.
+
+## Usage
+
+```vue{2,20,27}
+<script setup lang="ts">
+import { Fit, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { BoxGeometry, MeshNormalMaterial } from 'three'
+
+const positions: number[][] = []
+for (let y = 100; y <= 120; y += 10) {
+  for (let x = 100; x <= 120; x += 10) {
+    positions.push([x, y, 9999])
+  }
+}
+const geom = new BoxGeometry()
+const mat = new MeshNormalMaterial()
+</script>
+
+<template>
+  <TresCanvas clear-color="#4F4F4F">
+    <TresPerspectiveCamera :position="[1, 1, 1]" />
+    <OrbitControls />
+    <Fit>
+      <TresMesh
+        v-for="(pos, index) in positions"
+        :key="index"
+        :position="pos"
+        :args="[geom, mat]"
+      />
+    </Fit>
+    <TresGridHelper :args="[1, 1]" />
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Name | Description |
+| :--- | :---------- |
+| **into** | If `into` is:<ul><li>omitted or explicitly `undefined`: position/scale children to fit into a 1 × 1 × 1 `Box3` at world origin.</li><li>`null`: turn off `<Fit />`; reset scale/position of children.</li><li>`number`: convert argument to `Vector3(number, number, number)`.</li><li>`[number, number, number]`: convert argument to `Vector3`.</li><li>`Vector3`: position/scale children to fit inside a `Box3` of size `Vector3` at target objects' cumulative center.</li><li>`Box3`: position/scale children to fit inside `Box3`.</li><li>`Object3D`: position/scale children to fit inside calculated `Box3`. [See `THREE.Box3.setFromObject`](https://threejs.org/docs/#api/en/math/Box3.setFromObject). `<Fit />` must not contain the `Object3D` and vice-versa.</li></ul><br>default:<br>`new Box3(new Vector3(-0.5, -0.5, -0.5), new Vector3(0.5, 0.5, 0.5))` |
+| **precise** | [See `precise` argument in `THREE.Box3.setFromObject`](https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject)<br><br>default:<br>`false` |
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/index.md b/apps/cientos-docs/content/2.api/1.abstractions/index.md
new file mode 100644
index 000000000..c1449fcf3
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/index.md
@@ -0,0 +1,7 @@
+---
+title: Abstractions
+description: UI components reference
+---
+
+::ApiList{listName="abstraction-list"}
+::
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/levioso.md b/apps/cientos-docs/content/2.api/1.abstractions/levioso.md
new file mode 100644
index 000000000..b660abfdf
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/levioso.md
@@ -0,0 +1,46 @@
+---
+title: Levioso (Float)
+description: Make content float like magic with smooth animations.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsLevioso
+  ::
+::
+
+![Leviosa](https://media.giphy.com/media/HaCFT5ghY6L1m/giphy.gif)
+
+The `cientos` package provides a `<Levioso />` wrapper that makes its content … float, just like Magic 🪄✨
+
+## Usage
+
+```vue{3,11,13}
+<script setup lang="ts">
+import { TresCanvas } from "@tresjs/core";
+import { Levioso, OrbitControls, Box } from "@tresjs/cientos";
+
+</script>
+
+<template>
+  <TresCanvas :clear-color="0x82dbc5">
+    <TresPerspectiveCamera :position="[0, 0, 5]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <Levioso :speed="4">
+      <Box />
+    </Levioso>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight :intensity="1" :position="[2, 2, 2]" />
+    <TresGridHelper :position="[0, -1, 0]" />
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Prop             | Description                                          | Default       |
+| :--------------- | :--------------------------------------------------- | ------------- |
+| `speed`          | Floating speed, higher it rocks more 🤘.              | `1`           |
+| `rotationFactor` | Factor for Euler rotation.                           | `1`           |
+| `floatFactor`    | Factor for Up/down movement.                         | `1`           |
+| `range`          | Range of y-axis values the object will float within. | `[-0.1, 0.1]` |
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/mask.md b/apps/cientos-docs/content/2.api/1.abstractions/mask.md
new file mode 100644
index 000000000..1a32a7b10
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/mask.md
@@ -0,0 +1,80 @@
+---
+title: Mask
+description: Cut out areas of the screen using the stencil buffer.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsMask
+  ::
+::
+
+`<Mask/>` uses the stencil buffer to cut out areas of the screen.
+
+::prose-warning
+To use `<Mask />` you *must* add `:stencil="true"` to your `<TresCanvas />`.
+
+`<Mask />` relies on the [`stencil buffer`](https://threejs.org/docs/#api/en/renderers/WebGLRenderer). In recent versions of THREE.js, by default, the stencil buffer is not created.
+::
+
+## Usage
+
+```vue{2, 16-19}
+<script setup lang="ts">
+import { Mask, OrbitControls, useMask } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas :stencil="true" clear-color="#4f4f4f">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <TresGroup :scale="2">
+      <TresMesh>
+        <TresRingGeometry :args="[0.95, 1, 64]" />
+        <TresMeshBasicMaterial color="white" />
+      </TresMesh>
+      <Mask :id="1">
+        <TresCircleGeometry />
+        <TresMeshBasicMaterial color="#fbb03b" />
+      </Mask>
+    </TresGroup>
+
+    <TresMesh :position-z="-1">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial v-bind="useMask(1)" />
+    </TresMesh>
+
+    <TresMesh :position-z="-3">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial v-bind="useMask(1)" />
+    </TresMesh>
+
+    <TresMesh :position-z="-5">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Prop           | Description                                                                                                                                                            | Default              |
+| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| **`id`**    | Id of the stencil buffer to use. Each mask must have a `number` id. Multiple masks can refer to the same id. | |
+| **`colorWrite`** | Whether the colors of the mask's own material will leak through. | `false` |
+| **`depthWrite`** | Whether the depth of the mask's own material will leak through. | `false` |
+
+## useMask
+
+Composable that returns the stencil configuration to apply a mask to a material. Use it with `v-bind` on materials that should be affected by the mask.
+
+**Parameters:**
+- `id` - The mask id to use (number or Ref)
+- `inverse` - Whether to invert the mask (boolean or Ref), defaults to `false`
+
+```vue
+<TresMeshNormalMaterial v-bind="useMask(1)" />
+```
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/outline.md b/apps/cientos-docs/content/2.api/1.abstractions/outline.md
new file mode 100644
index 000000000..214831835
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/outline.md
@@ -0,0 +1,51 @@
+---
+title: Outline
+description: Create inverted-hull outlines using parent geometry.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsOutline
+  ::
+::
+
+`<Outline />` creates an inverted-hull outline using its parent's geometry. Supported parents are `<TresMesh>` and `<TresSkinnedMesh>`.
+
+## Usage
+
+```vue{3,15,20}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, Outline } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas clear-color="#4f4f4f">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <TresAmbientLight :intensity="3.14" />
+    <TresPointLight :intensity="50" :position="[2, 2, 0]" />
+    <TresMesh :position-x="-0.75">
+      <TresBoxGeometry />
+      <TresMeshPhongMaterial />
+      <Outline :thickness="7.5" color="#82dbc5" />
+    </TresMesh>
+    <TresMesh :position-x="0.75">
+      <TresSphereGeometry :args="[0.5]" />
+      <TresMeshPhongMaterial />
+      <Outline :thickness="7.5" color="#fbb03b" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Props        | Description                                                        | Default |
+|--------------|--------------------------------------------------------------------| ------- |
+| color        | Outline color                                                      | `'black'` |
+| screenspace  | Whether line thickness is independent of zoom                      | `false` |
+| opacity      | Outline opacity                                                    | `1` |
+| transparent  | Outline transparency                                               | `false` |
+| thickness    | Outline thickness                                                  | `0.05` |
+| angle        | Geometry crease angle (`0` is no crease).  See [BufferGeometryUtils.toCreasedNormals](https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.toCreasedNormals) | `Math.PI` |
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/sampler.md b/apps/cientos-docs/content/2.api/1.abstractions/sampler.md
new file mode 100644
index 000000000..b1a82f131
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/sampler.md
@@ -0,0 +1,90 @@
+---
+title: Sampler
+description: Distribute instances on mesh surfaces using MeshSurfaceSampler.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsSampler
+  ::
+::
+
+Declarative abstraction around MeshSurfaceSampler & InstancedMesh. It samples points from the passed mesh and transforms an InstancedMesh's matrix to distribute instances on the points.
+
+## Usage
+
+```vue{2,11-20}
+<script setup lang="ts">
+import { OrbitControls, Sampler } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+
+    <Sampler :count="50">
+      <TresMesh>
+        <TresTorusGeometry />
+      </TresMesh>
+
+      <TresInstancedMesh :args="[null!, null!, 1000]">
+        <TresBoxGeometry :args="[0.1, 0.1, 0.1]" />
+        <TresMeshNormalMaterial />
+      </TresInstancedMesh>
+    </Sampler>
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Props        | Description                                                        |
+|--------------|--------------------------------------------------------------------|
+| mesh         | **Mesh** Surface mesh from which to sample                         |
+| count        | **Number** Number of samples                                       |
+| instanceMesh | **InstanceMesh** InstanceMesh to scatter                           |
+| weight       | **String** A vertex attribute to be used as a weight when sampling |
+| transform    | **Function** A function that can be used as a custom sampling      |
+
+## useSurfaceSampler
+
+A hook to obtain the result of the <Sampler /> as a buffer. Useful for driving anything other than InstancedMesh via the Sampler.
+
+```vue{2,10}
+<script setup lang="ts">
+import { OrbitControls, useSurfaceSampler } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { ref, watch } from 'vue'
+
+const torusRef = ref()
+const instancesRef = ref()
+
+watch(torusRef, (value) => {
+  useSurfaceSampler(value, 50, instancesRef.value, 'color')
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+
+    <TresMesh ref="torusRef">
+      <TresTorusGeometry />
+    </TresMesh>
+
+    <TresInstancedMesh
+      ref="instancesRef"
+      :args="[null!, null!, 1_000]"
+    >
+      <TresSphereGeometry :args="[0.1, 32, 32]" />
+      <TresMeshNormalMaterial />
+    </TresInstancedMesh>
+
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
+```
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/screen-sizer.md b/apps/cientos-docs/content/2.api/1.abstractions/screen-sizer.md
new file mode 100644
index 000000000..da634ab5b
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/screen-sizer.md
@@ -0,0 +1,44 @@
+---
+title: ScreenSizer
+description: Scale objects to screen space where 1 unit equals 1 pixel.
+---
+
+::SceneWrapper
+  ::AbstractionsScreenSizer
+  ::
+::
+
+Adds a `<TresObject3D />` wrapper that scales to "screen space". By default `1` THREE world unit will be translated to 1 screen pixel.
+
+E.g. a BoxGeometry with a height, width, and depth of 100 each, will be scaled to 100 screen pixels in each dimension.
+
+## Usage
+
+```vue{3,10,15}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, ScreenSizer } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas clear-color="#3f3f3f">
+    <TresPerspectiveCamera :position="[10, 10, 10]" />
+    <OrbitControls />
+    <ScreenSizer>
+      <TresMesh>
+        <TresBoxGeometry :args="[100, 100, 100]" />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSizer>
+    <TresMesh :position-x="5">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+Inherits all props from `THREE.Object3D`.
diff --git a/apps/cientos-docs/content/2.api/1.abstractions/screen-space.md b/apps/cientos-docs/content/2.api/1.abstractions/screen-space.md
new file mode 100644
index 000000000..de4287d9d
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/1.abstractions/screen-space.md
@@ -0,0 +1,49 @@
+---
+title: ScreenSpace
+description: Position objects in front of the camera with CSS-like positioning.
+---
+
+::SceneControlsWrapper
+  ::AbstractionsScreenSpace
+  ::
+::
+
+`<ScreenSpace />` wraps its children in a `<TresGroup />` and positions them in front of the active camera at `:depth`.
+
+Additionally, the `top`, `bottom`, `left`, `right` props can be used to position them similarly to CSS `position: absolute` property when using a `PerspectiveCamera` or an `OrtographicCamera`.
+
+## Usage
+
+```vue{2,11,16}
+<script setup lang="ts">
+import { OrbitControls, ScreenSpace } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <ScreenSpace :depth="5">
+      <TresMesh>
+        <TresTorusGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </ScreenSpace>
+
+    <TresGridHelper :args="[10, 10]" />
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Prop     | Description                                                 | Default                                 |
+| :------- | :---------------------------------------------------------- | --------------------------------------- |
+| `depth`  | Distance from the camera                                    | `-1`                                    |
+| `top`    | Similar to CSS `top` property. Cannot be used with `bottom` | `0.5` (vertical center of the screen)   |
+| `bottom` | Similar to CSS `bottom` property. Cannot be used with `top` |                                         |
+| `left`   | Similar to CSS `left` property. Cannot be used with `right` | `0.5` (horizontal center of the screen) |
+| `right`  | Similar to CSS `right` property. Cannot be used with `left` |                                         |
diff --git a/apps/cientos-docs/content/2.api/2.controls/camera-controls.md b/apps/cientos-docs/content/2.api/2.controls/camera-controls.md
new file mode 100644
index 000000000..699e9ed36
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/2.controls/camera-controls.md
@@ -0,0 +1,124 @@
+---
+title: Camera Controls
+description: Is similar to OrbitControls yet supports smooth transitions and more features.
+---
+
+::SceneControlsWrapper
+  ::ControlsCameraControls
+  ::
+::
+
+[CameraControls](https://github.com/yomotsu/camera-controls) is a camera controller similar to [OrbitControls](/api/controls/orbit-controls) yet supports smooth transitions and more features.
+
+However, it is thirty party library for ThreeJS. So to use it you would need to install and import using [npm](https://www.npmjs.com/package/camera-controls).
+
+## Usage
+
+```vue{7}
+<script setup>
+import { CameraControls } from "@tresjs/cientos"
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <CameraControls />
+    <Box :scale="2">
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
+```
+
+::prose-warning
+Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
+::
+
+## Props
+
+Certainly! Here's the properties of the object in raw markdown table format:
+
+| Prop                      | Description                                                                                                                                                                               | Default                                                   |
+| :------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| **makeDefault**           | Whether to make this the default controls.                                                                                                                                                | `false`                                                   |
+| **camera**                | The camera to control.                                                                                                                                                                    | `undefined`                                               |
+| **domElement**            | The DOM element to listen to.                                                                                                                                                             | `undefined`                                               |
+| **minPolarAngle**         | Minimum vertical angle in radians.                                                                                                                                                        | `0`                                                       |
+| **maxPolarAngle**         | Maximum vertical angle in radians.                                                                                                                                                        | `Math.PI`                                                 |
+| **minAzimuthAngle**       | Minimum horizontal angle in radians.                                                                                                                                                      | `-Infinity`                                               |
+| **maxAzimuthAngle**       | Maximum horizontal angle in radians.                                                                                                                                                      | `Infinity`                                                |
+| **distance**              | Current distance.                                                                                                                                                                         | `camera.position.z`                                       |
+| **minDistance**           | Minimum distance for dolly. PerspectiveCamera only.                                                                                                                                       | `Number.EPSILON`                                          |
+| **maxDistance**           | Maximum distance for dolly. PerspectiveCamera only.                                                                                                                                       | `Infinity`                                                |
+| **infinityDolly**         | `true` to enable Infinity Dolly for wheel and pinch.                                                                                                                                      | `false`                                                   |
+| **minZoom**               | Minimum camera zoom.                                                                                                                                                                      | `0.01`                                                    |
+| **maxZoom**               | Maximum camera zoom.                                                                                                                                                                      | `Infinity`                                                |
+| **smoothTime**            | Approximate time in seconds to reach the target. A smaller value will reach the target faster.                                                                                            | `0.25`                                                    |
+| **draggingSmoothTime**    | The smoothTime while dragging.                                                                                                                                                            | `0.125`                                                   |
+| **maxSpeed**              | Max transition speed in units per second.                                                                                                                                                 | `Infinity`                                                |
+| **azimuthRotateSpeed**    | Speed of azimuth (horizontal) rotation.                                                                                                                                                   | `1.0`                                                     |
+| **polarRotateSpeed**      | Speed of polar (vertical) rotation.                                                                                                                                                       | `1.0`                                                     |
+| **dollySpeed**            | Speed of mouse-wheel dollying.                                                                                                                                                            | `1.0`                                                     |
+| **dollyDragInverted**     | `true` to invert direction when dollying or zooming via drag.                                                                                                                             | `false`                                                   |
+| **truckSpeed**            | Speed of drag for truck and pedestal.                                                                                                                                                     | `2.0`                                                     |
+| **dollyToCursor**         | `true` to enable Dolly-in to the mouse cursor coords.                                                                                                                                     | `false`                                                   |
+| **dragToOffset**          | Whether to drag to offset.                                                                                                                                                                | `false`                                                   |
+| **verticalDragToForward** | The same as `.screenSpacePanning` in three.js's OrbitControls.                                                                                                                            | `false`                                                   |
+| **boundaryFriction**      | Friction ratio of the boundary.                                                                                                                                                           | `0.0`                                                     |
+| **restThreshold**         | Controls how soon the `rest` event fires as the camera slows.                                                                                                                             | `0.01`                                                    |
+| **colliderMeshes**        | An array of Meshes to collide with the camera. Be aware colliderMeshes may decrease performance. The collision test uses 4 raycasters from the camera since the near plane has 4 corners. | `[]`                                                      |
+| **mouseButtons**          | Configuration of actions on mouse input.                                                                                                                                                  | See [`User input config`](#user-input-config) for details |
+| **touches**               | Configuration of actions on touch.                                                                                                                                                        | See [`User input config`](#user-input-config) for details |
+
+## User input config
+
+You can easily override the default user input config by defining `mouseButtons` and/or `touches` props that correspond to [`camera-controls` settings](https://github.com/yomotsu/camera-controls?#user-input-config). For ease of use, we're re-exporting the `CameraControls` class as `BaseCameraControls` which gives you access to the `ACTION` enum.
+
+```vue
+<script lang="ts" setup>
+import { BaseCameraControls, CameraControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  ...
+  <CameraControls
+    :mouse-buttons="{ left: BaseCameraControls.ACTION.DOLLY }"
+    :touches="{ one: BaseCameraControls.ACTION.TOUCH_TRUCK }"
+  />
+  ...
+</template>
+```
+
+### Mouse buttons
+
+| Button to assign        | Options                                                        | Default                                                         |
+| ----------------------- | -------------------------------------------------------------- | --------------------------------------------------------------- |
+| `mouseButtons.left`     | `ROTATE` \| `TRUCK` \| `OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `ROTATE`                                                        |
+| `mouseButtons.right`    | `ROTATE` \| `TRUCK` \| `OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `TRUCK`                                                         |
+| `mouseButtons.wheel` ¹  | `ROTATE` \| `TRUCK` \| `OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `DOLLY` for Perspective camera, `ZOOM` for Orthographic camera. |
+| `mouseButtons.middle` ² | `ROTATE` \| `TRUCK` \| `OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE` | `DOLLY`                                                         |
+
+1. Mouse wheel event for scroll "up/down", on mac "up/down/left/right".
+2. Mouse wheel "button" click event.
+
+### Touches
+
+| Fingers to assign | Options                                                                                                                                                                                                                                 | Default                                                                                |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `touches.one`     | `TOUCH_ROTATE` \| `TOUCH_TRUCK` \| `TOUCH_OFFSET` \| `DOLLY` \| `ZOOM` \| `NONE`                                                                                                                                                        | `TOUCH_ROTATE`                                                                         |
+| `touches.two`     | `TOUCH_DOLLY_TRUCK` \| `TOUCH_DOLLY_OFFSET` \| `TOUCH_DOLLY_ROTATE` \| `TOUCH_ZOOM_TRUCK` \| `TOUCH_ZOOM_OFFSET` \| `TOUCH_ZOOM_ROTATE` \| `TOUCH_DOLLY` \| `TOUCH_ZOOM` \| `TOUCH_ROTATE` \| `TOUCH_TRUCK` \| `TOUCH_OFFSET` \| `NONE` | `TOUCH_DOLLY_TRUCK` for Perspective camera, `TOUCH_ZOOM_TRUCK` for Othographic camera. |
+| `touches.three`   | `TOUCH_DOLLY_TRUCK` \| `TOUCH_DOLLY_OFFSET` \| `TOUCH_DOLLY_ROTATE` \| `TOUCH_ZOOM_TRUCK` \| `TOUCH_ZOOM_OFFSET` \| `TOUCH_ZOOM_ROTATE` \| `TOUCH_ROTATE` \| `TOUCH_TRUCK` \| `TOUCH_OFFSET` \| `NONE`                                  | `TOUCH_TRUCK`                                                                          |
+
+## Events
+
+```vue
+<CameraControls @change="onChange" @start="onStart" @end="onEnd" />
+```
+
+| Event      | Description                                   |
+| :--------- | :-------------------------------------------- |
+| **start**  | Dispatched when the control starts to change. |
+| **change** | Dispatched when the control changes.          |
+| **end**    | Dispatched when the control ends to change.   |
diff --git a/apps/cientos-docs/content/2.api/2.controls/index.md b/apps/cientos-docs/content/2.api/2.controls/index.md
new file mode 100644
index 000000000..0367f6ddd
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/2.controls/index.md
@@ -0,0 +1,7 @@
+---
+title: Controls
+description: All controls
+---
+
+::ApiList{listName="control-list"}
+::
diff --git a/apps/cientos-docs/content/2.api/2.controls/keyboard-controls.md b/apps/cientos-docs/content/2.api/2.controls/keyboard-controls.md
new file mode 100644
index 000000000..9d767690c
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/2.controls/keyboard-controls.md
@@ -0,0 +1,61 @@
+---
+title: Keyboard Controls
+description: WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards
+---
+
+::SceneControlsWrapper
+  ::ControlsKeyboardControls
+  ::
+::
+
+`<KeyboardControls />` is a simple keyboard controller for the camera. The camera's movements are bound to:
+
+* WASD on QWERTY keyboards or equivalent keys on non-QWERTY keyboards
+* Arrow keys
+
+::prose-note
+`KeyboardControls` uses `PointerLockControls` under the hood. You can use [PointerLockControls props and events](pointer-lock-controls#props).
+::
+
+## Usage
+
+```vue{3,10}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { KeyboardControls, Box } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <Box :position-y="0.5" />
+    <KeyboardControls />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
+```
+
+::prose-warning
+Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
+::
+
+## Props
+
+| Prop            | Description                          | Default |
+| :-------------- | :----------------------------------- | ------- |
+| **moveSpeed**   | Speed movement.                      | 0.2     |
+| **makeDefault** | If `true`, the controls will be set as the default controls for the scene.          | `true`     |
+| **camera**      | The camera to control.                                                              | `undefined` |
+| **domElement**  | The DOM element to listen to.                                                       | `undefined` |
+| **selector**    | Accept an id element as string. If set, the new element will be used as the trigger | `undefined` |
+
+## Events
+
+```vue
+<KeyboardControls @change="onChange" @is-lock="(state) => isActive(state)" />
+```
+
+| Event      | Description                                                      |
+| :--------- | :--------------------------------------------------------------- |
+| **isLock** | Return `true` if "lock", `false` if "unlock" events are triggered. |
+| **change** | Dispatched when the control changes.                             |
diff --git a/apps/cientos-docs/content/2.api/2.controls/map-controls.md b/apps/cientos-docs/content/2.api/2.controls/map-controls.md
new file mode 100644
index 000000000..b0d848ce3
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/2.controls/map-controls.md
@@ -0,0 +1,47 @@
+---
+title: Map Controls
+description: similar to OrbitControls but for map views
+---
+
+::SceneControlsWrapper
+  ::ControlsMapControls
+  ::
+::
+
+[MapControls](https://threejs.org/docs/index.html?q=controls#examples/en/controls/MapControls) similar to OrbitControls, this control is intended for transforming a camera over a map from bird's eye perspective, but uses a specific preset for mouse/touch interaction and disables screen space panning by default.
+
+## Usage
+
+```vue{7}
+<script setup>
+import { MapControls } from "@tresjs/cientos"
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <MapControls />
+    <Box :scale="2">
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
+```
+
+::prose-warning
+Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
+::
+
+## Props
+
+| Prop              | Description                                                                                                      | Default     |
+| :---------------- | :--------------------------------------------------------------------------------------------------------------- | ----------- |
+| **makeDefault**   | If `true`, the controls will be set as the default controls for the scene.                                       | `false`     |
+| **camera**        | The camera to control.                                                                                           | `undefined` |
+| **domElement**    | The dom element to listen to.                                                                                    | `undefined` |
+
+::prose-note
+All the Orbit-Controls props works here too.
+::
diff --git a/apps/cientos-docs/content/2.api/2.controls/orbit-controls.md b/apps/cientos-docs/content/2.api/2.controls/orbit-controls.md
new file mode 100644
index 000000000..1f6ae6b76
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/2.controls/orbit-controls.md
@@ -0,0 +1,76 @@
+---
+title: Orbit Controls
+description: Allows you to orbit around the scene
+---
+
+::SceneControlsWrapper
+  ::ControlsOrbitControls
+  ::
+::
+[OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.
+
+## Usage
+
+```vue{7}
+<script setup>
+import { OrbitControls } from "@tresjs/cientos"
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Box :scale="2">
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
+```
+
+::prose-warning
+Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
+::
+
+## Props
+
+| Prop                | Description                                                                                                                                                                      | Default                                                                          |
+| :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| **makeDefault**     | If `true`, the controls will be set as the default controls for the scene.                                                                                                       | `false`                                                                          |
+| **camera**          | The camera to control.                                                                                                                                                           | `undefined`                                                                      |
+| **domElement**      | The dom element to listen to.                                                                                                                                                    | `undefined`                                                                      |
+| **target**          | The target to orbit around.                                                                                                                                                      | `undefined`                                                                      |
+| **enableDamping**   | If `true`, the controls will use damping (inertia), which can be used to give a sense of weight to the controls.                                                                 | `true`                                                                          |
+| **dampingFactor**   | The damping inertia used if `.enableDamping` is set to true.                                                                                                                     | `0.05`                                                                           |
+| **autoRotate**      | Set to true to automatically rotate around the target.                                                                                                                           | `false`                                                                          |
+| **autoRotateSpeed** | How fast to rotate around the target if `.autoRotate` is true.                                                                                                                   | `2`                                                                              |
+| **enablePan**       | Whether to enable panning.                                                                                                                                                       | `true`                                                                           |
+| **keyPanSpeed**     | How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.                                                                                        | `7.0`                                                                            |
+| **keys**            | This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.                                                                     | `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }` |
+| **maxAzimuthAngle** | How far you can orbit horizontally, upper limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.   | `Infinity`                                                                       |
+| **minAzimuthAngle** | How far you can orbit horizontally, lower limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is - Infinity. | `-Infinity`                                                                      |
+| **maxPolarAngle**   | How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.                                                                            | `Math.PI`                                                                        |
+| **minPolarAngle**   | How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.                                                                                  | `0`                                                                              |
+| **minDistance**     | The minimum distance of the camera to the target. Default is 0.                                                                                                                  | `0`                                                                              |
+| **maxDistance**     | The maximum distance of the camera to the target. Default is Infinity.                                                                                                           | `Infinity`                                                                       |
+| **minZoom**         | The minimum field of view angle, in radians. Default is 0.                                                                                                                       | `0`                                                                              |
+| **maxZoom**         | The maximum field of view angle, in radians. ( OrthographicCamera only ). Default is Infinity.                                                                                   | `Infinity`                                                                       |
+| **touches**         | This object contains references to the touch actions used by the controls.                                                                                                       | `{ ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }`                                    |
+| **mouseButtons**    | This object contains references to the mouse actions used by the controls. LEFT: Rotate around the target, MIDDLE: Zoom the camera, RIGHT: Pan the camera.                       | `{ LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }`                  |
+| **enableZoom**      | Whether to enable zooming.                                                                                                                                                       | `true`                                                                           |
+| **zoomSpeed**       | How fast to zoom in and out. Default is 1.                                                                                                                                       | `1`                                                                              |
+| **enableRotate**    | Whether to enable rotating.                                                                                                                                                      | `true`                                                                           |
+| **rotateSpeed**     | How fast to rotate around the target. Default is 1.                                                                                                                              | `1`                                                                              |
+
+## Events
+
+```vue
+<OrbitControls @change="onChange" @start="onStart" @end="onEnd" />
+```
+
+| Event      | Description                                   |
+| :--------- | :-------------------------------------------- |
+| **start**  | Dispatched when the control starts to change. |
+| **change** | Dispatched when the control changes.          |
+| **end**    | Dispatched when the control ends to change.   |
diff --git a/apps/cientos-docs/content/2.api/2.controls/pointer-lock-controls.md b/apps/cientos-docs/content/2.api/2.controls/pointer-lock-controls.md
new file mode 100644
index 000000000..3f50f5767
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/2.controls/pointer-lock-controls.md
@@ -0,0 +1,58 @@
+---
+title: PointerLock Controls
+description: Allows you to capture the mouse movement and simulate a first person camera
+---
+
+::SceneControlsWrapper
+  ::ControlsPointerLockControls
+  ::
+::
+
+[PointerLockControls](https://threejs.org/docs/index.html?q=pointe#examples/en/controls/PointerLockControls) is a camera controller that allows you to capture the mouse movement and simulate a first person camera. It is a perfect choice for first person 3D games.
+
+::prose-warning
+This control uses the <span style="background-color:#222;padding:0.25rem;border-radius:4px;"><a href="/api/controls/orbit-controls" style="color:#f7f7f7;text-decoration:none">[`Pointer Lock API`](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)</a></span>, the same rules are applied, for example, you need to interact with the browser to "lock" or start the event.
+In addition, you need to wait 1 second between canceling and re-starting the event
+::
+
+## Usage
+
+```vue{3,10}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { PointerLockControls, Box } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <Box :position-y="0.5" />
+    <PointerLockControls />
+    <TresGridHelper />
+  </TresCanvas>
+</template>
+```
+
+::prose-warning
+Is really important that the Perspective camera is set first in the canvas. Otherwise might break.
+::
+
+## Props
+
+| Prop            | Description                                                                               | Default     |
+| :-------------- | :---------------------------------------------------------------------------------------- | ----------- |
+| **makeDefault** | If `true`, the controls will be set as the default controls for the scene.                | `false`     |
+| **camera**      | The camera to control.                                                                    | `undefined` |
+| **domElement**  | The dom element to listen to.                                                             | `undefined` |
+| **selector**    | Accept an id element as string, if it is set, the new element will be used as the trigger | `undefined` |
+
+## Events
+
+```vue
+<PointerLockControls @change="onChange" @is-lock="(state) => isActive(state)" />
+```
+
+| Event      | Description                                                      |
+| :--------- | :--------------------------------------------------------------- |
+| **isLock** | Return `true` if "lock", `false` if "unlock" events are trigger. |
+| **change** | Dispatched when the control changes.                             |
diff --git a/apps/cientos-docs/content/2.api/2.controls/transform-controls.md b/apps/cientos-docs/content/2.api/2.controls/transform-controls.md
new file mode 100644
index 000000000..9e8e6bfc7
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/2.controls/transform-controls.md
@@ -0,0 +1,106 @@
+---
+title: Transform Controls
+description: Set of three gizmos that can be used to translate, rotate and scale objects
+---
+
+The [Transform Controls](https://threejs.org/docs/#examples/en/controls/TransformControls) are a set of three gizmos that can be used to translate, rotate and scale objects in the scene. It adapts a similar interaction model of DCC tools like Blender
+
+::SceneControlsWrapper
+  ::ControlsTransformControls
+  ::
+::
+
+## Usage
+
+To use the Transform Controls, simply add the `TransformControls` component to your scene. You can pass the `templateRef`of the instance you want to control as a prop.
+
+```vue{7,8}
+<script setup>
+const boxRef = shallowRef()
+</script>
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
+    <OrbitControls make-default />
+    <TransformControls :object="boxRef" />
+    <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#4F4F4F" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+::prose-warning
+If you are using other controls <span style="background-color:#222;padding:0.25rem;border-radius:4px;"><a href="/api/controls/orbit-controls" style="color:#f7f7f7;text-decoration:none">OrbitControls</a></span> they will interfere with each other when dragging. To avoid this, you can set the `makeDefault` prop to `true` on the **OrbitControls**.
+::
+
+## Modes
+
+The Transform Controls can be used in three different modes:
+
+### Translate
+
+![Translate](/cientos/transform-controls-translate.png)
+
+The default mode allows you to move the object around the scene.
+
+```vue
+<TransformControls mode="translate" :object="sphereRef" />
+```
+
+### Rotate
+
+![Rotate](/cientos/transform-controls-rotate.png)
+
+The rotate mode allows you to rotate the object around the scene.
+
+```vue
+<TransformControls mode="rotate" :object="boxRef" />
+```
+
+### Scale
+
+![Scale](/cientos/transform-controls-scale.png)
+
+The scale mode allows you to scale the object around the scene.
+
+```vue
+<TransformControls mode="scale" :object="sphereRef" />
+```
+
+## Props
+
+| Prop                | Description                                                                                   | Default     |
+| :------------------ | :-------------------------------------------------------------------------------------------- | ----------- |
+| **object**         | The instance [Object3D](https://threejs.org/docs/index.html#api/en/core/Object3D) to control. | `null`      |
+| **mode**            | The mode of the controls. Can be `translate`, `rotate` or `scale`.                            | `translate` |
+| **enabled**         | If `true`, the controls will be enabled.                                                      | `true`      |
+| **axis**            | The axis to use for the controls. Can be `X`, `Y`, `Z`, `XY`, `YZ`, `XZ`, `XYZ`.              | `XYZ`       |
+| **space**           | The space to use for the controls. Can be `local` or `world`.                                 | `local`     |
+| **size**            | The size of the controls.                                                                     | `1`         |
+| **translationSnap** | The distance to snap to when translating. (World units)                                       | `null`      |
+| **rotationSnap**    | The angle to snap to when rotating. (Radians)                                                 | `null`      |
+| **scaleSnap**       | The scale to snap to when scaling.                                                            | `null`      |
+| **showX**           | If `true`, the X-axis helper will be shown.                                                   | `true`      |
+| **showY**           | If `true`, the Y-axis helper will be shown.                                                   | `true`      |
+| **showZ**           | If `true`, the Z-axis helper will be shown.                                                   | `true`      |
+
+## Events
+
+| Event            | Description                                                    |
+| :--------------- | :------------------------------------------------------------- |
+| **dragging**     | Fired when the user starts or stops dragging the controls.     |
+| **change**       | Fired when the user changes the controls.                      |
+| **mouseDown**    | Fired when the user clicks on the controls.                    |
+| **mouseUp**      | Fired when the user releases the mouse button on the controls. |
+| **objectChange** | Fired when the user changes the object.                        |
+
+<style scoped>
+img {
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    object-position: top;
+    border-radius: 8px;
+}
+</style>
diff --git a/apps/cientos-docs/content/2.api/3.loaders/1.use-gltf.md b/apps/cientos-docs/content/2.api/3.loaders/1.use-gltf.md
new file mode 100644
index 000000000..d3f45a473
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/1.use-gltf.md
@@ -0,0 +1,92 @@
+---
+title: useGLTF
+description: A composable to load GLTF models in TresJS scenes.
+---
+
+::SceneWrapper
+  ::LoadersGltf
+  ::
+::
+
+A composable that allows you to easily load glb/glTF models into your **TresJS** scene.
+
+## Usage
+
+::code-group
+```vue{2,5} [TheModel.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const path = './blender-cube.glb'
+const { state, nodes, materials } = useGLTF(path)
+</script>
+
+<template>
+  <primitive v-if="state" :object="state?.scene" />
+</template>
+```
+
+```vue [app.vue]
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#F78B3D">
+    <TresPerspectiveCamera :position="[3, 2, 5]" />
+    <OrbitControls />
+    <TheModel />
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+::
+
+An advantage of using `useGLTF` is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
+
+```ts
+import { useGLTF } from '@tresjs/cientos'
+
+const { state, nodes, materials } = useGLTF('/models/AkuAku.gltf', { draco: true })
+```
+
+## Return Values
+
+| Name         | Type      | Description                                    |
+| :----------- | --------- | ---------------------------------------------- |
+| **state**    | `GLTF`    | The loaded GLTF model state                    |
+| **nodes**    | `object`  | Computed object containing all nodes in the scene |
+| **materials**| `object`  | Computed object containing all materials in the scene |
+| **isLoading**| `boolean` | Whether the model is currently loading         |
+| **progress** | `number`  | The progress of the model loading         |
+| **load**     | `() => Promise<void>` | Function to reload the model |
+
+## Options
+
+| Name            | Type       | Default     | Description                          |
+| :-------------- | ---------- | ----------- | ------------------------------------ |
+| **draco**       | `boolean`  | `false`     | Whether to enable Draco compression. |
+| **decoderPath** | `string`   | `'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'` | Path to the Draco decoder.     |
+| **traverse**    | `Function` |             | A traverse function applied to the scene upon loading the model. |
+
+## Accessing Nodes and Materials
+
+The composable provides computed properties to easily access nodes and materials in your scene:
+
+```ts
+const { nodes, materials } = useGLTF('/model.glb')
+
+// Access a specific node
+const mesh = nodes.value.MeshName
+
+// Access a specific material
+const material = materials.value.MaterialName
+```
+
+This makes it easier to manipulate specific parts of your model or apply materials programmatically.
diff --git a/apps/cientos-docs/content/2.api/3.loaders/2.gltf-model.md b/apps/cientos-docs/content/2.api/3.loaders/2.gltf-model.md
new file mode 100644
index 000000000..4042234df
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/2.gltf-model.md
@@ -0,0 +1,83 @@
+---
+title: GLTFModel
+description: A component based on useGLTF to load models in TresJS scenes.
+---
+
+::SceneWrapper
+  ::LoadersGltf
+  ::
+::
+
+The `GLTFModel` component is a wrapper around [`useGLTF`](./use-gltf.md) composable and accepts the same options as props.
+
+## Usage
+
+::code-group
+```vue{2,8} [TheModel.vue]
+<script setup lang="ts">
+import { GLTFModel } from '@tresjs/cientos'
+
+const path = './blender-cube.glb'
+</script>
+
+<template>
+  <GLTFModel :path="path" />
+</template>
+```
+
+```vue [app.vue]
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#F78B3D">
+    <TresPerspectiveCamera :position="[3, 2, 5]" />
+    <OrbitControls />
+    <TheModel />
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+::
+
+## Model reference
+
+You can access the model reference by passing a `ref` to the `model` prop and then using to get the object.
+
+```vue
+<script setup lang="ts">
+import type { TresObject } from 'tresjs'
+import { GLTFModel } from '@tresjs/cientos'
+
+const modelRef = shallowRef<TresObject>()
+
+watch(modelRef, (model) => {
+  // Do something with the model
+  model.position.set(0, 0, 0)
+})
+</script>
+
+<template>
+  <GLTFModel
+    ref="modelRef"
+    path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb"
+  />
+</template>
+```
+
+## Props
+
+| Prop          | Description                                                                                                           | Default     |
+| :------------ | :-------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `path`        | Path to the model file.                                                                                               | `undefined` |
+| `draco`       | Enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. | `false`     |
+| `decoderPath` | Path to a local Draco decoder.                                                                                        | `undefined` |
+| `castShadow`  | Apply `cast-shadow` to all meshes inside your model.                                                                  | `false`     |
+| `receiveShadow` | Apply `receive-shadow` to all meshes inside your model.                                                             | `false`     |
diff --git a/apps/cientos-docs/content/2.api/3.loaders/3.use-fbx.md b/apps/cientos-docs/content/2.api/3.loaders/3.use-fbx.md
new file mode 100644
index 000000000..f0b6f3932
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/3.use-fbx.md
@@ -0,0 +1,82 @@
+---
+title: useFBX
+description: A composable to load FBX models in TresJS scenes.
+---
+
+::SceneWrapper
+  ::LoadersFbx
+  ::
+::
+
+A composable that allows you to easily load FBX models into your **TresJS** scene.
+
+## Usage
+
+::code-group
+```vue{2,6} [TheModel.vue]
+<script setup lang="ts">
+import { useFBX } from '@tresjs/cientos'
+
+const path = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'
+const { state, nodes, materials } = useFBX(path)
+</script>
+
+<template>
+  <primitive v-if="state" :object="state" :scale="0.025" />
+</template>
+```
+
+```vue [app.vue]
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#1F90FF">
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <TheModel />
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+::
+
+## Return Values
+
+| Name         | Type      | Description                                    |
+| :----------- | --------- | ---------------------------------------------- |
+| **state**    | `Group`   | The loaded FBX model state                     |
+| **nodes**    | `object`  | Computed object containing all nodes in the scene |
+| **materials**| `object`  | Computed object containing all materials in the scene |
+| **isLoading**| `boolean` | Whether the model is currently loading         |
+| **execute**  | `() => Promise<void>` | Function to reload the model |
+
+## Options
+
+| Name            | Type       | Description                                |
+| :-------------- | ---------- | ------------------------------------------ |
+| **traverse**    | `Function` | A traverse function applied to the scene upon loading the model. |
+
+## Accessing Nodes and Materials
+
+The composable provides computed properties to easily access nodes and materials in your scene:
+
+```ts
+const { nodes, materials } = useFBX('/model.fbx')
+
+// Access a specific node
+const mesh = nodes.value.MeshName
+
+// Access a specific material
+const material = materials.value.MaterialName
+```
+
+This makes it easier to manipulate specific parts of your model or apply materials programmatically.
diff --git a/apps/cientos-docs/content/2.api/3.loaders/4.fbx-model.md b/apps/cientos-docs/content/2.api/3.loaders/4.fbx-model.md
new file mode 100644
index 000000000..a167ab286
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/4.fbx-model.md
@@ -0,0 +1,81 @@
+---
+title: FBXModel
+description: A component based on useFBX to load models in TresJS scenes.
+---
+
+::SceneWrapper
+  ::LoadersFbx
+  ::
+::
+
+The `FBXModel` component is a wrapper around [`useFBX`](./use-fbx.md) composable and accepts the same options as props.
+
+## Usage
+
+::code-group
+```vue{2,8} [TheModel.vue]
+<script setup lang="ts">
+import { FBXModel } from '@tresjs/cientos'
+
+const path = './Jeep_done.fbx'
+</script>
+
+<template>
+  <FBXModel :path="path" />
+</template>
+```
+
+```vue [app.vue]
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#F78B3D">
+    <TresPerspectiveCamera :position="[3, 2, 5]" />
+    <OrbitControls />
+    <TheModel />
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+::
+
+## Model reference
+
+You can access the model reference by passing a `ref` to the `FBXModel` component and then using it to get the object.
+
+```vue
+<script setup lang="ts">
+import type { TresObject } from '@tresjs/core'
+import { FBXModel } from '@tresjs/cientos'
+
+const modelRef = shallowRef<TresObject>()
+
+watch(modelRef, (model) => {
+  // Do something with the model
+  model.position.set(0, 0, 0)
+})
+</script>
+
+<template>
+  <FBXModel
+    ref="modelRef"
+    path="https://raw.githubusercontent.com/Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx"
+  />
+</template>
+```
+
+## Props
+
+| Prop           | Description                                                | Default     |
+| :------------- | :--------------------------------------------------------- | ----------- |
+| `path`         | Path to the model file.                                    | `undefined` |
+| `castShadow`   | Apply `cast-shadow` to all meshes inside your model.      | `false`     |
+| `receiveShadow`| Apply `receive-shadow` to all meshes inside your model.   | `false`     |
diff --git a/apps/cientos-docs/content/2.api/3.loaders/5.use-texture.md b/apps/cientos-docs/content/2.api/3.loaders/5.use-texture.md
new file mode 100644
index 000000000..445362da7
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/5.use-texture.md
@@ -0,0 +1,77 @@
+---
+title: useTexture
+description: A composable to load textures in TresJS scenes.
+---
+
+::SceneWrapper
+  ::LoadersUseTexture
+  ::
+::
+
+A composable that allows you to load textures using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader) into your **TresJS** scene.
+
+## Usage
+
+```vue{2,4,10}
+<script setup lang="ts">
+import { useTexture } from '@tresjs/cientos'
+
+const { state: texture, isLoading, error } = useTexture(path)
+</script>
+
+<template>
+  <TresMesh>
+    <TresSphereGeometry />
+    <TresMeshStandardMaterial :map="texture" />
+  </TresMesh>
+</template>
+```
+
+## Options
+
+| Name            | Type      | Default     | Description                          |
+| :-------------- | --------- | ----------- | ------------------------------------ |
+| **path**       | `string` | `undefined` | The path to the texture. |
+| **manager**    | `THREE.LoadingManager` | `undefined` | The loading manager to use for the texture. |
+
+## Return Values
+
+| Name | Type | Description |
+| :--- | :--- | :--- |
+| `state` | `Texture \| null` | The loaded texture |
+| `isLoading` | `boolean` | Whether the texture is loading |
+| `error` | `string \| null` | Error message if loading failed |
+
+## Component Usage
+
+You can also use the `UseTexture` component directly in your template:
+
+```vue{2,16-21,26}
+<script setup lang="ts">
+import { UseTexture } from '@tresjs/cientos'
+
+const path = 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Color.jpg'
+
+const handleLoaded = (texture: Texture) => {
+  console.log('Loaded texture', texture)
+}
+
+const handleError = (error: unknown) => {
+  console.error('error', error)
+}
+</script>
+
+<template>
+  <UseTexture
+    v-slot="{ state: texture }"
+    :path="path"
+    @loaded="handleLoaded"
+    @error="handleError"
+  >
+    <TresMesh>
+      <TresSphereGeometry />
+      <TresMeshStandardMaterial :map="texture" />
+    </TresMesh>
+  </UseTexture>
+</template>
+```
diff --git a/apps/cientos-docs/content/2.api/3.loaders/6.use-textures.md b/apps/cientos-docs/content/2.api/3.loaders/6.use-textures.md
new file mode 100644
index 000000000..2abcb2df8
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/6.use-textures.md
@@ -0,0 +1,140 @@
+---
+title: useTextures
+description: A composable to load multiple textures efficiently in TresJS scenes.
+---
+
+::SceneWrapper
+  ::LoadersUseTextures
+  ::
+::
+
+A composable that allows you to load multiple textures at once using the [THREE.js texture loader](https://threejs.org/docs/#api/en/loaders/TextureLoader) into your **TresJS** scene.
+
+## Usage
+
+```vue{2,12,19-21}
+<script setup lang="ts">
+import { useTextures } from '@tresjs/cientos'
+
+// Define an array of texture paths
+const texturePaths = [
+  '/textures/color.jpg',
+  '/textures/normal.jpg',
+  '/textures/roughness.jpg'
+]
+
+// Load all textures at once
+const { textures, isLoading, error } = useTextures(texturePaths)
+</script>
+
+<template>
+  <TresMesh>
+    <TresSphereGeometry />
+    <TresMeshStandardMaterial
+      :map="textures[0]"
+      :normal-map="textures[1]"
+      :roughness-map="textures[2]"
+    />
+  </TresMesh>
+</template>
+```
+
+## PBR Textures Example
+
+Here's a more advanced example showing how to load and apply PBR (Physically Based Rendering) textures to a material:
+
+```vue [PBRTextures.vue]
+<script setup lang="ts">
+import { TresCanvas, vLightHelper } from '@tresjs/core'
+import { Environment, OrbitControls, useGLTF, useTextures } from '@tresjs/cientos'
+import { MeshStandardMaterial } from 'three'
+
+// Load the 3D model
+const { state: model } = useGLTF('/blender-cube-draco.glb', { draco: true })
+const cube = computed(() => model.value?.nodes?.BlenderCube)
+const material = computed(() => model.value?.materials?.Material)
+
+// Define texture paths
+const texturePaths = [
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Color.jpg',
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_NormalGL.jpg',
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Roughness.jpg',
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Metalness.jpg',
+  '/textures/Metal053C_4K-JPG/Metal053C_4K-JPG_Displacement.jpg'
+]
+
+// Load all PBR textures at once
+const { textures, isLoading, error } = useTextures(texturePaths)
+
+// Apply textures to material when loaded
+watch([material, textures], ([modelMaterial, textures]) => {
+  if (modelMaterial && textures && textures.length === texturePaths.length) {
+    // Cast to MeshStandardMaterial to access PBR properties
+    const pbrMaterial = modelMaterial as MeshStandardMaterial
+
+    // Apply textures
+    pbrMaterial.map = textures[0]
+    pbrMaterial.normalMap = textures[1]
+    pbrMaterial.roughnessMap = textures[2]
+    pbrMaterial.metalnessMap = textures[3]
+    pbrMaterial.displacementMap = textures[4]
+
+    // Set material properties
+    pbrMaterial.displacementScale = 0
+    pbrMaterial.metalness = 0.8
+    pbrMaterial.roughness = 0.2
+  }
+})
+
+// Handle loading state and errors
+watch(isLoading, (_loading) => {
+  // Handle loading state
+})
+
+watch(error, (errs) => {
+  if (errs) {
+    console.error('Error loading textures:', errs)
+  }
+})
+</script>
+
+<template>
+  <TresCanvas clear-color="#4f4f4f">
+    <Suspense>
+      <Environment preset="studio" background :blur="1" />
+    </Suspense>
+    <TresPerspectiveCamera :position="[8, 8, 8]" />
+    <OrbitControls />
+    <TresGridHelper />
+    <TresAmbientLight :intensity="2" />
+    <TresDirectionalLight v-light-helper :position="[5, 5, 5]" :intensity="0.5" color="#ff0000" />
+    <TresDirectionalLight v-light-helper :position="[-5, 2, 2]" :intensity="0.5" color="#0000ff" />
+    <TresGroup position-y="2">
+      <primitive v-if="cube" :object="cube" />
+    </TresGroup>
+  </TresCanvas>
+</template>
+```
+
+## API
+
+### Parameters
+
+| Name            | Type      | Default     | Description                          |
+| :-------------- | --------- | ----------- | ------------------------------------ |
+| **paths**       | `string[]` | `undefined` | Array of paths to the textures. |
+
+### Returns
+
+| Name            | Type      | Description                          |
+| :-------------- | --------- | ------------------------------------ |
+| **textures**    | `Texture[]` | Array of loaded textures. |
+| **isLoading**   | `boolean` | Whether any textures are still loading. |
+| **error**       | `Error[] \| null` | Array of errors if any occurred during loading. |
+
+## Benefits
+
+- **Simplified API**: Load multiple textures with a single function call
+- **Consolidated loading state**: Track loading state for all textures at once
+- **Unified error handling**: Collect and report errors from all texture loads
+- **Type safety**: Proper TypeScript typing throughout the implementation
diff --git a/apps/cientos-docs/content/2.api/3.loaders/7.use-svg.md b/apps/cientos-docs/content/2.api/3.loaders/7.use-svg.md
new file mode 100644
index 000000000..87c84de54
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/7.use-svg.md
@@ -0,0 +1,376 @@
+---
+title: useSVG
+description: A composable to load and render SVG files as 3D geometry in TresJS scenes.
+---
+
+::SceneWrapper
+  ::LoadersUseSVG
+  ::
+::
+
+Load and display SVG elements in your **TresJS** scene. This guide covers both the `useSVG` composable for advanced use cases and the `SVG` component for simple declarative rendering.
+
+## useSVG Composable
+
+The `useSVG` composable provides direct access to processed SVG layers, giving you full control over the resulting geometries and materials.
+
+### Usage
+
+::code-group
+```vue{2,5-8} [TheModel.vue]
+<script setup lang="ts">
+import { useSVG } from '@tresjs/cientos'
+
+const svgPath = './logo.svg'
+const { state, layers, isLoading, dispose } = useSVG(svgPath, {
+  skipFills: false,
+  fillMaterial: { transparent: true, opacity: 0.8 }
+})
+</script>
+
+<template>
+  <TresGroup v-if="!isLoading">
+    <TresMesh
+      v-for="(layer, index) in layers"
+      :key="`layer-${index}`"
+      :geometry="layer.geometry"
+      :render-order="index"
+    >
+      <TresMeshBasicMaterial v-bind="layer.material" />
+    </TresMesh>
+  </TresGroup>
+</template>
+```
+
+```vue [app.vue]
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera :position="[0, 2, 10]" />
+    <OrbitControls />
+    <TheModel />
+    <TresAmbientLight />
+    <TresDirectionalLight />
+  </TresCanvas>
+</template>
+```
+::
+
+The `useSVG` composable provides direct access to processed SVG layers, giving you full control over how they're rendered. This is particularly useful when you need to:
+
+- Manually control layer rendering
+- Apply custom animations to individual layers
+- Access geometry data programmatically
+- Implement complex material logic
+
+### SVG Data Sources
+
+The composable accepts both file paths and inline SVG strings:
+
+```ts
+import { useSVG } from '@tresjs/cientos'
+
+// From file
+const { layers } = useSVG('/path/to/file.svg')
+
+// Inline SVG string
+const svgString = `<svg viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="40" fill="red" />
+</svg>`
+const { layers } = useSVG(svgString)
+```
+
+### Return Values
+
+| Name         | Type          | Description                                    |
+| :----------- | ------------- | ---------------------------------------------- |
+| **state**    | `SVGResult`   | The loaded SVG state from SVGLoader           |
+| **layers**   | `SVGLayer[]`  | Computed array of processed geometries and materials |
+| **isLoading**| `boolean`     | Whether the SVG is currently loading          |
+| **dispose**  | `() => void`  | Function to dispose of all geometries         |
+
+### Options
+
+| Name              | Type                                      | Default       | Description                          |
+| :---------------- | ----------------------------------------- | ------------- | ------------------------------------ |
+| **skipStrokes**   | `boolean`                                | `false`       | Whether to skip rendering strokes    |
+| **skipFills**     | `boolean`                                | `false`       | Whether to skip rendering fills      |
+| **fillMaterial**  | `MeshBasicMaterialParameters`            | `{}`          | Material properties for fill layers |
+| **strokeMaterial**| `MeshBasicMaterialParameters`            | `{}`          | Material properties for stroke layers |
+| **depth**         | `'renderOrder' \| 'flat' \| 'offsetZ' \| number` | `'renderOrder'` | How layers should be rendered in 3D space |
+
+### Working with Layers
+
+The `layers` computed property returns an array of processed SVG elements, each containing:
+
+```ts
+interface SVGLayer {
+  geometry: BufferGeometry // Three.js geometry for the layer
+  material: MeshBasicMaterialParameters // Material properties
+  isStroke: boolean // Whether this layer is a stroke or fill
+}
+```
+
+#### Accessing Individual Layers
+
+```vue{2,4}
+<script setup lang="ts">
+import { useSVG } from '@tresjs/cientos'
+
+const { layers } = useSVG('/complex-icon.svg')
+
+// Apply different materials based on layer type
+const getFillColor = (layer: SVGLayer, index: number) => {
+  return layer.isStroke ? '#000000' : `hsl(${index * 30}, 70%, 50%)`
+}
+</script>
+
+<template>
+  <TresGroup>
+    <TresMesh
+      v-for="(layer, index) in layers"
+      :key="index"
+      :geometry="layer.geometry"
+    >
+      <TresMeshBasicMaterial
+        v-bind="layer.material"
+        :color="getFillColor(layer, index)"
+      />
+    </TresMesh>
+  </TresGroup>
+</template>
+```
+
+### Depth Handling
+
+The `depth` option controls how SVG layers are rendered in 3D space. It accepts the following values:
+
+#### `'renderOrder'` (Default)
+
+**Use case: Lone SVGs or applications that don't rely on stacked SVGs**
+
+This is the default `depth` option.
+
+This value sets the materials' `depthWrite` to `false` and increments the mesh layers [`renderOrder`](https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder). This makes the SVG layers render dependably regardless of perspective.
+
+**Disadvantage**: Scene objects may render out of order.
+
+SVG layers with higher [`renderOrder`](https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder) will be rendered after (i.e., sometimes "on top of") other objects in the scene graph with a lower [`renderOrder`](https://threejs.org/docs/?q=mesh#api/en/core/Object3D.renderOrder). Depending on their settings, those other objects may render behind the SVG, even if they are closer to the camera.
+
+```ts
+const { layers } = useSVG('/icon.svg', { depth: 'renderOrder' })
+```
+
+#### flat
+
+**Use case: simple SVGs**
+
+This option sets the materials [`depthWrite`](https://threejs.org/docs/?q=mesh#api/en/materials/Material.depthWrite) to `false`.
+
+**Disadvantage**: SVG layers may render out of order.
+
+Overlapping layers in an SVG may be drawn out of order, depending on viewing perspective.
+
+```ts
+const { layers } = useSVG('/icon.svg', { depth: 'flat' })
+```
+
+#### offsetZ
+
+**Use case: unscaled SVGs seen from the front**
+
+When this value is passed, the result is a 3D "stack" of mesh layers. A small space is added between each mesh layer in the "stack".
+
+**Disadvantage**: "Bottom" of the "stack" is visible; layers may z-fight.
+
+When seen from behind, the "bottom" of the mesh layer "stack" is visible. The space between the layers may be noticeable depending on viewing perspective and scale. The layers may [z-fight](https://en.wikipedia.org/wiki/Z-fighting), particularly if the SVG is scaled down.
+
+```ts
+const { layers } = useSVG('/icon.svg', { depth: 'offsetZ' })
+```
+
+#### `number`
+
+**Use case: SVGs seen from the front**
+
+This is the same as `'offsetZ'` but allows you to specify how much space is added between each layer, in order to eliminate [z-fighting](https://en.wikipedia.org/wiki/Z-fighting). For most use cases, this should be a value greater than 0.025 and less than 1.
+
+**Disadvantage**: "Bottom" of the "stack" is visible.
+
+```ts
+const { layers } = useSVG('/icon.svg', { depth: 0.1 })
+```
+
+### Memory Management
+
+Always dispose of geometries when the component unmounts:
+
+```vue
+<script setup lang="ts">
+import { useSVG } from '@tresjs/cientos'
+import { onUnmounted } from 'vue'
+
+const { dispose } = useSVG('/icon.svg')
+
+onUnmounted(() => {
+  dispose()
+})
+</script>
+```
+
+### Advanced Usage
+
+#### Conditional Layer Rendering
+
+```vue
+<script setup lang="ts">
+import { useSVG } from '@tresjs/cientos'
+import { computed } from 'vue'
+
+const showDetails = ref(true)
+const { layers } = useSVG('/detailed-icon.svg')
+
+const visibleLayers = computed(() =>
+  showDetails.value
+    ? layers.value
+    : layers.value.filter(layer => !layer.isStroke)
+)
+</script>
+
+<template>
+  <TresGroup>
+    <TresMesh
+      v-for="(layer, index) in visibleLayers"
+      :key="index"
+      :geometry="layer.geometry"
+    >
+      <TresMeshBasicMaterial v-bind="layer.material" />
+    </TresMesh>
+  </TresGroup>
+</template>
+```
+
+#### Material Customization per Layer
+
+```vue
+<script setup lang="ts">
+import { useSVG } from '@tresjs/cientos'
+
+const { layers } = useSVG('/logo.svg', {
+  fillMaterial: {
+    transparent: true,
+    opacity: 0.9
+  },
+  strokeMaterial: {
+    transparent: true,
+    opacity: 1.0,
+    color: '#000000'
+  }
+})
+</script>
+
+<template>
+  <TresGroup>
+    <TresMesh
+      v-for="(layer, index) in layers"
+      :key="index"
+      :geometry="layer.geometry"
+    >
+      <TresMeshBasicMaterial
+        v-bind="layer.material"
+        :wireframe="layer.isStroke"
+      />
+    </TresMesh>
+  </TresGroup>
+</template>
+```
+
+## UseSVG Component
+
+For simple, declarative SVG rendering without the need for programmatic control, you can use the `UseSVG` component:
+
+```vue
+<script setup lang="ts">
+import { UseSVG } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresGroup :scale="0.01" :position="[-2.1, 1, 0]">
+    <UseSVG
+      src="/path/to/logo.svg"
+      :skip-fills="false"
+      :fill-material="{ transparent: true,
+                        opacity: 0.8 }"
+      depth="renderOrder"
+    />
+  </TresGroup>
+</template>
+```
+
+### Props
+
+| Prop                | Type                                             | Description                                                        | Default       |
+| :------------------ | -------------------------------------------------| :----------------------------------------------------------------- | ------------- |
+| **src**             | `string`                                         | Either a path to an SVG *or* an SVG string                         |               |
+| **skipStrokes**     | `boolean`                                        | If `true`, the SVG strokes will not be rendered.                   | `false`       |
+| **skipFills**       | `boolean`                                        | If `true`, the SVG fills will not be rendered.                     | `false`       |
+| **strokeMaterial**  | `MeshBasicMaterialParameters`                    | Props to assign to the stroke materials of the resulting meshes.   | `undefined`   |
+| **fillMaterial**    | `MeshBasicMaterialParameters`                    | Props to assign to the fill materials of the resulting meshes.     | `undefined`   |
+| **strokeMeshProps** | `TresOptions`                                    | Props to assign to the resulting stroke meshes.                    | `undefined`   |
+| **fillMeshProps**   | `TresOptions`                                    | Props to assign to the resulting fill meshes.                      | `undefined`   |
+| **depth**           | `'renderOrder' \| 'flat' \| 'offsetZ' \| number` | Specify how SVG layers are to be rendered. ([See "Depth"](#depth-handling)) | `renderOrder` |
+
+## Troubleshooting
+
+::alert{type="warning"}
+This is not a general-purpose SVG renderer. Many SVG features are unsupported.
+::
+
+Here are some things to try if you run into problems:
+
+### Error: "XML Parsing Error: unclosed token"
+
+* In the SVG source, convert hex colors to rgb, e.g., convert `#ff0000` to `rgb(255, 0, 0)`.
+
+### Parts of the SVG render in the wrong order or disappear, depending on viewing angle
+
+* In your `useSVG` options, [change the `depth` option](#depth-handling).
+* In the SVG source, use `fill="none"` rather than `fill-opacity="0"`.
+
+### Parts of the SVG ["z-fight"](https://en.wikipedia.org/wiki/Z-fighting)
+
+* In your `useSVG` options, [change the `depth` option](#depth-handling).
+* Increase the distance between the SVG and other on-screen elements.
+
+### The SVG is not visible
+
+* If importing an SVG, make sure the path is correct – check the console for loading errors.
+* Try scaling the SVG down, e.g., wrap it in a `TresGroup` with `:scale="0.01"`.
+* Try moving the SVG up (+y), e.g., `:position="[0,2,0]"`.
+* Check that `layers.length > 0` before rendering.
+
+### Performance issues with many layers
+
+* Use the `dispose()` function when components unmount to clean up geometries.
+* Consider using `skipStrokes` or `skipFills` to reduce the number of rendered layers.
+* For complex SVGs with many layers, consider simplifying the SVG source.
+
+## When to Use `useSVG` vs `SVG` Component
+
+**Use `useSVG` when you need:**
+- Direct access to individual SVG layers
+- Custom rendering logic
+- Layer-specific animations
+- Programmatic geometry manipulation
+- Advanced material customization per layer
+
+**Use the `SVG` component when you need:**
+- Simple, declarative SVG rendering
+- Quick prototyping
+- Standard SVG display without custom logic
+- Less code and setup
diff --git a/apps/cientos-docs/content/2.api/3.loaders/index.md b/apps/cientos-docs/content/2.api/3.loaders/index.md
new file mode 100644
index 000000000..a3a8be4d2
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/index.md
@@ -0,0 +1,7 @@
+---
+title: Loaders
+description: Asset loading composables for TresJS scenes.
+---
+
+::ApiList{listName="loaders-list"}
+::
diff --git a/apps/cientos-docs/content/2.api/3.loaders/use-progress.md b/apps/cientos-docs/content/2.api/3.loaders/use-progress.md
new file mode 100644
index 000000000..e5d332348
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/use-progress.md
@@ -0,0 +1,65 @@
+---
+title: useProgress
+description: A composable to track loading progress of assets in TresJS scenes.
+---
+
+A composable to convenience wrap `THREE.DefaultLoadingManager` and returns the progress of the loading assets into the scene.
+
+This comes handy to show an HTML loading bar or a spinner while the assets are being loaded.
+
+## Usage
+
+```ts
+import { useProgress } from '@tresjs/cientos'
+
+const { hasFinishLoading, progress, items } = await useProgress()
+```
+
+Then you can use the `progress` value to show a loading bar or a spinner:
+
+```vue
+<template>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="!hasFinishLoading"
+      class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">
+        Loading... {{ progress }} %
+        <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+      </div>
+    </div>
+  </Transition>
+  <TresCanvas preset="realistic">
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <Environment
+        background
+        :files="environmentFiles"
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap"
+      />
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+::alert{type="warning"}
+This component use top level await. Please check the [Suspense API](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more info
+::
+
+## Return Values
+
+| Name | Type | Description |
+| :--- | :--- | :--- |
+| `hasFinishLoading` | `boolean` | Whether all items have finished loading |
+| `progress` | `number` | Loading progress as percentage (0-100) |
+| `items` | `Array` | Array of loading items with their status |
+
+::prose-warning
+This component use top level await it needs to be wrapped on a [`Suspense`](https://vuejs.org/guide/built-ins/suspense.html#suspense). Please check the [`Suspense API`](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more info
+::
diff --git a/apps/cientos-docs/content/2.api/3.loaders/use-video-texture.md b/apps/cientos-docs/content/2.api/3.loaders/use-video-texture.md
new file mode 100644
index 000000000..b44782fa0
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/3.loaders/use-video-texture.md
@@ -0,0 +1,72 @@
+---
+title: useVideoTexture
+description: A composable to load video textures in TresJS scenes.
+---
+
+::SceneWrapper
+  ::LoadersUseVideoTexture
+  ::
+::
+
+A composable to easily use videos as textures in your meshes.
+
+This composable is based on the Drei [useVideoTexture](https://github.com/pmndrs/drei/tree/master#usevideotexture)
+
+## Usage
+
+::code-group
+```vue [app.vue]
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import TheModel from './TheModel.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera
+      :position="[0, 5, 9]"
+      :look-at="[0, 1, 0]"
+    />
+    <OrbitControls />
+    <Suspense>
+      <TheModel />
+    </Suspense>
+    <TresGridHelper />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+```vue{3,8,13} [TheVideoTexture.vue]
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Sphere, useVideoTexture } from '@tresjs/cientos'
+
+const videoPath = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'
+const texture = ref()
+texture.value = await useVideoTexture(videoPath, { loop: false })
+</script>
+
+<template>
+   <Sphere :position="[0, 2, 0]">
+      <TresMeshBasicMaterial :map="texture" />
+    </Sphere>
+</template>
+```
+::
+
+## Props
+
+| Prop          | Description                                                              | Default          |
+| :------------ | :----------------------------------------------------------------------- | ---------------- |
+| `src`         | Path to the video.                                                       | `undefined`      |
+| `unsuspend`   | Path to the model file.                                                  | `loadedmetadata` |
+| `crossOrigin` | Whether to use CORS to fetch the related video.                          | `Anonymous`      |
+| `muted`       | Whether to set the audio silenced.                                       | true             |
+| `loop`        | Automatically seek back to the start upon reaching the end of the video. | true             |
+| `start`       | To play to the video once loaded or not.                                 | true             |
+| `playsInline` | To be play the video inline or not.                                      | true             |
+
+- Any other attribute for a `<video>` tag is accepted and will automatically set
diff --git a/apps/cientos-docs/content/2.api/4.materials/custom-shader-material.md b/apps/cientos-docs/content/2.api/4.materials/custom-shader-material.md
new file mode 100644
index 000000000..8fce99508
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/4.materials/custom-shader-material.md
@@ -0,0 +1,52 @@
+---
+title: Custom Shader Material
+description: Extends Three.js' material library with your own Vertex and Fragment shaders.
+---
+
+::SceneWrapper
+  ::MaterialsCustomShaderMaterial
+  ::
+::
+
+The `cientos` package provides `<TresCustomShaderMaterial />` component which is a wrapper around the [`three-custom-shader-material`](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) class. As states in the repo, it _"lets you extend Three.js' material library with your own Vertex and Fragment shaders"_.
+
+## Usage
+
+```vue{2,13-27}
+<script setup lang="ts">
+import { TresCustomShaderMaterial } from '@tresjs/cientos'
+import { shallowRef } from 'vue'
+
+const customShaderMaterialRef = shallowRef()
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresCustomShaderMaterial
+        ref="customShaderMaterialRef"
+        :vertex-shader="vertexShader"
+        :fragment-shader="fragmentShader"
+        :uniforms="{
+          u_time: { value: 0 },
+          u_color: { value: new THREE.Color(0.2, 0.0, 0.1) },
+          u_resolution: { value: new THREE.Vector2() }
+        }"
+        :transparent="true"
+        :side="THREE.DoubleSide"
+        base-material="MeshLambertMaterial"
+        silent
+        :map="texture"
+        :color="0xff0000"
+      />
+    </TresMesh>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+Being a wrapper around the `CustomShaderMaterial` class, the `<TresCustomShaderMaterial />` component accepts all the props that the class does. You can find the full list of props in the [official repo](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial).
diff --git a/apps/cientos-docs/content/2.api/4.materials/glass-material.md b/apps/cientos-docs/content/2.api/4.materials/glass-material.md
new file mode 100644
index 000000000..30c562fb0
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/4.materials/glass-material.md
@@ -0,0 +1,75 @@
+---
+title: Mesh Glass Material
+description: Makes a geometry look like glass by re-defining the MeshPhysicalMaterial.
+---
+
+::SceneWrapper
+  ::MaterialsGlassMaterial
+  ::
+::
+
+The `cientos` package provides a new`<MeshGlassMaterial />` component that makes a geometry look like glass. This is achieved by re-defining the `MeshPhysicalMaterial`.
+
+## Usage
+
+### You can use it like you normally do with TresJs
+
+```vue{2,10}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshGlassMaterial } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <TresMesh>
+      <TresTorusGeometry />
+      <MeshGlassMaterial />
+    </TresMesh>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+No props are required. The component extends `THREE.MeshPhysicalMaterial` and accepts all the same props plus additional reflection-specific properties.
+
+### You can also replace the material of an existing mesh like this:
+
+```vue{4,6-15,20}
+<script setup lang="ts">
+import { ref, shallowRef, watch } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { MeshGlassMaterial, Box } from '@tresjs/cientos'
+
+const glassMaterialRef = shallowRef()
+const boxRef = shallowRef()
+
+watch(glassMaterialRef, value => {
+  // For good practice we dispose the old material
+  boxRef.value.instance.material.dispose()
+
+  // We assign the new MeshGlassMaterialClass
+  boxRef.value.instance.material = value.MeshGlassMaterialClass
+})
+</script>
+<template>
+  <TresMesh>
+    <TresTorusGeometry />
+    <MeshGlassMaterial ref="glassMaterialRef" />
+  </TresMesh>
+  <!-- Mesh to be replaced -->
+  <TresMesh ref="boxRef">
+    <TresBoxGeometry />
+    <MeshBasicMaterial  />
+  </TresMesh>
+</template>
+```
+## Tips
+
+- For more fine tuning effects you can provide an environment map texture as an envMap and play with the intensity to achieve a more realistic effect
+
+- Another good option is to provide a normal texture as clearcoatNormalMap to add different results
diff --git a/apps/cientos-docs/content/2.api/4.materials/holographic-material.md b/apps/cientos-docs/content/2.api/4.materials/holographic-material.md
new file mode 100644
index 000000000..4c79a887b
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/4.materials/holographic-material.md
@@ -0,0 +1,54 @@
+---
+title: Holographic Material
+description: A simple to use holographic material for TresJS with vibrant colors, dynamic scanlines, and futuristic brilliance.
+---
+
+::SceneControlsWrapper
+  ::MaterialsHolographicMaterial
+  ::
+::
+
+## A simple to use holographic material for TresJS
+
+Dive into a world of mesmerizing holographic wonders with the HolographicMaterial for vanilla three.js. This enchanting three.js material brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.
+
+While this material operates independently of any post-processing, it achieves an enhanced visual appeal when coupled with bloom effects. The utilization of bloom proves particularly effective in rendering a captivating glow effect, especially in areas where overexposure is prevalent.
+
+::prose-note
+This component ports Anderson Mancini's threejs-vanilla-holographic-material to TresJS. All credit goes to him.
+::
+
+## Usage
+
+```vue{3,10}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { HolographicMaterial, Sphere } from '@tresjs/cientos'
+
+</script>
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at=[0,0,0] />
+    <Sphere :scale="0.5">
+      <HolographicMaterial />
+    </Sphere>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop                   | Description                                                   | Type                                                | default   |
+| :--------------------- | :------------------------------------------------------------ | --------------------------------------------------- | --------- |
+| **fresnelAmount**      | Value of the Fresnel effect. Ranges from 0.0 to 1.0.          | `Number`                                            | `0.45`    |
+| **fresnelOpacity**     | Opacity of the Fresnel effect. Ranges from 0.0 to 1.0.        | `Number`                                            | `1.0`    |
+| **scanlineSize**       | Size of the scanlines. Ranges from 1 to 15.                   | `Number`                                            | `8.0`       |
+| **hologramBrightness** | Brightness of the hologram. Ranges from 0.0 to 2.0.           | `Number`                                            | `1.2`       |
+| **signalSpeed**        | Speed of the signal effect. Ranges from 0.0 to 2.0.           | `Number`                                            | `0.45`      |
+| **hologramColor**      | Specifies the color of the hologram.                          | `String`                                            | `"#00d5ff"` |
+| **enableBlinking**     | Enables or disables the blinking effect.                      | `Boolean`                                           | `true`      |
+| **hologramOpacity**    | Specifies the opacity of the hologram.                        | `Number`                                            | `1.0`       |
+| **blinkFresnelOnly**   | Enables or disables the blinking effect for the Fresnel only. | `Boolean`                                           | `true`      |
+| **enableAdditive**     | Enables or disables the Additive Blend Mode.                  | `Boolean`                                           | `true`      |
+| **side**               | Specifies side for the material, as String.                   | `THREE.FrontSide, THREE.BackSide, THREE.DoubleSide` | `FrontSide` |
diff --git a/apps/cientos-docs/content/2.api/4.materials/index.md b/apps/cientos-docs/content/2.api/4.materials/index.md
new file mode 100644
index 000000000..ce84f022b
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/4.materials/index.md
@@ -0,0 +1,7 @@
+---
+title: Materials
+description: All materials
+---
+
+::ApiList{listName="material-list"}
+::
diff --git a/apps/cientos-docs/content/2.api/4.materials/mesh-discard-material.md b/apps/cientos-docs/content/2.api/4.materials/mesh-discard-material.md
new file mode 100644
index 000000000..316794633
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/4.materials/mesh-discard-material.md
@@ -0,0 +1,25 @@
+---
+title: Mesh Discard Material
+description: Hides the object it's attached to while keeping shadows and children visible.
+---
+
+`<MeshDiscardMaterial />` hides the object it's attached to. The object's shadows and children will be rendered.
+
+## Usage
+
+```vue{3,11}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshDiscardMaterial } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <TresMesh>
+      <TresBoxGeometry />
+      <MeshDiscardMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
diff --git a/apps/cientos-docs/content/2.api/4.materials/mesh-reflection-material.md b/apps/cientos-docs/content/2.api/4.materials/mesh-reflection-material.md
new file mode 100644
index 000000000..534d1a056
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/4.materials/mesh-reflection-material.md
@@ -0,0 +1,73 @@
+---
+title: Mesh Reflection Material
+description: Makes floors or walls that reflect the objects in your Scene.
+---
+
+::SceneControlsWrapper
+  ::MaterialsMeshReflectionMaterial
+  ::
+::
+
+The `cientos` package provides a `<MeshReflectionMaterial />` component for making floors or walls that reflect the objects in your `Scene`.
+
+The component is based on the excellent [Drei](https://github.com/pmndrs/drei) component of the same name.
+
+It extends `THREE.MeshStandardMaterial` and accepts all the same props.
+
+## Usage
+
+```vue{3,16-19}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshReflectionMaterial } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]">
+      <TresPlaneGeometry :args="[10, 10]" />
+      <MeshReflectionMaterial
+        :blur="[300, 100]"
+        :mixBlur="30"
+        :mixStrength="80"
+        :mixContrast="1"
+        color="#a0a0a0"
+        metalness="0.5"
+        roughness="1"
+        mirror="0"
+      />
+    </TresMesh>
+    <TresMesh :position="[0, 1, 0]">
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial color="orange" />
+    </TresMesh>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Name | Description | Default |
+| :--- | :--- | ---- |
+| `resolution` | Length in pixels of one side of the square reflective textures | `256` |
+| `mix` | Overall strength of the reflection | `1` |
+| `sharpMix` | Strength of the sharp reflection on smooth surfaces | `1` |
+| `sharpDepthScale` | Sharp reflection can be faded out by depth – distance from the reflective surface. Performance note: if the value is greater than `0`, a depth texture will be created | `1` |
+| `sharpDepthBias` | Sharp reflection depth falloff bias | `0` |
+| `sharpDepthEdgeMin` | Sharp reflection depth falloff start | `0` |
+| `sharpDepthEdgeMax` | Sharp reflection depth falloff end | `0.2` |
+| `blurMixSmooth` | Strength of the blurred reflection on smooth surfaces | `1` |
+| `blurMixRough` | Strength of the blurred reflection on rough surfaces | `1` |
+| `blurDepthScale` | Blurred reflection can spread out by depth – distance from the reflective surface. Performance note: if the value is greater than `0`, depth texture will be rendered | `1` |
+| `blurDepthBias` | Blurred reflection depth spread bias | `0` |
+| `blurDepthEdgeMin` | Blurred reflection depth spread start | `0` |
+| `blurDepthEdgeMax` | Blurred reflection depth spread end | `0.2` |
+| `blurSize` | Size of the blur. If `[number, number]`, first number is width, second is height. Performance note: if other than `[0, 0]` or `0`, a blur texture will be rendered | `[0, 0]` |
+| `distortionMap` | Texture for offsetting the reflection | `undefined` |
+| `distortion` | Influence of `distortionMap` | `0` |
+| `reflectorOffset` | Offsets the reflection | `0` |
+
+Additionally, the component extends `THREE.MeshStandardMaterial` and accepts all the same props including `color`, `roughness`, `metalness`, `map`, `normalMap`, `roughnessMap`, `metalnessMap`, and more.
diff --git a/apps/cientos-docs/content/2.api/4.materials/point-material.md b/apps/cientos-docs/content/2.api/4.materials/point-material.md
new file mode 100644
index 000000000..15117f449
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/4.materials/point-material.md
@@ -0,0 +1,43 @@
+---
+title: Point Material
+description: Extends THREE.PointsMaterial to render points as dots rather than squares.
+---
+
+::SceneWrapper
+  ::MaterialsPointMaterial
+  ::
+::
+
+`<PointMaterial />` extends `THREE.PointsMaterial`. It renders the points as dots, rather than the default squares.
+
+::prose-warning
+N.B., stacking order and transparency of objects using THREE.PointsMaterial and by extension PointMaterial can be somewhat unintuitive, especially when combined with other on-screen objects. Please see discussions at threejs.org for more infomation.
+::
+
+## Usage
+
+```vue{3, 12-14}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { PointMaterial, OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+    <TresPoints>
+      <TresIcosahedronGeometry :args="[1, 4]" />
+      <PointMaterial
+        :size="5"
+        color="orange"
+      />
+    </TresPoints>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+All [`THREE.PointsMaterial` properties](https://threejs.org/docs/#api/en/materials/PointsMaterial) are inherited by `PointMaterial`.
diff --git a/apps/cientos-docs/content/2.api/4.materials/wobble-material.md b/apps/cientos-docs/content/2.api/4.materials/wobble-material.md
new file mode 100644
index 000000000..5b9e32c37
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/4.materials/wobble-material.md
@@ -0,0 +1,45 @@
+---
+title: Wobble Material
+description: Makes a geometry wobble and wave around with customizable speed and factor.
+---
+
+::SceneControlsWrapper
+  ::MaterialsWobbleMaterial
+  ::
+::
+
+The `cientos` package provides a `<MeshWobbleMaterial />` component that makes a geometry wobble and wave around.
+
+## Usage
+
+```vue{3,11-15}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { MeshWobbleMaterial } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
+    <TresMesh>
+      <TresTorusGeometry />
+      <MeshWobbleMaterial
+        color="#f25042"
+        :speed="1"
+        :factor="0.6"
+      />
+    </TresMesh>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop            | Description                                                                               | Default     |
+| :-------------- | :---------------------------------------------------------------------------------------- | ----------- |
+| **speed** | how fast the wobble effect would be.                | `1`     |
+| **factor**      | how strong the wobble effect will deform the geometry                                                                    | `1` |
+
+ This material extends `THREE.MeshStandardMaterial` and accepts all the same props plus additional reflection-specific properties.
diff --git a/apps/cientos-docs/content/2.api/5.shapes/box.md b/apps/cientos-docs/content/2.api/5.shapes/box.md
new file mode 100644
index 000000000..0f53be399
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/box.md
@@ -0,0 +1,35 @@
+---
+title: Box
+description: Short-cut for a BoxGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesBox
+  ::
+::
+
+The `cientos` package provides a `<Box />` component that serves as a short-cut for a `BoxGeometry`.
+
+```
+args: [
+  width: number,
+  height: number,
+  depth: number,
+  widthSegments: number,
+  heightSegments: number,
+  depthSegments: number
+]
+```
+
+Reference: [BoxGeometry](https://threejs.org/docs/?q=box#api/en/geometries/BoxGeometry)
+
+## Usage
+
+```vue
+<Box :args="[1, 1, 1]" color="orange" />
+
+// Box with a custom material transformations
+<Box ref="boxRef" :args="[1, 1, 1]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Box>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/catmullromcurve3.md b/apps/cientos-docs/content/2.api/5.shapes/catmullromcurve3.md
new file mode 100644
index 000000000..ab3715488
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/catmullromcurve3.md
@@ -0,0 +1,56 @@
+---
+title: CatmullRomCurve3
+description: Allows you to make smooth 3D lines using Catmull-Rom curves.
+---
+
+::SceneWrapper
+  ::ShapesCatmullRomCurve3
+  ::
+::
+
+The `cientos` package provides a `<CatmullRomCurve3 />` component that allows you to make smooth(ish) 3D lines.
+
+`<CatmullRomCurve3 />` wraps [Three.js's `CatmullRomCurve3`](https://threejs.org/docs/index.html?q=catmu#api/en/extras/curves/CatmullRomCurve3) functionality, but applies it to Cientos' `<Line2 />` under the hood, meaning you can use [all the props from `<Line2 />`.](line2#props)
+
+## Usage
+
+```vue{3,10-14}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { CatmullRomCurve3 } from '@tresjs/cientos'
+import { Vector3 } from 'three'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <CatmullRomCurve3
+      :points="[new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)]"
+      :segments="50"
+      color="orange"
+      :line-width="3"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop         | Type      | Description                                                                   | Default        |
+| ------------ | --------- | ----------------------------------------------------------------------------- | -------------- |
+| points  | `Array<Vector3 \| [number, number, number]>` | Curve's control points |            |
+| segments     | `number`  | Number of segments in the resulting curve (higher = smoother) | 20             |
+| closed       | `boolean` | The curve will loop back onto itself when this is true.                       | false          |
+| curveType    | `'centripetal' \| 'chordal' \| 'catmullrom'` | Curve type                                 | 'centripetal'  |
+| tension      | `number`  | Catmullrom's tension, when curveType is 'catmullrom'                          | 0.5            |
+| vertexColors    | `TresColor[]`            | Vertex colors, if using                                                    | null           |
+| color           | `TresColor`              | Color for the line – multiplies vertex colors                              | 'white'        |
+| lineWidth       | `number`                 | Width of the line – in world units with size attenuation, pixels otherwise | 1              |
+| worldUnits      | `boolean`                | Whether the line width is in world units or pixels                         | false          |
+| alphaToCoverage | `boolean`                | Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).                                                               | false          |
+| dashed          | `boolean`                | Whether the line is dashed                                                 | false          |
+| dashSize        | `number`                 | Dash size                                                                  | 1              |
+| gapSize         | `number`                 | Gap size in dashed line                                                    | 1              |
+| dashScale       | `number`                 | Scale of the dashes/gaps                                                   | 1              |
+| dashOffset      | `number`                 | Dash offset                                                                | 0              |
diff --git a/apps/cientos-docs/content/2.api/5.shapes/circle.md b/apps/cientos-docs/content/2.api/5.shapes/circle.md
new file mode 100644
index 000000000..10ab9c035
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/circle.md
@@ -0,0 +1,28 @@
+---
+title: Circle
+description: Short-cut for a CircleGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesCircle
+  ::
+::
+
+The `cientos` package provides a `<Circle />` component that serves as a short-cut for a `CircleGeometry`.
+
+```
+args: [radius: number, segments: number, thetaStart: number, thetaLength: number]
+```
+
+Reference: [CircleGeometry](https://threejs.org/docs/?q=circle#api/en/geometries/CircleGeometry)
+
+## Usage
+
+```vue
+<Circle :args="[1, 32]" color="orange" />
+
+// Circle with a custom material transformations
+<Circle ref="circleRef" :args="[1, 32]" :position="[0, 0, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Circle>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/cone.md b/apps/cientos-docs/content/2.api/5.shapes/cone.md
new file mode 100644
index 000000000..55f4a50bf
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/cone.md
@@ -0,0 +1,36 @@
+---
+title: Cone
+description: Short-cut for a ConeGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesCone
+  ::
+::
+
+The `cientos` package provides a `<Cone />` component that serves as a short-cut for a `ConeGeometry`.
+
+```
+args: [
+  radius: number,
+  height: number,
+  radialSegments: number,
+  heightSegments: number,
+  openEnded: boolean,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [ConeGeometry](https://threejs.org/docs/?q=cone#api/en/geometries/ConeGeometry)
+
+## Usage
+
+```vue
+<Cone :args="[1, 1, 8]" color="orange" />
+
+// Cone with a custom material transformations
+<Cone ref="coneRef" :args="[1, 1, 8]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Cone>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/cubic-bezier-line.md b/apps/cientos-docs/content/2.api/5.shapes/cubic-bezier-line.md
new file mode 100644
index 000000000..37fcd3ccb
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/cubic-bezier-line.md
@@ -0,0 +1,49 @@
+---
+title: Cubic Bezier Line
+description: Renders a Line2 between start and end points with two control points.
+---
+
+::SceneWrapper
+  ::ShapesCubicBezierLine
+  ::
+::
+
+`<CubicBezierLine />` renders a `<Line2 />` between start and end points, with additional 2 control points.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { CubicBezierLine } from '@tresjs/cientos'
+import { Vector3 } from 'three'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <CubicBezierLine
+      :start="new Vector3(-1, 0, 0)"
+      :end="new Vector3(1, 0, 0)"
+      :midA="new Vector3(-0.5, 1, 0)"
+      :midB="new Vector3(0.5, 1, 0)"
+      :segments="50"
+      color="orange"
+      :line-width="3"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+`<CubicBezierLine />` inherits all props but `points` from `<Line2 />`.
+
+| Prop         | Type      | Description                                                                   | Default        |
+| ------------ | --------- | ----------------------------------------------------------------------------- | -------------- |
+| `start` | `Vector3 \| [number, number, number]` | Starting point |            |
+| `end` | `Vector3 \| [number, number, number]` | Ending point |            |
+| `midA` | `Vector3 \| [number, number, number]` | First control point |            |
+| `midB` | `Vector3 \| [number, number, number]` | Second control point |            |
+| `segments`     | `number`  | Number of segments in the resulting curve (higher = smoother) | 20             |
diff --git a/apps/cientos-docs/content/2.api/5.shapes/cylinder.md b/apps/cientos-docs/content/2.api/5.shapes/cylinder.md
new file mode 100644
index 000000000..3001db22f
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/cylinder.md
@@ -0,0 +1,37 @@
+---
+title: Cylinder
+description: Short-cut for a CylinderGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesCylinder
+  ::
+::
+
+The `cientos` package provides a `<Cylinder />` component that serves as a short-cut for a `CylinderGeometry`.
+
+```
+args: [
+  radiusTop: number,
+  radiusBottom: number,
+  height: number,
+  radialSegments: number,
+  heightSegments: number,
+  openEnded: boolean,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [CylinderGeometry](https://threejs.org/docs/?q=cylinder#api/en/geometries/CylinderGeometry)
+
+## Usage
+
+```vue
+<Cylinder :args="[1, 1, 1, 32, 1, false, 0, Math.PI * 2]" color="orange" />
+
+// Cylinder with a custom material transformations
+<Cylinder ref="cylinderRef" :args="[1, 1, 1, 32, 1, false, 0, Math.PI * 2]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Cylinder>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/dodecahedron.md b/apps/cientos-docs/content/2.api/5.shapes/dodecahedron.md
new file mode 100644
index 000000000..cf70b25d8
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/dodecahedron.md
@@ -0,0 +1,28 @@
+---
+title: Dodecahedron
+description: Short-cut for a DodecahedronGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesDodecahedron
+  ::
+::
+
+The `cientos` package provides a `<Dodecahedron />` component that serves as a short-cut for a `DodecahedronGeometry`.
+
+```
+args: [radius: number, detail: number]
+```
+
+Reference: [DodecahedronGeometry](https://threejs.org/docs/?q=dode#api/en/geometries/DodecahedronGeometry)
+
+## Usage
+
+```vue
+<Dodecahedron :args="[1, 0]" color="orange" />
+
+// Dodecahedron with a custom material transformations
+<Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Dodecahedron>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/grid.md b/apps/cientos-docs/content/2.api/5.shapes/grid.md
new file mode 100644
index 000000000..526f90b20
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/grid.md
@@ -0,0 +1,57 @@
+---
+title: Grid
+description: Shader-based grid plane with customizable cell and section lines.
+---
+
+::SceneControlsWrapper
+  ::ShapesGrid
+  ::
+::
+
+`<Grid />` creates a shader-based grid plane. It has customizable grid cell and section lines, as well as fade out.
+
+## Usage
+
+```vue{2, 10-21}
+<script setup lang="ts">
+import { Grid, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#222222">
+    <TresPerspectiveCamera :position="[8, 10, 10]" :fov="25" />
+    <OrbitControls />
+    <Grid
+      :args="[10.5, 10.5]"
+      cell-color="#82dbc5"
+      :cell-size="0.6"
+      :cell-thickness="0.5"
+      section-color="#fbb03b"
+      :section-size="2"
+      :section-thickness="1.3"
+      :infinite-grid="true"
+      :fade-from="0"
+      :fade-distance="12"
+      :fade-strength="1"
+    />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop                   | Description            | Default |
+| :--------------------- | :--------------------- | ------- |
+| **cellSize**           | Cell size | `0.5`      |
+| **cellThickness**      | Thickness of cell lines | `0.5`   |
+| **cellColor**          | Color of cell lines    | `'black'` |
+| **sectionSize**        | Section size           | `1`      |
+| **sectionThickness**   | Thickness of section lines | `1`   |
+| **sectionColor**       | Color of cell lines    | `'blue'` |
+| **followCamera**       | Whether to follow camera | `false`     |
+| **infiniteGrid**       | Whether to display an infinite grid | `false` |
+| **fadeDistance**       | Fade distance          | `100`    |
+| **fadeStrength**       | Fade strength          | `1`    |
+| **fadeFrom**           | Fade from camera (1) or origin (0) or in between | `1` |
+| **side**               | Material side          | `THREE.BackSide` |
diff --git a/apps/cientos-docs/content/2.api/5.shapes/icosahedron.md b/apps/cientos-docs/content/2.api/5.shapes/icosahedron.md
new file mode 100644
index 000000000..1b7a429d5
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/icosahedron.md
@@ -0,0 +1,28 @@
+---
+title: Icosahedron
+description: Short-cut for a IcosahedronGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesIcosahedron
+  ::
+::
+
+The `cientos` package provides a `<Icosahedron />` component that serves as a short-cut for a `IcosahedronGeometry`.
+
+```
+args: [radius: number, detail: number]
+```
+
+Reference: [IcosahedronGeometry](https://threejs.org/docs/?q=ico#api/en/geometries/IcosahedronGeometry)
+
+## Usage
+
+```vue
+<Icosahedron :args="[1, 0]" color="orange" />
+
+// Icosahedron with a custom material transformations
+<Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Icosahedron>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/index.md b/apps/cientos-docs/content/2.api/5.shapes/index.md
new file mode 100644
index 000000000..1b622a9d1
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/index.md
@@ -0,0 +1,7 @@
+---
+title: Shapes
+description: All shapes
+---
+
+::ApiList{listName="shape-list"}
+::
diff --git a/apps/cientos-docs/content/2.api/5.shapes/line2.md b/apps/cientos-docs/content/2.api/5.shapes/line2.md
new file mode 100644
index 000000000..7cd782434
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/line2.md
@@ -0,0 +1,80 @@
+---
+title: Line2
+description: Component for creating 3D lines using Three.js's Line2.
+---
+
+::SceneWrapper
+  ::ShapesLine2
+  ::
+::
+
+The `cientos` package provides a `<Line2 />` component for creating 3-D lines. It wraps [Three.js's `Line2`](https://github.com/mrdoob/three.js/blob/e2bcdfff6427c2f106cb819b18d88d1e13aa508a/examples/jsm/lines/Line2.js).
+
+## Usage
+
+```vue{3,8-12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Line2 } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <Line2
+      :points="[[0, 0, 0], [1, 1, 0], [1, 1, 1], [0, 0, 1]]"
+      color="orange"
+      :line-width="3"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop            | Type                     | Description                                                                | Default        |
+| --------------- | -------------------------|--------------------------------------------------------------------------- | -------------- |
+| points          | [See below](#points)     | Points representing the line                                               |                |
+| vertexColors    | `TresColor[]`            | Vertex colors, if using                                                    | null           |
+| color           | `TresColor`              | Color for the line – multiplies vertex colors                              | 'white'        |
+| lineWidth       | `number`                 | Width of the line – in world units with size attenuation, pixels otherwise | 1              |
+| worldUnits      | `boolean`                | Whether the line width is in world units or pixels                         | false          |
+| alphaToCoverage | `boolean`                | Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true).                                                               | false          |
+| dashed          | `boolean`                | Whether the line is dashed                                                 | false          |
+| dashSize        | `number`                 | Dash size                                                                  | 1              |
+| gapSize         | `number`                 | Gap size in dashed line                                                    | 1              |
+| dashScale       | `number`                 | Scale of the dashes/gaps                                                   | 1              |
+| dashOffset      | `number`                 | Dash offset                                                                | 0              |
+
+### Points
+
+The points prop has the following type:
+
+`Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>`
+
+The passed array is converted to `Array<number>` – i.e., a series of x, y, z vertex coordinates. This is done array entry by array entry, as follows:
+
+| Entry type                   | Interpretation                                                                   |
+| ---------------------------- | -------------------------------------------------------------------------------- |
+| `Vector3`                    | Insert the vector's x, y, z into the result array                                |
+| <nobr>`[number, number, number]`</nobr> | Insert the array values into the result array                         |
+| `Vector2`                    | Insert the vector's x, y, then 0 into the result array                           |
+| `[number, number]`           | Insert the array values, then 0 into the result array                            |
+| `number`                     | Insert the number into the result array                                          |
+
+::prose-warning
+If you pass bare numbers in the points array, ensure that you pass triplets – groups of three numbers. Otherwise, you'll corrupt the coordinates that follow.
+::
+
+```vue
+<!-- Wrong -->
+<Line2 :points="[[1,1], 2, 2, [3,3]]" />
+<!-- result: (1,1,0) (2,2,3) (3,0,❌) -->
+
+<!-- Right -->
+<Line2 :points="[[1, 1], 2, 2, 0, [3, 3]]" />
+<!-- result: (1,1,0) (2,2,0) (3,3,0) -->
+```
+
+The component, like Three.js, will not keep you from shooting yourself in the foot.
diff --git a/apps/cientos-docs/content/2.api/5.shapes/octahedron.md b/apps/cientos-docs/content/2.api/5.shapes/octahedron.md
new file mode 100644
index 000000000..80060cd69
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/octahedron.md
@@ -0,0 +1,28 @@
+---
+title: Octahedron
+description: Short-cut for a OctahedronGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesOctahedron
+  ::
+::
+
+The `cientos` package provides a `<Octahedron />` component that serves as a short-cut for a `OctahedronGeometry`.
+
+```
+args: [radius: number, detail: number]
+```
+
+Reference: [OctahedronGeometry](https://threejs.org/docs/?q=octa#api/en/geometries/OctahedronGeometry)
+
+## Usage
+
+```vue
+<Octahedron :args="[1, 0]" color="orange" />
+
+// Octahedron with a custom material transformations
+<Octahedron ref="icosahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Octahedron>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/plane.md b/apps/cientos-docs/content/2.api/5.shapes/plane.md
new file mode 100644
index 000000000..eeef8c996
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/plane.md
@@ -0,0 +1,32 @@
+---
+title: Plane
+description: Short-cut for a PlaneGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesPlane
+  ::
+::
+
+The `cientos` package provides a `<Plane />` component that serves as a short-cut for a `PlaneGeometry`.
+
+```
+args: [width: number, height: number, widthSegments: number, heightSegments: number]
+```
+
+Reference: [PlaneGeometry](https://threejs.org/docs/?q=plane#api/en/geometries/PlaneGeometry)
+
+::prose-note
+A convenient default rotation is applied to the x-axis of the plane (-Math.PI / 2), so that it is facing up (along the Y axis).
+::
+
+## Usage
+
+```vue
+<Plane :args="[1, 1]" color="orange" />
+
+// Plane with a custom material transformations
+<Plane ref="planeRef" :args="[8, 8]" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Plane>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/quadratic-bezier-line.md b/apps/cientos-docs/content/2.api/5.shapes/quadratic-bezier-line.md
new file mode 100644
index 000000000..aaafb011f
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/quadratic-bezier-line.md
@@ -0,0 +1,47 @@
+---
+title: Quadratic Bezier Line
+description: Renders a Line2 between start and end points with an optional control point.
+---
+
+::SceneWrapper
+  ::ShapesQuadraticBezierLine
+  ::
+::
+
+`<QuadraticBezierLine />` renders a `<Line2 />` between start and end points, with an optional control point.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { QuadraticBezierLine } from '@tresjs/cientos'
+import { Vector3 } from 'three'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <QuadraticBezierLine
+      :start="new Vector3(-1, 0, 0)"
+      :end="new Vector3(1, 0, 0)"
+      :mid="new Vector3(0, 1, 0)"
+      :segments="50"
+      color="orange"
+      :line-width="3"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+`<QuadraticBezierLine />` inherits all props but `points` from `<Line2 />`.
+
+| Prop         | Type      | Description                                                                   | Default        | Required |
+| ------------ | --------- | ----------------------------------------------------------------------------- | -------------- | ---- |
+| `start` | `Vector3 \| [number, number, number]` | Starting point |        | yes |
+| `end` | `Vector3 \| [number, number, number]` | Ending point |            | yes |
+| `mid` | `Vector3 \| [number, number, number]` | Control point |           | no |
+| `segments`     | `number`  | Number of segments in the resulting curve (higher = smoother) | 20 | no |
diff --git a/apps/cientos-docs/content/2.api/5.shapes/ring.md b/apps/cientos-docs/content/2.api/5.shapes/ring.md
new file mode 100644
index 000000000..a9508244d
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/ring.md
@@ -0,0 +1,35 @@
+---
+title: Ring
+description: Short-cut for a RingGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesRing
+  ::
+::
+
+The `cientos` package provides a `<Ring />` component that serves as a short-cut for a `RingGeometry`.
+
+```
+args: [
+  innerRadius: number,
+  outerRadius: number,
+  thetaSegments: number,
+  phiSegments: number,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [RingGeometry](https://threejs.org/docs/?q=ring#api/en/geometries/RingGeometry)
+
+## Usage
+
+```vue
+<Ring :args="[0.5, 1, 32]" color="orange" />
+
+// Ring with a custom material transformations
+<Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Ring>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/rounded-box.md b/apps/cientos-docs/content/2.api/5.shapes/rounded-box.md
new file mode 100644
index 000000000..c66cb8bca
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/rounded-box.md
@@ -0,0 +1,34 @@
+---
+title: Rounded Box
+description: Short-cut for a RoundedBoxGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesRoundedBox
+  ::
+::
+
+The `cientos` package provides a `<RoundedBox />` component that serves as a short-cut for a `RoundedBoxGeometry` .
+
+```
+args: [
+  width: number, // default 1
+  height: number, // default 1
+  depth: number, // default 1
+  segments: number, // default 2
+  radius: number, // default 0.1
+]
+```
+
+Reference: [RoundedBoxGeometry](https://github.com/mrdoob/three.js/blob/master/examples/jsm/geometries/RoundedBoxGeometry.js)
+
+## Usage
+
+```vue
+<RoundedBox :args="[1, 1, 1, 2, 0.1]" color="orange" />
+
+// RoundedBox with a custom material transformations
+<RoundedBox ref="boxRef" :position="[0, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</RoundedBox>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/screen-quad.md b/apps/cientos-docs/content/2.api/5.shapes/screen-quad.md
new file mode 100644
index 000000000..be10365a3
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/screen-quad.md
@@ -0,0 +1,34 @@
+---
+title: Screen Quad
+description: A triangle that fills the screen for full-screen fragment shader work.
+---
+
+::SceneWrapper
+  ::ShapesScreenQuad
+  ::
+::
+
+A triangle that fills the screen when using a THREE.OrthographicCamera. Useful for full-screen fragment shader work.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { ScreenQuad } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresOrthographicCamera />
+    <ScreenQuad>
+      <TresMeshToonMaterial color="orange" />
+    </ScreenQuad>
+  </TresCanvas>
+</template>
+```
+
+## References
+
+* [Why a triangle?](https://www.cginternals.com/en/blog/2018-01-10-screen-aligned-quads-and-triangles.html)
+* [Simple postprocessing in THREE.js](https://luruke.medium.com/simple-postprocessing-in-three-js-91936ecadfb7)
diff --git a/apps/cientos-docs/content/2.api/5.shapes/sphere.md b/apps/cientos-docs/content/2.api/5.shapes/sphere.md
new file mode 100644
index 000000000..796a5687a
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/sphere.md
@@ -0,0 +1,36 @@
+---
+title: Sphere
+description: Short-cut for a SphereGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesSphere
+  ::
+::
+
+The `cientos` package provides a `<Sphere />` component that serves as a short-cut for a `SphereGeometry`.
+
+```
+args: [
+  radius: number,
+  widthSegments: number,
+  heightSegments: number,
+  phiStart: number,
+  phiLength: number,
+  thetaStart: number,
+  thetaLength: number
+]
+```
+
+Reference: [SphereGeometry](https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry)
+
+## Usage
+
+```vue
+<Sphere :args="[1, 1, 1]" color="orange" />
+
+// Sphere with a custom material transformations
+<Sphere ref="planeRef" :args="[1, 1, 1]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Sphere>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/superformula.md b/apps/cientos-docs/content/2.api/5.shapes/superformula.md
new file mode 100644
index 000000000..c2a3dda2d
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/superformula.md
@@ -0,0 +1,53 @@
+---
+title: Superformula
+description: Produces a configurable 3D plot of the superformula.
+---
+
+::SceneControlsWrapper
+  ::ShapesSuperFormula
+  ::
+::
+
+The `cientos` package provides a `<Superformula />` component that produces a configurable [3D plot of the superformula](https://en.wikipedia.org/wiki/Superformula).
+
+## Usage
+
+```vue{3,9-14}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Superformula } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <Superformula
+      :width-segments="64"
+      :height-segments="64"
+      :num-arms-a="5"
+      :exp-a="[40, 1.3, 0.9]"
+      color="#ff6b6b"
+    />
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+The `<Superformula />` 3D plot is the product of 2 2D superformulas, referred to as "A" and "B" in the props. See this [Wikipedia article about the superformula](https://en.wikipedia.org/wiki/Superformula) for more information about the function's arguments.
+
+| Name | Description | Default |
+| :--- | :---------- | :------ |
+| **widthSegments** | Number of horizontal mesh segments | `32` |
+| **heightSegments** | Number of vertical mesh segments | `32` |
+| **numArmsA** | For A, number of radial arms/ripples | `4` |
+| **expA** | A's 3 exponents | `[40, 1.3, 0.9]` |
+| **numArmsB** | For B, number of radial arms/ripples | `4` |
+| **expB** | B's 3 exponents | `[40, 1.3, 0.9]` |
+| **color** | If no material is provided, a color for the default material | `'white'` |
+
+## Slot
+
+`<Superformula />` has a single slot for an optional material.
diff --git a/apps/cientos-docs/content/2.api/5.shapes/tetrahedron.md b/apps/cientos-docs/content/2.api/5.shapes/tetrahedron.md
new file mode 100644
index 000000000..76cf611be
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/tetrahedron.md
@@ -0,0 +1,28 @@
+---
+title: Tetrahedron
+description: Short-cut for a TetrahedronGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesTetrahedron
+  ::
+::
+
+The `cientos` package provides a `<Tetrahedron />` component that serves as a short-cut for a `TetrahedronGeometry`.
+
+```
+args: [radius: number, detail: number]
+```
+
+Reference: [TetrahedronGeometry](https://threejs.org/docs/?q=tetr#api/en/geometries/TetrahedronGeometry)
+
+## Usage
+
+```vue
+<Tetrahedron :args="[1, 0]" color="orange" />
+
+// Tetrahedron with a custom material transformations
+<Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[2, 4, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Tetrahedron>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/torus-knot.md b/apps/cientos-docs/content/2.api/5.shapes/torus-knot.md
new file mode 100644
index 000000000..918aebeac
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/torus-knot.md
@@ -0,0 +1,35 @@
+---
+title: Torus Knot
+description: Short-cut for a TorusKnotGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesTorusKnot
+  ::
+::
+
+The `cientos` package provides a `<TorusKnot />` component that serves as a short-cut for a `TorusKnotGeometry`.
+
+```
+args: [
+  radius: number,
+  tube: number,
+  tubularSegments: number,
+  radialSegments: number,
+  p: number,
+  q: number
+]
+```
+
+Reference: [TorusKnotGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusKnotGeometry)
+
+## Usage
+
+```vue
+<TorusKnot :args="[0.6, 0.2, 64, 8]" color="orange" />
+
+// TorusKnot with a custom material transformations
+<TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]">
+  <TresMeshToonMaterial color="orange" />
+</TorusKnot>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/torus.md b/apps/cientos-docs/content/2.api/5.shapes/torus.md
new file mode 100644
index 000000000..144006802
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/torus.md
@@ -0,0 +1,34 @@
+---
+title: Torus
+description: Short-cut for a TorusGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesTorus
+  ::
+::
+
+The `cientos` package provides a `<Torus />` component that serves as a short-cut for a `TorusGeometry`.
+
+```
+args: [
+  radius: number,
+  tube: number,
+  radialSegments: number,
+  tubularSegments: number,
+  arc: number
+]
+```
+
+Reference: [TorusGeometry](https://threejs.org/docs/?q=torus#api/en/geometries/TorusGeometry)
+
+## Usage
+
+```vue
+<Torus :args="[2, 0.4, 42, 100]" color="orange" />
+
+// Torus with a custom material transformations
+<Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]">
+  <TresMeshToonMaterial color="orange" />
+</Torus>
+```
diff --git a/apps/cientos-docs/content/2.api/5.shapes/tube.md b/apps/cientos-docs/content/2.api/5.shapes/tube.md
new file mode 100644
index 000000000..e37b7314c
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/5.shapes/tube.md
@@ -0,0 +1,54 @@
+---
+title: Tube
+description: Short-cut for a TubeGeometry and a MeshBasicMaterial with a Mesh object.
+---
+
+::SceneControlsWrapper
+  ::ShapesTube
+  ::
+::
+
+The `cientos` package provides a `<Tube />` component that serves as a short-cut for a `TubeGeometry`.
+
+Reference: [TubeGeometry](https://threejs.org/docs/?q=tube#api/en/geometries/TubeGeometry)
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Tube } from '@tresjs/cientos'
+import { CubicBezierCurve3, Vector3 } from 'three'
+import { ref } from 'vue'
+
+const tubePath = ref(new CubicBezierCurve3(
+  new Vector3(-1, 0, 0),
+  new Vector3(-0.5, -1, 0),
+  new Vector3(0.5, 1, 0),
+  new Vector3(1, 0, 0),
+))
+</script>
+
+<template>
+  <!-- TubeGeometry needs a curve path to be construct -->
+  <Tube :args="[tubePath, 20, 0.2, 8, false]" color="orange" />
+
+  <!-- Tube with a custom material transformations -->
+  <Tube :args="[tubePath, 20, 0.2, 8, false]" :position="[0, 4, 0]">
+    <TresMeshToonMaterial color="orange" />
+  </Tube>
+</template>
+```
+
+## Args
+
+```
+type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3
+
+args: [
+  path: CurveType,
+  tubularSegments: number,
+  radius: number,
+  radialSegments: number,
+  closed: boolean
+]
+```
diff --git a/apps/cientos-docs/content/2.api/6.debug-performance/helper.md b/apps/cientos-docs/content/2.api/6.debug-performance/helper.md
new file mode 100644
index 000000000..642334904
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/6.debug-performance/helper.md
@@ -0,0 +1,40 @@
+---
+title: Helper
+description: Handles instantiation, updates, and removal/disposal of THREE Helpers.
+---
+
+::SceneWrapper
+  ::DebugPerformanceHelper
+  ::
+::
+
+`<Helper />` handles instantiation, updates, and removal/disposal of THREE Helpers.
+
+## Usage
+
+```vue{3, 13}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Helper } from '@tresjs/cientos'
+import { BoxHelper } from 'three'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <TresMesh ref="boxRef">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Helper :type="BoxHelper" :args="[0xff0000]" />
+    </TresMesh>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop                | Description                                                                                   | Default     |
+| :------------------ | :-------------------------------------------------------------------------------------------- | ----------- |
+| **type**         | Helper constructor - required |       |
+| **args**         | Helper constructor args | `[]` |
diff --git a/apps/cientos-docs/content/2.api/6.debug-performance/index.md b/apps/cientos-docs/content/2.api/6.debug-performance/index.md
new file mode 100644
index 000000000..2ee4af40c
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/6.debug-performance/index.md
@@ -0,0 +1,7 @@
+---
+title: Debug/Performance
+description: All debug and performance tools
+---
+
+::ApiList{listName="debug-performance-list"}
+::
diff --git a/apps/cientos-docs/content/2.api/6.debug-performance/lod.md b/apps/cientos-docs/content/2.api/6.debug-performance/lod.md
new file mode 100644
index 000000000..7dd9aebda
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/6.debug-performance/lod.md
@@ -0,0 +1,54 @@
+---
+title: LOD
+description: Level of Detail - show meshes with more or less geometry based on distance from camera.
+---
+
+::SceneWrapper
+  ::DebugPerformanceLOD
+  ::
+::
+
+Level of Detail - show meshes with more or less geometry based on distance from the camera.
+
+`<LOD />` is a wrapper for THREE's [LOD](https://threejs.org/docs/?q=LOD#api/en/objects/LOD) class.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { LOD } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <LOD :levels="[0, 5, 10]">
+      <!-- High detail mesh - shown when close -->
+      <TresMesh>
+        <TresSphereGeometry :args="[1, 32, 32]" />
+        <TresMeshStandardMaterial color="red" />
+      </TresMesh>
+      <!-- Medium detail mesh - shown at mid distance -->
+      <TresMesh>
+        <TresSphereGeometry :args="[1, 16, 16]" />
+        <TresMeshStandardMaterial color="orange" />
+      </TresMesh>
+      <!-- Low detail mesh - shown when far -->
+      <TresMesh>
+        <TresSphereGeometry :args="[1, 8, 8]" />
+        <TresMeshStandardMaterial color="yellow" />
+      </TresMesh>
+    </LOD>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop               | Description                                                            | Default |
+| :----------------- | :--------------------------------------------------------------------- | ------- |
+| **levels**           |  `number[]` - The distances at which to display each level of detail. There should be one `levels` value for each `LOD` child. |         |
+| **hysteresis**           | Threshold used to avoid flickering at LOD boundaries, as a fraction of distance. | `0.0` |
diff --git a/apps/cientos-docs/content/2.api/6.debug-performance/stats-gl.md b/apps/cientos-docs/content/2.api/6.debug-performance/stats-gl.md
new file mode 100644
index 000000000..bcc82d162
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/6.debug-performance/stats-gl.md
@@ -0,0 +1,37 @@
+---
+title: StatsGl
+description: WebGL performance monitoring tool displaying CPU and GPU metrics.
+---
+
+[stats-gl](https://github.com/RenaudRohlinger/stats-gl) is a powerful WebGL performance monitoring tool created by [RenaudRohlinger](https://github.com/RenaudRohlinger).
+It offers simple information boxes to track code performance and serves as a more advanced alternative to [stats.js](https://github.com/mrdoob/stats.js/), capable of displaying CPU and GPU metrics.
+
+In TresJS, you can effortlessly create a performance monitoring panel in the top left corner of your canvas by using the StatsGl component.
+Simply drop the StatsGl component into your TresCanvas for easy performance monitoring.
+
+## Basic usage
+
+```vue{3,8}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { StatsGl } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <StatsGl />
+  </TresCanvas>
+</template>
+```
+
+## Options
+
+| Name              | Type      | Default | Description                                          |
+| :---------------- | --------- | ------- | ---------------------------------------------------- |
+| **logsPerSecond** | `number`  | `20`    | How often to log performance data, in logs per second. |
+| **samplesLog**    | `number`  | `100`   | Number of recent log samples to keep for computing averages. |
+| **samplesGraph**  | `number`  | `10`    | Number of recent graph samples to keep for computing averages. |
+| **precision**     | `number`  | `2`     | Precision of the data, in the number of decimal places (only affects CPU and GPU). |
+| **horizontal**    | `boolean` | `true`  | Display the canvases on the X-axis, set to align on the vertical axis. |
+| **minimal**       | `boolean` | `false` | A boolean value to control the minimalistic mode of the panel display. If set to true, a simple click on the panel will switch between different metrics. |
+| **mode**          | `number`  | `0`     | Sets the initial panel to display - 0 for FPS, 1 for CPU, and 2 for GPU (if supported). |
diff --git a/apps/cientos-docs/content/2.api/6.debug-performance/stats.md b/apps/cientos-docs/content/2.api/6.debug-performance/stats.md
new file mode 100644
index 000000000..12fddbe63
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/6.debug-performance/stats.md
@@ -0,0 +1,34 @@
+---
+title: Stats
+description: JavaScript performance monitor to track FPS, MS, and memory usage.
+---
+
+[stats.js](https://github.com/mrdoob/stats.js/) is a JavaScript performance monitor, made by [mrdoob](https://github.com/mrdoob). stats.js provides a simple info box that will help you monitor your code performance.
+
+**Cientos** provides a component called `Stats` that creates a panel without effort or configuration in the top left corner where you'll be able to monitor your app.
+
+## Basic usage
+
+```vue{3,8}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Stats } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <Stats />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop          | Type     | Default | Description  |
+| :------------ | -------- | ------- | ------------ |
+| **showPanel** | `number` | `0`     | FPS monitor. |
+
+- 0: FPS Frames rendered in the last second. The higher the number the better.
+- 1: MS Milliseconds needed to render a frame. The lower the number the better.
+- 2: MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)
+- 3+: CUSTOM User-defined panel support. For more info please check [stats.js](https://github.com/mrdoob/stats.js/).
diff --git a/apps/cientos-docs/content/2.api/7.light-shadow/accumulative-shadows.md b/apps/cientos-docs/content/2.api/7.light-shadow/accumulative-shadows.md
new file mode 100644
index 000000000..cda6fab9c
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/7.light-shadow/accumulative-shadows.md
@@ -0,0 +1,61 @@
+---
+title: Accumulative Shadows
+description: DirectionalLight-based shadow component with progressive accumulation.
+---
+
+::SceneControlsWrapper
+  ::LightShadowAccumulativeShadows
+  ::
+::
+
+`<AccumulativeShadows />` is a `THREE.DirectionalLight`-based shadow component. It displays shadows on a single shadow catcher plane, included in the component. It is based on [Drei component of the same name](http://drei.docs.pmnd.rs/staging/accumulative-shadows).
+
+## Usage
+
+```vue{2,15-19}
+<script setup lang="ts">
+import { AccumulativeShadows } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#fbb03b" :shadows="true">
+      <TresPerspectiveCamera
+      :look-at="[0, 0, 0]"
+    />
+    <TresMesh :position-y="0.3" :scale="0.4" :cast-shadow="true">
+      <TresTorusKnotGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+    <AccumulativeShadows
+      :blend="100"
+      color="#fbb03b"
+      once
+      :position-y="-0.4"
+    />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop | Description | Default |
+| - | - | - |
+| `once` | Whether shadow creation only happens once (resets after props change) | `false` |
+| `accumulate` | Whether shadows accumulate progressively over several frames | `true` |
+| `frames` | Number of frames to render. More yields cleaner results but takes more time. If `accumulate && once`, 1 frame will be consumed every update for `frames` updates. Otherwise, `frames` frames are consumed for every update. | `40` |
+| `blend` | If `accumulate`, controls the refresh ratio | `100` |
+| `limit` | If less than `Infinity`, limits the amount of frames rendered. Use this to increase performance once a movable scene has settled | `Infinity` |
+| `scale` | Scale of the plane | `10` |
+| `opacity` | Opacity of the plane | `1` |
+| `alphaTest` | Discards alpha pixels | `0.65` |
+| `color` | Shadow color | `'black'` |
+| `colorBlend` | If less than `Infinity`, limits the amount of frames rendered. Use this to increase performance once a movable scene has settled | `Infinity` |
+| `resolution` | Buffer resolution | `1024` |
+| `toneMapped` | Texture tonemapping | `true` |
+
+## Slot
+
+You can bring your own lights to `<AccumulatedShadows />`, but it's designed to be used with `<RandomizedLights />`.
+
+By default, there's a [`<RandomizedLights />`](/api/light-shadow/randomized-lights) instance provided in `<AccumulatedShadows />`'s `<slot />`. You can replace it with your own [`<RandomizedLights />`](/api/light-shadow/randomized-lights) or an alternative by passing it as a child component.
diff --git a/apps/cientos-docs/content/2.api/7.light-shadow/bake-shadows.md b/apps/cientos-docs/content/2.api/7.light-shadow/bake-shadows.md
new file mode 100644
index 000000000..470d9d784
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/7.light-shadow/bake-shadows.md
@@ -0,0 +1,68 @@
+---
+title: Bake Shadows
+description: Bakes shadows in the first frame for performance optimization.
+---
+
+::SceneWrapper
+  ::LightShadowBakeShadows
+  ::
+::
+
+**Cientos** provides a component called `BakeShadows`. Basically this component set the renderer.shadowMap.autoUpdate to `false`, so the shadows are casted just in the first frame which is really great for performance, the downside of this method is that the shadows will not be updated.
+
+## Basic usage
+
+::prose-warning
+You have to set the shadows in the TresCanvas (renderer), your light sources and objects to receive and cast accordantly as you normally would do.
+::
+
+```vue{2,26}
+<script setup lang="ts">
+import { BakeShadows } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
+
+const cubeRef = shallowRef()
+
+function onLoop({ elapsed }: { elapsed: number }) {
+  if (cubeRef.value) {
+    cubeRef.value.rotation.y = elapsed * 0.5
+    cubeRef.value.rotation.x = elapsed * 0.5
+  }
+}
+</script>
+
+<template>
+  <TresCanvas
+    clear-color="#82DBC5"
+    shadows
+    @loop="onLoop"
+  >
+    <TresPerspectiveCamera
+      :position="[0, 2, 5]"
+      :look-at="[0, 0, 0]"
+    />
+    <BakeShadows />
+    <TresMesh
+      ref="cubeRef"
+      cast-shadow
+    >
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial color="orange" />
+    </TresMesh>
+    <TresMesh
+      receive-shadow
+      :position="[0, -2, 0]"
+      :rotation-x="-Math.PI / 2"
+    >
+      <TresPlaneGeometry :args="[5, 5]" />
+      <TresMeshStandardMaterial :color="0xF7F7F7" />
+    </TresMesh>
+    <TresDirectionalLight
+      cast-shadow
+      :position="[0, 10, 0]"
+    />
+  </TresCanvas>
+</template>
+
+```
diff --git a/apps/cientos-docs/content/2.api/7.light-shadow/circle-shadow.md b/apps/cientos-docs/content/2.api/7.light-shadow/circle-shadow.md
new file mode 100644
index 000000000..a802887b1
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/7.light-shadow/circle-shadow.md
@@ -0,0 +1,49 @@
+---
+title: Circle Shadow
+description: Cheap, texture-based radial gradient shadow on a plane geometry.
+---
+
+::SceneControlsWrapper
+  ::LightShadowCircleShadow
+  ::
+::
+
+`<CircleShadow />` is a cheap, texture-based radial gradient on a `THREE.PlaneGeometry`.
+
+## Usage
+
+```vue{2,15}
+<script setup lang="ts">
+import { CircleShadow, OrbitControls } from "@tresjs/cientos";
+import { TresCanvas } from "@tresjs/core";
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+    <TresGroup :position-y="-0.5">
+      <TresMesh :position-y="1">
+        <TresBoxGeometry />
+        <TresMeshToonMaterial color="orange" />
+      </TresMesh>
+      <CircleShadow :scale="1.5" />
+    </TresGroup>
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+All props are optional.
+
+| Name | Description | Default |
+| :--- | :--- | ------- |
+| `color` | Color of the shadow as a `Color \| number \| string` | `'black'` |
+| `opacity` | Opacity of the shadow | `0.5` |
+| `offset` | Placement of the first radial gradient color stop. `0.0` is the center of the circle. `1.0` is edge. | `0` |
+| `fog` | Whether the material is affected by fog | `false` |
+| `depthWrite` | Whether rendering the material has any effect on the depth buffer | `false` |
diff --git a/apps/cientos-docs/content/2.api/7.light-shadow/contact-shadows.md b/apps/cientos-docs/content/2.api/7.light-shadow/contact-shadows.md
new file mode 100644
index 000000000..de02ccd26
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/7.light-shadow/contact-shadows.md
@@ -0,0 +1,48 @@
+---
+title: Contact Shadows
+description: Fake, non-lighting-based shadow component for single plane shadows.
+---
+
+::SceneControlsWrapper
+  ::LightShadowContactShadow
+  ::
+::
+
+`<ContactShadows />` is a "fake", non-lighting-based shadow component. It displays shadows on a single plane. The component is based on the [THREE.js contact shadows example](https://threejs.org/examples/webgl_shadow_contact.html) by [@mrdoob](https://twitter.com/mrdoob).
+
+## Usage
+
+```vue{2,13}
+<script setup lang="ts">
+import { ContactShadows, Levioso, TorusKnot } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="white">
+    <Levioso :speed="2" :range="[0, 0.7]" :rotation-factor="9">
+      <TorusKnot :scale="0.45">
+        <TresMeshNormalMaterial />
+      </TorusKnot>
+    </Levioso>
+    <ContactShadows :position-y="-1" color="#335" :scale="20" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop         | Description                                                                    | Default     |
+| ------------ | ------------------------------------------------------------------------------ | ----------- |
+| `opacity`    | The opacity of the shadows.                                                    | `1`         |
+| `blur`       | The blur of the shadows.                                                       | `1`         |
+| `color`      | The color of the shadows.                                                      | `'#000000'` |
+| `tint`       | If provided, the color of the "core" of the shadows. "Added" to `color`.       | `undefined` |
+| `scale`      | The scale of the shadows/shadow plane. Can be a number or an array of two numbers `[x, y]`. | 10        |
+| `width`      | The width of the shadow plane.                                                 | `1`         |
+| `height`     | The height of the shadow plane.                                                | `1`         |
+| `far`        | The distance of the orthographic shadow camera extends above the shadow plane. | `10`        |
+| `smooth`     | Whether the shadows should be smoothed to reduce artifacts.                    | `true`      |
+| `resolution` | The resolution of the shadow textures.                                         | `512`       |
+| `frames`     | For performance, optionally stop updating shadows after `frames` frames.       | `Math.POSITIVE_INFINITY`  |
+| `depthWrite` | Whether the shadows should write to the depth buffer or not.                   | `false`     |
diff --git a/apps/cientos-docs/content/2.api/7.light-shadow/index.md b/apps/cientos-docs/content/2.api/7.light-shadow/index.md
new file mode 100644
index 000000000..005a4529f
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/7.light-shadow/index.md
@@ -0,0 +1,7 @@
+---
+title: Light/Shadow
+description: All light and shadow components
+---
+
+::ApiList{listName="light-shadow-list"}
+::
diff --git a/apps/cientos-docs/content/2.api/7.light-shadow/lensflare.md b/apps/cientos-docs/content/2.api/7.light-shadow/lensflare.md
new file mode 100644
index 000000000..3afc93e66
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/7.light-shadow/lensflare.md
@@ -0,0 +1,249 @@
+---
+title: Lensflare
+description: Wraps the three.js Lensflare with seeded random element generation.
+---
+
+::SceneControlsWrapper
+  ::LightShadowLensflare
+  ::
+::
+
+`<Lensflare />` wraps the [three.js Lensflare](https://threejs.org/docs/#examples/en/objects/Lensflare).
+
+## Usage
+
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Lensflare } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPointLight>
+      <Lensflare />
+    </TresPointLight>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Name | Description | Default |
+| :--- | :---------- | :------ |
+| **scale** |  `number` – scale of the lensflare | `1.0` |
+| **elements** | `Partial&lt;LensflareElementProps&gt;[]` – array of lensflare element properties | `undefined` |
+| **seed** | `number` – random seed for generating random seeded elements | `undefined` |
+| **seedProps** | `SeedProps[]` – specifications for generating random seeded elements | `undefined` |
+| **color** | `TresColor` – default color of lensflare elements | `undefined` |
+| **distance** | `number` – default distance of lensflare elements from flare center | `undefined` |
+| **size** | `number` – default size of lensflare elements | `undefined` |
+| **texture** | `Texture string[]` – default texture of lensflare elements | `undefined` |
+
+## `elements`
+
+You can specify individual lensflare element properties directly using the component's `elements` prop.
+
+The `elements` prop expects an instance of `(Partial<LensflareElementProps>)[]`.
+
+Every object in `elements` may have any (or none) of the following properties.
+
+| Name         | Description                                                                   |
+| :----------- | :---------------------------------------------------------------------------- |
+| **texture**  | `string \| Texture` - an image URL or texture to use on the lensflare element |
+| **color**    | `TresColor` - color of the lensflare element                                  |
+| **distance** | `number` - distance of the lensflare element from the lensflare center        |
+| **size**     | `number` - size of the lensflare element                                      |
+
+## `seed`
+
+Adding a `seed` prop to a component enables seeded random element generation.
+
+The `seed` prop is used as the "seed" in a [pseudorandom number generator (PRNG)](https://en.wikipedia.org/wiki/Pseudorandom_number_generator). The PRNG is in turn used to build lensflare elements, by selecting values from an array of `SeedProps`.
+
+::prose-note
+If you set a seed but not seedProps, the component will fall back to the default, built-in SeedProps[].
+::
+
+### Example
+
+```vue
+<Lensflare :seed="seedRef" />
+```
+
+Below, the results of setting `seedRef.value` to `0`, `1`, `2`, `3`, `4`, respectively.
+
+![Lensflare seeds 0-4](/cientos/lensflare_seeds.png)
+
+## `seedProps`
+
+Adding a `seedProps` prop to the component enables seeded random element generation.
+
+The `seedProps` prop expects an instance of `SeedProps[]`. It specifies rules and acceptable values for creating random lensflare elements.
+
+Every element in `seedProps` has this shape.
+
+| Name         | Description                                                                                                                        | Required |
+| :----------- | :--------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| **texture**  | `string[]` - array of 1 or more image URLs; a single texture will be selected per generated element                                | yes      |
+| **color**    | `TresColor[]` - array of 1 or more colors; a single color will be selected per generated element                                   | yes      |
+| **distance** | `[number, number]` - minimum and maximum allowable distance from the flare center                                                  | yes      |
+| **size**     | `[number, number]` - minimum and maximum allowable size                                                                            | yes      |
+| **length**   | `[number, number]` - minimum and maximum allowable number of elements to generate                                                  | yes      |
+| **seed**     | `number` - if set, when this entry is processed, the random number generator with a combination of the incoming seed and this seed | no       |
+
+::prose-note
+If you set seedProps but not seed, the component will fall back to a default seed of 0.
+::
+
+## Random elements and non-random properties
+
+`<Lensflare />` was designed to make it easy to get a lensflare on screen. You can simply add the component with no props and the component will generate seeded random lensflare elements.
+
+```vue
+<Lensflare />
+```
+
+### Non-random properties
+
+You can provide a list of lensflare element properties using the [`elements`](#elements) prop.
+
+```vue
+<Lensflare :elements="[{ color: 'red' }, { color: 'yellow' }]" />
+```
+
+This will produce a lensflare with 2 elements. The first element will be red. The second will be yellow. The unspecified properties – `distance`, `size`, `texture` – will be filled in by the built-in defaults in this case.
+
+You can also provide default props which will overwrite random generated props.
+
+```vue
+<Lensflare color:"red" />
+```
+
+Since `elements` is not defined here, the component will generate random lensflare elements. The specified `color` prop – "red" – will overwrite the color property of the generated lensflare elements.
+
+See [precedence](#precedence) for details about how properties are filled in.
+
+### Random elements
+
+You can let the component generate random elements ...
+
+... by not adding an [`elements` prop](#elements)
+
+```vue
+<Lensflare />
+```
+
+... by adding a [`seed` prop](#seed)
+
+```vue
+<Lensflare :seed="7127" />
+```
+
+... by adding a [`seedProps` prop](#seedprops)
+
+```vue
+<Lensflare :seedProps="[{...}, {...}]" />
+```
+
+### Mixing random elements and non-random properties
+
+You can mix your own properties and random elements.
+
+```vue
+<Lensflare :elements="[{...}, {...}]" :seed="8193" />
+```
+
+Here, both `elements` and `seed` are defined. The component will generate random elements and overwrite their properties with the contents of `elements`, according to the [order of precedence](#precedence).
+
+::prose-note
+When mixing random elements with elements, the final number of lensflare elements equals whichever is larger, the length of the array of generated random elements or the length of elements.
+::
+
+### Precedence
+
+If more than one source sets the same property on a given element, the following order of precendence is used. Higher in the list (lower number) equals higher precendence.
+
+1. `elements`
+2. `color`, `distance`, `size`, `texture` – default element properties
+3. `seed`, `seedProps` – generated random elements
+4. built-in default element properties
+
+::prose-note
+If elements, seed, and seedProps are all undefined, a seed of 0 and built-in default seedProps will be used to generate the lensflare elements.
+::
+
+### Precedence example
+
+Here's an example of precedence. Assume this is in our vue template.
+
+```vue
+<Lensflare
+  :elements="[
+    {size:512, texture='http://example.net/circle.png'},
+    {color:'yellow', distance:0.5}
+  ]"
+  :texture="http://example.net/ring.png"
+  color="red"
+  :size="256"
+  :seed="1"
+/>
+```
+
+`seed` is defined, so the component will produce random elements.
+
+Assume the random element generator produces this, based on `seed`:
+
+```js
+[
+  {
+    color: 'white',
+    distance: 0,
+    size: 1024,
+    texture: 'http://example.net/rays.png',
+  },
+  {
+    color: 'white',
+    distance: 1,
+    size: 512,
+    texture: 'http://example.net/circle.png',
+  },
+  {
+    color: 'white',
+    distance: 2,
+    size: 512,
+    texture: 'http://example.net/circle.png',
+  },
+]
+```
+
+When random elements are mixed with `elements`, the final number of elements in the lensflare is determined by whichever is longer.
+
+Here, `elements` contains 2 entries. The random element generator produced 3. So the resulting lensflare will have 3 elements.
+
+Therefore, resulting lensflare will have 3 elements.
+
+The resulting 3 lensflare elements will have the following properties, from the following sources:
+
+```js
+[
+  {
+    color: 'yellow', // from `elements`
+    distance: 0, // from random element generator
+    size: 512, // from `elements`
+    texture: 'http://example.net/circle.png', // from `elements`
+  },
+  {
+    color: 'red', // from component prop `color`
+    distance: 0.5, // from `elements`
+    size: 256, // from component prop `size`
+    texture: 'http://example.net/ring.png', // from component prop `texture`
+  },
+  {
+    color: 'red', // from component prop `color`
+    distance: 2, // from random element generator
+    size: 256, // from component prop `size`
+    texture: 'http://example.net/ring.png', // from component prop `texture`
+  },
+]
+```
diff --git a/apps/cientos-docs/content/2.api/7.light-shadow/randomized-lights.md b/apps/cientos-docs/content/2.api/7.light-shadow/randomized-lights.md
new file mode 100644
index 000000000..09306499d
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/7.light-shadow/randomized-lights.md
@@ -0,0 +1,70 @@
+---
+title: Randomized Lights
+description: Creates multiple lights and jiggles them for softer shadows.
+---
+
+::SceneWrapper
+  ::LightShadowRandomizedLights
+  ::
+::
+
+`<RandomizedLights />` internally creates multiple lights and jiggles them. You would normally add it as a child of `<AccumulativeShadows />`.
+
+It is based on this [Drei component](http://drei.docs.pmnd.rs/staging/randomized-light).
+
+## Usage
+
+```vue{4,16-23}
+<script setup lang="ts">
+import { TresCanvas } from "@tresjs/core";
+import {
+  RandomizedLights,
+  AccumulativeShadows,
+  OrbitControls,
+  Plane,
+} from "@tresjs/cientos";
+</script>
+
+<template>
+  <TresCanvas shadows>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <OrbitControls />
+    <AccumulativeShadows :blend="100" color="#fbb03b" once :position-y="-1">
+      <RandomizedLights
+        :ambient="0.25"
+        :bias="0.001"
+        :count="8"
+        :intensity="Math.PI"
+        :map-size="1024"
+        :position="[5, 5, -10]"
+        :radius="2"
+      />
+    </AccumulativeShadows>
+    <TresMesh cast-shadow>
+      <TresBoxGeometry />
+      <TresMeshToonMaterial color="orange" />
+    </TresMesh>
+    <Plane :position="[0, -2, 0]" receive-shadow :args="[10, 10]">
+      <TresMeshStandardMaterial />
+    </Plane>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Prop | Description | Default |
+| - | - | - |
+| `count` | Number of lights | `8`|
+| `radius` | Radius of the jiggle, higher values make softer light | `1` |
+| `intensity` | Light intensity | `Math.PI` |
+| `ambient` | "Ambient occlusion" to directional light ratio, lower values mean less AO | `0.5` |
+| `castShadow` | If the lights cast shadows | `true` |
+| `bias` | Default shadow bias | `0` |
+| `mapSize` | Size of the lights' shadow map | `512` |
+| `size` | Size of the lights' shadow camera frustum | `10` |
+| `near` | Lights' shadow camera near value | `0.5` |
+| `far` | Lights' shadow camera far value | `500` |
+| `position` | Position | `[5, 5, -10]` |
diff --git a/apps/cientos-docs/content/2.api/7.light-shadow/soft-shadows.md b/apps/cientos-docs/content/2.api/7.light-shadow/soft-shadows.md
new file mode 100644
index 000000000..dd4bcfc09
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/7.light-shadow/soft-shadows.md
@@ -0,0 +1,44 @@
+---
+title: Soft Shadows
+description: Injects percent closer soft shadows (PCSS) into THREE's shader chunk.
+---
+
+::SceneControlsWrapper
+  ::LightShadowSoftShadows
+  ::
+::
+
+Injects percent closer soft shadows (pcss) into THREE's shader chunk. Mounting/unmounting this component or changing its props will cause all shaders to be recompiled.
+
+## Usage
+
+```vue{2,18}
+<script setup lang="ts">
+import { SoftShadows, Levioso, TorusKnot, Plane } from "@tresjs/cientos";
+import { TresCanvas } from "@tresjs/core";
+</script>
+
+<template>
+  <TresCanvas shadows clear-color="#82DBC5">
+    <Levioso :speed="4" :range="[0, 0.7]" :rotation-factor="9">
+      <TorusKnot cast-shadow :scale="0.45">
+        <TresMeshStandardMaterial color="orange" />
+      </TorusKnot>
+    </Levioso>
+    <Plane :position="[0, -2, 0]" receive-shadow :args="[10, 10]">
+      <TresMeshStandardMaterial />
+    </Plane>
+    <TresDirectionalLight cast-shadow :position="[0, 3, 0]" />
+    <TresAmbientLight :intensity="0.5" />
+    <SoftShadows />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Name | Description | Default |
+| :--- | :--- | ------- |
+| size | Size of the light source (the larger the softer the light) | `25` |
+| samples | Number of samples (more samples less noise but more expensive) | `10` |
+| focus | Depth focus, use it to shift the focal point (where the shadow is the sharpest) | `0` (the beginning) |
diff --git a/apps/cientos-docs/content/2.api/8.staging/1.environment.md b/apps/cientos-docs/content/2.api/8.staging/1.environment.md
new file mode 100644
index 000000000..0cd7d0b13
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/1.environment.md
@@ -0,0 +1,151 @@
+---
+title: Environment
+description: Automatically sets up a global cubemap for scene environment and background.
+---
+
+::SceneControlsWrapper
+  ::StagingEnvironment
+  ::
+::
+
+Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`.
+
+It uses the composable [useEnvironment](/api/staging/use-environment) under the hood to load the cubemap.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Environment } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <Suspense>
+      <Environment
+        :files="[
+          '/px.jpg',
+          '/nx.jpg',
+          '/py.jpg',
+          '/ny.jpg',
+          '/pz.jpg',
+          '/nz.jpg',
+        ]"
+      />
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+You can also pass the `.hdr` file directly:
+
+```vue
+<Suspense>
+   <Environment files="/sunset.hdr" />
+</Suspense>
+```
+
+![Environment](/cientos/envmaps.png)
+
+## Texture reference
+
+You can access the model reference by passing a `ref` to the `<Environment />` prop
+```vue{4,6,9,14,17}
+<script setup lang="ts">
+import { Environment } from '@tresjs/cientos'
+
+const environmentRef = shallowRef()
+
+watch(environmentRef, texture => {
+  console.log(texture)
+})
+</script>
+
+<template>
+  <Environment ref="environmentRef" />
+  <TresMesh>
+    <TresSphereGeometry />
+    <TresMeshStandardMaterial :env-map="envMap" />
+  </TresMesh>
+</template>
+```
+
+## Presets
+
+You can use one of the available presets by passing the `preset` prop:
+
+```vue
+<Environment preset="city" />
+```
+
+## Environment Rotation
+
+The environment component supports both background and environment rotation. You can control them independently or sync them together:
+
+```vue
+<template>
+  <Environment
+    preset="sunset"
+    :background="true"
+    :background-rotation="[0, Math.PI / 2, 0]"
+    :environment-rotation="[0, Math.PI / 4, 0]"
+  />
+</template>
+```
+
+### Syncing Rotations
+
+You can sync the environment rotation with the background rotation using the `syncMaterials` prop:
+
+```vue
+<template>
+  <Environment
+    preset="sunset"
+    :background="true"
+    :sync-materials="true"
+    :background-rotation="[0, Math.PI / 2, 0]"
+  />
+</template>
+```
+
+When `syncMaterials` is enabled:
+- The environment rotation will automatically match the background rotation
+- All materials in the scene will update to reflect the new rotation
+- This ensures visual consistency between the background and environment reflections
+
+## Props
+
+| Prop | Description | Default |
+| :----------- | :-------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `files` | Array of 6 urls to images, one for each side of the CubeTexture, or an HDR file | `undefined` |
+| `path` | Path to the environment map files | `undefined` |
+| `encoding` | Encoding of the environment map | `SRGBColorSpace` for array files, `LinearEncoding` for single texture |
+| `background` | If `true`, the environment map will be used as the scene background | `false` |
+| `blur` | Blur factor between 0 and 1 (only works with three 0.146 and up) | 0 |
+| `preset` | Preset environment map | `undefined` |
+| `resolution` | The resolution of the WebGLCubeRenderTarget | 256 |
+| `near` | The near of the CubeCamera | 1 |
+| `far` | The far of the CubeCamera | 1000 |
+| `frames` | The frames of the cubeCamera.update | Infinity |
+| `backgroundIntensity` | Intensity of the background | 1 |
+| `environmentIntensity` | Intensity of the environment | 1 |
+| `backgroundRotation` | Rotation of the background (in radians) | [0, 0, 0] |
+| `environmentRotation` | Rotation of the environment (in radians) | [0, 0, 0] |
+| `syncMaterials` | If true, environment rotation will sync with background rotation | false |
+
+### Presets
+```
+sunset
+studio
+city
+umbrellas
+night
+forest
+snow
+dawn
+hangar
+urban
+modern
+shangai
+```
diff --git a/apps/cientos-docs/content/2.api/8.staging/2.use-environment.md b/apps/cientos-docs/content/2.api/8.staging/2.use-environment.md
new file mode 100644
index 000000000..70aee1524
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/2.use-environment.md
@@ -0,0 +1,75 @@
+---
+title: useEnvironment
+description: Composable that sets up a global cubemap for scene environment and background.
+---
+
+::SceneWrapper
+  ::StagingEnvironment
+  ::
+::
+
+`useEnvironment` composable that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`.
+
+It uses the [CubeTextureLoader](https://threejs.org/docs/#api/en/loaders/CubeTextureLoader) to load the cubemap
+
+## Usage
+
+::prose-warning
+UseEnvironment needs to be wrapped by a Suspense component
+::
+
+```vue
+<script setup lang="ts">
+import { useEnvironment } from '@tresjs/cientos'
+import { SRGBColorSpace } from 'three'
+
+const texture = await useEnvironment({
+  files: [
+    '/textures/environmentMaps/0/px.jpg',
+    '/textures/environmentMaps/0/nx.jpg',
+    '/textures/environmentMaps/0/py.jpg',
+    '/textures/environmentMaps/0/ny.jpg',
+    '/textures/environmentMaps/0/pz.jpg',
+    '/textures/environmentMaps/0/nz.jpg',
+  ],
+  path: '',
+  encoding: SRGBColorSpace,
+})
+</script>
+```
+
+Then you can use the `texture` in your scene:
+
+```vue{3}
+<TresMesh>
+  <TresSphereGeometry />
+  <TresMeshStandardMaterial :map="texture" />
+</TresMesh>
+```
+
+You can also pass the `.hdr` file directly
+
+```ts
+import { useEnvironment } from '@tresjs/cientos'
+
+const texture = await useEnvironment({
+  files: '/sunset.hdr',
+  path: '',
+  encoding: SRGBColorSpace,
+})
+```
+
+## Options
+
+| Name           | Type       | Default                                                                          | Description                                                                 |
+| :------------- | ---------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| **files**      | `Array`    | `undefined`                                                                      | Array of 6 urls to images, one for each side of the CubeTexture. or and HDR |
+| **path**       | `boolean`  | `false`                                                                          | Path to the environment map files.                                          |
+| **encoding**   | `Encoding` | `SRGBColorSpace` for an array of files and `LinearEncoding` for a single texture | Encoding of the environment map.                                            |
+| **background** | `boolean`  | `false`                                                                          | If `true` the texture will be used as the scene background.                 |
+| **blur**       | `number`   | `0`                                                                              | Blur factor between 0 and 1. (only works with three 0.146 and up)           |
+| **preset**     | `string`   | `undefined`                                                                      | Preset environment map.                                                     |
+| **backgroundIntensity** | `number` | `1` | Intensity of the background. |
+| **environmentIntensity** | `number` | `1` | Intensity of the environment. |
+| **backgroundRotation** | `VectorFlexibleParams` | `[0, 0, 0]` | Rotation of the background. |
+| **environmentRotation** | `VectorFlexibleParams` | `[0, 0, 0]` | Rotation of the environment. |
diff --git a/apps/cientos-docs/content/2.api/8.staging/3.lightformer.md b/apps/cientos-docs/content/2.api/8.staging/3.lightformer.md
new file mode 100644
index 000000000..7751e5ade
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/3.lightformer.md
@@ -0,0 +1,34 @@
+---
+title: Lightformer
+description: Addon for environment component that provided you custom lights.
+---
+
+::SceneControlsWrapper
+  ::StagingLightformer
+  ::
+::
+
+You can incorporate `Lightformer` into the environment just like a slot.
+
+```vue
+<script setup>
+import { Enviroment, LightFormer } from '@tres/cientos'
+</script>
+
+<template>
+  <Environment>
+    <Lightformer :intensity="0.75" :position="[0, 5, -9]" />
+    <Lightformer from="ring" :rotation-y="-Math.PI / 2" :scale="[10, 10, 1]" />
+  </Environment>
+</template>
+```
+
+### Props
+
+Lightformer inherits from mesh, and its extension parameters include:
+| Prop | Description | Default |
+| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `from` | `circle`, `ring`, `rect`, or any other Mesh type | `rect` |
+| `intensity` | The intensity of the light | 1 |
+| `color` | The color of the light | `0xffffff` |
+| `args` | The arguments of the Geometry | When using other geometries, set the corresponding arguments |
diff --git a/apps/cientos-docs/content/2.api/8.staging/backdrop.md b/apps/cientos-docs/content/2.api/8.staging/backdrop.md
new file mode 100644
index 000000000..8ca9b3a8b
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/backdrop.md
@@ -0,0 +1,43 @@
+---
+title: Backdrop
+description: A curved plane studio backdrop for presentational purposes.
+---
+
+::SceneControlsWrapper
+  ::StagingBackdrop
+  ::
+::
+
+The `cientos` package provides a `<Backdrop />` component. It's just a curved plane, like a studio backdrop. Meant is for presentational purposes, to break up light and shadows more interestingly.
+
+## Usage
+
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Backdrop } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <Backdrop />
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+Or with a custom material
+```html
+<Backdrop :floor="1.5" :segments="20" receive-shadow>
+  <TresMeshPhysicalMaterial color="orange" :roughness="1" />
+</Backdrop>
+```
+
+## Props
+
+| Name | Type | Default | Required |
+| :--- | :--- | ------- | -------- |
+| floor | number | `0.25` | No |
+| segments | number | `20` | No |
+| receiveShadow | boolean | `false` | No |
diff --git a/apps/cientos-docs/content/2.api/8.staging/index.md b/apps/cientos-docs/content/2.api/8.staging/index.md
new file mode 100644
index 000000000..a1c953b9a
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/index.md
@@ -0,0 +1,7 @@
+---
+title: Staging
+description: All staging components
+---
+
+::ApiList{listName="staging-list"}
+::
diff --git a/apps/cientos-docs/content/2.api/8.staging/ocean.md b/apps/cientos-docs/content/2.api/8.staging/ocean.md
new file mode 100644
index 000000000..d5421d1c0
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/ocean.md
@@ -0,0 +1,82 @@
+---
+title: Ocean
+description: Wrapper for the Three.js Water add-on with sky reflection support.
+---
+
+::SceneWrapper
+  ::StagingOcean
+  ::
+::
+
+`<Ocean />` is a wrapper for the [Three.js `Water` add-on](https://threejs.org/examples/?q=ocean#webgl_shaders_ocean).
+
+::prose-warning
+Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.
+::
+
+## Usage
+
+```vue{3, 9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Ocean } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <Suspense>
+      <Ocean />
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+### SKY
+
+`<Ocean />` works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.
+(`<Sky />` is not required for making this component work.)
+
+### Fog
+
+The `<Ocean />` component also reacts when there's [Fog](https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog) or [FogExp2](https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2) in your scene.
+
+## Custom Geometry
+
+You can use custom geometry by adding it as a child.
+
+```vue{3, 9-11}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Ocean } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <Suspense>
+      <Ocean>
+        <TresCircleGeometry :args="[50, 16]" />
+      </Ocean>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+::prose-warning
+All of the props of this component are not reactive.
+::
+
+| Prop                | Description                                  | Default                                                                                          |
+| :------------------ | :------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| **textureWidth**    | Width of the mirror texture                  | 512                                                                                              |
+| **textureHeight**   | Height of the mirror texture                 | 512                                                                                              |
+| **waterNormals**    | Normals of the water                         | https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg |
+| **sunDirection**    | Sun direction to be reflected on the water   | Vector3(0,0,0)                                                                                   |
+| **sunColor**        | Sun color to be reflected on the water       | 0xffffff                                                                                         |
+| **waterColor**      | Water Color                                  | 0x001e0f                                                                                         |
+| **distortionScale** | Distortion scale on reflected objects        | 3.7                                                                                              |
+| **size**            | Size of the water normals                    | 1                                                                                                |
+| **clipBias**        | To use the clipBias property                 | 0.0                                                                                              |
+| **alpha**           | To use the clipBias Alpha                    | 1.0                                                                                              |
+| **side**            | Which size of the mesh will render the water | FrontSide                                                                                        |
diff --git a/apps/cientos-docs/content/2.api/8.staging/precipitation.md b/apps/cientos-docs/content/2.api/8.staging/precipitation.md
new file mode 100644
index 000000000..28f2a3b41
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/precipitation.md
@@ -0,0 +1,125 @@
+---
+title: Precipitation
+description: Flexible infinite particle flow for rain, snow, waterfall, and beam effects.
+---
+
+::SceneControlsWrapper
+  ::StagingPrecipitation
+  ::
+::
+
+`<Precipitation />` is a fully flexible component that renders an infinite particle flow, It comes with several props that allow you customize it to create different effects like precipitation, snow, waterfall, beams, etc.
+
+## Usage
+
+You can use `<Precipitation />` component without passing any props, this will achieve a snowy effect, like the before example.
+
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <Precipitation />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+### Rain
+
+By setting the randomness to 0, increase the speed  and reduce the count. You can easily achieve a more rainy effect.
+
+```vue{3,9-13}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <Precipitation
+      :count="2000"
+      :speed="0.3"
+      :randomness="0"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+### Storm
+
+A storm effect? Easy just increase the randomness.
+
+```vue{3,9-13}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <Precipitation
+      :count="3000"
+      :speed="0.5"
+      :randomness="1.5"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+### Beam
+
+What about an infinite beam? Just set the area, to the axis that you need constrain.
+
+```vue{3,9-15}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Precipitation } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <Precipitation
+      :area="[0.5, 0.5, 20]"
+      :count="1000"
+      :speed="0.2"
+      :size="0.3"
+      color="#00ff00"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+You can create much more! ☔
+
+::prose-warning
+Be careful with the performance this components render infinite particles in movement
+::
+
+## Props
+
+| Prop                | Description                                             | Default      |
+| :------------------ | :------------------------------------------------------ | ------------ |
+| **size**            | The size of the drops.                                  | 0.1          |
+| **area**            | The size of the precipitation area.                              | [10, 10, 20] |
+| **color**           | The color of the drops.                                  | 0xffffff     |
+| **map**             | Color texture of the drops.                             | null         |
+| **alphaMap**        | Alpha texture of the Drops.                             | null         |
+| **alphaTest**       | Enables the WebGL to know when not to render the pixel. | 0.01         |
+| **opacity**         | Set the opacity of the drops.                           | 0.8          |
+| **count**           | Number of drops.                                        | 5000         |
+| **speed**           | Drops speed.                                            | 0.1          |
+| **randomness**      | Add randomness to the drops.                            | 0.5          |
+| **depthWrite**      | Whether should write to the depth buffer or not. drops. | true         |
+| **transparent**     | Transparency on the drops texture                       | false        |
+| **sizeAttenuation** | Keep the same size regardless distance. drops.          | true         |
diff --git a/apps/cientos-docs/content/2.api/8.staging/sky.md b/apps/cientos-docs/content/2.api/8.staging/sky.md
new file mode 100644
index 000000000..dde74e9b9
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/sky.md
@@ -0,0 +1,42 @@
+---
+title: Sky
+description: Wrapper for the Three.js Sky add-on with sun position controls.
+---
+
+::SceneControlsWrapper
+  ::StagingSky
+  ::
+::
+
+`<Sky />` is a wrapper for the [Three.js `Sky` add-on](https://threejs.org/examples/?q=sky#webgl_shaders_sky).
+
+## Usage
+
+```vue{2,9}
+<script setup lang="ts">
+import { OrbitControls, Sky } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas :tone-mapping-exposure="0.25">
+    <TresPerspectiveCamera :position="[0, 15, 200]" />
+    <Sky />
+    <OrbitControls />
+    <TresGridHelper :args="[1000, 20]" />
+  </TresCanvas>
+</template>
+
+```
+
+## Props
+
+| Name | Type | Description | Default | Required |
+| :--- | :--- | :---------- | :------ | :------- |
+| **turbidity** | `number` | Haziness | `3.4` | No |
+| **rayleigh** | `number` | [Rayleigh scattering](https://en.wikipedia.org/wiki/Rayleigh_scattering) | `3` | No |
+| **mieCoefficient** | `number` | [Mie scattering](https://en.wikipedia.org/wiki/Mie_scattering) amount | `0.005` | No |
+| **mieDirectionalG** | `number` | [Mie scattering](https://en.wikipedia.org/wiki/Mie_scattering) direction | `0.7` | No |
+| **elevation** | `number` | Sun's elevation from the horizon, in degrees | `0.6` | No |
+| **azimuth** | `number` | Sun's [azimuth angle](https://en.wikipedia.org/wiki/Solar_azimuth_angle), in degrees – its horizontal coordinate on the horizon | `180` | No |
+| **distance** | `number` | Sky box scale | `450000` | No |
diff --git a/apps/cientos-docs/content/2.api/8.staging/smoke.md b/apps/cientos-docs/content/2.api/8.staging/smoke.md
new file mode 100644
index 000000000..d0b84e64b
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/smoke.md
@@ -0,0 +1,55 @@
+---
+title: Smoke
+description: Beautiful smoke, cloud, and fog effect using textures and transparency.
+---
+
+::SceneWrapper
+  ::StagingSmoke
+  ::
+::
+
+`<Smoke />` is a component that renders a smoke in your scene. It is an abstraction that use a combination of textures, transparency and some calculation, to create a beautiful  smoke - cloud - fog effect
+
+## Usage
+
+::prose-warning
+Smoke component comes with a default texture abstraction it needs to be wrapped by a Suspense component
+::
+
+You can use `<Smoke />` component without passing any props, but still if you want you can tweak the props to find the best setup for you
+
+```vue
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Smoke } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <Suspense>
+      <Smoke />
+    </Suspense>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Name | Type | Description | Default |
+| :--- | :--- | :---------- | :------ |
+| **color** | `TresColor` | The color of the smoke. | `'#ffffff'`
+| **opacity** | `number` | The strength of the opacity. | `0.5`
+| **speed** | `number` | The rotation speed of the smoke. | `0.4`
+| **depth** | `number` | The base depth. | `0.3`
+| **segments** | `number` | The number of smoke to render. | `10`
+| **texture** | `string` | The texture of the smoke. | [link](https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png)
+| **depthTest** | `boolean` | The depthTest. | `false`
+| **spreadY** | `number` | Spread on the Y axis. | `0.1`
+| **spreadX** | `number` | Spread on the X axis. | `0.5`
+| **scale** | `number` | scale | `1`
+
+### Default texture
+
+![Default texture](https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png)
diff --git a/apps/cientos-docs/content/2.api/8.staging/sparkles.md b/apps/cientos-docs/content/2.api/8.staging/sparkles.md
new file mode 100644
index 000000000..4bd81065b
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/sparkles.md
@@ -0,0 +1,172 @@
+---
+title: Sparkles
+description: Makes sparkles on geometry vertices, optionally guided by directional light.
+---
+
+<!-- ::SceneWrapper
+  ::StagingSparkles
+  ::
+:: -->
+
+`<Sparkles />` makes sparkles on your geometry's vertices – optionally guided by a directional light.
+
+## Usage
+
+### Basic
+
+```vue{3,11}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Sparkles } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <TresMesh>
+      <TresSphereGeometry />
+      <Sparkles />
+    </TresMesh>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+ ### With TresDirectionalLight
+
+By default, sparkles appear on the up-facing vertices. However, you can pass a directional light to the component. Moving the directional light will cause "lit" vertices to emit sparkles.
+
+```vue{6,14,17}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Sparkles } from '@tresjs/cientos'
+import { shallowRef } from 'vue'
+
+const directionalLightRef = shallowRef()
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <TresMesh>
+      <TresSphereGeometry />
+      <Sparkles :directional-light="directionalLightRef" />
+    </TresMesh>
+    <TresDirectionalLight
+      ref="directionalLightRef"
+      :position="[3, 3, 3]"
+      :intensity="2"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+### Sequences
+
+All props beginning with `:sequence-` are used to define how a particle changes as it progresses [(See also: Mixes)](#mixes). `:sequence-` props are of the type `Gradient<T>`, which can be any one of:
+
+* `T`: a single value
+* `[T, T, T, ...]`: an evenly distributed series of values
+* `[[number, T], [number, T], ...]`: an unevently distributed series of values, where `number` is a gradient "stop" from `0` to `1`.
+
+For example, all of these are acceptable values for `Gradient<TresColor>`:
+
+* `'red'`
+* `['red', 'blue', 'green']`
+* `[[0.1, 'red'], [0.25, 'blue'], [0.5, 'green']]`
+
+```vue{11-14}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Sparkles } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <TresMesh>
+      <TresSphereGeometry />
+      <Sparkles
+        :sequence-color="['red', 'blue', 'green']"
+        :sequence-alpha="[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]"
+        :sequence-size="[0.0, 1.0, 0.5]"
+      />
+    </TresMesh>
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+### Mixes
+
+All props beginning with `:mix-` allow you to specify how a particle "progresses" through a corresponding `:sequence-` prop. E.g., `:mix-alpha` affects `:sequence-alpha`.
+
+* If the `:mix-` prop is `0.0`, 'progress' through the `:sequence-` is determined entirely by the light shining on the surface of the sparkling mesh.[<sup>1</sup>](#precisely)
+* If the `:mix-` prop is `1.0`, 'progress' through the `:sequence-` is determined entirely by the particle's lifetime.
+
+ More precisely, the value is determined by the dot product of the `directionalLight`'s inverted normalized position and each of the sparkling mesh's vertex normals.
+
+```vue{3,14-18}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Sparkles } from '@tresjs/cientos'
+import { shallowRef } from 'vue'
+
+const directionalLightRef = shallowRef()
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <TresMesh>
+      <TresSphereGeometry />
+      <Sparkles
+        :directional-light="directionalLightRef"
+        :mix-color="0.8"
+        :mix-alpha="0.5"
+        :mix-size="0.2"
+      />
+    </TresMesh>
+    <TresDirectionalLight
+      ref="directionalLightRef"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Name | Description |
+| :--- | :---------- |
+| **map** | Type: `Texture \| string`<br>Default: `'https://raw.githubusercontent.com/Tresjs/asset...'`<br><br>Texture or image path for individual sparkles |
+| **geometry** | Type: `Object3D \| BufferGeometry`<br>Default: `undefined`<br><br>Vertices of the geometry will be used to emit sparkles. Geometry normals are used for sparkles' traveling direction and for responding to the directional light prop.<br><ul><li>If provided, the component will use the passed geometry.</li><li>If no geometry is provided, the component will try to make a copy of the parent object's geometry.</li><li>If no parent geometry exists, the component will create and use an IcosphereGeometry.</li></ul> |
+| **directionalLight** | Type: `Object3D`<br>Default: `undefined`<br><br>Particles "light up" when their normal "faces" the light. If no `directionalLight` is provided, the default "up" vector will be used. |
+| **lifetimeSec** | Type: `number`<br>Default: `0.4`<br><br>Particle lifetime in seconds |
+| **cooldownSec** | Type: `number`<br>Default: `2.0`<br><br>Particle cooldown in seconds – time between lifetime end and respawn |
+| **normalThreshold** | Type: `number`<br>Default: `0.7`<br><br>Number from 0-1 indicating how closely the particle needs to be faced towards the light to "light up". (Lower == more flexible) |
+| **noiseScale** | Type: `number`<br>Default: `3.0`<br><br>Scale of the noise period (lower == more slowly cycling noise) |
+| **scaleNoise** | Type: `number`<br>Default: `1.0`<br><br>Noise coefficient applied to particle scale |
+| **offsetNoise** | Type: `number`<br>Default: `0.1`<br><br>Noise coefficient applied to particle offset |
+| **lifetimeNoise** | Type: `number`<br>Default: `0.0`<br><br>Noise coefficient applied to particle lifetime |
+| **size** | Type: `number`<br>Default: `1.0`<br><br>Particle scale multiplier |
+| **alpha** | Type: `number`<br>Default: `1.0`<br><br>Opacity multiplier |
+| **offset** | Type: `number`<br>Default: `1.0`<br><br>Offset multiplier |
+| **surfaceDistance** | Type: `number`<br>Default: `1.0`<br><br>Surface distance multiplier |
+| **sequenceColor** | Type: `Gradient<TresColor>`<br>Default: `[[0.7, '#82dbc5'], [0.8, '#fbb03b']]`<br><br>'*Sequence' props: specify how a particle changes as it "progresses". See also "mix*" props.<br>Color sequence as particles progress |
+| **sequenceAlpha** | Type: `Gradient<number>`<br>Default: `[[0.0, 0.0], [0.10, 1.0], [0.5, 1.0], [0.9, 0.0]]`<br><br>Opacity sequence as particles progress |
+| **sequenceOffset** | Type: `Gradient<[number, number, number]>`<br>Default: `[0.0, 0.0, 0.0]`<br><br>Distance sequence as particles progress |
+| **sequenceNoise** | Type: `Gradient<[number, number, number]>`<br>Default: `[0.1, 0.1, 0.1]`<br><br>Noise sequence as particles progress |
+| **sequenceSize** | Type: `Gradient<number>`<br>Default: `[0.0, 1.0]`<br><br>Size sequence as particles progress |
+| **sequenceSurfaceDistance** | Type: `Gradient<number>`<br>Default: `[0.05, 0.08, 0.1]`<br><br>Distance from surface (along normal) as particles progress |
+| **mixColor** | Type: `number`<br>Default: `0.5`<br><br>'mix*' props: A particle "progresses" with a mix of two factors:<br><ul><li>its normal "facing" the directionalLight</li><li>its lifetime</li></ul>'mix*' props specify the relationship between the two factors.<br>How is a particle's progress for color calculated? (0: normal, 1: particle lifetime) |
+| **mixAlpha** | Type: `number`<br>Default: `1.`<br><br>How is a particle's progress for alpha calculated? (0: normal, 1: particle lifetime) |
+| **mixOffset** | Type: `number`<br>Default: `1.`<br><br>How is a particle's progress for offset calculated? (0: normal, 1: particle lifetime) |
+| **mixSize** | Type: `number`<br>Default: `0.`<br><br>How is a particle's progress for size calculated? (0: normal, 1: particle lifetime) |
+| **mixSurfaceDistance** | Type: `number`<br>Default: `1.`<br><br>How is a particle's progress for surface distance calculated? (0: normal, 1: particle lifetime) |
+| **mixNoise** | Type: `number`<br>Default: `1.`<br><br>How is a particle's progress for lifetime calculated? (0: normal, 1: particle lifetime) |
+| **blending** | Type: `Blending`<br>Default: `AdditiveBlending`<br><br>Material blending |
+| **transparent** | Type: `boolean`<br>Default: `true`<br><br>Material transparency |
+| **depthWrite** | Type: `boolean`<br>Default: `false`<br><br>Material depth write |
diff --git a/apps/cientos-docs/content/2.api/8.staging/stage.md b/apps/cientos-docs/content/2.api/8.staging/stage.md
new file mode 100644
index 000000000..9221032b3
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/stage.md
@@ -0,0 +1,92 @@
+---
+title: Stage
+description: Creates a complete stage setup with lighting, shadows, and environment.
+---
+
+::SceneWrapper
+  ::StagingStage
+  ::
+::
+
+This component creates a "stage" for your models. It sets up:
+
+* model lighting
+* ground shadows
+* zoom to fit
+* environment
+
+::prose-note
+If you are using other camera controls, be sure to make them the 'default'.
+```vue
+<OrbitControls make-default />
+```
+::
+
+::prose-note
+If you are using shadows='accumulative', enable shadows on your canvas and on your objects.
+```vue
+<TresCanvas shadows />
+```
+
+```vue
+<TresMesh cast-shadow />
+  ...
+</TresMesh>
+```
+::
+
+## Usage
+
+```vue{3,10-15}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Stage, OrbitControls, Plane } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas shadows>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <OrbitControls make-default />
+    <Stage
+      lighting="rembrandt"
+      shadows="contact"
+      :adjust-camera="true"
+      environment="city"
+      :intensity="0.5"
+    >
+      <TresMesh cast-shadow>
+        <TresBoxGeometry />
+        <TresMeshStandardMaterial color="orange" />
+      </TresMesh>
+      <Plane :position="[0, -2, 0]" receive-shadow :args="[5, 5]">
+        <TresMeshStandardMaterial />
+      </Plane>
+    </Stage>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop | Description | Default |
+| :--- | :---------- | :------ |
+| **lighting** | Lighting setup. Options: `null \| undefined \| false \| 'rembrandt' \| 'portrait' \| 'upfront' \| 'soft' \| { main: [x, y, z], fill: [x, y, z] }` | `'rembrandt'` |
+| **shadows** | Controls the ground shadows. Options: `boolean \| 'contact' \| 'accumulative' \| StageShadows` | `'contact'` |
+| **adjustCamera** | Optionally wraps and thereby centers the models using `<Bounds>`, can also be a camera offset | `true` |
+| **environment** | The default environment | `'city'` |
+| **intensity** | Lighting intensity, `0` removes lights | `0.5` |
+| **align** | To adjust alignment | `undefined` |
+
+### StageShadows Type
+
+When using custom shadow configuration, you can pass an object with the following properties:
+
+| Prop | Description | Default |
+| :--- | :---------- | :------ |
+| **type** | Shadow type: `'contact' \| 'accumulative'` | - |
+| **offset** | Shadow plane offset | `0` |
+| **bias** | Shadow bias | `-0.0001` |
+| **normalBias** | Shadow normal bias | `0` |
+| **size** | Shadow map size | `1024` |
+
+Additionally inherits all props from `AccumulativeShadowsProps`, `RandomizedLightsProps`, and `ContactShadowsProps`.
diff --git a/apps/cientos-docs/content/2.api/8.staging/stars.md b/apps/cientos-docs/content/2.api/8.staging/stars.md
new file mode 100644
index 000000000..793b78700
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/8.staging/stars.md
@@ -0,0 +1,43 @@
+---
+title: Stars
+description: Renders beautiful stars in the sky using Points and BufferGeometry.
+---
+
+::SceneControlsWrapper
+  ::StagingStars
+  ::
+::
+
+`<Stars />` is a component that renders a stars in the sky of your scene. It is an abstraction that use Points, PointsMaterial and BufferGeometry to create a beautiful stars effect
+
+## Usage
+
+You can use `<Stars />` component without passing any props,
+
+```vue{3,9}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Stars } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 3, 5]" />
+    <Stars />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop               | Description                                                            | Default |
+| :----------------- | :--------------------------------------------------------------------- | ------- |
+| **size**           | The size of the stars                        |   0.1      |
+| **sizeAttenuation**           | keep the same size regardless distance.|   true      |
+| **transparent**           | show transparency on the stars texture                                 | true     |
+| **alphaTest**         | enables the WebGL to know when not to render the pixeltext.                                                | 0.01     |
+| **alphaMap**  | texture of the stars | null      |
+| **count**   | number of stars      | 5000    |
+| **depth** | depth of star's shape                         | 50    |
+| **radius**      | Radius of star's shape                            | 100    |
diff --git a/apps/cientos-docs/content/2.api/9.objects/animated-sprite.md b/apps/cientos-docs/content/2.api/9.objects/animated-sprite.md
new file mode 100644
index 000000000..7382e61ce
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/animated-sprite.md
@@ -0,0 +1,151 @@
+---
+title: AnimatedSprite
+description: Display 2D animations defined in a texture atlas.
+---
+
+::SceneControlsWrapper
+  ::ObjectsAnimatedSprite
+  ::
+::
+
+`<AnimatedSprite />` displays 2D animations defined in a [texture atlas](https://en.wikipedia.org/wiki/Texture_atlas). A typical `<AnimatedSprite />` will use:
+
+* An image containing multiple sprites
+* A JSON atlas containing the individual sprite coordinates in the image
+
+## Usage
+
+```vue{2, 10-14}
+<script setup lang="ts">
+import { AnimatedSprite } from '@tresjs/cientos'
+
+const currentAnimation = ref('cientosIdle')
+</script>
+
+<template>
+  <TresCanvas>
+    <Suspense>
+      <AnimatedSprite
+        image="https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png"
+        atlas="https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json"
+        :animation="currentAnimation"
+      />
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+::prose-warning
+`<AnimatedSprite />` loads resources asynchronously, so it must be wrapped in a `<Suspense />`.
+::
+
+## Compiling an atlas
+
+In typical usage, `<AnimatedSprite />` requires both the URL to a texture of compiled sprite images and a JSON atlas containing information about the sprites in the texture.
+
+* [example compiled texture](https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosTexture.png)
+* [example JSON atlas](https://raw.githubusercontent.com/Tresjs/assets/main/textures/animated-sprite/cientosAtlas.json)
+
+Compiling source images into a texture atlas is usually handled by third-party software. You may find [TexturePacker](https://www.codeandweb.com/texturepacker) useful.
+
+## Without an atlas
+
+There may be cases where you don't want to supply an atlas to the `atlas` prop. To do so:
+
+* Compile your source images into a single image texture.
+* Space each sprite into equally sized columns and rows in the compiled image texture.
+* Ensure no extra padding has been added to the compiled image texture.
+* Set the `atlas` prop to number of columns, number of rows as `[number, number]`.
+
+## Spritesheets in the wild
+
+::prose-warning
+In the wild, spritesheets are often distributed without atlases and the images are often compiled by hand. It can be difficult or impossible to use these resources directly with `<AnimatedSprite />`. In many cases, it's advisable to recompile the spritesheet.
+::
+
+### How to recompile an existing spritesheet image
+
+* Cut individual sprites from the spritesheet and paste them into separate layers in an image editing application, e.g., GIMP.
+* Align the layers for animation. Toggling layer visibility on/off will show you how the animation will display, frame to frame.
+* Export layers as individual images.
+* Name the individual images according to the following pattern: <br>`[animation name][frame number].[extension]` <br>E.g., walk000.png, walk001.png, idle000.png, idle001.png
+* Compile individual images into an image texture and atlas using a texture packing application, like TexturePacker.
+
+## Props
+
+| Name | Description | Default |
+| :--- | :---------- | :------ |
+| image | `string` – URL of the image texture or an image dataURL. This prop is not reactive. | |
+| atlas | `string \| Atlasish` – <ul><li>If `string`, the URL of the JSON atlas.</li><li>If `number`, the number of columns in the texture.</li><li>If `[number, number]`, the number of columns/rows in the texture.</li><li>If `AtlasData`, the atlas as a JS object.</li></ul><br>This prop is not reactive. | |
+| definitions | `Record<string, string>` – Specify playback frame order and repeated frames (delays). `definitions` is a record where keys are atlas animation names and values are strings containing an animation definition.<br><br>A "animation definition" comma-separated string of frame numbers with optional parentheses-surrounded durations.<br><br>Here is how various definition strings convert to arrays of frames for playback:<ul><li>"0,2,1" - [0,2,1], i.e., play frame 0, 2, then 1.</li><li>"2(10)" - [2,2,2,2,2,2,2,2,2,2], i.e., play from 2 10 times.</li><li>"1-4" - [1,2,3,4]</li><li>"10-5(2)" - [10,10,9,9,8,8,7,7,6,6,5,5]</li><li>"1-4(3),10(2)" - [1,1,1,2,2,2,3,3,3,4,4,4,10,10]</li></ul> | |
+| fps | `number` – Desired frames per second of the animation. | `30` |
+| loop | `boolean` – Whether or not the animation should loop. | `true` |
+| animation | `string \| [number, number] \| number` – If `string`, name of the animation to play. If `[number, number]`, start and end frames of the animation. If `number`, frame number to display. | `0` |
+| paused | `boolean` – Whether the animation is paused. | `false` |
+| reversed | `boolean` – Whether to play the animation in reverse. | `false` |
+| flipX | `boolean` – Whether the sprite should be flipped, left to right. | `false` |
+| resetOnEnd | `boolean` – For a non-looping animation, when the animation ends, whether to display the zeroth frame. | `false` |
+| asSprite | `boolean` – Whether to display the object as a THREE.Sprite. [See THREE.Sprite](https://threejs.org/docs/?q=sprite#api/en/objects/Sprite) | `true` |
+| center | `TresVector2` – Anchor point of the object. A value of [0.5, 0.5] corresponds to the center. [0, 0] is left, bottom. | `[0.5, 0.5]` |
+| alphaTest | `number` – Alpha test value for the material. [See THREE.Material.alphaTest](https://threejs.org/docs/#api/en/materials/Material.alphaTest) | `0.0` |
+| depthTest | `boolean` – Depth test value for the material. [See THREE.Material.depthTest](https://threejs.org/docs/#api/en/materials/Material.depthTest) | `true` |
+| depthWrite | `boolean` – Depth write value for the material. [See THREE.Material.depthWrite](https://threejs.org/docs/#api/en/materials/Material.depthWrite) | `true` |
+
+## Events
+
+| Event | Description | Argument |
+| - | - | - |
+| `frame` | Emitted when the displayed animation frame changes – at most once per tick, frames may be dropped | `string` – Name of the newly displayed frame |
+| `end` | Emitted when the animation ends – `props.loop` must be set to `false` | `string` – Name of the ending frame |
+| `loop` | Emitted when the animation loops – `props.loop` must be set to `true` | `string` – Name of the frame at the end of the loop |
+
+## Animation
+
+The `:animation` prop holds either the name of the currently playing animation or a range of frames to play, or a frame number to display.
+
+### Using named animations as animation
+
+When individual files are converted to a spritesheet/atlas, typically the original images' filenames will be included in the atlas.
+
+`<AnimatedSprite />` uses those filenames to automatically group images into animations.
+
+Use either of the following naming conventions for your source images ...
+
+* `[animation name][frame number].[file_extension]`
+* `[animation name]_[frame number].[file_extension]`
+
+... then `<AnimatedSprite />` will automatically make all `[animation name]` available for playback. Just pass `[animation name]` to the component's `:animation` prop.
+
+### Example
+
+For our Cientos heart cartoon character animation, here's how the filenames map to animation names.
+
+| Filenames | Animation name |
+| - | - |
+| cientosIdle0000.png, cientosIdle0001.png, ... | cientosIdle |
+| cientosIdleToWalkTransition0000.png | cientosIdleToWalkTransition |
+| cientosWalk0000.png, cientosWalk0001.png, ... | cientosWalk |
+
+## Definitions
+
+You can supply an object to the `:definitions` prop. Any [named animation](#animation) can be a key. The value is a string that specifies frame order and delays.
+
+### Demo
+
+In this demo, the 'idle' animation is comprised of six different images. By default, those images will play sequentially when the `:animation` prop is `'idle'`.
+
+But below, we've added a `:definitions` prop with this value for the `idle` key:
+
+```
+'0-5, 0(10), 1-2, 3(20), 4-5, 0-5(3)'
+```
+
+So, instead of playing images 0-5 sequentially, this animation will play instead:
+
+* `0-5` – Play all six images (`0-5`) of the animation normally.
+* `0(10), 1-2, 3(20), 4-5` – Play all six images again with a delay of ten frames at the bottom of the bounce (`0(10)`) and a delay of twenty frames at the top of the bounce (`3(20)`).
+* `0-5(3)` – Finally, play all six images of the animation with a delay of three frames each.
+
+## Center
+
+In addition to being the sprite's anchor point, the `:center` prop also controls how differently sized source images will "grow" and "shrink". Namely, they "grow out from" and "shrink towards" the center.
diff --git a/apps/cientos-docs/content/2.api/9.objects/cube-camera.md b/apps/cientos-docs/content/2.api/9.objects/cube-camera.md
new file mode 100644
index 000000000..842db33c2
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/cube-camera.md
@@ -0,0 +1,49 @@
+---
+title: CubeCamera
+description: Render environment maps for reflective objects.
+---
+
+::SceneControlsWrapper
+  ::ObjectsCubeCamera
+  ::
+::
+
+`<CubeCamera />` creates a `THREE.CubeCamera` and uses it to render an environment map of your scene. The environment map is then applied to component's children.
+
+`<CubeCamera />` makes its children invisible while rendering to the internal buffer so that they are not included in the reflection.
+
+## Usage
+
+```vue{2,10,15}
+<script setup lang="ts">
+import { CubeCamera, OrbitControls } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <OrbitControls />
+
+    <CubeCamera :resolution="256" :frames="Infinity">
+      <TresMesh>
+        <TresSphereGeometry :args="[1, 32, 32]" />
+        <TresMeshStandardMaterial :metalness="1" :roughness="0" />
+      </TresMesh>
+    </CubeCamera>
+
+    <TresAmbientLight :intensity="0.5" />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop             | Description                                          | Default       |
+| :--------------- | :--------------------------------------------------- | ------------- |
+| `frames`         | Number of frames to render. Set to `1` for a static scene. `Infinity` to update continuously.  | `Infinity`    |
+| `resolution`     | Resolution of the FBO                                | `255`         |
+| `near`           | Camera near                                          | `0.1`         |
+| `far`            | Camera far                                           | `1000`        |
+| `envMap`         | Custom environment map that is temporarily set as the scene's background | |
+| `fog`            | Custom fog that is temporarily set as the scene's fog | |
diff --git a/apps/cientos-docs/content/2.api/9.objects/fbo.md b/apps/cientos-docs/content/2.api/9.objects/fbo.md
new file mode 100644
index 000000000..5de3bcd3a
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/fbo.md
@@ -0,0 +1,121 @@
+---
+title: Fbo
+description: Render to texture using Frame Buffer Objects.
+---
+
+::SceneWrapper
+  ::ObjectsFbo
+  ::
+::
+
+An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.
+
+Cientos provides an `<Fbo />` component make it easy to use FBOs in your application.
+
+## Usage
+
+```vue{2,23-26}
+<script setup lang="ts">
+import { Fbo, OrbitControls } from '@tresjs/cientos'
+import type { TresObject } from '@tresjs/core'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
+
+const fboRef = shallowRef<InstanceType<typeof Fbo> | null>(null)
+const torusRef = shallowRef<TresObject | null>(null)
+
+function onLoop({ elapsed }: { elapsed: number }) {
+  if (!torusRef.value) { return }
+  torusRef.value.rotation.x = elapsed * 0.745
+  torusRef.value.rotation.y = elapsed * 0.361
+}
+</script>
+
+<template>
+  <TresCanvas :clear-color="0x222" @loop="onLoop">
+    <TresPerspectiveCamera :position="[0, 0.5, 5]" />
+    <OrbitControls />
+
+    <TresGridHelper :args="[10, 10]" />
+    <Fbo
+      ref="fboRef"
+      :depth="false"
+      :settings="{ samples: 1 }"
+    />
+    <TresMesh>
+      <TresBoxGeometry :args="[1, 1, 1]" />
+
+      <TresMeshBasicMaterial
+        :color="0xFFFFFF"
+        :map="fboRef?.instance?.texture ?? null"
+      />
+    </TresMesh>
+
+    <TresMesh
+      ref="torusRef"
+      :position="[3, 0, 0]"
+    >
+      <TresTorusGeometry :args="[1, 0.5, 16, 100]" />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop           | Description                                                                                                                                                            | Default              |
+| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| **`width`**    | `number` - The width of the FBO.                                                                                                                                       | Width of the canvas  |
+| **`height`**   | `number` - the height of the FBO                                                                                                                                       | Height of the canvas |
+| **`depth`**    | `boolean` - Whether or not the FBO should render the depth to a [`depthTexture`](https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture). | `false`              |
+| **`settings`** | `WebGLRenderTargetOptions` - Every other configuration property for the [`WebGLRenderTarget` class](https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget)      | `{}`                 |
+| **`autoRender`** | `boolean` - Whether to automatically render the FBO on the default scene. | `true`               |
+
+## useFBO
+
+An FBO (or Frame Buffer Object) is generally used to render to a texture. This is useful for post-processing effects like blurring, or for rendering to a texture that will be used as a texture in a later draw call.
+
+Cientos provides a `useFBO` composable to make it easy to use FBOs in your application.
+
+::prose-warning
+The `useFBO` composable must be used inside of a child component since it needs the context of TresCanvas.
+::
+
+### Usage
+
+```vue{2,4-11,20}
+<script setup lang="ts">
+import { useFBO } from '@tresjs/cientos'
+
+const fboTarget = useFBO({
+  depth: true,
+  width: 512,
+  height: 512,
+  settings: {
+    samples: 1,
+  },
+})
+</script>
+
+<template>
+  <TresMesh>
+    <TresBoxGeometry :args="[1, 1, 1]" />
+
+    <TresMeshBasicMaterial
+      :color="0xFFFFFF"
+      :map="fboTarget?.texture ?? null"
+    />
+  </TresMesh>
+</template>
+
+```
+
+### Options
+
+| Prop           | Description                                                                                                                                                            | Default              |
+| :------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
+| **`width`**    | `number` - The width of the FBO.                                                                                                                                       | Width of the canvas  |
+| **`height`**   | `number` - the height of the FBO                                                                                                                                       | Height of the canvas |
+| **`depth`**    | `boolean` - Whether or not the FBO should render the depth to a [`depthTexture`](https://threejs.org/docs/?q=webglre#api/en/renderers/WebGLRenderTarget.depthTexture). | `false`              |
+| **`settings`** | `WebGLRenderTargetOptions` - Every other configuration property for the [`WebGLRenderTarget` class](https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget)      | `{}`                 |
diff --git a/apps/cientos-docs/content/2.api/9.objects/gradient-texture.md b/apps/cientos-docs/content/2.api/9.objects/gradient-texture.md
new file mode 100644
index 000000000..1cc7ec318
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/gradient-texture.md
@@ -0,0 +1,48 @@
+---
+title: GradientTexture
+description: Create gradient textures for materials.
+---
+
+::SceneWrapper
+  ::ObjectsGradientTexture
+  ::
+::
+
+`<GradientTexture />` creates a gradient in a THREE.Texture and attaches it to its parent THREE.Material's `map` by default.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { GradientTexture } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 0, 5]" />
+
+    <TresMesh>
+      <TresPlaneGeometry :args="[2, 2]" />
+      <TresMeshBasicMaterial>
+        <GradientTexture
+          :stops="[0, 1]"
+          :colors="['#ff0000', '#0000ff']"
+        />
+      </TresMeshBasicMaterial>
+    </TresMesh>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop             | Description                                          | Default       |
+| :--------------- | :--------------------------------------------------- | ------------- |
+| `stops`          | A `number[]` of values between `0` and `1` representing the color positions in the gradient. `stops.length` should match `color.length`.              |            |
+| `colors` | A `THREE.ColorRepresentation[]` representing the colors in the gradient.                          |            |
+| `attach`    | Where the component should be attached within its parent. | `'map'`           |
+| `height`    | Height of the canvas used to draw the gradient. | `1024` |
+| `width`     | Width of the canvas used to draw the gradient.  | `16`   |
+| `type`      | `'linear' \| 'radial'` Type of gradient to draw. | `'linear'` |
+| `innerCircleRadius`     | Radius of the inner circle of a radial gradient.  | `0`   |
+| `outerCircleRadius`     | Radius of the outer circle of a radial gradient.  | `'auto'`   |
diff --git a/apps/cientos-docs/content/2.api/9.objects/html.md b/apps/cientos-docs/content/2.api/9.objects/html.md
new file mode 100644
index 000000000..eb4bb042a
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/html.md
@@ -0,0 +1,596 @@
+---
+title: HTML
+description: Allows you put DOM elements in your Tres.js scene.
+---
+
+This component allows you to project HTML content to any object in your scene. TresJS will automatically update the position of the HTML content to match the position of the object in the scene.
+
+🚀 Works seamlessly with both **PerspectiveCamera** and **OrthographicCamera** — the active camera is automatically detected by the `<Html>` component.
+
+::SceneWrapper
+  ::ObjectsHtml
+  ::
+::
+
+## Usage
+
+```vue{2,13-18}
+<script setup lang="ts">
+import { Html, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[2, 2, 5]" />
+    <OrbitControls />
+    <TresMesh :position="[1, 1, 1]">
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+      <Html
+        center
+        transform
+        :distance-factor="4"
+        :position="[0, 0, 0.65]"
+        :scale="[0.75, 0.75, 0.75]"
+      >
+        <h1 class="title">I'm a Box 📦</h1>
+      </Html>
+    </TresMesh>
+    <TresGridHelper />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+<style scoped>
+.title {
+  background-color: #1e1e1e;
+  color: #ffffff;
+  font-size: 0.75rem;
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+}
+</style>
+```
+
+## Occlusion
+
+By default, the HTML content will be visible through other objects in the scene. You can use the `occlude` prop to make the HTML content occlude other objects in the scene.
+
+Html can be hidden behind one or more objects in your scene using the `occlude` prop.
+
+```vue
+<Html occlude>
+```
+
+If `occlude`, then `<Html>` will be hidden by any objects that pass in front of its position.
+
+::SceneWrapper
+  ::ObjectsHtmlOcclusion
+  ::
+::
+
+<details>
+  <summary>Demo code</summary>
+
+```html
+<TresMesh :position="[0, 1, -2]">
+  <TresBoxGeometry />
+  <TresMeshNormalMaterial />
+  <html center transform occlude :distance-factor="4" :position="[0, 0, 2]" :z-index-range="[28, 0]">
+    <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">Move camera</h1>
+  </html>
+</TresMesh>
+```
+
+</details>
+
+You can also choose which object or objects should occlude the HTML content by passing either a single object ref or an array of object refs to the `occlude` prop:
+
+### Single occluder
+```vue
+<Html occlude="[mesh]">
+```
+
+::SceneWrapper
+  ::ObjectsHtmlSingleOccluder
+  ::
+::
+
+<details>
+  <summary>Demo code</summary>
+
+```html
+<TresMesh :position="[0, 1, 0]">
+  <TresBoxGeometry />
+  <TresMeshNormalMaterial />
+  <html center transform :occlude="[sphereRef]" :distance-factor="4" :z-index-range="[28, 0]">
+    <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">Move camera</h1>
+  </html>
+</TresMesh>
+```
+</details>
+
+### Multiple occluders
+```vue
+<Html occlude="[mesh1, mesh2, mesh3, ...]" />
+```
+
+OR
+
+```vue
+<Html occlude="meshesArray" />
+```
+In the demo below, a `v-for` loop generates multiple spheres around the cube.
+All resulting **`Mesh`** instances are collected into an array and passed to the **`occlude`** prop, allowing each sphere to occlude the HTML content.
+
+This demo also uses the **`on-occlude`** event, which is triggered whenever the occlusion state changes.
+Here, the event updates a **reactive value** to control element styles — for example, toggling between *light* and *dark* themes.
+
+::SceneWrapper
+  ::ObjectsHtmlOccludeComplexDemo
+  ::
+::
+
+<details>
+  <summary>Demo code</summary>
+
+```html
+<TresMesh :position="[0, 1, 0]">
+  <TresBoxGeometry />
+  <TresMeshNormalMaterial />
+  <html
+    v-bind="htmlProps"
+    :occlude="occluderRefs"
+    :distance-factor="4"
+    :z-index-range="[28, 0]"
+    @on-occlude="(event: boolean) => isOccluded = event"
+  >
+    <h1 class="bg-white dark:bg-dark text-xs p-1 rounded">Move camera</h1>
+  </html>
+</TresMesh>
+```
+</details>
+
+### Blending Occlusion
+
+`<Html>` can hide behind geometry as if it was part of the 3D scene using this mode. It can be enabled by using "blending" as the occlude prop.
+
+```vue
+<Html occlude="blending">
+```
+
+The **demo below ⬇️** *(left black example)* shows a **basic usage example**.
+
+::SceneWrapper
+  ::ObjectsHtmlOccludeBlendingDemo
+  ::
+::
+
+<details>
+  <summary>Demo code</summary>
+
+```vue{2,32,34-39,62-72,63-72,74-84,86-96,98-108}
+<script setup lang="ts">
+import { Html, Levioso, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { shallowRef } from 'vue'
+import { CircleGeometry, MeshStandardMaterial } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  clearAlpha: 1,
+  shadows: true,
+  alpha: true,
+}
+
+const targetDirectionLightRef = shallowRef(null)
+
+const geometries = [
+  {
+    component: 'TresBoxGeometry',
+    args: [1, 1, 1],
+  },
+  {
+    component: 'TresSphereGeometry',
+    args: [0.7, 32, 32],
+  },
+  {
+    component: 'TresTorusGeometry',
+    args: [0.5, 0.2, 16, 100],
+    bind: { castShadow: true, receiveShadow: true },
+  },
+]
+
+const customGeometry = shallowRef(new CircleGeometry(1.25, 32))
+
+const customMaterial = shallowRef(new MeshStandardMaterial({
+  color: 'red',
+  side: 2,
+  opacity: 1,
+  transparent: true,
+}))
+</script>
+
+<template>
+  <div class="html-demo-wrapper aspect-video">
+    <TresCanvas v-bind="gl">
+      <TresPerspectiveCamera :position="[0, 1.5, 7.5]" />
+      <OrbitControls />
+
+      <Levioso
+        v-for="(geometry, index) in geometries"
+        :key="`html-occlude-blending-demo-${index}`"
+        :speed="3"
+        :float-factor="3.5"
+        :rotation-factor="1"
+        :range="[-0.35, 0.35]"
+      >
+        <TresMesh :position="[index * 3.5 - 3.5, 1, 0]" v-bind="geometry.bind">
+          <component :is="geometry.component" :args="geometry.args" />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </Levioso>
+
+      <Html
+        center
+        transform
+        occlude="blending"
+        :position="[-4, .75, -2]"
+        :z-index-range="[28, 0]"
+      >
+        <div class="text-center text-s p-2 bg-[#1B1C1E] text-light">
+          BASIC 💛 <br />
+          <em>occlude=blending</em>
+        </div>
+      </Html>
+
+      <Html
+        center
+        transform
+        occlude="blending"
+        :position="[0, .85, -2]"
+        :geometry="customGeometry"
+        :z-index-range="[28, 0]"
+      >
+        <div class="text-xs p-8 text-center bg-[#F6B03B] text-dark">
+          CUSTOM <br /> <strong>CIRCLE <br /> GEOMETRY</strong>
+        </div>
+      </Html>
+
+      <Html
+        ref="targetDirectionLightRef"
+        center
+        transform
+        occlude="blending"
+        :position="[4, .5, -2]"
+        :material="customMaterial"
+        receive-shadow
+        :z-index-range="[28, 0]"
+      >
+        <div style="width: 100px; height: auto; aspect-ratio: 250/250;"></div>
+      </Html>
+
+      <Html
+        center
+        transform
+        occlude="blending"
+        :position="[4, 2.5, -2]"
+        :z-index-range="[28, 0]"
+      >
+        <div class="text-center text-xs p-2 text-dark bg-[#FF0000]">
+          <strong>HTML + Custom material </strong> <br />
+          <em>+ receive-shadow </em> ⬇️
+        </div>
+      </Html>
+
+      <TresDirectionalLight
+        v-if="targetDirectionLightRef?.instance"
+        :target="targetDirectionLightRef?.instance"
+        :shadow-normalBias="0.075"
+        :position="[5, 0, 5]"
+        :intensity="2"
+        cast-shadow
+      />
+
+      <TresGridHelper :position-y="-1" />
+      <TresAmbientLight :intensity="1" />
+    </TresCanvas>
+  </div>
+</template>
+
+<style scoped>
+.html-demo-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background-color: #82dbc5;
+}
+</style>
+
+```
+</details>
+
+## Custom Geometry
+
+By default, when using `occlude="blending"`, occlusion works correctly only with **rectangular HTML elements** (using a `PlaneGeometry`).
+For *non-rectangular content*, you can use the **`geometry`** prop to provide a matching custom geometry.
+
+In the **demo above ⬆️** *(middle yellow example)*, a [`CircleGeometry`](https://threejs.org/docs/#api/en/geometries/CircleGeometry) is used as a **custom geometry**.
+
+::prose-list
+- The `geometry` prop only defines the **occlusion shape** in 3D and does not modify your HTML content.
+- You can provide any [`BufferGeometry`](https://threejs.org/docs/#api/en/core/BufferGeometry), for example to simulate **CSS-like styles** such as `border-radius` using a rounded rectangle or squircle geometry (see [`RoundedRectangle / Squircle geometry`](https://discourse.threejs.org/t/roundedrectangle-squircle/28645) for example).
+::
+
+#### Custom Material
+
+You can also assign material properties to the HTML content using the `material` prop.
+In the **demo above ⬆️** *(right red example)*, a **custom material** is used with shadow.
+
+::prose-note
+The `material` prop is only available when `occlude="blending"` is **enabled**.
+::
+::prose-note
+Enable shadows using the **`castShadow`** and **`receiveShadow`** props.
+Shadows are supported **only** when using a **custom material**. By default, shadows do **not** work with *`MeshBasicMaterial`* or *`ShaderMaterial`*. <br />
+::
+
+## Using `<Transition>`
+The native Vue [`<Transition>`](https://vuejs.org/guide/built-ins/transition) component works seamlessly with `<Html>`.
+This means you can **animate** how your projected HTML content *enters* and *leaves* the scene, exactly as you would in a regular Vue application.
+
+::prose-note
+All **standard interactions** are supported just like on a regular HTML element — **hover effects**, **events**, and *any kind of DOM interaction* are fully possible.
+::
+
+::SceneControlsWrapper
+  ::ObjectsHtmlTransitionDemo
+  ::
+::
+
+<details>
+  <summary>Demo code</summary>
+
+```vue{2,73-92}
+<script setup lang="ts">
+import { Html, Levioso, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { ref } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  clearAlpha: 0,
+  shadows: true,
+  alpha: true,
+  antialias: true,
+}
+
+const rootRef = ref<HTMLElement>()
+
+const bgColor = ref('#F6B03B')
+
+const geometries = [
+  {
+    component: 'TresBoxGeometry',
+    args: [1, 1, 1],
+  },
+  {
+    component: 'TresSphereGeometry',
+    args: [0.7, 32, 32],
+  },
+  {
+    component: 'TresTorusGeometry',
+    args: [0.5, 0.2, 16, 100],
+  },
+  {
+    component: 'TresConeGeometry',
+    args: [0.7, 1.4, 32],
+  },
+]
+
+const getRandomBackgroundColor = (): string => {
+  const colors = ['#F6B03B', '#82DBC5', '#FF5733', '#33FF57', '#3357FF', '#F333FF', '#33FFF5']
+  const idx = Math.floor(Math.random() * colors.length)
+  return colors[idx] ?? '#F6B03B'
+}
+
+const updateBackgroundColor = () => {
+  bgColor.value = getRandomBackgroundColor()
+}
+</script>
+
+<template>
+  <div ref="rootRef" class="html-demo-wrapper">
+    <TresCanvas v-bind="gl" class="!pointer-events-none">
+      <TresPerspectiveCamera :position="[0, 1.5, 7.5]" />
+      <OrbitControls :dom-element="rootRef" />
+
+      <Levioso
+        v-for="(geometry, index) in geometries"
+        :key="`html-occlude-blending-demo-${index}`"
+        :speed="3"
+        :float-factor="3.5"
+        :rotation-factor="1"
+        :range="[-0.4, 0.4]"
+      >
+        <TresMesh :position="[(index - (geometries.length - 1) / 2) * 2, 1, 0]">
+          <component :is="geometry.component" :args="geometry.args" />
+          <TresMeshNormalMaterial />
+        </TresMesh>
+      </Levioso>
+
+      <Html
+        center
+        transform
+        occlude="blending"
+        :position="[0, .75, -2]"
+        :scale="1.15"
+        :z-index-range="[28, 0]"
+      >
+        <Transition name="transition-basic">
+          <h1
+            v-if="showTransition"
+            :style="{ backgroundColor: bgColor }"
+            class="html-demo-transition-heading will-change-transform transition-transform,background-color cursor-pointer duration-500 text-center p-2 text-light shadow-lg"
+            @click="updateBackgroundColor"
+          >
+            <strong>TRANSITION + </strong><br />
+            <em>occlude=blending 💛</em>
+          </h1>
+        </Transition>
+      </Html>
+
+      <TresGridHelper :position-y="-1.25" />
+      <TresAmbientLight :intensity="1" />
+    </TresCanvas>
+  </div>
+</template>
+
+<style scoped>
+.html-demo-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background-color: #82dbc5;
+}
+
+.html-demo-transition-heading:hover {
+  transform: scale(1.05);
+}
+
+.transition-basic-enter-from,
+.transition-basic-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+.transition-basic-enter-active,
+.transition-basic-leave-active {
+  transition: all 0.5s ease;
+}
+
+.transition-basic-enter-to,
+.transition-basic-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>
+```
+</details>
+
+### Using `iframes`
+
+You can achieve pretty cool results with the `Html` component by using iframes. For example, you can use an iframe to display a YouTube video in your scene or a webpage with a 3D model.
+
+::SceneWrapper
+  ::ObjectsHtmlIframeDemo
+  ::
+::
+
+<details>
+  <summary>Demo code</summary>
+
+```html
+<html
+  transform
+  center
+  :cast-shadow="true"
+  :receive-shadow="true"
+  occlude="blending"
+  :z-index-range="[28, 0]"
+  :position-y="2.5"
+  :portal="portalRef"
+  :style="{ userSelect: 'none' }"
+>
+  <iframe class="w-[700px] h-[500px]" src="https://tresjs.org" frameborder="0" :width="700" :height="500"></iframe>
+</html>
+```
+</details>
+
+:::info
+The demos use `:z-index-range="[28, 0]"` simply to ensure the HTML elements stay below the documentation header (which uses `z-index: 30`).
+**This value is for the docs only — you can ignore it or adjust it as needed.**
+:::
+
+## Props
+
+| Prop                | Description                                                                                                               | Default                                  |
+|---------------------|---------------------------------------------------------------------------------------------------------------------------|------------------------------------------|
+| **as**              | Wrapping *HTML element*.                                                                                                    | `'div'`                                  |
+| **wrapperClass**    | The `className` of the wrapping element. element.                                                                                    |                                          |
+| **prepend**         | Projects content *behind* the canvas.                                                                                        | `false`                                  |
+| **center**          | Adds a `transform: translate(-50%, -50%)`. <br>➡️ *Ignored in **transform** mode.*                                                               | `false`                                  |
+| **fullscreen**      | Aligns to the upper-left corner and fills the screen. <br>➡️ *Ignored in **transform** mode.*                                            | `false`                                  |
+| **distanceFactor**  | Children are scaled by this factor and also by distance to a `PerspectiveCamera`, or zoom when using an `OrthographicCamera`.      |                                          |
+| **zIndexRange**     | Defines the *Z-order range*.                                                                                                            | `[16777271, 0]`                          |
+| **portal**          | Reference to a target container (for rendering into a different DOM node). container.                                                                                            |                                          |
+| **transform**       | If `true`, applies `matrix3d` transformations — the element appears as if it is inside the 3D scene.                                                                                | `false`                                  |
+| **sprite**          | Renders as a *sprite*. <br>➡️ *Only in **transform** mode.*                                                                            | `false`                                  |
+| **calculatePosition** | Callback function to override the default positioning logic. <br>**Type:** `(object: Object3D, camera: Camera, size: { width: number; height: number }) => [number, number, number]` <br>Receives the related 3D object, the active camera, and the current viewport size, and must return `[x, y, z]` pixel coordinates for placing the HTML element. <br>➡️ *Ignored in **transform** mode.*                                                     |    [Default `calculatePosition`](https://github.com/Tresjs/cientos/blob/main/src/core/misc/html/utils.ts#L9-L19)                                      |
+| **occlude**         | Enables occlusion. Possible values: <br>- `true` → Occlusion against *all* scene objects <br> - `Ref<TresObject3D>[]` → Occlusion is enabled only against the specified objects. <br>- `'blending'` → Uses a *blending-based* occlusion method (CSS-like depth blending).                      |                                          |
+| **geometry**         | Custom `geometry` to be used.                                                                                              |                    [`PlaneGeometry`](https://threejs.org/docs/?q=geometry#api/en/geometries/PlaneGeometry)       |
+| **material** | **Custom shader _material_ used for the occlusion mesh.** <br> **Only applies when `occlude="blending"` is enabled** (an occlusion mesh is created). <br> _Ignored in raycast occlusion modes (`true`, object refs)._ | |
+| **transparentMaterial** | **Enables _transparent_ rendering for the occlusion material.** <br> **Only applies when `occlude="blending"` creates an occlusion mesh.** <br> _Ignored in raycast occlusion modes (`true`, object refs)._ | `false` |
+
+## Events
+
+| Event               | Description                                                                                                               |
+|---------------------|---------------------------------------------------------------------------------------------------------------------------|
+| onOcclude           | Called when the occlusion state changes.                                                                                  |
+
+## Exposed properties
+| Property          | Type                        | Description                                                                 |
+|-------------------|-----------------------------|-----------------------------------------------------------------------------|
+| **instance**      | `Ref<TresObject3D \| null>` | Reference to the root **`<TresGroup>`** used by `<Html>`. |
+| **isVisible**     | `Ref<boolean>`              | Reactive value that indicates whether the HTML content is **currently visible** or **occluded**. |
+| **occlusionMesh** | `Ref<TresObject3D \| null>` | Reference to the **occlusion mesh** created when `occlude="blending"` is **enabled**. Used internally for geometry-based occlusion. |
+
+## Caveats
+
+- ✨ When using **`<Html occlude>`**, if the `<Html>` component is **overlapping** or **inside a 3D object**, it will be considered **occluded** and therefore **hidden**. To avoid this, **adjust the position** of the `<Html>` component in your scene.
+
+- 🎨 When using **`<Html occlude="blending">`**, the HTML content is no longer **selectable** because it is rendered **behind the canvas**. This is required to achieve the blending effect.
+
+- ⚙️ When using a **custom material** with occlusion in `blending` mode, there are a few important requirements to ensure the HTML content renders correctly ⬇️
+
+  <details>
+    <summary>See more information</summary>
+
+  1. If you provide your own material, it must be **transparent** (`transparent: true`) with an **opacity < 1**.
+  2. If you are not providing a custom material, enable **`transparentMaterial`** so the internal shader becomes transparent.
+  3. The occlusion mesh requires a **fully transparent canvas background**; otherwise, thin borders or halo artifacts may appear.
+  4. To compensate for the transparent canvas, you may **reapply your previous clear-color as a CSS background** on the `html`, `body`, or a wrapper `div`.
+  </details>
+
+- 🔶 When using **`transparentMaterial`**, overlapping `<Html>` elements (especially multiple `occlude="blending"` instances) may cause **z-index or depth-order artifacts**.
+  This happens because the occlusion mesh uses transparency in the WebGL layer while the DOM element uses CSS stacking order.
+
+- 🔵 To avoid thin border artifacts when using `occlude="blending"`, make sure your `<TresCanvas>` is fully transparent:
+  ```vue
+  <TresCanvas :alpha="true" :clearAlpha="0" />
+  ```
+
+| Prop                | Description                                                                                                               | Default                                  |
+|---------------------|---------------------------------------------------------------------------------------------------------------------------|------------------------------------------|
+| **as**              | Wrapping html element.                                                                                                    | `'div'`                                  |
+| **wrapperClass**    | The className of the wrapping element.                                                                                    |                                          |
+| **prepend**         | Project content behind the canvas.                                                                                        | `false`                                  |
+| **center**          | Adds a -50%/-50% CSS transform. [Ignored in transform mode]                                                               | `false`                                  |
+| **fullscreen**      | Aligns to the upper-left corner, fills the screen. [Ignored in transform mode]                                            | `false`                                  |
+| **distanceFactor**  | Children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by an OrthographicCamera.      |                                          |
+| **zIndexRange**     | Z-order range.                                                                                                            | `[16777271, 0]`                          |
+| **portal**          | Reference to target container.                                                                                            |                                          |
+| **transform**       | If true, applies matrix3d transformations.                                                                                | `false`                                  |
+| **sprite**          | Renders as sprite, but only in transform mode.                                                                            | `false`                                  |
+| **calculatePosition** | Override default positioning function. [Ignored in transform mode]                                                      |                                          |
+| **occlude**         | Can be `true`, `Ref<TresObject3D>[]`, `'raycast'`, or `'blending'`. True occludes the entire scene.                       |                                          |
+| **geometry**         | Custom `geometry` to be use                                                                                              |                    `PlaneGeometry`       |
+| **material**         | Custom shader `material` to be use                                                                                              |                                          |
+
+## Events
+
+| Event               | Description                                                                                                               |
+|---------------------|---------------------------------------------------------------------------------------------------------------------------|
+| onOcclude           | Called when the occlusion state changes.                                                                                  |
diff --git a/apps/cientos-docs/content/2.api/9.objects/image.md b/apps/cientos-docs/content/2.api/9.objects/image.md
new file mode 100644
index 000000000..24f6e4468
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/image.md
@@ -0,0 +1,72 @@
+---
+title: Image
+description: Display image textures with shader-based effects.
+---
+
+::SceneControlsWrapper
+  ::ObjectsImage
+  ::
+::
+
+`<Image />` is a shader-based component that optionally loads then displays an image texture on a default plane or on your custom geometry.
+
+## Usage
+
+```vue{3,10-12}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Image } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 0, 5]" />
+
+    <Image
+      url="https://upload.wikimedia.org/wikipedia/commons/f/f0/Cyanistes_caeruleus_Oulu_20150516.JPG"
+      :scale="[2, 2]"
+    />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+::prose-warning
+`<Image />` is a THREE.Mesh and most Mesh attributes can be used as props on the component.
+::
+
+| Prop             | Description                                          | Default       |
+| :--------------- | :--------------------------------------------------- | ------------- |
+| `segments`          | Number of divisions in the default geometry.              | `1`           |
+| `scale` | Scale of the geometry. `number \| [number, number]`                         | `1`           |
+| `color`    | Color multiplied into the image texture.                         | `'white'`           |
+| `zoom`          | Shrinks or enlarges the image texture. | `1` |
+| `radius`        | Border radius applied to the image texture. (Intended for rectangular geometries. Use with `transparent`.) | `0` |
+| `grayscale`        | Power of grayscale effect. 0 is off. 1 is full grayscale. | `0` |
+| `toneMapped`        | Whether this material is tone mapped according to the renderers toneMapping settings. [See THREE.material.tonemapped](https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped) | `0` |
+| `transparent` |  Whether the image material should be transparent. [See THREE.material.transparent](https://threejs.org/docs/?q=material#api/en/materials/Material.transparent) | `false` |
+| `transparent` |  Whether the image material should be transparent. [See THREE.material.transparent](https://threejs.org/docs/?q=material#api/en/materials/Material.transparent) | `false` |
+| `opacity` | Opacity of the image material. [See THREE.material.transparent](https://threejs.org/docs/?q=material#api/en/materials/Material.transparent) | `1` |
+| `side` | THREE.Side of the image material. [See THREE.material.side](https://threejs.org/docs/?q=material#api/en/materials/Material.side) | `FrontSide` |
+| `texture` | Image texture to display on the geometry. |  |
+| `url` | Image URL to load and display on the geometry. |  |
+
+## Caveats
+
+By default, images loaded via the `url` prop use the renderer’s output color space. For advanced control, pass a `THREE.Texture` via the `texture` prop and set its `colorSpace` (e.g., `THREE.SRGBColorSpace` or `THREE.LinearSRGBColorSpace`).
+
+```vue
+<script setup>
+import { useTexture } from '@tresjs/cientos'
+import { SRGBColorSpace } from 'three'
+const { state } = useTexture(URL)
+watch(state, (texture) => {
+  texture.colorSpace = SRGBColorSpace // assign a custom color space
+})
+</script>
+
+<template>
+  <Image :texture="texture" />
+</template>
+```
diff --git a/apps/cientos-docs/content/2.api/9.objects/index.md b/apps/cientos-docs/content/2.api/9.objects/index.md
new file mode 100644
index 000000000..6f2904dd0
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/index.md
@@ -0,0 +1,6 @@
+---
+title: Objects
+description: 3D objects and texture components
+---
+
+Components for creating 3D objects, sprites, text, and textures in your scene.
diff --git a/apps/cientos-docs/content/2.api/9.objects/marching-cubes.md b/apps/cientos-docs/content/2.api/9.objects/marching-cubes.md
new file mode 100644
index 000000000..5319c2a3b
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/marching-cubes.md
@@ -0,0 +1,75 @@
+---
+title: MarchingCubes
+description: Create organic blob-like shapes using metaballs.
+---
+
+::SceneControlsWrapper
+  ::ObjectsMarchingCubes
+  ::
+::
+
+`<MarchingCubes />` is a wrapper around [THREE's Marching Cubes](https://threejs.org/examples/#webgl_marchingcubes).
+
+It includes 3 components:
+
+* `<MarchingCubes />` – container element for `<MarchingCube />`s and `<MarchingPlane />`s
+* `<MarchingCube />` - an individual metaball
+* `<MarchingPlane />` – optional bounding plane that interacts with the metaballs
+
+## Usage
+
+```vue{2,15-23}
+<script setup lang="ts">
+import { MarchingCube, MarchingCubes, MarchingPlane, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { NoToneMapping, Vector3 } from 'three'
+
+const rand = () => (Math.random() - 0.5) * 1.25
+const positions = Array.from({ length: 40 }, () => new Vector3(rand(), rand(), rand()))
+</script>
+
+<template>
+  <TresCanvas clear-color="#222" :tone-mapping="NoToneMapping">
+    <TresPerspectiveCamera />
+    <OrbitControls />
+
+    <MarchingCubes :resolution="40" :max-poly-count="40000">
+      <MarchingPlane plane-type="y" />
+      <MarchingCube
+        v-for="position, i of positions"
+        :key="i"
+        :position="position"
+      />
+      <TresMeshPhongMaterial specular="#111111" :shininess="30" color="#049ef4" :reflectivity="1" />
+    </MarchingCubes>
+
+    <TresAxesHelper />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[0, 200, 0]" />
+    <TresDirectionalLight color="#ffffff" :intensity="3" :position="[100, 200, 100]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop | Description | Default |
+| :----| :---------- | ------- |
+| `resolution` | Resolution of the marching cube field. Higher resolution produces smoother meshes at the cost of performance and memory. | `28` |
+| `maxPolyCount` | Maximum number of polygons to generate.  | `10000` |
+| `enableUvs` | Whether UVs are enabled. | `false` |
+| `enableColors` | Whether vertex colors are enabled. | `false` |
+
+## MarchingCube Props
+
+| Prop | Description | Default |
+| :----| :---------- | ------- |
+| `strength` | How strongly this cube affects the marching cube field. | `0.5` |
+| `subtract` | How quickly strength moves to `0` over distance. | `12` |
+
+## MarchingPlane Props
+
+| Prop | Description | Default |
+| :----| :---------- | ------- |
+| `planeType` | Which axis the plane appears on. `'x' \| 'y' \| 'z'` | `'x'` |
+| `strength` | How strongly this plane affects the marching cube field. | `0.5` |
+| `subtract` | How quickly strength moves to `0` over distance. | `12` |
diff --git a/apps/cientos-docs/content/2.api/9.objects/reflector.md b/apps/cientos-docs/content/2.api/9.objects/reflector.md
new file mode 100644
index 000000000..09cb7c01f
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/reflector.md
@@ -0,0 +1,143 @@
+---
+title: Reflector
+description: Create real-time reflections of your scene.
+---
+
+::SceneControlsWrapper
+  ::ObjectsReflector
+  ::
+::
+
+The `cientos` package provides an abstraction of the [Reflector class](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js), which creates a Mesh showing a real-time reflection of your scene.  This Mesh extends from `Mesh` so all the default props can be passed as well:
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Reflector } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :position="[0, 0, 3]" />
+    <OrbitControls />
+
+    <Suspense>
+      <Reflector
+        :rotation="[-Math.PI * 0.5, 0, 0]"
+        :position-y="-2"
+        color="#fff"
+      >
+        <TresCircleGeometry :args="[10, 10]" />
+      </Reflector>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop              | Description                                          | Default                   |
+| :---------------- | :--------------------------------------------------- | ------------------------- |
+| **color**         | The base color that's combine with the mirror effect | '#333'                 |
+| **textureWidth**  | the width of the texture to render on the mirror     | 512                       |
+| **textureHeight** | the height of the texture to render on the mirror    | 512                       |
+| **clipBias**      | to use the clipBias property                         | 0                         |
+| **multisample**   | how many samplers will be render                     | 4                         |
+| **shader**        | The texture of the smoke.                            | Reflector.ReflectorShader |
+
+::prose-warning
+All the props except the `color`, are not reactive
+::
+
+## Custom mirror effect
+
+For more complex effect you can provide your own shaders, you could do this creating an object and pass the uniforms, vertexShaders or fragmentShaders:
+
+```vue
+<script setup lang="ts">
+import vertexShader from 'MyCustomVertexShader.glsl'
+
+const customShader = {
+  vertexShader
+}
+</script>
+
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :position="[0, 0, 3]" />
+    ...
+    <Reflector
+      :rotation="[-Math.PI * 0.5, 0, 0]"
+      :position-y="-2"
+      color="#fff"
+      :shader="customShader"
+    >
+      <TresCircleGeometry :args="[10, 10]" />
+    </Reflector>
+    ...
+  </TresCanvas>
+</template>
+```
+
+The Reflector shader use the following configuration by default:
+
+You can extend, modify or just play with them
+
+### Default shader
+
+```js
+const shader = {
+  name: 'ReflectorShader',
+  uniforms: {
+    color: {
+      value: null
+    },
+    tDiffuse: {
+      value: null
+    },
+    textureMatrix: {
+      value: null
+    }
+  },
+  vertexShader: /* glsl */`
+  uniform mat4 textureMatrix;
+  varying vec4 vUv;
+
+  #include <common>
+  #include <logdepthbuf_pars_vertex>
+
+  void main() {
+    vUv = textureMatrix * vec4( position, 1.0 );
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+    #include <logdepthbuf_vertex>
+
+  }`,
+  fragmentShader: /* glsl */`
+  uniform vec3 color;
+  uniform sampler2D tDiffuse;
+  varying vec4 vUv;
+
+  #include <logdepthbuf_pars_fragment>
+
+  float blendOverlay( float base, float blend ) {
+    return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
+  }
+
+  vec3 blendOverlay( vec3 base, vec3 blend ) {
+    return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
+  }
+
+  void main() {
+    #include <logdepthbuf_fragment>
+
+    vec4 base = texture2DProj( tDiffuse, vUv );
+    gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
+
+    #include <tonemapping_fragment>
+    #include <colorspace_fragment>
+  }`
+
+}
+```
diff --git a/apps/cientos-docs/content/2.api/9.objects/text-3d.md b/apps/cientos-docs/content/2.api/9.objects/text-3d.md
new file mode 100644
index 000000000..8ec1411c8
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/9.objects/text-3d.md
@@ -0,0 +1,80 @@
+---
+title: Text3D
+description: Render text in 3D using TextGeometry.
+---
+
+::SceneControlsWrapper
+  ::ObjectsText
+  ::
+::
+
+`<Text3D />` is a component that renders text in 3D. It is a wrapper around the [TextGeometry](https://threejs.org/docs/#api/en/geometries/TextGeometry) class.
+
+## Usage
+
+To use the `<Text3D />` component you need to pass the `font` prop with the URL of the font JSON file you want to use. TextGeometry uses `typeface`.json generated fonts, you can generate yours [here](http://gero3.github.io/facetype.js/)
+
+```vue
+<template>
+  <TresCanvas>
+    <Suspense>
+      <Text3D
+        text="TresJS"
+        font="/fonts/FiraCodeRegular.json"
+      >
+        <TresMeshNormalMaterial />
+      </Text3D>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+Notice that you need to pass the `<TresMeshNormalMaterial />` component as a child of the `<Text3D />` component. This is because `<Text3D />` is a `Mesh` component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:
+
+```vue
+<template>
+  <TresCanvas>
+    <Suspense>
+      <Text3D font="/fonts/FiraCodeRegular.json">
+        TresJS
+        <TresMeshNormalMaterial />
+      </Text3D>
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+In addition, you can use the power of Vue to add reactivity, but you need to apply the needUpdates prop, for example you can create a reactive value, apply a v-model and make the bound, the Text3D component will update
+
+```vue
+<template>
+  <input v-model="myReactiveText" />
+  <TresCanvas>
+    <Suspense>
+      <Text3D
+        :text="myReactiveText"
+        font="/fonts/FiraCodeRegular.json"
+        center
+        need-updates
+      />
+    </Suspense>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop               | Description                                                            | Default |
+| :----------------- | :--------------------------------------------------------------------- | ------- |
+| **font**           | The font data or font name to use for the text.                        |         |
+| **text**           | The text to display.                                                   |         |
+| **size**           | The size of the text.                                                  | 0.5     |
+| **height**         | The height of the text.                                                | 0.2     |
+| **curveSegments**  | The number of curve segments to use when generating the text geometry. | 5       |
+| **bevelEnabled**   | A flag indicating whether beveling should be enabled for the text.     | true    |
+| **bevelThickness** | The thickness of the beveled edge on the text.                         | 0.05    |
+| **bevelSize**      | The size of the beveled edge on the text.                              | 0.02    |
+| **bevelOffset**    | The offset of the beveled edge on the text.                            | 0       |
+| **bevelSegments**  | The number of bevel segments to use when generating the text geometry. | 4       |
+| **center**         | To center the text                                                     | false   |
+| **needUpdates**    | This props add reactivity                                              | false   |
diff --git a/apps/cientos-docs/content/2.api/index.md b/apps/cientos-docs/content/2.api/index.md
new file mode 100644
index 000000000..d4642940d
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/index.md
@@ -0,0 +1,54 @@
+---
+title: All
+description: Explore the complete API reference
+---
+
+## 📦 Abstraction
+
+::ApiList{listName="abstraction-list" path="/api/abstractions"}
+::
+
+## 🎮 Controls
+
+::ApiList{listName="controls-list" path="/api/controls"}
+::
+
+## 📂 Loaders
+
+::ApiList{listName="loaders-list" path="/api/loaders"}
+::
+
+## 🎨 Materials
+
+::ApiList{listName="materials-list" path="/api/materials"}
+::
+
+## 🔷 Shapes
+
+::ApiList{listName="shapes-list" path="/api/shapes"}
+::
+
+## 📊 Debug & Performance
+
+::ApiList{listName="debug-list" path="/api/debug-performance"}
+::
+
+## 💡 Light & Shadow
+
+::ApiList{listName="light-list" path="/api/light-shadow"}
+::
+
+## 🎭 Staging
+
+::ApiList{listName="staging-list" path="/api/staging"}
+::
+
+## 🎬 Objects
+
+::ApiList{listName="objects-list" path="/api/objects"}
+::
+
+## 🛠️ Miscellaneous
+
+::ApiList{listName="misc-list" path="/api/miscellaneous"}
+::
diff --git a/apps/cientos-docs/content/2.api/miscellaneous/bounds.md b/apps/cientos-docs/content/2.api/miscellaneous/bounds.md
new file mode 100644
index 000000000..b8fe46bb8
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/miscellaneous/bounds.md
@@ -0,0 +1,108 @@
+---
+title: Bounds
+description: Calculate boundary box and center camera accordingly.
+---
+
+::SceneWrapper
+  ::MiscellaneousBounds
+  ::
+::
+
+Calculates a boundary box and centers the camera accordingly. Its `lookAt` method accepts a target to look at imperatively e.g., after a click.
+
+::prose-note
+If you are using other camera controls, be sure to make them the 'default'.
+
+```vue
+<OrbitControls make-default />
+```
+::
+
+## Usage
+
+```vue{3,6,7,9-11,18,23}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { Bounds, OrbitControls } from '@tresjs/cientos'
+import { shallowRef } from 'vue'
+
+const boundsRef = shallowRef()
+const objectRef = shallowRef()
+
+function focusObject() {
+  boundsRef.value?.instance.lookAt(objectRef.value)
+}
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <OrbitControls make-default />
+    <Bounds ref="boundsRef" clip use-mounted :offset="0.75">
+      <TresMesh ref="objectRef" @click="(e) => focusObject()">
+        <TresBoxGeometry />
+        <TresMeshNormalMaterial />
+      </TresMesh>
+    </Bounds>
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Name | Description | Default |
+| :--- | :--- | ---- |
+| `duration` | Duration of the `lookAt` animation in seconds | `1.0` |
+| `offset` | Additional distance from the target when using `lookAt` with a `Box3` or `Object3D` | `0.2` |
+| `useResize` | Whether to re`lookAt` the last target when the screen is resized | `false` |
+| `useMounted` | Whether to `lookAt` the `Bounds` object when the component is mounts | `false` |
+| `clip` | Whether to adjust the camera's `near` and `far` settings when using `lookAt` | `false` |
+| `easing` | Animation's easing function. `t` and the returned value should be in the interval `[0, 1]` | Cubic ease out |
+
+## lookAt
+
+`<Bounds />` `lookAt` points the camera at its first argument: an `Object3D`, `Box3` or `Vector3`.
+
+### Method Signatures
+
+```
+/**
+ * Calculates a boundary box around an `Object3D` and centers the camera accordingly.
+ */
+lookAt(object: Object3D): void
+
+/**
+ * Calculates a boundary box around an `Object3D` and centers the camera accordingly and animates the camera's `up` vector.
+ */
+lookAt(object: Object3D, up: VectorFlexibleParams): void
+
+/**
+ * Centers the camera's viewport on a `Box3`.
+ */
+lookAt(box3: Box3): void
+
+/**
+ * Centers the camera's viewport on a `Box3` and animates the camera's `up` vector.
+ */
+lookAt(box3: Box3, up: VectorFlexibleParams): void
+
+/**
+ * Look at a `Vector3`.
+ */
+lookAt(target: VectorFlexibleParams): void
+
+/**
+ * Look at a `Vector3`, if provided. Move the camera to `position`.
+ */
+lookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams): void
+
+/**
+ * Look at a `Vector3`, if provided. Move the camera to `position` and animate the camera's `up` vector.
+ */
+lookAt(target: VectorFlexibleParams | undefined | null, position: VectorFlexibleParams, up: VectorFlexibleParams): void
+
+/**
+ * Rerun `lookAt` using the prior arguments. If `lookAt` has never been called, uses the `Bounds` object.
+ */
+lookAt(): void
+```
diff --git a/apps/cientos-docs/content/2.api/miscellaneous/global-audio.md b/apps/cientos-docs/content/2.api/miscellaneous/global-audio.md
new file mode 100644
index 000000000..32accbf77
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/miscellaneous/global-audio.md
@@ -0,0 +1,43 @@
+---
+title: GlobalAudio
+description: Add global sound to your scene.
+---
+
+The `cientos` package provides a `<GlobalAudio />` component that serves to easily add a global sound to your scene.
+
+Reference: [Audio](https://threejs.org/docs/index.html?q=audio#api/en/audio/Audio)
+
+## Usage
+
+```vue{3,9}
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { GlobalAudio } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 0, 7.5]" />
+    <GlobalAudio :src="exampleAudio" />
+  </TresCanvas>
+</template>
+```
+
+*The `src` prop is required
+
+## Props
+
+| Prop           | Description                                              | Default               |
+| :------------- | :------------------------------------------------------- | --------------------- |
+| `src`          | Path to your audio file                                  |                       |
+| `playTrigger`  | Id of the DOM element that triggers the play/pause state | `renderer.domElement` |
+| `stopTrigger`  | Id of the DOM element that triggers the stop state       |                       |
+| `loop`         | If the audio must be replayed when ends                  | `false`               |
+| `volume`       | Volume of the audio                                      | `0.5`                 |
+| `playbackRate` | PlaybackRate of the audio                                | `1`                   |
+
+## Events
+
+| Event       | Description                                                      |
+| :---------- | :--------------------------------------------------------------- |
+| `isPlaying` | Dispatched when the Audio change its state (play, pause or stop) |
diff --git a/apps/cientos-docs/content/2.api/miscellaneous/index.md b/apps/cientos-docs/content/2.api/miscellaneous/index.md
new file mode 100644
index 000000000..ac9695d88
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/miscellaneous/index.md
@@ -0,0 +1,6 @@
+---
+title: Miscellaneous
+description: Various utility components and composables
+---
+
+Utility components and composables for audio, animations, intersections, and more.
diff --git a/apps/cientos-docs/content/2.api/miscellaneous/mouse-parallax.md b/apps/cientos-docs/content/2.api/miscellaneous/mouse-parallax.md
new file mode 100644
index 000000000..f44056c5d
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/miscellaneous/mouse-parallax.md
@@ -0,0 +1,49 @@
+---
+title: MouseParallax
+description: Create parallax effects based on mouse movement.
+---
+
+::SceneControlsWrapper
+  ::MiscellaneousMouseParallax
+  ::
+::
+
+`<MouseParallax />` is a component that allows you to easily create a [parallax](https://en.wikipedia.org/wiki/Parallax) effect. The camera will update automatically according to the mouse position.
+
+## Usage
+
+You only need to import it and add it to your template as `<MouseParallax />`. Additionally, you can pass the following props:
+
+`factor` is a number to increase the movement range of the camera. This could be an array of two values corresponding to the x and y values, in that order: `:factor=[x,y]`.
+
+`ease` is a number that smooths the movement. This could be an array of two values corresponding to the x and y values, in that order: `:ease=[x,y]`.
+
+`local` is a boolean that enables movement based on the position of the mouse on the canvas rather than the window.
+
+```vue{2,12}
+<script setup lang="ts">
+import { MouseParallax, TorusKnot } from "@tresjs/cientos";
+import { TresCanvas } from "@tresjs/core";
+</script>
+
+<template>
+  <TresCanvas clear-color="#82DBC5">
+    <TresPerspectiveCamera :position="[0, 0, 7.5]" :fov="75" />
+    <TorusKnot>
+      <TresMeshToonMaterial color="orange" />
+    </TorusKnot>
+    <MouseParallax :factor="5" :ease="[3, 0.1]" />
+    <TresAmbientLight />
+    <TresDirectionalLight :position="[0, 2, 4]" />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop         | Description                                                                 | Default |
+| :----------- | :-------------------------------------------------------------------------- | ------- |
+| **disabled** | Enable or disable the effect                                                | false   |
+| **factor**   | Increase the range of the parallax                                          | 2.5     |
+| **ease**     | Increase the camera movement speed                                          | 0.1     |
+| **local**    | Whether the mouse coordinates are calculated from the element or the window | false   |
diff --git a/apps/cientos-docs/content/2.api/miscellaneous/positional-audio.md b/apps/cientos-docs/content/2.api/miscellaneous/positional-audio.md
new file mode 100644
index 000000000..db13378e9
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/miscellaneous/positional-audio.md
@@ -0,0 +1,114 @@
+---
+title: PositionalAudio
+description: Spatially positioned audio in 3D space.
+---
+
+::SceneControlsWrapper
+  ::MiscellaneousPositionalAudio
+  ::
+::
+
+The `cientos` package provides an abstraction of the [PositionalAudio](https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio), `<PositionalAudio>` is an object specifically designed for controlling sounds in a scene graph space. This allows, for the simulation of various audio environments, creating a more immersive user experience.
+
+`<PositionalAudio>` includes a helper 🛠️ that allows you to view the directional cone of te audio. The helper is based on the [PositionalAudioHelper](https://threejs.org/docs/#examples/en/helpers/PositionalAudioHelper) class.
+
+## Usage
+
+The `<PositionalAudio>` component is very simple to set up and use, allowing you to bring your 3D scenes to life.  All you need to do is call the `<PositionalAudio>` component and set the `url`. It must be wrapped around the `<Suspense>` component to enable it to load your audio asynchronously. 💥
+
+```vue{2,17-19}
+<script setup lang="ts">
+import { Box, PositionalAudio } from '@tresjs/cientos'
+import { onUnmounted, shallowRef } from 'vue'
+
+const positionalAudioRef = shallowRef(null)
+
+onUnmounted(() => {
+  positionalAudioRef?.value?.dispose()
+})
+</script>
+
+<template>
+  <TresCanvas>
+    <Box :args="[1, 1, 1]">
+      <TresMeshNormalMaterial />
+      <Suspense>
+        <PositionalAudio
+          ref="positionalAudioRef"
+          url="your-sound.mp3"
+        />
+      </Suspense>
+    </Box>
+  </TresCanvas>
+</template>
+```
+
+::prose-warning
+AudioContext is authorised when an user gesture has been made on the page. `:autoplay="true"` cannot be activated if no user gesture has been made previously [`read more`](https://goo.gl/7K7WLu).
+If you are sure that there will be a user gesture before your `<PositionAudio>` component appears/is created, you can directly add `:ready="true"` and `autoplay="true"` for a direct launch.
+::
+
+## How does it work?
+<img class="mx-auto" src="/cientos/sketch.jpg" />
+
+## Props
+
+| Prop              | Description                                          | Default                   |
+| :---------------- | :--------------------------------------------------- | ------------------------- |
+| **url**        | `string` - **required** — The path or URL to the file. |                    |
+| **helper**        | `boolean` — Selects whether helper mode is enabled. <br> *(Useful for visualising the angle of sound propagation)*  | `false`                   |
+| **distance**        | `number` — The distance at which the volume reduction starts taking effect. ***A non-negative number.***  | `1`                   |
+| **ready**        | `boolean` — Tells `<PositionalAudio>` that `AudioContext` is authorised because an user gesture has been made on the page. This is imperative, as `autoplay` cannot be activated if no user gesture has been made previously (https://goo.gl/7K7WLu). <br> | `false`                   |
+| **autoplay**        | `boolean` — Selects whether the audio is launched automatically. Please refer to the `ready` prop for a better understanding of how to use autoplay.  | `false`                   |
+| **loop**        | `boolean` — Specifies whether the audio should loop. |      `false`              |
+| **innerAngle**        | `number` —  A parameter for directional audio sources, this is an angle, inside of which there will be no volume reduction. |      `360`              |
+| **outerAngle**        | `number` —  A parameter for directional audio sources, this is an angle, outside of which the volume will be reduced to a constant value of `outerGain` prop. |      `0`              |
+| **outerGain**        | `number` —  A parameter for directional audio sources, this is the amount of volume reduction outside of the `outerAngle` prop. When the value is `0` no sound can be heard. |      `0`              |
+
+## Exposed properties
+
+| Event       | Description                                                      |
+| :---------- | :--------------------------------------------------------------- |
+| `instance` | Instance reference — Inheritance of [PositionalAudio](https://threejs.org/docs/index.html?q=posi#api/en/audio/PositionalAudio).|
+| `play()` | Play audio — *Cannot be fired if audio is already running.* |
+| `pause()` | Pause audio — *Cannot be fired if audio is already paused.* |
+| `stop()` | Stop audio — *Cannot be fired if audio is already stopped.* |
+| `dispose()` | Dispose component — Deletion of the AudioListener in the camera, disconnection of the audio source and deletion of the PositionalAudioHelper (if it exists). |
+
+```typescript
+const positionalAudioRef = shallowRef(null)
+
+console.log(positionalAudioRef.value.instance) // instance properties
+
+const handlerAudio = (action: string) => {
+  if (!positionalAudioRef.value) { return }
+
+  const { play, pause, stop } = positionalAudioRef.value
+
+  if (action === 'play') { play() }
+  else if (action === 'pause') { pause() }
+  else if (action === 'stop') { stop() }
+}
+```
+
+```vue
+<template>
+  <button @click="handlerAudio('play')">play</button>
+  <button @click="handlerAudio('pause')">pause</button>
+  <button @click="handlerAudio('stop')">stop</button>
+
+  <TresCanvas>
+    <Sphere>
+      <Suspense>
+        <PositionalAudio />
+      </Suspense>
+    </Sphere>
+  </TresCanvas>
+</template>
+```
+
+## Events
+
+| Event       | Description                                                      |
+| :---------- | :--------------------------------------------------------------- |
+| `is-playing` | Triggered when the audio changes its state (play, pause, or stop) <br> `@is-playing="(e) => yourIsPlayingRef = e"` |
diff --git a/apps/cientos-docs/content/2.api/miscellaneous/use-animations.md b/apps/cientos-docs/content/2.api/miscellaneous/use-animations.md
new file mode 100644
index 000000000..599c7c856
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/miscellaneous/use-animations.md
@@ -0,0 +1,63 @@
+---
+title: useAnimations
+description: Composable for managing model animations with AnimationMixer.
+---
+
+`useAnimations` is a composable that returns a `shallowReactive` with all the models actions based on the animations provided. It is a wrapper around the [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer) class.
+
+## Usage
+
+### Basic Usage (Automatic Updates)
+
+By default, `useAnimations` automatically updates the animation mixer on each frame using the `useLoop` composable:
+
+```ts{1,7}
+import { useAnimations, useGLTF } from '@tresjs/cientos'
+
+const { state } = useGLTF('/models/ugly-naked-bunny.gltf')
+
+const animations = computed(() => state.value?.animations || [])
+const model = computed(() => state?.value?.scene)
+const { actions } = useAnimations(animations, model)
+
+const currentAction = ref()
+
+watch(actions, (newActions) => {
+  currentAction.value = newActions.Greeting
+  currentAction.value.play()
+})
+```
+
+### Manual Updates
+
+For more control over when the animation mixer updates, you can set `manualUpdate: true` and handle the updates yourself:
+
+```ts{1,8-10,15}
+import { useAnimations, useGLTF } from '@tresjs/cientos'
+import { useLoop } from '@tresjs/core'
+
+const { state } = useGLTF('/models/ugly-naked-bunny.gltf')
+
+const animations = computed(() => state.value?.animations || [])
+const model = computed(() => state?.value?.scene)
+const { actions, mixer } = useAnimations(animations, model, {
+  manualUpdate: true,
+})
+
+// Handle updates manually
+const { onBeforeRender } = useLoop()
+onBeforeRender(({ delta }) => {
+  mixer.value.update(delta)
+})
+
+const currentAction = ref()
+
+watch(actions, (newActions) => {
+  currentAction.value = newActions.Greeting
+  currentAction.value.play()
+})
+```
+
+## Options
+
+- `manualUpdate` (optional): When set to `true`, disables automatic animation mixer updates. You'll need to call `mixer.value.update(delta)` manually. Default is `false`.
diff --git a/apps/cientos-docs/content/2.api/miscellaneous/use-gltf-exporter.md b/apps/cientos-docs/content/2.api/miscellaneous/use-gltf-exporter.md
new file mode 100644
index 000000000..177def4e0
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/miscellaneous/use-gltf-exporter.md
@@ -0,0 +1,58 @@
+---
+title: useGLTFExporter
+description: Export 3D objects to GLTF format.
+---
+
+[GLTFExporter](https://threejs.org/docs/index.html?q=expo#examples/en/exporters/GLTFExporter) is an addon in threeJs that allows you to download any object3D in a [GLTF](https://www.khronos.org/gltf) format. **TresJS** provides a composable that simplifies this process with just a few lines of code.
+
+## Basic usage
+
+```vue{3,10}
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { useGLTFExporter } from '@tresjs/cientos'
+import { shallowRef } from 'vue'
+
+const boxRef = shallowRef()
+
+// the second argument – options – is not required
+const downloadBox = () => {
+  useGLTFExporter(boxRef.value, { fileName: 'cube', binary: true })
+}
+</script>
+<template>
+  <TresCanvas clear-color="#82DBC5" window-size >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <TresMesh
+      ref="boxRef"
+      :position-z="30"
+      :scale="10"
+      @click="downloadBox"
+    >
+      <TresBoxGeometry :args="[1, 1, 1]" />
+      <TresMeshStandardMaterial :color="0x00ff00" />
+    </TresMesh>
+    <TresDirectionalLight :position="[0, 10, 10]" />
+  </TresCanvas>
+</template>
+
+```
+
+## Arguments
+
+| Name         | Type       | Default     | Description                                          |
+| :----------- | ---------- | ----------- | ---------------------------------------------------- |
+| **Selector** | `Object3D` | Required    | The object to download. Could be an array of objects |
+| **Options**  | `Options`  | `undefined` | Description below                                    |
+
+### Options
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| **trs** | `bool` | `false` | Export position, rotation and scale instead of matrix per node |
+| **onlyVisible** | `bool` | `true` | Export only visible objects |
+| **binary** | `bool` | `false` | Export in binary (.glb) format, returning an ArrayBuffer |
+| **maxTextureSize** | `number` | `Infinity` | Restricts the image maximum size (both width and height) to the given value |
+| **animations** | `Array<AnimationClip>` | `undefined` | List of animations to be included in the export |
+| **includeCustomExtensions** | `bool` | `false` | Export custom glTF extensions defined on an object's userData.gltfExtensions |
+| **fileName** | `string` | `Object name` | Name of the generated file |
diff --git a/apps/cientos-docs/content/2.api/miscellaneous/use-intersect.md b/apps/cientos-docs/content/2.api/miscellaneous/use-intersect.md
new file mode 100644
index 000000000..fa87ed1b4
--- /dev/null
+++ b/apps/cientos-docs/content/2.api/miscellaneous/use-intersect.md
@@ -0,0 +1,40 @@
+---
+title: useIntersect
+description: Detect when objects enter or leave the screen.
+---
+
+`useIntersect` is a function that returns `intersect`, a `Ref<boolean>` that's updated when the observed object enters or leaves the screen. This relies on [THREE.Object3D.onBeforeRender](https://threejs.org/docs/#api/en/core/Object3D.onBeforeRender) so it only works on objects that are effectively rendered, like meshes, lines, sprites. It won't work on other types like group, object3d, bone, etc.
+
+## Usage
+
+::prose-warning
+`useIntersect` requires a `TresCanvas` context, so it is only available in `TresCanvas` descendant components' `<script setup>`.
+::
+
+```vue{2,4}
+<script setup lang="ts">
+import { Torus, useIntersect } from '@tresjs/cientos'
+
+const { ref, intersect, off } = useIntersect()
+</script>
+
+<template>
+  <Torus ref="ref">
+    <TresMeshNormalMaterial />
+  </Torus>
+</template>
+```
+
+## Arguments
+
+| Name         | Description |  Type       |
+| :----------- | ----------- | ----------- |
+| **onChange** | Optional callback function triggered when the observed object enters or leaves the screen. | `(isIntersected: boolean) => void` |
+
+## Return
+
+| Name         | Description |  Type       |
+| :----------- | ----------- | ----------- |
+| **ref** | Vue `ShallowRef` to pass to the object to be observed. | `ShallowRef<Object3D>` |
+| **intersects** | Updates when the observed object's intersect status changes. | `ShallowRef<boolean>` |
+| **off** | Calling this function stops `useIntersect` until `ref` changes. | `() => void` |
diff --git a/apps/cientos-docs/content/index.md b/apps/cientos-docs/content/index.md
new file mode 100644
index 000000000..99581a248
--- /dev/null
+++ b/apps/cientos-docs/content/index.md
@@ -0,0 +1,126 @@
+---
+seo:
+  title: Cientos - Bring Three to the Vue ecosystem
+  description: Create awesome 3D experiences with the framework you love.
+---
+
+::u-page-hero
+
+<!-- #headline
+:::nuxt-link
+---
+to: /getting-started
+---
+
+:::u-badge
+---
+variant: subtle
+size: lg
+icon: i-lucide-arrow-right
+---
+Tres v5 announcement
+:::
+:::
+ -->
+
+#title
+
+<span class="text-primary-300">Cientos</span> \
+Ready-made abstractions for TresJS
+
+#description
+Extending helpers and composables using Three addons.
+
+#links
+  :::u-button
+  ---
+  size: lg
+  color: neutral
+  to: /getting-started
+  trailing-icon: i-lucide-arrow-right
+  ---
+  Get started
+  :::
+
+  :::u-button
+  ---
+  color: neutral
+  icon: i-simple-icons-github
+  size: lg
+  target: _blank
+  to: https://github.com/tresjs/tres
+  variant: subtle
+  ---
+  Star on GitHub
+  :::
+::
+
+::u-page-section
+#title
+Features you will love
+
+#links
+  :::u-button
+  ---
+  color: neutral
+  size: lg
+  target: _blank
+  to: https://lab.tresjs.org/
+  trailingIcon: i-lucide:flask-conical
+  variant: subtle
+  ---
+  Explore the lab
+  :::
+
+#features
+
+  :::u-page-feature
+  ---
+  icon: i-simple-icons-threedotjs
+  target: _blank
+  to: https://github.com/pmndrs/three-stdlib
+  ---
+  #title
+  three-stdlib
+
+  #description
+  Because the ThreeJS addons repo structure is... daunting.
+  :::
+  :::u-page-feature
+  ---
+  icon: i-lucide-biceps-flexed
+  target: _blank
+  to: https://threejs.org
+  ---
+  #title
+  Extendable
+
+  #description
+  You want to create a fancy shader material component? Submit a PR 🤗.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: i-lucide-heart
+  target: _blank
+  to: https://ui.nuxt.com
+  ---
+  #title
+  Community-Driven
+  #description
+  Benefits from the active and growing Vue TresJS community.
+  :::
+
+  :::u-page-feature
+  ---
+  icon: i-simple-icons-typescript
+  target: _blank
+  to: https://www.typescriptlang.org
+  ---
+  #title
+  TypeScript
+
+  #description
+  A fully typed development experience.
+  :::
+::
diff --git a/apps/cientos-docs/eslint.config.mjs b/apps/cientos-docs/eslint.config.mjs
new file mode 100644
index 000000000..ddf79f005
--- /dev/null
+++ b/apps/cientos-docs/eslint.config.mjs
@@ -0,0 +1,5 @@
+import { tresLintConfig } from '@tresjs/eslint-config'
+
+export default tresLintConfig({
+  ignores: ['.data/**'],
+})
diff --git a/apps/cientos-docs/netlify.toml b/apps/cientos-docs/netlify.toml
new file mode 100644
index 000000000..cac6ec7d8
--- /dev/null
+++ b/apps/cientos-docs/netlify.toml
@@ -0,0 +1,13 @@
+[build]
+command = "pnpm install && NODE_OPTIONS='--max-old-space-size=4096' pnpm nx run cientos-docs:generate"
+publish = "apps/cientos-docs/dist"
+
+[build.environment]
+COREPACK_INTEGRITY_KEYS = "0"
+NODE_VERSION = "22"
+NODE_OPTIONS = "--max-old-space-size=4096"
+
+[[redirects]]
+from = "/*"
+to = "/200.html"
+status = 200
diff --git a/apps/cientos-docs/nuxt.config.ts b/apps/cientos-docs/nuxt.config.ts
new file mode 100644
index 000000000..83fe45aa1
--- /dev/null
+++ b/apps/cientos-docs/nuxt.config.ts
@@ -0,0 +1,102 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { templateCompilerOptions } from '@tresjs/core'
+
+// Try to read from node_modules first (works in production), fallback to monorepo path
+let corePackageJsonPath = resolve(__dirname, 'node_modules/@tresjs/core/package.json')
+try {
+  readFileSync(corePackageJsonPath, 'utf-8')
+}
+catch {
+  // In development, use the monorepo path
+  corePackageJsonPath = resolve(__dirname, '../../packages/core/package.json')
+}
+
+const pkg = JSON.parse(readFileSync(corePackageJsonPath, 'utf-8'))
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@nuxt/image', '@nuxt/ui', '@nuxt/content', 'nuxt-llms'],
+
+  image: {
+    quality: 80,
+    format: ['webp', 'png', 'jpg'],
+  },
+
+  router: {
+    options: {
+      strict: true,
+    },
+  },
+
+  devtools: {
+    enabled: true,
+  },
+
+  css: ['~/assets/css/main.css'],
+
+  vue: {
+    compilerOptions: templateCompilerOptions.template.compilerOptions,
+  },
+
+  content: {
+    build: {
+      markdown: {
+        toc: {
+          searchDepth: 1,
+        },
+      },
+    },
+  },
+
+  runtimeConfig: {
+    public: {
+      pkgVersion: pkg.version,
+    },
+  },
+
+  future: {
+    compatibilityVersion: 4,
+  },
+
+  compatibilityDate: '2024-07-11',
+
+  nitro: {
+    prerender: {
+      routes: [
+        '/',
+      ],
+      crawlLinks: true,
+    },
+  },
+
+  icon: {
+    provider: 'iconify',
+  },
+
+  llms: {
+    domain: 'https://cientos.tresjs.org/',
+    title: 'TresJS Cientos',
+    description: 'Collection of useful helpers and fully functional, ready-made abstractions for TresJS.',
+    full: {
+      title: 'Full Documentation',
+      description: 'Complete Cientos documentation including getting started guides and API reference for all components.',
+    },
+    sections: [
+      {
+        title: 'Getting Started',
+        contentCollection: 'docs',
+        contentFilters: [
+          { field: 'path', operator: 'LIKE', value: '/getting-started%' },
+        ],
+      },
+      {
+        title: 'API Reference',
+        contentCollection: 'docs',
+        contentFilters: [
+          { field: 'path', operator: 'LIKE', value: '/api%' },
+        ],
+      },
+    ],
+  },
+})
diff --git a/apps/cientos-docs/package.json b/apps/cientos-docs/package.json
new file mode 100644
index 000000000..9a44b0b59
--- /dev/null
+++ b/apps/cientos-docs/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "cientos-docs",
+  "type": "module",
+  "private": true,
+  "packageManager": "pnpm@10.14.0",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.68",
+    "@iconify-json/simple-icons": "^1.2.53",
+    "@iconify-json/vscode-icons": "^1.2.30",
+    "@nuxt/content": "catalog:nuxt",
+    "@nuxt/image": "catalog:nuxt",
+    "@nuxt/scripts": "0.12.1",
+    "@nuxt/ui": "catalog:nuxt",
+    "@tresjs/cientos": "workspace:^",
+    "@tresjs/core": "workspace:^",
+    "@tresjs/leches": "workspace:^",
+    "@unhead/vue": "^2.0.17",
+    "better-sqlite3": "^12.4.1",
+    "nuxt": "catalog:nuxt",
+    "nuxt-llms": "0.1.3",
+    "tweakpane": "^4.0.5",
+    "vue": "catalog:vue",
+    "vue-router": "catalog:vue"
+  },
+  "devDependencies": {
+    "@tresjs/eslint-config": "workspace:*",
+    "@tweakpane/core": "^2.0.5",
+    "eslint": "catalog:eslint",
+    "typescript": "catalog:typescript",
+    "vue-tsc": "catalog:typescript"
+  }
+}
diff --git a/apps/cientos-docs/public/cientos/environment.png b/apps/cientos-docs/public/cientos/environment.png
new file mode 100644
index 000000000..a3ba3c78e
Binary files /dev/null and b/apps/cientos-docs/public/cientos/environment.png differ
diff --git a/apps/cientos-docs/public/cientos/envmaps.png b/apps/cientos-docs/public/cientos/envmaps.png
new file mode 100644
index 000000000..b08913369
Binary files /dev/null and b/apps/cientos-docs/public/cientos/envmaps.png differ
diff --git a/apps/cientos-docs/public/cientos/lensflare_seeds.png b/apps/cientos-docs/public/cientos/lensflare_seeds.png
new file mode 100644
index 000000000..ecb0cf4b5
Binary files /dev/null and b/apps/cientos-docs/public/cientos/lensflare_seeds.png differ
diff --git a/apps/cientos-docs/public/cientos/sketch.jpg b/apps/cientos-docs/public/cientos/sketch.jpg
new file mode 100644
index 000000000..739a50b32
Binary files /dev/null and b/apps/cientos-docs/public/cientos/sketch.jpg differ
diff --git a/apps/cientos-docs/public/cientos/transform-controls-rotate.png b/apps/cientos-docs/public/cientos/transform-controls-rotate.png
new file mode 100644
index 000000000..13461ced3
Binary files /dev/null and b/apps/cientos-docs/public/cientos/transform-controls-rotate.png differ
diff --git a/apps/cientos-docs/public/cientos/transform-controls-scale.png b/apps/cientos-docs/public/cientos/transform-controls-scale.png
new file mode 100644
index 000000000..699a924eb
Binary files /dev/null and b/apps/cientos-docs/public/cientos/transform-controls-scale.png differ
diff --git a/apps/cientos-docs/public/cientos/transform-controls-translate.png b/apps/cientos-docs/public/cientos/transform-controls-translate.png
new file mode 100644
index 000000000..d2ce8c2c0
Binary files /dev/null and b/apps/cientos-docs/public/cientos/transform-controls-translate.png differ
diff --git a/apps/cientos-docs/public/favicon-dark.svg b/apps/cientos-docs/public/favicon-dark.svg
new file mode 100644
index 000000000..6a5a4e28f
--- /dev/null
+++ b/apps/cientos-docs/public/favicon-dark.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" fill="#44bda2"/>
+  <text x="50" y="70" font-size="60" text-anchor="middle" fill="#1b463f" font-family="Arial, sans-serif" font-weight="bold">D</text>
+</svg>
diff --git a/apps/cientos-docs/public/favicon.svg b/apps/cientos-docs/public/favicon.svg
new file mode 100644
index 000000000..494175b9d
--- /dev/null
+++ b/apps/cientos-docs/public/favicon.svg
@@ -0,0 +1,3 @@
+<svg width="82" height="74" viewBox="0 0 82 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M41.2 74L35.3275 68.6768C14.47 49.8441 0.699951 37.3831 0.699951 22.1798C0.699951 9.7188 10.501 0 22.975 0C30.022 0 36.7855 3.26648 41.2 8.38801C45.6145 3.26648 52.378 0 59.425 0C71.899 0 81.7 9.7188 81.7 22.1798C81.7 37.3831 67.93 49.8441 47.0725 68.6768L41.2 74ZM34.4025 31.8563C34.4025 34.6767 32.1063 36.963 29.2738 36.963C26.4413 36.963 24.1452 34.6767 24.1452 31.8563C24.1452 29.0359 26.4413 26.7496 29.2738 26.7496C32.1063 26.7496 34.4025 29.0359 34.4025 31.8563ZM53.6959 36.963C56.5284 36.963 58.8246 34.6767 58.8246 31.8563C58.8246 29.0359 56.5284 26.7496 53.6959 26.7496C50.8635 26.7496 48.5673 29.0359 48.5673 31.8563C48.5673 34.6767 50.8635 36.963 53.6959 36.963Z" fill="#FBB03B"/>
+</svg>
diff --git a/apps/cientos-docs/public/feather.glb b/apps/cientos-docs/public/feather.glb
new file mode 100644
index 000000000..92b6008f0
Binary files /dev/null and b/apps/cientos-docs/public/feather.glb differ
diff --git a/apps/cientos-docs/public/logo.svg b/apps/cientos-docs/public/logo.svg
new file mode 100644
index 000000000..95554b67b
--- /dev/null
+++ b/apps/cientos-docs/public/logo.svg
@@ -0,0 +1,7 @@
+<svg width="127" height="29" viewBox="0 0 127 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M112.042 1C116.086 1.00025 119.264 4.15215 119.264 8.19336C119.264 13.1241 114.799 17.1655 108.036 23.2734L106.132 25L104.228 23.2734C97.4647 17.1657 93 13.1241 93 8.19336C93.0001 4.15199 96.178 1 100.223 1C102.508 1 104.7 2.05967 106.132 3.7207C107.563 2.05967 109.757 1 112.042 1ZM102.265 9.6748C101.346 9.6748 100.602 10.4163 100.602 11.3311C100.602 12.2457 101.346 12.9873 102.265 12.9873C103.183 12.9873 103.928 12.2456 103.928 11.3311C103.928 10.4164 103.183 9.67486 102.265 9.6748ZM110.185 9.6748C109.266 9.67483 108.521 10.4164 108.521 11.3311C108.522 12.2456 109.266 12.9873 110.185 12.9873C111.103 12.9873 111.848 12.2457 111.848 11.3311C111.848 10.4163 111.103 9.6748 110.185 9.6748Z" fill="#FBB03B"/>
+<rect x="49" y="1" width="24" height="24" rx="2" fill="#4F4F4F"/>
+<rect x="49" y="1" width="24" height="24" rx="2" fill="#4F4F4F" fill-opacity="0.2"/>
+<rect x="49" y="1" width="24" height="24" rx="2" fill="#4F4F4F" fill-opacity="0.2"/>
+<path d="M15.5426 2.42915C15.931 1.78181 16.8692 1.78182 17.2576 2.42915L29.8914 23.4855C30.2913 24.152 29.8112 25 29.0339 25H3.76628C2.98899 25 2.50888 24.152 2.90879 23.4855L15.5426 2.42915Z" fill="#82DBC5" stroke="#82DBC5"/>
+</svg>
diff --git a/apps/cientos-docs/tsconfig.json b/apps/cientos-docs/tsconfig.json
new file mode 100644
index 000000000..a746f2a70
--- /dev/null
+++ b/apps/cientos-docs/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/apps/docs-boilerplate/README.md b/apps/docs-boilerplate/README.md
index 268d429f6..d72901e32 100644
--- a/apps/docs-boilerplate/README.md
+++ b/apps/docs-boilerplate/README.md
@@ -38,7 +38,7 @@ apps/docs-boilerplate/
 
 ### Prerequisites
 
-- Node.js 18+
+- Node.js 24+
 - pnpm package manager
 
 ### Installation
@@ -46,7 +46,7 @@ apps/docs-boilerplate/
 Install dependencies:
 
 ```bash
-pnpm install
+pnpm install --frozen-lockfile
 ```
 
 ### Development
diff --git a/apps/docs-boilerplate/app/composables/useNavigation.ts b/apps/docs-boilerplate/app/composables/useNavigation.ts
index adab88aac..47efe667a 100644
--- a/apps/docs-boilerplate/app/composables/useNavigation.ts
+++ b/apps/docs-boilerplate/app/composables/useNavigation.ts
@@ -20,12 +20,6 @@ function _useHeaderLinks() {
       icon: 'i-lucide-rocket',
       to: `${to}/getting-started`,
       active: route.path.startsWith(`${to}/getting-started`),
-    }, {
-      label: 'Guide',
-      description: 'Get the key concepts and best practices.',
-      icon: 'i-lucide-book-open',
-      to: `${to}/guide`,
-      active: route.path.startsWith(`${to}/guide`),
     }, {
       label: 'API',
       description: 'Explore the API reference.',
diff --git a/apps/docs/.gitignore b/apps/docs/.gitignore
index 04e6688f0..1f05af149 100644
--- a/apps/docs/.gitignore
+++ b/apps/docs/.gitignore
@@ -26,3 +26,4 @@ logs
 
 # VSC
 .history
+.editorconfig
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eb225ec3d..5c75f4ed0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -145,6 +145,76 @@ importers:
         specifier: 21.2.1
         version: 21.2.1
 
+  apps/cientos-docs:
+    dependencies:
+      '@iconify-json/lucide':
+        specifier: ^1.2.68
+        version: 1.2.82
+      '@iconify-json/simple-icons':
+        specifier: ^1.2.53
+        version: 1.2.63
+      '@iconify-json/vscode-icons':
+        specifier: ^1.2.30
+        version: 1.2.37
+      '@nuxt/content':
+        specifier: catalog:nuxt
+        version: 3.10.0(better-sqlite3@12.5.0)(magicast@0.5.1)(valibot@1.2.0(typescript@5.8.3))
+      '@nuxt/image':
+        specifier: catalog:nuxt
+        version: 1.11.0(db0@0.3.4(better-sqlite3@12.5.0))(ioredis@5.8.2)(magicast@0.5.1)
+      '@nuxt/scripts':
+        specifier: 0.12.1
+        version: 0.12.1(@googlemaps/markerclusterer@2.6.2)(@unhead/vue@2.1.1(vue@3.5.26(typescript@5.8.3)))(db0@0.3.4(better-sqlite3@12.5.0))(ioredis@5.8.2)(magicast@0.5.1)(typescript@5.8.3)(vue@3.5.26(typescript@5.8.3))
+      '@nuxt/ui':
+        specifier: catalog:nuxt
+        version: 4.3.0(908bdce02b76649cd946b05edadcd037)
+      '@tresjs/cientos':
+        specifier: workspace:^
+        version: link:../../packages/cientos
+      '@tresjs/core':
+        specifier: workspace:^
+        version: link:../../packages/core
+      '@tresjs/leches':
+        specifier: workspace:^
+        version: link:../../packages/leches
+      '@unhead/vue':
+        specifier: ^2.0.17
+        version: 2.1.1(vue@3.5.26(typescript@5.8.3))
+      better-sqlite3:
+        specifier: ^12.4.1
+        version: 12.5.0
+      nuxt:
+        specifier: catalog:nuxt
+        version: 4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.8.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.8.3))(yaml@2.8.2)
+      nuxt-llms:
+        specifier: 0.1.3
+        version: 0.1.3(magicast@0.5.1)
+      tweakpane:
+        specifier: ^4.0.5
+        version: 4.0.5
+      vue:
+        specifier: catalog:vue
+        version: 3.5.26(typescript@5.8.3)
+      vue-router:
+        specifier: catalog:vue
+        version: 4.6.4(vue@3.5.26(typescript@5.8.3))
+    devDependencies:
+      '@tresjs/eslint-config':
+        specifier: workspace:*
+        version: link:../../packages/eslint-config
+      '@tweakpane/core':
+        specifier: ^2.0.5
+        version: 2.0.5
+      eslint:
+        specifier: catalog:eslint
+        version: 9.39.2(jiti@2.6.1)
+      typescript:
+        specifier: catalog:typescript
+        version: 5.8.3
+      vue-tsc:
+        specifier: catalog:typescript
+        version: 3.2.1(typescript@5.8.3)
+
   apps/cientos-docs-vitepress:
     dependencies:
       '@tresjs/cientos':
@@ -332,7 +402,7 @@ importers:
         version: link:../../packages/postprocessing
       '@vueuse/nuxt':
         specifier: ^13.9.0
-        version: 13.9.0(magicast@0.5.1)(nuxt@4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.9.3))(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+        version: 13.9.0(magicast@0.5.1)(nuxt@4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       better-sqlite3:
         specifier: ^12.2.0
         version: 12.5.0
@@ -405,7 +475,7 @@ importers:
         version: 3.14.2
       nuxt:
         specifier: catalog:nuxt
-        version: 4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.9.3))(yaml@2.8.2)
+        version: 4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(yaml@2.8.2)
       nuxt-svgo:
         specifier: ^4.2.6
         version: 4.2.6(magicast@0.5.1)(vue@3.5.26(typescript@5.9.3))
@@ -482,7 +552,7 @@ importers:
         version: link:../../packages/eslint-config
       nuxt:
         specifier: catalog:nuxt
-        version: 4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.9.3))(yaml@2.8.2)
+        version: 4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(yaml@2.8.2)
 
   apps/postprocessing-docs-vitepress:
     dependencies:
@@ -14353,7 +14423,66 @@ snapshots:
       - vue-tsc
       - yaml
 
-  '@nuxt/vite-builder@4.1.3(@types/node@24.10.4)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vue-tsc@3.2.1(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)':
+  '@nuxt/vite-builder@4.1.3(@types/node@24.10.4)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)':
+    dependencies:
+      '@nuxt/kit': 4.1.3(magicast@0.5.1)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.54.0)
+      '@vitejs/plugin-vue': 6.0.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx': 5.1.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      autoprefixer: 10.4.23(postcss@8.5.6)
+      consola: 3.4.2
+      cssnano: 7.1.2(postcss@8.5.6)
+      defu: 6.1.4
+      esbuild: 0.25.12
+      escape-string-regexp: 5.0.0
+      exsolve: 1.0.8
+      get-port-please: 3.2.0
+      h3: 1.15.4
+      jiti: 2.6.1
+      knitwork: 1.3.0
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      mocked-exports: 0.1.1
+      pathe: 2.0.3
+      pkg-types: 2.3.0
+      postcss: 8.5.6
+      rollup-plugin-visualizer: 6.0.5(rolldown@1.0.0-beta.57)(rollup@4.54.0)
+      std-env: 3.10.0
+      ufo: 1.6.1
+      unenv: 2.0.0-rc.24
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite-node: 3.2.4(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vite-plugin-checker: 0.11.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      vue: 3.5.26(typescript@5.9.3)
+      vue-bundle-renderer: 2.2.0
+    optionalDependencies:
+      rolldown: 1.0.0-beta.57
+    transitivePeerDependencies:
+      - '@biomejs/biome'
+      - '@types/node'
+      - eslint
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - optionator
+      - oxlint
+      - rollup
+      - sass
+      - sass-embedded
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - vls
+      - vti
+      - vue-tsc
+      - yaml
+
+  '@nuxt/vite-builder@4.1.3(@types/node@24.10.4)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)':
     dependencies:
       '@nuxt/kit': 4.1.3(magicast@0.5.1)
       '@rollup/plugin-replace': 6.0.3(rollup@4.54.0)
@@ -14382,7 +14511,7 @@ snapshots:
       unenv: 2.0.0-rc.24
       vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
       vite-node: 3.2.4(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
-      vite-plugin-checker: 0.11.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.9.3))
+      vite-plugin-checker: 0.11.0(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
       vue: 3.5.26(typescript@5.9.3)
       vue-bundle-renderer: 2.2.0
     optionalDependencies:
@@ -17008,13 +17137,13 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@vueuse/nuxt@13.9.0(magicast@0.5.1)(nuxt@4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.9.3))(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+  '@vueuse/nuxt@13.9.0(magicast@0.5.1)(nuxt@4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
       '@vueuse/core': 13.9.0(vue@3.5.26(typescript@5.9.3))
       '@vueuse/metadata': 13.9.0
       local-pkg: 1.1.2
-      nuxt: 4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.9.3))(yaml@2.8.2)
+      nuxt: 4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
     transitivePeerDependencies:
       - magicast
@@ -21245,7 +21374,135 @@ snapshots:
       - xml2js
       - yaml
 
-  nuxt@4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.9.3))(yaml@2.8.2):
+  nuxt@4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(yaml@2.8.2):
+    dependencies:
+      '@nuxt/cli': 3.31.3(cac@6.7.14)(commander@13.1.0)(magicast@0.5.1)
+      '@nuxt/devalue': 2.0.2
+      '@nuxt/devtools': 2.7.0(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+      '@nuxt/kit': 4.1.3(magicast@0.5.1)
+      '@nuxt/schema': 4.1.3
+      '@nuxt/telemetry': 2.6.6(magicast@0.5.1)
+      '@nuxt/vite-builder': 4.1.3(@types/node@24.10.4)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)
+      '@unhead/vue': 2.1.1(vue@3.5.26(typescript@5.9.3))
+      '@vue/shared': 3.5.26
+      c12: 3.3.3(magicast@0.5.1)
+      chokidar: 4.0.3
+      compatx: 0.2.0
+      consola: 3.4.2
+      cookie-es: 2.0.0
+      defu: 6.1.4
+      destr: 2.0.5
+      devalue: 5.6.1
+      errx: 0.1.0
+      esbuild: 0.25.12
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      exsolve: 1.0.8
+      h3: 1.15.4
+      hookable: 5.5.3
+      ignore: 7.0.5
+      impound: 1.0.0
+      jiti: 2.6.1
+      klona: 2.0.6
+      knitwork: 1.3.0
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      mocked-exports: 0.1.1
+      nanotar: 0.2.0
+      nitropack: 2.12.9(better-sqlite3@12.5.0)(rolldown@1.0.0-beta.57)
+      nypm: 0.6.2
+      ofetch: 1.5.1
+      ohash: 2.0.11
+      on-change: 6.0.1
+      oxc-minify: 0.94.0
+      oxc-parser: 0.94.0
+      oxc-transform: 0.94.0
+      oxc-walker: 0.5.2(oxc-parser@0.94.0)
+      pathe: 2.0.3
+      perfect-debounce: 2.0.0
+      pkg-types: 2.3.0
+      radix3: 1.1.2
+      scule: 1.3.0
+      semver: 7.7.3
+      std-env: 3.10.0
+      tinyglobby: 0.2.15
+      ufo: 1.6.1
+      ultrahtml: 1.6.0
+      uncrypto: 0.1.3
+      unctx: 2.5.0
+      unimport: 5.6.0
+      unplugin: 2.3.11
+      unplugin-vue-router: 0.15.0(@vue/compiler-sfc@3.5.26)(vue-router@4.6.4(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))
+      unstorage: 1.17.3(db0@0.3.4(better-sqlite3@12.5.0))(ioredis@5.8.2)
+      untyped: 2.0.0
+      vue: 3.5.26(typescript@5.9.3)
+      vue-bundle-renderer: 2.2.0
+      vue-devtools-stub: 0.1.0
+      vue-router: 4.6.4(vue@3.5.26(typescript@5.9.3))
+    optionalDependencies:
+      '@parcel/watcher': 2.5.1
+      '@types/node': 24.10.4
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@biomejs/biome'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - '@vue/compiler-sfc'
+      - aws4fetch
+      - bare-abort-controller
+      - better-sqlite3
+      - bufferutil
+      - cac
+      - commander
+      - db0
+      - drizzle-orm
+      - encoding
+      - eslint
+      - idb-keyval
+      - ioredis
+      - less
+      - lightningcss
+      - magicast
+      - meow
+      - mysql2
+      - optionator
+      - oxlint
+      - react-native-b4a
+      - rolldown
+      - rollup
+      - sass
+      - sass-embedded
+      - sqlite3
+      - stylelint
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - typescript
+      - uploadthing
+      - utf-8-validate
+      - vite
+      - vls
+      - vti
+      - vue-tsc
+      - xml2js
+      - yaml
+
+  nuxt@4.1.3(@parcel/watcher@2.5.1)(@types/node@24.10.4)(@vue/compiler-sfc@3.5.26)(better-sqlite3@12.5.0)(cac@6.7.14)(commander@13.1.0)(db0@0.3.4(better-sqlite3@12.5.0))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(yaml@2.8.2):
     dependencies:
       '@nuxt/cli': 3.31.3(cac@6.7.14)(commander@13.1.0)(magicast@0.5.1)
       '@nuxt/devalue': 2.0.2
@@ -21253,7 +21510,7 @@ snapshots:
       '@nuxt/kit': 4.1.3(magicast@0.5.1)
       '@nuxt/schema': 4.1.3
       '@nuxt/telemetry': 2.6.6(magicast@0.5.1)
-      '@nuxt/vite-builder': 4.1.3(@types/node@24.10.4)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vue-tsc@3.2.1(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)
+      '@nuxt/vite-builder': 4.1.3(@types/node@24.10.4)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-beta.57)(rollup@4.54.0)(terser@5.44.1)(tsx@4.21.0)(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)
       '@unhead/vue': 2.1.1(vue@3.5.26(typescript@5.9.3))
       '@vue/shared': 3.5.26
       c12: 3.3.3(magicast@0.5.1)
@@ -24129,7 +24386,7 @@ snapshots:
       typescript: 5.8.3
       vue-tsc: 3.2.1(typescript@5.8.3)
 
-  vite-plugin-checker@0.11.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))(vue-tsc@3.2.1(typescript@5.9.3)):
+  vite-plugin-checker@0.11.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       '@babel/code-frame': 7.27.1
       chokidar: 4.0.3
@@ -24144,7 +24401,21 @@ snapshots:
       eslint: 9.39.2(jiti@2.6.1)
       optionator: 0.9.4
       typescript: 5.9.3
-      vue-tsc: 3.2.1(typescript@5.9.3)
+
+  vite-plugin-checker@0.11.0(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)):
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      chokidar: 4.0.3
+      npm-run-path: 6.0.0
+      picocolors: 1.1.1
+      picomatch: 4.0.3
+      tiny-invariant: 1.3.3
+      tinyglobby: 0.2.15
+      vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)
+      vscode-uri: 3.1.0
+    optionalDependencies:
+      optionator: 0.9.4
+      typescript: 5.9.3
 
   vite-plugin-css-injected-by-js@3.5.2(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies: