From b32ce37f3b399999fa3c033bb6a67bfbe0a2febf Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 7 Jun 2026 15:10:02 +0000 Subject: [PATCH 1/5] Add Daredream Studios datamosh video editor Self-contained HTML datamosh editor with vaporwave aesthetic. Features: - 14 effects: Datamosh, Pixel Sort, Block Shift, Glitch Scan, Chroma Bleed, Color Burn, Color Map, Echo Ghost, Motion Xfer, Mirror/Kaleidoscope, Wave Warp, Bloom, Databend, Entropy Field - Multi-source video with per-source trim, speed control, and blend modes - Clip sequencer with drag-to-cut manual and auto-advance - BPM tap sync with beat-triggered auto-cut - MediaRecorder export to .webm - Keyboard shortcuts: Space/K/R/C/1-4 - Vaporwave UI: retro grid, neon glow, CRT scanlines, animated sun - Daredream Studios branding throughout - 12 presets including VAPOR, KALEID, FUSION, DREAMWASH --- datamosh-editor.html | 1060 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1060 insertions(+) create mode 100644 datamosh-editor.html diff --git a/datamosh-editor.html b/datamosh-editor.html new file mode 100644 index 000000000000..71e67d4f32ec --- /dev/null +++ b/datamosh-editor.html @@ -0,0 +1,1060 @@ + + + + + +DAREDREAM STUDIOS // DATAMOSH ENGINE + + + +
+ + +
+
+
∅ DATAMOSH ENGINE ∅
+
DAREDREAM STUDIOS
+
+
+ FPS -- + FRAME 0 + GLITCH 0% + BPM -- + STATE READY +
+
+
+ SPACE=play   + K=cut   + R=rec   + 1–4=src   + C=clear +
+ + +
+ + +
+ + +
+
∅ Sources
+
+
+ +
+
+ +
∅ Blend
+
+ Mode + +
+
+ Amount + + 0.50 +
+
+ +
∅ BPM Sync
+
+
+ + +
+
+ Auto-Cut + + -- BPM +
+
+ Auto-Cut ↺ + + + 4s +
+
+
+ +
∅ Presets
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
854×480 // DAREDREAM
+
+ +
+
+
+
SRC 1 — LIVE
+
DAREDREAM STUDIOS
+
+ + + +
+
+ + + +
+ + +
+
+ SEQ +
— add clips to sequence —
+ + + SEQ — +
+
+
00:00:00
+ + + + +
+ DUR + + 15s +
+
+
+
GLITCH
+
MOTION
+
TIME
+
+
+ + + + + + + From 245f116c4aaaa0664cc021693604d686a24afd9f Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 7 Jun 2026 17:41:03 +0000 Subject: [PATCH 2/5] =?UTF-8?q?Fix=20datamosh=20effect=20rendering=20black?= =?UTF-8?q?=20=E2=80=94=20correct=20accumulation=20formula?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The accum buffer was using decay+blend_factor that summed to ~0.96 instead of 1.0, causing steady-state brightness of only 6% of actual pixel values (near-black output). Fix: use a proper lerp (accum += (pixel - accum) * rate) so accum always converges to full pixel brightness. Also seed accum from the first live frame so the image appears immediately rather than fading up from black. --- datamosh-editor.html | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/datamosh-editor.html b/datamosh-editor.html index 71e67d4f32ec..41fe11d6752b 100644 --- a/datamosh-editor.html +++ b/datamosh-editor.html @@ -336,6 +336,7 @@ // ── Buffers ────────────────────────────────────────── let accum =new Float32Array(PIX*4); +let accumInited=false; let prev =new Uint8ClampedArray(PIX*4); let prev2 =new Uint8ClampedArray(PIX*4); let motX =new Float32Array(PIX); @@ -580,19 +581,27 @@ // ── Datamosh ───────────────────────────────────────── function fxDatamosh(src,p){ const d=src.data; + // Seed accum with the first real frame so the image is never black + if(!accumInited){for(let i=0;ip.threshold?(1-p.blend)*.4:(1-p.blend)*.018; - accum[i]=accum[i]*p.decay+d[i]*bl; - accum[i+1]=accum[i+1]*p.decay+d[i+1]*bl; - accum[i+2]=accum[i+2]*p.decay+d[i+2]*bl; + // Proper lerp — (1-rate)+rate == 1.0, so accum converges to full pixel value + // High motion → accum follows new scene faster; low motion → holds old scene (datamosh) + const rate=m>p.threshold?(1-p.blend)*0.55:(1-p.blend)*0.04; + accum[i] +=( d[i] -accum[i] )*rate; + accum[i+1]+=(d[i+1]-accum[i+1])*rate; + accum[i+2]+=(d[i+2]-accum[i+2])*rate; } const out=new ImageData(W,H); for(let i=0;i Date: Sun, 7 Jun 2026 13:54:34 -0400 Subject: [PATCH 3/5] Add Bloom Space project board content --- bloom-space/README.md | 164 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 bloom-space/README.md diff --git a/bloom-space/README.md b/bloom-space/README.md new file mode 100644 index 000000000000..913085eac26f --- /dev/null +++ b/bloom-space/README.md @@ -0,0 +1,164 @@ +# 🌸 Bloom Space + +> Creative studio workspace — all active development tracks + +**Kanban Board:** Add all issues below to the *Bloom Space* GitHub Project +**Columns:** `Backlog` → `In Progress` → `Review` → `Done` + +--- + +## 🎵 Track 1 — Music / Audio Visualizer + +| # | Task | Priority | Status | +|---|------|----------|--------| +| 1 | Core Web Audio API engine (FFT + waveform) | 🔴 High | Backlog | +| 2 | BPM detection + beat-sync animations | 🔴 High | Backlog | +| 3 | Visual themes: Vapor / Cosmic / Neon Grid / Void | 🟡 Med | Backlog | +| 4 | Frequency spectrum 3D waterfall view | 🟡 Med | Backlog | +| 5 | MIDI controller input support | 🟢 Low | Backlog | +| 6 | Export visualizer session as WebM video | 🟡 Med | Backlog | + +### Task Details + +#### #1 — Core Web Audio API Engine +- `AudioContext` + `AnalyserNode` → mic or file input +- Real-time FFT at 60fps (`getByteFrequencyData`) +- Waveform oscilloscope (`getByteTimeDomainData`) +- File drag-and-drop (MP3 / WAV / OGG / FLAC) +- Canvas 854×480 render loop + +#### #2 — BPM Detection + Beat Sync +- Peak energy detection on bass bins (20–200 Hz) +- Rolling threshold crossing = beat event +- `onBeat(bpm, energy)` callback +- Reuse tap-tempo logic from `datamosh-editor.html` +- Beat flash overlay + color palette pulses + +#### #3 — Visual Themes +- **VAPOR** — mirrored bars, pink/cyan, CRT scanlines +- **COSMIC** — circular polar FFT, star field, nova burst on beat +- **NEON GRID** — 3D perspective floor, bloom glow bar peaks +- **VOID** — minimal black/white waveform only +- Theme switcher pill buttons, persists in `localStorage` + +#### #4 — Frequency Waterfall +- Scrolling 2D heat-map: X = frequency, Y = time, color = amplitude +- Color scale: deep blue (quiet) → hot pink (loud) +- Toggle between bar chart / waterfall / oscilloscope views + +#### #5 — MIDI Input +- Web MIDI API device enumeration +- Map CC knobs to: gain, FFT size, theme parameters +- Visual MIDI learn mode (click param → wiggle knob) + +#### #6 — WebM Export +- `canvas.captureStream(30)` + `MediaRecorder` +- Same pipeline as datamosh editor recording system +- Merges audio + canvas into final file + +--- + +## 🎨 Track 2 — Visual Art / Generative Graphics + +| # | Task | Priority | Status | +|---|------|----------|--------| +| 1 | Particle system engine with physics | 🔴 High | Backlog | +| 2 | Perlin noise flow field visualizer | 🔴 High | Backlog | +| 3 | Generative kaleidoscope / symmetry tool | 🟡 Med | Backlog | +| 4 | Reaction-diffusion (Turing patterns) | 🟡 Med | Backlog | +| 5 | WebGL shader playground | 🟡 Med | Backlog | +| 6 | Export artwork as PNG / SVG | 🔴 High | Backlog | + +### Task Details + +#### #1 — Particle System Engine +- N-body system: position, velocity, acceleration per particle +- Forces: gravity, wind, mouse attraction/repulsion, vortex +- Particle birth/death lifecycle with fade +- Render modes: dots / trails / connected-graph / blobs +- Up to 50,000 particles at 60fps (typed arrays) + +#### #2 — Perlin Noise Flow Field +- Classic Perlin noise (or simplex) grid +- Particles follow noise gradient vectors +- Time-animated field evolution +- Controls: noise scale, speed, color palette, trail length +- "Freeze" mode for still export + +#### #3 — Kaleidoscope Tool +- N-fold radial symmetry (3–12 segments) +- Real-time drawing input mirrored across all segments +- Zoom + rotation animation +- Color cycle mode (HSL shift over time) + +#### #4 — Reaction Diffusion +- Gray-Scott model: U/V chemical diffusion +- Feed/kill rate sliders → different pattern regimes +- GPU-accelerated via WebGL ping-pong framebuffers +- Color map overlay (VOID / HEAT / VAPOR palettes from datamosh) + +#### #5 — WebGL Shader Playground +- GLSL fragment shader editor (CodeMirror or textarea) +- Live-reload on edit +- Built-in uniforms: `time`, `mouse`, `resolution` +- 10 starter shaders included + +#### #6 — Export +- PNG snapshot at any resolution (2x/4x canvas scale) +- SVG trace for particle/vector art +- Animated GIF export (via gif.js or similar) + +--- + +## 🎬 Track 3 — Video / Media Tools + +| # | Task | Priority | Status | +|---|------|----------|--------| +| 1 | Datamosh Editor v2 — multi-clip timeline | 🔴 High | In Progress | +| 2 | Real-time webcam glitch effects | 🟡 Med | Backlog | +| 3 | Video color grading tool | 🟡 Med | Backlog | +| 4 | Frame interpolation / slow-motion | 🟢 Low | Backlog | +| 5 | Live stream overlay generator | 🟢 Low | Backlog | + +### Task Details + +#### #1 — Datamosh Editor v2 +- Current v1: `datamosh-editor.html` (PR #1 — In Progress) +- v2 adds: multi-clip timeline (drag to reorder), per-clip effect chains +- Clip in/out points with scrubbing +- Effect automation curves (keyframe parameters over time) + +#### #2 — Webcam Glitch Effects +- `getUserMedia` → live canvas pipeline +- Apply any datamosh effect in real-time to webcam feed +- Snapshot to PNG, record to WebM +- Mirror/virtual-camera mode + +#### #3 — Color Grading Tool +- Curves editor (R/G/B/Luma) +- HSL selective color adjustments +- LUT import/export (.cube format) +- Before/after split-screen compare +- Apply to video file or webcam + +#### #4 — Frame Interpolation +- Canvas optical flow between N frames +- Blend intermediate frames (slow-motion effect) +- Configurable interpolation factor (2x / 4x / 8x) + +#### #5 — Stream Overlay Generator +- Drag-and-drop overlay layout builder +- Animated elements: clocks, alerts, audio meter, now-playing +- OBS browser source compatible +- Export as self-contained HTML + +--- + +## 📋 Project Setup Checklist + +- [ ] Enable Issues in `dylusive/docs` repo (Settings → Features → Issues ✓) +- [ ] Create labels: `audio-visualizer`, `visual-art`, `video-tools`, `bloom-space`, `backlog`, `in-progress`, `review` +- [ ] Open one GitHub Issue per task above +- [ ] Add all issues to the **Bloom Space** GitHub Project +- [ ] Set up columns: `Backlog` / `In Progress` / `Review` / `Done` +- [ ] Enable GitHub Pages (Settings → Pages → branch: `main`, folder: `/`) so tools are live at `https://dylusive.github.io/docs/` From 2f7ae2ad06bd36a5b8a70d38d26c3c73c7388f2b Mon Sep 17 00:00:00 2001 From: Chris Murray Date: Sun, 7 Jun 2026 13:55:06 -0400 Subject: [PATCH 4/5] Add Bloom Hour Mirage project board content --- bloom-hour-mirage/README.md | 172 ++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 bloom-hour-mirage/README.md diff --git a/bloom-hour-mirage/README.md b/bloom-hour-mirage/README.md new file mode 100644 index 000000000000..6f8c58112128 --- /dev/null +++ b/bloom-hour-mirage/README.md @@ -0,0 +1,172 @@ +# 🌅 Bloom Hour Mirage + +> Portfolio & showcase site — Daredream Studios creative work + +**Kanban Board:** Add all issues below to the *Bloom Hour Mirage* GitHub Project +**Columns:** `Backlog` → `In Progress` → `Review` → `Done` +**Live URL (after Pages enabled):** `https://dylusive.github.io/docs/` + +--- + +## 🌐 Track 4 — Portfolio / Showcase Site + +| # | Task | Priority | Status | +|---|------|----------|--------| +| 1 | Design system & CSS variables | 🔴 High | Backlog | +| 2 | Homepage hero section (animated) | 🔴 High | Backlog | +| 3 | Project gallery with filtering | 🔴 High | Backlog | +| 4 | Interactive demo embeds | 🟡 Med | Backlog | +| 5 | About / bio section | 🟡 Med | Backlog | +| 6 | Contact + social links | 🟡 Med | Backlog | +| 7 | Mobile responsiveness | 🔴 High | Backlog | +| 8 | GitHub Pages deployment | 🔴 High | Backlog | +| 9 | SEO + Open Graph meta tags | 🟢 Low | Backlog | +| 10 | Project case studies (written) | 🟢 Low | Backlog | + +--- + +### Task Details + +#### #1 — Design System & CSS Variables +Establish a shared design language used by all portfolio pages. + +```css +:root { + /* Bloom Hour Mirage palette */ + --bg: #07001a; + --surface: #0e0028; + --border: #2e0858; + --pink: #ff71ce; + --cyan: #01cdfe; + --yellow: #fffb96; + --purple: #b967ff; + --green: #05ffa1; + --font-head: 'Orbitron', sans-serif; + --font-body: 'Space Grotesk', sans-serif; +} +``` + +Deliverables: +- [ ] CSS custom properties file (`style/tokens.css`) +- [ ] Typography scale (h1–h4, body, caption) +- [ ] Button + card component styles +- [ ] Shared animated grid background (from datamosh editor) +- [ ] Neon glow utility classes + +#### #2 — Homepage Hero Section +The first thing visitors see — needs to be visually stunning. + +- Full-viewport animated canvas background (generative particles or audio-reactive) +- "DAREDREAM STUDIOS" heading with neon glow text-shadow +- Animated subtitle (typewriter or glitch-text effect) +- CTA buttons: "View Work" + "Open Datamosh Editor" +- Smooth scroll-down arrow + +#### #3 — Project Gallery +Filterable grid of all Daredream Studios tools and art. + +Projects to include: +- Datamosh Editor v1 (done — link to GitHub Pages) +- Audio Visualizer (coming soon) +- Generative Art (coming soon) +- Color Grading Tool (coming soon) + +Features: +- [ ] Filter pills: `All / Video / Audio / Art / Tools` +- [ ] Card hover: project screenshot + quick description +- [ ] Click → project detail page or live demo +- [ ] Card entry animation (staggered fade-in on scroll) + +#### #4 — Interactive Demo Embeds +Let visitors play with tools directly on the portfolio. + +- Iframe embed of `datamosh-editor.html` (sandboxed) +- Mini audio visualizer embed (mic-only, auto-start) +- Generative art sketch (runs inline, no controls needed) +- Each embed has a "Open Full Tool" link + +#### #5 — About / Bio Section +The creator behind Daredream Studios. + +- Profile image + name +- Short bio (2–3 paragraphs) +- Skills/stack tags: `Web Audio API`, `Canvas 2D`, `WebGL`, `HTML/CSS/JS` +- Timeline of notable projects +- Vaporwave aesthetic layout (asymmetric, layered panels) + +#### #6 — Contact + Social Links +- Email link (`mailto:`) +- GitHub profile link +- Social media (add your handles) +- "Hire Me" or "Collab?" CTA +- Animated hover effects on all links + +#### #7 — Mobile Responsiveness +- All layouts work on 375px–1440px screens +- Touch-friendly tap targets (min 44px) +- Canvas tools gracefully degrade or show screenshot on mobile +- Hamburger nav for small screens + +#### #8 — GitHub Pages Deployment +Make the portfolio live. + +Steps: +1. Merge PR #1 (datamosh editor) into `main` +2. Go to `github.com/Dylusive/docs` → **Settings** → **Pages** +3. Set Source: `Deploy from branch` → `main` → `/` (root) +4. Click Save — site goes live at `https://dylusive.github.io/docs/` +5. Add a custom domain later if desired (Settings → Pages → Custom Domain) + +- [ ] Create `index.html` as portfolio homepage +- [ ] Verify all tool links work after Pages deploy +- [ ] Add `404.html` for broken links + +#### #9 — SEO + Open Graph Meta Tags +Help the site get discovered and look good when shared. + +```html + + + + + +``` + +- [ ] OG image (1200×630 screenshot of datamosh editor) +- [ ] sitemap.xml +- [ ] robots.txt + +#### #10 — Project Case Studies +Written documentation for each major tool. + +Format for each: +- What problem it solves +- How it works (technical) +- Screenshots / screen recordings +- What's next / v2 plans + +--- + +## 🎯 Milestone: MVP Launch + +Everything needed for a public launch: + +- [x] Datamosh Editor v1 (code done, PR open) +- [ ] Portfolio homepage (`index.html`) +- [ ] GitHub Pages enabled +- [ ] Project gallery (3+ items) +- [ ] Mobile-responsive layout +- [ ] OG meta tags + +**Target:** Ship MVP within 2 weeks of completing PR #1 merge. + +--- + +## 📋 Project Setup Checklist + +- [ ] Enable Issues in `dylusive/docs` (Settings → Features → Issues ✓) +- [ ] Create labels: `portfolio`, `bloom-hour-mirage`, `design`, `frontend`, `backlog`, `in-progress` +- [ ] Open one GitHub Issue per task above +- [ ] Add all issues to the **Bloom Hour Mirage** GitHub Project +- [ ] Set up columns: `Backlog` / `In Progress` / `Review` / `Done` +- [ ] Merge PR #1 → then enable GitHub Pages → portfolio goes live From ced0679270dc300bdda6a87d7d311cd30331e1fe Mon Sep 17 00:00:00 2001 From: Chris Murray Date: Sun, 7 Jun 2026 13:56:25 -0400 Subject: [PATCH 5/5] Add Daredream Studios portfolio homepage --- index.html | 403 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 403 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 000000000000..72b6be93c1a7 --- /dev/null +++ b/index.html @@ -0,0 +1,403 @@ + + + + + +Daredream Studios + + + + + + + + + + + + + + + + +
+

