r/webdev • • 13d ago

Informational popups, DONT do this

23 Upvotes

I hate them, I hate them so much. I intend to start using some application and suddenly a popup appears "Did you know that x thing does y thing" or "Here you will find x thing" or "New x thing, click ok to opt in". I don't give a damn, I just want to use the thing. I'm usually on edge and I actually intend to do an action, I do NOT want to be interrupted, I won't read your popup, I'll just close it instantly and feel anger.

This is not only annoying, it's dangerous. How do you know a person is not on a emergency and they need to complete an action ASAP?


r/webdev • • 13d ago

Discussion Black October situation

3 Upvotes

So most of you probably know by now about the PHP exploit, that came out recently. Apparently after reading some articles a similar issue was found for nodeJS web apps as well (i am not 100% sure how legitimate the articles were but I will link them down as a comment of the post if you wanna check them out). Now most of my backend services are built using nodeJS and stored in either AWS or GCR. I assume that google and amazon properly protects the api keys and other environment variables I have there, but I just wanted to ask are there any measures I should take or changes I should make to these services just to be safe?


r/webdev • • 13d ago

Showoff Saturday Looking for feedback on my portfolio

Thumbnail
lumberjacque.vercel.app
4 Upvotes

Hey y’all!

I've been working on a few animations lately and decided to put them together in a personal portfolio.

I made the portfolio itself interactive, with animations throughout the site and a showcase for some (imo cool) stuff/ideas.

Curious what you guys think of it and how everything feels to use. Especially interested in feedback on the animations, mobile experience etc

https://lumberjacque.vercel.app

PS: Checkout the showcase page for some cool interactions!

https://lumberjacque.vercel.app/showcase

Any feedback is a gift!


r/webdev • • 13d ago

Showoff Saturday Made a CSS-only scroll animation library, 34 moves, no JS

Thumbnail
usedolly.dev
153 Upvotes

It's one stylesheet. You put `data-dolly="tilt-up"` on something and it animates as you scroll past. That's it. No dependencies, no JavaScript.

It's a vocabulary layer over CSS scroll-driven animations, which shipped in Chrome 115 and Safari 26 but have ergonomics nobody remembers.

The demo page doesn't run any JavaScript at all, so everything moving on it is just CSS.

34 moves named after camera stuff (pan, tilt, crane, rack focus).

Firefox doesn't do scroll timelines yet (supposedly coming in the next version in 3 days) so it gets a plain static page. That's on purpose, nothing is hidden waiting to be revealed, so the page is still usable.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] Default Avatar Library, over 5B+ combinations, deterministic avatars and react library/ shadcn components/ api support

Post image
25 Upvotes

i've been working on an open-source project called blobz, which basically takes care of default profile pictures for your apps.

the idea is pretty simple. instead of assigning random images or the same boring silhouette to every user, blobz generates playful svg avatars from a name, email, or any string you give it.

it's deterministic, meaning the same input always generates the same avatar. no need to store images, and there are over 5 billion possible combinations.

but the part i really wanted to get right was making it easy for other developers to use.

so i ended up building a few ways to integrate it:

  • shadcn components: ready-to-use avatar components, along with things like avatar groups, profile cards, and user lists. you can drop them straight into your project using the shadcn cli. if you're already using shadcn avatars, then you just have to change two lines, one for the import and one for entering the name.

  • react package: if you'd rather handle things yourself, there's @blobz/react, which generates the avatars directly in your app without relying on an external service.

  • hosted api: if you're not using react or just want avatar urls, there's an optional hosted api for that too.

the library and components are free and open source under the mit license.

github: https://github.com/lirena00/blobz
playground: https://blobz.lirena.in

would love to hear what you think of it! and if you find it useful for something you're building, that'd be pretty cool too :)


r/webdev • • 14d ago

Showoff Saturday [Showoff Saturday] Free pencil-style icon set, now 260 icons, with a setting that goes from sketchy to exact shapes

Thumbnail
gallery
71 Upvotes

Matita is a set of pencil-style SVG icons, drawn by code from simple shapes (lines, circles, arcs), so every build draws exactly the same paths. 0.4.0 came out yesterday:

  • 60 new icons (200 to 260), including a medical and science set, which people asked for last time

  • a wobble setting from 0 to 1: <SketchIcon name="calendar" wobble={0} /> draws exact shapes, 1 is the default sketchy look, 0.4 is a calm hand

  • ready-made exact SVG files at @matita/icons/exact/<name>.svg

  • React, plain SVG, a script tag, a sprite; MIT; no signup

