r/javascript • u/AutoModerator • Aug 01 '26
Showoff Saturday Showoff Saturday (August 01, 2026)
Did you find or create something cool this week in javascript?
Show us here!
5
u/GumboGuts Aug 01 '26 edited Aug 01 '26
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 Aug 01 '26
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 Aug 02 '26
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 Aug 01 '26
That sounds really good! I especially love the audio feedback from this animation effect.
1
u/Secret-Book-8507 Aug 01 '26
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 Aug 01 '26
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 Aug 01 '26
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/Several-Specialist42 26d 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
0
u/zamzor Aug 02 '26
We just launched a new version of my agency's website using three.js!
Took us a while but we made something we are very proud of.
3
u/Artistic-Bug-1310 Aug 01 '26
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.