diff --git a/playground/src/components/TheExperience.vue b/playground/src/components/TheExperience.vue
index 500a8b19d..cfcf5459a 100644
--- a/playground/src/components/TheExperience.vue
+++ b/playground/src/components/TheExperience.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'
@@ -10,10 +9,6 @@ import TheSphere from './TheSphere.vue'
 const gl = {
   clearColor: '#82DBC5',
   shadows: true,
-  alpha: false,
-  shadowMapType: BasicShadowMap,
-  outputColorSpace: SRGBColorSpace,
-  toneMapping: NoToneMapping,
 }
 
 const wireframe = ref(true)
@@ -39,7 +34,6 @@ watchEffect(() => {
     ref="canvas"
     window-size
     class="awiwi"
-    :style="{ background: '#008080' }"
   >
     <TresPerspectiveCamera
       :position="[7, 7, 7]"
diff --git a/src/composables/useRenderer/const.ts b/src/composables/useRenderer/const.ts
index edcd61076..4e5c763ed 100644
--- a/src/composables/useRenderer/const.ts
+++ b/src/composables/useRenderer/const.ts
@@ -1,4 +1,4 @@
-import { ACESFilmicToneMapping, PCFSoftShadowMap, SRGBColorSpace } from 'three'
+import { ACESFilmicToneMapping, NoToneMapping, PCFSoftShadowMap, SRGBColorSpace } from 'three'
 
 export const rendererPresets = {
   realistic: {
@@ -12,6 +12,10 @@ export const rendererPresets = {
       type: PCFSoftShadowMap,
     },
   },
+  flat: {
+    toneMapping: NoToneMapping,
+    toneMappingExposure: 1,
+  },
 }
 
 export type RendererPresetsType = keyof typeof rendererPresets
diff --git a/src/composables/useRenderer/index.ts b/src/composables/useRenderer/index.ts
index a073ad326..b63b73d95 100644
--- a/src/composables/useRenderer/index.ts
+++ b/src/composables/useRenderer/index.ts
@@ -1,4 +1,4 @@
-import { Color, WebGLRenderer } from 'three'
+import { ACESFilmicToneMapping, Color, WebGLRenderer } from 'three'
 import { shallowRef, watchEffect, onUnmounted, type MaybeRef, computed, watch } from 'vue'
 import {
   toValue,
@@ -122,7 +122,9 @@ export function useRenderer(
 ) {
 
   const webGLRendererConstructorParameters = computed<WebGLRendererParameters>(() => ({
-    alpha: toValue(options.alpha),
+    alpha: toValue(options.alpha) === undefined // an opinionated default of tres
+      ? true
+      : toValue(options.alpha),
     depth: toValue(options.depth),
     canvas: unrefElement(canvas),
     context: toValue(options.context),
@@ -179,6 +181,8 @@ export function useRenderer(
 
   const threeDefaults = getThreeRendererDefaults()
 
+  // Set opinionated defaults
+  
   watchEffect(() => {
     const rendererPreset = toValue(options.preset)
 
@@ -214,7 +218,7 @@ export function useRenderer(
       set(renderer.value, pathInThree, getValue(option, pathInThree))
 
     setValueOrDefault(options.shadows, 'shadowMap.enabled')
-    setValueOrDefault(options.toneMapping, 'toneMapping')
+    setValueOrDefault(options.toneMapping || ACESFilmicToneMapping, 'toneMapping')
     setValueOrDefault(options.shadowMapType, 'shadowMap.type')
 
     if (revision < 150)