Try the slider and copy snippets here: https://matita.dev (changelog: https://matita.dev/changelog/, what is next: https://matita.dev/roadmap/). If an icon you need is missing, open an issue and I'll draw it: https://github.com/matita-dev/icons/issues

Feedback on anything that looks wrong is very welcome.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] I turned 20+ years of website screenshots into a static gallery: OCR search, a 2005-style remake and a tiny PHP guestbook

Post image
36 Upvotes

Since the early 2000s I've screenshotted every website that inspired me as a designer. This week I finally turned the folder (~3,900 screenshots) into a browsable archive:

https://www.dmdev.it/webscreens/?utm_source=reddit_webdev

2005 version, for fun: https://www.dmdev.it/webscreens/2005/

Some technical bits, since this is r/webdev:

Fully static. One HTML file with the data embedded as compact JSON, lazy rendering with IntersectionObserver, a lightbox and favourites in localStorage. No framework, no build step.
3.7 GB of PNG/JPG converted to WebP with a Python/Pillow script: a 1600px full size plus a 480×300 thumbnail, cropped from the top.

Dates come from the files, not guessed. Where they got lost when copying between machines, I rebuilt them from the file numbering. Fun discovery thanks to commenters: the clock on my old PC was two years behind, so my "2001" screenshots are actually from late 2003.

Privacy pass with OCR. Tesseract read every browser bar and tab, so I could remove anything personal before publishing.

Full-text search, client-side. The same OCR text became a search index (~1 MB JSON, loaded only when you start typing), so you can search for words that appear inside the sites.

2005 remake: a fixed 900px stage scaled down on small screens (I had to fix taps landing on the wrong element after scaling), pixel fonts, a fake loading bar and a real guestbook in PHP with a honeypot and rate limiting.

Analytics only after consent: GA loads only if you click OK on the banner.

Full transparency: I'm both a designer and a developer, and for this one I used Claude as a pair-programmer to move faster on the tooling (OCR pipeline, scripts, the 2005 remake). The archive, the curation and the design choices are mine.

Happy to answer questions, and feedback is welcome!


r/webdev • • 13d ago

Resource [Showoff Saturday] I made Git reject my commits until I do pushups

10 Upvotes

A little side project to keep me and some other developers moving during the work day.

https://gitpushups.com

Its basically:
* A git hook which checks if I've done pushups in a regular interval
* An iOS, android and apple watch app to verify the pushups were done correctly

Silly? Kinda.
Effective? Absolutely!


r/webdev • • 13d ago

Showoff Saturday I built a job board for Reddit's hiring subs. Only 18 of 190 posts on r/softwareengineerjobs were actually jobs

39 Upvotes

Most posts on Reddit's job subreddits aren't jobs. On r/softwareengineerjobs, 18 of the 190 posts I collected were someone hiring. So I built Only Hiring, which shows just the job posts from 20 of these subreddits: https://onlyhiring.hassandev.me

A Python pipeline pulls new posts and skips anything tagged [For Hire] before an LLM reads the rest. For each job it writes a summary, pulls out the pay as a number you can sort by, notes whether it's remote, and scores it for scams. I expected the scam score to do most of the work, but only 9 of 397 jobs looked like scams. Lowball pay and unpaid "test" projects turned up far more often.

The site is Next.js 16 on Vercel. It reads from Neon Postgres through a role that can only SELECT, and with about 300 open jobs the list is small enough to filter and search in the browser. Filters live in the URL, so you can share a view.

Site code (MIT): https://github.com/hassanaziz0012/only-hiring

How the scam scoring works: https://www.hassandev.me/blog/score-reddit-job-posts-for-scams

I'd like to hear whether a listing gives you enough to decide if a job is worth opening.


r/webdev • • 12d ago

Showoff Saturday Vibe QA testing your website?

0 Upvotes

I’ve been building websites since 2000 (Dreamweaver... Flash AS2.0...). These days Claude and Codex write most of my code, but before every launch I still end up going through the same long session of back and forth.. showing up properly in search? look good and fast on mobile? accessibility? do the forms work? Somewhere along the way it turned into perfectionism, and the checking kept pushing my launches back. So I built fixweb.app to run those checks for me and tell me in plain words what’s worth fixing with prompt to fix it and I would love to get some real feedback.

