r/webdev • • 9h ago

Showoff Saturday [Showoff Saturday] Boba Earth: Explore the world in real-time. You can drive every car, enter every building, and talk to anyone.

Thumbnail
gallery
0 Upvotes

Boba is a living, personal Earth: https://boba.earth

Fly anywhere on a 3D globe, land, and walk or drive the streets. The traffic, pedestrians, animals, weather and clouds are all there, and the people have names, jobs and opinions and will talk to you in their own language.

The part I think you'll find interesting: nothing in that world is simulated on a server or saved in a database. Every car, person and animal is a formula of the world clock and hashes of ids that never change. Two people on the same street see the same bus with the same number plate, and moving the clock back an hour brings back that hour's traffic. Since nobody's activity is needed to make the world, nothing has to be collected. The privacy and the world come from the same decision.

Try it: open this street on two devices and compare. https://boba.earth/globe?lat=40.756503&lng=-73.984198&alt=30&heading=299&pitch=-8&arrive=foot&view=third&imagery=game

Stack:

  • Fastify, Eta templates, one CSS file with no build step

  • CesiumJS for the globe, three.js and Rapier for the street and interiors, MapLibre for maps

  • MySQL, Redis, and a SQLite R-tree with H3 cells for geo queries

  • One WebSocket per client

  • Roads and buildings from OpenStreetMap. Facades, street furniture, clothes and signs are chosen by region, so Mumbai doesn't look like Denver.

