web-gizmos

• Dystopian web app contrasting 1984 surveillance with modern data practices
• Includes interactive elements like mouse-tracking eye, particle canvas, scroll animations
• Features simulated terms of service with interactive accept button

    ctx.clearRect(0, 0, width, height);
    requestAnimationFrame(drawParticles);
  

This web application is a thematic, dystopian-themed experience comparing surveillance in George Orwell’s 1984 to modern digital data practices. It includes interactive visual elements such as a mouse-tracking eye SVG, a particle network canvas, scroll-triggered reveal animations, and glitch text effects. A simulated terms of service section with an interactive accept button triggers visual glitches and adjusts particle behavior when clicked.

• Interactive Magic 8 Ball with 3D WebGL particle effects inside the ball window.
• Offers 5 answer tone styles (Friendly, Mean, Silly, Dramatic, Roast Me) via dropdown.
• Fetches AI-generated responses via OpenRouter API with automatic API key rotation.

    const MODEL = "openai/gpt-oss-20b:free";
    magicBall.classList.add('is-shaking');
  

This interactive Magic 8 Ball web app features 3D particle animations and multiple answer tone options. Users input questions, select a response style, and receive AI-generated answers via the OpenRouter API. The app includes loading shake animations, API key rotation for error recovery, and auto-revert to the default 8 display after 45 seconds.