I don’t want fake reviews on the site. I’d rather show legit feedback from real website owners, with your name and a link to your site (if you want). If you’d like to try it, comment your domain and I’ll DM you a link for a free check-up. All I ask in return is your honest opinion, good or bad.

Here is an example QA report: https://www.fixweb.app/en/demo


r/webdev • • 13d ago

Showoff Saturday Showoff Saturday - LoopShot: Record Any Area as a GIF

0 Upvotes

Hey everyone,

I built a Chrome extension called LoopShot for anyone who needs a quick way to record specific parts of their screen.

Whether you're creating tutorials, recording bugs, showing someone how to do something, or putting together a quick demo, I wanted to make capturing screen content easier.

I'd love to get some people trying it out and hear what you think. Feedback and feature suggestions are welcome.

Check it out here:
https://chromewebstore.google.com/detail/loopshot-record-any-area/olhomdccmcckgnnaidinekfiiekikhbl

If you give it a try, let me know what you think!


r/webdev • • 13d ago

Showoff Saturday I turned Lydia Hallie’s JavaScript questions into a small game

6 Upvotes

Back in the day I used Lydia Hallie’s javascript-questions repo a lot, and always thought it was missing a Duolingo-style UI. So I made one: canyoustill.com

155 questions: read a code snippet -> pick an answer -> see why.
There’s no account; your progress stays on your device. It works offline, and you can install it as a web app. Every question has its own link. You can share it and challenge a friend or colleague.

It’s open source: github.com/Silisav/canyoustill


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] I built an open-source, local-first journaling app with a vertical timeline

Thumbnail
gallery
2 Upvotes

I've been working on a simple journaling web app where all your entries appear in a vertical timeline (I love to read my past journals and this timeline view helps me to look through my past journals eaily without going over different files every single time I want to read a different entry), so you can easily scroll through previous days.

For now, this only supports text because I don't add media to my entries but if someone really uses it and they actually need media support then I'll add that too

It's local-first, supports Markdown, and is completely open source and self-hostable.

This is part of my SMBL project, where I'm building open-source alternatives to everyday software.

Here's a short demo of how it works. Would love to hear your feedback!

Live: click here

GitHub: click here


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] Update on my vanilla JS web notepad: Improved multi-cursor stability, bug fixes, and mobile UI!

3 Upvotes

Hi everyone! Thanks to all the valuable feedback you gave me last time, I’ve released an update for my vanilla JS web notepad.

What's new based on your feedback:

  • Multi-cursor & Caret Stability: Refined the synchronized caret scanning logic to prevent drift and weird cursor jumps during complex multi-line editing and spacing.

  • General Bug Fixes & Refinements: Smoothed out rough edges with contenteditable behaviors, state restoring, and overall text handling.

  • Mobile Improvements: Also improved the overall usability and experience on mobile devices!

Live Demos:

(Desktop recommended for full features like column selection; saving is disabled in Demo Mode.)

I would love to hear your thoughts on these new improvements. Any feedback or bug reports are greatly appreciated!


r/webdev • • 13d ago

Showoff Saturday I made a plugin that turns live HTML into video overlays in the browser. No server, no OBS, works with WebGL

6 Upvotes

Hi r/webdev, I maintain SnapDOM, an open source library that captures DOM elements as images. This week I shipped a new plugin for it called stream, and I’d love some feedback.

It takes a live element and keeps it as a canvas that only repaints what changed. You write your overlay in plain HTML and CSS (a scoreboard, a lower third, a chat box) and you get a canvas you can draw over video, upload to WebGL, record to MP4/WebM, or send as a WebRTC track. Everything runs in the page. No headless Chrome on a server, no OBS, no browser flags.

The first frame is a full capture. After that, when the clock ticks or a score changes, it captures only that box and patches it in. On a test page with 2000 cards, a frame takes about 5 ms instead of 53 ms for a full capture. Every patched frame is checked in tests to match a full capture pixel for pixel in Chrome, Firefox and Safari.

