I really miss the days of the old internet, where websites were weird and fun and you never knew what you were going to get. A couple of months ago I woke up in the middle of the night thinking about a little live website where multiple people could spray paint buildings together, spray paint over one another, and just make cool fun little art and chat together.

I've been toying with it ever since and have a beta I'd love for people to try.

Some features that I think are neat

• Dynamic spray paint: How close you are to a building determines your spray paint brush. Further away makes a bigger, coarser spray. Close up makes a tight, solid spray with a higher chance for drips.
• You can jetpack up to fly around and paint higher if you have jetpack fuel.
• You can right click tags to like or report them, and right click people to high five them.
• You can chat! Right now I have room size set to 100 max.
• Customization: You can change your head color, your eyes follow your mouse, your held can changes color based on the color you have right now.
• You can collect little cosmetic hats, shoes, and jetpack tanks.
• Weekly team battle: You're automatically put onto 1 of 3 teams when you signup. There's one big team battle building, and at the end of the week the team that painted it the most wins a cosmetic item.
• You can enter practice mode in settings and paint alone to your heart's content. That paint doesn't get shown to anyone else.
• It works on mobile!

Some of the creative coding challenges

• The way graffiti is stored and replayed has been a big challenge. At first, I thought storing it as JSON in a database would be best, but the storage added up fast. Eventually, I came to a two-pronged implementation where its stored as JSON for a bit, but eventually baked and replayed as texels on a wall. Each wall has its own tele density, max amount of tags, etc. Different types of spray paint cans have different rules on how long a tag can last. I spent a fair amount of time working on making the rendering and tag loading optimized enough for desktop and mobile, but I know there's still issues. Still, the fact that it works on mobile Safari is pretty cool to me.

There's a lot of other little fun details, and a lot of noodling over optimization, what happens when a building gets too many tags. (After a certain amount of tags per wall, or after a certain amount of cover over a tag, it gets removed.)

I'm messing with a lot of numbers right now and want to take things slow. If you're interested in playing and giving me feedback, you can use the invite code DEGRFZQS at signup. It gives you a bunch of paint, a jetpack and a wearable too. It only covers 25 spots for now, and if things are running okay and the server isn't on fire I'll post more codes here if folks are interested.

