feat: first commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,106 @@
+# Da.Synth (ダ・シンセ)
+
+Welcome to Da.Synth, my playground for web-based synthesis! As a music producer and sound design enthusiast, I've always been fascinated by the innovative and quirky instruments from Teenage Engineering. This project is my attempt to bring some of that playful spirit into the browser.
+
+[**Try Da.Synth Now!**](https://da-synth.achaq.dev)
+
+⚠️ **Note**: This is very much a work in progress...
+
+![Da.Synth Screenshot](.github/preview.jpeg)
+
+## What's This All About?
+
+Da.Synth is my experiment in creating a web-based synthesizer that captures the essence of boutique hardware synths. It's not trying to be a pro-level tool (at least not yet!), but rather a fun, quirky playground for sound experimentation.
+
+## The Inspiration
+
+As someone who loves tinkering with [Teenage Engineering](https://teenage.engineering/)'s products, I wanted to create something that captures their spirit of making music production accessible and fun. While I'm no DSP expert, I've tried to infuse some of that TE magic into this project:
+
+- Embracing happy accidents and weird sounds
+- Keeping things visually interesting (even if not always practical)
+- Trying to strike a balance between simplicity and depth
+
+### Current Features [WIP]
+
+- A bunch of oscillators you can mess with
+- Effects effects effects
+- A UI that's trying its best to look cool
+- The ability to save your happy accidents as presets
+
+### Upcoming...
+
+- Optimizing... everything [Probaby rewrite the damn thing in rust, jk 😅]
+
+## Available Effects
+
+Da.Synth comes with a variety of effects to shape your sound. Some are classic staples, while others are more experimental. Here's what's currently available:
+
+### Standard Effects
+1. Chorus
+2. Compressor
+3. Delay
+4. Distortion
+5. Filter
+6. Flanger
+7. Limiter
+8. Phaser
+9. Reverb
+10. Stereo Widener
+11. Tremolo
+
+### Experimental Effects (*)
+These effects are more experimental and may be a bit unstable:
+
+12. Bitcrusher
+13. Dimension Expander
+14. Formant Filter
+15. Granular
+16. Ping Pong Delay
+17. Sonic Transformer
+18. Spectral Shaper
+
+*Note: Effects marked with (\*) are experimental and may have bugs or unexpected behavior. But that's where the fun begins! just save relaod and try again 😅*
+
+### Effect Chain
+You can chain these effects in any order you like, creating unique and sometimes bizarre sound transformations. Feel free to experiment and find your own signature sound!
+
+
+
+## Under the Hood
+
+I'm building this with:
+- [Next.js](https://nextjs.org/) (for the web stuff)
+- [React](https://react.dev/) (for the knobs and buttons) ft. [shadcn-ui](https://ui.shadcn.com/):
+
+  The UI is built with React, using a mix of custom components and libraries like shadcn-ui. I'm trying to keep things simple and fun, with a focus on interactivity and visual feedback.
+
+- Web Audio API (for all the bleeps and bloops):
+
+  I'm using the Web Audio API to handle all the audio processing. This includes generating sound waves, applying effects, and mixing everything together. It's a powerful tool that lets you create custom audio processing pipelines in the browser.
+
+- Audio Worklets (for the heavy lifting and cool effects):
+
+  Audio Worklets are a new-ish feature that allows you to run custom audio processing code in a separate thread. This is great for performance and opens up a lot of possibilities for creating custom audio effects and synths. (I didn't use ScriptProcessorNode because it's deprecated and I like to live on the edge.)
+
+## Goals
+
+- Learn more about DSP and audio programming
+- Create a fun, web-based playground for sound design
+- Maybe, just maybe, create something that others find interesting or useful
+
+## Current State
+
+This project is in its early stages, so expect bugs, missing features, and general weirdness. I'm actively working on it, so feel free to check back for updates!
+
+## Contributing
+
+If you're interested in contributing, feel free to fork this repo and submit a PR. I'm open to suggestions, bug reports, and any other feedback you might have. Just keep in mind that this is a personal project, so I might not be able to address everything right away but don't forget to star while you're at it! ⭐
+
+
+## License
+
+Da.Synth is open-source software licensed under the MIT license. Feel free to use it, learn from it, or laugh at it!
+
+---
+
+Now excuse me while I go back to twisting knobs and making weird noises! 🎶✨

app/globals.css

@@ -0,0 +1,90 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 224 71.4% 4.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 216 12.2% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+}

app/layout.tsx

@@ -0,0 +1,40 @@
+import { cn } from '@/lib/utils';
+import type { Metadata } from 'next';
+import localFont from 'next/font/local';
+import React from 'react';
+import './globals.css';
+
+const satoshi = localFont({
+  src: './fonts/Satoshi-Variable.woff2',
+  variable: '--font-sans',
+});
+
+const geistMono = localFont({
+  src: './fonts/GeistMonoVF.woff',
+  variable: '--font-mono',
+});
+
+export const metadata: Metadata = {
+  title: 'DaSynth',
+  description: 'Dasynth is a web-based synthesizer',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="">
+      <body
+        className={cn(
+          satoshi.variable,
+          geistMono.variable,
+          'bg-white font-sans',
+        )}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import Synthesizer from '@/components/synth';
+import { Card } from '@/components/ui/card';
+import Link from 'next/link';
+
+const Page = () => {
+  return (
+    <div className="min-h-screen max-w-3xl mx-auto flex items-center justify-center">
+      <div className="absolute top-8 left-8 p-4">
+        <div className="flex justify-between items-center">
+          <div className="flex items-start flex-col gap-4">
+            <div className="flex items-center gap-2 flex-col">
+              <h1 className="text-3xl font-bold text-black">
+                Da.<span className="text-orange-500">Synth</span>
+              </h1>
+              <p className="text-gray-500 text-sm">ダ・シンセ</p>
+            </div>
+            <div className="flex underline mt-8 font-mono items-center gap-2">
+              (*) means the effect is experimental
+              <br /> and may have bugs.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <svg
+        className="absolute inset-0 -z-10 w-full h-full"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <pattern
+          id="smiley-pattern"
+          x="0"
+          y="0"
+          width="50"
+          height="50"
+          patternUnits="userSpaceOnUse"
+        >
+          <circle
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            stroke="rgba(0,0,0,0.1)"
+            strokeWidth="2"
+          />
+          <circle cx="18" cy="20" r="2" fill="rgba(0,0,0,0.1)" />
+          <circle cx="32" cy="20" r="2" fill="rgba(0,0,0,0.1)" />
+          <path
+            d="M 15 30 Q 25 40 35 30"
+            fill="none"
+            stroke="rgba(0,0,0,0.1)"
+            strokeWidth="2"
+          />
+        </pattern>
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          fill="url(#smiley-pattern)"
+        />
+      </svg>
+      <Synthesizer />
+      <Card className="absolute text-black bottom-8 right-8 p-4">
+        Designed and developed by{' '}
+        <Link
+          className="text-black font-bold hover:underline"
+          href="https://github.com/triyanox"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Mohamed Achaq
+        </Link>
+      </Card>
+    </div>
+  );
+};
+
+export default Page;

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}