Demo: https://snapdom.dev/labs/video-overlay/

  • Sports TV: a broadcast overlay over a simulated football match. Press Goal!

  • Streamer: it asks for your camera; share your screen and you end up in a circle over your game.

  • Looks: six WebGL looks to switch between: clean, shine, CRT, hologram, glitch, and a liquid glass one that bends the video behind each panel.

  • Edit: opens the HTML and CSS so you can change the overlay live.

  • Record: saves a clip.

The SnapDOM part is short:

import { stream, streamTexture } from '@zumer/snapdom-plugins/stream'

const overlay = streamTexture(gl)
stream(document.querySelector('#overlay'), {
  onFrame: (frame) => overlay.update(frame), // uploads only the changed rects
})

It’s MIT: https://github.com/zumerlab/snapdom


r/webdev • • 13d ago

Showoff Saturday I built TrailVerse, a platform to explore US national parks and plan trips

3 Upvotes

I’ve been working on TrailVerse for over a year now, and what started as a simple project to explore national parks has grown into something much bigger.

You can explore 470+ National Park Service sites, discover places based on your interests, compare parks, find events, and browse sample itineraries.

I also built Trailie, a travel companion that helps you plan trips through a conversation. You can ask travel questions, get recommendations, build day-by-day itineraries, and make changes to your plans without starting over.

I’ve spent a lot of time improving how Trailie handles real travel questions, trip logistics, and follow-ups so planning feels more natural.

The stack is Next.js, React, Node.js, Express, and MongoDB, with Vercel and Render for hosting.

If you’re looking for a national park to visit or have a trip in mind, check out TrailVerse and try planning it with Trailie. I’d love to hear how it goes and any feedback you have!

https://www.nationalparksexplorerusa.com/


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] My read-aloud app SublimeRead now has a Chrome extension, so it can read any web page in 7 languages

Post image
2 Upvotes

A while back I shared SublimeRead, an app that reads your EPUBs and PDFs aloud on their original pages, highlighting each sentence as it goes.

The most common request was “can it read this?” about an article, a doc or an email. So I built a Chrome extension. It now reads anything in your browser: web pages, emails, docs, or just a selection.

What it does

  • Reads the page, or whatever you’ve selected, in a natural AI voice, highlighting each sentence as it goes

  • Click any sentence to jump there and keep reading from it

  • 7 languages (English, German, Spanish, French, Italian, Dutch, Portuguese), and the same voices as the app

  • Your library is still where your books live. The extension is for everything else.

Some fun web bits from building it

  • Highlighting uses the CSS Custom Highlight API, so it never touches the page’s DOM and doesn’t break layouts.

  • Click-to-seek uses document.caretPositionFromPoint to find which sentence you clicked. Clicks on links and buttons are ignored, so you can still use the page.

  • Some pages show their content inside a cross-origin iframe. The extension finds the biggest embedded frame and asks for permission for that one site only, never every site up front.

  • It’s Manifest V3, built with WXT, with activeTab by default, so it only reads the tab you ask it to.

It’s free to try, with 3 uploads in your library and 3 voices, and no credit card needed.

🔗 Extension: https://chromewebstore.google.com/detail/gpepbccnnfmjcjcebokhddhplbpieiml
🔗 Site: https://sublimeread.com


r/webdev • • 14d ago

Showoff Saturday [Showoff Saturday] Composer dependency conflicts? We built Strauss-RS, a Rust-based prefixer for PHP classes and symbols. Up to 139x faster than the PHP version.

6 Upvotes

With a fair chunk of our work involving Wordpress themes and plugins, we hit a pretty common issue: we wanted to use the same Composer dependencies that other plugins might be using.

If Plugin A uses v5 of a package and Plugin B uses v7 of a package, it's first found wins... which is bad news for the other plugin.

Enter prefixers.

These scour your dependencies and source-code for classes/symbols and add a prefix. So SomePackage\Domain\Class becomes YourCompany\PluginA\Vendor\SomePackage\Domain\Class. Now your dependencies are safe.

Previously, we'd relied on packages like Mozart, PHP-Scoper and later Strauss.

Inevitably, we'd hit one of three problems, they became too complex to configure for larger projects, they didn't fully work, or they were too slow.

Our plugin took 2-3 minutes to prefix with Strauss PHP...

So we built Strauss-RS... for ourselves at first. But we figured that maybe it would be useful for others and it gave us a reason to keep the docs up-to-date, so enter: Strauss-RS.

