web-gizmos

• Fetch random "boy" tagged images from Nekos API through a proxy
• Display image with metadata including ID, rating, tags, and source link
• Show color palette swatches extracted from the image

    const targetUrl = "https://api.nekosapi.com/v4/images/random?limit=1&tags=boy&rating=safe..."
    const paletteHTML = image.color_palette.map(rgb => `
`).join("");
  

A web app that fetches and displays random "boy" tagged images from Nekos API, showing the image alongside its metadata and color palette. The app uses a proxy to bypass CORS restrictions and includes a button to fetch new images on demand.

• Webpage for playing ASL sequences based on user input text
• Features an input field with autocomplete suggestions
• Includes a video player to display ASL sequences

    <input id="userText" placeholder="Enter text..." autocomplete="off"/>
    <video id="aslVideo" width="500" controls></video>
  

This webpage allows users to enter text and play corresponding ASL (American Sign Language) sequences. It features an input field with autocomplete suggestions and a video player to display the ASL sequences. The page includes a button to fetch and play the ASL sequence based on the user's input text.

• Interactive 3D spinning text generator using Three.js with real-time parameter controls
• Dynamic font loading from Google Fonts GitHub repository with search functionality
• URL state management for sharing configurations and keyboard shortcut for UI toggle

    textMesh.rotation.y += state.speed;
    const geo = new TextGeometry(state.text, { font, size: state.size, height: state.thickness })
  

A WebGL-based spinning text visualizer that lets users customize text, font, size, thickness, rotation speed, and color. The application fetches fonts from Google Fonts, caches them locally, and provides a shareable URL with all current settings. Users can search through available fonts and toggle the control panel with any key press.

• 3D multiplayer checkers game using Three.js and MQTT for real-time sync
• Custom player images, chat system, and win animations with "sweep" effect
• Presence locking to prevent multiple players in same role, spectator mode
• Client-side move validation and board state prediction for smooth gameplay

    mqttClient.publish(roomTopic + '/state', JSON.stringify(gameState), { retain: true });
    mqttClient.subscribe(roomTopic + '/presence/+');
  

This 3D multiplayer checkers game features real-time synchronization using MQTT, custom player images, and an interactive chat system. Players can join as Player 1, Player 2, or spectator, with presence locking to prevent conflicts. The game includes smooth 3D animations, win celebrations with sweep effects, and client-side move validation for responsive gameplay.

• A web page displaying a C++ Linus Rant Meme with interactive text replacement.
• Allows users to input custom text to replace instances of "C++" in the rant.
• Supports URL parameter for initial text replacement.

    const inputField = document.getElementById('userInput');
    inputField.addEventListener('input', (event) => {
  

This HTML page creates an interactive version of a C++ Linus Rant Meme. It allows users to input custom text that replaces all instances of "C++" in the rant. The page also supports URL parameters for initial text replacement, providing a dynamic and customizable viewing experience of the meme.

• Interactive web app where users control animated dots that flee from mouse cursor
• Features audio playback using Web Audio API with customizable sounds and colors
• Provides UI controls for dot count, color mode, sound selection, and respawn functionality

    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const soundBuffers = {};
  

Doofus Dot is an interactive web application featuring animated dots that flee from mouse movement. The app includes a user interface for controlling dot count, color modes, and sound effects, utilizing the Web Audio API for audio playback with caching and error handling.

• Upload custom font files to test typography
• Adjust font size with a slider control
• Preview text in custom font across all HTML elements
• Interactive controls for font size and custom text input
• Responsive design that works on desktop and mobile

    const fontFileInput = document.getElementById('font-file-input');
    fontFileInput.addEventListener('change', (event) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        fontTestArea.style.fontFamily = `'${FONT_FAMILY_NAME}', sans-serif`;
      };
    });
  

This custom font tester application allows you to upload font files and preview how they render across various HTML elements. The interface includes controls for adjusting font size and entering custom text, providing a comprehensive preview of your font's appearance in different contexts.

