Skip to content
Vibro Music
Leaderboard Blog Launch visualizer
  1. Home
  2. Blog

Engineering notes

How we build Vibro Music

Long-form notes on the things that turned out to be harder than expected: rendering full-screen shaders at 60 fps, turning a microphone into numbers a GPU can dance to, and letting anonymous strangers vote without letting them cheat.

  • Backend · Anti-abuse

    How we implement a mass-scale thumbs up and thumbs down

    Anonymous ratings with no accounts and no database read on the hot path. Cloudflare Turnstile for bot resistance, HMAC-signed identity cookies, hashed and daily-rotated network buckets, atomic DynamoDB rate limits, and a Wilson-score leaderboard precomputed into a static JSON file.

    • Cloudflare Turnstile
    • DynamoDB
    • Rate limiting
    • Wilson score
    • 13 min
  • Rendering · Performance

    How to create fluid animation on the web

    WebGL, WebGPU, Canvas 2D, SVG, CSS and the Houdini Paint API compared on the axis that actually predicts failure: what their cost scales with. Plus a decision procedure, and the timing rules — delta clamping, frame-rate-independent smoothing, reduced motion — that decide whether motion feels fluid at all.

    • WebGL
    • Canvas
    • WebGPU
    • requestAnimationFrame
    • 14 min
  • Graphics · Audio

    Shader basics, and how to connect them to music

    Fragment shaders from first principles — normalized coordinates, distance fields, cosine palettes — then the full Web Audio pipeline: FFT band splitting with a perceptual tilt, adaptive normalization that works in any room, beat detection, and passing the whole spectrum to the GPU as a 1024×2 texture.

    • GLSL
    • WebGL2
    • Web Audio API
    • Beat detection
    • 16 min
Visualizer Leaderboard Blog

Audio stays local · No account · Anonymous ratings · Free to use