web-gizmos

• A dystopian-themed web page comparing modern surveillance to George Orwell's 1984
• Features an interactive eye that follows the mouse cursor and a particle system representing data tracking
• Uses scroll-triggered animations and parallax effects to reveal content sections
• Contains a mock terms-of-service agreement highlighting privacy concerns
• Includes citations to relevant literature on surveillance capitalism

    document.addEventListener('mousemove', (e) => {
        const mouseX = e.clientX;
        const mouseY = e.clientY;
  

This web page creates a visual metaphor for modern surveillance by combining interactive elements like a tracking eye, particle systems, and glitch effects with educational content about data privacy. The design uses CSS animations and JavaScript to create an immersive experience that illustrates how digital surveillance mirrors the dystopian vision of 1984, while providing sources for further reading on the topic.

• Fetches random boy-themed images from the Nekos API
• Displays image with metadata including ID, rating, tags, and source
• Generates a color palette swatch based on the image's color scheme

    const targetUrl = "https://api.nekosapi.com/v4/images/random?limit=1&tags=boy&rating=safe&without_tags=girl,pussy,exposed_girl_breasts";
    const apiUrl = "https://api.codetabs.com/v1/proxy?quest=" + encodeURIComponent(targetUrl);
  

This web application fetches and displays random boy-themed images from the Nekos API. It includes metadata display, a color palette generator, and error handling for failed requests. The interface features a Comic Sans MS font and a pink-blue gradient background.

• 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 with customizable fonts, size, thickness, speed, and color
• Loads Google Fonts dynamically from GitHub API and caches results locally
• Searchable font picker with real-time preview and URL-based state sharing

    const geo = new TextGeometry(state.text, { font, size: state.size, height: state.thickness, curveSegments: 12, bevelEnabled: true, bevelThickness: 0.1, bevelSize: 0.05 });
    textMesh.rotation.y += state.speed;
  

This web application creates a 3D spinning text effect using Three.js, allowing users to customize various text properties including font selection from Google Fonts, size, thickness, rotation speed, and color. The application features a searchable font picker that loads fonts dynamically from GitHub, caches results locally for performance, and generates shareable URLs with all settings encoded as query parameters.

• 3D multiplayer checkers game using Three.js for rendering and MQTT for real-time synchronization
• Players can customize their pieces with custom images that sync across all clients
• Presence locking system prevents multiple players from taking the same role in a room
• Real-time chat system integrated with game state updates
• Visual effects including piece explosions and victory sweep animations

    mqttClient.publish(presenceTopic, JSON.stringify({ status: 'online', image: myCustomImage }), { retain: true });
    mqttClient.publish(roomTopic + '/state', JSON.stringify(gameState), { retain: true });
  

This is a 3D multiplayer checkers game that uses Three.js for 3D rendering and MQTT for real-time synchronization between players. The game features custom piece images that sync across all clients, a presence locking system to prevent role conflicts, and visual effects like explosions and victory animations. Players can join rooms, customize their pieces, chat with opponents, and play checkers in a fully synchronized 3D environment.

• A web page displaying a meme based on Linus Torvalds' rant about C++.
• Allows users to replace the word "C++" in the text with their own input.
• Supports URL parameter for pre-filling the replacement text.

    const inputField = document.getElementById('userInput');
    const targets = document.querySelectorAll('.replace');
  

This HTML page presents a meme based on Linus Torvalds' famous rant about C++. It allows users to replace the word "C++" in the text with their own input, either through a text field or a URL parameter. The page includes CSS styling for a clean, readable layout and uses JavaScript to dynamically update the text content based on user input.

• 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 rain effect on a canvas element
• Customizable via URL parameters for text, color, speed, and more
• Supports dynamic text display and responsive canvas resizing

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

This HTML page creates a Matrix rain effect using a canvas element. It allows customization through URL parameters and includes features like dynamic text display, responsive resizing, and adjustable framerate. The effect is achieved by drawing random characters that fall down the screen, with options to control their speed, color, and behavior.

• 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 and 3D canvases for real-time music visualization
• Supports multiple audio input modes: local mic, WebSocket stream, and file upload
• Configurable visualizer settings including bar count, color, sensitivity, and FFT size
• Smooth audio data processing with configurable smoothing passes and time constants
• Display metadata overlay showing track information and album art when available

    const visualizers = { bars: { displayName: "Bars", settings: [ { id: 'barCount', type: 'range', label: 'Bar Count', min: 16, max: 256, step: 1, default: 128 }, { id: 'color', type: 'color', label: 'Color', default: '#00ff9d' } ], draw: () => { return () => { const thisConfig = CONFIG.settings.bars; const barWidth = canvas2D.width / thisConfig.barCount; ctx.fillStyle = thisConfig.color; for (let i = 0; i < thisConfig.barCount; i++) { const value = audioData[i]; const barHeight = (value / 255) * canvas2D.height * CONFIG.master.sensitivity; const x = i * barWidth; const y = canvas2D.height - barHeight; ctx.fillRect(x, y, barWidth - 2, barHeight); } } } }, ...presets };
  

This audio visualizer provides a customizable real-time music visualization experience with multiple input modes and visualizer types. The application features smooth audio processing, configurable settings, and displays track metadata with album art. Users can choose between local microphone input, WebSocket streams, or uploaded audio files, with adjustable parameters for sensitivity, FFT size, and visualizer appearance.

• 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.

• Interactive educational web application about nuclear energy.
• Covers fission, uranium enrichment, reactor types, and fusion.
• Includes animated visualizations and a horizontal timeline.
• Features modern web technologies: Tailwind CSS, Lucide icons, and custom animations.

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

This interactive web application provides an educational experience about nuclear energy, covering topics from atomic fission to fusion. The site features animated visualizations, a horizontal timeline, and responsive design elements that explain complex nuclear concepts in an engaging way.

• SVG pattern generator with seeded deterministic output
• Six preset styles: Memphis, Bauhaus, Isometric, Voronoi, Waves, Op-art
• Customizable dimensions, density, palette, stroke width, noise texture
• Export to SVG and PNG formats

    function PRNG(seedStr) { ... } // seeded random generator
    function genMemphis(svg, rng, W, H, palette, bg, strokeWidth) { ... }
  

This web application generates unique SVG patterns using seeded randomness for reproducible results. Users can customize pattern style, colors, size, and complexity, then export their creation as SVG or PNG. The deterministic nature means the same settings always produce identical patterns.

• 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 to HTML text art with configurable settings
• Supports different text generation modes (random/sequence) and character sets
• Includes export options for HTML, SVG, and PNG formats

    function convertImage() {
        const startTime = performance.now();
        const img = new Image();
        img.onload = function() { /* ... */ };
        img.src = e.target.result;
    }
  

This web application transforms uploaded images into HTML text representations using configurable parameters like width, character sets, and color schemes. It includes features for grayscale conversion, contrast adjustment, and multiple export formats while maintaining browser compatibility through CSS adjustments.

• Loads an image or video file and displays it on a canvas.
• Gradually degrades video resolution and audio quality over time.
• Converts images into pixelated GIFs with decreasing resolution.
• Records the degraded video output as a WebM file if enabled.
• Provides real-time preview and download links for processed media.

    canvas.getContext('2d', { alpha: false });
    new MediaRecorder(mixedStream, mimeType ? { mimeType } : {});
  

This web app lets you upload an image or video, then progressively degrades its resolution and audio quality over time. For videos, it applies a low-pass filter and bitcrusher to the audio while scaling down the video resolution. For images, it creates a pixelated GIF that becomes more blocky as it plays. You can adjust degradation parameters like final scale, pixelation step, and audio crush strength. The app provides real-time preview and allows downloading the degraded output as WebM video or GIF files.

• 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 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.

• 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.

• Voxel-based terrain with dynamic generation using Simplex noise
• Multiplayer functionality via MQTT broker for real-time racing
• Interactive HUD with speedometer, nitro bar, minimap, and chat system
• Mobile controls with touch support for on-the-go gameplay
• Host settings for terrain customization (biome, seed, roughness, height scale)

    const Utils = { lerp: (a, b, t) => a + (b - a) * t, clamp: (val, min, max) => Math.min(Math.max(val, min), max) };
    class TerrainSystem { constructor(scene, game, renderDist) { this.settings = { seed: 12345, step: 0.05, unit: 50, water: 0, timex: 0, timez: 0, biome: 'grass' }; } };
  

A voxel-based racing game featuring dynamic terrain generation, real-time multiplayer via MQTT, and interactive UI elements including a minimap and chat system. The game supports both desktop and mobile controls, with host settings for customizing the racing environment.