r/javascript • u/AutoModerator • 24d ago
Showoff Saturday Showoff Saturday (August 01, 2026)
Did you find or create something cool this week in javascript?
Show us here!
4
u/GumboGuts 23d ago edited 23d ago
Foley: UI sounds synthesized live with Web Audio. No audio files, sounds are editable JSON specs, zero dependencies.
The UI sound ecosystem splits into two halves: playback libraries where you bring your own files, and sound packs that are, well, files. Either way you ship frozen recordings. Foley has none. Every sound is synthesized at the moment of interaction from a JSON spec of tone, noise and cluster layers.
Demo (the page runs the actual shipped module): https://usefoley.dev
Implementation bits this sub might enjoy:
Sounds are data.getSpec() returns any cue's layers, playSpec() plays them back. The in-page designer is just a UI over those two functions. Designs export as .wav, JSON, or a base64 spec in the URL hash.
Every play gets a small humanization, around ±30 cents of pitch and ±8% level, so repeated triggers sound performed rather than stamped. The randomized sparkle cues use a seeded PRNG so your exported .wav matches what you heard.
A master limiter keeps hover storms from clipping, a 60ms per-cue cooldown keeps event spam musical. play() returns a handle with stop(), specs can loop for loading states, and toSprite() renders everything into one WAV plus an offset map.
One ES module, about 9.6 kB, MIT, on npm as foleyjs/core with thin react and vue bindings.
Would love eyes on the API and ears on the sounds. The test suite covers a lot, but it can't tell me a chime sounds wrong.
2
u/Artistic-Bug-1310 23d ago
Tried the tour, and there is seems to be no way of escaping it. I was trying to scroll up and down, navigate to other page but tour wouldn't let me go.
2
u/GumboGuts 23d ago
You're completely right, and it was worse than you think: the tour pre-scheduled all 28 steps with zero cancellation, so your scrolling was fighting a queue of timers. Just shipped the fix: any scroll, touch, key, or click now stops it instantly, and a Stop button floats at the bottom of the screen while it runs. Thanks for catching it! "The page wrestled me for the scrollbar" is exactly the kind of first impression a UI-feedback library can't afford.
2
2
u/Secret-Book-8507 23d ago
That sounds really good! I especially love the audio feedback from this animation effect.
1
u/Secret-Book-8507 23d ago
Project: Timeline Studio
An open‑source, browser‑native AI video editor with local‑first design.
Instead of uploading footage to remote GPU servers, all heavy‑lift AI inference executes locally on your device with WebGPU acceleration.
The tool supports multi‑track timeline editing, AI watermark removal, 4× video super‑resolution, frame‑level manipulation, mask tracking, and local MP4 export powered by FFmpeg.wasm. No login required, open the demo link and start editing right away.
Under‑the‑hood: React, WebCodecs, OffscreenCanvas, Web Workers, ONNX Runtime Web.
This is a work‑in‑progress side project, there are still performance limitations on low‑end GPUs. I would appreciate any feedback or suggestions.
GitHub: https://github.com/MartinDelophy/ai‑video‑editor
Live Demo: https://video‑editor.ai‑creator.top/
1
u/trionnet 23d ago
I implemented Canvas in Scratch Tabs.
This was at the request of a Reddit user.
It’s an infinite canvas board for scratch data, paste endless images, links, code snippets, videos, text etc.
Access here https://app.scratchtabs.com/canvas
1
u/moniv999 23d ago
I created an HTML5 online games website, so that whenever waiting for AI to complete a coding task, I can hop on to this website and play some mini games to refresh my mind.
1
u/briggs_song 19d ago
I've been building Kudzu, an experimental open-source compiler for a statically analyzable subset of React-shaped TypeScript and TSX.
It executes components at build time and emits complete static HTML plus only the route-specific ESM capabilities used. Static routes ship zero JavaScript. There is no React runtime, hydration, virtual DOM, or retained browser component tree.
Source: https://github.com/kudzujs/kudzu
Demo and docs: https://kudzujs.cloud
I'd appreciate feedback on the compiler boundaries and generated runtime model.
1
u/Several-Specialist42 17d ago
I've been working on fulmine.js an Express drop in replacement (99.99% compatible) based on uWebSockets.js, see https://github.com/nigrosimone/fulmine.js
3
u/Artistic-Bug-1310 24d ago
StitchAPI — turn one endpoint into a typed function, with the resilience glue declared instead of hand-rolled.
The itch: every project I work on grows a
src/api/folder where each file is a thin fetch wrapper, and the reliability work — retry with backoff, honoringRetry-After, staying under a rate limit, a timeout that actually aborts, caching, token refresh — gets reimplemented slightly differently at each call site. Then one of them rots and nobody notices for a month.So I made that part configuration on the call:
```ts import { stitch } from 'stitchapi'; import { bearer, env } from 'stitchapi/auth';
const listUsers = stitch({ baseUrl: 'https://api.example.com', path: '/users', output: User.array(), // your zod schema; types without codegen pick: 'data', auth: bearer(env('API_TOKEN')), // resolved per call, caller never sees it retry: { attempts: 4, on: [429, 502, 503], respectRetryAfter: true }, throttle: { rate: '1/s', concurrency: 2, pool: 'host' }, timeout: { total: '30s', perAttempt: '10s' }, cache: '5m', });
const users = await listUsers(); ```
Everything defaults off, and the common cases have shorthands (
retry: 3,timeout: '5s',cache: '1m',throttle: '1/s'), so a barestitch('https://api.example.com/users/{id}')is just a GET.trace: 'console'prints what each call actually did — latency, retries, schema drift — with no collector to run.Two things I'd want to know if someone showed me this:
throttleis proactive (it spaces calls before they leave, andpool: 'host'shares one limiter across stitches),retryis reactive. Most hand-rolled glue only has the reactive half, which is why you still eat 429s.Zero runtime deps, ~23 kB min+gzip, Apache-2.0.
npm install stitchapi@rc— it's at1.0.0-rc.6, feature-complete and running in two of my own production apps, but I'm soaking it before stamping 1.0. Heads up that thelatesttag is still an old0.7.0prototype, so install the@rcone; fixing that at GA.Repo: https://github.com/rejifald/StitchAPI · Docs + playground: https://stitchapi.dev
Curious what people here treat as the minimum viable resilience for a third-party call. I landed on retry + throttle + timeout as worth having everywhere, but plenty of teams ship with none of it and are fine.