chore(release): 2.0.1

feat: media session support

.eslintrc.json

@@ -1,15 +1,12 @@
 {
   "root": true,
-
   "env": {
     "browser": true,
     "amd": true,
     "node": true,
     "es2022": true
   },
-
   "parser": "@typescript-eslint/parser",
-
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
@@ -17,7 +14,6 @@
       "jsx": true
     }
   },
-
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -28,9 +24,9 @@
     "plugin:jsx-a11y/recommended",
     "plugin:react-hooks/recommended",
     "plugin:astro/recommended",
-    "prettier"
+    "prettier",
+    "plugin:storybook/recommended"
   ],
-
   "plugins": [
     "@typescript-eslint",
     "typescript-sort-keys",
@@ -38,7 +34,6 @@
     "sort-destructure-keys",
     "prettier"
   ],
-
   "rules": {
     "@typescript-eslint/ban-ts-comment": "off",
     "prettier/prettier": "error",
@@ -46,6 +41,8 @@
     "sort-destructure-keys/sort-destructure-keys": "warn",
     "jsx-a11y/no-static-element-interactions": "off",
     "jsx-a11y/media-has-caption": "off",
+    "jsx-a11y/no-noninteractive-tabindex": "off",
+    "jsx-a11y/label-has-associated-control": "off",
     "react/jsx-sort-props": [
       "warn",
       {
@@ -54,48 +51,40 @@
       }
     ]
   },
-
   "settings": {
     "react": {
       "version": "detect"
     },
-
     "import/parsers": {
       "@typescript-eslint/parser": [".ts", ".tsx", ".js", ".jsx"]
     },
-
     "import/resolver": {
       "typescript": true,
       "node": true,
-
       "alias": {
         "extensions": [".js", ".jsx", ".ts", ".tsx", ".d.ts"],
         "map": [["@", "./src"]]
       }
     }
   },