• Creates a Matrix-style falling text animation on a canvas element
• Allows customization through URL parameters like text, color, speed, and font
• Displays evaluated JavaScript code as text overlay, defaulting to current date

    const canvas = document.getElementById('matrix');
    const ctx = canvas.getContext('2d');
  

This HTML page creates a Matrix-style falling text animation using a canvas element. It allows customization through URL parameters and displays evaluated JavaScript code as text overlay, defaulting to the current date. The animation can be paused when the tab is not visible.

• Implements a 2D mining game with multiplayer support using WebSockets/MQTT
• Features procedurally generated terrain with various ore types and upgradeable mining equipment
• Includes a comprehensive UI system with mobile controls, chat, inventory management, and settings
• Provides cloud save functionality using Puter's file system and IndexedDB for local storage
• Utilizes custom shaders and texture engine for enhanced visual effects and tile rendering

    const TILE_TYPES = { EMPTY: 0, DIRT: 1, GRASS: 2, STONE: 3, HARD_STONE: 4, COAL: 6, IRON: 7, GOLD: 8, DIAMOND: 9, EMERALD: 10, RUBY: 11, CASING: 20, BEDROCK: 99 };
    const GameEngine = new class { ... };
    class NetworkManager { ... }
  

This HTML file contains a complete 2D mining game implementation with multiplayer functionality, procedural world generation, upgrade systems, and cloud synchronization. The game features a tile-based mining system where players can extract resources, upgrade their equipment, and interact with other players in real-time. The codebase includes a sophisticated UI system with mobile controls, inventory management, and settings customization.

• Audio visualizer with 2D canvas overlay and 3D background canvas
• Multiple visualizer modes including bars, waveform, and circle visualizations
• Real-time audio processing using Web Audio API with FFT analysis
• Metadata display including album art, title, artist, and album information
• Multiple audio input modes: local microphone, WebSocket stream, and local file

    const canvas2D = document.getElementById('visualizer-2d');
    const ctx = canvas2D.getContext('2d');
    const canvas3D = document.getElementById('visualizer-3d');
  

This web application provides an interactive audio visualizer with real-time audio processing capabilities. It features multiple visualization modes, metadata display, and supports various audio input sources including microphone, WebSocket streams, and local files. The application uses the Web Audio API for audio analysis and provides customizable settings for sensitivity, FFT size, and smoothing.

• Web-based MIDI player with real-time audio synthesis using Tone.js
• Supports loading sound libraries and MIDI sequences from remote Atlas JSON files
• Provides custom file upload for audio and MIDI files
• Features real-time audio visualization, pitch/speed controls, and WAV export
• Implements safe resource management with automatic cleanup of previous instances

    async function initSampler(url) { ... }
    async function initMIDI(data) { ... }
  

This application is a browser-based MIDI sequencer that plays MIDI files using a selected audio sample. It loads audio and MIDI libraries from JSON atlases, allows custom file uploads, and provides real-time audio visualization with pitch and speed controls. The application safely manages Tone.js resources by automatically disposing of previous instances when loading new content, preventing memory leaks and ensuring smooth playback. It also includes offline rendering capabilities to export the final audio as a WAV file.

• SVG pattern generator with seeded randomness for reproducible designs
• Six distinct style engines: Memphis, Bauhaus, Isometric, Voronoi, Waves, Op-Art
• Deterministic output based on seed, dimensions, style, density, palette, and stroke width
• Export to both SVG and PNG formats with texture overlay options

    const rng = PRNG(`${seed}|${style}|${W}x${H}|${density}`);
    switch (style) { case 'memphis': genMemphis(rootGroup, rng, W, H, palette, bg, strokeWidth); break; }
  

This web application generates deterministic SVG patterns using seeded pseudorandom number generation. Users can customize dimensions, select from six artistic styles, adjust complexity, choose color palettes, and export their creations as vector SVG or raster PNG files. The seed-based approach ensures identical patterns can be recreated by reusing the same settings.