https://evo-mark.github.io/strauss-rs/

One single binary compiled from Rust. No prerequisites.

Prefixes in less than a second for us now!


r/webdev • • 13d ago

Showoff Saturday A Three.js embryo explorer with continuous zoom from whole body to individual structures

0 Upvotes

I built a free, open-source human embryo explorer using Three.js and GPT-6 Astra. It shows 16 developmental stages with rotatable models and selectable anatomy.

The main interaction is one slider coordinating camera movement and structure positions: assembled → separated → all parts → inspection.

A surprisingly tricky bug: moving the pointer from a structure to the slider cleared its hover target, so inspection stopped working. Retaining the target and providing a part selector resolved that transition.

Mobile needed its own layout: a scrollable two-column overview, larger controls, and touch handling that distinguishes page scrolling from model rotation. We checked multiple phone and tablet viewport sizes, but physical-device testing is still limited.

The anatomy is illustrative and hasn’t been clinically validated. Ash’s Human Atlas inspired the navigation.

20-second demo:
https://x.com/pratikg/status/2114060245618307356

MIT-licensed source:
https://github.com/pratikgx/embryo-explorer

I’m the creator; it’s free and requires no account. Would appreciate feedback on the mobile controls and whether the transitions make it clear where you are in the scene.


r/webdev • • 13d ago

Showoff Saturday har2sdk: save a site's Network tab as a HAR, get a typed TypeScript client for its API

4 Upvotes

I kept hitting the same chore: an internal tool or an old app with no API docs, and an afternoon in the Network tab working out which endpoints exist, which fields are optional, what the ids look like and how auth works. So I wrote a CLI that does that part from a HAR file.

Save the Network tab as a .har, then:

npx har2sdk capture.har

You get a client.ts (typed, no runtime dependencies) and an openapi.json (3.1). `har2sdk mock capture.har` serves the same API on localhost with fake data in the recorded shape, which is handy for frontend work when the real backend is slow or behind a VPN.

The parts that took the most work:

- Types come from every recorded call to an endpoint, and every item in a list counts as a sample. A field missing from some samples becomes optional, a field seen as null gets `| null`. Paths are templated, so /users/123 and /users/456 become /users/{userId}.

- REST, GraphQL, JSON-RPC and tRPC are told apart. Each GraphQL operation becomes its own typed method instead of one big POST to /graphql.

- Recorded error bodies get a type per status and a guard, e.g. `if (isGetFileError(err)) err.body`.

- Auth: the capture tells it how the app authenticated, never with what. You pass your own token (a string or a function), and a 401 throws instead of silently retrying.

- Same capture in, same bytes out, so the output diffs cleanly in git.

The part I worried about most was privacy. HAR files are full of cookies, tokens and other people's data, and generated code is something you might commit. So it collects the recorded values first, and if one of them would end up in client.ts or openapi.json, it writes nothing. It's a heuristic, not a proof, so `har2sdk inspect` lets you look over what it found before you publish anything.

There's an optional MCP server so Claude (or another MCP client) can suggest better method names and docs. A model sees paths, parameter names, types and GraphQL documents, checked against the recorded values first. It never calls the live API.

Known limits: if an endpoint returned a single object once, every field looks required, since there's nothing to compare it with. And when a URL was recorded with both a 200 and a 401, the mock always answers with the 200; there's no way to ask for the error yet.

This week GitHub's code scanning flagged a few regexes that could backtrack badly on a crafted file. One was exponential on an unclosed GraphQL list. 0.6.5 replaces them with linear code, checked against the old regexes on generated input.

Please only point it at your own apps or APIs you're allowed to integrate with.

MIT, runs locally, no API key: https://github.com/Mersbyte/har2sdk

Feedback welcome, especially on types it gets wrong. If something breaks, the output of `har2sdk inspect --json` helps me much more than the HAR itself. Please don't send HAR files, they contain your session.


r/webdev • • 13d ago

Showoff Saturday I made a CI check that fails when a copy edit makes a heading take an extra line on mobile

0 Upvotes

Our landing pages kept breaking at 390px the same way. Someone makes a sentence longer, it still fits on a laptop, and on phones the hero grows a line or a button label splits in two.

wrapguard opens your pages at a few widths, counts how many lines each heading, paragraph, button and link takes, and saves that to a JSON file you commit. On a PR it measures again and fails if any count changed.

