web-gizmos

• Dystopian web experience contrasting Orwell's 1984 surveillance tropes with modern data privacy and surveillance capitalism issues
• Features interactive elements including a mouse-tracking SVG eye, particle network canvas, and scroll-triggered reveal animations
• Includes sections on modern surveillance tools, data brokers, algorithmic manipulation, and a satirical terms of service agreement

    const canvas = document.getElementById('particle-canvas');
    pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
  

This web application creates a dystopian experience comparing surveillance in George Orwell's 1984 to modern data privacy and surveillance capitalism practices. It includes interactive visual elements like a mouse-tracking SVG eye, a particle network background, and scroll-triggered content animations. The app also features educational sections on modern surveillance tools, data brokers, algorithmic manipulation, and a satirical terms of service agreement.

• Renders a 3D animated Magic 8 Ball with particle effects and shake animations
• Supports 5 selectable response personalities (friendly, mean, silly, dramatic, roast)
• Integrates OpenRouter API for AI-generated answers with rate limit handling

    onclick="askQuestion()"
    particles.rotation.y += baseRotationSpeed;
  

This interactive Magic 8 Ball web app features 3D particle animations and dynamic shake effects. Users can choose from multiple personality styles to get AI-generated, brief answers to their questions. The app handles API rate limits and automatically reverts to the default 8 display after 45 seconds.

• Fetches safe boy-tagged images from Nekos API via a CORS proxy.
• Displays images with metadata and color palette swatches.
• Includes button to load new images, auto-loads on page start.

    fetch(proxy + encodeURIComponent(target))
    renderImage(imageData)
  

This web app fetches safe, boy-tagged images from the Nekos API using a CORS proxy. Each image is shown with details like ID, rating, tags, source link, and a color palette. A button loads new random images, and one image loads automatically on page startup.

• Creates an ASCII art wave effect that follows mouse movement
• Uses monospace characters to render waves with varying intensities
• Implements efficient rendering with bounding box calculations

    const CHARS = '@#S%?*+;:,. ';
    const WAVE_DURATION = 800;
  

This interactive web page creates dynamic ASCII wave patterns that follow mouse movement across the screen. The waves are rendered using a monospace font with varying character intensities to simulate depth, and the animation is optimized using bounding box calculations to only update affected areas of the grid.

• Enter text and get ASL video sequence.
• Displays video player with controls.
• Provides suggestions for input text.

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

This ASL sequence player allows users to enter text and generates a video sequence in American Sign Language. The page includes an input field for text entry, a video player to display the ASL sequence, and a button to initiate the sequence playback. The application also provides suggestions for the input text to assist users.

• Renders 3D spinning text using the Three.js library.
• Fetches Google Fonts via GitHub API for custom typeface selection.
• Generates shareable URLs preserving all current settings.

    import * as THREE from 'three';
    textMesh.rotation.y += state.speed;
  

This web application generates 3D spinning text with real-time customization options. Users can adjust text content, font, size, thickness, spin speed, and color via a toggleable control panel. All settings are saved to the URL for easy sharing, with fonts fetched dynamically from the Google Fonts repository.

• 3D checkers game with Three.js rendering and MQTT real-time multiplayer sync
• Supports Player 1, Player 2, Spectator roles with presence locking via retained MQTT messages
• Includes in-game chat, custom player images, and win sweep visual effects

    scene = new THREE.Scene();
    mqttClient = mqtt.connect(brokerUrl);
  

This 3D checkers web app uses Three.js for 3D rendering and MQTT for real-time multiplayer state synchronization. Users can join as Player 1, Player 2, or Spectator, with presence locking to prevent duplicate roles in shared rooms. It includes an in-game chat system, custom player images, and animated sweep effects for win conditions.

• 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 application with movable dots that flee from mouse cursor
• Features customizable dot count, color modes (solid or rainbow), and sound effects
• Utilizes Web Audio API for audio playback with pre-caching functionality

    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    class Doofus { constructor() { this.spawn(); } flee() { playEffect(); } }
  

This interactive web application creates customizable dots that move away from the mouse cursor, featuring configurable count, color modes, and sound effects using the Web Audio API. The application includes audio pre-caching, dynamic dot generation, and browser-compatible audio context handling.

• Upload custom font files (TTF, OTF, WOFF, WOFF2) to preview
• Adjust font size via slider with live rendering updates
• Preview fonts across headings, text, forms, and UI elements

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

