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.

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

• Interactive 3D spinning text generator using Three.js with customizable font, size, thickness, speed, and color
• Loads Google Fonts dynamically from GitHub via API, with search functionality for font selection
• URL-based state management enables sharing configurations and keyboard shortcut to toggle UI

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

A web-based 3D text spinner that fetches Google Fonts from GitHub, renders them in Three.js with real-time controls, and generates shareable URLs for each configuration. The application features a collapsible UI, font search, and smooth animation with customizable 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 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 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 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.

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

• 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, 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 */ };