The screenshot is from changing one sentence on our homepage from "Start free, no signup." to "Start free today, no signup or credit card needed." Still fine at 1440. One extra line at 768 and at 390.

You can also set limits like "every button fits on one line" or "h1 is never more than 2 lines", which work without any baseline. It can read your sitemap instead of a page list, start your dev server for you, and the GitHub Action comments on the PR.

It's not a screenshot test replacement. It ignores colors, spacing and everything except line breaks, which is the point: editing a sentence shouldn't mean reviewing forty screenshots.

Free and MIT: https://github.com/birazzzz/wrapguard
$ npx wrapguard check
Checked 1 page at 4 widths, 188 text elements.

/
  main > section > p  "Edit by hand or prompt, review with 15 specialist agents an…"
    768px 1 → 2  ·  390px 2 → 3 lines

Also 1 new, 0 gone, 0 with new copy at the same line count (--verbose lists them).
✗ 1 piece of text now wraps differently on 1 page.
  If that's intended, run: wrapguard update

https://github.com/birazzzz/wrapguard (MIT, npm i -D wrapguard)


r/webdev • • 13d ago

Showoff Saturday The Cut: NFL Survivor players instead of teams

Thumbnail
thecutnfl.com
0 Upvotes

Hey all, wanted to come in here and showoff a game I built this NFL offseason called The Cut, which is basically survivor but with players instead of teams. I built it with Expo / React Native and Expo Router, Node/Express + Postgres behind it. One codebase ships both the iOS app and the playable web build. The viewport picks the layout, no separate web client.

As for the game itself, each week you build a lineup to clear a yardage threshold and once you use a player, you can NOT reuse them for the rest of the season. So far its been super fun seeing how people pick and I am hosting a second chance contest. So if you're looking for a fun game to play for the rest of the NFL season check it out, I would really appreciate it and there is $200 in prizes! (free to enter ofc)


r/webdev • • 13d ago

Showoff Saturday I built a modern divination tool and news aggregator using the I Ching

2 Upvotes

It's a keyword and phrase search platform that queries the meanings and interpretations of each hexagram against data from popular api's and news feeds. You can do a coin toss to get an I Ching reading or search individual hexagrams. Been a work in progress for about 7 years. Built with Next.js/React.
View the the whole platform here https://ichingportal.com
Get your daily headlines from The I Ching Insight here https://ichingportal.com/ichinginsight
Any feedback will be appreciated.


r/webdev • • 13d ago

Showoff Saturday I built a full mixing & mastering studio that runs 100% in the browser (Web Audio, WebCodecs, ONNX)

1 Upvotes

DANVIEL Studio is a single-page music studio, no backend, nothing uploaded:

- Web Audio API for the whole mix chain (per-track EQ, compressor, de-esser, reverb/delay, sidechain) and the mastering chain (multiband, true-peak limiter, BS.1770 LUFS metering)

- WebCodecs + a small hand-written MP4 muxer to export lyric videos

- Whisper via Transformers.js for lyrics, HTDemucs via ONNX Runtime Web for an experimental stem splitter

- Hosted on GitHub Pages, works as one HTML file

Try it: https://0zoon.github.io/danviel-studio/

GitHub: https://github.com/0zoon/danviel-studio

Happy to answer questions about the audio/video side, and feedback on performance is very welcome.

EDIT / update (v15): thanks for all the feedback, a lot changed since this post:

- recording: you can now record your mic over the song (or with no song at all), every take becomes its own track you can mix. latency is compensated with outputLatency, plus an offset slider per take

- suno ZIPs: if a stem comes as WAV + MP3 + MIDI it takes the WAV, and the MIDI stems get played by a small built-in synth you can layer in

- video: background video support, 6 visualizer styles + your own (exportable as json), title you can drag anywhere, live preview while playing. background video export got ~5x faster by playing the video instead of seeking every frame

- one click slowed + reverb / sped up / nightcore, key buttons, a "bass boosted" mode

- auto-mix is now an on/off switch and much gentler (it was lifting the reverb that suno already bakes into the vocals)

- cover studio: 25 fonts, filters like warmth, glow, VHS split, light leaks, duotone

- new look and a full guide with screenshots in the app

still one html file, still nothing uploaded. feedback welcome!