This web application allows users to upload custom font files and preview their rendering in real time. Users can adjust the font size with a slider, input custom test text, and view the font applied to diverse elements. Previews include headings, paragraphs, inline text styles, forms, buttons, and character glyph sets for comprehensive testing.

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

• Multiplayer mining game with procedural underground map generation, drilling, and ore collection.
• Includes shop upgrades, inventory management, TNT/nuke explosives, teleporters, and mobile controls.
• Features cloud save sync, MQTT networking, audio system, HUD gauges, minimap, and admin tools.

    const TILE_SIZE = 32;
    Sound.init();
  

Mega Miner NG is a browser-based multiplayer mining game with procedural underground maps and resource mining mechanics. Players can upgrade equipment, manage inventory, use explosives, and fast-travel via teleporters across shared game worlds. The app includes cloud save support, mobile-optimized controls, a custom audio engine, HUD gauges, minimap, chat, and configurable settings for graphics, audio, and keybinds.

• Web-based audio visualizer with 3D background and 2D overlay canvases
• Multiple visualization modes including bars, waves, and custom presets
• Configurable audio processing with FFT size, smoothing, and sensitivity controls
• Support for local audio files, microphone input, and WebSocket audio streams
• Metadata display for now playing information and album artwork

    const visualizers = { bars: { settings: [...], draw: () => { ... } } };
    function draw() { analyser.getByteFrequencyData(audioData); visualizer.draw(store.modules, store)(); }
  

A sophisticated audio visualization web application featuring multiple visualizer modes, real-time audio processing, and customizable settings. The application supports local audio files, microphone input, and WebSocket streams, with smooth animations and metadata display capabilities.

• Web-based MIDI player that synchronizes audio samples with MIDI sequences
• Features customizable pitch shifting, playback speed control, and real-time waveform visualization
• Supports both pre-loaded library files and user-uploaded audio/MIDI files
• Includes offline WAV export functionality for rendered compositions
• Implements URL parameter sharing for reproducible configurations

    const sampler = new Tone.Sampler({ urls: { C4: url } });
    const player = new MidiPlayer.Player((event) => { sampler.triggerAttackRelease(shiftedNote, "8n"); });
  

This MIDIbeat application provides a complete web-based music production environment where users can combine audio samples with MIDI sequences. The interface includes waveform visualization, pitch and speed controls, and supports both library and custom file imports. A key feature is the offline WAV export capability that renders the synchronized audio using Tone.js's Offline context, allowing users to save their compositions as audio files. The application also supports URL-based sharing of configurations for easy collaboration and reproducibility.

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

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

• Procedural PCB simulator with logic gates, switches, LEDs, and seven-segment displays
• Smart A* routing algorithm with fan-out limits and collision avoidance
• CRT effect with scanlines and vignette for retro aesthetic
• Configurable settings including density, speed, glow effects, and seed-based generation

    const COMPONENT_OFFSET_X = 10;
    const COMPONENT_OFFSET_Y = 10;
  

This procedural PCB simulator generates randomized circuit boards with logic components that interact through smart routing algorithms. Users can adjust density, connection limits, and visual effects to create unique electronic layouts that simulate real-world PCB behavior with glowing traces and retro CRT aesthetics.

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

• HTML5 browser game with real-time multiplayer racing using MQTT
• Tile-based map editor with terrain generation and custom physics
• Chat system with moderation commands and user muting
• Leaderboard, minimap, and mobile touch controls
• Audio system with engine sounds and tire effects

    const CLIENT_ID = localStorage.getItem('drift_pid') || crypto.randomUUID();
    mqttClient = mqtt.connect(currentBroker, { clientId: CLIENT_ID, clean: true });
  

DRiFT.js is a multiplayer racing game built with HTML5 Canvas and MQTT for real-time networking. Players can create custom tracks, adjust car physics, and race against others in shared rooms. The game features a tile-based map editor, particle effects for drifting, and a complete audio system with engine and tire sounds. Cross-platform support includes desktop keyboard controls and mobile touch controls.

• 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 with voxel graphics and artistic pixel art completion
• Custom level importer that converts images into playable game boards with color palettes
• Auto-play mode with hint system and fluid background animations that respond to game colors
• Export functionality for sharing completed art cards via SMS, web share API, or image download

    const LEVELS = { 'flower': { name: 'Fire Flower', grid: 10, resolution: 16, keepBg: false, imageUrl: "data:image/svg+xml;charset=utf-8," + encodeURIComponent('
    function attemptSwap(b1, b2) { gameState = STATE.SWAPPING; lastInteraction = { x: b2.gridX, y: b2.gridY }; /* swap logic */ };