diff --git a/README.md b/README.md index 231a1d7..cfc98fb 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# poof +# rsgp Audio synthesis web application for generating random sound samples. Users generate sounds via different synthesis engines, mutate parameters, apply audio processors in multiple passes, and export as WAV. Built for musicians seeking unexpected textures and one-shots. @@ -39,8 +39,8 @@ pnpm build ## Docker ```sh -docker build -t poof . -docker run -p 8080:80 poof +docker build -t rsgp . +docker run -p 8080:80 rsgp ``` Opens on http://localhost:8080 diff --git a/index.html b/index.html index 68e6780..6dd4a15 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,9 @@ - + - Poof + RSGP
diff --git a/package.json b/package.json index 2b5eb9a..d2bbf63 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "poof", + "name": "rsgp", "private": true, "version": "0.0.0", "type": "module", diff --git a/public/tutorial.gif b/public/tutorial.gif new file mode 100644 index 0000000..dad45a9 Binary files /dev/null and b/public/tutorial.gif differ diff --git a/src/App.svelte b/src/App.svelte index b44cc68..6b8435e 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -532,7 +532,7 @@ -

Poof: a sample generator and processor

+

RSGP: Random Sample Generator and Processor

{#if showPitchLock}
diff --git a/src/lib/components/WelcomeModal.svelte b/src/lib/components/WelcomeModal.svelte index 88629ac..dec688a 100644 --- a/src/lib/components/WelcomeModal.svelte +++ b/src/lib/components/WelcomeModal.svelte @@ -21,39 +21,35 @@ onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} > -

Poof: a sample generator

-

- Do you need to generate audio samples for your projects? Poof, it's - already done! These are not the best samples you'll ever hear, but they - have the right to exist, nonetheless, in the realm of all the random and - haphazardly generated digital sounds. Have fun, give computers some love! -

-
    -
  • - Generate audio samples using various audio synthesis generators. Random - parameters. -
    • -
  • - Process each sound with with a growing collection of random effects. -
    • -
  • Export your samples as WAV files.
    • -
-
-

- Created by Raphaël Forment (BuboBubo) -

-

- Licensed under GPL 3.0 -

+

Random Sample Generator and Processor

+
+
+ Tutorial showing how to use RSGP +
+
+
    +
  1. + Generate new samples using a diverse collection of synth engines. +
    2. +
  2. + Process samples using a growing list of tools and effects. +
    3. +
  3. Export your samples as WAV files.
    4. +
+
+

+ Created by Raphaël Forment (BuboBubo) + • Licensed under GPL 3.0 +

@@ -98,7 +94,7 @@ background-color: #000; border: 2px solid #fff; padding: 1.25rem; - max-width: 500px; + max-width: 800px; width: calc(100% - 2rem); color: #fff; max-height: 90vh; @@ -108,60 +104,92 @@ } .modal-content h1 { - margin: 0 0 0.5rem 0; - font-size: 1.75rem; + margin: 0 0 1.575rem 0; + font-size: 1.25rem; font-weight: bold; letter-spacing: 0.02em; + text-align: center; + } + + .modal-columns { + display: flex; + flex-direction: column; + gap: 1.575rem; + margin-bottom: 1.575rem; + } + + .modal-column { + flex: 1; + } + + .gif-column { + flex: 0 0 auto; + max-width: 420px; + } + + .text-column { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + } + + .text-column ol { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 100%; + margin: 0; + padding-left: 2rem; } .modal-content .description { - margin: 0 0 1rem 0; + margin: 0; line-height: 1.6; color: #e0e0e0; font-size: 0.875rem; } + .tutorial-gif { + width: 100%; + max-width: 100%; + height: auto; + border: 1px solid #444; + } + .modal-content ul { margin: 0 0 1rem 0; padding-left: 1.25rem; } .modal-content ul li { - margin-bottom: 0.5rem; - } - - .modal-content ul li:last-child { margin-bottom: 0; } - .modal-links { - margin: 1.25rem 0; - padding: 0.875rem 0; - border-top: 1px solid #444; - border-bottom: 1px solid #444; + .text-column ol li { + margin-bottom: 0; } - .modal-links p { - margin: 0.375rem 0; - font-size: 0.8125rem; + .modal-footer { + margin: 0 0 1.575rem 0; + font-size: 0.75rem; color: #bbb; - line-height: 1.5; + text-align: center; } - .modal-links a { + .modal-footer a { color: #646cff; text-decoration: none; - word-break: break-word; transition: color 0.2s ease; } - .modal-links a:hover { + .modal-footer a:hover { color: #8891ff; text-decoration: underline; } .modal-close { - margin-top: 1rem; + margin-top: 0; width: 100%; padding: 0.75rem; font-size: 1rem; @@ -194,8 +222,8 @@ } .modal-content h1 { - font-size: 2rem; - margin: 0 0 0.75rem 0; + font-size: 1.5rem; + margin: 0 0 1.575rem 0; } .modal-content .description { @@ -213,32 +241,33 @@ } .modal-content h1 { - font-size: 2.5rem; - margin: 0 0 1rem 0; + font-size: 1.75rem; + margin: 0 0 2.1rem 0; + } + + .modal-columns { + flex-direction: row; + gap: 2.1rem; + margin-bottom: 2.1rem; } .modal-content .description { - margin: 0 0 1.25rem 0; + margin: 0; font-size: 1rem; line-height: 1.7; } .modal-content ul { - margin: 0 0 1.25rem 0; + margin: 0; } - .modal-links { - margin: 1.75rem 0; - padding: 1.125rem 0; - } - - .modal-links p { - font-size: 0.9375rem; - margin: 0.5rem 0; + .modal-footer { + margin: 0 0 2.1rem 0; + font-size: 0.875rem; } .modal-close { - margin-top: 1.25rem; + margin-top: 0; padding: 0.875rem; font-size: 1.125rem; }