Feat: improve website

website/public/script.js

@@ -31,6 +31,20 @@ document.querySelectorAll('.example-cell').forEach(cell => {
     });
 });
 
+const featureDesc = document.getElementById('feature-desc');
+document.querySelectorAll('.feature-tags button').forEach(btn => {
+    btn.addEventListener('click', () => {
+        const wasActive = btn.classList.contains('active');
+        document.querySelectorAll('.feature-tags button.active').forEach(b => b.classList.remove('active'));
+        if (wasActive) {
+            featureDesc.textContent = '';
+        } else {
+            btn.classList.add('active');
+            featureDesc.textContent = btn.dataset.desc;
+        }
+    });
+});
+
 document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
         document.querySelectorAll('.example-cell.expanded').forEach(c => {

website/public/style.css

@@ -1,17 +1,10 @@
 @font-face {
-    font-family: 'Space Mono';
+    font-family: 'VCR OSD Mono';
-    src: url('/SpaceMono-Regular.woff2') format('woff2');
+    src: url('/VCR_OSD_MONO_1.001.woff2') format('woff2');
     font-weight: 400;
     font-display: swap;
 }
 
-@font-face {
-    font-family: 'Space Mono';
-    src: url('/SpaceMono-Bold.woff2') format('woff2');
-    font-weight: 700;
-    font-display: swap;
-}
-
 :root {
     --bg: #000;
     --surface: #121212;
@@ -29,14 +22,14 @@
 }
 
 body {
-    font-family: 'Space Mono', monospace;
+    font-family: 'VCR OSD Mono', monospace;
     background: var(--bg);
     color: var(--text);
     max-width: 800px;
     margin: 0 auto;
     padding: 1rem;
     line-height: 1.3;
-    font-size: clamp(0.9rem, 0.75rem + 0.75vw, 1.15rem);
+    font-size: clamp(1rem, 0.85rem + 0.75vw, 1.3rem);
 }
 
 header {
@@ -72,11 +65,14 @@ h2 {
     border-bottom: 1px solid var(--text-muted);
 }
 
-p { margin: 0.25rem 0; }
+p {
+    margin: 0.25rem 0;
+    text-align: justify;
+}
 
 video {
     max-width: 100%;
-    margin: 0.5rem 0;
+    margin: 2rem 0 0.5rem 0;
     display: block;
 }
 
@@ -87,7 +83,10 @@ ul {
     margin: 0.25rem 0;
 }
 
-li { margin: 0.1rem 0; }
+li {
+    margin: 0.1rem 0;
+    text-align: justify;
+}
 
 .examples-grid {
     display: grid;
@@ -173,6 +172,50 @@ li { margin: 0.1rem 0; }
     color: var(--text-muted);
 }
 
+.features {
+    margin: 0.25rem 0;
+}
+
+.feature-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.feature-tags button {
+    font-family: 'VCR OSD Mono', monospace;
+    font-size: 0.85em;
+    background: var(--surface);
+    color: var(--text-muted);
+    border: 1px solid transparent;
+    padding: 0.2rem 0.5rem;
+    cursor: pointer;
+}
+
+.feature-tags button:hover {
+    color: var(--text);
+    border-color: var(--text-muted);
+}
+
+.feature-tags button.active {
+    color: var(--text);
+    border-color: var(--text);
+}
+
+.feature-desc {
+    color: var(--text-dim);
+    margin-top: 0.75rem;
+    padding: 0.75rem;
+    background: var(--surface);
+    border-left: 2px solid var(--text-muted);
+    text-align: left;
+    line-height: 1.5;
+}
+
+.feature-desc:empty {
+    display: none;
+}
+
 .colophon {
     margin-top: 3rem;
     padding-top: 1rem;
@@ -185,7 +228,7 @@ li { margin: 0.1rem 0; }
 }
 
 #theme-toggle {
-    font-family: 'Space Mono', monospace;
+    font-family: 'VCR OSD Mono', monospace;
     background: none;
     color: var(--text-muted);
     border: none;

website/src/pages/index.astro

@@ -78,22 +78,35 @@
     <p class="note">All releases are available on <a href="https://github.com/Bubobubobubobubo/cagire/releases/latest">GitHub</a>. You can also compile the software yourself by getting it from Cargo!</p>
 
 
-    <video src="/mono_cagire.mp4" autoplay muted loop playsinline></video>
-
     <h2>About</h2>
     <p>Cagire is a step sequencer where each step contains a Forth script instead of typical note data. When the sequencer reaches a step, it runs the associated script. Scripts can produce sound, trigger samples, apply effects, or do nothing at all. You are free to define what your scripts will do. Cagire includes a built-in audio engine called <a href="https://doux.livecoding.fr">Doux</a>. No external software is needed to make sound. It comes with oscillators, sample players, filters, reverb, delay, distortion, and more.</p>
 
-    <h2>Features</h2>
+    <h2>Features (click to learn more!)</h2>
-    <ul>
+    <div class="features">
-        <li>Robust synthesis engine: synthesizers, sampling, effects, live input, and more to discover.</li>
+        <div class="feature-tags">
-        <li>Ableton Link: jam with your friends or include other software / hardware to your setup.</li>
+            <button data-desc="Powered by an audio engine crafted specifically for live coding. Classic waveforms (aliased and non-aliased). Noise generators. Mutable Instruments Plaits modes (modal, virtual analog, waveshaping, FM, granular, additive, etc). Small but fun FM synth with 2 operators, multiple algorithms and feedback control. Wavetable scanning with LFO control: bring your own wavetables. Sub-oscillators with independent waveform and octave. Sample playback with slicing, time-stretching and gating. Live microphone input. Configurable polyphony (default 32 voices). 8 independent effect buses (orbits).">Synthesis</button>
-        <li>32 banks × 32 patterns × 128 steps per project: (~131.000 scripts per project).</li>
+            <button data-desc="Two reverb algorithms, Four delay types: standard, ping-pong, tape and multitap. Feedback, chorus, phaser and flanger with configurable depth, sweep and feedback. Distortion, bitcrusher, wave folding and wave wrapping. Comb filter with tunable frequency, feedback and damping. Audio-rate modulation for the final touch. ">Effects</button>
-        <li>Forth: objectively the coolest / minimal / hackable language to make music with!</li>
+            <button data-desc="Multimode filter with lowpass, highpass and bandpass modes, each with its own ADSR envelope, frequency and resonance. Selectable filter slope (12, 24 or 48 dB/oct). Ladder filter variants (lowpass, highpass, bandpass) if you like that! 3-band parametric EQ (lo/mid/hi) and a tilt EQ for broad tonal shaping.">Filters</button>
-        <li>Embedded dictionary and documentation! Learn while coding!</li>
+            <button data-desc="4 MIDI inputs and 4 MIDI outputs. Send and receive CC messages, pitch bend, channel aftertouch and program changes. MIDI clock output (clock, start, stop, continue). Read incoming CC values in real-time from any device. Full channel selection per voice.">MIDI</button>
-    </ul>
+            <button data-desc="Write notes by name (c4, d#5), build chords and scales from a rich built-in library. Convert between MIDI and frequency on the fly. Express musical ideas directly in code.">Theory</button>
+            <button data-desc="Conditional execution and probability branching built into the language. Weighted random choices, coin flips, euclidean rhythms with rotation. Multiple random distributions, Perlin noise, seeded randomness. Cagire is designed to be generative and fun.">Probability</button>
+            <button data-desc="Everything moves. Audio-rate LFOs, slides, ramps, envelopes, jitter, drunk walks, vibrato, ring modulation — all available as simple words you drop into any script. Shape any parameter over time with multiple curve types. Add controlled randomness or smooth motion at your heart's content.">Modulation</button>
+            <button data-desc="Tempo sync with any Ableton Link-enabled app or hardware on the same network. Shared tempo and phase across all connected devices. You can jam with your friends!">Ableton Link</button>
+            <button data-desc="32 banks * 32 patterns * 128 steps per project. That's ~131.000 scripts per project, way too much! Play as much patterns as you want simultaneously.">Projects</button>
+                <button data-desc="Forth is concatenative, minimal and radically extensible. No syntax to learn — just words separated by spaces. You build your own vocabulary on top of the language, growing it toward your musical ideas. Expressions are terse and compositional: small words combine into larger ones. Forth rewards exploration and improvisation, making it a natural fit for live coding.">Forth</button>
+            <button data-desc="Per-pattern speed control, sync modes (loop, play-once, trigger) and launch quantization (bar, beat, step or immediate). Pattern chaining for longer sequences. Scripts are time-aware: they know their beat position, phase, iteration count and tempo.">Sequencer</button>
+            <button data-desc="Play multiple patterns simultaneously. Mute and solo staging with quantized execution. Fill mode for live key input. Stage pattern starts and stops to land on the beat. Built for improvisation on stage.">Play Live</button>
+            <button data-desc="Works in the terminal for minimal setups. Desktop mode (egui) with mouse support if you feel fancy. Runs on macOS (ARM and Intel), Windows and Linux.">Cross-platform</button>
+            <button data-desc="Many built-in color themes to match your taste. Hue rotation for themes can help you to get that special wonky look.">Themes</button>
+            <button data-desc="Every built-in word is documented with stack effect notation, description and usage example. A full help system covering everything from basics to advanced techniques. Browse the dictionary and help pages without leaving the app. Inline help to learn Forth and Cagire.">Dictionary</button>
+        </div>
+        <div class="feature-desc" id="feature-desc"></div>
+    </div>
 
     <h2>Live Coding</h2>
-    <p>Live coding is a technique where a programmer writes code in real-time in front of an audience. It is a way to experiment with code, to share things and thoughts openly, to express yourself through code. It can be technical, poetical, weird, preferably all at once. Live coding can be used to create music, visual art, and other forms of media. Live coding is an autotelic activity: doing it is its own reward. There are no errors, only fun. Learn more at <a href="https://toplap.org">TOPLAP</a> or <a href="https://livecoding.fr">livecoding.fr</a>.</p>
+    <p>Live coding is a technique where a programmer writes code in real-time in front of an audience. It is a way to experiment with code, to share openly, to express yourself through code. It can be technical, poetical, weird, preferably all at once. Live coding can be used to create music, visual art, and other forms of media. Live coding is an autotelic activity: doing it is its own reward. There are no errors, only fun. Learn more at <a href="https://toplap.org">TOPLAP</a> or <a href="https://livecoding.fr">livecoding.fr</a>.</p>
+
+    <video src="/mono_cagire.mp4" autoplay muted loop playsinline></video>
 
     <p class="colophon">
         <a href="https://raphaelforment.fr">BuboBubo</a> · Audio engine: <a href="https://doux.livecoding.fr">Doux</a> · <a href="https://github.com/Bubobubobubobubo/cagire">GitHub</a> · AGPL-3.0 · <button id="theme-toggle" aria-label="Toggle theme">LIGHT</button>