• Procedural PCB simulator with logic gates, switches, displays, and LEDs
• Smart A* routing algorithm with fan-out limits and force-connect option
• Interactive components that respond to mouse clicks and propagate signals
• Customizable parameters including seed, density, speed, and visual effects
• Real-time simulation with CRT scanline and glow effects

    class PRNG { constructor(seed) { this.seed = this.hashString(seed.toString()); } }
    class Generator { constructor(seed, w, h, density, forceConnect, maxFanout) { this.generate(); } }
  

This procedural PCB simulator generates random circuit boards with logic components that interact through signal propagation. Users can adjust parameters like component density and fan-out limits, then interact with switches and observe signal flow through traces. The A* routing algorithm intelligently connects components while avoiding collisions, with optional force-connect mode for crowded boards.

• Converts images into HTML text art using customizable settings
• Features character sequence/random generation, grayscale, and contrast options
• Exports to HTML, SVG, and PNG formats
• Uses canvas API for image processing and html2canvas for PNG export
• Responsive design with a split-screen layout for controls and output

    function convertImage() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, newWidth, newHeight);
      const textImage = generateTextImage(ctx, newWidth, newHeight);
    }
  

This image-to-HTML converter transforms uploaded images into text-based representations using configurable settings like character sets, colors, and dimensions. The tool processes images through canvas manipulation, applies grayscale and contrast effects, and generates HTML output that can be exported in multiple formats including PNG using html2canvas.

• Interactive web app for degrading image and video quality with pixelation and audio distortion.
• Supports both image-to-GIF conversion and video degradation with optional recording.
• Configurable degradation parameters like final scale, pixelation step, audio crush, and hold time.

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d', { alpha: false });
    const reduceBtn = document.getElementById('reduceBtn');
  

This is a web application that degrades image and video quality through pixelation and audio distortion. It allows users to upload media files, adjust degradation parameters, and generate either a GIF from images or a degraded video from video files. The app features a comic-style interface and includes audio processing with low-pass filtering and bitcrushing effects.

• Browser-based 2D multiplayer racing game using HTML5 Canvas and MQTT
• Real-time physics with drift mechanics and customizable maps
• Cross-platform support with mobile touch controls
• Persistent rooms and map sharing system
• Audio engine with realistic car sounds and effects

    const audio = new SoundManager();
    audio.update(myCar.speed, myCar.drifting, surfaceType);
  

DRiFT.js is a lightweight, real-time multiplayer racing game built entirely in the browser. It features realistic physics, drift mechanics, and a powerful map editor that lets players create and share custom tracks. The game uses MQTT for networking, providing low-latency multiplayer experiences across devices. With mobile touch controls, audio feedback, and persistent rooms, DRiFT.js delivers an engaging racing experience that runs smoothly on any modern browser without plugins.

• A multiplayer survival game built with vanilla JavaScript, HTML5 Canvas, and MQTT for networking
• Features procedurally generated terrain with trees, rocks, and iron nodes across infinite chunks
• Includes crafting system, building mechanics, and day/night cycles with dynamic lighting
• Implements real-time multiplayer where players can see each other's movements and constructions
• Supports cloud synchronization through Puter for saving game state across sessions

    function moveEntity(ent, dx, dy, dt, speed, isPlayer=false, isGhost=false) {
        let tx = ent.x + dx * speed * dt; let ty = ent.y + dy * speed * dt;
        // Resolve collisions with walls and objects
        return {x: tx, y: ty};
    }
  

This is a modular survival game featuring multiplayer capabilities, procedural world generation, and real-time networking. Players can gather resources, craft items, build structures, and interact with others in a shared persistent world. The game uses MQTT for low-latency communication and includes cloud storage for cross-session progress.

• Interactive turtle simulation with multiple turtle personalities and behaviors
• Pathfinding AI using A* algorithm with obstacle avoidance and 8-directional movement
• Grid-based world with terrain types (walls, glass, water, grass, sand) affecting turtle movement
• Food collection system with turtle vision cones and smell detection for finding food
• Customizable settings panel with mobile-responsive design and keyboard shortcuts

    function findPath(sx, sy, ex, ey) { /* A* pathfinding with 8-directional movement */ }
    class Turtle { /* AI behavior: IDLE, WAIT, SEEK states with smooth rotation */ }
  

