diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
new file mode 100644
index 0000000..bfa8910
--- /dev/null
+++ b/docs/.vitepress/theme/Layout.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import { nextTick, provide } from 'vue'
+
+
+const { isDark } = useData()
+
+
+const enableTransitions = (): boolean => 'startViewTransition' in document
+  && window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const clipPath = [
+    `circle(0px at ${x}px ${y}px)`,
+    `circle(${Math.hypot(
+      Math.max(x, innerWidth - x),
+      Math.max(y, innerHeight - y)
+    )}px at ${x}px ${y}px)`
+  ]
+
+  await document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready
+
+  document.documentElement.animate(
+    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
+    {
+      duration: 300,
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+    }
+  )
+})
+</script>
+
+
+<template>
+  <DefaultTheme.Layout />
+</template>
+
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 8731002..0d040ef 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -2,6 +2,7 @@ import 'virtual:uno.css'
 
 import DefaultTheme from 'vitepress/theme'
 import { h } from 'vue'
+import Layout from './Layout.vue'
 import type { Theme } from 'vitepress'
 
 import './style.scss'
@@ -9,7 +10,7 @@ import './style.scss'
 
 export default {
   'extends': DefaultTheme,
-  Layout: () => h(DefaultTheme.Layout, null, {
+  Layout: () => h(Layout, null, {
     // https://vitepress.dev/guide/extending-default-theme#layout-slots
   }),
   enhanceApp({ app, router, siteData }) {
diff --git a/docs/src/index.md b/docs/src/index.md
index 88373bb..f98571f 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -3,7 +3,7 @@ layout: home
 
 hero:
   name: Animations Preset for UnoCSS
-  tagline: Simple · Flexible · Beautiful · Composable
+  tagline: Simple · Beautiful · Flexible · Composable
   image:
     src: /logo.svg
     alt: UnoCSS
diff --git a/eslint.config.js b/eslint.config.js
index 21d0d62..0e4542e 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,6 +6,11 @@ export default defineConfig(
     typescript: {
       tsconfigPath: ['./tsconfig.json', './tsconfig.node.js.json'],
       projectType: 'lib'
+    },
+    vue: {
+      ruleOptions: {
+        multiWordComponentNames: { ignores: ['Layout'] }
+      }
     }
   },
   {
diff --git a/package.json b/package.json
index 5c4e588..8cdb746 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,9 @@
     "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
-    "@aelita-dev/eslint-config": "^1.0.0",
+    "@aelita-dev/eslint-config": "^1.1.0",
     "@iconify/json": "^2.2.150",
+    "@types/dom-view-transitions": "^1.0.4",
     "@types/markdown-it": "^13.0.7",
     "@unocss/core": "^0.57.7",
     "@unocss/preset-mini": "^0.57.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fa80cb0..c045a70 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,11 +11,14 @@ dependencies:
 
 devDependencies:
   '@aelita-dev/eslint-config':
-    specifier: ^1.0.0
-    version: 1.0.0(eslint@8.54.0)(typescript@5.3.2)
+    specifier: ^1.1.0
+    version: 1.1.0(eslint@8.54.0)(typescript@5.3.2)
   '@iconify/json':
     specifier: ^2.2.150
     version: 2.2.150
+  '@types/dom-view-transitions':
+    specifier: ^1.0.4
+    version: 1.0.4
   '@types/markdown-it':
     specifier: ^13.0.7
     version: 13.0.7
@@ -69,8 +72,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@aelita-dev/eslint-config@1.0.0(eslint@8.54.0)(typescript@5.3.2):
-    resolution: {integrity: sha512-8nHavHCv+MuHFwDOALsMdlnBNSFP+xmYoaCFjieSjGvZDxRvgoEPZ6Bo7Jr03DLkUdZlFxOzgmIX1TAe5O9yvQ==}
+  /@aelita-dev/eslint-config@1.1.0(eslint@8.54.0)(typescript@5.3.2):
+    resolution: {integrity: sha512-De4wv6OPK3wTykqTrc4V2sneIe/XqN6jNtzc1XpGUKHZlIk7kRLfTsSzodB2dfruYzxWrKd2z/qkOEU3OyGMrw==}
     peerDependencies:
       eslint: '>=8.0.0'
     dependencies:
@@ -1210,6 +1213,10 @@ packages:
     resolution: {integrity: sha512-of+ICnbqjmFCiixUnqRulbylyXQrPqIGf/B3Jax1wIF3DvSheysQxAWvqHhZiW3IQrycvokcLcFQlveGp+vyNg==}
     dev: true
 
+  /@types/dom-view-transitions@1.0.4:
+    resolution: {integrity: sha512-oDuagM6G+xPLrLU4KeCKlr1oalMF5mJqV5pDPMDVIEaa8AkUW00i6u+5P02XCjdEEUQJC9dpnxqSLsZeAciSLQ==}
+    dev: true
+
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true