Creative Tools & Generative Art

+

DAREDREAM
STUDIOS

+

Browser-based creative tools for video manipulation, audio visualization, and generative art — built with pure web tech, no installs.

+
+ View Work + Open Datamosh Editor +
+
scroll
+
+ + +
+
+

// Tools & Experiments

+

Creative Work

+

Open-source browser tools. Click to launch — no download, no login.

+ +
+ + + + +
+ +
+ + +
+
+ 🎬 +
+
+ Video +

Datamosh Editor

+

Real-time datamoshing with 14 effects — pixel sort, block shift, chroma bleed, entropy field and more. Export as WebM.

+ Launch tool → +
+ + +
+
+
+ 🎵 +
+
+ Coming Soon +

Audio Visualizer

+

Beat-synced visual themes for music — FFT spectrum analyzer, waveform oscilloscope, BPM detection, WebM export.

+ In development ⬡ +
+
+ +
+
+
+ ✦ +
+
+ Coming Soon +

Generative Art Studio

+

Particle systems, Perlin noise flow fields, reaction-diffusion, kaleidoscope tools. Export PNG or animated GIF.

+ In development ⬡ +
+
+ +
+
+
+ 🌈 +
+
+ Coming Soon +

Color Grading Tool

+

Curves editor, HSL adjustments, LUT import/export, before/after split preview. Works on video files and webcam.

+ In development ⬡ +
+
+ +
+
+
+ + +
+
+
+
+
🌸
+
+
+

// About

+

Daredream Studios

+

Building creative browser tools at the intersection of art and code. Everything runs in your browser — no installs, no accounts, no limits.

+

Inspired by vaporwave aesthetics, glitch art, and the raw expressive power of the web platform.

+
+ Web Audio API + Canvas 2D + WebGL + MediaRecorder + HTML / CSS / JS + GitHub Pages +
+
+
+
+
+ + +
+
+

// Get in touch

+

Let's Build Something

+

Open to collabs, commissions, and conversations about creative tech.

+ +
+
+ +
+ © 2026 DAREDREAM STUDIOS — BLOOM HOUR MIRAGE +
+ + + +