This web-based turtle simulation features intelligent AI turtles with distinct personalities, pathfinding capabilities, and interactive behaviors. Users can spawn turtles, place food and obstacles, edit terrain, and customize simulation settings through a responsive control panel. The simulation includes advanced features like A* pathfinding, turtle vision cones, food detection systems, and mobile touch controls.

• 3D match-3 puzzle game where players swap colored blocks to create matches and fill target art
• Features include auto-play, hint system, and custom art importer with color palette generation
• Responsive design with sidebar for controls and game status, plus win screen with sharing options
• Dynamic background fluid effects that change colors based on active game elements
• Three.js powered 3D graphics with particle effects and smooth animations

    function findMatches() { let matchedBlocks = new Set(), sequences = []; ... }
    function attemptSwap(b1, b2) { gameState = STATE.SWAPPING; ... }
  

This is a 3D match-3 puzzle game built with Three.js that combines color-matching gameplay with pixel art creation. Players swap blocks to create matches of three or more, which fills in corresponding pixels of target artwork. The game features an auto-play mode, hint system, and allows custom art import through image processing. With responsive design, fluid background effects, and 3D particle animations, it provides an engaging puzzle experience across desktop and mobile devices.

• Multiplayer racing game using Three.js for 3D graphics and MQTT for real-time networking
• Procedurally generated terrain with five biomes (grasslands, desert, snow, mars, caves) using simplex noise
• Host edition includes terrain customization tools and soundboard for in-game audio effects
• Mobile-optimized controls with virtual joystick and nitro buttons
• Persistent settings stored in IndexedDB and server status checking for MQTT brokers

    const Utils = { lerp: (a, b, t) => a + (b - a) * t, clamp: (val, min, max) => Math.min(Math.max(val, min), max), rand: (min, max) => Math.random() * (max - min) + min, strToColor: (str) => { let hash = 0; for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash); const c = (hash & 0x00FFFFFF).toString(16).toUpperCase(); return '#' + "00000".substring(0, 6 - c.length) + c; }, getTimeString: (gameTime) => { const totalMinutes = Math.floor(gameTime * 24 * 60); const h = Math.floor(totalMinutes / 60); const m = totalMinutes % 60; const ampm = h >= 12 ? 'PM' : 'AM'; const h12 = h % 12 || 12; return `${h12}:${m.toString().padStart(2, '0')} ${ampm}`; } };
    class DB { constructor(dbName, storeName) { this.dbName = dbName; this.storeName = storeName; this.db = null; } async init() { return new Promise((resolve, reject) => { const request = indexedDB.open(this.dbName, 2); request.onupgradeneeded = (e) => { const db = e.target.result; if (!db.objectStoreNames.contains(this.storeName)) db.createObjectStore(this.storeName); }; request.onsuccess = (e) => { this.db = e.target.result; resolve(); }; request.onerror = (e) => reject("DB Error"); }); } async get(key) { return new Promise((resolve) => { const tx = this.db.transaction([this.storeName], "readonly"); const req = tx.objectStore(this.storeName).get(key); req.onsuccess = () => resolve(req.result); req.onerror = () => resolve(null); }); } async put(key, value) { return new Promise((resolve) => { const tx = this.db.transaction([this.storeName], "readwrite"); tx.objectStore(this.storeName).put(value, key); tx.oncomplete = () => resolve(); }); } }
  

Infinity Racer is a browser-based multiplayer racing game featuring procedurally generated terrain and real-time networking. The game uses Three.js for 3D rendering and MQTT for multiplayer communication, supporting up to five different biomes with dynamic weather cycles. Players can customize terrain generation parameters, use a built-in soundboard for audio effects, and compete with others in real-time races. The host edition provides additional controls for world customization and server management, while maintaining mobile compatibility with touch controls.