-
   "overrides": [
     {
       "files": ["**/*.astro"],
       "parser": "astro-eslint-parser",
-
       "parserOptions": {
         "parser": "@typescript-eslint/parser",
         "extraFileExtensions": [".astro"]
       },
-
       "rules": {
         "prettier/prettier": "error",
         "react/no-unknown-property": "off",
-        "react/jsx-key": "off"
+        "react/jsx-key": "off",
+        "react/jsx-no-undef": "off"
       },
-
       "globals": {
         "Astro": "readonly"
       }
     },
-
     {
       "files": ["**/*.astro/*.js"],
       "rules": {

.github/workflows/build_docker.yml

@@ -20,15 +20,21 @@ jobs:
           username: ${{github.actor}}
           password: ${{secrets.ACCESS_TOKEN}}
 
-      - name: 'Build Inventory Image'
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: 'Build and push Inventory Image'
         run: |
           IMAGE_NAME="ghcr.io/remvze/moodist"
 
           GIT_TAG=${{ github.ref }}
           GIT_TAG=${GIT_TAG#refs/tags/}
 
-          docker build . --tag $IMAGE_NAME:latest
-          docker push $IMAGE_NAME:latest
-
-          docker build . --tag $IMAGE_NAME:$GIT_TAG
-          docker push $IMAGE_NAME:$GIT_TAG
+          docker buildx build \
+            --platform linux/amd64,linux/arm64 \
+            -t $IMAGE_NAME:latest \
+            -t $IMAGE_NAME:$GIT_TAG \
+            --push .

.gitignore

@@ -19,3 +19,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,46 @@
+import path from 'node:path';
+
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+  ],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  docs: {
+    autodocs: 'tag',
+  },
+  
+  viteFinal(config) {
+    return {
+      ...config,
+      
+      define: {
+        'process.env.NODE_DEBUG': false, // https://github.com/storybookjs/storybook/issues/18920
+      },
+
+      resolve: {
+        alias: [
+          {
+            find: '@',
+            replacement: path.resolve(__dirname, '../src'),
+          },
+        ],
+      },
+    }
+  }
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import '../src/styles/global.css';
+
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.stylelintrc.json

@@ -8,7 +8,8 @@
 
   "rules": {
     "import-notation": "string",
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "no-descending-specificity": null
   },
 
   "overrides": [

CHANGELOG.md

@@ -2,289 +2,703 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [1.3.0](https://github.com/remvze/moodist/compare/v1.2.0...v1.3.0) (2024-02-01)
-
-
-### ♻️ Code Refactoring
-
-* remove media session ([1f63534](https://github.com/remvze/moodist/commit/1f635348e3e5cf73ee76e1c5fac7b5f5b7f7ea6a))
-* remove unmute and media session ([b77c817](https://github.com/remvze/moodist/commit/b77c817db25e1a738b6770b1ae86d792e0d42240))
-
-
-### ✨ Features
-
-* add fading to intro and outro ([5467bbb](https://github.com/remvze/moodist/commit/5467bbbc2437a5504e157122a995ad7a565ff0b8))
-* add loader for favorites ([f682a91](https://github.com/remvze/moodist/commit/f682a910da97eb53cfb90ce955e953f05088e686))
-* add media session ([5e0a842](https://github.com/remvze/moodist/commit/5e0a84259ff5586700c4e10087485d905be7ccee))
+### [2.0.1](https://github.com/remvze/moodist/compare/v2.0.0...v2.0.1) (2025-03-25)
 
 
 ### 🐛 Bug Fixes
 
-* add audio element ([889962b](https://github.com/remvze/moodist/commit/889962babe6e940ff283a41b145620d2a0477c70))
-* add media session ([81f33d9](https://github.com/remvze/moodist/commit/81f33d9d375f63b4dd0bf58ad28a72354d85706e))
-* add media session ([216b913](https://github.com/remvze/moodist/commit/216b913ccd0a7dfe0d03575f842aac9711ef0216))
-* add unmute for iOS ([e422b52](https://github.com/remvze/moodist/commit/e422b52436c7dfc0b6cf866afa2b74dc219dcf2f))
-* connect audio context to audio element ([463667c](https://github.com/remvze/moodist/commit/463667c868371540c46c9007e686961f9a4be7e5))
-* increase decimal ([a33ae45](https://github.com/remvze/moodist/commit/a33ae450cf2c883228c76d04df8df75839c12753))
-* remove fading ([d96461d](https://github.com/remvze/moodist/commit/d96461d1ea83c72bfe651d84cf34fabc029c200e))
-* resume audio ([8e4d053](https://github.com/remvze/moodist/commit/8e4d0531e0e9aaf4e52b3b3a8666b74ff0c0222e))
-* undo changes ([32da26c](https://github.com/remvze/moodist/commit/32da26ccfc0c5bdbe031e26ea48363ea0d8a7b23))
+* add delay to cipher text ([4895a72](https://github.com/remvze/moodist/commit/4895a7266d1b7458bc09a77dd6922058a247ea98))
+
+## [2.0.0](https://github.com/remvze/moodist/compare/v1.5.1...v2.0.0) (2025-03-25)
+
+
+### ✅ Testing
+
+* add Vitest and some tests ([def9a57](https://github.com/remvze/moodist/commit/def9a57e0c6454f0e3ffd74b29153a01b33866be))
+* write more tests ([9cc0ccd](https://github.com/remvze/moodist/commit/9cc0ccd325cf769d64779f133bd2d59e6ba7ca58))
+* write tests for motion lib ([d356d77](https://github.com/remvze/moodist/commit/d356d77aa951b84a6ccbd0b1c6590286c042957b))
+* write tests for random helper ([cad85c7](https://github.com/remvze/moodist/commit/cad85c76676cff7fe8c47ccb8d332809f7276e28))
+
+
+### ⚡️ Performance Improvements
+
+* improve the breathing cricle ([3d83a14](https://github.com/remvze/moodist/commit/3d83a1427feaec1e858953899870da06d35b4631))
+
+
+### ♻️ Code Refactoring
+
+* add description for events ([2c8135d](https://github.com/remvze/moodist/commit/2c8135db43b1a1dad789277926af0d1be3e987fc))
+* add JSDoc for custom hooks ([0f50e6a](https://github.com/remvze/moodist/commit/0f50e6ae8b3d1615ed52fb168a48bbb2149090ac))
+* add JSDoc for helper functions ([4ae0504](https://github.com/remvze/moodist/commit/4ae05049377506f79f5ef9f68fa7cf396d7d0528))
+* change stores structure ([096251e](https://github.com/remvze/moodist/commit/096251ec0a459efbbe08d88cabab75c4ad775976))
+* refactor the breathing tool ([d56f8be](https://github.com/remvze/moodist/commit/d56f8be448aa746874c38ba0cc7e00e38d339f59))
+* relocate folders ([f3cea66](https://github.com/remvze/moodist/commit/f3cea668470ca06b2114a03b54660475cc560d44))
+* remove extra hook ([a4a31dd](https://github.com/remvze/moodist/commit/a4a31dd43eef5c3e1d2b62cf4bb6e491e382f988))
+* remove the timer store ([5ffb06b](https://github.com/remvze/moodist/commit/5ffb06be036acb1fe5d8fa4b91e4cbede39ebcc0))
+* rename components ([d73b2bc](https://github.com/remvze/moodist/commit/d73b2bc1ff7689ff85c6453710b2d89927973066))
+* rename stores folder ([2a86a88](https://github.com/remvze/moodist/commit/2a86a88ed6a232c4a8c2a10bbb06f586361f732d))
+* separate the migration ([c35409c](https://github.com/remvze/moodist/commit/c35409ce0a95d8376f0d84c96ed0975c9f3a1301))
+* use the ID instead of index ([7658842](https://github.com/remvze/moodist/commit/7658842324a92210a6a612c70c5479c6bb7f3c05))
+* write JSDoc for libs ([fddf75c](https://github.com/remvze/moodist/commit/fddf75cdca1f121160f9054c82a7a1ddedd6f2fa))
+
+
+### ✨ Features
+
+* add active indicator for sleep timer ([82d8240](https://github.com/remvze/moodist/commit/82d8240b9708a9d522f67ae305dc44e004ced6de))
+* add animation for labels ([48a85b2](https://github.com/remvze/moodist/commit/48a85b26016a8f3cc934e1b2298b0d897ffd9b43))
+* add basic form ([c272914](https://github.com/remvze/moodist/commit/c27291441625eb6528b28f55af3f88e1debd8a55))
+* add binary animation ([699f49b](https://github.com/remvze/moodist/commit/699f49bfa33420698962b56db23b49c8e14bb354))
+* add binaural beat generator without styles ([f40e820](https://github.com/remvze/moodist/commit/f40e8206f8126f1988e0e39ca522ac3c5eb8139f))
+* add breathing exercise ([1f2b6b9](https://github.com/remvze/moodist/commit/1f2b6b952c65c04828f19506134d783a7491df23))
+* add breathing exercise shortcut ([a3b794d](https://github.com/remvze/moodist/commit/a3b794d9748d4a9877e5727269178f207fbc03d5))
+* add breathing exercises and other tools ([eee7553](https://github.com/remvze/moodist/commit/eee755378a14d93d1363e8c265a908d50b9cc332))
+* add breathing exercises tool ([27f2578](https://github.com/remvze/moodist/commit/27f25785e1cfc0482d7ddd625ac1219fd5bb6863))
+* add cipher animation ([29bebb3](https://github.com/remvze/moodist/commit/29bebb3ec74d969fb42968696e470db00a07766e))
+* add confetti ([ace0d6e](https://github.com/remvze/moodist/commit/ace0d6eeccc65c96275a24c8a96e63988cf76134))
+* add countdown timer ([edd53d8](https://github.com/remvze/moodist/commit/edd53d8102871d53b0a11eaa9bae7323f874d988))
+* add countdown timer structure ([c5657d0](https://github.com/remvze/moodist/commit/c5657d06425aea84a4ba9a4b2f48e312be8b0271))
+* add custom checkbox ([cb340c5](https://github.com/remvze/moodist/commit/cb340c53a39917722137a8ee05b779af04a1203d))
+* add custom slider ([3b77c12](https://github.com/remvze/moodist/commit/3b77c12114e5e37c0a3a17c945a0e69e034a35a4))
+* add desktop notice ([07f37ef](https://github.com/remvze/moodist/commit/07f37ef17f8be893d3ceba8fbe4427a9ecda5c15))
+* add done counter ([aa8161a](https://github.com/remvze/moodist/commit/aa8161aac5eb238048c713500a091e9af1c98e6a))
+* add global volume ([3b829fc](https://github.com/remvze/moodist/commit/3b829fce07ed7adf11ca9993c33e33caab285763))
+* add header to todos ([c6cc61a](https://github.com/remvze/moodist/commit/c6cc61a17fcb8542ece3caccc0de536d8003b106))
+* add ID to presets ([78222be](https://github.com/remvze/moodist/commit/78222be011cf93998faed0b7926a5b49dcdeb470))
+* add isochronic tone generator without styles ([d759064](https://github.com/remvze/moodist/commit/d759064373fe791f641db39549e05341068ae8a2))
+* add lofi radios ([bb39b4b](https://github.com/remvze/moodist/commit/bb39b4ba98f20da13e1e7a440441f5474a823f32))
+* add Moodist description to tools ([5b3972b](https://github.com/remvze/moodist/commit/5b3972b3470f3c43903d9a20925ed49321f07440))
+* add more sounds ([d2e289e](https://github.com/remvze/moodist/commit/d2e289e5d5cccd050ca94860f05f00740b3cf139))
+* add more sounds ([554309e](https://github.com/remvze/moodist/commit/554309ebd87da2bce4555f09e5c9f34735d0b794))
+* add more sounds ([be38b92](https://github.com/remvze/moodist/commit/be38b92647209ce17032987b3d6f5d1800322db5))
+* add more sounds ([b497d16](https://github.com/remvze/moodist/commit/b497d16fd8b7d6ccf34c0c91b596fca75dff2f34))
+* add move up and down functionality ([3e11fb6](https://github.com/remvze/moodist/commit/3e11fb6123e4c6b6be9668ef4c274390a5acd16a))
+* add new logo ([c1ece58](https://github.com/remvze/moodist/commit/c1ece582f445906308a0d856181ebaca464ec25a))
+* add notepad tool ([a80289d](https://github.com/remvze/moodist/commit/a80289db57c1b002edd586b323444d3a474587ad))
+* add notepad tool page ([1fd02f9](https://github.com/remvze/moodist/commit/1fd02f927c55155ecd8d1af6325995c4635e0a29))
+* add persist mode to the modal ([4c0f417](https://github.com/remvze/moodist/commit/4c0f417469fb15adbe33cab9bb66459225653e68))
+* add pomodoro timer ([d2edeb4](https://github.com/remvze/moodist/commit/d2edeb48becef62f1002359a41ebe8ebfa1f34bb))
+* add pomodoro timer tool ([bee391a](https://github.com/remvze/moodist/commit/bee391acfecdaf36488c48ef1022b16a83059d58))
+* add PWA ([761c730](https://github.com/remvze/moodist/commit/761c7301295a3e5645326be804225431f823f808))
+* add reverse timer ([105f53e](https://github.com/remvze/moodist/commit/105f53ea028fadae4bd2ff7d8a1856e94f070b1a))
+* add shortcut for breathing exercise ([60cb453](https://github.com/remvze/moodist/commit/60cb453847f0968a4d1abc0fbb66773a54ebdfd9))
+* add simple breathing exercise tool ([fc4f521](https://github.com/remvze/moodist/commit/fc4f52146e2142a0c711b6d6a334c0107b1e1daa))
+* add store to the notepad ([47a63a7](https://github.com/remvze/moodist/commit/47a63a774ebede5db65f17a29a36f0b76d9ed85a))
+* add timer for breathing exercises ([5865fc8](https://github.com/remvze/moodist/commit/5865fc867dc97e03d0f0c79ea8c465e0c0f27411))
+* better heading ([10259d0](https://github.com/remvze/moodist/commit/10259d013f7cb1ae41808f7a78e836ddee3b07f1))
+* bring back all tools ([6a4dc1e](https://github.com/remvze/moodist/commit/6a4dc1ed95072c402cb553fa5b1becb646062c45))
+* bring back all tools ([e1de5c4](https://github.com/remvze/moodist/commit/e1de5c48b299e815f071f15c00424ba1b0189419))
+* change and add shortcuts ([a59db41](https://github.com/remvze/moodist/commit/a59db41dc5eaa7be5ab86c5cc407274eb7b57dfe))
+* change logos ([3d1d45c](https://github.com/remvze/moodist/commit/3d1d45cd4933335cfbe20381c0e758969a3bdcb9))
+* change shortcuts ([4f45279](https://github.com/remvze/moodist/commit/4f45279938f60ee6934c3e6047898b9833c2b9c6))
+* change shortcuts ([251f309](https://github.com/remvze/moodist/commit/251f30930c72a50120412c6b2182fdf4183b9d62))
+* fix modal and scrollbar layout shift ([e399673](https://github.com/remvze/moodist/commit/e3996734621b33c0598db29e82371f1258396147))
+* implement countdown timer functionality ([2bfb9b1](https://github.com/remvze/moodist/commit/2bfb9b181c490c9836e2410199e6a1cf8687e7aa))
+* media session support ([18ed2e6](https://github.com/remvze/moodist/commit/18ed2e6f055d7e32b4a9df33cdb724eaf1f930aa))
+* remove all extra tools ([973e0df](https://github.com/remvze/moodist/commit/973e0df6fb3a6749fd4b0f8d1cd976c67a7e8c43))
+* remove all tools ([2bbdc7e](https://github.com/remvze/moodist/commit/2bbdc7e09e053bd6e8bb052abb7aff723cb14eaa))
+* remove all tools ([b32d8b2](https://github.com/remvze/moodist/commit/b32d8b28034e018eeaf1c544e4128b91f4a95172))
+* remove lofi modal ([13d26b3](https://github.com/remvze/moodist/commit/13d26b3337b2e79d52c774807795b5924a4dcb76))
+* remove pre-made binaurals ([b8ed79f](https://github.com/remvze/moodist/commit/b8ed79f48ad2a315b93aedf1f932b6c5f075b157))
+* remove the breathing exercises ([76fdc74](https://github.com/remvze/moodist/commit/76fdc747100bc15ced92b77b1fefc8cba519d37f))
+* remove the countdown timer ([d6ed3fd](https://github.com/remvze/moodist/commit/d6ed3fd251df029100caba5df304996e723acd78))
+* replace reverse timer ([a6c7ac4](https://github.com/remvze/moodist/commit/a6c7ac41ad5210b9a98e0fe62f5cb387fe9c4e9a))
+* scroll into view after marking favorite ([74f6b58](https://github.com/remvze/moodist/commit/74f6b5851d3a0fac5f97d97cd24f12507c2c3b35))
+* scroll the new timer into view ([f4c66e3](https://github.com/remvze/moodist/commit/f4c66e309277414951b191e627b1f52aab79af6f))
+* update the menu items ([1768ba1](https://github.com/remvze/moodist/commit/1768ba1548a444c57dbfd5e351d77838238aed0d))
+* use custom slider in binaural and isochronic ([e61307a](https://github.com/remvze/moodist/commit/e61307a30263dca8cc016ec5136d52c4b18e5c3c))
+
+
+### 💄 Styling
+
+* add animation to presets ([787a9b6](https://github.com/remvze/moodist/commit/787a9b60b51334ec2a7423d489f71c305661039e))
+* add binary pattern ([ba3cd5c](https://github.com/remvze/moodist/commit/ba3cd5ca5be8435f32b93d5a499e37388340bff8))
+* add focus state ([af075b3](https://github.com/remvze/moodist/commit/af075b32e64a6ab923d60282558250b79cc12da3))
+* add min width ([18987cc](https://github.com/remvze/moodist/commit/18987cc33997c7b010aea2d4f1546ddcabe1a46b))
+* add pattern ([69eb883](https://github.com/remvze/moodist/commit/69eb8832dae026706f76ba21a74fcb248ba4309d))
+* add style to generators ([5c53678](https://github.com/remvze/moodist/commit/5c536786ea64e9722a67289ab2d7e56e7a259404))
+* add title to timer ([a3c384d](https://github.com/remvze/moodist/commit/a3c384d1054b81e056265eecd9344496c9b0b5ce))
+* center icons ([1cf9a85](https://github.com/remvze/moodist/commit/1cf9a85e13d50d3c5335dfb78fa57543ce6fda44))
+* change border radius ([5c9a2aa](https://github.com/remvze/moodist/commit/5c9a2aa23aa04f9386e7d7ac9a20759a2ed87acc))
+* change button style ([8a79ccf](https://github.com/remvze/moodist/commit/8a79ccf018cd7ee86b27b8bd187975376abea953))
+* change description ([9208663](https://github.com/remvze/moodist/commit/9208663050c340fdecf486b4835d30353852fd22))
+* change gradient ([9e38a8f](https://github.com/remvze/moodist/commit/9e38a8fd7da2d68c8c04c4c21cbda6444e9e247b))
+* change icons ([2e1fce4](https://github.com/remvze/moodist/commit/2e1fce46695b693c4b6aa11f18506e2f2cd9bb59))
+* change item order ([9198315](https://github.com/remvze/moodist/commit/919831538fea639eb60c8fb84fa93a79ec2cd9c5))
+* change logo ([4a92d2f](https://github.com/remvze/moodist/commit/4a92d2f1c12c12b4166500149937be51e6442f71))
+* change logo color ([4b01501](https://github.com/remvze/moodist/commit/4b015016e7c531afc3f3b1f51d62bf96232e3ea8))
+* change notice ([9d1d8f8](https://github.com/remvze/moodist/commit/9d1d8f80359097b9122673564d3d57c0827ff3db))
+* change other assets ([11e0ba2](https://github.com/remvze/moodist/commit/11e0ba2f938fc08984e4acba1ba6b4ac3239cacf))
+* fix pointer event ([12d3255](https://github.com/remvze/moodist/commit/12d3255d57083ff72ae919b6161922620dc1d6e2))
+* increase menu width ([96ca376](https://github.com/remvze/moodist/commit/96ca3768856806bbe761e773d5ef626dcd12c968))
+* minor change ([302a71c](https://github.com/remvze/moodist/commit/302a71cdc6472dd29d75372ddc6a3ef214dd68c4))
+* minor change ([b73fd0b](https://github.com/remvze/moodist/commit/b73fd0b16e57140350d0743aa98ec6933bdc5c64))
+* minor changes ([536db4c](https://github.com/remvze/moodist/commit/536db4cd156cb391a0b1ef9bf3e4fbbac06ccc11))
+* minor changes ([7f3ac26](https://github.com/remvze/moodist/commit/7f3ac26b982e629eef891f706004eca5f14e11c4))
+* minor changes ([4cc8597](https://github.com/remvze/moodist/commit/4cc85975e54cfd8195596e017c351a227184806b))
+* minor changes ([b27f24d](https://github.com/remvze/moodist/commit/b27f24d37484a04495a043170ccaf4b4923b31ac))
+* minor changes ([a29e2c2](https://github.com/remvze/moodist/commit/a29e2c20e4bac276495b409b20a6ffaa079122e2))
+* remove animation on change ([41845ff](https://github.com/remvze/moodist/commit/41845ffe5e282c07b3c4cdea56607f1668c636bd))
+* remove animations ([28abc16](https://github.com/remvze/moodist/commit/28abc16b9cbbc3986f7fb3feb17e57e553cda5dd))
+* remove pointer event ([c12ef12](https://github.com/remvze/moodist/commit/c12ef12b79c6db93c457b77f4bfccb2848dc8067))
+* reorder menu items ([0052b91](https://github.com/remvze/moodist/commit/0052b917a817ca7f83fe23521077d99ae78e81cd))
 
 
 ### 🚚 Chores
 
-* add binaural beats ([f1d212a](https://github.com/remvze/moodist/commit/f1d212abc8b69a614bbdc4a23876e2eab7cbb574))
-* add more sounds ([38f6f7d](https://github.com/remvze/moodist/commit/38f6f7dbe6898ed78e51eb3f0c7936f003ddca08))
-* add more sounds ([937bf29](https://github.com/remvze/moodist/commit/937bf29d09cbce20ea0b6b0c87879f3a7dd1d497))
-* add more sounds ([e2172fd](https://github.com/remvze/moodist/commit/e2172fd2bbd0e12a705c9efc98c72ad99d86d006))
-* add more sounds ([1f12afa](https://github.com/remvze/moodist/commit/1f12afa3943154d70145ef6adc6aeee79f7a7af3))
-* add more sounds ([cd05704](https://github.com/remvze/moodist/commit/cd05704a73ffb33aa0ccf5d789328a4cefc320f1))
-* add more sounds ([01b4bdb](https://github.com/remvze/moodist/commit/01b4bdbb572285984bcdc9bb94c1a1b6dd2630c5))
+* add animation to countdown timer ([73a5c21](https://github.com/remvze/moodist/commit/73a5c21be918e1e105214078eaef8d76b168333b))
+* add library sound ([309dd89](https://github.com/remvze/moodist/commit/309dd89a8c13eb2647217c81d7fc0a82eb3ebaae))
+* add toolbox copy ([cfd2744](https://github.com/remvze/moodist/commit/cfd2744e92b7a2948597a750275bf9c900248d55))
+* comment out the banner ([c5adffb](https://github.com/remvze/moodist/commit/c5adffb4d777eda1e2a092e382c1cac616dd60f1))
+* update logos ([7a47282](https://github.com/remvze/moodist/commit/7a472821652d1359126568836b3040ce1fa454c5))
+* update logos ([2b85b27](https://github.com/remvze/moodist/commit/2b85b276eb11d862bf1abd1e6f099740d9b85c10))
+
+
+### 🐛 Bug Fixes
+
+* add default value ([14c331a](https://github.com/remvze/moodist/commit/14c331ab6e692ea3fcdaa056e32728f0a1cd2772))
+* better implement shortcuts ([e77c67b](https://github.com/remvze/moodist/commit/e77c67bc24f1831bb6de80a4335c51e5b84009ed))
+* change icon path ([09c0a6c](https://github.com/remvze/moodist/commit/09c0a6ce93f8b0f62149928218532201e0de16c5))
+* change shortcuts ([edd15f4](https://github.com/remvze/moodist/commit/edd15f4b9a0291b9794102fbb41048de10b0fd69))
+* correct link ([496c831](https://github.com/remvze/moodist/commit/496c831552442047d5556376a212698c8931b698))
+* disable the sleep timer when no sound is selected ([d42eb25](https://github.com/remvze/moodist/commit/d42eb25f7be64b5e77cd0bacd1538949d331aff7))
+* icons path ([1a1359c](https://github.com/remvze/moodist/commit/1a1359c989268a22cfdba20f198af192726ac2ce))
+* remove dropdown menu item from slider ([99e6941](https://github.com/remvze/moodist/commit/99e694161f16a3be03cbda0854687a244df42f21))
+* remove extra hook ([3ef4a07](https://github.com/remvze/moodist/commit/3ef4a076a2b48911d37f75067dc60ea15dd28405))
+
+### [1.5.1](https://github.com/remvze/moodist/compare/v1.5.0...v1.5.1) (2024-06-14)
+
+
+### ♻️ Code Refactoring
+
+* migrate to Astro components ([ffe260f](https://github.com/remvze/moodist/commit/ffe260f4a02238cb83cf92ed06c4f9c75ba189a4))
+* rename some functions ([0533460](https://github.com/remvze/moodist/commit/05334606673a6268ca35083ea31e28cdb11f1b86))
+* use nullish operator ([9d633a9](https://github.com/remvze/moodist/commit/9d633a963772c3444b6e9effc7920fe190b0614d))
+
+
+### 🚚 Chores
+
+* add more sounds ([095e3c7](https://github.com/remvze/moodist/commit/095e3c795ef699e9e99c5eb364badaadce8a884b))
+* add washing machine sound ([7e65bb7](https://github.com/remvze/moodist/commit/7e65bb75f9871603c30ecfc578ad109a969a2a58))
+* update README file ([a9fe7f7](https://github.com/remvze/moodist/commit/a9fe7f7b4f9ca91704d76a314e3c3368fbc4f1cf))
+
+## [1.5.0](https://github.com/remvze/moodist/compare/v1.4.3...v1.5.0) (2024-05-19)
+
+
+### 💄 Styling
+
+* add hover state to button ([ebb35de](https://github.com/remvze/moodist/commit/ebb35deaf982348ccea49e3830af77521fbed207))
+* add outline for better accessibility ([e7d7a37](https://github.com/remvze/moodist/commit/e7d7a37a12dd79f12933b3ffa91fe6e0557c4f9e))
+* add outlines to toolbar buttons ([a3cfbb9](https://github.com/remvze/moodist/commit/a3cfbb98db8a70d8055e86071a4dab4d2b7ab952))
+* better outlines for accessibility ([3c8d75b](https://github.com/remvze/moodist/commit/3c8d75b018e657b2c2e13d967b90b635360225fe))
+* change button styles ([e674738](https://github.com/remvze/moodist/commit/e674738ce70d1c240c57433824a0b509f24deb88))
+* change input styles ([8fe90da](https://github.com/remvze/moodist/commit/8fe90daf1e96def534c62f3241438cf62ea00b18))
+* change outline color ([6f9c941](https://github.com/remvze/moodist/commit/6f9c941a8749f2b006c3f352e0a047c5dc1d3d21))
+
+
+### ♻️ Code Refactoring
+
+* add constants ([81678ea](https://github.com/remvze/moodist/commit/81678ea384bfdc00925e674c988fad85710d705a))
+* add Radix ([ddae0b6](https://github.com/remvze/moodist/commit/ddae0b660ff2bb0bc33400ad59159f4525d80429))
+* better name ([2192335](https://github.com/remvze/moodist/commit/219233523827ed47a8ebea88a4ce73bb3c027e0c))
+* better shortcut handling ([f81ea9e](https://github.com/remvze/moodist/commit/f81ea9e7bdf7c7253587da9312e6fb6caaf14590))
+* reduce dependency ([c893e2a](https://github.com/remvze/moodist/commit/c893e2a6adc68bdd40f8e5dd1e2b3ab6642a0145))
+* relocate generic components ([4adfb3d](https://github.com/remvze/moodist/commit/4adfb3ddc938a2720c26b9107c8cccdf66c0b913))
+* remove extra types ([e490a1d](https://github.com/remvze/moodist/commit/e490a1da84d948c9db2e689414f432aaf53bc0b2))
+* remove hide delay for tooltips ([48291a6](https://github.com/remvze/moodist/commit/48291a645776b235918485b737b9272113f838a0))
+* rename hook file ([2f84268](https://github.com/remvze/moodist/commit/2f84268017aa4592684c8e3ac47399d0f100669d))
+* reorder menu items ([ae0cbf1](https://github.com/remvze/moodist/commit/ae0cbf1aa3392ae775bfee9404c21ed7c145166e))
+* rewrite timer logic ([7c57fb6](https://github.com/remvze/moodist/commit/7c57fb686b50fa106ad0663a44f4831295d235c3))
+
+
+### ✨ Features
+
+* add autofocus for note ([24a53c8](https://github.com/remvze/moodist/commit/24a53c81dffc1a4ba0b46244a87fb49bf562e755))
+* add basic fading effect ([6ce766a](https://github.com/remvze/moodist/commit/6ce766af47389e9e3e57226b956b8593a4af06d4))
+* add better aria labels ([98e5021](https://github.com/remvze/moodist/commit/98e5021f561458465a544e2b86194e7f52a62169))
+* add better aria labels ([9774532](https://github.com/remvze/moodist/commit/977453230847790de86aa7721c059d4fe3ec7eeb))
+* add close event for modals ([af92b1e](https://github.com/remvze/moodist/commit/af92b1ed902b4bf221e53315ba431f834915d7c2))
+* add countdown timer button ([5f066a4](https://github.com/remvze/moodist/commit/5f066a4eff91996b165de3b86549fffe93800d38))
+* add description for sleep timer ([77e2ec5](https://github.com/remvze/moodist/commit/77e2ec5e798771b7719b36882bc68c10265c06f6))
+* add form to sleep timer ([9d458fb](https://github.com/remvze/moodist/commit/9d458fb60e8b84210f492541bab2c5dc94adcc8b))
+* add keyboard shortcut for play button ([d3a2a12](https://github.com/remvze/moodist/commit/d3a2a12e1fdcca502c0d3d6dc60d3e4c577165f2))
+* add keyboard shortcut for unselect button ([99f3a41](https://github.com/remvze/moodist/commit/99f3a41598ea237d2f509825d0b3c0ee27e789d7))
+* add keyboard shortcuts ([669df1f](https://github.com/remvze/moodist/commit/669df1f08264e63c0892e7d4fdd2ee7dbcb96b2e))
+* add lock while fading ([d9246b6](https://github.com/remvze/moodist/commit/d9246b692bcb75018653cb6f437b1f46af1f925d))
+* add media session (wip) ([34d3f07](https://github.com/remvze/moodist/commit/34d3f075816eb821979f1d51a1177ecfa03920f3))
+* add media session (wip) ([cf4870b](https://github.com/remvze/moodist/commit/cf4870b0d6b172bd4e6b79ff517af06b2aeac7a5))
+* add media session (wip) ([9f0a28d](https://github.com/remvze/moodist/commit/9f0a28d9305954486d4f609f85811982df9710f3))
+* add media session (wip) ([56b0e9b](https://github.com/remvze/moodist/commit/56b0e9bf1a16d4e7e2c8d7a552b652f8d30dd800))
+* add media session (wip) ([4f752bb](https://github.com/remvze/moodist/commit/4f752bb6d048c0260ff6b2aada59c227624b2d17))
+* add media session (wip) ([1547b0a](https://github.com/remvze/moodist/commit/1547b0a436bd9a77c19fc5d37be3cb3e123e6117))
+* add media session (wip) ([f311ec1](https://github.com/remvze/moodist/commit/f311ec114e3a8ca61954819334e43195d0980219))
+* add media session (wip) ([df1b05f](https://github.com/remvze/moodist/commit/df1b05f7ce3e26128d0bc4a9a022b5300ea88f85))
+* add media session (wip) ([ea0dfff](https://github.com/remvze/moodist/commit/ea0dfff9c1e7d8e6e03bccdc0ab15d098b31a10d))
+* add media session (wip) ([fc1bd07](https://github.com/remvze/moodist/commit/fc1bd07b7de9532383c66d7e59cc13bbe41f415a))
+* add media session (wip) ([f79e941](https://github.com/remvze/moodist/commit/f79e941527e09e96b5eba6ca8c4e2e3df583c071))
+* add media session (wip) ([11a4514](https://github.com/remvze/moodist/commit/11a4514a0f63f09954361fdef8145869d369fd29))
+* add shortcuts list ([60f167c](https://github.com/remvze/moodist/commit/60f167c4d734bc6238f7c2bb7b39c89ed45ed9eb))
+* add shortcuts to items ([42f82ab](https://github.com/remvze/moodist/commit/42f82ab95d684163826e76231fb1dd554f773d68))
+* add sleep timer ([71b62ed](https://github.com/remvze/moodist/commit/71b62ed3dd365744435dc4499b9c53684f72849c))
+* add story for modal ([9b7d3c6](https://github.com/remvze/moodist/commit/9b7d3c645b8c3469231641e6ec8bbdef88732bbc))
+* add story for snackbar ([43f6245](https://github.com/remvze/moodist/commit/43f62452275573f948449190dcfcef89faa4ec51))
+* allow using spacebar or enter to trigger buttons ([60cc2e9](https://github.com/remvze/moodist/commit/60cc2e9369aff3a374458cf1c3234eec8cd0530e))
+* change shortcuts to shift ([837826f](https://github.com/remvze/moodist/commit/837826fbc13599e51bb7b65cf8b7bdcb1f1fc503))
+* close notepad on escape ([583578b](https://github.com/remvze/moodist/commit/583578b31592b3c0e7f5ae6ad3f83e99e64fb6ff))
+* make the modal more accessible ([0252fa9](https://github.com/remvze/moodist/commit/0252fa96abed18de71472ffc671b13c263754ed9))
+
+
+### 🐛 Bug Fixes
+
+* allow empty inputs ([601ba6d](https://github.com/remvze/moodist/commit/601ba6def7954ca8f961c461abacfb076863ae18))
+* change default values ([34d3c72](https://github.com/remvze/moodist/commit/34d3c72f3512664ac8f26a637b0d0be86b5499df))
+* close all modals ([f025213](https://github.com/remvze/moodist/commit/f025213ef2e8ddbc5e6603d045c8bd4d08ad8b7b))
+* fix button disabled and reset to 0 ([58bf28b](https://github.com/remvze/moodist/commit/58bf28bb24fd12bc28f4f5e3e79058df60095fd4))
+* focus on the first new sound ([54c7772](https://github.com/remvze/moodist/commit/54c777276deccfda20bb7f027cef40d141a445b1))
+* make inputs full width ([cc77f9e](https://github.com/remvze/moodist/commit/cc77f9e9c0b0a0d7734353486c93b4ca1509bf36))
+* make share hotkey conditional ([9ad49d0](https://github.com/remvze/moodist/commit/9ad49d021a34d47160575ae1349f866ecb26c077))
+* play sounds when starting timer if not already playing ([2e375ad](https://github.com/remvze/moodist/commit/2e375ad40a8001ee00c9553ba46d70f3bbe6636c))
+* refocus on show more button ([b955fc9](https://github.com/remvze/moodist/commit/b955fc93f42c1bd71d5fb5ff46f9e3a039c7fe83))
+* relocate focus trap ([8596a00](https://github.com/remvze/moodist/commit/8596a0014cbbac25ec93b1bb9136219a096cb21f))
+* remove auto focus on load ([3b0c229](https://github.com/remvze/moodist/commit/3b0c22968e4209fa5a37a88b69f55492615ec389))
+* remove console log ([7c6f068](https://github.com/remvze/moodist/commit/7c6f068d158cda0f8b0fe6bd6352a65002db0e25))
+* remove media session ([9338b1d](https://github.com/remvze/moodist/commit/9338b1d30a4ae4602b339bc5c5a391a462a03de2))
+* remove media session ([8d01d74](https://github.com/remvze/moodist/commit/8d01d74bd356adce782b95065fadad332ed99e48))
+* replace the animation on button ([8307657](https://github.com/remvze/moodist/commit/8307657628c0afc7ef11c3a829344a64777dc1d3))
+* reset values on cancel ([89a8308](https://github.com/remvze/moodist/commit/89a83089c568c619fd76a28c268ad9af9913babc))
+* take remvze comments into account ([0517c31](https://github.com/remvze/moodist/commit/0517c31fc13e0b82391e18a7d16341421488f1c2))
+* turn off spell check ([c66cddc](https://github.com/remvze/moodist/commit/c66cddc4c98c19a8c0ef46ed0ee7555a30fd5059))
+* typo in README file ([06d0dfb](https://github.com/remvze/moodist/commit/06d0dfbe7eb0660a97c84627b1751b9a43d2e033))
+
+
+### 🚚 Chores
+
+* add accessibility addon ([0300df3](https://github.com/remvze/moodist/commit/0300df3852838135245882a8aa1c59dd1a3f8af7))
+* add autodocs for button ([3f3bcdd](https://github.com/remvze/moodist/commit/3f3bcdda21b631683028ea1c65e674973c78291d))
+* add contributing guide ([5899d1b](https://github.com/remvze/moodist/commit/5899d1bbbb8eb621882e2cbacc1bc1dc9ae2ee06))
+* add contribution section to README file ([b990778](https://github.com/remvze/moodist/commit/b9907781424ccd43babd31dd1d939d2e78ba4a11))
+* add divider ([3e44516](https://github.com/remvze/moodist/commit/3e445165090472859573e69fad0fdeec87ca858f))
+* add emojis ([d09e598](https://github.com/remvze/moodist/commit/d09e598297fb29f005873eb5e1cfad62774fc7f0))
+* add emojis ([781adcf](https://github.com/remvze/moodist/commit/781adcf17eecea61bc03b832d8c81f3aac304848))
+* add features to README file ([c614e3d](https://github.com/remvze/moodist/commit/c614e3d4f54f814fe3813bc8788a23ecba5e38c8))
+* add licenses to README file ([dcef777](https://github.com/remvze/moodist/commit/dcef77729579391706047ad68afd73a07acf5122))
+* add link to issue ([6fe9ce8](https://github.com/remvze/moodist/commit/6fe9ce8915600e5ec0140b5bb635ac1a2b092339))
+* add link to story ([f8fb1ed](https://github.com/remvze/moodist/commit/f8fb1ed61e071baeba7981773e4dbd1e345c29b1))
+* add npm commands to README file ([8d90344](https://github.com/remvze/moodist/commit/8d90344b26d3d52d1649074486d10c7b0bc68b66))
+* add story for snackbar provider ([f19d151](https://github.com/remvze/moodist/commit/f19d151f4a5292668e87abb04111e142482baf1e))
+* add support section ([672988c](https://github.com/remvze/moodist/commit/672988c36e8630fe775fdf0707bfa3e1a8956231))
+* add tech stack to README file ([8e6e690](https://github.com/remvze/moodist/commit/8e6e6900069775df5c29c53b2d2b9a00457ad8f8))
+* complete tech stack ([aeccf2d](https://github.com/remvze/moodist/commit/aeccf2dabd7528ff7984b50b7e7c7b8f46d4cef7))
+* install Storybook ([65ca7e1](https://github.com/remvze/moodist/commit/65ca7e1c942455a41f8af794861a1875bd6190be))
+* remove extra sound ([9ad1630](https://github.com/remvze/moodist/commit/9ad16306cf534ff27e99a537589c0d3c2c483d81))
+* update README file ([629f0a5](https://github.com/remvze/moodist/commit/629f0a514ec1ac96f1874b8d6a466bf05577cd4d))
+* update README file ([de49d37](https://github.com/remvze/moodist/commit/de49d37f08a90523e9b9b298189b10103e833e15))
+* update README file ([7cb0f1c](https://github.com/remvze/moodist/commit/7cb0f1c7521775578bb6d794f43d04aa0da2fcba))
+* update README file ([dc139e4](https://github.com/remvze/moodist/commit/dc139e41e628a75756cea99bdca0252267541014))
+* update README file ([954a1b1](https://github.com/remvze/moodist/commit/954a1b1ce2c9f334d349fcd140ec18a5c78b7dd7))
+* update README file ([383f898](https://github.com/remvze/moodist/commit/383f8981250d2fe646b4f642b36b28b3dbdd178f))
+* write story for button ([603d318](https://github.com/remvze/moodist/commit/603d318e68ec786cfbeaad57835a812ca8918fb9))
+
+### [1.4.3](https://github.com/remvze/moodist/compare/v1.4.2...v1.4.3) (2024-04-11)
+
+### 🚚 Chores
+
+- remove arm/v7 ([fa9711a](https://github.com/remvze/moodist/commit/fa9711a1e09e6e979b420556160c3cd69a8c3775))
+
+### [1.4.2](https://github.com/remvze/moodist/compare/v1.4.1...v1.4.2) (2024-04-11)
+
+### 💄 Styling
+
+- change font path ([43ba975](https://github.com/remvze/moodist/commit/43ba9754085d7a710d3d629e70f873b16f267507))
+
+### 🚚 Chores
+
+- remove arm/v6 ([017c27f](https://github.com/remvze/moodist/commit/017c27fb2b20402553011db8f417717dcca6d447))
+
+### [1.4.1](https://github.com/remvze/moodist/compare/v1.4.0...v1.4.1) (2024-04-11)
+
+### ✨ Features
+
+- add toolbar and portal ([ede4801](https://github.com/remvze/moodist/commit/ede480186c4b3f187c82e1d64e4d521ee59da31a))
+
+### 💄 Styling
+
+- widen the container ([7ec7ea7](https://github.com/remvze/moodist/commit/7ec7ea74d53db85cffa3af646c03270793453009))
+
+### 🚚 Chores
+
+- change GitHub workflow ([faf7f78](https://github.com/remvze/moodist/commit/faf7f78b8c10cd7b3688ed5bba3d0c077c020ad2))
+
+## [1.4.0](https://github.com/remvze/moodist/compare/v1.3.1...v1.4.0) (2024-02-29)
+
+### ♻️ Code Refactoring
+
+- add variant to container ([831a9c8](https://github.com/remvze/moodist/commit/831a9c8ea019a3d86e994ff0e060dd4337a84d1f))
+- move donation to React ([c505c57](https://github.com/remvze/moodist/commit/c505c574a885004e071da63d8255062befc29921))
+- move footer to React ([52176bc](https://github.com/remvze/moodist/commit/52176bc3f9eac43d701de0e7f0ca103eeca46858))
+- remove sections ([3f45be3](https://github.com/remvze/moodist/commit/3f45be3942bfeff74f3f0126de5e61037a749e61))
+
+### 💄 Styling
+
+- add effect to about ([1a499be](https://github.com/remvze/moodist/commit/1a499be2446730d5333dd0d0d6a06bbd47564979))
+- add margin to donate section ([6d30a01](https://github.com/remvze/moodist/commit/6d30a0123e0feb509b6c560f405b98d20a89467a))
+- add polka dot pattern ([dc22b51](https://github.com/remvze/moodist/commit/dc22b51548f0d6830fcee79eebd75650f3f19dc1))
+- add scroll lock in modals ([def69de](https://github.com/remvze/moodist/commit/def69de6e4e11e373280c90f93af0b0369b85ac8))
+- add shine to donation button ([ac24da2](https://github.com/remvze/moodist/commit/ac24da294008a34c49dc3502374f1fcf55db5be8))
+- change description ([8930e7b](https://github.com/remvze/moodist/commit/8930e7b76abffafd0ace5926de6c1d3f7629febd))
+- change dividers ([8471a3c](https://github.com/remvze/moodist/commit/8471a3ca493b0c738ed7de900e82403f0b1ce2b7))
+- change pattern ([f3e7224](https://github.com/remvze/moodist/commit/f3e72242670317d938cc8d9619729be95df0f4f0))
+- change position for toolbar ([e7fd84b](https://github.com/remvze/moodist/commit/e7fd84bd4e8637e34eb0a59e97fd9c49875f8776))
+- change sound counter ([e1b9a17](https://github.com/remvze/moodist/commit/e1b9a1736c1d11827faf900838769194364afbd3))
+- change the about style ([4515aa8](https://github.com/remvze/moodist/commit/4515aa8e7a7f6d0fbc839625f74f0583e1a20d18))
+- change the pattern slightly ([5fc3e7e](https://github.com/remvze/moodist/commit/5fc3e7e5d048cb4aa189683d147b181fdf2a94b6))
+- change unselected style ([586e502](https://github.com/remvze/moodist/commit/586e502c3cc81314bc1e83f4e088a0d9289390fc))
+- decorate paragraphs ([1a6ecd8](https://github.com/remvze/moodist/commit/1a6ecd82abe89e1686538c42b31826ccc8a43b2d))
+- decrease dots ([182a8c7](https://github.com/remvze/moodist/commit/182a8c7aadc9a253261c56ae7faf8ac5c3c82707))
+- decrease dots ([0ad4bb7](https://github.com/remvze/moodist/commit/0ad4bb72e15e8f7d52e7d4b036b71fdb837e3554))
+- decrease dots ([2b84374](https://github.com/remvze/moodist/commit/2b843747b41111908bbe5fb8f5abc407114e4f15))
+- decrease font size ([69cb45b](https://github.com/remvze/moodist/commit/69cb45bff74d36f654d521e9e7f6b2149b01d630))
+- decrease opacity ([56802b6](https://github.com/remvze/moodist/commit/56802b67f2db751dbede9aa58b2158dd250a1420))
+- decrease opacity ([2078648](https://github.com/remvze/moodist/commit/2078648c6687aab79a725490335b8ae751f3d4ee))
+- decrease opacity ([82e4ea7](https://github.com/remvze/moodist/commit/82e4ea72f4ddb8658824813a64e14970400b1820))
+- decrease padding ([98d2f76](https://github.com/remvze/moodist/commit/98d2f764383eaba0dd6163b93826459b614b67d2))
+- decrease shine ([0f32de3](https://github.com/remvze/moodist/commit/0f32de3c0ca9f553c8917b786ddcdfb6feccf0c8))
+- hide about and features ([400ea0a](https://github.com/remvze/moodist/commit/400ea0aeafe48587fe8596d1b5fe90755995d1c3))
+- hide features ([9028675](https://github.com/remvze/moodist/commit/902867505743dd1dcd3f1e2afef010a186586615))
+- increase dots ([405fccc](https://github.com/remvze/moodist/commit/405fcccd95d9ce720f0731e8040006bd1d9b8bd2))
+- increase opacity ([882d440](https://github.com/remvze/moodist/commit/882d44079cfba8c7536c3713f0abeaa075ecb069))
+- increase padding ([8e50013](https://github.com/remvze/moodist/commit/8e500136cec6ba5580146306f25a5956aa3a2a4b))
+- increase pattern opacity ([5b83710](https://github.com/remvze/moodist/commit/5b83710c75515352b88c7bd361694d3067cb08fb))
+- lower opacity ([d4cc24e](https://github.com/remvze/moodist/commit/d4cc24e468230df51e5676abbd828b2f2edd97f3))
+- remove hero pattern ([8f36c86](https://github.com/remvze/moodist/commit/8f36c863d7f7489979691475947dbc8f29f26b39))
+- revert changes ([341a896](https://github.com/remvze/moodist/commit/341a896924a6ace70114ad2ae3349f8934a329ba))
+- revert pattern ([5916e86](https://github.com/remvze/moodist/commit/5916e86d3c6de9912b2c9bd490fa04cd9a0958dd))
+- show about and features ([37505a6](https://github.com/remvze/moodist/commit/37505a6b3f86919ac04b69519e56ddbaf5234843))
+
+### ✨ Features
+
+- add about section ([d725d59](https://github.com/remvze/moodist/commit/d725d597034ead0bb63c5f0667b64ce459477662))
+- add active indicators ([240fd9c](https://github.com/remvze/moodist/commit/240fd9c6e05c7385c0de92b8b57776988b902fae))
+- add alarm for pomodoro timer ([0eb47ba](https://github.com/remvze/moodist/commit/0eb47ba2e1accaee7dd7d6114ca9a69cbc0656c4))
+- add basic pomodoro structure ([9f7de33](https://github.com/remvze/moodist/commit/9f7de336e5add254b40c5694fc4c619ee00602ba))
+- add controls to pomodoro ([7ed016d](https://github.com/remvze/moodist/commit/7ed016d8558a73d8d2bf05823cf80633882c1d69))
+- add copy for productivity toolbox ([3205145](https://github.com/remvze/moodist/commit/3205145d5425c7a7a8660b46aa9de0b273a04ff0))
+- add counter to notepad ([2424523](https://github.com/remvze/moodist/commit/24245235b14f9d59f86d2e988657a45a8a6d1eb7))
+- add CTA button ([0e12a52](https://github.com/remvze/moodist/commit/0e12a5203ef836bd262b3d4cc02aaeb9048f461e))
+- add custom presets ([2484e01](https://github.com/remvze/moodist/commit/2484e01273cf5e7ef5b44395cab26095891118fd))
+- add dividers to menu items ([408734d](https://github.com/remvze/moodist/commit/408734d49fd89fbd47d29527c03927e49c834f30))
+- add fade in/out ([663cb92](https://github.com/remvze/moodist/commit/663cb921350c083f1991665d147a3820bcdd9321))
+- add features section ([e4e332a](https://github.com/remvze/moodist/commit/e4e332ad75aad1a58fd97acb71660b8dec9dfa09))
+- add open-source section ([f7302de](https://github.com/remvze/moodist/commit/f7302dec5b7e182ad465bc30b63457a6e629a5b3))
+- add scroll for lower heights ([758f2f4](https://github.com/remvze/moodist/commit/758f2f48dc6a4e520b7a1e937f96eed28c8e8c20))
+- add simple notepad ([e923559](https://github.com/remvze/moodist/commit/e923559709796698257772cced4e20de584c6c80))
+- add source code item ([d055e66](https://github.com/remvze/moodist/commit/d055e66dd9dd5789c88d1a002686457ea89db073))
+- add special button ([a514a36](https://github.com/remvze/moodist/commit/a514a364ec5b6e2e34e7901ad51219d7be2aee86))
+- add titles ([5f40435](https://github.com/remvze/moodist/commit/5f40435c0ccfec0cb87d9ac0c14723fb8265fa8d))
+- add toolbar to notepad ([7463334](https://github.com/remvze/moodist/commit/7463334053ecd35a53cae535674169f5b50c81c2))
+- change alignments ([1a01a00](https://github.com/remvze/moodist/commit/1a01a0086648c7564ecab30b79df0d67e93eb392))
+- change the copy for features ([38da02a](https://github.com/remvze/moodist/commit/38da02a0d3b08e8f8802d6cf76a04ae656e10b76))
+- change tooltip content ([941e1f0](https://github.com/remvze/moodist/commit/941e1f024189143340d663a0c117c08a0b315599))
+- implement time setting ([f3cb2a1](https://github.com/remvze/moodist/commit/f3cb2a1b63e40f4f742ee2591b9353aa373f9783))
+- persist pomodoro setting ([665e217](https://github.com/remvze/moodist/commit/665e2173f4083128687a6302a6f2fd82674f07c1))
+- persist presets ([38a9a23](https://github.com/remvze/moodist/commit/38a9a23790248d5af522fc0d3cf6e99970e59637))
+
+### 🐛 Bug Fixes
+
+- add correct count to description ([81e6666](https://github.com/remvze/moodist/commit/81e66667765879da624544c5d915c1562f2ab34c))
+- add key to categories ([38c11f1](https://github.com/remvze/moodist/commit/38c11f124e2235bc32de1e469b00ccaa22467a7e))
+- add min-width to inputs ([dfd6c1f](https://github.com/remvze/moodist/commit/dfd6c1fc4a41845e686fc6ee96f71b696213fe69))
+- change completion condition ([1ac5286](https://github.com/remvze/moodist/commit/1ac52861d1de651f8245d1e343307c6cf7a13dde))
+- change default times ([158cffc](https://github.com/remvze/moodist/commit/158cffca8c4b138f33e2df03e046706d2b122478))
+- change initial value ([a7e5368](https://github.com/remvze/moodist/commit/a7e53685918187c47d4fc2935418786b772c189e))
+- change z-index values ([79afb8d](https://github.com/remvze/moodist/commit/79afb8d92f9cb8e551bf101267018af1ab58815d))
+- comment out toolbox section ([a8a8c36](https://github.com/remvze/moodist/commit/a8a8c3643478d3da531e1da6c3640eb327acad3b))
+- make sound count dynamic ([f66a6ff](https://github.com/remvze/moodist/commit/f66a6ffde770992353a5b21fe65c20fe50ab4328))
+- remove extra headings ([7390a9b](https://github.com/remvze/moodist/commit/7390a9b3de0c52163d63b42ad48a882087886b65))
+- remove fading ([653d309](https://github.com/remvze/moodist/commit/653d309e64b770c2b270d2435bcd02345b686fec))
+- remove time from tabs array ([110356b](https://github.com/remvze/moodist/commit/110356b2da82e0f1e971ee9dc486664027d886ff))
+- remove word counter dependency ([ae3ea8c](https://github.com/remvze/moodist/commit/ae3ea8c74f9a94ae56a0eb4b165bc36d990dea7b))
+
+### [1.3.1](https://github.com/remvze/moodist/compare/v1.3.0...v1.3.1) (2024-02-01)
+
+### ✨ Features
+
+- add donate item ([f12ca48](https://github.com/remvze/moodist/commit/f12ca4806c9279f69f298bef770f8cac69a0860a))
+- add donate section ([d449c29](https://github.com/remvze/moodist/commit/d449c29321024a43517e92cc59223b4b22fe2e82))
+- add donation header ([17b4f25](https://github.com/remvze/moodist/commit/17b4f25ff10e09a917203e67cf963cac8358de1a))
+
+### 🐛 Bug Fixes
+
+- coffee typo ([8e02910](https://github.com/remvze/moodist/commit/8e0291004a90e55b67a921b9ffb483b409109ae4))
+- complete donation links ([e6f768a](https://github.com/remvze/moodist/commit/e6f768a5e6dc983ae04b70f6c434fd4c13aeb506))
+
+### 🚚 Chores
+
+- add donation link to README file ([1f806c4](https://github.com/remvze/moodist/commit/1f806c4e561d79a00850130eda09376299d85ed2))
+
+## [1.3.0](https://github.com/remvze/moodist/compare/v1.2.0...v1.3.0) (2024-02-01)
+
+### ♻️ Code Refactoring
+
+- remove media session ([1f63534](https://github.com/remvze/moodist/commit/1f635348e3e5cf73ee76e1c5fac7b5f5b7f7ea6a))
+- remove unmute and media session ([b77c817](https://github.com/remvze/moodist/commit/b77c817db25e1a738b6770b1ae86d792e0d42240))
+
+### ✨ Features
+
+- add fading to intro and outro ([5467bbb](https://github.com/remvze/moodist/commit/5467bbbc2437a5504e157122a995ad7a565ff0b8))
+- add loader for favorites ([f682a91](https://github.com/remvze/moodist/commit/f682a910da97eb53cfb90ce955e953f05088e686))
+- add media session ([5e0a842](https://github.com/remvze/moodist/commit/5e0a84259ff5586700c4e10087485d905be7ccee))
+
+### 🐛 Bug Fixes
+
+- add audio element ([889962b](https://github.com/remvze/moodist/commit/889962babe6e940ff283a41b145620d2a0477c70))
+- add media session ([81f33d9](https://github.com/remvze/moodist/commit/81f33d9d375f63b4dd0bf58ad28a72354d85706e))
+- add media session ([216b913](https://github.com/remvze/moodist/commit/216b913ccd0a7dfe0d03575f842aac9711ef0216))
+- add unmute for iOS ([e422b52](https://github.com/remvze/moodist/commit/e422b52436c7dfc0b6cf866afa2b74dc219dcf2f))
+- connect audio context to audio element ([463667c](https://github.com/remvze/moodist/commit/463667c868371540c46c9007e686961f9a4be7e5))
+- increase decimal ([a33ae45](https://github.com/remvze/moodist/commit/a33ae450cf2c883228c76d04df8df75839c12753))
+- remove fading ([d96461d](https://github.com/remvze/moodist/commit/d96461d1ea83c72bfe651d84cf34fabc029c200e))
+- resume audio ([8e4d053](https://github.com/remvze/moodist/commit/8e4d0531e0e9aaf4e52b3b3a8666b74ff0c0222e))
+- undo changes ([32da26c](https://github.com/remvze/moodist/commit/32da26ccfc0c5bdbe031e26ea48363ea0d8a7b23))
+
+### 🚚 Chores
+
+- add binaural beats ([f1d212a](https://github.com/remvze/moodist/commit/f1d212abc8b69a614bbdc4a23876e2eab7cbb574))
+- add more sounds ([38f6f7d](https://github.com/remvze/moodist/commit/38f6f7dbe6898ed78e51eb3f0c7936f003ddca08))
+- add more sounds ([937bf29](https://github.com/remvze/moodist/commit/937bf29d09cbce20ea0b6b0c87879f3a7dd1d497))
+- add more sounds ([e2172fd](https://github.com/remvze/moodist/commit/e2172fd2bbd0e12a705c9efc98c72ad99d86d006))
+- add more sounds ([1f12afa](https://github.com/remvze/moodist/commit/1f12afa3943154d70145ef6adc6aeee79f7a7af3))
+- add more sounds ([cd05704](https://github.com/remvze/moodist/commit/cd05704a73ffb33aa0ccf5d789328a4cefc320f1))
+- add more sounds ([01b4bdb](https://github.com/remvze/moodist/commit/01b4bdbb572285984bcdc9bb94c1a1b6dd2630c5))
 
 ## [1.2.0](https://github.com/remvze/moodist/compare/v1.1.0...v1.2.0) (2024-01-04)
 
-
 ### ♻️ Code Refactoring
 
-* better item structure for menu ([26bf016](https://github.com/remvze/moodist/commit/26bf01690cfcc105b661951bcb2347394a67fb68))
-* rewrite menu with floating ui ([8beb42c](https://github.com/remvze/moodist/commit/8beb42cb1b92c99aa9656b35cd7d82094e5baf72))
-
+- better item structure for menu ([26bf016](https://github.com/remvze/moodist/commit/26bf01690cfcc105b661951bcb2347394a67fb68))
+- rewrite menu with floating ui ([8beb42c](https://github.com/remvze/moodist/commit/8beb42cb1b92c99aa9656b35cd7d82094e5baf72))
 
 ### 🐛 Bug Fixes
 
-* stringify dependency ([1a23e00](https://github.com/remvze/moodist/commit/1a23e004a65960ce169990211f150db25762fead))
-
+- stringify dependency ([1a23e00](https://github.com/remvze/moodist/commit/1a23e004a65960ce169990211f150db25762fead))
 
 ### ✨ Features
 
-* add animation to menu box ([17027e2](https://github.com/remvze/moodist/commit/17027e299bb9bf958aebaf735c40e7664ad71e8b))
-* add disabled state ([ff26597](https://github.com/remvze/moodist/commit/ff26597d22d444d18d2874a5c278eccc288972de))
-* add menu button ([184bb09](https://github.com/remvze/moodist/commit/184bb09f5ab09fcf877e6a904023d9de72be9a89))
-* add share modal ([35e3215](https://github.com/remvze/moodist/commit/35e32152b153f4dfaf9e071f526f6d7602ea97fc))
-* add share placeholder ([fe2357c](https://github.com/remvze/moodist/commit/fe2357c995713cd0fb8335b325266859dc47a769))
-* basic structure for share link ([ef81f19](https://github.com/remvze/moodist/commit/ef81f198baeb927e3b1768570f75e6638a7bd0b6))
-* **docker:** add dockerfile ([a234bc1](https://github.com/remvze/moodist/commit/a234bc17a66331acbbc1d980cd1f53d58646f534))
-* implement override feature ([0f62f07](https://github.com/remvze/moodist/commit/0f62f0795c5a9e06fa4e62b6b7b1e6c0774dfe0f))
-* implement sharing URL ([93ff72a](https://github.com/remvze/moodist/commit/93ff72a052484b36c9ac821b94b632865b4a3550))
-
+- add animation to menu box ([17027e2](https://github.com/remvze/moodist/commit/17027e299bb9bf958aebaf735c40e7664ad71e8b))
+- add disabled state ([ff26597](https://github.com/remvze/moodist/commit/ff26597d22d444d18d2874a5c278eccc288972de))
+- add menu button ([184bb09](https://github.com/remvze/moodist/commit/184bb09f5ab09fcf877e6a904023d9de72be9a89))
+- add share modal ([35e3215](https://github.com/remvze/moodist/commit/35e32152b153f4dfaf9e071f526f6d7602ea97fc))
+- add share placeholder ([fe2357c](https://github.com/remvze/moodist/commit/fe2357c995713cd0fb8335b325266859dc47a769))
+- basic structure for share link ([ef81f19](https://github.com/remvze/moodist/commit/ef81f198baeb927e3b1768570f75e6638a7bd0b6))
+- **docker:** add dockerfile ([a234bc1](https://github.com/remvze/moodist/commit/a234bc17a66331acbbc1d980cd1f53d58646f534))
+- implement override feature ([0f62f07](https://github.com/remvze/moodist/commit/0f62f0795c5a9e06fa4e62b6b7b1e6c0774dfe0f))
+- implement sharing URL ([93ff72a](https://github.com/remvze/moodist/commit/93ff72a052484b36c9ac821b94b632865b4a3550))
 
 ### 💄 Styling
 
-* add animation to modal ([7823dc7](https://github.com/remvze/moodist/commit/7823dc7ff473278ef8ee401e69796c17b33da794))
-* add icon to menu items ([131ab29](https://github.com/remvze/moodist/commit/131ab296215812e45a0c60486d75683f3de25d16))
-* change border color ([85b627e](https://github.com/remvze/moodist/commit/85b627ecb96a4f52ecacdb53ed4484c050adba5e))
-* change copy ([c51acd6](https://github.com/remvze/moodist/commit/c51acd62618cc705902dc01f0574a2c9124264c5))
-* change to primary color ([c8e5122](https://github.com/remvze/moodist/commit/c8e51226e57bfa72ad91318de25fc5f9b5751634))
-* widen the menu ([37a0736](https://github.com/remvze/moodist/commit/37a0736a0e7edd09c33940099c884e5b48afbbf1))
-
+- add animation to modal ([7823dc7](https://github.com/remvze/moodist/commit/7823dc7ff473278ef8ee401e69796c17b33da794))
+- add icon to menu items ([131ab29](https://github.com/remvze/moodist/commit/131ab296215812e45a0c60486d75683f3de25d16))
+- change border color ([85b627e](https://github.com/remvze/moodist/commit/85b627ecb96a4f52ecacdb53ed4484c050adba5e))
+- change copy ([c51acd6](https://github.com/remvze/moodist/commit/c51acd62618cc705902dc01f0574a2c9124264c5))
+- change to primary color ([c8e5122](https://github.com/remvze/moodist/commit/c8e51226e57bfa72ad91318de25fc5f9b5751634))
+- widen the menu ([37a0736](https://github.com/remvze/moodist/commit/37a0736a0e7edd09c33940099c884e5b48afbbf1))
 
 ### 🚚 Chores
 
-* change docker workflow ([cb4bfea](https://github.com/remvze/moodist/commit/cb4bfea5ab4326dee17c78554f12a08ffcb9dd0e))
-* change docker-compose file ([660ee07](https://github.com/remvze/moodist/commit/660ee07a2359ec77c9d56bbe552541246e0f79c5))
-* update GitHub action ([ee60613](https://github.com/remvze/moodist/commit/ee606139a80121fd6ee1b8233f82af994c4e1178))
+- change docker workflow ([cb4bfea](https://github.com/remvze/moodist/commit/cb4bfea5ab4326dee17c78554f12a08ffcb9dd0e))
+- change docker-compose file ([660ee07](https://github.com/remvze/moodist/commit/660ee07a2359ec77c9d56bbe552541246e0f79c5))
+- update GitHub action ([ee60613](https://github.com/remvze/moodist/commit/ee606139a80121fd6ee1b8233f82af994c4e1178))
 
 ## [1.1.0](https://github.com/remvze/moodist/compare/v1.0.0...v1.1.0) (2023-12-29)
 
-
 ### ♻️ Code Refactoring
 
-* change ordering config ([a43c679](https://github.com/remvze/moodist/commit/a43c679e214b24c7f547e182aea6e2fbf826228f))
-
+- change ordering config ([a43c679](https://github.com/remvze/moodist/commit/a43c679e214b24c7f547e182aea6e2fbf826228f))
 
 ### 🐛 Bug Fixes
 
-* change icon path ([28c3c40](https://github.com/remvze/moodist/commit/28c3c404ad790869b13731e4c3622abe33f1dda2))
-
+- change icon path ([28c3c40](https://github.com/remvze/moodist/commit/28c3c404ad790869b13731e4c3622abe33f1dda2))
 
 ### 🚚 Chores
 
-* add more sounds ([e3864be](https://github.com/remvze/moodist/commit/e3864bede129c102ef5b7258b4688d9177dd284c))
-* add more sounds ([55e7f05](https://github.com/remvze/moodist/commit/55e7f05892f6d3200b56a7e06b371bed4b4c4554))
-* add more sounds ([318e87c](https://github.com/remvze/moodist/commit/318e87c9f1f3e2509c2b8eeb3a7f6875dd1c02fd))
-* add places category ([5970012](https://github.com/remvze/moodist/commit/5970012fa6cbd8222c2be8ce426065f928d81b2b))
-* add transport category ([c1c3945](https://github.com/remvze/moodist/commit/c1c3945d43e84e3011de52bffa5116d58283c473))
-* change heartbeat audio ([f43a378](https://github.com/remvze/moodist/commit/f43a378697437f671c0c33122b1c9ec5a1e173ff))
-* relocate underwater audio ([37bad81](https://github.com/remvze/moodist/commit/37bad8149e1f5170426dc745322c0e65cb9a41ff))
-* remove heartbeat audio ([121a8f2](https://github.com/remvze/moodist/commit/121a8f204c6b61490a7ab0e732779031278e6e8c))
-
+- add more sounds ([e3864be](https://github.com/remvze/moodist/commit/e3864bede129c102ef5b7258b4688d9177dd284c))
+- add more sounds ([55e7f05](https://github.com/remvze/moodist/commit/55e7f05892f6d3200b56a7e06b371bed4b4c4554))
+- add more sounds ([318e87c](https://github.com/remvze/moodist/commit/318e87c9f1f3e2509c2b8eeb3a7f6875dd1c02fd))
+- add places category ([5970012](https://github.com/remvze/moodist/commit/5970012fa6cbd8222c2be8ce426065f928d81b2b))
+- add transport category ([c1c3945](https://github.com/remvze/moodist/commit/c1c3945d43e84e3011de52bffa5116d58283c473))
+- change heartbeat audio ([f43a378](https://github.com/remvze/moodist/commit/f43a378697437f671c0c33122b1c9ec5a1e173ff))
+- relocate underwater audio ([37bad81](https://github.com/remvze/moodist/commit/37bad8149e1f5170426dc745322c0e65cb9a41ff))
+- remove heartbeat audio ([121a8f2](https://github.com/remvze/moodist/commit/121a8f204c6b61490a7ab0e732779031278e6e8c))
 
 ### 💄 Styling
 
-* add hover states ([2c74dd0](https://github.com/remvze/moodist/commit/2c74dd0d604af86f99edcba2eb573641ac2010fd))
-* change button style ([8efb1ce](https://github.com/remvze/moodist/commit/8efb1cee00ec0e0dcd9677729d9136ca8d69073f))
-* change sound counter ([00fc5f3](https://github.com/remvze/moodist/commit/00fc5f3a872be51eb875744e254c75ea58e93281))
-* change theme ([bd517f8](https://github.com/remvze/moodist/commit/bd517f88c01202eb7e7e5acf70bf4af2e6f91d75))
+- add hover states ([2c74dd0](https://github.com/remvze/moodist/commit/2c74dd0d604af86f99edcba2eb573641ac2010fd))
+- change button style ([8efb1ce](https://github.com/remvze/moodist/commit/8efb1cee00ec0e0dcd9677729d9136ca8d69073f))
+- change sound counter ([00fc5f3](https://github.com/remvze/moodist/commit/00fc5f3a872be51eb875744e254c75ea58e93281))
+- change theme ([bd517f8](https://github.com/remvze/moodist/commit/bd517f88c01202eb7e7e5acf70bf4af2e6f91d75))
 
 ## [1.0.0](https://github.com/remvze/moodist/compare/v0.0.1...v1.0.0) (2023-12-09)
 
-
 ### ✨ Features
 
-* add about section ([4e84419](https://github.com/remvze/moodist/commit/4e84419ab19f4f0c129a76a91be194bbab7f6b11))
-* add aria-disabled to play button ([f390f38](https://github.com/remvze/moodist/commit/f390f3801604c49799078298637ea63a06eb9721))
-* add auto pause to play button ([7c901b2](https://github.com/remvze/moodist/commit/7c901b2bdc525d02b80a0c42eb2f81f766947ca3))
-* add auto play on select ([17d1b23](https://github.com/remvze/moodist/commit/17d1b23c8f1a6c717d846c12d38945e7d3b47be1))
-* add basic animations with Framer Motion ([fa7b90e](https://github.com/remvze/moodist/commit/fa7b90eeec5b697446fa5871f8b499a85d0d150f))
-* add basic audio player ([5a7a58e](https://github.com/remvze/moodist/commit/5a7a58e883fbb0122d8d6e2c777049a8fc0d9609))
-* add basic categories ([8d7e4d2](https://github.com/remvze/moodist/commit/8d7e4d26fd7b53a16f7ce39551b31484eefbe461))
-* add basic sound components ([4adb8bf](https://github.com/remvze/moodist/commit/4adb8bfdbc86a475d59e1d636927539592ec4b6c))
-* add basic sounds for prototyping ([5791346](https://github.com/remvze/moodist/commit/5791346a881a9f451b967f782257317d8fb04d63))
-* add color noise ([7363e8d](https://github.com/remvze/moodist/commit/7363e8d51a347adf3c53cbef9ec3e181912ecc6b))
-* add deep merge to Zustand Persist ([01f4031](https://github.com/remvze/moodist/commit/01f40318124ad1e6e09b1f0572f623900192ba9d))
-* add footer component ([262bb1a](https://github.com/remvze/moodist/commit/262bb1a9c6153a53e259e5bd9123b8035bd6b6d1))
-* add gradient line decoration ([5559152](https://github.com/remvze/moodist/commit/5559152a8492dac335f0e6620ca4ca2d9233c889))
-* add help text ([c3521a7](https://github.com/remvze/moodist/commit/c3521a798611aa0ad7297493aa5a790a27bbc991))
-* add hero section ([dc33c2c](https://github.com/remvze/moodist/commit/dc33c2cf9cdcb251b7a0cc4dabdd7aafae154aa9))
-* add hidden selection indicator ([e2cd75a](https://github.com/remvze/moodist/commit/e2cd75a332fab318a529f4f6e04ecf1867be7fd1))
-* add Howler for sounds ([735d9eb](https://github.com/remvze/moodist/commit/735d9ebebfa36dd3e7596e70a0549b24b7b9fc4d))
-* add icon for sounds ([1994004](https://github.com/remvze/moodist/commit/199400446cc241fb66722c79e74f882a7ef6a26c))
-* add link to reasons ([e2b6eaf](https://github.com/remvze/moodist/commit/e2b6eaf8f3278768ce142ed58594958dcc7821ad))
-* add loading state for sounds ([aaccbee](https://github.com/remvze/moodist/commit/aaccbee3d7dd1d4469ee26cea14df7132e8e9e0d))
-* add local storage support ([856b3e6](https://github.com/remvze/moodist/commit/856b3e668ed6f24c8aefe532ac673af5e99141d1))
-* add more and less button for sounds ([13cd72a](https://github.com/remvze/moodist/commit/13cd72a0655d90f0a6b7658b3357d1e8902f8fb7))
-* add more sounds ([0888aaa](https://github.com/remvze/moodist/commit/0888aaa0f09ed549afdb21166ad6d2f048604275))
-* add more sounds ([63ed396](https://github.com/remvze/moodist/commit/63ed396a5a74ed2b6e25882a72511ee93935fe04))
-* add new sounds ([759e6b0](https://github.com/remvze/moodist/commit/759e6b0ce8f0acc3eb0eed508f7c587804097748))
-* add play button ([31c087e](https://github.com/remvze/moodist/commit/31c087ebc8e66220d488226029dcc1435667ce04))
-* add ready section ([e372d2f](https://github.com/remvze/moodist/commit/e372d2f398dbdcfad1069b50911ba840f0c9a1fe))
-* add scroll to top component ([3c1c27b](https://github.com/remvze/moodist/commit/3c1c27b2fd378eb0f7351a3f511375cbc62f2a7b))
-* add simple tooltip ([f2efe3c](https://github.com/remvze/moodist/commit/f2efe3c490ab5429824d10e97979694a4de11dd4))
-* add singing bowl sound ([0b49f66](https://github.com/remvze/moodist/commit/0b49f66e5879642da10054046700a160411448a3))
-* add sound count to hero ([42ccc7a](https://github.com/remvze/moodist/commit/42ccc7ada780fd5db5c038fa9210ec0e3e75be6e))
-* add tooltip to scroll button ([d4401fa](https://github.com/remvze/moodist/commit/d4401faaffcb4351be1a152b89f94c9db63ca213))
-* add why section ([3ed610b](https://github.com/remvze/moodist/commit/3ed610bb468293f6b08c2b2444bc47cd570383eb))
-* change sound count from round to exact ([8c49453](https://github.com/remvze/moodist/commit/8c49453011d127669774f46720ce6e98ca01aa13))
-* complete meta tags ([1cfbf0d](https://github.com/remvze/moodist/commit/1cfbf0dd092d35d2f098c29baf6d6adbc1107cc0))
-* create reusable tooltip ([c637e2d](https://github.com/remvze/moodist/commit/c637e2d63109e12886b6f688c643146707967c7a))
-* implement basic snackbar ([8090599](https://github.com/remvze/moodist/commit/8090599f2bc9ce58cdb36a6a04555afdb7af2bb2))
-* implement basic Zustand store ([22bb65d](https://github.com/remvze/moodist/commit/22bb65de0d4ea9f485e4923b9c8715233df3114e))
-* implement favorite sounds functionality ([cb34b59](https://github.com/remvze/moodist/commit/cb34b59d864fb80b930c0c9e1c1269bb7e9c2b18))
-* implement shuffle functionality ([26ba017](https://github.com/remvze/moodist/commit/26ba017815d7338f49d2017eda75f86f493bf050))
-* implement shuffling functionality ([3ac211e](https://github.com/remvze/moodist/commit/3ac211e3554d26c48fb8e0a588a67f1a4901e9b9))
-* implement unselect all functionality ([8966d59](https://github.com/remvze/moodist/commit/8966d59d758496cc94247364833788dcc555ce8b))
-* reorder sounds in favorites ([dc9da85](https://github.com/remvze/moodist/commit/dc9da85e6825b3cb70e2e6ad4f35c0db3aeb26c2))
-
+- add about section ([4e84419](https://github.com/remvze/moodist/commit/4e84419ab19f4f0c129a76a91be194bbab7f6b11))
+- add aria-disabled to play button ([f390f38](https://github.com/remvze/moodist/commit/f390f3801604c49799078298637ea63a06eb9721))
+- add auto pause to play button ([7c901b2](https://github.com/remvze/moodist/commit/7c901b2bdc525d02b80a0c42eb2f81f766947ca3))
+- add auto play on select ([17d1b23](https://github.com/remvze/moodist/commit/17d1b23c8f1a6c717d846c12d38945e7d3b47be1))
+- add basic animations with Framer Motion ([fa7b90e](https://github.com/remvze/moodist/commit/fa7b90eeec5b697446fa5871f8b499a85d0d150f))
+- add basic audio player ([5a7a58e](https://github.com/remvze/moodist/commit/5a7a58e883fbb0122d8d6e2c777049a8fc0d9609))
+- add basic categories ([8d7e4d2](https://github.com/remvze/moodist/commit/8d7e4d26fd7b53a16f7ce39551b31484eefbe461))
+- add basic sound components ([4adb8bf](https://github.com/remvze/moodist/commit/4adb8bfdbc86a475d59e1d636927539592ec4b6c))
+- add basic sounds for prototyping ([5791346](https://github.com/remvze/moodist/commit/5791346a881a9f451b967f782257317d8fb04d63))
+- add color noise ([7363e8d](https://github.com/remvze/moodist/commit/7363e8d51a347adf3c53cbef9ec3e181912ecc6b))
+- add deep merge to Zustand Persist ([01f4031](https://github.com/remvze/moodist/commit/01f40318124ad1e6e09b1f0572f623900192ba9d))
+- add footer component ([262bb1a](https://github.com/remvze/moodist/commit/262bb1a9c6153a53e259e5bd9123b8035bd6b6d1))
+- add gradient line decoration ([5559152](https://github.com/remvze/moodist/commit/5559152a8492dac335f0e6620ca4ca2d9233c889))
+- add help text ([c3521a7](https://github.com/remvze/moodist/commit/c3521a798611aa0ad7297493aa5a790a27bbc991))
+- add hero section ([dc33c2c](https://github.com/remvze/moodist/commit/dc33c2cf9cdcb251b7a0cc4dabdd7aafae154aa9))
+- add hidden selection indicator ([e2cd75a](https://github.com/remvze/moodist/commit/e2cd75a332fab318a529f4f6e04ecf1867be7fd1))
+- add Howler for sounds ([735d9eb](https://github.com/remvze/moodist/commit/735d9ebebfa36dd3e7596e70a0549b24b7b9fc4d))
+- add icon for sounds ([1994004](https://github.com/remvze/moodist/commit/199400446cc241fb66722c79e74f882a7ef6a26c))
+- add link to reasons ([e2b6eaf](https://github.com/remvze/moodist/commit/e2b6eaf8f3278768ce142ed58594958dcc7821ad))
+- add loading state for sounds ([aaccbee](https://github.com/remvze/moodist/commit/aaccbee3d7dd1d4469ee26cea14df7132e8e9e0d))
+- add local storage support ([856b3e6](https://github.com/remvze/moodist/commit/856b3e668ed6f24c8aefe532ac673af5e99141d1))
+- add more and less button for sounds ([13cd72a](https://github.com/remvze/moodist/commit/13cd72a0655d90f0a6b7658b3357d1e8902f8fb7))
+- add more sounds ([0888aaa](https://github.com/remvze/moodist/commit/0888aaa0f09ed549afdb21166ad6d2f048604275))
+- add more sounds ([63ed396](https://github.com/remvze/moodist/commit/63ed396a5a74ed2b6e25882a72511ee93935fe04))
+- add new sounds ([759e6b0](https://github.com/remvze/moodist/commit/759e6b0ce8f0acc3eb0eed508f7c587804097748))
+- add play button ([31c087e](https://github.com/remvze/moodist/commit/31c087ebc8e66220d488226029dcc1435667ce04))
+- add ready section ([e372d2f](https://github.com/remvze/moodist/commit/e372d2f398dbdcfad1069b50911ba840f0c9a1fe))
+- add scroll to top component ([3c1c27b](https://github.com/remvze/moodist/commit/3c1c27b2fd378eb0f7351a3f511375cbc62f2a7b))
+- add simple tooltip ([f2efe3c](https://github.com/remvze/moodist/commit/f2efe3c490ab5429824d10e97979694a4de11dd4))
+- add singing bowl sound ([0b49f66](https://github.com/remvze/moodist/commit/0b49f66e5879642da10054046700a160411448a3))
+- add sound count to hero ([42ccc7a](https://github.com/remvze/moodist/commit/42ccc7ada780fd5db5c038fa9210ec0e3e75be6e))
+- add tooltip to scroll button ([d4401fa](https://github.com/remvze/moodist/commit/d4401faaffcb4351be1a152b89f94c9db63ca213))
+- add why section ([3ed610b](https://github.com/remvze/moodist/commit/3ed610bb468293f6b08c2b2444bc47cd570383eb))
+- change sound count from round to exact ([8c49453](https://github.com/remvze/moodist/commit/8c49453011d127669774f46720ce6e98ca01aa13))
+- complete meta tags ([1cfbf0d](https://github.com/remvze/moodist/commit/1cfbf0dd092d35d2f098c29baf6d6adbc1107cc0))
+- create reusable tooltip ([c637e2d](https://github.com/remvze/moodist/commit/c637e2d63109e12886b6f688c643146707967c7a))
+- implement basic snackbar ([8090599](https://github.com/remvze/moodist/commit/8090599f2bc9ce58cdb36a6a04555afdb7af2bb2))
+- implement basic Zustand store ([22bb65d](https://github.com/remvze/moodist/commit/22bb65de0d4ea9f485e4923b9c8715233df3114e))
+- implement favorite sounds functionality ([cb34b59](https://github.com/remvze/moodist/commit/cb34b59d864fb80b930c0c9e1c1269bb7e9c2b18))
+- implement shuffle functionality ([26ba017](https://github.com/remvze/moodist/commit/26ba017815d7338f49d2017eda75f86f493bf050))
+- implement shuffling functionality ([3ac211e](https://github.com/remvze/moodist/commit/3ac211e3554d26c48fb8e0a588a67f1a4901e9b9))
+- implement unselect all functionality ([8966d59](https://github.com/remvze/moodist/commit/8966d59d758496cc94247364833788dcc555ce8b))
+- reorder sounds in favorites ([dc9da85](https://github.com/remvze/moodist/commit/dc9da85e6825b3cb70e2e6ad4f35c0db3aeb26c2))
 
 ### 💄 Styling
 
-* add animation to more/less button ([b849b3a](https://github.com/remvze/moodist/commit/b849b3aecd6178114b3b27a2daa014b0795ddf42))
-* add base and global styles ([05d68e4](https://github.com/remvze/moodist/commit/05d68e4de6f55ebbc08817ed553f7760f570208b))
-* add gradient background ([77fed03](https://github.com/remvze/moodist/commit/77fed0308ad55ca32f07b4f30e7a7936063d842a))
-* add gradient line ([ea722ea](https://github.com/remvze/moodist/commit/ea722eabd24cb966c65fa45d41f55e1e1a049939))
-* add line to titles ([ec1def0](https://github.com/remvze/moodist/commit/ec1def041934d8a9f98084299a0606c5690ef23d))
-* add more icons ([41c5ae5](https://github.com/remvze/moodist/commit/41c5ae5db8e72f15f5cc1b7501f397239ba9368a))
-* add new font weight for links ([287d7b3](https://github.com/remvze/moodist/commit/287d7b33fb107e81034a17a60e1cd6cd5d40d935))
-* add smooth transition ([3b33e09](https://github.com/remvze/moodist/commit/3b33e095479340496a7a11b057daef029f40b70a))
-* add smooth transition ([e7fc951](https://github.com/remvze/moodist/commit/e7fc9513109ae48ce407745549085c9449cf3324))
-* add text animation ([7810d21](https://github.com/remvze/moodist/commit/7810d212259cfe19befafab33d51110126089a83))
-* add theme color ([6de1394](https://github.com/remvze/moodist/commit/6de1394628ccb6b58aec02bcd164e56e9ca0f30a))
-* add wrap balancer to desc ([276639b](https://github.com/remvze/moodist/commit/276639b0d3a70ead87dc61e2c8cb7cd621261c3e))
-* better line alignment ([1f24812](https://github.com/remvze/moodist/commit/1f24812efa3b64fdbfc794bcb546226cc2ef07d4))
-* change border to shadow ([a53800c](https://github.com/remvze/moodist/commit/a53800c6b194e7520d2e7ee13c5e00f77db9f5f7))
-* change button animation ([6983559](https://github.com/remvze/moodist/commit/6983559032d731ad6264ad56f0786b1a84f7cf4e))
-* change button animation ([c44a863](https://github.com/remvze/moodist/commit/c44a86361ebf3a77d68148564a2983e60b522c29))
-* change copy ([6242308](https://github.com/remvze/moodist/commit/624230843c3328fdfb42e0e2f23084cef4dec614))
-* change favicon ([a82dc3f](https://github.com/remvze/moodist/commit/a82dc3f36af098071b6be09491e9e25bda190b74))
-* change icon backgrounds ([ef825ca](https://github.com/remvze/moodist/commit/ef825cae68f3cd4ef58016212a45820d3b272f96))
-* change icon color on selection ([e6abca6](https://github.com/remvze/moodist/commit/e6abca61fe9eb36ca6968339a4cb67beeb5f8fdc))
-* change label cursor ([15953ef](https://github.com/remvze/moodist/commit/15953ef8565a27da2b41330753fbc40931987aa7))
-* change like color ([d8c9806](https://github.com/remvze/moodist/commit/d8c9806a1964042b787baabf43e2852bab23dcfa))
-* change logo ([9f702db](https://github.com/remvze/moodist/commit/9f702dbfa74b524b4553bd1686532bc7d35d9985))
-* change primary color ([ed9a027](https://github.com/remvze/moodist/commit/ed9a0271f7c49b499ab07487072cfd7bab5277db))
-* change reason copy ([69c4ec1](https://github.com/remvze/moodist/commit/69c4ec150849a15e2aa222ac4b6f2982cc9536df))
-* change spacing ([cc26f68](https://github.com/remvze/moodist/commit/cc26f68097bd137bea1f62a9eba566844b1cb069))
-* change tagline ([f3603e8](https://github.com/remvze/moodist/commit/f3603e84318a9b69145ae69d3aa02447ed1235e6))
-* decrease gradient shine ([8f58794](https://github.com/remvze/moodist/commit/8f587944fd1ad5e11bb6bc3afc7e9380afa43a6c))
-* decrease margin ([d700195](https://github.com/remvze/moodist/commit/d7001952f9ce323d746118583e0b34e001a8a517))
-* decrease scale animation ([7e668e5](https://github.com/remvze/moodist/commit/7e668e5b393c7df71bec8bf11696acbae22d70e4))
-* fix margins ([99775b7](https://github.com/remvze/moodist/commit/99775b7c6487b009bbf87fbd834ed8730508d1ce))
-* fix snackbar pointer ([14c9e88](https://github.com/remvze/moodist/commit/14c9e88bfbef4b68dce0a1a8e570c1a9d9894dfd))
-* fix tooltip z-index ([fb061c3](https://github.com/remvze/moodist/commit/fb061c3d66d3fa7c3fce63bae1e04e502fcbb891))
-* fix z-index ([fa71709](https://github.com/remvze/moodist/commit/fa71709f897cc2b7a5ba03dbc1cb60a3198bf9f4))
-* increase padding ([eedbf53](https://github.com/remvze/moodist/commit/eedbf53e0e07ba75161e9f397dc0554204bc004a))
-* increase sounds per row ([cd8ec5e](https://github.com/remvze/moodist/commit/cd8ec5e8649f8808d0a89a74c1426b92628efbc7))
-* relocate the play button ([403a755](https://github.com/remvze/moodist/commit/403a755ca7a9d93ef6940d1954fcde058505c1b8))
-* remove extra colors ([38f05a3](https://github.com/remvze/moodist/commit/38f05a3e757ab0c8d91b1f84938bfb8443450769))
-* remove gradient line ([de03cac](https://github.com/remvze/moodist/commit/de03cac6b374e836da65d00b7fe732bf17600554))
-* remove gradient line ([6720e86](https://github.com/remvze/moodist/commit/6720e86a0af14c8c05d73f305ee12664f3b264b7))
-* remove layout animation ([ef952d0](https://github.com/remvze/moodist/commit/ef952d0a03b2cc3490b65535f1c5707b6578836d))
-* remove layout animation ([efd6f99](https://github.com/remvze/moodist/commit/efd6f9941d1483e6a6df8db861ba221084a1f298))
-* remove opacity effect on disabled ([4266557](https://github.com/remvze/moodist/commit/4266557366977534a4fba24922904ac51aaae74d))
-* reverse gradient line ([87f3a2b](https://github.com/remvze/moodist/commit/87f3a2b51104d635dcaf6e48281b99193a7d931a))
-* widen the container ([e7c786f](https://github.com/remvze/moodist/commit/e7c786f25986436606fa723441338588a84b00b3))
-
+- add animation to more/less button ([b849b3a](https://github.com/remvze/moodist/commit/b849b3aecd6178114b3b27a2daa014b0795ddf42))
+- add base and global styles ([05d68e4](https://github.com/remvze/moodist/commit/05d68e4de6f55ebbc08817ed553f7760f570208b))
+- add gradient background ([77fed03](https://github.com/remvze/moodist/commit/77fed0308ad55ca32f07b4f30e7a7936063d842a))
+- add gradient line ([ea722ea](https://github.com/remvze/moodist/commit/ea722eabd24cb966c65fa45d41f55e1e1a049939))
+- add line to titles ([ec1def0](https://github.com/remvze/moodist/commit/ec1def041934d8a9f98084299a0606c5690ef23d))
+- add more icons ([41c5ae5](https://github.com/remvze/moodist/commit/41c5ae5db8e72f15f5cc1b7501f397239ba9368a))
+- add new font weight for links ([287d7b3](https://github.com/remvze/moodist/commit/287d7b33fb107e81034a17a60e1cd6cd5d40d935))
+- add smooth transition ([3b33e09](https://github.com/remvze/moodist/commit/3b33e095479340496a7a11b057daef029f40b70a))
+- add smooth transition ([e7fc951](https://github.com/remvze/moodist/commit/e7fc9513109ae48ce407745549085c9449cf3324))
+- add text animation ([7810d21](https://github.com/remvze/moodist/commit/7810d212259cfe19befafab33d51110126089a83))
+- add theme color ([6de1394](https://github.com/remvze/moodist/commit/6de1394628ccb6b58aec02bcd164e56e9ca0f30a))
+- add wrap balancer to desc ([276639b](https://github.com/remvze/moodist/commit/276639b0d3a70ead87dc61e2c8cb7cd621261c3e))
+- better line alignment ([1f24812](https://github.com/remvze/moodist/commit/1f24812efa3b64fdbfc794bcb546226cc2ef07d4))
+- change border to shadow ([a53800c](https://github.com/remvze/moodist/commit/a53800c6b194e7520d2e7ee13c5e00f77db9f5f7))
+- change button animation ([6983559](https://github.com/remvze/moodist/commit/6983559032d731ad6264ad56f0786b1a84f7cf4e))
+- change button animation ([c44a863](https://github.com/remvze/moodist/commit/c44a86361ebf3a77d68148564a2983e60b522c29))
+- change copy ([6242308](https://github.com/remvze/moodist/commit/624230843c3328fdfb42e0e2f23084cef4dec614))
+- change favicon ([a82dc3f](https://github.com/remvze/moodist/commit/a82dc3f36af098071b6be09491e9e25bda190b74))
+- change icon backgrounds ([ef825ca](https://github.com/remvze/moodist/commit/ef825cae68f3cd4ef58016212a45820d3b272f96))
+- change icon color on selection ([e6abca6](https://github.com/remvze/moodist/commit/e6abca61fe9eb36ca6968339a4cb67beeb5f8fdc))
+- change label cursor ([15953ef](https://github.com/remvze/moodist/commit/15953ef8565a27da2b41330753fbc40931987aa7))
+- change like color ([d8c9806](https://github.com/remvze/moodist/commit/d8c9806a1964042b787baabf43e2852bab23dcfa))
+- change logo ([9f702db](https://github.com/remvze/moodist/commit/9f702dbfa74b524b4553bd1686532bc7d35d9985))
+- change primary color ([ed9a027](https://github.com/remvze/moodist/commit/ed9a0271f7c49b499ab07487072cfd7bab5277db))
+- change reason copy ([69c4ec1](https://github.com/remvze/moodist/commit/69c4ec150849a15e2aa222ac4b6f2982cc9536df))
+- change spacing ([cc26f68](https://github.com/remvze/moodist/commit/cc26f68097bd137bea1f62a9eba566844b1cb069))
+- change tagline ([f3603e8](https://github.com/remvze/moodist/commit/f3603e84318a9b69145ae69d3aa02447ed1235e6))
+- decrease gradient shine ([8f58794](https://github.com/remvze/moodist/commit/8f587944fd1ad5e11bb6bc3afc7e9380afa43a6c))
+- decrease margin ([d700195](https://github.com/remvze/moodist/commit/d7001952f9ce323d746118583e0b34e001a8a517))
+- decrease scale animation ([7e668e5](https://github.com/remvze/moodist/commit/7e668e5b393c7df71bec8bf11696acbae22d70e4))
+- fix margins ([99775b7](https://github.com/remvze/moodist/commit/99775b7c6487b009bbf87fbd834ed8730508d1ce))
+- fix snackbar pointer ([14c9e88](https://github.com/remvze/moodist/commit/14c9e88bfbef4b68dce0a1a8e570c1a9d9894dfd))
+- fix tooltip z-index ([fb061c3](https://github.com/remvze/moodist/commit/fb061c3d66d3fa7c3fce63bae1e04e502fcbb891))
+- fix z-index ([fa71709](https://github.com/remvze/moodist/commit/fa71709f897cc2b7a5ba03dbc1cb60a3198bf9f4))
+- increase padding ([eedbf53](https://github.com/remvze/moodist/commit/eedbf53e0e07ba75161e9f397dc0554204bc004a))
+- increase sounds per row ([cd8ec5e](https://github.com/remvze/moodist/commit/cd8ec5e8649f8808d0a89a74c1426b92628efbc7))
+- relocate the play button ([403a755](https://github.com/remvze/moodist/commit/403a755ca7a9d93ef6940d1954fcde058505c1b8))
+- remove extra colors ([38f05a3](https://github.com/remvze/moodist/commit/38f05a3e757ab0c8d91b1f84938bfb8443450769))
+- remove gradient line ([de03cac](https://github.com/remvze/moodist/commit/de03cac6b374e836da65d00b7fe732bf17600554))
+- remove gradient line ([6720e86](https://github.com/remvze/moodist/commit/6720e86a0af14c8c05d73f305ee12664f3b264b7))
+- remove layout animation ([ef952d0](https://github.com/remvze/moodist/commit/ef952d0a03b2cc3490b65535f1c5707b6578836d))
+- remove layout animation ([efd6f99](https://github.com/remvze/moodist/commit/efd6f9941d1483e6a6df8db861ba221084a1f298))
+- remove opacity effect on disabled ([4266557](https://github.com/remvze/moodist/commit/4266557366977534a4fba24922904ac51aaae74d))
+- reverse gradient line ([87f3a2b](https://github.com/remvze/moodist/commit/87f3a2b51104d635dcaf6e48281b99193a7d931a))
+- widen the container ([e7c786f](https://github.com/remvze/moodist/commit/e7c786f25986436606fa723441338588a84b00b3))
 
 ### 🐛 Bug Fixes
 
-* add aria label to shuffle button ([6d02cfb](https://github.com/remvze/moodist/commit/6d02cfb134bc925b9824040307b1b40626312fd1))
-* add aria labels ([85768d8](https://github.com/remvze/moodist/commit/85768d8bca10f2732e98d138a3d83ec3116816d4))
-* add keys to filler elements ([b7c7d40](https://github.com/remvze/moodist/commit/b7c7d40bf9c47c4a2793335e406ac4173d98a1e0))
-* change icon path ([8cceb6e](https://github.com/remvze/moodist/commit/8cceb6ecd1d0183e0d5f0aeb7af4d80b2dc41b34))
-* change icon path ([dc6a9e1](https://github.com/remvze/moodist/commit/dc6a9e120a0617761c9a36a3f1268c50d4a1b7c5))
-* change icon path ([c184246](https://github.com/remvze/moodist/commit/c184246a1280e9e8cf85c77d1de8d32bf1d7592b))
-* change link address ([1b4d216](https://github.com/remvze/moodist/commit/1b4d216b0813f8d336fba93c2e3bb794a988f834))
-* change page title ([3bebb3e](https://github.com/remvze/moodist/commit/3bebb3e9d259dd7f87d17f29ea85df67c5e2ada5))
-* fix icon imports ([a3eb479](https://github.com/remvze/moodist/commit/a3eb47914024eb7b9493adae95f916be591bb748))
-* fix some animation issues ([eccba87](https://github.com/remvze/moodist/commit/eccba87557e0f444adb740e8d6488adad8a2ce42))
-* fix some types ([04061e2](https://github.com/remvze/moodist/commit/04061e23c3063279afa493a1e120817f80447840))
-* make sound count dynamic ([79458bb](https://github.com/remvze/moodist/commit/79458bba54189147af8b8e3f38b34c756d4bd58e))
-* rehydrate store only on mount ([2c443d3](https://github.com/remvze/moodist/commit/2c443d3f33d9d9f4d00ed1e99a8b092597abce97))
-* remove extra play calls ([e0164c3](https://github.com/remvze/moodist/commit/e0164c362d72fea7587f67470e4d295007e5ad5e))
-* remove history on favorite toggle ([190f06a](https://github.com/remvze/moodist/commit/190f06aa78b1aff931348a65da864404b2d0f4d5))
-* remove history on select ([5bd1dd3](https://github.com/remvze/moodist/commit/5bd1dd3016cf97ad397b4371015605473c55dee8))
-* remove tooltip ([b634d6f](https://github.com/remvze/moodist/commit/b634d6f3c354a51e4403374b2e3505e4f2c09351))
-* rotate the spinner when unselected ([cf7600e](https://github.com/remvze/moodist/commit/cf7600e6c72d9d9638c3a9ad0513675d353422cd))
-* set aria label to ID ([7e0a9af](https://github.com/remvze/moodist/commit/7e0a9afb179d228301effe00575c2f67b426e3da))
-* typo ([5cfb9a8](https://github.com/remvze/moodist/commit/5cfb9a8293a215b83a826c403d996d00108d49b5))
-
+- add aria label to shuffle button ([6d02cfb](https://github.com/remvze/moodist/commit/6d02cfb134bc925b9824040307b1b40626312fd1))
+- add aria labels ([85768d8](https://github.com/remvze/moodist/commit/85768d8bca10f2732e98d138a3d83ec3116816d4))
+- add keys to filler elements ([b7c7d40](https://github.com/remvze/moodist/commit/b7c7d40bf9c47c4a2793335e406ac4173d98a1e0))
+- change icon path ([8cceb6e](https://github.com/remvze/moodist/commit/8cceb6ecd1d0183e0d5f0aeb7af4d80b2dc41b34))
+- change icon path ([dc6a9e1](https://github.com/remvze/moodist/commit/dc6a9e120a0617761c9a36a3f1268c50d4a1b7c5))
+- change icon path ([c184246](https://github.com/remvze/moodist/commit/c184246a1280e9e8cf85c77d1de8d32bf1d7592b))
+- change link address ([1b4d216](https://github.com/remvze/moodist/commit/1b4d216b0813f8d336fba93c2e3bb794a988f834))
+- change page title ([3bebb3e](https://github.com/remvze/moodist/commit/3bebb3e9d259dd7f87d17f29ea85df67c5e2ada5))
+- fix icon imports ([a3eb479](https://github.com/remvze/moodist/commit/a3eb47914024eb7b9493adae95f916be591bb748))
+- fix some animation issues ([eccba87](https://github.com/remvze/moodist/commit/eccba87557e0f444adb740e8d6488adad8a2ce42))
+- fix some types ([04061e2](https://github.com/remvze/moodist/commit/04061e23c3063279afa493a1e120817f80447840))
+- make sound count dynamic ([79458bb](https://github.com/remvze/moodist/commit/79458bba54189147af8b8e3f38b34c756d4bd58e))
+- rehydrate store only on mount ([2c443d3](https://github.com/remvze/moodist/commit/2c443d3f33d9d9f4d00ed1e99a8b092597abce97))
+- remove extra play calls ([e0164c3](https://github.com/remvze/moodist/commit/e0164c362d72fea7587f67470e4d295007e5ad5e))
+- remove history on favorite toggle ([190f06a](https://github.com/remvze/moodist/commit/190f06aa78b1aff931348a65da864404b2d0f4d5))
+- remove history on select ([5bd1dd3](https://github.com/remvze/moodist/commit/5bd1dd3016cf97ad397b4371015605473c55dee8))
+- remove tooltip ([b634d6f](https://github.com/remvze/moodist/commit/b634d6f3c354a51e4403374b2e3505e4f2c09351))
+- rotate the spinner when unselected ([cf7600e](https://github.com/remvze/moodist/commit/cf7600e6c72d9d9638c3a9ad0513675d353422cd))
+- set aria label to ID ([7e0a9af](https://github.com/remvze/moodist/commit/7e0a9afb179d228301effe00575c2f67b426e3da))
+- typo ([5cfb9a8](https://github.com/remvze/moodist/commit/5cfb9a8293a215b83a826c403d996d00108d49b5))
 
 ### 🚚 Chores
 
-* add more sounds ([eed5a13](https://github.com/remvze/moodist/commit/eed5a1329d6fc36d1e6375feaeaf2bba26167bf5))
-* add more sounds ([5a7936f](https://github.com/remvze/moodist/commit/5a7936f11c4510886d14400e088ac0d8977a4806))
-* add more sounds ([8c75f87](https://github.com/remvze/moodist/commit/8c75f875f0e39d392f8394d67b64d3d6d4e6f4a0))
-* add robots.txt file ([6bdf28a](https://github.com/remvze/moodist/commit/6bdf28afdcf218c02f3bddc2a55fc1b6b88ebcff))
-* change README banner ([c450028](https://github.com/remvze/moodist/commit/c450028ac7e58e961204de4789231d357d129ca1))
-* change README file ([85e42f3](https://github.com/remvze/moodist/commit/85e42f3606f9fba281f2177d0dbffc86851603f9))
-* upgrade Astro ([72fa516](https://github.com/remvze/moodist/commit/72fa516316cf1077cf5ab09bc59b76de147c6d38))
-
+- add more sounds ([eed5a13](https://github.com/remvze/moodist/commit/eed5a1329d6fc36d1e6375feaeaf2bba26167bf5))
+- add more sounds ([5a7936f](https://github.com/remvze/moodist/commit/5a7936f11c4510886d14400e088ac0d8977a4806))
+- add more sounds ([8c75f87](https://github.com/remvze/moodist/commit/8c75f875f0e39d392f8394d67b64d3d6d4e6f4a0))
+- add robots.txt file ([6bdf28a](https://github.com/remvze/moodist/commit/6bdf28afdcf218c02f3bddc2a55fc1b6b88ebcff))
+- change README banner ([c450028](https://github.com/remvze/moodist/commit/c450028ac7e58e961204de4789231d357d129ca1))
+- change README file ([85e42f3](https://github.com/remvze/moodist/commit/85e42f3606f9fba281f2177d0dbffc86851603f9))
+- upgrade Astro ([72fa516](https://github.com/remvze/moodist/commit/72fa516316cf1077cf5ab09bc59b76de147c6d38))
 
 ### ♻️ Code Refactoring
 
-* better tooltip ([5fecd38](https://github.com/remvze/moodist/commit/5fecd383aaf757dbb563a1abd7eee0e64905902c))
-* change data file structure ([c9e8bd4](https://github.com/remvze/moodist/commit/c9e8bd41fd79f6c73c11e6fcdbe8b24c6c0bbeb4))
-* relocate sections ([d672bf6](https://github.com/remvze/moodist/commit/d672bf6f85fe7b3a5c20fc53668705ab3d7827c5))
-* remove seperate favorite store ([d7fd17e](https://github.com/remvze/moodist/commit/d7fd17ea8bb79ab44220bedfd62c98f9abf1d9f6))
-* remove seperate playing context ([daee746](https://github.com/remvze/moodist/commit/daee7465bc4460a11b6aa5885cbd0eb7191c0026))
-* rename component ([f5cdb8c](https://github.com/remvze/moodist/commit/f5cdb8c06b44f9cdde27e6e7c7e3d4d156c21dca))
-* separate sounds ([a1ea9a1](https://github.com/remvze/moodist/commit/a1ea9a19e64f062c1d63ecef7fb200fbba063fe4))
-* seperate buttons ([b117a4b](https://github.com/remvze/moodist/commit/b117a4b495bed8d7b034c42a70e080bc062ad672))
-* seperate common types ([bad2d31](https://github.com/remvze/moodist/commit/bad2d31b2dfa6a1f01c1c9cd767209c2c6f58f5c))
-* seperate favorite button ([4124beb](https://github.com/remvze/moodist/commit/4124beb5b4818f1eee322fa6a4777f2e422d04ba))
-* seperate irrelevant logic ([f1688cb](https://github.com/remvze/moodist/commit/f1688cb53ccf7199759b8a60f1d05787edd05790))
-* seperate motion variants ([7fce9e1](https://github.com/remvze/moodist/commit/7fce9e1dff3dfe2b17a92872125bb29f61fee23f))
-* seperate range input ([89149dc](https://github.com/remvze/moodist/commit/89149dca78069affadb5633ba1354dd50fb616ae))
-* sort interface keys ([c5240ff](https://github.com/remvze/moodist/commit/c5240ff507fba8d979ef842ceba05b712b76220d))
-* turn footer into Astro component ([a67083c](https://github.com/remvze/moodist/commit/a67083c0e9812acc1dd71fade41a81f307669116))
-* turn hero into Astro component ([77f9fcc](https://github.com/remvze/moodist/commit/77f9fcc50e54cecb31877eaccb3a578c291f99fe))
-* turn sections into Astro components ([9398ae0](https://github.com/remvze/moodist/commit/9398ae0eddb4fac9695569a97a829bd518500363))
-* use scrollIntoView instead of link ([4d2645f](https://github.com/remvze/moodist/commit/4d2645f06c846eea791f182224be0bc6e3db76dc))
+- better tooltip ([5fecd38](https://github.com/remvze/moodist/commit/5fecd383aaf757dbb563a1abd7eee0e64905902c))
+- change data file structure ([c9e8bd4](https://github.com/remvze/moodist/commit/c9e8bd41fd79f6c73c11e6fcdbe8b24c6c0bbeb4))
+- relocate sections ([d672bf6](https://github.com/remvze/moodist/commit/d672bf6f85fe7b3a5c20fc53668705ab3d7827c5))
+- remove seperate favorite store ([d7fd17e](https://github.com/remvze/moodist/commit/d7fd17ea8bb79ab44220bedfd62c98f9abf1d9f6))
+- remove seperate playing context ([daee746](https://github.com/remvze/moodist/commit/daee7465bc4460a11b6aa5885cbd0eb7191c0026))
+- rename component ([f5cdb8c](https://github.com/remvze/moodist/commit/f5cdb8c06b44f9cdde27e6e7c7e3d4d156c21dca))
+- separate sounds ([a1ea9a1](https://github.com/remvze/moodist/commit/a1ea9a19e64f062c1d63ecef7fb200fbba063fe4))
+- seperate buttons ([b117a4b](https://github.com/remvze/moodist/commit/b117a4b495bed8d7b034c42a70e080bc062ad672))
+- seperate common types ([bad2d31](https://github.com/remvze/moodist/commit/bad2d31b2dfa6a1f01c1c9cd767209c2c6f58f5c))
+- seperate favorite button ([4124beb](https://github.com/remvze/moodist/commit/4124beb5b4818f1eee322fa6a4777f2e422d04ba))
+- seperate irrelevant logic ([f1688cb](https://github.com/remvze/moodist/commit/f1688cb53ccf7199759b8a60f1d05787edd05790))
+- seperate motion variants ([7fce9e1](https://github.com/remvze/moodist/commit/7fce9e1dff3dfe2b17a92872125bb29f61fee23f))
+- seperate range input ([89149dc](https://github.com/remvze/moodist/commit/89149dca78069affadb5633ba1354dd50fb616ae))
+- sort interface keys ([c5240ff](https://github.com/remvze/moodist/commit/c5240ff507fba8d979ef842ceba05b712b76220d))
+- turn footer into Astro component ([a67083c](https://github.com/remvze/moodist/commit/a67083c0e9812acc1dd71fade41a81f307669116))
+- turn hero into Astro component ([77f9fcc](https://github.com/remvze/moodist/commit/77f9fcc50e54cecb31877eaccb3a578c291f99fe))
+- turn sections into Astro components ([9398ae0](https://github.com/remvze/moodist/commit/9398ae0eddb4fac9695569a97a829bd518500363))
+- use scrollIntoView instead of link ([4d2645f](https://github.com/remvze/moodist/commit/4d2645f06c846eea791f182224be0bc6e3db76dc))
 
 ### 0.0.1 (2023-10-05)
 
-
 ### 🚚 Chores
 
-* add Commitizen 9d7cdde
-* add Commitlint 50341d1
-* add Editor Config a7d3495
-* add ESLint be2a66e
-* add Husky 3bed00a
-* add Lint Staged 6cad460
-* add npm config 297f7a7
-* add path alias 123839d
-* add PostCSS 332bd49
-* add Prettier 110359b
-* add Standard Version afc330e
-* add Stylelint 0e5948f
+- add Commitizen 9d7cdde
+- add Commitlint 50341d1
+- add Editor Config a7d3495
+- add ESLint be2a66e
+- add Husky 3bed00a
+- add Lint Staged 6cad460
+- add npm config 297f7a7
+- add path alias 123839d
+- add PostCSS 332bd49
+- add Prettier 110359b
+- add Standard Version afc330e
+- add Stylelint 0e5948f

CONTRIBUTING.md

@@ -0,0 +1,25 @@
+# Contributing Guidelines
+
+Thank you for considering contributing to our project! We welcome your contributions.
+
+## How to Contribute
+
+1. Fork the repository.
+2. Create a new branch: `git checkout -b feature/your-feature-name`.
+3. Make your changes and commit them: `git commit -m 'feat: add some feature'`.
+4. Push to the branch: `git push origin feature/your-feature-name`.
+5. Submit a pull request. ⚡
+
+⚠️ **Notice**: Commit messages should follow [Conventional Commits Specification](https://www.conventionalcommits.org/en/v1.0.0/).
+
+## Report Bugs
+
+To report a bug, please open an issue on GitHub and provide detailed information about the bug, including steps to reproduce it.
+
+## Request Features
+
+To request a new feature, open an issue on GitHub and describe the feature you would like to see added.
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the project's [LICENSE](LICENSE).

Dockerfile

@@ -1,11 +1,11 @@
-FROM node:20-alpine3.18 AS build
+FROM docker.io/node:20-alpine3.18 AS build
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
 RUN npm run build
 
-FROM nginx:alpine AS runtime
+FROM docker.io/nginx:alpine AS runtime
 COPY ./docker/nginx/nginx.conf /etc/nginx/nginx.conf
 COPY --from=build /app/dist /usr/share/nginx/html
 

README.md

@@ -1,6 +1,89 @@
 <div align="center">
-  <img src="/assets/banner.svg" alt="Moodist Logo Banner" />
+  <!-- <img src="/assets/banner.svg" alt="Moodist Logo Banner" /> -->
   <h2>Moodist 🌲</h2>
   <p>Ambient sounds for focus and calm.</p>
-  <a href="https://moodist.app">Visit <strong>Moodist</strong> →</a>
+  <a href="https://moodist.mvze.net">Visit <strong>Moodist</strong></a> | <a href="https://buymeacoffee.com/remvze">Buy Me a Coffee</a>
 </div>
+
+## Table of Contents
+
+- ⚡ [Features](#features)
+- 🧰 [Tools](#tools)
+- 🔮 [Commands](#commands)
+- 🚧 [Contributing](#contributing)
+- ⭐ [Support](#support-moodist)
+- 📜 [License](#license)
+
+## Features
+
+1. 🎵 Over 75 ambient sounds.
+1. 📝 Persistent sound selection.
+1. ✈️ Sharing sound selections with others.
+1. 🧰 Custom sound presets.
+1. 🌙 Sleep timer for sounds.
+1. 📓 Notepad for quick notes.
+1. 🍅 Pomodoro timer.
+1. ✅ Simple to-do list (soon).
+1. ⏯️ Media controls.
+1. ⌨️ Keyboard shortcuts for everything.
+1. 🥷 Privacy focused: no data collection.
+1. 💰 Completely free, open-source, and self-hostable.
+
+## Tools
+
+- ⚡ **TypeScript**: Programming Language
+- 🔨 **React**: UI Library
+- 🧑‍🚀 **Astro**: Meta Framework
+- 🎨 **CSS Modules**: Styling
+- 🐻 **Zustand**: State Management
+- 🎭 **Framer Motion**: Animation Library
+- ⚙️ **Radix**: Accessible Components
+- 📕 **Storybook**: Component Documentation
+- 🧪 **Vitest**: Unit Testing (soon)
+- 🔭 **Playwright**: End-To-End Testing (soon)
+- 🔍 **ESLint**: Code Linting
+- 🧹 **Prettier**: Code Formatting
+- 🧼 **Stylelint**: CSS Linting
+- 🐶 **Husky**: Git Hooks
+- 📝 **Lint Staged**: Running Linters on Staged Files
+- 🧽 **Commitlint**: Git Commit Linting
+- 🧭 **Commitizen**: Git Commit Message Helper
+- 📓 **Standard Version**: Versioning and CHANGLOG Generation
+- 🧰 **PostCSS**: CSS Transformations
+
+## Commands
+
+- `npm run dev`: run development server
+- `npm run build`: build for production
+- `npm run preview`: preview the built app
+- `npm run lint`: lint files using ESLint
+- `npm run lint:fix`: lint and fix using ESLint
+- `npm run lint:style`: lint styles using Stylelint
+- `npm run lint:style:fix`: lint and fix styles using Stylelint
+- `npm run format`: format files using Prettier
+- `npm run commit`: commit message using Commitizen
+- `npm run release:major`: release major version
+- `npm run release:minor`: release minor version
+- `npm run release:patch`: release patch version
+- `npm run storybook`: run Storybook
+
+## Contributing
+
+🚧 Please check [CONTRIBUTING.md](CONTRIBUTING.md) file.
+
+## Support Moodist
+
+⭐ Give a star if you liked this project.
+
+☕ [Buy Me a Coffee](https://buymeacoffee.com/remvze) to help me maintain Moodist.
+
+## License
+
+This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
+
+### ⚠️ Third-Party Assets
+
+Some sounds used in this project are sourced from third-party providers and **are subject to different licenses**:
+
+- Sounds licensed under the **Pixabay Content License**: [Pixabay Content License](https://pixabay.com/service/license-summary/)
+- Sounds licensed under **CC0**: [Creative Commons Zero License](https://creativecommons.org/publicdomain/zero/1.0/)

astro.config.mjs

@@ -1,8 +1,36 @@
 import { defineConfig } from 'astro/config';
 
-import react from "@astrojs/react";
+import react from '@astrojs/react';
+import AstroPWA from '@vite-pwa/astro';
 
-// https://astro.build/config
 export default defineConfig({
-  integrations: [react()]
-});
+  integrations: [
+    react(),
+    AstroPWA({
+      manifest: {
+        background_color: '#09090b',
+        description: 'Ambient sounds for focus and calm.',
+        display: 'standalone',
+        icons: [
+          ...[72, 128, 144, 152, 192, 256, 512].map(size => ({
+            sizes: `${size}x${size}`,
+            src: `/assets/pwa/${size}.png`,
+            type: 'image/png',
+          })),
+        ],
+        name: 'Moodist',
+        orientation: 'any',
+        scope: '/',
+        short_name: 'Moodist',
+        start_url: '/',
+        theme_color: '#09090b',
+      },
+      registerType: 'prompt',
+      workbox: {
+        globPatterns: ['**/*'],
+        maximumFileSizeToCacheInBytes: Number.MAX_SAFE_INTEGER,
+        navigateFallback: '/',
+      },
+    }),
+  ],
+});

package.json

@@ -1,13 +1,14 @@
 {
   "name": "moodist",
   "type": "module",
-  "version": "1.3.0",
+  "version": "2.0.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "test": "vitest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.astro",
     "lint:fix": "npm run lint -- --fix",
     "lint:style": "stylelint ./**/*.{css,astro,html}",
@@ -18,27 +19,49 @@
     "release": "standard-version --no-verify",
     "release:major": "npm run release -- --release-as major",
     "release:minor": "npm run release -- --release-as minor",
-    "release:patch": "npm run release -- --release-as patch"
+    "release:patch": "npm run release -- --release-as patch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.3",
+    "@astrojs/react": "3.6.0",
     "@floating-ui/react": "0.26.0",
+    "@formkit/auto-animate": "0.8.2",
+    "@radix-ui/react-checkbox": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-slider": "1.2.3",
+    "@radix-ui/react-tooltip": "1.0.7",
     "@types/howler": "2.2.10",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.10",
-    "astro": "4.0.3",
+    "@vite-pwa/astro": "0.5.0",
+    "astro": "4.10.3",
     "deepmerge": "4.3.1",
+    "focus-trap-react": "10.2.3",
     "framer-motion": "10.16.4",
     "howler": "2.2.4",
+    "js-confetti": "0.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hotkeys-hook": "3.2.1",
     "react-icons": "4.11.0",
     "react-wrap-balancer": "1.1.0",
+    "uuid": "10.0.0",
     "zustand": "4.4.3"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "1.3.3",
     "@commitlint/cli": "17.7.2",
     "@commitlint/config-conventional": "17.7.0",
+    "@storybook/addon-a11y": "8.0.9",
+    "@storybook/addon-essentials": "8.0.9",
+    "@storybook/addon-interactions": "8.0.9",
+    "@storybook/addon-links": "8.0.9",
+    "@storybook/addon-onboarding": "8.0.9",
+    "@storybook/blocks": "8.0.9",
+    "@storybook/react": "8.0.9",
+    "@storybook/react-vite": "8.0.9",
+    "@storybook/test": "8.0.9",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "astro-eslint-parser": "0.16.0",
@@ -57,6 +80,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sort-destructure-keys": "1.5.0",
     "eslint-plugin-sort-keys-fix": "1.1.2",
+    "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-typescript-sort-keys": "3.1.0",
     "husky": "8.0.3",
     "lint-staged": "14.0.1",
@@ -64,11 +88,14 @@
     "postcss-nesting": "12.0.1",
     "prettier": "3.0.3",
     "prettier-plugin-astro": "0.12.0",
+    "prop-types": "15.8.1",
     "standard-version": "9.5.0",
+    "storybook": "8.0.9",
     "stylelint": "15.10.3",
     "stylelint-config-html": "1.1.0",
     "stylelint-config-recess-order": "4.4.0",
     "stylelint-config-standard": "34.0.0",
-    "stylelint-prettier": "4.0.2"
+    "stylelint-prettier": "4.0.2",
+    "vitest": "1.6.0"
   }
 }

public/favicon.svg

@@ -1,12 +1,4 @@
 <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="128" height="128" rx="25" fill="#09090B"/>
-<path d="M64 19C76.4264 19 86.5 29.0736 86.5 41.5H75.25C75.25 35.2868 70.2132 30.25 64 30.25C57.7868 30.25 52.75 35.2868 52.75 41.5L41.5 41.5C41.5 29.0736 51.5736 19 64 19Z" fill="white"/>
-<path d="M41.5 86.5C29.0736 86.5 19 76.4264 19 64C19 51.5736 29.0736 41.5 41.5 41.5V52.75C35.2868 52.75 30.25 57.7868 30.25 64C30.25 70.2132 35.2868 75.25 41.5 75.25V86.5Z" fill="white"/>
-<path d="M86.5 86.5C86.5 98.9264 76.4264 109 64 109C51.5736 109 41.5 98.9264 41.5 86.5H52.75C52.75 92.7132 57.7868 97.75 64 97.75C70.2132 97.75 75.25 92.7132 75.25 86.5H86.5Z" fill="white"/>
-<path d="M86.5 86.5C98.9264 86.5 109 76.4264 109 64C109 51.5736 98.9264 41.5 86.5 41.5V52.75C92.7132 52.75 97.75 57.7868 97.75 64C97.75 70.2132 92.7132 75.25 86.5 75.25V86.5Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M64 86.5C76.4264 86.5 86.5 76.4264 86.5 64C86.5 51.5736 76.4264 41.5 64 41.5C51.5736 41.5 41.5 51.5736 41.5 64C41.5 76.4264 51.5736 86.5 64 86.5ZM64 75.25C70.2132 75.25 75.25 70.2132 75.25 64C75.25 57.7868 70.2132 52.75 64 52.75C57.7868 52.75 52.75 57.7868 52.75 64C52.75 70.2132 57.7868 75.25 64 75.25Z" fill="white"/>
-<path d="M30.25 41.5C30.25 35.2868 35.2868 30.25 41.5 30.25V19C29.0736 19 19 29.0736 19 41.5H30.25Z" fill="white"/>
-<path d="M97.75 41.5C97.75 35.2868 92.7132 30.25 86.5 30.25V19C98.9264 19 109 29.0736 109 41.5H97.75Z" fill="white"/>
-<path d="M97.75 86.5C97.75 92.7132 92.7132 97.75 86.5 97.75V109C98.9264 109 109 98.9264 109 86.5H97.75Z" fill="white"/>
-<path d="M30.25 86.5C30.25 92.7132 35.2868 97.75 41.5 97.75V109C29.0736 109 19 98.9264 19 86.5H30.25Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.2493 29.2516C58.2929 22.2495 69.7071 22.2495 76.7507 29.2516C77.1507 29.6492 77.5279 30.0608 77.8825 30.4848C78.433 30.4357 78.9908 30.4114 79.5547 30.4131C89.4866 30.4424 97.5576 38.5135 97.587 48.4453C97.5886 49.0092 97.5643 49.567 97.5152 50.1176C97.9392 50.4721 98.3508 50.8493 98.7484 51.2493C105.751 58.2929 105.751 69.7071 98.7484 76.7507C98.3508 77.1507 97.9392 77.5279 97.5152 77.8825C97.5643 78.433 97.5886 78.9908 97.587 79.5547C97.5576 89.4866 89.4865 97.5577 79.5547 97.587C78.9908 97.5886 78.433 97.5643 77.8824 97.5152C77.5279 97.9392 77.1506 98.3508 76.7507 98.7484C69.7071 105.751 58.2929 105.751 51.2493 98.7484C50.8493 98.3508 50.4721 97.9392 50.1175 97.5152C49.567 97.5643 49.0092 97.5886 48.4453 97.5869C38.5134 97.5576 30.4424 89.4865 30.413 79.5547C30.4114 78.9908 30.4357 78.433 30.4848 77.8824C30.0608 77.5279 29.6492 77.1506 29.2516 76.7507C22.2495 69.7071 22.2495 58.2929 29.2516 51.2493C29.6492 50.8493 30.0608 50.4721 30.4848 50.1175C30.4357 49.567 30.4114 49.0092 30.4131 48.4453C30.4424 38.5134 38.5135 30.4423 48.4453 30.413C49.0092 30.4114 49.567 30.4356 50.1176 30.4848C50.4721 30.0608 50.8494 29.6492 51.2493 29.2516ZM47.29 35.173C40.877 35.7508 35.7508 40.8769 35.1731 47.29C38.8003 45.8063 42.8126 45.5647 46.5652 46.5652C45.5647 42.8126 45.8063 38.8002 47.29 35.173ZM53.7297 50.3922C50.2143 46.1861 49.7248 40.3267 52.2613 35.6603C57.3546 37.1664 61.1517 41.6557 61.64 47.1156C61.6129 47.529 61.5997 47.9462 61.6009 48.3669L61.6302 58.2787L54.6421 51.2493C54.3456 50.951 54.0412 50.6653 53.7297 50.3922ZM50.3922 53.7297C46.1861 50.2143 40.3268 49.7248 35.6603 52.2613C37.1665 57.3546 41.6558 61.1517 47.1157 61.64C47.5291 61.6128 47.9462 61.5996 48.3668 61.6009L58.2787 61.6302L51.2493 54.6421C50.951 54.3456 50.6653 54.0412 50.3922 53.7297ZM39.3435 64C35.9825 62.0539 33.3162 59.046 31.8005 55.432C27.6743 60.3752 27.6743 67.6247 31.8005 72.5679C33.3162 68.954 35.9825 65.946 39.3435 64ZM35.6603 75.7387C37.1664 70.6454 41.6558 66.8483 47.1157 66.36C47.5291 66.3871 47.9463 66.4003 48.3669 66.3991L58.2787 66.3698L51.2493 73.3579C50.951 73.6544 50.6653 73.9588 50.3922 74.2703C46.1861 77.7857 40.3268 78.2752 35.6603 75.7387ZM35.1731 80.71C35.7508 87.123 40.8769 92.2492 47.29 92.8269C45.8063 89.1997 45.5647 85.1874 46.5652 81.4348C42.8126 82.4353 38.8003 82.1937 35.1731 80.71ZM53.7297 77.6078C50.2143 81.8138 49.7248 87.6732 52.2613 92.3397C57.3546 90.8336 61.1516 86.3443 61.64 80.8844C61.6128 80.471 61.5996 80.0538 61.6009 79.6332L61.6302 69.7213L54.6421 76.7507C54.3456 77.049 54.0412 77.3347 53.7297 77.6078ZM64 88.6565C62.0539 92.0175 59.046 94.6838 55.4321 96.1995C60.3753 100.326 67.6247 100.326 72.5679 96.1995C68.954 94.6838 65.946 92.0175 64 88.6565ZM75.7387 92.3397C70.6454 90.8336 66.8483 86.3443 66.36 80.8844C66.3871 80.471 66.4004 80.0538 66.3991 79.6331L66.3699 69.7213L73.3579 76.7507C73.6544 77.049 73.9588 77.3347 74.2703 77.6078C77.7857 81.8139 78.2752 87.6733 75.7387 92.3397ZM80.71 92.827C87.1231 92.2492 92.2492 87.1231 92.8269 80.71C89.1997 82.1937 85.1874 82.4353 81.4348 81.4348C82.4353 85.1874 82.1937 89.1997 80.71 92.827ZM77.6078 74.2703C81.8138 77.7857 87.6732 78.2752 92.3397 75.7387C90.8336 70.6454 86.3442 66.8483 80.8843 66.36C80.471 66.3872 80.0538 66.4004 79.6332 66.3991L69.7213 66.3698L76.7507 73.3579C77.049 73.6544 77.3347 73.9588 77.6078 74.2703ZM88.6565 64C92.0175 65.9461 94.6838 68.954 96.1995 72.568C100.326 67.6248 100.326 60.3753 96.1995 55.4321C94.6838 59.046 92.0175 62.054 88.6565 64ZM92.3397 52.2613C90.8336 57.3546 86.3442 61.1517 80.8843 61.64C80.471 61.6129 80.0538 61.5997 79.6331 61.6009L69.7213 61.6302L76.7507 54.6421C77.049 54.3456 77.3347 54.0412 77.6078 53.7297C81.8139 50.2143 87.6732 49.7248 92.3397 52.2613ZM92.8269 47.29C92.2492 40.877 87.1231 35.7508 80.71 35.1731C82.1937 38.8003 82.4353 42.8126 81.4348 46.5652C85.1874 45.5647 89.1997 45.8063 92.8269 47.29ZM74.2703 50.3922C77.7857 46.1861 78.2752 40.3268 75.7387 35.6603C70.6455 37.1664 66.8484 41.6557 66.36 47.1156C66.3872 47.529 66.4004 47.9462 66.3991 48.3668L66.3699 58.2787L73.3579 51.2493C73.6544 50.951 73.9588 50.6653 74.2703 50.3922ZM64 39.3435C62.054 35.9825 59.046 33.3162 55.4321 31.8005C60.3753 27.6743 67.6248 27.6743 72.568 31.8005C68.954 33.3162 65.9461 35.9825 64 39.3435Z" fill="#FAFAFA"/>
 </svg>

public/logo.svg

@@ -1,11 +1,3 @@
 <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M100 150C127.614 150 150 127.614 150 100C150 72.3858 127.614 50 100 50C72.3858 50 50 72.3858 50 100C50 127.614 72.3858 150 100 150ZM100 125C113.807 125 125 113.807 125 100C125 86.1929 113.807 75 100 75C86.1929 75 75 86.1929 75 100C75 113.807 86.1929 125 100 125Z" fill="#FAFAFA"/>
-<path d="M50 50C22.3858 50 2.00172e-06 72.3857 7.94663e-07 100C-4.12393e-07 127.614 22.3858 150 50 150V125C36.1929 125 25 113.807 25 100C25 86.1929 36.1929 75 50 75V50Z" fill="#D4D4D8"/>
-<path d="M150 50C150 22.3858 127.614 2.41411e-06 100 0C72.3858 -2.41411e-06 50 22.3858 50 50L75 50C75 36.1929 86.1929 25 100 25C113.807 25 125 36.1929 125 50H150Z" fill="#D4D4D8"/>
-<path d="M150 150C177.614 150 200 127.614 200 100C200 72.3858 177.614 50 150 50V75C163.807 75 175 86.1929 175 100C175 113.807 163.807 125 150 125V150Z" fill="#D4D4D8"/>
-<path d="M50 150C50 177.614 72.3857 200 100 200C127.614 200 150 177.614 150 150H125C125 163.807 113.807 175 100 175C86.1929 175 75 163.807 75 150H50Z" fill="#D4D4D8"/>
-<path d="M25 50C25 36.1929 36.1929 25 50 25V1.39091e-06C22.3858 1.83851e-07 2.00172e-06 22.3857 7.94663e-07 50H25Z" fill="#A1A1AA"/>
-<path d="M150 25C163.807 25 175 36.1929 175 50H200C200 22.3858 177.614 3.24858e-06 150 8.34465e-07L150 25Z" fill="#A1A1AA"/>
-<path d="M175 150C175 163.807 163.807 175 150 175V200C177.614 200 200 177.614 200 150H175Z" fill="#A1A1AA"/>
-<path d="M50 175C36.1929 175 25 163.807 25 150H0C0 177.614 22.3857 200 50 200V175Z" fill="#A1A1AA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.1232 13.129C85.7322 -4.37634 114.268 -4.37634 131.877 13.129C132.877 14.1229 133.82 15.1519 134.706 16.212C136.083 16.0892 137.477 16.0285 138.887 16.0326C163.716 16.1059 183.894 36.2836 183.967 61.1133C183.972 62.5231 183.911 63.9175 183.788 65.2939C184.848 66.1803 185.877 67.1234 186.871 68.1232C204.376 85.7322 204.376 114.268 186.871 131.877C185.877 132.877 184.848 133.82 183.788 134.706C183.911 136.083 183.972 137.477 183.967 138.887C183.894 163.716 163.716 183.894 138.887 183.967C137.477 183.972 136.082 183.911 134.706 183.788C133.82 184.848 132.877 185.877 131.877 186.871C114.268 204.376 85.7322 204.376 68.1232 186.871C67.1234 185.877 66.1803 184.848 65.2939 183.788C63.9175 183.911 62.523 183.972 61.1133 183.967C36.2836 183.894 16.1059 163.716 16.0326 138.887C16.0284 137.477 16.0892 136.082 16.212 134.706C15.1519 133.82 14.1229 132.877 13.129 131.877C-4.37634 114.268 -4.37634 85.7322 13.129 68.1232C14.1229 67.1234 15.1519 66.1803 16.212 65.2939C16.0892 63.9175 16.0285 62.523 16.0326 61.1132C16.1059 36.2836 36.2837 16.1059 61.1133 16.0325C62.5231 16.0284 63.9176 16.0891 65.294 16.2119C66.1803 15.1519 67.1234 14.1229 68.1232 13.129ZM58.225 27.9326C42.1924 29.3769 29.377 42.1923 27.9327 58.2249C37.0007 54.5157 47.0315 53.9118 56.413 56.413C53.9118 47.0315 54.5158 37.0006 58.225 27.9326ZM74.3243 65.9805C65.5357 55.4653 64.3121 40.8169 70.6533 29.1507C83.3865 32.916 92.8792 44.1393 94.1001 57.789C94.0322 58.8224 93.9991 59.8655 94.0023 60.9171L94.0754 85.6967L76.6053 68.1232C75.8639 67.3774 75.103 66.6632 74.3243 65.9805ZM65.9805 74.3243C55.4654 65.5357 40.8169 64.3121 29.1508 70.6533C32.9161 83.3864 44.1395 92.8792 57.7893 94.1C58.8226 94.0321 59.8656 93.9991 60.9171 94.0022L85.6967 94.0754L68.1232 76.6053C67.3774 75.8639 66.6632 75.103 65.9805 74.3243ZM38.3587 99.9999C29.9563 95.1348 23.2906 87.6149 19.5013 78.5801C9.18585 90.9381 9.18584 109.062 19.5013 121.42C23.2905 112.385 29.9563 104.865 38.3587 99.9999ZM29.1508 129.347C32.9161 116.613 44.1394 107.121 57.7893 105.9C58.8227 105.968 59.8656 106.001 60.9171 105.998L85.6968 105.925L68.1232 123.395C67.3774 124.136 66.6631 124.897 65.9805 125.676C55.4653 134.464 40.8169 135.688 29.1508 129.347ZM27.9327 141.775C29.377 157.808 42.1924 170.623 58.2249 172.067C54.5157 162.999 53.9118 152.969 56.413 143.587C47.0315 146.088 37.0007 145.484 27.9327 141.775ZM74.3243 134.019C65.5357 144.535 64.3121 159.183 70.6533 170.849C83.3864 167.084 92.8791 155.861 94.1001 142.211C94.0321 141.178 93.9991 140.135 94.0022 139.083L94.0754 114.303L76.6053 131.877C75.8639 132.623 75.103 133.337 74.3243 134.019ZM100 161.641C95.1349 170.044 87.6149 176.709 78.5801 180.499C90.9381 190.814 109.062 190.814 121.42 180.499C112.385 176.71 104.865 170.044 100 161.641ZM129.347 170.849C116.614 167.084 107.121 155.861 105.9 142.211C105.968 141.178 106.001 140.134 105.998 139.083L105.925 114.303L123.395 131.877C124.136 132.623 124.897 133.337 125.676 134.019C134.464 144.535 135.688 159.183 129.347 170.849ZM141.775 172.067C157.808 170.623 170.623 157.808 172.067 141.775C162.999 145.484 152.969 146.088 143.587 143.587C146.088 152.969 145.484 162.999 141.775 172.067ZM134.019 125.676C144.535 134.464 159.183 135.688 170.849 129.347C167.084 116.614 155.861 107.121 142.211 105.9C141.177 105.968 140.134 106.001 139.083 105.998L114.303 105.925L131.877 123.395C132.623 124.136 133.337 124.897 134.019 125.676ZM161.641 100C170.044 104.865 176.709 112.385 180.499 121.42C190.814 109.062 190.814 90.9382 180.499 78.5802C176.709 87.615 170.044 95.135 161.641 100ZM170.849 70.6533C167.084 83.3865 155.861 92.8793 142.211 94.1001C141.177 94.0322 140.134 93.9992 139.083 94.0023L114.303 94.0754L131.877 76.6053C132.623 75.8639 133.337 75.103 134.019 74.3243C144.535 65.5357 159.183 64.3121 170.849 70.6533ZM172.067 58.2249C170.623 42.1924 157.808 29.377 141.775 27.9327C145.484 37.0007 146.088 47.0315 143.587 56.413C152.969 53.9118 162.999 54.5157 172.067 58.2249ZM125.676 65.9805C134.464 55.4653 135.688 40.8169 129.347 29.1508C116.614 32.9161 107.121 44.1393 105.9 57.789C105.968 58.8224 106.001 59.8655 105.998 60.9171L105.925 85.6967L123.395 68.1232C124.136 67.3774 124.897 66.6631 125.676 65.9805ZM100 38.3587C95.135 29.9563 87.615 23.2905 78.5802 19.5012C90.9382 9.18585 109.062 9.18587 121.42 19.5013C112.385 23.2905 104.865 29.9563 100 38.3587Z" fill="#FAFAFA"/>
 </svg>

src/components/about.astro

@@ -0,0 +1,156 @@
+---
+import { Container } from '@/components/container';
+
+import { count as soundCount } from '@/lib/sounds';
+
+const count = soundCount();
+
+const paragraphs = [
+  {
+    body: 'Craving a calming escape from the daily grind? Do you need the perfect soundscape to boost your focus or lull you into peaceful sleep? Look no further than Moodist, your free and open-source ambient sound generator! Ditch the subscriptions and registrations – with Moodist, you unlock a world of soothing and immersive audio experiences, entirely for free.',
+    title: 'Free Ambient Sounds',
+  },
+  {
+    body: `Dive into an expansive library of ${count} carefully curated sounds. Nature lovers will find solace in the gentle murmur of streams, the rhythmic crash of waves, or the crackling warmth of a campfire. Cityscapes come alive with the soft hum of cafes, the rhythmic clatter of trains, or the calming white noise of traffic. And for those seeking deeper focus or relaxation, Moodist offers binaural beats and color noise designed to enhance your state of mind.`,
+    title: 'Carefully Curated Sounds',
+  },
+  {
+    body: 'The beauty of Moodist lies in its simplicity and customization. No complex menus or confusing options – just choose your desired sounds, adjust the volume balance, and hit play. Want to blend the gentle chirping of birds with the soothing sound of rain? No problem! Layer as many sounds as you like to create your personalized soundscape oasis.',
+    title: 'Create Your Soundscape',
+  },
+  {
+    body: "Whether you're looking to unwind after a long day, enhance your focus during work, or lull yourself into a peaceful sleep, Moodist has the perfect soundscape waiting for you. The best part? It's completely free and open-source, so you can enjoy its benefits without any strings attached. Start using Moodist today and discover your new haven of tranquility and focus!",
+    title: 'Sounds for Every Moment',
+  },
+];
+---
+
+<section class="about">
+  <div class="effect"></div>
+
+  <Container tight>
+    {
+      paragraphs.map((paragraph, index) => (
+        <div class="paragraph">
+          <div class="counter">
+            <span>0{index + 1}</span> / 0{paragraphs.length}
+          </div>
+
+          <h2 class="title">{paragraph.title}</h2>
+          <p class="body">{paragraph.body}</p>
+        </div>
+      ))
+    }
+
+    <button class="button" id="use-moodist"> Use Moodist</button>
+  </Container>
+</section>
+
+<script lang="ts">
+  const button = document.getElementById('use-moodist');
+
+  button.addEventListener('click', () => {
+    const app = document.getElementById('app');
+
+    app?.scrollIntoView();
+  });
+</script>
+
+<style>
+  .about {
+    padding-top: 10px;
+
+    & .effect {
+      position: sticky;
+      top: 0;
+      height: 80px;
+      background: linear-gradient(var(--color-neutral-50), transparent);
+    }
+
+    & .paragraph {
+      padding: 30px 0;
+      background: linear-gradient(
+        transparent,
+        var(--color-neutral-50) 10%,
+        var(--color-neutral-50) 90%,
+        transparent
+      );
+
+      &:last-of-type {
+        padding-bottom: 0;
+      }
+
+      & .counter {
+        width: max-content;
+        padding: 6px 16px;
+        margin-bottom: 16px;
+        font-size: var(--font-xsm);
+        color: var(--color-foreground-subtle);
+        background: linear-gradient(var(--color-neutral-100), transparent);
+        border: 1px solid var(--color-neutral-300);
+        border-radius: 20px 20px 20px 8px;
+
+        & span {
+          font-weight: 500;
+          color: var(--color-foreground);
+        }
+      }
+
+      & .title {
+        margin-bottom: 8px;
+        font-family: var(--font-heading);
+        font-size: var(--font-md);
+        font-weight: 600;
+      }
+
+      & .body {
+        line-height: 1.6;
+        color: var(--color-foreground-subtle);
+      }
+    }
+
+    .button {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 16px;
+      margin-top: 20px;
+      font-size: var(--font-xsm);
+      font-weight: 500;
+      color: var(--color-foreground);
+      cursor: pointer;
+      background-color: transparent;
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 50px;
+      outline: none;
+      transition: 0.2s;
+
+      &::before {
+        position: absolute;
+        top: -1px;
+        left: 50%;
+        width: 70%;
+        height: 1px;
+        content: '';
+        background: linear-gradient(
+          90deg,
+          transparent,
+          var(--color-neutral-300),
+          transparent
+        );
+        transform: translateX(-50%);
+      }
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--color-neutral-100);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
+    }
+  }
+</style>

src/components/app/app.tsx

@@ -3,25 +3,30 @@ import { useShallow } from 'zustand/react/shallow';
 import { BiSolidHeart } from 'react-icons/bi/index';
 import { Howler } from 'howler';
 
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 
 import { Container } from '@/components/container';
 import { StoreConsumer } from '@/components/store-consumer';
 import { Buttons } from '@/components/buttons';
 import { Categories } from '@/components/categories';
-import { ScrollToTop } from '@/components/scroll-to-top';
 import { SharedModal } from '@/components/modals/shared';
-import { Menu } from '@/components/menu/menu';
+import { Toolbar } from '@/components/toolbar';
 import { SnackbarProvider } from '@/contexts/snackbar';
+import { MediaControls } from '@/components/media-controls';
 
 import { sounds } from '@/data/sounds';
+import { FADE_OUT } from '@/constants/events';
 
 import type { Sound } from '@/data/types';
+import { subscribe } from '@/lib/event';
 
 export function App() {
   const categories = useMemo(() => sounds.categories, []);
 
   const favorites = useSoundStore(useShallow(state => state.getFavorites()));
+  const pause = useSoundStore(state => state.pause);
+  const lock = useSoundStore(state => state.lock);
+  const unlock = useSoundStore(state => state.unlock);
 
   const favoriteSounds = useMemo(() => {
     const favoriteSounds = categories
@@ -53,6 +58,19 @@ export function App() {
     return () => document.removeEventListener('visibilitychange', onChange);
   }, []);
 
+  useEffect(() => {
+    const unsubscribe = subscribe(FADE_OUT, (e: { duration: number }) => {
+      lock();
+
+      setTimeout(() => {
+        pause();
+        unlock();
+      }, e.duration);
+    });
+
+    return unsubscribe;
+  }, [pause, lock, unlock]);
+
   const allCategories = useMemo(() => {
     const favorites = [];
 
@@ -71,14 +89,14 @@ export function App() {
   return (
     <SnackbarProvider>
       <StoreConsumer>
+        <MediaControls />
         <Container>
           <div id="app" />
           <Buttons />
           <Categories categories={allCategories} />
         </Container>
 
-        <ScrollToTop />
-        <Menu />
+        <Toolbar />
         <SharedModal />
       </StoreConsumer>
     </SnackbarProvider>

src/components/binary.tsx

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+import { generateRandomBinaryString } from '@/helpers/binary';
+
+export function Binary() {
+  const [binary, setBinary] = useState('');
+
+  useEffect(() => {
+    setBinary(generateRandomBinaryString(1000));
+
+    setInterval(() => {
+      setBinary(generateRandomBinaryString(1000));
+    }, 200);
+  }, []);
+
+  return <span>{binary}</span>;
+}

src/components/buttons/play/play.module.css

@@ -12,7 +12,6 @@
   background-color: var(--color-neutral-950);
   border: 1px solid var(--color-neutral-50);
   border-radius: 100px;
-  outline: none;
   transition: 0.2s;
 
   &:hover {
@@ -27,4 +26,9 @@
   & span {
     font-size: var(--font-lg);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-400);
+    outline-offset: 2px;
+  }
 }

src/components/buttons/play/play.tsx

@@ -1,7 +1,8 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { BiPause, BiPlay } from 'react-icons/bi/index';
+import { useHotkeys } from 'react-hotkeys-hook';
 
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 import { useSnackbar } from '@/contexts/snackbar';
 import { cn } from '@/helpers/styles';
 
@@ -12,35 +13,40 @@ export function PlayButton() {
   const pause = useSoundStore(state => state.pause);
   const toggle = useSoundStore(state => state.togglePlay);
   const noSelected = useSoundStore(state => state.noSelected());
+  const locked = useSoundStore(state => state.locked);
 
   const showSnackbar = useSnackbar();
 
-  const handleClick = () => {
+  const handleToggle = useCallback(() => {
+    if (locked) return;
+
     if (noSelected) return showSnackbar('Please first select a sound to play.');
 
     toggle();
-  };
+  }, [showSnackbar, toggle, noSelected, locked]);
 
   useEffect(() => {
     if (isPlaying && noSelected) pause();
   }, [isPlaying, pause, noSelected]);
 
+  useHotkeys('shift+space', handleToggle, {}, [handleToggle]);
+
   return (
     <button
       aria-disabled={noSelected}
       className={cn(styles.playButton, noSelected && styles.disabled)}
-      onClick={handleClick}
+      onClick={handleToggle}
     >
       {isPlaying ? (
         <>
-          <span>
+          <span aria-hidden="true">
             <BiPause />
           </span>{' '}
           Pause
         </>
       ) : (
         <>
-          <span>
+          <span aria-hidden="true">
             <BiPlay />
           </span>{' '}
           Play

src/components/buttons/unselect/unselect.module.css

@@ -12,7 +12,6 @@
   background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-300);
   border-radius: 100px;
-  outline: none;
   transition: 0.2s;
 
   &:disabled,
@@ -20,9 +19,15 @@
     cursor: not-allowed;
   }
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     background-color: var(--color-neutral-200);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-neutral-400);
+    outline-offset: 2px;
+  }
 }
 
 .tooltip {

src/components/buttons/unselect/unselect.tsx

@@ -1,9 +1,11 @@
+import { useCallback } from 'react';
 import { BiUndo, BiTrash } from 'react-icons/bi/index';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useHotkeys } from 'react-hotkeys-hook';
 
 import { Tooltip } from '@/components/tooltip';
 
-import { useSoundStore } from '@/store';
+import { useSoundStore } from '@/stores/sound';
 import { cn } from '@/helpers/styles';
 import { fade, mix, slideX } from '@/lib/motion';
 
@@ -14,12 +16,21 @@ export function UnselectButton() {
   const restoreHistory = useSoundStore(state => state.restoreHistory);
   const hasHistory = useSoundStore(state => !!state.history);
   const unselectAll = useSoundStore(state => state.unselectAll);
+  const locked = useSoundStore(state => state.locked);
 
   const variants = {
     ...mix(fade(), slideX(15)),
     exit: { opacity: 0 },
   };
 
+  const handleToggle = useCallback(() => {
+    if (locked) return;
+    if (hasHistory) restoreHistory();
+    else if (!noSelected) unselectAll(true);
+  }, [hasHistory, noSelected, unselectAll, restoreHistory, locked]);
+
+  useHotkeys('shift+r', handleToggle, {}, [handleToggle]);
+
   return (
     <>
       <AnimatePresence mode="wait">
@@ -31,7 +42,6 @@ export function UnselectButton() {
             variants={variants}
           >
             <Tooltip
-              hideDelay={0}
               showDelay={0}
               content={
                 hasHistory
@@ -50,10 +60,7 @@ export function UnselectButton() {
                   styles.unselectButton,
                   noSelected && !hasHistory && styles.disabled,
                 )}
-                onClick={() => {
-                  if (hasHistory) restoreHistory();
-                  else if (!noSelected) unselectAll(true);
-                }}
+                onClick={handleToggle}
               >
                 {hasHistory ? <BiUndo /> : <BiTrash />}
               </button>

src/components/categories/categories.tsx

@@ -1,6 +1,7 @@
 import { AnimatePresence } from 'framer-motion';
 
-import { Category } from '@/components/category';
+import { Category } from './category';
+import { Donate } from './donate';
 
 import type { Categories } from '@/data/types';
 
@@ -11,12 +12,12 @@ interface CategoriesProps {
 export function Categories({ categories }: CategoriesProps) {
   return (
     <AnimatePresence initial={false}>
-      {categories.map(category => (
-        <Category
-          functional={category.id !== 'favorites'}
-          {...category}
-          key={category.id}
-        />
+      {categories.map((category, index) => (
+        <div key={category.id}>
+          <Category functional={category.id !== 'favorites'} {...category} />
+
+          {index === 3 && <Donate />}
+        </div>
       ))}
     </AnimatePresence>
   );

src/components/categories/category/category.module.css

@@ -22,7 +22,10 @@
       width: 45px;
       height: 45px;
       font-size: var(--font-md);
-      background-color: var(--color-neutral-100);
+      background: linear-gradient(
+        var(--color-neutral-50),
+        var(--color-neutral-100)
+      );
       border: 1px solid var(--color-neutral-300);
       border-radius: 50%;
     }

src/components/categories/category/category.tsx

@@ -16,13 +16,15 @@ export function Category({
   title,
 }: CategoryProps) {
   return (
-    <div className={styles.category}>
+    <div className={styles.category} id={`category-${id}`}>
       <div className={styles.iconContainer}>
         <div className={styles.tail} />
-        <div className={styles.icon}>{icon}</div>
+        <div aria-hidden="true" className={styles.icon}>
+          {icon}
+        </div>
       </div>
 
-      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.title}>{title}</div>
 
       <Sounds functional={functional} id={id} sounds={sounds} />
     </div>

src/components/categories/donate/donate.module.css

@@ -0,0 +1,58 @@
+.donate {
+  margin-bottom: 20px;
+
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+    }
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background: linear-gradient(
+        var(--color-neutral-50),
+        var(--color-neutral-100)
+      );
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+    }
+  }
+
+  & .title {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+
+    & span {
+      background: linear-gradient(
+        135deg,
+        var(--color-foreground),
+        var(--color-foreground-subtle)
+      );
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  & .desc {
+    margin-top: 8px;
+    color: var(--color-foreground-subtle);
+    text-align: center;
+  }
+
+  .button {
+    margin: 16px auto 0;
+  }
+}

src/components/categories/donate/donate.tsx

@@ -0,0 +1,29 @@
+import { FaCoffee } from 'react-icons/fa/index';
+
+import { SpecialButton } from '@/components/special-button';
+
+import styles from './donate.module.css';
+
+export function Donate() {
+  return (
+    <div className={styles.donate}>
+      <div className={styles.iconContainer}>
+        <div className={styles.tail} />
+        <div aria-hidden="true" className={styles.icon}>
+          <FaCoffee />
+        </div>
+      </div>
+
+      <div className={styles.title}>
+        <span>Support Me</span>
+      </div>
+      <p className={styles.desc}>Help me keep Moodist ad-free.</p>
+      <SpecialButton
+        className={styles.button}
+        href="https://buymeacoffee.com/remvze"
+      >
+        Donate Today
+      </SpecialButton>
+    </div>
+  );
+}

src/components/categories/donate/index.ts

@@ -0,0 +1 @@
+export { Donate } from './donate';

src/components/checkbox/checkbox.module.css

@@ -0,0 +1,23 @@
+.checkboxRoot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  background: var(--color-neutral-100);
+  border: 2px solid var(--color-neutral-300);
+  border-radius: 4px;
+  transition: 0.2s;
+}
+
+.checkboxRoot[data-state='checked'] {
+  background: var(--color-neutral-950);
+  border: 2px solid var(--color-neutral-950);
+}
+
+.checkboxIndicator {
+  font-size: var(--font-2xsm);
+  color: var(--color-neutral-50);
+  transform: translateY(2px);
+}

src/components/checkbox/checkbox.tsx

@@ -0,0 +1,38 @@
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { FaCheck } from 'react-icons/fa6/index';
+
+import styles from './checkbox.module.css';
+
+type CheckboxInputProps = {
+  checked?: boolean;
+  className?: string;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+};
+
+export function Checkbox({
+  checked,
+  className,
+  defaultChecked = false,
+  disabled = false,
+  onChange,
+}: CheckboxInputProps) {
+  const handleCheckedChange = (checked: boolean) => {
+    if (onChange) onChange(checked);
+  };
+
+  return (
+    <RadixCheckbox.Root
+      checked={checked}
+      className={`${styles.checkboxRoot} ${className}`}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      onCheckedChange={handleCheckedChange}
+    >
+      <RadixCheckbox.Indicator className={styles.checkboxIndicator}>
+        <FaCheck />
+      </RadixCheckbox.Indicator>
+    </RadixCheckbox.Root>
+  );
+}

src/components/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox';

src/components/cipher.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+
+interface CipherTextProps {
+  interval?: number;
+  text: string;
+}
+
+const chars = '-_~`!@#$%^&*()+=[]{}|;:,.<>?';
+
+export function CipherText({ interval = 50, text }: CipherTextProps) {
+  const [outputText, setOutputText] = useState('');
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => setIsMounted(true), 2000);
+  }, []);
+
+  useEffect(() => {
+    if (!isMounted) return;
+
+    let timer: NodeJS.Timeout;
+
+    if (outputText !== text) {
+      timer = setInterval(() => {
+        if (outputText.length < text.length) {
+          setOutputText(prev => prev + text[prev.length]);
+        } else {
+          clearInterval(timer);
+        }
+      }, interval);
+    }
+
+    return () => clearInterval(timer);
+  }, [text, interval, outputText, isMounted]);
+
+  useEffect(() => {
+    if (outputText === text) {
+      setTimeout(() => setOutputText(''), 6000);
+    }
+  }, [outputText, text]);
+
+  const remainder =
+    outputText.length < text.length
+      ? text
+          .slice(outputText.length)
+          .split('')
+          .map(() => chars[Math.floor(Math.random() * chars.length)])
+          .join('')
+      : '';
+
+  if (!isMounted) {
+    return <span>{text}</span>;
+  }
+
+  return (
+    <span className="text-white">
+      {outputText}
+      {remainder}
+    </span>
+  );
+}

src/components/container/container.module.css

@@ -2,4 +2,12 @@
   width: 90%;
   max-width: 600px;
   margin: 0 auto;
+
+  &.tight {
+    max-width: 450px;
+  }
+
+  &.wide {
+    max-width: 760px;
+  }
 }

src/components/container/container.tsx

@@ -1,9 +1,30 @@
+import { cn } from '@/helpers/styles';
+
 import styles from './container.module.css';
 
 interface ContainerProps {
   children: React.ReactNode;
+  className?: string;
+  tight?: boolean;
+  wide?: boolean;
 }
 
-export function Container({ children }: ContainerProps) {
-  return <div className={styles.container}>{children}</div>;
+export function Container({
+  children,
+  className,
+  tight,
+  wide,
+}: ContainerProps) {
+  return (
+    <div
+      className={cn(
+        styles.container,
+        className,
+        tight && styles.tight,
+        wide && styles.wide,
+      )}
+    >
+      {children}
+    </div>
+  );
 }

src/components/donate.astro

@@ -0,0 +1,57 @@
+---
+import { Container } from './container';
+---
+
+<Container>
+  <section class="wrapper">
+    <p class="text">
+      Enjoy Moodist?{' '}
+      <a
+        href="https://buymeacoffee.com/remvze"
+        rel="noreferrer"
+        target="_blank"
+      >
+        Support with a donation!
+      </a>
+    </p>
+  </section>
+</Container>
+
+<style>
+  .wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 16px;
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 80%;
+      height: 1px;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-200),
+        transparent
+      );
+      transform: translateX(-50%);
+    }
+
+    & .text {
+      text-align: center;
+
+      & a {
+        font-weight: 500;
+        color: var(--color-foreground);
+        text-decoration: none;
+      }
+    }
+  }
+</style>

src/components/features/features.module.css

@@ -0,0 +1,99 @@
+.featuresSection {
+  margin-top: 40px;
+
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+    }
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+    }
+  }
+
+  & .title {
+    margin-bottom: 8px;
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    row-gap: 32px;
+    column-gap: 20px;
+    margin-top: 24px;
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      margin: 0 auto;
+      margin-bottom: 12px;
+      font-size: var(--font-md);
+      color: var(--color-foreground-subtle);
+      background: linear-gradient(var(--color-neutral-100), transparent);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 12px;
+    }
+
+    & .label {
+      margin-bottom: 8px;
+      font-family: var(--font-heading);
+      font-weight: 600;
+      text-align: center;
+    }
+
+    & .body {
+      width: 100%;
+      max-width: 275px;
+      margin: 0 auto;
+      line-height: 1.6;
+      color: var(--color-foreground-subtle);
+      text-align: center;
+    }
+
+    & .link {
+      display: block;
+      margin-top: 8px;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-foreground);
+      text-align: center;
+      text-decoration: none;
+    }
+
+    & .soon {
+      display: flex;
+      width: max-content;
+      padding: 6px 12px;
+      margin: 0 auto;
+      margin-top: 8px;
+      font-size: var(--font-2xsm);
+      font-weight: 500;
+      line-height: 1;
+      background: linear-gradient(var(--color-neutral-100), transparent);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 100px;
+    }
+  }
+}

src/components/features/features.tsx

@@ -0,0 +1,107 @@
+import { BiMoney, BiUserCircle, BiLogoGithub } from 'react-icons/bi/index';
+import { BsSoundwave, BsStars } from 'react-icons/bs/index';
+import { RxMixerHorizontal } from 'react-icons/rx/index';
+
+import { Balancer } from 'react-wrap-balancer';
+
+import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
+
+import styles from './features.module.css';
+
+export function Features() {
+  const count = soundCount();
+
+  const features = [
+    {
+      Icon: BiMoney,
+      body: 'Immerse yourself in sound without spending a dime.',
+      id: 'free-access',
+      label: 'Free Access',
+    },
+    {
+      Icon: BiUserCircle,
+      body: 'Dive right in, no sign-up hoops to jump through.',
+      id: 'no-registration',
+      label: 'No Registration',
+    },
+    {
+      Icon: BsSoundwave,
+      body: `Explore ${count} unique soundscapes, from rainforests to cityscapes.`,
+      id: 'diverse-sounds',
+      label: 'Diverse Sounds',
+    },
+    {
+      Icon: RxMixerHorizontal,
+      body: 'Craft your perfect soundscape by blending and adjusting sounds.',
+      id: 'customizable-mixes',
+      label: 'Customizable Mixes',
+    },
+    {
+      Icon: BiLogoGithub,
+      body: 'Contribute and collaborate, making the best even better.',
+      id: 'open-source',
+      label: 'Open-Source',
+      link: {
+        label: 'Source Code',
+        url: 'https://github.com/remvze/moodist',
+      },
+    },
+    {
+      Icon: BsStars,
+      body: 'Uninterrupted immersion, focus on the sounds, not the tech.',
+      id: 'seamless-experience',
+      label: 'Seamless Experience',
+    },
+    {
+      Icon: BsStars,
+      body: 'Spread the calm, easily share your customized sound blends.',
+      id: 'share-selections',
+      label: 'Share Selections',
+    },
+    {
+      Icon: BsStars,
+      body: 'Lock in your favorite mixes for instant return to your sonic haven.',
+      id: 'save-presets',
+      label: 'Save Presets',
+      soon: true,
+    },
+  ];
+
+  return (
+    <section className={styles.featuresSection}>
+      <Container>
+        <div className={styles.iconContainer}>
+          <div className={styles.tail} />
+          <div className={styles.icon}>
+            <BsStars />
+          </div>
+        </div>
+
+        <h2 className={styles.title}>Features</h2>
+
+        <div className={styles.features}>
+          {features.map(feature => (
+            <div className={styles.reason} key={feature.id}>
+              <div className={styles.icon}>
+                <feature.Icon />
+              </div>
+              <h3 className={styles.label}>{feature.label}</h3>
+              <p className={styles.body}>
+                <Balancer>{feature.body}</Balancer>
+              </p>
+
+              {feature.link && (
+                <a className={styles.link} href={feature.link.url}>
+                  {feature.link.label}
+                </a>
+              )}
+
+              {feature.soon && <div className={styles.soon}>Coming Soon</div>}
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}

src/components/features/index.ts

@@ -0,0 +1 @@
+export { Features } from './features';

src/components/footer.astro

@@ -1,14 +1,11 @@
 ---
-import { Container } from '@/components/container';
+import { Container } from './container';
 ---
 
 <footer class="footer">
   <Container>
     <p>
-      Created by{' '}
-      <a href="https://twitter.com/remvze">
-        Maze <span>✦</span>
-      </a>
+      Created by <a href="https://twitter.com/remvze">Maze ✦</a>
     </p>
   </Container>
 </footer>
@@ -28,10 +25,6 @@ import { Container } from '@/components/container';
         font-weight: 500;
         color: var(--color-foreground);
         text-decoration: none;
-
-        & span {
-          color: #c0eb75;
-        }
       }
     }
   }

src/components/hero.astro

@@ -1,8 +1,9 @@
 ---
-import { Balancer } from 'react-wrap-balancer';
 import { BsSoundwave } from 'react-icons/bs/index';
 
-import { Container } from '@/components/container';
+import { Container } from './container';
+import { CipherText } from './cipher';
+
 import { count as soundCount } from '@/lib/sounds';
 
 const count = soundCount();
@@ -10,77 +11,107 @@ const count = soundCount();
 
 <div class="hero">
   <Container>
-    <img
-      alt="Faded Moodist Logo"
-      class="logo"
-      height={45}
-      src="/logo.svg"
-      width={45}
-    />
+    <div class="wrapper">
+      <div class="pattern"></div>
+      <div class="logo-wrapper">
+        <img
+          alt="Faded Moodist Logo"
+          aria-hidden="true"
+          class="logo"
+          height={48}
+          src="/logo.svg"
+          width={48}
+        />
+      </div>
 
-    <div class="title">
-      <div class="left"></div>
-      <h1>Moodist</h1>
-      <div class="right"></div>
+      <h1 class="title">
+        Ambient Sounds<span class="line">For Focus and Calm</span>
+      </h1>
+      <h2 class="desc">
+        Free and <CipherText client:load text="Open-Source" />.
+      </h2>
+
+      <p class="sounds">
+        <span aria-hidden="true" class="icon">
+          <BsSoundwave />
+        </span>
+        <span>{count} Sounds</span>
+      </p>
     </div>
-
-    <p class="desc">
-      <Balancer>Ambient sounds for focus and calm.</Balancer>
-    </p>
-
-    <p class="sounds">
-      <span class="icon"><BsSoundwave /></span>
-      <span>{count} Sounds</span>
-    </p>
   </Container>
 </div>
 
 <style>
   .hero {
-    padding: 140px 0 60px;
     text-align: center;
 
-    & .logo {
-      display: block;
-      width: 45px;
-      margin: 0 auto 12px;
+    .wrapper {
+      position: relative;
+      padding: 120px 0 80px;
+
+      & .pattern {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background-image: radial-gradient(
+          var(--color-neutral-500) 5%,
+          transparent 5%
+        );
+        background-position: top center;
+        background-size: 21px 21px;
+        opacity: 0.8;
+        mask-image: linear-gradient(#fff, transparent, transparent);
+      }
+    }
+
+    & .logo-wrapper {
+      mask-image: linear-gradient(#000, rgb(0 0 0 / 40%), rgb(0 0 0 / 5%));
+
+      & .logo {
+        display: block;
+        width: 48px;
+        margin: 0 auto 20px;
+        opacity: 1;
+        animation-name: logo;
+        animation-duration: 60s;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+      }
     }
 
     & .title {
-      display: flex;
-      column-gap: 15px;
-      align-items: center;
+      font-family: var(--font-display);
+      font-size: var(--font-xlg);
+      font-weight: 600;
+      line-height: 1;
 
-      & div {
-        flex-grow: 1;
-        height: 1px;
+      /* & .gradient {
+        background: linear-gradient(
+          135deg,
+          var(--color-foreground),
+          var(--color-foreground-subtle)
+        );
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      } */
 
-        &.left {
-          background: linear-gradient(
-            90deg,
-            transparent,
-            var(--color-neutral-300)
-          );
-        }
-
-        &.right {
-          background: linear-gradient(
-            90deg,
-            var(--color-neutral-300),
-            transparent
-          );
-        }
-      }
-
-      & h1 {
-        font-family: var(--font-display);
-        font-size: var(--font-2xlg);
-        font-weight: 600;
+      & .line {
+        display: block;
+        margin-top: 2px;
+        background: linear-gradient(
+          var(--color-foreground-subtler),
+          var(--color-foreground-subtle)
+        );
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
       }
     }
 
     & .desc {
-      margin-top: 5px;
+      margin-top: 12px;
       line-height: 1.6;
       color: var(--color-foreground-subtle);
     }
@@ -97,7 +128,7 @@ const count = soundCount();
       margin: 20px auto 0;
       font-size: var(--font-xsm);
       color: var(--color-foreground-subtle);
-      background-color: var(--color-neutral-100);
+      background: linear-gradient(var(--color-neutral-100), transparent);
       border: 1px solid var(--color-neutral-200);
       border-radius: 100px;
 
@@ -106,9 +137,10 @@ const count = soundCount();
         align-items: center;
         justify-content: center;
         height: 100%;
-        padding: 0 8px 0 12px;
+        padding: 0 10px;
         color: var(--color-foreground);
         border-right: 1px solid var(--color-neutral-200);
+        border-radius: 0 100px 100px 0;
       }
 
       &::before {
@@ -128,4 +160,14 @@ const count = soundCount();
       }
     }
   }
+
+  @keyframes logo {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 </style>

src/components/media-controls/index.ts

@@ -0,0 +1 @@
+export { MediaControls } from './media-controls';

src/components/media-controls/media-controls.tsx

@@ -0,0 +1,20 @@
+import { MediaSessionTrack } from './media-session-track';
+import { useEffect, useState } from 'react';
+import { useSSR } from '@/hooks/use-ssr';
+
+export function MediaControls() {
+  const [mediaControlsEnabled, setMediaControlsEnabled] = useState(false);
+  const { isBrowser } = useSSR();
+
+  useEffect(() => {
+    if (!isBrowser) return;
+
+    setMediaControlsEnabled('mediaSession' in navigator);
+  }, [isBrowser]);
+
+  if (!mediaControlsEnabled) {
+    return null;
+  }
+
+  return <MediaSessionTrack />;
+}

src/components/media-controls/media-session-track.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { getSilenceDataURL } from '@/helpers/sound';
+import { BrowserDetect } from '@/helpers/browser-detect';
+
+import { useSoundStore } from '@/stores/sound';
+
+import { useSSR } from '@/hooks/use-ssr';
+import { useDarkTheme } from '@/hooks/use-dark-theme';
+
+const metadata: MediaMetadataInit = {
+  artist: 'Moodist',
+  title: 'Ambient Sounds for Focus and Calm',
+};
+
+export function MediaSessionTrack() {
+  const { isBrowser } = useSSR();
+  const isDarkTheme = useDarkTheme();
+  const [isGenerated, setIsGenerated] = useState(false);
+  const isPlaying = useSoundStore(state => state.isPlaying);
+  const play = useSoundStore(state => state.play);
+  const pause = useSoundStore(state => state.pause);
+  const masterAudioSoundRef = useRef<HTMLAudioElement>(null);
+  const artworkURL = isDarkTheme ? '/logo-dark.png' : '/logo-light.png';
+
+  const generateSilence = useCallback(async () => {
+    if (!masterAudioSoundRef.current) return;
+    masterAudioSoundRef.current.src = await getSilenceDataURL();
+    setIsGenerated(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isBrowser || !isPlaying || !isGenerated) return;
+
+    navigator.mediaSession.metadata = new MediaMetadata({
+      ...metadata,
+      artwork: [
+        {
+          sizes: '200x200',
+          src: artworkURL,
+          type: 'image/png',
+        },
+      ],
+    });
+  }, [artworkURL, isBrowser, isDarkTheme, isGenerated, isPlaying]);
+
+  useEffect(() => {
+    generateSilence();
+  }, [generateSilence]);
+
+  const startMasterAudio = useCallback(async () => {
+    if (!masterAudioSoundRef.current) return;
+    if (!masterAudioSoundRef.current.paused) return;
+
+    try {
+      await masterAudioSoundRef.current.play();
+
+      navigator.mediaSession.playbackState = 'playing';
+      navigator.mediaSession.setActionHandler('play', play);
+      navigator.mediaSession.setActionHandler('pause', pause);
+    } catch {
+      // Do nothing
+    }
+  }, [pause, play]);
+
+  const stopMasterAudio = useCallback(() => {
+    if (!masterAudioSoundRef.current) return;
+    /**
+     * Otherwise in Safari we cannot play the audio again
+     * through the media session controls
+     */
+    if (BrowserDetect.isSafari()) {
+      masterAudioSoundRef.current.load();
+    } else {
+      masterAudioSoundRef.current.pause();
+    }
+    navigator.mediaSession.playbackState = 'paused';
+  }, []);
+
+  useEffect(() => {
+    if (!isGenerated) return;
+    if (!masterAudioSoundRef.current) return;
+
+    if (isPlaying) {
+      startMasterAudio();
+    } else {
+      stopMasterAudio();
+    }
+  }, [isGenerated, isPlaying, startMasterAudio, stopMasterAudio]);
+
+  useEffect(() => {
+    const masterAudioSound = masterAudioSoundRef.current;
+
+    return () => {
+      masterAudioSound?.pause();
+
+      navigator.mediaSession.setActionHandler('play', null);
+      navigator.mediaSession.setActionHandler('pause', null);
+      navigator.mediaSession.playbackState = 'none';
+    };
+  }, []);
+
+  return <audio id="media-session-track" loop ref={masterAudioSoundRef} />;
+}

src/components/menu/item/item.module.css

@@ -1,33 +0,0 @@
-.item {
-  display: flex;
-  column-gap: 8px;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  padding: 16px 12px;
-  font-size: var(--font-sm);
-  font-weight: 500;
-  line-height: 1;
-  color: var(--color-foreground-subtle);
-  text-align: left;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 4px;
-  outline: none;
-  transition: 0.2s;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-
-  &:not(:disabled):hover {
-    color: var(--color-foreground);
-    background-color: var(--color-neutral-200);
-  }
-
-  & .icon {
-    color: var(--color-foreground);
-  }
-}

src/components/menu/item/item.tsx

@@ -1,16 +0,0 @@
-import styles from './item.module.css';
-
-interface ItemProps {
-  disabled: boolean;
-  icon: React.ReactElement;
-  label: string;
-  onClick: () => void;
-}
-
-export function Item({ disabled = false, icon, label, onClick }: ItemProps) {
-  return (
-    <button className={styles.item} disabled={disabled} onClick={onClick}>
-      <span className={styles.icon}>{icon}</span> {label}
-    </button>
-  );
-}

src/components/menu/items/index.ts

@@ -1,2 +0,0 @@
-export { Shuffle as ShuffleItem } from './shuffle';
-export { Share as ShareItem } from './share';

src/components/menu/items/shuffle.tsx

@@ -1,11 +0,0 @@
-import { BiShuffle } from 'react-icons/bi/index';
-
-import { useSoundStore } from '@/store';
-
-import { Item } from '../item';
-
-export function Shuffle() {
-  const shuffle = useSoundStore(state => state.shuffle);
-
-  return <Item icon={<BiShuffle />} label="Shuffle Sounds" onClick={shuffle} />;
-}

src/components/menu/menu.module.css

@@ -1,57 +0,0 @@
-.wrapper {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  z-index: 5;
-
-  & .menuButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 45px;
-    height: 45px;
-    font-size: var(--font-md);
-    color: var(--color-foreground);
-    cursor: pointer;
-    background-color: var(--color-neutral-100);
-    border: 1px solid var(--color-neutral-300);
-    border-radius: 50%;
-    transition: 0.2s;
-
-    &:hover {
-      background-color: var(--color-neutral-200);
-    }
-  }
-
-  & .menu {
-    display: flex;
-    flex-direction: column;
-    row-gap: 4px;
-    width: 240px;
-    padding: 4px;
-    background-color: var(--color-neutral-100);
-    border: 1px solid var(--color-neutral-300);
-    border-radius: 4px;
-
-    & .menuItem {
-      position: flex;
-      align-items: center;
-      width: 100%;
-      padding: 12px 8px;
-      font-size: var(--font-sm);
-      font-weight: 500;
-      color: var(--color-foreground-subtle);
-      cursor: pointer;
-      background-color: transparent;
-      border: 1px solid var(--color-neutral-200);
-      border-radius: 4px;
-      outline: none;
-      transition: 0.2s;
-
-      &:hover {
-        color: var(--color-foreground);
-        background-color: var(--color-neutral-200);
-      }
-    }
-  }
-}

src/components/menu/menu.tsx

@@ -1,92 +0,0 @@
-import { useState } from 'react';
-import { IoMenu, IoClose } from 'react-icons/io5/index';
-import { AnimatePresence, motion } from 'framer-motion';
-import {
-  useFloating,
-  autoUpdate,
-  offset,
-  flip,
-  shift,
-  useClick,
-  useDismiss,
-  useRole,
-  useInteractions,
-  FloatingFocusManager,
-} from '@floating-ui/react';
-
-import { ShuffleItem, ShareItem } from './items';
-import { ShareLinkModal } from '@/components/modals/share-link';
-
-import { slideY, fade, mix } from '@/lib/motion';
-
-import styles from './menu.module.css';
-
-export function Menu() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const [showShareLink, setShowShareLink] = useState(false);
-
-  const variants = mix(slideY(-20), fade());
-
-  const { context, floatingStyles, refs } = useFloating({
-    middleware: [offset(12), flip(), shift()],
-    onOpenChange: setIsOpen,
-    open: isOpen,
-    placement: 'top-end',
-    whileElementsMounted: autoUpdate,
-  });
-
-  const click = useClick(context);
-  const dismiss = useDismiss(context);
-  const role = useRole(context);
-
-  const { getFloatingProps, getReferenceProps } = useInteractions([
-    click,
-    dismiss,
-    role,
-  ]);
-
-  return (
-    <>
-      <div className={styles.wrapper}>
-        <button
-          aria-label="Menu"
-          className={styles.menuButton}
-          ref={refs.setReference}
-          onClick={() => setIsOpen(prev => !prev)}
-          {...getReferenceProps()}
-        >
-          {isOpen ? <IoClose /> : <IoMenu />}
-        </button>
-
-        <AnimatePresence>
-          {isOpen && (
-            <FloatingFocusManager context={context} modal={false}>
-              <div
-                ref={refs.setFloating}
-                style={floatingStyles}
-                {...getFloatingProps()}
-              >
-                <motion.div
-                  animate="show"
-                  className={styles.menu}
-                  exit="hidden"
-                  initial="hidden"
-                  variants={variants}
-                >
-                  <ShareItem open={() => setShowShareLink(true)} />
-                  <ShuffleItem />
-                </motion.div>
-              </div>
-            </FloatingFocusManager>
-          )}
-        </AnimatePresence>
-      </div>
-
-      <ShareLinkModal
-        show={showShareLink}
-        onClose={() => setShowShareLink(false)}
-      />
-    </>
-  );
-}

src/components/modal/modal.module.css

@@ -1,7 +1,7 @@
 .overlay {
   position: fixed;
   inset: 0;
-  z-index: 10;
+  z-index: 20;
   background-color: rgb(9 9 11 / 40%);
   backdrop-filter: blur(5px);
 }
@@ -10,7 +10,7 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  z-index: 12;
+  z-index: 20;
   width: 100%;
   max-height: 100%;
   padding: 50px 0;
@@ -29,6 +29,13 @@
     background-color: var(--color-neutral-100);
     border-radius: 8px;
 
+    &.wide {
+      width: 95%;
+      max-width: 600px;
+      padding: 12px;
+      padding-top: 40px;
+    }
+
     & .close {
       position: absolute;
       top: 10px;
@@ -43,7 +50,13 @@
       cursor: pointer;
       background-color: transparent;
       border: none;
+      border-radius: 4px;
       outline: none;
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
     }
   }
 }

src/components/modal/modal.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Modal } from './modal';
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+  title: 'Modal',
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Hello World',
+    show: true,
+  },
+};
+
+export const Wide: Story = {
+  args: {
+    ...Default.args,
+    wide: true,
+  },
+};

src/components/modal/modal.tsx

@@ -1,52 +1,107 @@
+import { useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { IoClose } from 'react-icons/io5/index';
+import FocusTrap from 'focus-trap-react';
+
+import { Portal } from '@/components/portal';
 
 import { fade, mix, slideY } from '@/lib/motion';
+import { cn } from '@/helpers/styles';
 
 import styles from './modal.module.css';
 
 interface ModalProps {
   children: React.ReactNode;
+  lockBody?: boolean;
   onClose: () => void;
+  persist?: boolean;
   show: boolean;
+  wide?: boolean;
 }
 
-export function Modal({ children, onClose, show }: ModalProps) {
+const TRANSITION_DURATION = 300;
+
+export function Modal({
+  children,
+  lockBody = true,
+  onClose,
+  persist = false,
+  show,
+  wide,
+}: ModalProps) {
   const variants = {
     modal: mix(fade(), slideY(20)),
     overlay: fade(),
   };
 
-  return (
-    <AnimatePresence>
-      {show && (
-        <>
-          <motion.div
-            animate="show"
-            className={styles.overlay}
-            exit="hidden"
-            initial="hidden"
-            variants={variants.overlay}
-            onClick={onClose}
-            onKeyDown={onClose}
-          />
-          <div className={styles.modal}>
-            <motion.div
-              animate="show"
-              className={styles.content}
-              exit="hidden"
-              initial="hidden"
-              variants={variants.modal}
-            >
-              <button className={styles.close} onClick={onClose}>
-                <IoClose />
-              </button>
+  useEffect(() => {
+    if (show && lockBody) {
+      document.body.style.overflowY = 'hidden';
+    } else if (lockBody) {
+      // Wait for transition to finish before allowing scrollbar to return
+      setTimeout(() => {
+        document.body.style.overflowY = 'auto';
+      }, TRANSITION_DURATION);
+    }
+  }, [show, lockBody]);
 
-              {children}
-            </motion.div>
-          </div>
-        </>
+  useEffect(() => {
+    function keyListener(e: KeyboardEvent) {
+      if (show && e.key === 'Escape') {
+        onClose();
+      }
+    }
+
+    document.addEventListener('keydown', keyListener);
+
+    return () => document.removeEventListener('keydown', keyListener);
+  }, [onClose, show]);
+
+  const animationProps = persist
+    ? {
+        animate: show ? 'show' : 'hidden',
+      }
+    : {
+        animate: 'show',
+        exit: 'hidden',
+        initial: 'hidden',
+      };
+
+  const content = (
+    <FocusTrap active={show}>
+      <div>
+        <motion.div
+          {...animationProps}
+          className={styles.overlay}
+          transition={{ duration: TRANSITION_DURATION / 1000 }}
+          variants={variants.overlay}
+          onClick={onClose}
+          onKeyDown={onClose}
+        />
+        <div className={styles.modal}>
+          <motion.div
+            {...animationProps}
+            className={cn(styles.content, wide && styles.wide)}
+            transition={{ duration: TRANSITION_DURATION / 1000 }}
+            variants={variants.modal}
+          >
+            <button className={styles.close} onClick={onClose}>
+              <IoClose />
+            </button>
+            {children}
+          </motion.div>
+        </div>
+      </div>
+    </FocusTrap>
+  );
+
+  return (
+    <Portal>
+      {persist ? (
+        <div style={{ display: show ? 'block' : 'none' }}>{content}</div>
+      ) : (
+        <AnimatePresence>{show && content}</AnimatePresence>
       )}
-    </AnimatePresence>
+    </Portal>
   );
 }

src/components/modals/binaural/binaural.module.css

@@ -0,0 +1,76 @@
+.header {
+  margin-bottom: 16px;
+
+  & .title {
+    margin-bottom: 4px;
+    font-family: var(--font-heading);
+    font-size: var(--font-md);
+    font-weight: 600;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+  }
+}
+
+.fieldWrapper {
+  margin-bottom: 12px;
+
+  & label {
+    display: block;
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+
+    & input,
+    select {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      height: 45px;
+      padding: 0 8px;
+      margin-top: 4px;
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-50);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 8px;
+      outline: none;
+    }
+
+    & .volume {
+      margin-top: 4px;
+    }
+  }
+}
+
+.buttons {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  margin-top: 12px;
+
+  & button {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    font-weight: 500;
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: var(--color-neutral-200);
+    border: none;
+    border-radius: 8px;
+    outline: none;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+
+    &.primary {
+      color: var(--color-neutral-50);
+      background-color: var(--color-neutral-950);
+    }
+  }
+}

src/components/modals/binaural/binaural.tsx

@@ -0,0 +1,223 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+
+import { Modal } from '@/components/modal';
+import { Slider } from '@/components/slider';
+
+import styles from './binaural.module.css';
+
+interface BinauralProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+interface Preset {
+  baseFrequency: number;
+  beatFrequency: number;
+  name: string;
+}
+
+const presets: Preset[] = [
+  { baseFrequency: 100, beatFrequency: 2, name: 'Delta (Deep Sleep) 2 Hz' },
+  { baseFrequency: 100, beatFrequency: 5, name: 'Theta (Meditation) 5 Hz' },
+  { baseFrequency: 100, beatFrequency: 10, name: 'Alpha (Relaxation) 10 Hz' },
+  { baseFrequency: 100, beatFrequency: 20, name: 'Beta (Focus) 20 Hz' },
+  { baseFrequency: 100, beatFrequency: 40, name: 'Gamma (Cognition) 40 Hz' },
+  { baseFrequency: 440, beatFrequency: 10, name: 'Custom' },
+];
+
+export function BinauralModal({ onClose, show }: BinauralProps) {
+  const [baseFrequency, setBaseFrequency] = useState<number>(440); // Default to A4 note
+  const [beatFrequency, setBeatFrequency] = useState<number>(10); // Default to 10 Hz difference
+  const [volume, setVolume] = useState<number>(0.5); // Default volume at 50%
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [selectedPreset, setSelectedPreset] = useState<string>('Custom');
+
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const leftOscillatorRef = useRef<OscillatorNode | null>(null);
+  const rightOscillatorRef = useRef<OscillatorNode | null>(null);
+  const gainNodeRef = useRef<GainNode | null>(null);
+
+  const startSound = () => {
+    if (isPlaying) return;
+
+    // Initialize the AudioContext
+    audioContextRef.current = new window.AudioContext();
+    const audioContext = audioContextRef.current;
+
+    if (!audioContext) return;
+
+    // Create a gain node for volume control
+    gainNodeRef.current = audioContext.createGain();
+    gainNodeRef.current.gain.value = volume; // Set volume based on state
+
+    // Create oscillators for left and right channels
+    leftOscillatorRef.current = audioContext.createOscillator();
+    rightOscillatorRef.current = audioContext.createOscillator();
+
+    if (
+      !leftOscillatorRef.current ||
+      !rightOscillatorRef.current ||
+      !gainNodeRef.current
+    )
+      return;
+
+    leftOscillatorRef.current.frequency.value =
+      baseFrequency - beatFrequency / 2;
+    rightOscillatorRef.current.frequency.value =
+      baseFrequency + beatFrequency / 2;
+
+    // Pan oscillators to left and right
+    const leftPanner = audioContext.createStereoPanner();
+    leftPanner.pan.value = -1;
+
+    const rightPanner = audioContext.createStereoPanner();
+    rightPanner.pan.value = 1;
+
+    // Connect nodes
+    leftOscillatorRef.current.connect(leftPanner).connect(gainNodeRef.current);
+    rightOscillatorRef.current
+      .connect(rightPanner)
+      .connect(gainNodeRef.current);
+    gainNodeRef.current.connect(audioContext.destination);
+
+    // Start oscillators
+    leftOscillatorRef.current.start();
+    rightOscillatorRef.current.start();
+
+    setIsPlaying(true);
+  };
+
+  const stopSound = useCallback(() => {
+    if (!isPlaying) return;
+
+    leftOscillatorRef.current?.stop();
+    rightOscillatorRef.current?.stop();
+    audioContextRef.current?.close();
+
+    setIsPlaying(false);
+  }, [isPlaying]);
+
+  useEffect(() => {
+    // Update gain node when volume changes
+    if (gainNodeRef.current) {
+      gainNodeRef.current.gain.value = volume;
+    }
+  }, [volume]);
+
+  useEffect(() => {
+    // Cleanup when component unmounts
+    return () => {
+      if (isPlaying) {
+        stopSound();
+      }
+    };
+  }, [isPlaying, stopSound]);
+
+  useEffect(() => {
+    // Update frequencies when a preset is selected
+    if (selectedPreset !== 'Custom') {
+      const preset = presets.find(p => p.name === selectedPreset);
+      if (preset) {
+        setBaseFrequency(preset.baseFrequency);
+        setBeatFrequency(preset.beatFrequency);
+      }
+    }
+  }, [selectedPreset]);
+
+  const handlePresetChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = e.target.value;
+    setSelectedPreset(selected);
+
+    if (selected === 'Custom') {
+      // Allow user to input custom frequencies
+      return;
+    }
+
+    const preset = presets.find(p => p.name === selected);
+    if (preset) {
+      setBaseFrequency(preset.baseFrequency);
+      setBeatFrequency(preset.beatFrequency);
+    }
+  };
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Binaural Beat</h2>
+        <p className={styles.desc}>Binaural beat generator.</p>
+      </header>
+
+      <div className={styles.fieldWrapper}>
+        <label>
+          Presets:
+          <select value={selectedPreset} onChange={handlePresetChange}>
+            {presets.map(preset => (
+              <option key={preset.name} value={preset.name}>
+                {preset.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      {selectedPreset === 'Custom' && (
+        <>
+          <div className={styles.fieldWrapper}>
+            <label>
+              Base Frequency (Hz):
+              <input
+                max="1500"
+                min="20"
+                step="0.1"
+                type="number"
+                value={baseFrequency}
+                onChange={e =>
+                  setBaseFrequency(parseFloat(e.target.value || '0'))
+                }
+              />
+            </label>
+          </div>
+          <div className={styles.fieldWrapper}>
+            <label>
+              Beat Frequency (Hz):
+              <input
+                max="40"
+                min="0.1"
+                step="0.1"
+                type="number"
+                value={beatFrequency}
+                onChange={e =>
+                  setBeatFrequency(parseFloat(e.target.value || '0'))
+                }
+              />
+            </label>
+          </div>
+        </>
+      )}
+      <div className={styles.fieldWrapper}>
+        <label>
+          Volume:
+          <Slider
+            className={styles.volume}
+            max={1}
+            min={0}
+            step={0.01}
+            value={volume}
+            onChange={value => setVolume(value)}
+          />
+        </label>
+      </div>
+      <div className={styles.buttons}>
+        <button
+          className={styles.primary}
+          disabled={isPlaying}
+          onClick={startSound}
+        >
+          Start
+        </button>
+        <button disabled={!isPlaying} onClick={stopSound}>
+          Stop
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/modals/binaural/index.ts

@@ -0,0 +1 @@
+export { BinauralModal } from './binaural';

src/components/modals/breathing/breathing.module.css

@@ -0,0 +1 @@
+/* WIP */

src/components/modals/breathing/breathing.tsx

@@ -0,0 +1,18 @@
+import { Modal } from '@/components/modal';
+import { Exercise } from './exercise';
+
+import styles from './breathing.module.css';
+
+interface TimerProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function BreathingExerciseModal({ onClose, show }: TimerProps) {
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h2 className={styles.title}>Breathing Exercise</h2>
+      <Exercise />
+    </Modal>
+  );
+}

src/components/modals/breathing/exercise/exercise.module.css

@@ -0,0 +1,91 @@
+.exercise {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 75px 0;
+  margin-top: 12px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  & .timer {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    padding: 4px 12px;
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+    background: linear-gradient(
+      var(--color-neutral-100),
+      var(--color-neutral-50)
+    );
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 4px;
+  }
+
+  & .phase {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+  }
+
+  & .circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: -1;
+    height: 55%;
+    aspect-ratio: 1 / 1;
+    background-image: radial-gradient(
+      var(--color-neutral-50),
+      var(--color-neutral-100)
+    );
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.selectWrapper {
+  position: relative;
+  width: 100%;
+  height: 45px;
+  padding: 0 12px;
+  margin-top: 8px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 8px;
+
+  &::before {
+    position: absolute;
+    top: -1px;
+    left: 50%;
+    width: 80%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-300),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+
+  & .selectBox {
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    font-size: var(--font-sm);
+    color: var(--color-foreground);
+    background-color: transparent;
+    border: none;
+    outline: none;
+
+    & option {
+      color: var(--color-neutral-50);
+    }
+  }
+}

src/components/modals/breathing/exercise/exercise.tsx

@@ -0,0 +1,126 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { motion } from 'framer-motion';
+
+import { padNumber } from '@/helpers/number';
+
+import styles from './exercise.module.css';
+
+type Exercise = 'Box Breathing' | 'Resonant Breathing' | '4-7-8 Breathing';
+type Phase = 'inhale' | 'exhale' | 'holdInhale' | 'holdExhale';
+
+const EXERCISE_PHASES: Record<Exercise, Phase[]> = {
+  '4-7-8 Breathing': ['inhale', 'holdInhale', 'exhale'],
+  'Box Breathing': ['inhale', 'holdInhale', 'exhale', 'holdExhale'],
+  'Resonant Breathing': ['inhale', 'exhale'],
+};
+
+const EXERCISE_DURATIONS: Record<Exercise, Partial<Record<Phase, number>>> = {
+  '4-7-8 Breathing': { exhale: 8, holdInhale: 7, inhale: 4 },
+  'Box Breathing': { exhale: 4, holdExhale: 4, holdInhale: 4, inhale: 4 },
+  'Resonant Breathing': { exhale: 5, inhale: 5 }, // No holdExhale
+};
+
+const PHASE_LABELS: Record<Phase, string> = {
+  exhale: 'Exhale',
+  holdExhale: 'Hold',
+  holdInhale: 'Hold',
+  inhale: 'Inhale',
+};
+
+export function Exercise() {
+  const [selectedExercise, setSelectedExercise] =
+    useState<Exercise>('4-7-8 Breathing');
+  const [phaseIndex, setPhaseIndex] = useState(0);
+
+  const phases = useMemo(
+    () => EXERCISE_PHASES[selectedExercise],
+    [selectedExercise],
+  );
+  const durations = useMemo(
+    () => EXERCISE_DURATIONS[selectedExercise],
+    [selectedExercise],
+  );
+
+  const currentPhase = phases[phaseIndex];
+
+  const animationVariants = useMemo(
+    () => ({
+      exhale: {
+        transform: 'translate(-50%, -50%) scale(1)',
+        transition: { duration: durations.exhale },
+      },
+      holdExhale: {
+        transform: 'translate(-50%, -50%) scale(1)',
+        transition: { duration: durations.holdExhale },
+      },
+      holdInhale: {
+        transform: 'translate(-50%, -50%) scale(1.5)',
+        transition: { duration: durations.holdInhale },
+      },
+      inhale: {
+        transform: 'translate(-50%, -50%) scale(1.5)',
+        transition: { duration: durations.inhale },
+      },
+    }),
+    [durations],
+  );
+
+  const resetExercise = useCallback(() => {
+    setPhaseIndex(0);
+  }, []);
+
+  const updatePhase = useCallback(() => {
+    setPhaseIndex(prevIndex => (prevIndex + 1) % phases.length);
+  }, [phases.length]);
+
+  useEffect(() => {
+    resetExercise();
+  }, [selectedExercise, resetExercise]);
+
+  useEffect(() => {
+    const intervalDuration = (durations[currentPhase] || 4) * 1000;
+    const interval = setInterval(updatePhase, intervalDuration);
+
+    return () => clearInterval(interval);
+  }, [currentPhase, durations, updatePhase]);
+
+  const [timer, setTimer] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => setTimer(prev => prev + 1), 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <>
+      <div className={styles.exercise}>
+        <div className={styles.timer}>
+          {padNumber(Math.floor(timer / 60))}:{padNumber(timer % 60)}
+        </div>
+
+        <motion.div
+          animate={currentPhase}
+          className={styles.circle}
+          key={selectedExercise}
+          variants={animationVariants}
+        />
+        <p className={styles.phase}>{PHASE_LABELS[currentPhase]}</p>
+      </div>
+
+      <div className={styles.selectWrapper}>
+        <select
+          className={styles.selectBox}
+          value={selectedExercise}
+          onChange={e => setSelectedExercise(e.target.value as Exercise)}
+        >
+          {Object.keys(EXERCISE_PHASES).map(exercise => (
+            <option key={exercise} value={exercise}>
+              {exercise}
+            </option>
+          ))}
+        </select>
+      </div>
+    </>
+  );
+}

src/components/modals/breathing/exercise/index.ts

@@ -0,0 +1 @@
+export { Exercise } from './exercise';

src/components/modals/breathing/index.ts

@@ -0,0 +1 @@
+export { BreathingExerciseModal } from './breathing';

src/components/modals/isochronic/index.ts

@@ -0,0 +1 @@
+export { IsochronicModal } from './isochronic';

src/components/modals/isochronic/isochornic.module.css

@@ -0,0 +1,76 @@
+.header {
+  margin-bottom: 16px;
+
+  & .title {
+    margin-bottom: 4px;
+    font-family: var(--font-heading);
+    font-size: var(--font-md);
+    font-weight: 600;
+  }
+
+  & .desc {
+    color: var(--color-foreground-subtle);
+  }
+}
+
+.fieldWrapper {
+  margin-bottom: 12px;
+
+  & label {
+    display: block;
+    font-size: var(--font-sm);
+    font-weight: 500;
+    color: var(--color-foreground);
+
+    & input,
+    select {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      height: 45px;
+      padding: 0 8px;
+      margin-top: 4px;
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-50);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 8px;
+      outline: none;
+    }
+
+    & .volume {
+      margin-top: 4px;
+    }
+  }
+}
+
+.buttons {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  margin-top: 12px;
+
+  & button {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    font-weight: 500;
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: var(--color-neutral-200);
+    border: none;
+    border-radius: 8px;
+    outline: none;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+
+    &.primary {
+      color: var(--color-neutral-50);
+      background-color: var(--color-neutral-950);
+    }
+  }
+}

src/components/modals/isochronic/isochronic.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+
+import { Modal } from '@/components/modal';
+import { Slider } from '@/components/slider';
+
+import styles from './isochornic.module.css';
+
+interface IsochronicProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+interface Preset {
+  baseFrequency: number;
+  beatFrequency: number;
+  name: string;
+}
+
+const presets: Preset[] = [
+  { baseFrequency: 100, beatFrequency: 2, name: 'Delta (Deep Sleep) 2 Hz' },
+  { baseFrequency: 100, beatFrequency: 5, name: 'Theta (Meditation) 5 Hz' },
+  { baseFrequency: 100, beatFrequency: 10, name: 'Alpha (Relaxation) 10 Hz' },
+  { baseFrequency: 100, beatFrequency: 20, name: 'Beta (Focus) 20 Hz' },
+  { baseFrequency: 100, beatFrequency: 40, name: 'Gamma (Cognition) 40 Hz' },
+  { baseFrequency: 440, beatFrequency: 10, name: 'Custom' },
+];
+
+export function IsochronicModal({ onClose, show }: IsochronicProps) {
+  const [baseFrequency, setBaseFrequency] = useState<number>(440); // Default A4 note
+  const [beatFrequency, setBeatFrequency] = useState<number>(10); // Default 10 Hz beat
+  const [volume, setVolume] = useState<number>(0.5); // Default volume at 50%
+  const [waveform] = useState<OscillatorType>('sine'); // Default waveform
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [selectedPreset, setSelectedPreset] = useState<string>('Custom');
+
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const oscillatorRef = useRef<OscillatorNode | null>(null);
+  const gainNodeRef = useRef<GainNode | null>(null);
+  const beatGainRef = useRef<GainNode | null>(null);
+  const modulatorRef = useRef<OscillatorNode | null>(null);
+
+  const startSound = () => {
+    if (isPlaying) return;
+
+    audioContextRef.current = new window.AudioContext();
+    const audioContext = audioContextRef.current;
+
+    if (!audioContext) return;
+
+    // Main gain node for volume control
+    gainNodeRef.current = audioContext.createGain();
+    gainNodeRef.current.gain.value = volume;
+
+    // Oscillator for the base tone
+    oscillatorRef.current = audioContext.createOscillator();
+    oscillatorRef.current.frequency.value = baseFrequency;
+    oscillatorRef.current.type = waveform;
+
+    // Gain node to create isochronic beats
+    beatGainRef.current = audioContext.createGain();
+    beatGainRef.current.gain.value = 0; // Start with silence
+
+    // Oscillator for modulation
+    modulatorRef.current = audioContext.createOscillator();
+    modulatorRef.current.frequency.value = beatFrequency;
+    modulatorRef.current.type = 'square'; // Square wave for on/off effect
+
+    // Modulator gain to adjust modulation depth
+    const modulatorGain = audioContext.createGain();
+    modulatorGain.gain.value = 0.5; // Modulation depth
+
+    // Connect modulator to the beat gain node
+    modulatorRef.current
+      .connect(modulatorGain)
+      .connect(beatGainRef.current.gain);
+
+    // Connect oscillator through beat gain and main gain to destination
+    oscillatorRef.current
+      .connect(beatGainRef.current)
+      .connect(gainNodeRef.current)
+      .connect(audioContext.destination);
+
+    // Start oscillators
+    oscillatorRef.current.start();
+    modulatorRef.current.start();
+
+    setIsPlaying(true);
+  };
+
+  const stopSound = useCallback(() => {
+    if (!isPlaying) return;
+
+    oscillatorRef.current?.stop();
+    modulatorRef.current?.stop();
+    audioContextRef.current?.close();
+
+    setIsPlaying(false);
+  }, [isPlaying]);
+
+  useEffect(() => {
+    // Update gain when volume changes
+    if (gainNodeRef.current) {
+      gainNodeRef.current.gain.value = volume;
+    }
+  }, [volume]);
+
+  useEffect(() => {
+    // Update base frequency when it changes
+    if (oscillatorRef.current) {
+      oscillatorRef.current.frequency.value = baseFrequency;
+    }
+  }, [baseFrequency]);
+
+  useEffect(() => {
+    // Update beat frequency when it changes
+    if (modulatorRef.current) {
+      modulatorRef.current.frequency.value = beatFrequency;
+    }
+  }, [beatFrequency]);
+
+  useEffect(() => {
+    // Update waveform when it changes
+    if (oscillatorRef.current) {
+      oscillatorRef.current.type = waveform;
+    }
+  }, [waveform]);
+
+  useEffect(() => {
+    // Cleanup when component unmounts
+    return () => {
+      if (isPlaying) {
+        stopSound();
+      }
+    };
+  }, [isPlaying, stopSound]);
+
+  useEffect(() => {
+    // Update frequencies when a preset is selected
+    if (selectedPreset !== 'Custom') {
+      const preset = presets.find(p => p.name === selectedPreset);
+      if (preset) {
+        setBaseFrequency(preset.baseFrequency);
+        setBeatFrequency(preset.beatFrequency);
+      }
+    }
+  }, [selectedPreset]);
+
+  const handlePresetChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selected = e.target.value;
+    setSelectedPreset(selected);
+
+    if (selected === 'Custom') {
+      // Allow user to input custom frequencies
+      return;
+    }
+
+    const preset = presets.find(p => p.name === selected);
+    if (preset) {
+      setBaseFrequency(preset.baseFrequency);
+      setBeatFrequency(preset.beatFrequency);
+    }
+  };
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <header className={styles.header}>
+        <h2 className={styles.title}>Isochronic Tone</h2>
+        <p className={styles.desc}>Isochronic tone generator.</p>
+      </header>
+
+      <div className={styles.fieldWrapper}>
+        <label>
+          Presets:
+          <select value={selectedPreset} onChange={handlePresetChange}>
+            {presets.map(preset => (
+              <option key={preset.name} value={preset.name}>
+                {preset.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      {selectedPreset === 'Custom' && (
+        <>
+          <div className={styles.fieldWrapper}>
+            <label>
+              Base Frequency (Hz):
+              <input
+                max="2000"
+                min="20"
+                step="0.1"
+                type="number"
+                value={baseFrequency}
+                onChange={e =>
+                  setBaseFrequency(parseFloat(e.target.value || '0'))
+                }
+              />
+            </label>
+          </div>
+          <div className={styles.fieldWrapper}>
+            <label>
+              Tone Frequency (Hz):
+              <input
+                max="40"
+                min="0.1"
+                step="0.1"
+                type="number"
+                value={beatFrequency}
+                onChange={e =>
+                  setBeatFrequency(parseFloat(e.target.value || '0'))
+                }
+              />
+            </label>
+          </div>
+          {/* <div className={styles.fieldWrapper}>
+            <label>
+              Waveform:
+              <select
+                value={waveform}
+                onChange={e => setWaveform(e.target.value as OscillatorType)}
+              >
+                <option value="sine">Sine</option>
+                <option value="square">Square</option>
+                <option value="sawtooth">Sawtooth</option>
+                <option value="triangle">Triangle</option>
+              </select>
+            </label>
+          </div> */}
+        </>
+      )}
+      <div className={styles.fieldWrapper}>
+        <label>
+          Volume:
+          <Slider
+            className={styles.volume}
+            max={1}
+            min={0}
+            step={0.01}
+            value={volume}
+            onChange={value => setVolume(value)}
+          />
+        </label>
+      </div>
+      <div className={styles.buttons}>
+        <button
+          className={styles.primary}
+          disabled={isPlaying}
+          onClick={startSound}
+        >
+          Start
+        </button>
+        <button disabled={!isPlaying} onClick={stopSound}>
+          Stop
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/modals/presets/index.ts

@@ -0,0 +1 @@
+export { PresetsModal } from './presets';

src/components/modals/presets/list/index.ts

@@ -0,0 +1 @@
+export { List } from './list';

src/components/modals/presets/list/list.module.css

@@ -0,0 +1,72 @@
+.list {
+  & .title {
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .empty {
+    font-size: var(--font-sm);
+  }
+
+  & .preset {
+    display: flex;
+    column-gap: 4px;
+    align-items: center;
+    width: 100%;
+    height: 45px;
+    padding: 4px;
+    margin-top: 8px;
+    background-color: var(--color-neutral-50);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 8px;
+
+    &:not(:last-of-type) {
+      margin-bottom: 8px;
+    }
+
+    & input {
+      flex-grow: 1;
+      min-width: 0;
+      height: 100%;
+      padding: 0 12px;
+      color: var(--color-foreground);
+      background: transparent;
+      border: none;
+      outline: none;
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
+    }
+
+    & button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      aspect-ratio: 1 / 1;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-foreground-subtle);
+      cursor: pointer;
+      background-color: var(--color-neutral-100);
+      border: none;
+      border-radius: 4px;
+      outline: none;
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
+
+      &.primary {
+        font-size: var(--font-xsm);
+        color: var(--color-foreground);
+        background-color: var(--color-neutral-200);
+        border: 1px solid var(--color-neutral-300);
+      }
+    }
+  }
+}

src/components/modals/presets/list/list.tsx

@@ -0,0 +1,54 @@
+import { FaPlay, FaRegTrashAlt } from 'react-icons/fa/index';
+
+import styles from './list.module.css';
+
+import { useSoundStore } from '@/stores/sound';
+import { usePresetStore } from '@/stores/preset';
+
+interface ListProps {
+  close: () => void;
+}
+
+export function List({ close }: ListProps) {
+  const presets = usePresetStore(state => state.presets);
+  const changeName = usePresetStore(state => state.changeName);
+  const deletePreset = usePresetStore(state => state.deletePreset);
+  const override = useSoundStore(state => state.override);
+  const play = useSoundStore(state => state.play);
+
+  return (
+    <div className={styles.list}>
+      <h3 className={styles.title}>
+        Your Presets {presets.length > 0 && `(${presets.length})`}
+      </h3>
+
+      {!presets.length && (
+        <p className={styles.empty}>You don&apos;t have any presets yet.</p>
+      )}
+
+      {presets.map(preset => (
+        <div className={styles.preset} key={preset.id}>
+          <input
+            placeholder="Untitled"
+            type="text"
+            value={preset.label}
+            onChange={e => changeName(preset.id, e.target.value)}
+          />
+          <button onClick={() => deletePreset(preset.id)}>
+            <FaRegTrashAlt />
+          </button>
+          <button
+            className={styles.primary}
+            onClick={() => {
+              override(preset.sounds);
+              play();
+              close();
+            }}
+          >
+            <FaPlay />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/modals/presets/new/index.ts

@@ -0,0 +1 @@
+export { New } from './new';

src/components/modals/presets/new/new.module.css

@@ -0,0 +1,72 @@
+.new {
+  margin-top: 16px;
+
+  & .title {
+    font-weight: 500;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .form {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 45px;
+    padding: 4px;
+    margin-top: 8px;
+    background-color: var(--color-neutral-50);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 8px;
+
+    &.disabled {
+      filter: blur(2px);
+      opacity: 0.4;
+    }
+
+    & input {
+      flex-grow: 1;
+      min-width: 0;
+      height: 100%;
+      padding: 0 12px;
+      color: var(--color-foreground);
+      background: transparent;
+      border: none;
+      outline: none;
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
+    }
+
+    & button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 12px;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-neutral-50);
+      cursor: pointer;
+      background-color: var(--color-neutral-950);
+      border: none;
+      border-radius: 4px;
+      outline: none;
+
+      &:focus-visible {
+        outline: 2px solid var(--color-neutral-400);
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  & .noSelected {
+    margin-top: 8px;
+    font-size: var(--font-sm);
+    color: var(--color-foreground-subtle);
+  }
+}

src/components/modals/presets/new/new.tsx

@@ -0,0 +1,60 @@
+import { useState, type FormEvent } from 'react';
+
+import { cn } from '@/helpers/styles';
+import { useSoundStore } from '@/stores/sound';
+import { usePresetStore } from '@/stores/preset';
+
+import styles from './new.module.css';
+
+export function New() {
+  const [name, setName] = useState('');
+
+  const noSelected = useSoundStore(state => state.noSelected());
+  const sounds = useSoundStore(state => state.sounds);
+  const addPreset = usePresetStore(state => state.addPreset);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!name || noSelected) return;
+
+    const _sounds: Record<string, number> = {};
+
+    Object.keys(sounds)
+      .filter(id => sounds[id].isSelected)
+      .forEach(id => {
+        _sounds[id] = sounds[id].volume;
+      });
+
+    addPreset(name, _sounds);
+
+    setName('');
+  };
+
+  return (
+    <div className={styles.new}>
+      <h3 className={styles.title}>New Preset</h3>
+
+      <form
+        className={cn(styles.form, noSelected && styles.disabled)}
+        onSubmit={handleSubmit}
+      >
+        <input
+          disabled={noSelected}
+          placeholder="Preset's Name"
+          required
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+        <button disabled={noSelected}>Save</button>
+      </form>
+
+      {noSelected && (
+        <p className={styles.noSelected}>
+          To make a preset, first select some sounds.
+        </p>
+      )}
+    </div>
+  );
+}

src/components/modals/presets/presets.module.css

@@ -0,0 +1,12 @@
+.title {
+  font-family: var(--font-heading);
+  font-size: var(--font-md);
+  font-weight: 600;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: 16px 0;
+  background-color: var(--color-neutral-200);
+}

src/components/modals/presets/presets.tsx

@@ -0,0 +1,21 @@
+import { Modal } from '@/components/modal';
+import { New } from './new';
+import { List } from './list';
+
+import styles from './presets.module.css';
+
+interface PresetsModalProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function PresetsModal({ onClose, show }: PresetsModalProps) {
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h2 className={styles.title}>Presets</h2>
+      <New />
+      <div className={styles.divider} />
+      <List close={onClose} />
+    </Modal>
+  );
+}

src/components/modals/share-link/share-link.module.css

@@ -23,6 +23,7 @@
 
   & input {
     flex-grow: 1;
+    min-width: 0;
     height: 100%;
     padding: 0 10px;
     font-size: var(--font-sm);
@@ -30,6 +31,11 @@
     background: transparent;
     border: none;
     outline: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--color-neutral-400);
+      outline-offset: 2px;
+    }
   }
 
   & button {
@@ -46,7 +52,13 @@
     outline: none;
     transition: 0.2s;
 
-    &:hover {
+    &:focus-visible {
+      outline: 2px solid var(--color-neutral-400);
+      outline-offset: 2px;
+    }
+
+    &:hover,
+    &:focus-visible {
       background-color: var(--color-neutral-200);
     }
   }