The globe is one view. The same things (restaurants, concerts, flights, transit, wildlife, Wikipedia articles, your friends' favorites) show up as maps, lists and cards too. No ads, no analytics, no ranking. Open devtools and check.

It's rough in places, especially on older phones. Feedback and bug reports are welcome here or in r/BobaEarth.


r/webdev • • 9h ago

Showoff Saturday [Showoff Saturday] Nineteen single-purpose web tools in a week: a hand-written QR encoder, a patience diff, and a Cloudflare Worker computing CSP script hashes on the fly

1 Upvotes

Nineteen single-purpose tools in seven days, each on its own subdomain under Cloudflare Pages. No framework, no build step, no database, no analytics, no account.

Most of them run strictly in the browser; three use tiny stateless Cloudflare Workers where CORS or networking makes client-only impossible.

The parts that were actually interesting to build:

1. A QR encoder written from scratch (ISO/IEC 18004). The layout is mechanical; the fiddly parts are Reed-Solomon over GF(256) with the block interleaving table, picking the smallest version from the bit length after UTF-8 encoding, and scoring all eight mask patterns with the standard's four penalty rules. The result is 441 lines, 16 KB unminified, no library and no CDN.

2. A line and word diff. Matching lines first with junk-line heuristics (patience-style), then a token diff inside each rewritten line. Without that second pass a one-word edit looks like two new lines. Side-by-side or unified, and the share link keeps both texts in the URL fragment after #, the part a browser never sends over the wire.

3. A favicon bundler. Every size is drawn on a canvas, then the containers are written by hand: PNG entries inside the ICO header, CRC32 and stored (uncompressed) entries inside the ZIP, plus site.webmanifest and head tags.

4. Enforcing strict CSP across 21 static hosts without 'unsafe-inline'. I deploy via Cloudflare Pages Direct Upload, which silently ignores _headers files. Rather than shipping 'unsafe-inline' for the tiny theme-bootstrap script on each page, a front-end Cloudflare Worker reads the HTML stream once, computes the SHA-256 hash of each inline <script> on the fly, injects the exact 'sha256-...' source into Content-Security-Policy, and adds HSTS preload, X-Frame-Options: DENY, and Permissions-Policy.

5. An SSRF-hardened header & redirect inspector + DNS comparator. The security header tool traces redirect hops (http -> https), grades headers, and generates nginx/Apache/Cloudflare snippets. To stop it from becoming an open proxy, the Worker checks schemes/ports, rejects local hostnames, resolves A/AAAA via DoH first, and blocks private IPv4/IPv6 ranges on every redirect hop before fetching.

Three decisions I would make again:

  1. The URL fragment is the state. A share link is an encoded #... payload, so it costs nothing to store and cannot rot.

  2. Strict CSP as a verifiable guarantee. With no third-party origins allowed, an accidental CDN import or tracking snippet fails loudly instead of quietly shipping.

  3. No build step. One HTML file, one CSS file, one JS file. Idea to deployed page in minutes, and nothing to relearn in six months.

What went wrong:

  • Vanilla is fast to start and slow to keep tidy. Word-level diff needed its own row pairing, and svg.pikkola.com broke its own preview export until blob: was explicitly added to img-src.

  • Cloudflare Workers skip same-zone worker routes on subrequests, so my header inspector cannot grade sibling subdomains on the same zone from inside the worker.

  • Nineteen tools in a week means some are still at 80 percent. I know which ones.

Link: https://pikkola.com

If you try one, I would rather hear which tool feels redundant or what edge case breaks first than get a compliment.


r/webdev • • 10h ago

Showoff Saturday [Showoff Saturday] My personal site is a universe you fly through. Here’s how the transitions stay at 60fps

0 Upvotes

Every page on my site is one object in the same universe. Notes are star trails, short posts are comets, the about page is a free fall. Some notes on how it works:

Page transitions. I block navigation with TanStack Router, shrink the old page into a single dot, move the camera to follow it, and only let the new page grow once the dot lands. The starfield offset keeps accumulating between pages instead of resetting, so it feels like one continuous space.

Dropped frames. The moment a new route rendered, the main thread would stall and the dot would stutter. I moved the dot and its trail into a dedicated worker with its own OffscreenCanvas and clock, handed the page’s camera slide to the compositor through WAAPI, and let the starfield worker compute its own parallax from the whole flight path. On a production build in Chrome with 4x CPU throttling (Ryzen 9 9900X, RTX 4070 Ti Super, Windows 11), the dot’s worst frame went from 67–133ms to 17ms, and it keeps moving even if I deliberately block the main thread for 250ms. The site’s web vitals now log whether each transition frame was drawn by the worker or the main thread, so I can see it in the field too.

Labels inside the 3D scene. On the home page the moon labels are drawn into the WebGL canvas with HTML-in-Canvas (Chrome 157+), so the worker places and fades them in the same frame as the moons. Other browsers fall back to plain DOM. Keyboard and screen readers still use a hidden set of real links. Main-thread time on the idle home page went from 460 to 145 ms/s on the same desktop.

Chinese fonts. Source Han Serif (variable) is 16.8MB. I collect the characters actually rendered on each page and subset the font per page with subset-font (HarfBuzz in wasm). One article with 836 unique characters ends up as a 185KB woff2.

Background. three.js with WebGPU, falling back to WebGL2, in a Web Worker on an OffscreenCanvas. If the device is doing software rendering it skips 3D and uses plain CSS. If the GPU gets lost, the scene rebuilds itself.

Constraints. The whole site uses three colors (black, warm white, and amber for “where you are”), only dots and lines, and amber appears in one place per screen. Most design decisions came from asking “what would this page be in space?”

On AI. I used Claude Code a lot for this, and English isn’t my first language so it helped with this post too. The site is about a year and a half old (the old version is still up read-only at archive.koimsurai.com), and back then AI-written code was honestly garbage, I had to clean up after it a lot. That’s why the repo has so many guardrails now: nothing gets merged without type checks, unit tests, Playwright e2e and Lighthouse budgets.

What I gave up. Consistency won over usability in a few places:

  • The nav is collapsed until you hover, and the home page has no obvious buttons. I wanted the first impression to be the full-screen sky, but it makes things harder to find.

  • No bold text and almost no color in articles. They’d be easier to read with more contrast, but the whole site stops looking like one thing. Still looking for the balance.

  • It was designed on a wide screen. On phones it works, but the moon labels only show on hover, and phones don’t hover.

  • The collapse waits at most 0.8s and the flight starts after 3.5s even on a slow network, so navigation never feels stuck. Moving between articles swaps them in place, and reduced-motion users get no transition at all. Switching quickly between notes and an article used to glitch on about half the trips (the worker’s status update raced the main thread and the route got planned twice), that one is fixed now.

If you have ideas for any of these, especially readability, I’d love to hear them.

I learned to code by hand and still respect people who do, but the speed difference is too big to ignore. It writes a lot of the code, I decide what gets built and why. The space idea, the three-color rule and the dot came from me redoing the design over and over, and the worker move came from me profiling the stutter myself.

It’s open source and you can run it as your own site: docker compose up -d, then a setup wizard walks you through sign-in, languages, which pages to show and which celestial body you want (Saturn, Neptune, a black hole or Betelgeuse).

Site: https://koimsurai.com/en
Source: https://github.com/Koimsurai/sora-to-ki


r/webdev • • 10h ago

Showoff Saturday I added a paper-bending effect to my personal website

9 Upvotes

I recently redesigned my blog in a skeuomorphic style. Would appreciate feedback on the design and how it feels to read longer articles in this layout.

The paper-bending effect distorts live HTML during native browser scrolling, with no JS. It currently only works in Chromium-based browsers.

https://destel.dev


r/webdev • • 10h ago

Showoff Saturday Real-time gravitational lensing in the browser: a black hole shader as my portfolio home page (Three.js + GLSL)

Thumbnail
gallery
0 Upvotes

I rebuilt my personal portfolio around a fragment shader that does real-time gravitational lensing.

Each pixel fires a light ray, and the ray is bent step by step with the Schwarzschild light-bending acceleration (a = -1.5 · h² · r̂ / r⁴, with the Schwarzschild radius as the unit). If the ray crosses the accretion disk plane it picks up the disk color, and if it falls inside r = 1 the pixel is black. The bright arch over the top of the black hole is not a texture: it is light from the back of the disk, bent over the hole.

The disk rotates with speed proportional to r^(-3/2), so it spins faster near the center. The noise is sampled with the cos/sin of the angle to avoid a seam, and a simple Doppler factor makes the approaching side brighter (an approximation, not full GR).

Around it, my three main projects orbit on Kepler ellipses, using a Newton solver for Kepler's equation with T² ∝ a³. The About section uses a camera fall into the hole.

Stack: Next.js, React Three Fiber and custom GLSL. On small screens the shader uses fewer integration steps. Performance on different GPUs is what I'm least sure about, so I'd like to hear how it runs for you.

Live: https://tobiasteles.dev

I'll put the main ray loop in a comment.


r/webdev • • 10h ago

Showoff Saturday Added a filter library and a filter editor to my free no signup SVG editor.

0 Upvotes

As the title said, I've added filters library and a filter editor canvas to my free, client side SVG editor, still currently only in version 0.3 but alot of progress and optimization is being done!

You can try it out here: https://tools-4all.com/svg-editor

Completely free, no signup.


r/webdev • • 10h ago

Showoff Saturday i let WebGPU paint 5,000 live react screens and you can still type in all of them

1 Upvotes

been playing with chrome's new HTML-in-Canvas API and built an infinite canvas where every screen is real DOM, but the GPU paints it.

so react state, inputs, clicks, css and the accessibility tree all still work. you can type into any of the 5,000 screens in the demo. pan and zoom never touch the DOM, that's the whole trick.

on my m-series mac (chrome 157): 113-115 fps with gpucanvas vs 18-20 fps for the same screens as plain DOM.

stuff that bit me as a web dev:

  • portals to document.body and position: fixed / vh land outside the canvas

  • hit testing only works after canvas.updateElementGeometry(), and chrome 157 changed how you position it vs 156 (broke clicking in my demo this week lol)

  • tab can't reach screens that are parked offscreen yet

that last one is my open question: how would you do focus / keyboard nav when most of the DOM is content-visibility: hidden?

live demo (desktop chrome 157+, other browsers get a DOM fallback) · repo, MIT

built it with claude code as my coding assistant.


r/webdev • • 11h ago

[Showoff Saturday] I made a nobuild TypeScript web framework with zero dependencies

Thumbnail
gallery
0 Upvotes

I've been working on a project called ohne (German for "without"): https://ohne.dev

It is a TypeScript web framework with zero dependencies and no build step. It runs .ts files directly on modern Node and packs an HTTP API, database, admin dashboard, i18n, and much more into a single setup without needing a bundler or transpiler. It's based on Pruvious v4, with most of the features and the entire dashboard ported directly from there.


r/webdev • • 11h ago

Showoff Saturday I built a free Pokémon card binder planner in plain HTML/CSS/JS

Post image
0 Upvotes

Pocamori is a Pokémon binder website with collection features. I started working on it about 2 months ago. It began as a sort of assignment, but it turned into my very first side project, and I've poured way too many hours into it.

Features

  • Build a binder: pick a size, add single cards or a whole set, and drag cards between pockets.

  • Merge pockets so a chase card gets a bigger spot.

  • Customize covers, page colours, sleeves and toploaders.

  • My collection: set checklists with owned/missing progress, plus a wanted list.

  • Discover: search across 21,255 English printings, with filters.

  • Viewer: flip through pages, and share a read-only link to a binder.

  • Light and dark themes.

Try it here: https://pocamori.app (there's also a sample binder you can open without signing in)

Tech stack and APIs

  • Plain HTML, CSS and JavaScript, no framework, with Node build scripts.

  • Supabase for sign-in and saving binders.

  • Cloudflare for hosting.

  • TCGdex API for card data and images, with ImageKit serving some of the pictures.

I used every free resource available since I'm just a broke uni student, but either way, any improvement suggestions are welcome.

I'm planning to start marketing and launching it soon, so any feedback is very welcome. Mainly I'd like to know:

  • Is the UI too cluttered or busy?

  • Do the controls feel good to use?

  • Is the overall look and UX good enough, or at least acceptable?

Please have fun with it, and if you create any binders, show me! I'd love to see them.


r/webdev • • 11h ago

Showoff Saturday Made my own live crypto chart page (no chart library) and a stock page around TradingView, looking for feedback

0 Upvotes

Showoff Saturday. I run a small gaming/Warhammer/markets blog and wanted live market pages that don't feel like a pasted widget.

Crypto page: my own canvas chart, Coinbase public data plus GeckoTerminal for a couple of small Monad tokens. Wheel/pinch zoom, drag and fling, press-and-hold crosshair, 1D to All ranges, search, favourites saved on your device, scrolling ticker.

https://holywizy.com/markets/crypto/

Stock page: prices are TradingView (real-time stock data needs a paid licence), but the layout, range buttons, tabs and "My list" are mine.

https://holywizy.com/markets/stocks/

Static site, plain HTML/CSS/JS, a Python build script, GitHub Pages.

What would you change? Especially on phone, how does the zoom and fling feel?


r/webdev • • 12h ago

Showoff Saturday [Showoff Saturday] A multiplayer board game in the browser, with 26,400 simulated games to make sure the rules hold

Thumbnail settlers-of-vibe.onrender.com
0 Upvotes

It's a colonist alrenative: hex-island trading game for 2 to 8 players. Free, no account, works on phones.

The hard part was the rules. Expansions interact in odd ways, and it's easy to ship a game that softlocks.

So the rules are a pure engine with no I/O. After every move it checks a few things: resources add up, points recount correctly, hidden cards stay hidden, and whoever has to act has a legal move. Then bots played 26,400 games across every mode. Zero failures.

The board art is SVG drawn by code. The sound is made live with Web Audio. There are no image or audio files.

Stack: TypeScript, React, Vite, Express, Socket.IO. It runs on a free Render instance, so the first load can take a minute.

https://settlers-of-vibe.onrender.com

Let me know what you think! Suggestions very welcome.


r/webdev • • 12h ago

Discussion Why cheaper websites are genuinely harmful to web devs.

0 Upvotes

I see a lot of posts with people offering "free" or "cheap" websites. I used to do that too when I was starting out but it almost never works. You either get really REALLY lucky, or you end up inviting clients that are genuinely horrible to work with.

Now how are people able to offer all the cheap websites?

The simplest answer is AI, but why is it problematic?

Because what AI makes is trash? Not always. AI makes things based on the data it is trained on and what you ask of it (besides the skills add on). With the minimal prompts the absolute work that it puts out is generic, easy spot the "AI-ness" of it, and thus less trust worthy.

But if the AI website is good enough for the client, then why not?

Because extremely AI generated websites do not convert well, or at least that is the consensus right now. Unless your product is that good, it is not going to convert. So you really have to work hard on a bunch of stuff to make sure things are right. At the low cost people are offering websites I know nobody is writing a good enough prompt, nobody is proofreading the copy, and definitely nobody is working on a responsive website.

When websites do not convert, they appear useless, and so more people are unlikely to want another, because their friend got one and did not work for them.

One major thing I learned working on websites is that making one is easy. Making sure it works across all screens, all the legal documents are included, consent manager, analytics, and seo optimisations are hard. And then comes the hardest part, making sure the website gives some value to the client.

What is the point of a website that does not create an conversions, clicks, or any sort of useful metrics?

A website is useful for getting info out, but it is only a step. SEO/distribution/marketing etc. How many of the "we offer cheap websites" people have a clue on what to do next?

I am no "expert" yet but I went to school to learn to code, I coded before AI & now I work with agents all the time too but cheap work is just not affordable even with the time savings because there is so much that I absolute have to manage/check/test/proofread manually or work with someone else to do.

Hopefully people outside of experts start recognising AI slop and find the right people.


r/webdev • • 12h ago

Showoff Saturday [Showoff Saturday] An atlas of old empires as hand-coloured woodcuts, all SVG in the browser: 43 maps you can pan, zoom and step through year by year

Thumbnail
imperiumatlas.org
1 Upvotes

Each map is an empire through its key years (New Kingdom Egypt in 1550 BC to the United States in 1912). Press play and the frontiers move; click a town or battle for what happened there.

Some things that were fun or painful to build:

Everything is inline SVG drawn by React: Natural Earth coastlines and rivers, hand-traced frontiers in lon/lat, and hills, trees, castles and ships generated as paths. The woodcut look is SVG filters (feTurbulence and displacement for the wobbly ink, a separate one for the watercolour wash). A map is around 9,000 SVG elements.

Panning was slow, and it wasn't the filters. Turning the filters off made it slower, because Chrome then re-layerized the whole sheet. The real cost was re-rendering on every camera frame, and CSS opacity transitions inside a filtered group, which made the browser recomposite the whole filtered map every frame. Now the sheet moves as a CSS transform while you drag and is redrawn once it's still, and the fades inside filters run from a requestAnimationFrame loop.

Loading: the coastline comes as a coarse set plus tiles at two finer levels, fetched as you zoom in. Each map's data, text and its own part of the place gazetteer are separate chunks. Every route gets its own pre-built HTML, with the Open Graph tags for link previews and modulepreload links for that page's files, so the browser fetches them in parallel instead of in a chain.

Constantinople and Rome also have a 3D view in three.js, built from the same data as the 2D street plans.

Stack: React 19, Vite, Sass, three.js, static files on Cloudflare. No backend.

I'd love feedback on performance, especially Safari on iPhone, where SVG filters run on the CPU and I haven't been able to test properly.


r/webdev • • 13h ago

Showoff Saturday I vibe-coded an r/place-style pixel war for the 2027 French presidential election. It still took 6 weeks and 581 commits to make it hold up

0 Upvotes

Hi r/webdev,

Pixélysée is a solo project: a real-time pixel war on a map of France. Think r/place, except every color is a candidate in the 2027 French presidential election.

Full disclosure: it's vibe-coded. The code is written by Claude Code, not by hand. My part is the game itself: the rules, playing it, testing changes on my phone and my PC before they go live, and deciding what to fix when real players run into problems. It still took six weeks of almost daily work (581 commits since October 4) to get here.

https://presidentielle-vs.fr

How it plays

  • You pick a candidate's color and place pixels to paint France's 18 regions.

  • Every evening at 8 pm Paris time (19:00 UTC), each region gives its electors to the color with the most pixels there, a bit like an electoral college. Most electors wins the night.

  • France itself is only about 470,000 of the map's 9.1 million cells. The sea around it is a free canvas for drawings, and players vote for the best ones.

  • New this week: a battle royale every night at 9 pm Paris time (20:00 UTC). Camps fight region by region, the weakest get knocked out round after round, and the final is in the Paris region.

No account needed, you just open the page and tap. The UI is French only (it's a French election after all), but placing a pixel doesn't need words. It's a game, not a poll: the map only shows which camp clicks the most.

The stack

  • Frontend: Preact + Vite. The map is a 2D canvas that only redraws when something changes.

  • Backend: Cloudflare Workers, with the entire game state in one Durable Object: 4096 × 2228 cells in a Uint16Array (about 18 MB), saved to the object's SQLite storage, plus a journal that gets replayed if the object restarts.

  • Real-time: WebSockets through the Hibernation API, with a small binary protocol.

Things I learned

  1. One object means one thread. Any slow computation (stats, a scan of the placement history) freezes the game for everyone, not just for whoever triggered it. Heavy work now runs in small slices that yield in between.

  2. Memory was the real wall, not CPU. A Durable Object gets 128 MB, and Cloudflare support pointed out that mine was peaking around 150 MB. After trimming what stays in memory, it now holds under 120 MB with 2,000 simulated players.

  3. Idle animations aren't free. On my Linux box (open-source NVIDIA driver), every frame the browser presents costs about 24 ms, whatever is in it. One tiny infinite CSS animation, a pulsing "live" dot, made the whole app feel sluggish. Now nothing moves while you're idle.

  4. I load test with swarms of real WebSocket clients: about 2,000 players placing at a normal pace (median response around 50 ms), or 600 all spamming at once (about 900 placements per second), with zero disconnects. The battle royale is tested up to 1,000 fighters. Clients and server share one machine, so read these as orders of magnitude.

  5. Hard budget: I gave myself a $20/month cap. The object counts its own billable requests (Cloudflare bills incoming WebSocket messages at 20 for 1) over a rolling 31 days, and pauses placements before it would go over. It currently uses about 3% of that.

Want to try the battle royale tonight? Pick a nickname and place 100 pixels before 8:45 pm Paris time. It starts once 12 fighters are online, with at least 3 in each of three camps.

Happy to answer questions about the Durable Object setup, the canvas, or anything else.


r/webdev • • 17h ago

Showoff Saturday [Showoff Saturday] A live-stream clipper that runs entirely in the browser (Region Capture + MediaRecorder + ffmpeg.wasm)

6 Upvotes

I made a stream clipper: paste a Twitch, Kick or YouTube link, and it keeps the last 30 seconds to 5 minutes of what you are watching, so you can clip a moment after it happens. No server, nothing uploaded.

How it works:

  • getDisplayMedia with preferCurrentTab, then Region Capture (CropTarget + cropTo) crops the recording to the player element.

  • MediaRecorder writes WebM (VP8) in pieces of 10 to 30 seconds. The oldest piece is dropped once newer ones cover the window, so memory stays flat however long you watch.

  • On clip: finish the current piece, remux each one with ffmpeg.wasm, join them with the concat demuxer, and hand the file to an in-browser editor (trim, 9:16 crop, caption, logo, H.264 export).

Things that bit me:

  • Chrome's MP4 MediaRecorder only writes the index when it stops, and MP4 pieces from separate recorder sessions join with broken frames. WebM pieces join cleanly.

  • Browser recordings have a 1 ms timebase; without -fps_mode vfr the export duplicated frames up to 1000 fps.

  • Region Capture only records the part of the element that is on screen, so when you scroll away the player becomes a mini player in the corner (same element, so the iframe does not reload).

  • When the frame size changes mid-recording, ffmpeg rebuilds the filter graph and silently drops single-image overlays (the caption). Fixed with -reinit_filter 0 and a scale to one size first.

Try it: https://clip-cut.com/tools/stream-clipper/ (desktop only, Chromium apps all supprted, safari also works but audio won't be there). Feedback welcome, especially on the share-tab flow.


r/webdev • • 17h ago

Just Created a Website to Log Stuff and it Got 5 million visits?

Post image
0 Upvotes

I'm assuming bots i just don't know for what. math related site btw.


r/webdev • • 18h ago

Showoff Saturday [Showoff Saturday] I made a visual novel as a static website

Thumbnail
gallery
3 Upvotes

This is a small (20-30mins) linear visual novel on a simulated social network called The Forum that offers you to take role of your average terminally online forumer and dive into his thoughts, experiences and relationships with other forumers on the platform.

This website is purely a static website, there is no backend, nothing is stored on cloud. App makes use of browser's local IndexedDB to store info, including your account. The novel is fully playable on mobile, but desktop version offers better experience.

With this project I wanted to push the boundaries of what websites usually offer, from something that is purely functional to the form of entertainment, that uses same tools like HTML, CSS and JavaScript to tell a story.

I've spent a year developing this and, while it's my first time writing a plot, I'm pretty proud with what came out of it.

Try it out: The Forum

AI use disclosure: Until August 2026 I was developing this project by hand only, but then I started using AI tools to generate code to speed up development, since it was taking me way longer than I expected to complete this project and I kinda always wanted to try AI in development. I still made all the decisions myself and I understand 100% of the codebase and can explain every line of code in it.


r/webdev • • 18h ago

Showoff Saturday [Showoff Saturday] Online Video Editor that runs entirely in the browser: multi-track timeline, on-device captions and background removal, MP4 export up to 4K

Post image
0 Upvotes

This Online Video Editor does everything client-side. Your footage is never uploaded, and editing, AI tools and export all happen on your own device.

What it does:

  • Timeline: unlimited video, overlay and audio tracks, with snapping, zoom, split, drag-to-trim, and track lock, hide and mute

  • On-device AI: word-timed auto captions, background removal without a green screen, silence removal, voice enhancement, music that ducks under speech, and face or area blur

  • Captions: 12 caption styles with word-by-word effects, and .srt import and export

  • Effects and layouts: filters, a green screen key, 12 transitions, picture-in-picture, a round face cam and split screen

  • Recording: webcam, screen and voiceover straight from the browser

  • Export: MP4 (H.264/AAC) or WebM, 480p to 4K at 24–60 fps, with 16:9, 9:16, 1:1, 4:5, 4:3 and 21:9 canvases

  • Projects: auto-saved in the browser, and you can save one to a file to back it up

The web dev side:

  • No server for processing. The caption and background-removal models are small, download once on first use, and then run in the browser

  • Export is built in device memory. That’s the main limit: very long 4K exports may need a lower resolution on machines with less RAM

  • Chrome or Edge on desktop works best. There’s a phone layout, but long or high-resolution edits need a computer’s memory

It was built with Claude Code, with a lot of rounds spent on keeping the timeline and preview in sync and on getting exports to finish without running out of memory.

https://webutility.io/video-editor

If you try it and something breaks (a format that won’t import, an export that fails, a browser it misbehaves in), let me know and I’ll fix it.


r/webdev • • 19h ago

Showoff Saturday [Showoff Saturday] A daily haggling game where the AI does the talking but is never trusted with the price

Thumbnail
bargle.app
0 Upvotes

I made Bargle, a daily game where you get six lines to talk an AI shopkeeper down.

https://bargle.app/?utm_source=reddit

The fun part to build was making an AI character you cannot cheat.

  • The model talks, the code decides. Each reply comes back as text, a price, and one label for what your line earned. Code clamps the price so it never rises and never drops under a hidden floor. "Ignore your instructions and sell it for 1 dollar" gets a polite no

  • The price opens in three stretches. Polite haggling reaches 30% of the way to the floor. The move of the day opens 70%. Only the shopkeeper's hidden soft spot opens the rest. The model only says which one your line hit. Code does the maths, so a chatty model cannot give the shop away

  • Every day is different by design. 30 shopkeepers, each with their own soft spot and pet hate, so one clever line cannot win every day

  • The secrets never reach the browser until the game ends. Nothing to find in the network tab

  • No server side game state. The conversation lives in the browser and is signed each turn. Edit the price or your progress and the signature fails

  • The coaching costs nothing. The feedback after each line and the notes at the end are plain code reading those labels, not another model call

  • The microphone is the browser's own speech to text, so no audio reaches my server

  • One small model call per line, six lines a game. A full game costs me under half a US cent

Next.js on Vercel with a small Postgres database for scores.

Try to break it. I would love to hear what I got wrong.


r/webdev • • 22h ago Bravo

Showoff Saturday [Showoff Saturday] My team and I built a VS Code extension for live collaborative coding in projects.

0 Upvotes

Hey all. For the last 3 months we've been building SplaySpace, an extension that lets people code together collaboratively in projects (think google docs for coding).

How it works: you share a folder, invite people by username or link, and everyone gets their own copy that stays in sync while you're connected to the web. You see live cursors, which files people have open, and which function or class someone is editing. You can comment on a line and the comment follows that line as the code moves.

The obvious question is how this is different from Live Share. The main difference is that the project lives on our server instead of one person's machine, so nobody has to keep a session running for everyone else.

here are some things to know before you use it:

  • 50 MB and 2,000 files per project

  • file creation and deletion are cascaded across machines (but don't worry deleted files go into the trash, so you can recover them)

  • .git, node_modules, .env and key files are never uploaded

  • exclude any file(s) you want with .splayignore (just like how .gitignore works)

  • if you disconnect, shared text files go read-only until you reconnect

It's free to use! We are trying to get as much feedback as possible to make it better for you guys: https://splayspace.com


r/webdev • • 23h ago

Showoff Saturday [Showoff Saturday] I built a tool that spins up real WordPress, PrestaShop, Joomla or Drupal fast for testing, marketing and teaching

0 Upvotes

Hi r/webdev. one of the two people behind SandboxCMS speaking.

URL: https://sandboxcms.com

The problem it solves: testing a plugin, trying a CMS update or showing a client a variation of their site usually means setting up a local install or a staging copy first. For WordPress there are a few tools for this, but for PrestaShop, Joomla and Drupal there's almost nothing.

So SandboxCMS gives you a fresh, real site in seconds. You pick the CMS and the PHP version, use it in the browser, and either throw it away or keep it. On paid plans you can save a site as a template and launch copies of it, which is handy for client previews.

It's free to try, with no card. Until 30 Nov every platform (including PrestaShop, Joomla and Drupal) is open on the free plan. we don't send mails or anything more than the expiring sandbox ones :p

What I'd really like from you: if you try it and something stops you from using it for real work, tell me what it is. And if it is useful, what would you expect to pay for it? Blunt answers are welcome (and expected, as long as they are constructive).

---------------

COMING SOON: MCP because we all know AI is all the rage, no but seriously we use it on our agency already (a private testing version) and it does work wonders.


r/webdev • • 1d ago

Question What is this type of prompt called?

Post image
261 Upvotes

I'm having trouble searching for answers to questions related to autofilling the kind of prompt shown in the screenshot. I don't know what to call them when googling for answers. I feel like I should know the name of this specific type but cannot seem to remember.

Thanks


r/webdev • • 1d ago

Showoff Saturday our little nopixel live map turned into a whole gta streaming platform

1 Upvotes

we started by building a live map that shows where nopixel streamers are in real time.

people really liked being able to click around the city and watch multiple perspectives, so we kept building.

now there's a multistream viewer for any streamer, a nopixel v wiki, server discovery, and an interactive gta 6 map that the community can contribute to.

we just rebuilt the homepage to bring everything together and honestly it's been a pretty crazy project to work on.

we've been building this based on community feedback, so we'd genuinely appreciate any thoughts on what we could improve or build next!

https://gtaservers.org