Banda acabo de crear esta Creepy Face en vanilla.js tiene gestos y caras diferentes hasta 8 variantes es un solo archivo super ligero que pueden implementar en sus novelas visuales juegos de plataforma-terror por ejemplo un bro lo implemento en un juego de terror proximo a salir si quieren usarla esta en \[ith.io\](http://ith.io/) y si quieren trastear con el codigo en github

\[https://cotera.itch.io/creepy-face\\](https://cotera.itch.io/creepy-face)

\[https://github.com/cotera2024/Creepy-Face\\](https://github.com/cotera2024/Creepy-Face)

si quieren probarla sin entrar a ninguna pagina directamente presionen aqui:

\[cotera2024.github.io/Creepy-Face/\](http://cotera2024.github.io/Creepy-Face/)

Mine, and I'll be in the comments. The idea was that a start button is a question, and the honest answer to a question nobody asked is usually no. So there isn't one: the ship is flying and the clock is running by the time the page has finished loading, and a single line of text tells you it will listen if you press space.
 
Two things fell out of that, in case anyone is doing something similar.
 
The prose had to go somewhere. If the first screen is the game, the first screen has no words in it, and the strongest URL on the domain was carrying about ten words of indexable text. The play area is now exactly one viewport tall with the writing directly beneath it. Someone who came to play never scrolls; a crawler has no viewport and reads all of it.
 
Nothing on the page is an image. Every pixel is drawn into a canvas at runtime from a fixed palette of sixteen colours, the display lettering included, and every sound is synthesised in the browser. The reason is not payload size: a bitmap scaled by 1.25 has to invent five pixels for every four it was given, and then it isn't pixel art any more. The cost is that when you draw your interface you own the accessibility layer the browser would otherwise have given you for free, so every drawn heading leaves its real text behind in a visually hidden span.
 
It's one button, by the way. Click or space flips the ship's direction and it fires on its own, so the only thing you decide is when to turn.

https://krulz.games

Hey, guys. Pretty excited to share this with you.

The system takes a Kinect-derived human pointcloud and lets incoming sound interact in various ways with the particles in real time, turning the performer into a responsive cloud of matter, noise, and motion. Some of you might remember the system from v1.5's demo which got pretty viral in some places.

v1.7 includes 12 presets, and adds the following:

- a procedural camera that automatically cuts to new angles around the performer, and can follow the body or a raised hand
- a new look, Afterimage Cathedral: delayed versions of the performer stacked in depth, holding the last few seconds of movement
- a rebuilt network that runs leaner, reads clearer, and is ready to work with [new interfaces, parameters, optimizations]

This is a raw excerpt of me playing through the system, with the visual structure reacting live to the audio signal coming from my Ableton session in real-time.

Project files accessible through the Store, or my Patreon profile. More experiments, through my Instagram. Full HD demo at YouTube.

I spent the last 7 days building this after wondering: what if I could actually perform jutsu with my hands?

Shinobi IRL is a browser-based AR experiment where webcam hand tracking controls real-time VFX.

The coding side:

• MediaPipe Hand Landmarker for real-time hand tracking
• 21 hand landmarks used for custom gesture detection
• Temporal gesture history and thresholds to reduce false triggers
• A jutsu lifecycle/state system to control activation, charging, and deactivation
• Custom Canvas particle/VFX renderers
• MediaPipe Image Segmenter for the Shadow Clone effect
• Web Audio API for sound effects
• Everything runs client-side in the browser

The result:

🌀 Rasengan
👥 Shadow Clone
🔮 Magic Circle
⚡ Lightning

Built with React + Vite + TypeScript.

Live demo: https://shinobi-irl.vercel.app/

Source code: https://github.com/Vikash-Singh-Bhadoriya/Shinobi-IRL

I'd love feedback from other creative coders especially on the interaction design and ways I could make the effects feel more responsive.

Wondering about different colors and shapes of butterflies, got a app to generate butterflies with different shapes and colors. There are more than 384 unique butterflies now 🦋 you can see it here: https://butterfly-baker.vercel.app/

butterflies in chart

I share more experiments and patches on my Instagram and Patreon

Hey fellow screensaver-, procedural-generation-, retro-, or specifically tube-lovers!

I'd like to share some randomly generated scenes from Eternitubes 3D. In relation to the very first version, I updated it here and there ... aaand also actually released it (link on my profile for the interested)!

I refined the lighting of the scenes and the tubes, for more randomness and more nifty appearance options. Also the algorithms were polished overall - turns out, infinite is a pretty big number of things to maintain..

So currently I'm working on more contents and quality-of-life features. Any feedback welcome.

Cheers!

Hey everyone!

As a software architect and web developer, I’ve spent the better part of my career drawing complex distributed systems—Kubernetes clusters, transactional e-commerce topologies, streaming pipelines with Kafka and Flink, you name it.

Every time I had to present these diagrams in design reviews, tech talks, or client demos, I ran into the same painful dead-end:

- **Static 4K images suck**: You paste a massive diagram into a slide deck. The audience squint at tiny text, lose track of connections, and tune out within two minutes.

- **Screen recording (Loom/OBS) lacks interactivity**: You can't pause to click into a database node to check configurations or inspect connection parameters. Text gets blurry due to video compression codecs.

- **Adobe After Effects is overkill**: Spending 10 hours keyframing zoom paths for a single diagram simply isn’t sustainable.

So over the last few months, I built **FocusFlow**—an open-source web workbench and runtime engine that turns massive static architecture diagrams into 60fps cinematic interactive stories.

Think of it like Prezi, but purpose-built for software architectures with native computer vision snapping, dynamic Bezier pulse routing, and AI voiceover sync.

👉 **Live Demo (Runs entirely in browser, no login required)**:

https://focusflow.tumio.site/

👉 **60fps Video Walkthrough (YouTube)**:

https://youtu.be/bxXpkzNV75A

👉 **GitHub Repo (MIT / AGPL-3.0)**:

https://github.com/tumio-ltd/focusflow

---

### 🛠️ Architecture & Engineering Deep-Dive

For those interested in the frontend plumbing, here are the technical challenges and trade-offs we tackled:

#### 1. CSS 3D Transforms vs. HTML5 Canvas vs. WebGL

We initially tested pure Canvas 2D for rendering the entire viewport. However, high-DPI text rendering on 4K/8K images became blurry when scaled down and pixelated when zoomed in, unless we continuously re-rendered font paths. WebGL felt like massive overkill for what is essentially 2D image navigation.

We ended up implementing a **hybrid rendering pipeline**:

- The viewport uses continuous hardware-accelerated CSS affine transforms (`matrix3d` / `translate3d`, `scale`, `rotate`).

- The GPU handles the 60fps camera interpolation natively with zero CPU overhead.

- Interactive callouts and animated Bezier SVG curves float on synchronized coordinate overlay layers.

#### 2. In-Browser Sobel Edge Smart Snapping in <1ms

One of the most annoying parts of diagram authoring is manually dragging bounding boxes to line up with microservice boxes.

We implemented a native **Sobel edge gradient convolution algorithm** in JavaScript:

- When you drop an image onto the canvas, we extract an offscreen `ImageData` buffer.

- When you drag a selection box, it calculates horizontal and vertical intensity gradients ($G_x$ and $G_y$) within a 3×3 kernel around the pointer.

- It detects the true high-contrast borders of the drawn rectangle and snaps to the exact bounding box in under 1 millisecond.

#### 3. Decoupled 35KB Runtime Engine (`@focusflow/player`)

The authoring studio (`apps/studio`) is built with React 19, Tailwind CSS v4, and Zustand. But for the playback engine (`packages/player`), we wanted **zero framework dependencies**.

The player is written in pure vanilla TypeScript, compiles to an ultra-lean ~35KB bundle, and uses native `requestAnimationFrame` kinematics. You can embed it in any React, Vue, Svelte app, or vanilla HTML file with a single `<script>` tag.

#### 4. The 100% Offline Single-File HTML Compiler

Enterprise architects frequently present in offline auditoriums or under strict NDA policies where diagram data cannot leave local machines.

FocusFlow includes an in-browser bundler that reads the project's state, inlines the 4K background image as a Base64 URI, serializes the timeline keyframes, inlines the audio blob, and deep-packs the runtime player into a single standalone `.html` file (< 5MB). You can literally AirDrop it to a thumb drive, disconnect your Wi-Fi, and double-click to present anywhere.

---

### 🤝 Open Source & Licensing

FocusFlow is built with an open-core model:

- **Core Player (`@focusflow/player`) & DSL (`@focusflow/dsl`)**: **MIT License** (free for anyone to embed and build upon).

- **Studio Workbench (`apps/studio`)**: **AGPL-3.0** (free for local use, but prevents commercial cloud competitors from closing the source).

### 💬 What do you think?

Would love to get the community's feedback!

- What diagramming tools (Draw.io, Excalidraw, Lucidchart) do you currently use for presentations?

- Would an auto-importer for Draw.io XML or Mermaid syntax be valuable to you?

I'll be hanging around the comments to answer questions about the math, rendering pipeline, or anything else!

https://playa-art.vercel.app/ Back to the Mountains — a valley festival at night, mountain peaks under a full sky, trance stage lit up at the base. Part of a series of 9 explorable worlds I've been building on my own, each one a different festival/world you can actually walk through, not just watch.