• Fetches random safe boy images from Nekos API via proxy
• Displays image metadata including ID, rating, tags, and source
• Renders color palette swatches from image color data

    async function loadImage() {
      const response = await fetch(apiUrl);
  

This web app displays random safe boy images sourced from the Nekos API. Each image is shown with accompanying metadata like ID, content rating, and tags. A proxy service is used to resolve cross-origin request issues when fetching API data.

• Renders a full-screen ASCII grid with dark background and green monospace text.
• Triggers expanding character waves at mouse grid positions on cursor movement.
• Uses optimized animation with single DOM updates and wave bounding box calculations.

    const CHARS = '@#S%?*+;:,. ';
    requestAnimationFrame(animate);
  

This interactive web app displays ASCII wave effects on a full-screen monospace grid. Moving the mouse across the canvas generates expanding waves of characters at the cursor's position. Performance optimizations like single DOM updates keep the animation smooth and responsive.

• Allows users to enter text for ASL sequence playback
• Provides autocomplete suggestions for input text
• Plays corresponding ASL videos when triggered

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

This web application converts user-input text into playable ASL (American Sign Language) video sequences. It includes an input field with dynamic autocomplete suggestions to assist users in entering valid text. Clicking the Play button triggers the app to load and display the corresponding ASL video for the entered content.

• 3D spinning text rendered with Three.js
• Customizable text, font, size, thickness, speed, and color
• Shareable configuration via URL parameters

    textMesh.rotation.y += state.speed;
    loadFont();
  

This tool generates a 3D spinning text with configurable text, font, size, thickness, speed, and color. It integrates with Google Fonts via GitHub to allow searching and loading of fonts. The menu can be hidden or shown with any key press, and the configuration is reflected in the URL for sharing.

• 3D checkers game using Three.js for browser-based 3D rendering
• Real-time multiplayer via MQTT broker with role-based presence locking
• Includes in-game chat, custom profile images, and victory visual effects

    let mqttClient;
    let scene, camera, renderer;
  

This web application provides a 3D checkers game with real-time multiplayer support via MQTT messaging. Users can select player or spectator roles, set custom profile images, and use an integrated lobby chat. The game features interactive 3D board rendering, move validation, win detection, and visual effects including piece explosions and victory sweep animations.

• Replaces all instances of "C++" in a preloaded rant text with custom user input.
• Accepts replacement text via a text input field or URL 'text' query parameter.
• Styles replaced terms in bold with a distinct color for clear visibility.

    const targets = document.querySelectorAll('.replace');
    element.textContent = newValue || "[empty]";
  

This web application displays a well-known Linus Torvalds rant criticizing the C++ programming language. Users can dynamically replace all instances of "C++" in the rant with custom text via a text input or URL parameter. Replaced terms are bolded and colored to stand out in the styled preview area.

• Interactive dots flee mouse proximity within 90px, triggering audio.
• Sidebar controls dot count, color mode, custom color, and sound.
• Web Audio API handles pre-cached sounds with volume control.

    let doofuses = [];
    audioCtx.resume();
  

Doofus Dot is a playful interactive web app with customizable floating dots. Dots flee from the mouse cursor when nearby, playing selected sound effects. Users configure settings via a fixed sidebar with controls for count, color, and audio.

• Upload custom font files (TTF, OTF, WOFF, WOFF2) to preview unique typefaces.
• Adjust font size from 8px to 72px using an interactive range slider.
• Preview custom text alongside standard web elements like headings, lists, and forms.

    @font-face { font-family: 'MyCustomFont'; }
    fontTestArea.style.fontSize = `${newSize}px`;
  

This Custom Font Tester web app allows users to upload and preview custom font files directly in the browser. It includes controls to adjust font size and input custom test text for real-time preview. The app displays the font across a wide range of common web elements to fully assess typographic performance.

• Creates a Matrix-style rain animation with customizable parameters
• Uses HTML5 canvas and JavaScript for dynamic visual effects
• Includes real-time text display and responsive design

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

This HTML file generates a Matrix-style rain animation using HTML5 canvas. It features customizable parameters like color, speed, and text display, with responsive design and real-time updates. The animation creates a dynamic visual effect with falling characters and includes a text display area that updates based on user input or predefined values.

• 2D procedural mining game with singleplayer and MQTT-based multiplayer support
• Customizable audio, graphics, keybinds, and cloud save integration via Puter.js
• Upgradeable player stats, inventory management, shop system, and host admin tools

    Game.init();
    Sound.init();
  

Mega Miner NG is a 2D procedural mining game with singleplayer and online multiplayer support. Players mine resources, upgrade equipment, manage inventory, and trade with others in a dynamically generated underground map. The app features customizable settings, cloud save syncing, a shop system, and host admin tools for managing game rooms.

• Audio visualizer with layered 2D/3D canvas rendering.
• Supports audio input from local files, microphones, or WebSocket streams.
• Persists user settings and visualizer preferences to localStorage.

    const CONFIG = initializeConfig();
    requestAnimationFrame(draw);
  

microViz is a browser-based audio visualization tool with separate 2D and 3D rendering layers. It supports audio input from uploaded files, microphone capture, and WebSocket data streams. All user configuration and visualizer settings are automatically saved to the browser's localStorage.

• Browser-based MIDI playback tool powered by Tone.js and MidiPlayer.js
• Supports loading preset audio/MIDI from an atlas library or user-uploaded files
• Includes playback controls, speed/pitch adjustment, WAV export, and shareable URLs

    await Tone.start()
    player.play()
  

MIDIbeat is a web application for playing MIDI sequences mapped to audio samples. Users can load preset assets from a library or upload custom audio and MIDI files for playback. The tool includes speed and pitch adjustment, WAV export, shareable configuration links, and a real-time audio visualizer.

• Educational interactive web app covering nuclear energy science, history, and modern geopolitics
• Features animated fission/fusion visuals, scroll-triggered reveal animations, and a horizontal historical timeline
• Built with Tailwind CSS, Lucide icons, and custom JavaScript for particle systems and interactive effects

    lucide.createIcons();
    animateParticles();
  

This interactive educational web application explains nuclear energy concepts, historical developments, and modern geopolitical concerns through engaging visuals and dynamic effects. It covers topics including nuclear fission, uranium enrichment, Cold War reactor designs, fusion technology, and a timeline of key atomic milestones, with a focus on current Iran nuclear tensions. The app uses Tailwind CSS for responsive styling, Lucide icons for visual elements, and custom JavaScript to power animations, particle systems, and scroll-based interactions.

• Generates deterministic SVG patterns via seeded PRNG for reproducible results
• Offers 6 pattern styles, adjustable density, 6 color palettes, and texture options
• Supports SVG/PNG exports, URL state persistence, and one-click random seed generation

    const rng = PRNG(seedValue);
    generate();
  

This web app generates customizable, deterministic SVG patterns using a seeded pseudo-random number generator for reproducible outputs. Users can adjust parameters including pattern style, dimensions, color palette, density, and background, with all settings synced to the browser URL for easy sharing. Patterns can be exported as SVG or PNG files, and a one-click random seed generator creates new unique patterns instantly.

• Procedurally generates PCB components (logic chips, switches, seven-segment displays) using seed-based PRNG.
• Routes traces via A* pathfinding with configurable fan-out limits and collision settings.
• Supports interactive switches, real-time simulation, and adjustable visual/performance parameters.

    const canvas = document.getElementById('canvas');
    ctx.fillStyle = CONST.COLORS.bg;
  

This web application simulates a procedural printed circuit board with randomly generated components and traces. Users can adjust generation seeds, component density, and simulation speed via an interactive settings menu. The simulator renders real-time trace activity, component states, and optional CRT visual effects.

• Comic-styled tool for progressive pixel degradation of images and videos.
• Converts images to degrading GIFs, processes videos with optional degraded WebM recording.
• Adjustable controls for clip selection, resolution scaling, audio crushing, and output settings.

    const fileInput = document.getElementById('fileInput');
    ctx.imageSmoothingEnabled = false;
  

This comic-themed web application degrades image and video quality by progressively reducing pixel resolution over time. Image inputs are converted into degrading GIFs, while video inputs can be processed with adjustable clip selection, audio crushing, and optional low-quality WebM recording. Users can customize output settings like final scale, pixel step, GIF FPS, and hold duration before exporting their degraded media.

• Multiplayer top-down racing game using MQTT for real-time networking.
• Includes in-game map editor, customizable keybinds, and settings tweaks.
• Features chat, leaderboards, mobile controls, and persistent local data.

    canvas = document.getElementById('game-canvas');
    requestAnimationFrame(gameLoop);
  

DRiFT.js is a neon-themed browser-based multiplayer racing game with retro visuals and real-time networking. It supports custom map creation, adjustable audio and graphics settings, and fully customizable keybinds for desktop play. The app also includes mobile touch controls, in-game chat, dynamic leaderboards, and persistent user and map data storage.

• Multiplayer survival game with resource gathering and crafting systems.
• Dynamic day/night cycle with lighting and hostile mob spawning.
• Supports local IndexedDB and Puter cloud save syncing.

    const CHUNK_SIZE = 800;
    let mqttClient = null;
  

Rustic Realms is a browser-based modular survival game with real-time multiplayer functionality. Players explore a procedural world, gather resources, craft tools, build structures, and combat mobs across a day/night cycle. The app uses IndexedDB for local saves and integrates with Puter for optional cloud save synchronization.

• Interactive simulation featuring turtles that move, eat food, and navigate a customizable grid environment.
• Features include turtle personalities, lily pads, pathfinding, debug mode, and extensive settings for customization.
• Mobile-optimized with touch controls, keyboard shortcuts, and save/load functionality for persistent state.

    class Turtle { update() { /* movement logic, pathfinding, food detection */ } }
    class Lilypad { draw() { /* canvas rendering with flowers and texture */ } }
  

A comprehensive turtle simulation game where users can spawn turtles with different personalities, place food and obstacles, and watch the turtles navigate and interact with their environment. The simulation includes advanced features like A* pathfinding, raycasting for obstacle detection, and a fully customizable grid system with various terrain types.

• Match-3 voxel puzzle game with target art goals
• Supports level selection and custom art import
• Has auto-play, hints, and win share tools

    let score = 0;
    gameState = STATE.IDLE;
  

Voxel Crash is a browser-based match-3 puzzle game using Three.js for 3D voxel rendering. Players swap adjacent voxels to match colors, gradually filling a target art piece in the sidebar. The app includes adjustable settings, level selection, custom art tools, and options to export or share completed artwork.

• Procedural voxel terrain with selectable biomes, dynamic generation, and interactive elements like jump pads and collectible coins
• Multiplayer functionality via MQTT with remote player synchronization, in-game chat, sound sharing, and host-controlled world settings
• Arcade car physics with nitro boosts, 3D rendering via Three.js, HUD with speedometer/minimap, and mobile touch controls

    const game = new Game();
    this.scene = new THREE.Scene();
  

Voxel Racer thingy is a browser-based 3D racing game built with Three.js, featuring procedural voxel terrain and arcade vehicle physics. It supports multiplayer connectivity via MQTT, with real-time remote player tracking, in-game chat, and shared audio playback. The game includes dynamic day/night cycles, multiple biomes, mobile touch controls, and persistent user settings stored in IndexedDB.